Merge pull request #26 from mkobetic/webpack

coin2html: use webpack to produce the html page

.github/workflows/test.yaml

@@ -4,13 +4,17 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-    - name: Install Go
-      uses: actions/setup-go@v2
-    - name: Checkout code
-      uses: actions/checkout@v2
-    - name: Run tests
-      run: make test-go
-    - name: Test fixtures
-      run: |
-        make coin
-        make test-fixtures
+      - name: Install Go
+        uses: actions/setup-go@v2
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - name: Setup TS
+        run: make setup-ts
+      - name: Run tests
+        run: make test-go
+      - name: Test fixtures
+        run: |
+          make coin
+          make test-fixtures
+      - name: Test typescript
+        run: make test-ts

Makefile

@@ -29,7 +29,7 @@ csv2coin: *.go cmd/csv2coin/*.go
 gen2coin: *.go cmd/gen2coin/*.go
 	$(BUILD) -ldflags '$(LDFLAGS)' ./cmd/gen2coin
 
-coin2html: *.go cmd/coin2html/*.go cmd/coin2html/js/src/*.ts cmd/coin2html/js/*.html
+coin2html: *.go cmd/coin2html/*.go cmd/coin2html/js/src/*.ts cmd/coin2html/js/*.html cmd/coin2html/js/*.css
 	go generate ./cmd/coin2html
 	$(BUILD) -ldflags '$(LDFLAGS)' ./cmd/coin2html
 
@@ -40,14 +40,20 @@ examples/yearly/viewer/index.html: coin2html
 dfa: dfa.bash
 	cp ./dfa.bash $(GOPATH1)/bin/
 
-test: test-go test-fixtures
+test: test-go test-fixtures test-ts
 
-test-go:
+cmd/coin2html/js/dist/body.html:
+	go generate ./cmd/coin2html
+
+test-go: cmd/coin2html/js/dist/body.html
 	$(TEST) ./...
 
 test-fixtures: export COIN_TESTS=./tests
 test-fixtures:
-	find tests -name '*.test' -exec coin test '{}' \;
+	find tests -name '*.test' -print0 | xargs -0 -n1 $(shell go env GOPATH)/bin/coin test
+
+test-ts:
+	npm --prefix cmd/coin2html/js test
 
 fmt:
 	gofmt -s -l -w .
@@ -62,7 +68,10 @@ browse-coverage:
 	$(TEST) -coverprofile=/tmp/coverage.out ./...
 	go tool cover -html=/tmp/coverage.out
 
-setup:
+setup-ts:
+	npm --prefix cmd/coin2html/js install
+
+setup: setup-ts
 	go install github.com/golangci/golangci-lint/cmd/golangci-lint@latest
 
 .PHONY: test test-fixtures test-go fmt lint cover browse-coverage

cmd/coin2html/js/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

cmd/coin2html/js/README.md

@@ -0,0 +1,25 @@
+This is a Typescript project powering the coin2html single page viewer.
+
+The overarching goal is to have everything packaged in a single html file, the data, the style sheet, the code everything. It needs to run in the browser without being backed by any server infrastructure, just open the HTML file and that's it.
+
+For the longest time I tried to avoid using a JS builder, just piecing the final HTML file together from the various bits here. However the un-modularized Typescript code was difficult to test. I had hopes for ES module support in the browser, but it turns out that inlined modules are useless, cannot be imported (without resorting to some ugly hacks), so eventually I gave up and introduced webpack. I picked webpack because of its HtmlBundlerPlugin that can produce a single HTML page bundling everything.
+
+# Project structure
+
+The main pieces are
+
+- head.html - defines the HTML head part and pulls in styles.css
+- body.html - lays out the basic/static page structure and pulls in the typescript modules
+- styles.css - minimal styling for the page elements
+- src/ - contains all the typescript modules
+
+The bundler plugin pulls all of the above together producing two files in dist/
+
+- body.html
+- head.html
+
+coin2html looks for these two files to combine them with the JSON data and produce the final HTML page. This is all orchestrated by the `webpack.config.js`. The `npm build` script executes the process.
+
+# Testing
+
+`jest` is used as its the defacto standard these days. Use `npm test` to run the test.

cmd/coin2html/js/body.html

@@ -25,3 +25,6 @@ <h1>
     <section id="view"></section>
   </section>
 </div>
+
+<script src="src/models.ts"></script>
+<script src="src/views.ts"></script>

cmd/coin2html/js/head.html

@@ -3,9 +3,6 @@
   <head>
     <meta charset="UTF-8" />
     <title>COIN</title>
-    <script
-      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/d3.min.js"
-      charset="utf-8"
-    ></script>
+    <link href="styles.css" rel="stylesheet" />
   </head>
 </html>

cmd/coin2html/js/jest.config.js

@@ -0,0 +1,10 @@
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+module.exports = {
+  preset: "ts-jest",
+  testEnvironment: "node",
+  moduleDirectories: ["node_modules"],
+  transformIgnorePatterns: [`node_modules`],
+  moduleNameMapper: {
+    d3: "<rootDir>/node_modules/d3/dist/d3.min.js",
+  },
+};