chore: migrate to Vite and Bun to build the frontend

Dropped some dependencies which no longer worked:

- monaco-editor-vue3 - replaced with a tiny wrapper.
- polyfill for streaming classes - replaced with vite plugin for
  polyfills.
- buffer - replaced base64 encoding with calls from the `fetch.pb.ts`.

Dropped the code that sets up monaco in `main.ts` in favor of Vite
monaco plugin that does that for you.

Updated `monaco-yaml` as the old version didn't work with Vite.

Switched from `Jest` to `bun:test`.

Use TypeScript in the tailwind config, as it imports `colors.ts` now.
Had to use TypeScript for `colors` as Vite can't import CommonJS
modules.

Add eslint linter to the `lint` dependencies, enable a bit more linters
and fix all detected errors.

Fixes: #294

Signed-off-by: Artem Chernyshev <[email protected]>

.dockerignore

@@ -1,19 +1,21 @@
 # THIS FILE WAS AUTOMATICALLY GENERATED, PLEASE DO NOT EDIT.
 #
-# Generated on 2024-02-26T21:35:48Z by kres latest.
+# Generated on 2024-06-05T19:29:29Z by kres f292767-dirty.
 
 *
 !frontend/src
-!frontend/tests
-!frontend/public
+!frontend/test
 !client/api
 !client/pkg
 !cmd
 !internal
 !docs
 !frontend/*.json
+!frontend/*.toml
 !frontend/*.js
-!frontend/.eslintrc.yaml
+!frontend/*.ts
+!frontend/*.html
+!frontend/eslint.config.js
 !internal/frontend/frontend.go
 !client/go.mod
 !client/go.sum

Dockerfile

@@ -2,7 +2,7 @@
 
 # THIS FILE WAS AUTOMATICALLY GENERATED, PLEASE DO NOT EDIT.
 #
-# Generated on 2024-06-03T11:20:02Z by kres f292767.
+# Generated on 2024-06-06T12:40:29Z by kres 14c10c9-dirty.
 
 ARG JS_TOOLCHAIN
 ARG TOOLCHAIN
@@ -20,17 +20,16 @@ ENV GOPATH /go
 ENV PATH ${PATH}:/usr/local/go/bin
 
 # runs markdownlint
-FROM docker.io/node:22.2.0-alpine3.19 AS lint-markdown
+FROM docker.io/oven/bun:1.1.12-alpine AS lint-markdown
 WORKDIR /src
-RUN npm i -g [email protected]
-RUN npm i [email protected]
+RUN bun i [email protected] [email protected]
 COPY .markdownlint.json .
 COPY ./docs ./docs
 COPY ./CHANGELOG.md ./CHANGELOG.md
 COPY ./CONTRIBUTING.md ./CONTRIBUTING.md
 COPY ./DEVELOPMENT.md ./DEVELOPMENT.md
 COPY ./README.md ./README.md
-RUN markdownlint --ignore "CHANGELOG.md" --ignore "**/node_modules/**" --ignore '**/hack/chglog/**' --rules node_modules/sentences-per-line/index.js .
+RUN bunx markdownlint --ignore "CHANGELOG.md" --ignore "**/node_modules/**" --ignore '**/hack/chglog/**' --rules node_modules/sentences-per-line/index.js .
 
 # collects proto specs
 FROM scratch AS proto-specs
@@ -84,21 +83,16 @@ ARG PROTOBUF_GRPC_GATEWAY_TS_VERSION
 RUN --mount=type=cache,target=/root/.cache/go-build --mount=type=cache,target=/go/pkg go install github.com/siderolabs/protoc-gen-grpc-gateway-ts@v${PROTOBUF_GRPC_GATEWAY_TS_VERSION}
 RUN mv /go/bin/protoc-gen-grpc-gateway-ts /bin
 COPY frontend/package.json ./
-COPY frontend/package-lock.json ./
-RUN --mount=type=cache,target=/src/node_modules npm version ${VERSION}
-RUN --mount=type=cache,target=/src/node_modules npm ci && npm run verify
-COPY frontend/.eslintrc.yaml ./
-COPY frontend/babel.config.js ./
-COPY frontend/jest.config.js ./
-COPY frontend/tsconfig.json ./
+RUN --mount=type=cache,target=/src/node_modules bun install
+COPY frontend/tsconfig*.json ./
+COPY frontend/bunfig.toml ./
+COPY frontend/*.html ./
+COPY frontend/*.ts ./
+COPY frontend/*.js ./
 COPY ./frontend/src ./src
-COPY ./frontend/tests ./tests
-COPY ./frontend/public ./public
-COPY ./frontend/babel.config.js ./babel.config.js
-COPY ./frontend/jest.config.js ./jest.config.js
+COPY ./frontend/test ./test
+COPY ./frontend/eslint.config.js ./eslint.config.js
 COPY ./frontend/postcss.config.js ./postcss.config.js
-COPY ./frontend/tailwind.config.js ./tailwind.config.js
-COPY ./frontend/vue.config.js ./vue.config.js
 
 # build tools
 FROM --platform=${BUILDPLATFORM} toolchain AS tools
@@ -139,14 +133,14 @@ RUN go install mvdan.cc/gofumpt@${GOFUMPT_VERSION} \
 
 # builds frontend
 FROM --platform=${BUILDPLATFORM} js AS frontend
-ARG NODE_BUILD_ARGS
-RUN --mount=type=cache,target=/src/node_modules npm run build ${NODE_BUILD_ARGS}
+ARG JS_BUILD_ARGS
+RUN --mount=type=cache,target=/src/node_modules bun run build ${JS_BUILD_ARGS}
 RUN mkdir -p /internal/frontend/dist
 RUN cp -rf ./dist/* /internal/frontend/dist
 
 # runs eslint
 FROM js AS lint-eslint
-RUN --mount=type=cache,target=/src/node_modules npm run lint
+RUN --mount=type=cache,target=/src/node_modules bun run lint
 
 # runs protobuf compiler
 FROM js AS proto-compile-frontend
@@ -184,7 +178,8 @@ RUN rm /frontend/src/api/omni/specs/ephemeral.proto
 
 # runs js unit-tests
 FROM js AS unit-tests-frontend
-RUN --mount=type=cache,target=/src/node_modules CI=true npm run test
+RUN --mount=type=cache,target=/src/node_modules bun add -d @happy-dom/global-registrator
+RUN --mount=type=cache,target=/src/node_modules CI=true bun run test
 
 FROM tools AS embed-generate
 ARG SHA

Makefile

@@ -1,6 +1,6 @@
 # THIS FILE WAS AUTOMATICALLY GENERATED, PLEASE DO NOT EDIT.
 #
-# Generated on 2024-06-03T11:20:02Z by kres f292767.
+# Generated on 2024-06-06T10:06:36Z by kres dc18ad9-dirty.
 
 # common variables
 
@@ -19,10 +19,10 @@ USERNAME ?= siderolabs
 REGISTRY_AND_USERNAME ?= $(REGISTRY)/$(USERNAME)
 PROTOBUF_GRPC_GATEWAY_TS_VERSION ?= 1.2.1
 TESTPKGS ?= ./...
-NODE_BUILD_ARGS ?=
+JS_BUILD_ARGS ?=
 PROTOBUF_GO_VERSION ?= 1.34.1
 GRPC_GO_VERSION ?= 1.4.0
-GRPC_GATEWAY_VERSION ?= 2.19.1
+GRPC_GATEWAY_VERSION ?= 2.20.0
 VTPROTOBUF_VERSION ?= 0.6.0
 GOIMPORTS_VERSION ?= 0.21.0
 DEEPCOPY_VERSION ?= v0.5.6
@@ -56,7 +56,7 @@ COMMON_ARGS += --build-arg=USERNAME="$(USERNAME)"
 COMMON_ARGS += --build-arg=REGISTRY="$(REGISTRY)"
 COMMON_ARGS += --build-arg=JS_TOOLCHAIN="$(JS_TOOLCHAIN)"
 COMMON_ARGS += --build-arg=PROTOBUF_GRPC_GATEWAY_TS_VERSION="$(PROTOBUF_GRPC_GATEWAY_TS_VERSION)"
-COMMON_ARGS += --build-arg=NODE_BUILD_ARGS="$(NODE_BUILD_ARGS)"
+COMMON_ARGS += --build-arg=JS_BUILD_ARGS="$(JS_BUILD_ARGS)"
 COMMON_ARGS += --build-arg=TOOLCHAIN="$(TOOLCHAIN)"
 COMMON_ARGS += --build-arg=CGO_ENABLED="$(CGO_ENABLED)"
 COMMON_ARGS += --build-arg=GO_BUILDFLAGS="$(GO_BUILDFLAGS)"
@@ -72,7 +72,7 @@ COMMON_ARGS += --build-arg=DEEPCOPY_VERSION="$(DEEPCOPY_VERSION)"
 COMMON_ARGS += --build-arg=GOLANGCILINT_VERSION="$(GOLANGCILINT_VERSION)"
 COMMON_ARGS += --build-arg=GOFUMPT_VERSION="$(GOFUMPT_VERSION)"
 COMMON_ARGS += --build-arg=TESTPKGS="$(TESTPKGS)"
-JS_TOOLCHAIN ?= docker.io/node:22.2.0-alpine3.19
+JS_TOOLCHAIN ?= docker.io/oven/bun:1.1.12-alpine
 TOOLCHAIN ?= docker.io/golang:1.22-alpine
 
 # extra variables
@@ -272,7 +272,7 @@ lint-markdown:  ## Runs markdownlint.
 	@$(MAKE) target-$@
 
 .PHONY: lint
-lint: lint-golangci-lint-client lint-gofumpt-client lint-govulncheck-client lint-golangci-lint lint-gofumpt lint-govulncheck lint-markdown  ## Run all linters for the project.
+lint: lint-eslint lint-golangci-lint-client lint-gofumpt-client lint-govulncheck-client lint-golangci-lint lint-gofumpt lint-govulncheck lint-markdown  ## Run all linters for the project.
 
 .PHONY: image-omni
 image-omni:  ## Builds image for omni.

frontend/.gitignore

@@ -1,4 +1,24 @@
-# THIS FILE WAS AUTOMATICALLY GENERATED, PLEASE DO NOT EDIT.
-#
-# Generated on 2021-03-25T18:30:52Z by kres 9833490-dirty.
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
 
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/bunfig.toml

@@ -0,0 +1,2 @@
+[test]
+preload = "./test/setup.ts"

frontend/eslint.config.js

@@ -0,0 +1,39 @@
+// Copyright (c) 2024 Sidero Labs, Inc.
+//
+// Use of this software is governed by the Business Source License
+// included in the LICENSE file.
+
+// THIS FILE WAS AUTOMATICALLY GENERATED, PLEASE DO NOT EDIT.
+//
+// Generated on 2024-06-06T10:10:11Z by kres 827a05c-dirty.
+
+// run bun install eslint-plugin-vue typescript-eslint -d for each frontend
+// to make the linter work
+//@ts-check
+import pluginVue from 'eslint-plugin-vue'
+import tseslint from 'typescript-eslint';
+
+export default [
+  ...tseslint.configs.recommended,
+  ...pluginVue.configs['flat/essential'],
+  {
+    rules: {
+      "@typescript-eslint/no-explicit-any": "off",
+      "no-console": "off",
+      "vue/multi-word-component-names": "off",
+      "vue/no-unused-vars": "error"
+    },
+    plugins: {
+      'typescript-eslint': tseslint.plugin,
+    },
+    languageOptions: {
+      parserOptions: {
+        parser: tseslint.parser,
+        project: './tsconfig.json',
+        extraFileExtensions: ['.vue'],
+        sourceType: 'module',
+      },
+    },
+  }
+]
+

frontend/public/index.html → frontend/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="/favicon.ico">
     <title>Omni</title>
   </head>
   <body>
@@ -13,5 +13,6 @@
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>