fix(ui): migrate to vite

.dockerignore

@@ -1,5 +1,5 @@
 karma
-ui/build
+ui/dist
 ui/coverage
 ui/node_modules
 Dockerfile

.gitignore

@@ -1,8 +1,8 @@
 /coverage.txt
 /karma
 /karma-*
-/ui/build
-/ui/build.pre
+/ui/dist
+/ui/dist.pre
 /ui/coverage
 /ui/node_modules
 /ui/.eslintcache

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## v0.117
+
+### Changed
+
+- Migrated project from Create React App to [Vite](http://vitejs.dev).
+
 ## v0.116
 
 ### Added

Dockerfile

@@ -14,7 +14,7 @@ COPY go.mod /src/go.mod
 COPY go.sum /src/go.sum
 RUN make -C /src download-deps-go
 COPY --from=nodejs-builder /src/ui/src /src/ui/src
-COPY --from=nodejs-builder /src/ui/build /src/ui/build
+COPY --from=nodejs-builder /src/ui/dist /src/ui/dist
 COPY --from=nodejs-builder /src/ui/mock /src/ui/mock
 COPY --from=nodejs-builder /src/ui/embed.go /src/ui/embed.go
 COPY cmd /src/cmd

Makefile

@@ -15,7 +15,7 @@ test: lint
 
 .PHONY: clean
 clean:
-	rm -fr $(NAME) $(NAME)-* ui/build ui/build.pre ui/node_modules ui/coverage coverage.txt
+	rm -fr $(NAME) $(NAME)-* ui/dist ui/dist.pre ui/node_modules ui/coverage coverage.txt
 
 .PHONY: show-version
 show-version:

cmd/karma/main.go

@@ -87,7 +87,7 @@ func setupRouter(router *chi.Mux, historyPoller *historyPoller) {
 	compressor := middleware.NewCompressor(flate.DefaultCompression)
 	router.Use(compressor.Handler)
 
-	router.Use(serverStaticFiles(getViewURL("/"), "build"))
+	router.Use(serverStaticFiles(getViewURL("/"), "dist"))
 	router.Use(serverStaticFiles(getViewURL("/__test__/"), "mock"))
 	corsOptions := cors.Options{
 		AllowedOrigins:   config.Config.Listen.Cors.AllowedOrigins,
@@ -325,7 +325,7 @@ func setupLogger() error {
 
 func loadTemplates() error {
 	var t *template.Template
-	t, err := template.ParseFS(ui.StaticFiles, "build/index.html")
+	t, err := template.ParseFS(ui.StaticFiles, "dist/index.html")
 	if err != nil {
 		return fmt.Errorf("failed to load template: %w", err)
 	}

codecov.yml

@@ -8,7 +8,6 @@ coverage:
         flags:
           - backend
       ui:
-        target: 100
-        threshold: 0
+        target: auto
         flags:
           - ui

demo/Dockerfile

@@ -16,7 +16,7 @@ RUN make -C /src download-deps-go
 COPY --from=nodejs-builder /src/ui/embed.go /src/ui/embed.go
 COPY --from=nodejs-builder /src/ui/mock /src/ui/mock
 COPY --from=nodejs-builder /src/ui/src /src/ui/src
-COPY --from=nodejs-builder /src/ui/build /src/ui/build
+COPY --from=nodejs-builder /src/ui/dist /src/ui/dist
 COPY cmd /src/cmd
 COPY internal /src/internal
 ARG VERSION

make/cc.mk

@@ -1,7 +1,7 @@
 include make/vars.mk
 
 word-split = $(word $2,$(subst -, ,$1))
-cc-%: go.mod go.sum $(SOURCES_GO) ui/build/index.html
+cc-%: go.mod go.sum $(SOURCES_GO) ui/dist/index.html
 	$(eval GOOS := $(call word-split,$*,1))
 	$(eval GOARCH := $(call word-split,$*,2))
 	$(eval GOARM := $(call word-split,$*,3))

make/go.mk

@@ -5,11 +5,11 @@ ifeq ($(GOBIN),)
 GOBIN = $(shell go env GOPATH)/bin
 endif
 
-ui/build/index.html: $(call rwildcard, ui/src ui/package.json ui/package-lock.json, *)
+ui/dist/index.html: $(call rwildcard, ui/src ui/package.json ui/package-lock.json, *)
 	@$(MAKE) -C ui build
 
 .DEFAULT_GOAL := $(NAME)
-$(NAME): go.mod go.sum $(SOURCES_GO) ui/build/index.html
+$(NAME): go.mod go.sum $(SOURCES_GO) ui/dist/index.html
 	go build -trimpath -modcacherw -ldflags "-X main.version=$(VERSION) -s -w" ./cmd/karma
 
 .PHONY: test-go
@@ -55,11 +55,12 @@ openapi-client:
 
 .PHONY: mock-assets
 mock-assets:
-	rm -fr ui/build
-	mkdir ui/build
-	cp ui/public/* ui/build/
-	mkdir ui/build/static
-	touch ui/build/static/main.js
+	rm -fr ui/dist
+	mkdir ui/dist
+	cp ui/public/* ui/dist/
+	cp ui/index.html ui/dist/
+	mkdir ui/dist/assets
+	touch ui/dist/assets/main.js
 
 .PHONY: tools-go-mod-tidy
 tools-go-mod-tidy:

make/vars.mk

@@ -7,4 +7,4 @@ VERSION ?= $(shell git describe --tags --always --dirty='-dev')
 rwildcard = $(foreach d, $(wildcard $1*), $(call rwildcard,$d/,$2) $(filter $(subst *,%,$2),$d))
 
 SOURCES_GO = $(call rwildcard, cmd internal, *)
-SOURCES_JS = $(call rwildcard, ui/build/index.html ui/src, *)
+SOURCES_JS = $(call rwildcard, ui/dist/index.html ui/src, *)

scripts/ci-diff-webpack.sh

@@ -7,11 +7,11 @@ git fetch origin main
 git reset --hard FETCH_HEAD
 
 make -C ui build/stats.json
-mv ui/build/stats.json main.json
+mv ui/dist/stats.json main.json
 
 make clean
 git reset --hard ${GITHUB_SHA}
 make -C ui build/stats.json
 
-./scripts/cra-bundle-stats-diff.py main.json ui/build/stats.json | tee diff.html
+./scripts/cra-bundle-stats-diff.py main.json ui/dist/stats.json | tee diff.html
 ./scripts/pr-comment.py "Webpack bundle size diff" diff.html html

ui/.browserslistrc

@@ -0,0 +1,9 @@
+>= 1%
+last 1 major version
+not dead
+Chrome >= 49
+Firefox >= 52
+Edge >= 12
+iOS >= 9
+Safari >= 10
+Android >= 4.4

ui/.depcheckrc.yaml

@@ -6,12 +6,15 @@ ignores:
   - sass
   - typeface-open-sans
   - prettier
-  - react-scripts
+  - vite
   - typescript
   # devDeps
   - "@types/jest"
   - "@types/node"
-  - "purgecss"
   - "eslint-plugin-jest"
   - "node-fetch"
   - "@babel/plugin-proposal-private-property-in-object"
+  - identity-obj-proxy
+  - jest
+  - jest-fetch-mock
+  - terser

ui/Makefile

@@ -10,7 +10,7 @@ NODE_INSTALL := $(NODE_MODULES)/.install
 PATH         := $(PATH):$(NODE_PATH)
 SHELL        := env PATH=$(PATH) /bin/sh
 
-.DEFAULT_GOAL := build/index.html
+.DEFAULT_GOAL := dist/index.html
 
 $(NODE_INSTALL): package.json package-lock.json
 	@if [ -e $(NODE_INSTALL) ]; then npm install ; else npm ci; fi
@@ -22,16 +22,16 @@ npm-fetch: $(NODE_INSTALL)
 $(NODE_PATH)/%: $(NODE_INSTALL)
 	@if [ ! -x $@ ]; then echo "missing script: $@" ; exit 1; fi
 
-build/index.html: $(NODE_INSTALL) $(NODE_PATH)/react-scripts $(call rwildcard, public src, *) purgecss.config.js restore-css
+dist/index.html: $(NODE_INSTALL) $(NODE_PATH)/vite $(call rwildcard, public src, *)
 	@rm -fr node_modules/.cache/eslint-loader
 	cat node_modules/bootstrap/scss/_root.scss | sed s/':root {'/'* {'/ > src/Styles/BootstrapRoot.scss
 	npm run build
 
 .PHONY: build
-build: build/index.html
+build: dist/index.html
 
 .PHONY: test-js
-test-js: $(NODE_PATH)/react-scripts $(NODE_PATH)/jest
+test-js: $(NODE_PATH)/vite $(NODE_PATH)/jest
 	CI=true NODE_OPTIONS="--unhandled-rejections=strict" npm test -- --coverage
 
 .PHONY: lint-js
@@ -49,22 +49,8 @@ lint-typescript:
 format: $(NODE_PATH)/prettier
 	prettier --write 'src/**/*.ts' 'src/**/*.tsx'
 
-build/stats.json: build
-	env NODE_OPTIONS=--no-experimental-fetch npx source-map-explorer build/static/*/*.{js,css} --json > build/stats.json
-
-.PHONY: backup-css
-backup-css:
-	mkdir -p build/static/css build.pre/static
-	rm -fr build.pre/static/*
-	cp -R build/static/css build.pre/static/css
-
-.PHONY: restore-css
-restore-css:
-	@(test -d build/static/css && test -d build.pre/static/css && rm -fr build/static/css && cp -R build.pre/static/css build/static/css) || echo
-
-build.pre/css.diff: build purgecss.config.js
-	npx prettier -w build.pre/static/css/*.css build/static/css/*.css
-	diff -uNr build.pre/static/css build/static/css > build.pre/css.diff || echo
+dist/stats.json: build
+	env NODE_OPTIONS=--no-experimental-fetch npx source-map-explorer dist/assets/*.{js,css} --json > dist/stats.json
 
 .PHONY: npm-upgrade
 npm-upgrade:

ui/embed.go

@@ -2,7 +2,7 @@ package ui
 
 import "embed"
 
-//go:embed build/* mock/*
+//go:embed dist/* mock/*
 
 // StaticFiles exports build and src directorires as embed.FS
 var StaticFiles embed.FS

ui/public/index.html → ui/index.html

@@ -57,5 +57,6 @@
     <script type="text/plain" id="defaults">
       {{ .Defaults }}
     </script>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>