Merge pull request #1841 from hoeck/vite-static-build

Vite static build, fixes #1735

Author: hoeck

.eslintrc.json

@@ -6,6 +6,7 @@
     "project": "./tsconfig.json",
     "sourceType": "module"
   },
+  "ignorePatterns": ["docs/"],
   "rules": {
     "node/no-unpublished-import": "off",
     "@typescript-eslint/consistent-type-imports": [
@@ -17,13 +18,5 @@
     ],
     "@typescript-eslint/consistent-type-exports": "error",
     "@typescript-eslint/no-import-type-side-effects": "error"
-  },
-  "overrides": [
-    {
-      "files": ["docs/**/*.tsx"],
-      "parserOptions": {
-        "project": "./tsconfig.docs.json"
-      }
-    }
-  ]
+  }
 }

.github/workflows/pages.yml

@@ -24,6 +24,10 @@ jobs:
   deploy:
     runs-on: ubuntu-latest
 
+    defaults:
+      run:
+        working-directory: "./docs"
+
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -34,16 +38,19 @@ jobs:
       - name: Install
         run: npm ci
 
+      - name: Lint
+        run: npm run lint
+
       - name: Build docs
-        run: npm run docs:build
+        run: npm run build
 
       - name: Setup Pages
         uses: actions/configure-pages@v5
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: 'docs'
+          path: "./docs/dist"
 
       - name: Deploy to GitHub Pages
         id: deployment

.gitignore

@@ -99,9 +99,6 @@ out
 .nuxt
 dist
 
-# react / gatsby
-public/
-
 # Gatsby files
 .cache/
 # Comment in the public line in if your project uses Gatsby and not Next.js
@@ -150,9 +147,6 @@ public/
 
 # End of https://www.toptal.com/developers/gitignore/api/node
 
-# docs build artifacts
-docs/dist
-
 # spectype build artifacts
 cases/spectypes/build
 

README.md

@@ -124,11 +124,21 @@ const res = isMyDataValid(data)
 * `npm run test` - run build process and tests for all modules
 * `npm run test:build` - run build process for all modules
 
-#### Docs
+#### Benchmark Viewer
 
-* `npm run docs:serve` - result viewer
-* `npm run docs:build` - build docs
-* `npm run docs:watch` - watch docs for changes and rebuild
+A basic preact+vite app lives in [`/docs`](/docs).
+It is deployed via github pages whenever something has been pushed to the main branch.
+
+```sh
+cd docs
+
+npm run dev     # develop / view results
+npm run build   # build
+npm run preview # preview the build
+```
+
+When viewing results locally, you will need to restart the app whenever the
+results are updated.
 
 #### Linting
 
@@ -163,18 +173,18 @@ const res = isMyDataValid(data)
 ### Node.js runtime
 
 * update Node.js version matrix in `.github/workflows/pr.yml` and `.github/workflows/release.yml`
-* update `NODE_VERSIONS` in `docs/dist/app.tsx` and run `npm run docs:build`
+* update `NODE_VERSIONS` in `docs/src/App.tsx`
 * optionally set `NODE_VERSION_FOR_PREVIEW` in `benchmarks/helpers/main.ts`
 
 ### Bun runtime
 
 * update bun version matrix in `.github/workflows/pr.yml` and `.github/workflows/release.yml`
-* update `BUN_VERSIONS` in `docs/dist/app.tsx` and run `npm run docs:build`
+* update `BUN_VERSIONS` in `docs/src/App.tsx`
 
 ### Deno runtime
 
 * update Deno version matrix in `.github/workflows/pr.yml` and `.github/workflows/release.yml`
-* update `DENO_VERSIONS` in `docs/dist/app.tsx` and run `npm run docs:build`
+* update `DENO_VERSIONS` in `docs/src/App.tsx`
 
 ## Test cases
 

docs/.gitignore

@@ -0,0 +1,6 @@
+# build artifacts
+dist
+
+# copy of results accessible to the viewer app
+public/results
+public/packagesPopularity.json

docs/eslint.config.js

@@ -0,0 +1,19 @@
+// generated with `npm init @eslint/config@latest`
+import js from '@eslint/js';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+import { defineConfig, globalIgnores } from 'eslint/config';
+
+export default defineConfig([
+  globalIgnores(['dist', 'eslint.config.js']),
+  {
+    files: ['src/**/*.{ts, tsx}'],
+    plugins: { js },
+    extends: ['js/recommended'],
+  },
+  {
+    files: ['src/**/*.{ts, tsx}'],
+    languageOptions: { globals: globals.browser },
+  },
+  tseslint.configs.recommended,
+]);

docs/index.html

@@ -1,33 +1,29 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta name="description" content="Benchmark Comparison of Packages with Runtime Validation and TypeScript Support.">
-        <meta name="color-scheme" content="dark light">
-
-        <title>Runtype Benchmarks</title>
-
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css">
-        <style>
-            @media (prefers-color-scheme:dark) {
-              /* fix vega graph labels in dark mode */
-              svg .mark-text text {
-                fill: white;
-              }
-            }
-            </style>
-    </head>
-    <body>
-        <script src="https://unpkg.com/samd@0/dist/samd.js" crossorigin></script>
-        <script src="https://unpkg.com/[email protected]" crossorigin></script>
-        <script src="https://unpkg.com/[email protected]" crossorigin></script>
-        <script src="https://unpkg.com/preact@10" crossorigin></script>
-        <script async defer src="https://buttons.github.io/buttons.js"></script>
-        <script src="dist/app.js"></script>
-        <script>
-            define('preact', () => preact)
-            require(['app']);
-        </script>
-    </body>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Benchmark Comparison of Packages with Runtime Validation and TypeScript Support."
+    />
+    <meta name="color-scheme" content="dark light" />
+    <title>Runtype Benchmarks</title>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css"
+    />
+    <style>
+      @media (prefers-color-scheme: dark) {
+        /* fix vega graph labels in dark mode */
+        svg .mark-text text {
+          fill: white;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>