Migrate to Vite

.editorconfig

@@ -7,7 +7,7 @@ end_of_line = lf
 indent_size = 2
 indent_style = space
 insert_final_newline = true
-max_line_length = 80
+max_line_length = 120
 trim_trailing_whitespace = true
 
 [*.md]

.github/workflows/release.yml

@@ -80,12 +80,12 @@ jobs:
         working-directory: ./web
         env:
           NODE_ENV: "production"
-          REACT_APP_VERSION: "${{ env.RELEASE_VERSION }}"
-          REACT_APP_GITHUB_URL: "${{ github.server_url }}/${{ github.repository }}"
-          REACT_APP_GO_VERSION: "${{ env.GO_VERSION }}"
-          REACT_APP_PREV_GO_VERSION: "${{ env.PREV_GO_VERSION }}"
-          REACT_APP_WASM_API_VER: "${{ env.WASM_API_VER }}"
-          REACT_APP_WASM_BASE_URL: "/wasm"
+          VITE_VERSION: "${{ env.RELEASE_VERSION }}"
+          VITE_GITHUB_URL: "${{ github.server_url }}/${{ github.repository }}"
+          VITE_GO_VERSION: "${{ env.GO_VERSION }}"
+          VITE_PREV_GO_VERSION: "${{ env.PREV_GO_VERSION }}"
+          VITE_WASM_API_VER: "${{ env.WASM_API_VER }}"
+          VITE_WASM_BASE_URL: "/wasm"
 
       - name: Build and push image
         uses: docker/build-push-action@v5

Makefile

@@ -29,10 +29,10 @@ include build.mk
 include docker.mk
 
 # Exports
-export REACT_APP_VERSION=$(APP_VERSION)
-export REACT_APP_GITHUB_URL=$(REPO_URL)
-export REACT_APP_WASM_API_VER=$(WASM_API_VER)
-export REACT_APP_WASM_BASE_URL=/wasm
+export VITE_VERSION=$(APP_VERSION)
+export VITE_GITHUB_URL=$(REPO_URL)
+export VITE_WASM_API_VER=$(WASM_API_VER)
+export VITE_WASM_BASE_URL=/wasm
 
 .PHONY:run
 run:

build.mk

@@ -59,7 +59,7 @@ build-ui:
 
 .PHONY: wasm_exec.js
 wasm_exec.js:
-	@cp "$(GOROOT)/misc/wasm/wasm_exec.js" $(PUBLIC_DIR)/wasm/wasm_exec@$(WASM_API_VER).js
+	@cp "$(GOROOT)/misc/wasm/wasm_exec.js" $(UI)/src/lib/go/wasm_exec.js
 
 .PHONY:build-webworker
 analyzer.wasm:

build/Dockerfile

@@ -15,13 +15,13 @@ ARG PREV_GO_VERSION
 COPY web /tmp/web
 WORKDIR /tmp/web
 RUN yarn install --silent && \
-    REACT_APP_VERSION=$APP_VERSION \
+    VITE_VERSION=$APP_VERSION \
     NODE_ENV=production \
-    REACT_APP_GITHUB_URL=$GITHUB_URL \
-    REACT_APP_GO_VERSION=$GO_VERSION \
-    REACT_APP_PREV_GO_VERSION=$PREV_GO_VERSION \
-    REACT_APP_WASM_API_VER=$WASM_API_VER \
-    REACT_APP_WASM_BASE_URL=/wasm \
+    VITE_GITHUB_URL=$GITHUB_URL \
+    VITE_GO_VERSION=$GO_VERSION \
+    VITE_PREV_GO_VERSION=$PREV_GO_VERSION \
+    VITE_WASM_API_VER=$WASM_API_VER \
+    VITE_WASM_BASE_URL=/wasm \
     yarn build
 
 FROM golang:${GO_VERSION}-alpine as build
@@ -45,8 +45,7 @@ RUN echo "Building server with version $APP_VERSION" && \
       -buildvcs=false \
       -ldflags "-s -w" \
       -trimpath \
-      -o ./analyzer@$WASM_API_VER.wasm ./cmd/wasm/analyzer && \
-    cp $(go env GOROOT)/misc/wasm/wasm_exec.js ./wasm_exec@$WASM_API_VER.js
+      -o ./analyzer@$WASM_API_VER.wasm ./cmd/wasm/analyzer
 
 FROM golang:${GO_VERSION}-alpine as production
 ARG GO_VERSION
@@ -62,7 +61,6 @@ COPY data ./data
 COPY --from=ui-build /tmp/web/build ./public
 COPY --from=build /tmp/playground/server .
 COPY --from=build /tmp/playground/*.wasm ./public/wasm/
-COPY --from=build /tmp/playground/*.js ./public/wasm/
 EXPOSE 8000
 ENTRYPOINT /opt/playground/server \
     -f='/opt/playground/data/packages.json' \

build/release.dockerfile

@@ -32,8 +32,7 @@ RUN echo "Building server with version $APP_VERSION" && \
       -buildvcs=false \
       -ldflags "-s -w" \
       -trimpath \
-      -o ./analyzer@$WASM_API_VER.wasm ./cmd/wasm/analyzer && \
-    cp $(go env GOROOT)/misc/wasm/wasm_exec.js ./wasm_exec@$WASM_API_VER.js
+      -o ./analyzer@$WASM_API_VER.wasm ./cmd/wasm/analyzer
 
 FROM golang:${GO_VERSION}-alpine as production
 ARG GO_VERSION
@@ -48,7 +47,6 @@ COPY data ./data
 COPY web/build ./public
 COPY --from=build /tmp/playground/server .
 COPY --from=build /tmp/playground/*.wasm ./public/wasm/
-COPY --from=build /tmp/playground/*.js ./public/wasm/
 EXPOSE 8000
 ENTRYPOINT /opt/playground/server \
     -f='/opt/playground/data/packages.json' \

web/.eslintignore

@@ -1,2 +1,9 @@
 build/
-public/
+public/
+.eslintrc.cjs
+vite.config.ts
+.vscode
+.github
+*.d.ts
+wasm_exec.js
+**/node_modules

web/.eslintrc.cjs

@@ -0,0 +1,82 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true
+  },
+  extends: [
+    "plugin:react/recommended",
+    "eslint:recommended",
+    "plugin:react-hooks/recommended",
+    "standard-with-typescript",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended"
+  ],
+  plugins: [
+    "react",
+    "react-hooks",
+    "import",
+    "@typescript-eslint",
+    "prettier",
+    "unused-imports"
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+    ecmaFeatures: {
+      jsx: true
+    },
+    sourceType: "module",
+    project: [
+      "tsconfig.json"
+    ],
+    tsconfigRootDir: __dirname
+  },
+  settings: {
+    react: {
+      version: "detect"
+    },
+    'import/extensions': [
+      ".js",
+      ".jsx",
+      ".ts",
+      ".tsx"
+    ],
+    'import/parsers': {
+      '@typescript-eslint/parser': [
+        ".ts",
+        ".tsx"
+      ]
+    },
+    'import/resolver': {
+      typescript: {
+        alwaysTryTypes: true
+      }
+    }
+  },
+  rules: {
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/strict-boolean-expressions': 'off',
+    '@typescript-eslint/consistent-indexed-object-style': 'off',
+    '@typescript-eslint/no-dynamic-delete': 'off',
+    '@typescript-eslint/no-misused-promises': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-unsafe-argument': 'off',
+    '@typescript-eslint/restrict-template-expressions': 'off',
+    '@typescript-eslint/triple-slash-reference': 'off',
+    '@typescript-eslint/prefer-nullish-coalescing': 'off',
+    '@typescript-eslint/no-confusing-void-expression': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    'import/no-named-as-default-member': 'off',
+    '@typescript-eslint/ban-types': [
+      "error",
+      {
+        "types": {
+          "Function": false,
+          "{}": false,
+        },
+        "extendDefaults": true
+      }
+    ],
+  }
+}

web/.prettierrc.json

@@ -0,0 +1,15 @@
+{
+  "bracketSpacing": true,
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "printWidth": 120,
+  "proseWrap": "always",
+  "semi": false,
+  "tabWidth": 2,
+  "arrowParens": "always",
+  "trailingComma": "all",
+  "bracketSameLine": false,
+  "options": {
+    "editorconfig": true
+  }
+}

web/package.json

@@ -1,9 +1,9 @@
 {
   "name": "ui",
+  "type": "module",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@craco/craco": "^6.4.3",
     "@fluentui/react": "^8.52.3",
     "@monaco-editor/loader": "^1.4.0",
     "@monaco-editor/react": "^4.6.0",
@@ -21,12 +21,10 @@
     "@xterm/addon-webgl": "^0.17.0-beta.1",
     "@xterm/xterm": "^5.4.0-beta.1",
     "axios": "^1.6.0",
-    "circular-dependency-plugin": "^5.2.2",
     "clsx": "^1.1.1",
     "connected-react-router": "^6.9.2",
     "copy-to-clipboard": "^3.3.1",
     "core-js": "^3.35.1",
-    "craco-alias": "^3.0.1",
     "dexie": "^3.2.3",
     "file-saver": "^2.0.5",
     "monaco-editor": "^0.45.0",
@@ -37,10 +35,9 @@
     "react-icons": "^4.3.1",
     "react-redux": "^7.2.6",
     "react-router-dom": "^5.3.0",
-    "react-scripts": "5.0.0",
     "redux": "^4.1.2",
     "redux-thunk": "^2.4.1",
-    "typescript": "^4.5.5",
+    "typescript": "^5.3.3",
     "util": "^0.12.4",
     "uuid": "^3.4.0",
     "web-vitals": "^2.1.4",
@@ -58,10 +55,9 @@
     "workbox-streams": "^6.5.4"
   },
   "scripts": {
-    "start": "GENERATE_SOURCEMAP=true craco start",
-    "build": "GENERATE_SOURCEMAP=false craco build",
-    "test": "craco test",
-    "eject": "craco eject",
+    "start": "vite",
+    "build": "GENERATE_SOURCEMAP=false vite build",
+    "serve": "vite preview",
     "lint": "npx eslint .",
     "gen:suggestions": "node ./src/editor/internal/genpkgcache.js"
   },
@@ -85,15 +81,30 @@
   },
   "devDependencies": {
     "@types/node": "^17.0.16",
-    "eslint": "^8.37.0",
+    "@typescript-eslint/eslint-plugin": "^6.20.0",
+    "@typescript-eslint/parser": "^6.20.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.0",
-    "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-import": "^2.25.3",
+    "eslint-config-standard-with-typescript": "^43.0.1",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jest": "^25.3.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.27.1",
-    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-n": "^16.6.2",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-testing-library": "^5.0.1",
-    "http-proxy-middleware": "^2.0.6"
+    "eslint-plugin-unused-imports": "^3.0.0",
+    "prettier": "^3.2.4",
+    "vite": "^5.0.12",
+    "vite-plugin-html": "^3.2.2",
+    "vite-plugin-node-polyfills": "^0.19.0",
+    "vite-plugin-static-copy": "^1.0.1",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-tsconfig-paths": "^4.3.1"
   }
 }

web/src/App.test.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { App } from './App';
+import React from 'react'
+import { render } from '@testing-library/react'
+import { App } from './App'
 
 test('renders learn react link', () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
+  const { getByText } = render(<App />)
+  const linkElement = getByText(/learn react/i)
+  expect(linkElement).toBeInTheDocument()
+})