static viewer app build and deploy

Results and the popularity json file stay at their current place. So if
someone wanted to gather all the historical benchmark data, one wont have
to deal with too many files moving around.

Author: Erik Soehnel

.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
@@ -35,15 +39,15 @@ jobs:
         run: npm ci
 
       - 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

@@ -132,11 +132,14 @@ It is deployed via github pages whenever something has been pushed to the main b
 ```sh
 cd docs
 
-npm run dev     # develop
+npm run dev     # develop / view results
 npm run build   # build
 npm run preview # preview the build
 ```
 
+When viewing results locally, you need to restart the app whenever the results
+are updated.
+
 #### Linting
 
 * `npm run lint` - lint all files

docs/.gitignore

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

docs/package.json

@@ -4,9 +4,9 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
+    "prepare-results": "node prepareResults.mjs",
+    "dev": "npm run prepare-results && vite",
+    "build": "npm run prepare-results && tsc -b && vite build",
     "preview": "vite preview"
   },
   "dependencies": {

docs/prepareResults.mjs

@@ -0,0 +1,52 @@
+// Script to make the benchmark result files accessible to the benchmark viewer app
+//
+// - keeps them at their current place for easier access tp benchmark
+//   history data in the future
+// - maybe preprocess and combine them into 1 single file?
+import * as fs from 'fs';
+import * as path from 'path';
+
+function copyFileSync(src, dest) {
+  console.log('copying', src, 'to', dest);
+  fs.copyFileSync(src, dest);
+}
+
+/* benchmark results */
+
+// older benchmark app builds where based on publishing the whole
+// docs folder with github pages
+const sourceDir = 'results';
+
+// everything in public can be fetched from the app
+const destDir = 'public/results';
+
+if (!fs.existsSync(sourceDir)) {
+  console.error('does not exist:', sourceDir);
+  process.exit(1);
+}
+
+if (!fs.existsSync(destDir)) {
+  fs.mkdirSync(destDir, { recursive: true });
+}
+
+const files = fs.readdirSync(sourceDir);
+
+files.forEach(file => {
+  const sourcePath = path.join(sourceDir, file);
+  const destPath = path.join(destDir, file);
+  const stats = fs.statSync(sourcePath);
+
+  if (stats.isDirectory()) {
+    console.error('did not expect a directory here:', destPath);
+    process.exit(1);
+  }
+
+  copyFileSync(sourcePath, destPath);
+});
+
+/* package popularity file */
+
+copyFileSync('packagesPopularity.json', 'public/packagesPopularity.json');
+
+console.log('done');
+process.exit(0);

docs/src/App.tsx

@@ -582,7 +582,9 @@ export class App extends Component<
   }
 
   async componentDidMount() {
-    await loadPackagesPopularity();
+    loadPackagesPopularity().catch(err => {
+      console.error(`error while loading package popularity`, err);
+    });
 
     NODE_VERSIONS.forEach((v, i) => {
       fetch(`results/node-${v}.json`)