Use iframes (#369)

* Use iframes

This PR removes react and next. It allows a sample to be pure JavaScript (though there are none at the moment).
It allows samples to be standalone so that they run separate from the sample selection menu.

Author: greggman

.eslintrc.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+  ],
+  plugins: ['@typescript-eslint', 'eslint-plugin-html', 'prettier'],
+  rules: {
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      { vars: 'all', args: 'after-used', ignoreRestSiblings: true },
+    ],
+  },
+};

.eslintrc.js

@@ -29,7 +29,6 @@ jobs:
           npm ci
           npm run-script lint
           npm run-script build
-          npm run-script export
           touch out/.nojekyll
 
       - name: Deploy 🚀

.github/workflows/build-and-deploy.yml

@@ -32,4 +32,3 @@ jobs:
           npm ci
           npm run-script lint
           npm run-script build
-          npm run-script export

.github/workflows/build.yml

@@ -0,0 +1,62 @@
+import chokidar from 'chokidar';
+import fs from 'fs';
+import path from 'path';
+
+const debug = console.log; //() => {};
+const removeLeadingSlash = (s) => s.replace(/^\//, '');
+
+/**
+ * Recursively copies files and watches for changes.
+ *
+ * Example:
+ *
+ *    copyAndWatch([
+ *      {src: "src\/**\/*.js", srcPrefix: "src", dst: "out"},   // would copy src/bar/moo.js -> out/bar/moo.js
+ *      {src: "index.html", dst: "out"},                        // copies index.html -> out/index.html
+ *    ]);
+ *
+ * @param {*} paths [{src: glob, srcPrefix: string, dst: string }]
+ * @param {*} options { watch: true/false }  // watch: false = just copy and exit.
+ */
+export function copyAndWatch(paths, { watch } = { watch: true }) {
+  for (const { src, srcPrefix, dst } of paths) {
+    const watcher = chokidar.watch(src, {
+      ignored: /(^|[\/\\])\../, // ignore dot files
+      persistent: watch,
+    });
+
+    const makeDstPath = (path, dst) =>
+      `${dst}/${removeLeadingSlash(
+        path.startsWith(srcPrefix) ? path.substring(srcPrefix.length) : path
+      )}`;
+
+    watcher
+      .on('addDir', (srcPath) => {
+        const dstPath = makeDstPath(srcPath, dst);
+        debug('addDir:', srcPath, dstPath);
+        fs.mkdirSync(dstPath, { recursive: true });
+      })
+      .on('add', (srcPath) => {
+        const dstPath = makeDstPath(srcPath, dst);
+        const dir = path.dirname(dstPath);
+        fs.mkdirSync(dir, { recursive: true });
+        debug('add:', srcPath, dstPath);
+        fs.copyFileSync(srcPath, dstPath);
+      })
+      .on('change', (srcPath) => {
+        const dstPath = makeDstPath(srcPath, dst);
+        debug('change:', srcPath, dstPath);
+        fs.copyFileSync(srcPath, dstPath);
+      })
+      .on('unlink', (srcPath) => {
+        const dstPath = makeDstPath(srcPath, dst);
+        debug('unlink:', srcPath, dstPath);
+        fs.unlinkSync(dstPath);
+      })
+      .on('ready', () => {
+        if (!watch) {
+          watcher.close();
+        }
+      });
+  }
+}

.prettierrc.js renamed to .prettierrc.cjs

@@ -0,0 +1,16 @@
+import fs from 'fs';
+import path from 'path';
+
+// not needed in node v20+
+export function readDirSyncRecursive(dir) {
+  const basename = path.basename(dir);
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+  return entries
+    .map((entry) =>
+      entry.isDirectory()
+        ? readDirSyncRecursive(`${dir}/${entry.name}`)
+        : entry.name
+    )
+    .flat()
+    .map((name) => `${basename}/${name}`);
+}

build/lib/copyAndWatch.js

@@ -0,0 +1,14 @@
+import { spawn } from 'child_process';
+import { mkdirSync } from 'fs';
+
+mkdirSync('out', { recursive: true });
+
+spawn('node', ['build/tools/copy.js'], {
+  shell: true,
+  stdio: 'inherit',
+});
+
+spawn('./node_modules/.bin/rollup', ['-c'], {
+  shell: true,
+  stdio: 'inherit',
+});

build/lib/readdir.js

@@ -0,0 +1,14 @@
+import { copyAndWatch } from '../lib/copyAndWatch.js';
+
+const watch = !!process.argv[2];
+
+copyAndWatch(
+  [
+    { src: 'public/**/*', srcPrefix: 'public', dst: 'out' },
+    { src: 'meshes/**/*', dst: 'out' },
+    { src: 'sample/**/*', dst: 'out' },
+    { src: 'shaders/**/*', dst: 'out' },
+    { src: 'index.html', dst: 'out' },
+  ],
+  { watch }
+);

build/tools/build.js

@@ -0,0 +1,19 @@
+import { spawn } from 'child_process';
+import { mkdirSync } from 'fs';
+
+mkdirSync('out', { recursive: true });
+
+spawn('npm', ['run', 'watch'], {
+  shell: true,
+  stdio: 'inherit',
+});
+
+spawn('node', ['build/tools/copy.js', '1'], {
+  shell: true,
+  stdio: 'inherit',
+});
+
+spawn('./node_modules/.bin/servez', ['out'], {
+  shell: true,
+  stdio: 'inherit',
+});