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.

.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 },
+    ],
+  },
+};

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

@@ -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.yml

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

build/lib/copyAndWatch.js

@@ -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();
+        }
+      });
+  }
+}

build/lib/readdir.js

@@ -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/tools/build.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/tools/copy.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/serve.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',
+});

index.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>WebGPU Samples</title>
+    <meta
+      name="description"
+      content="The WebGPU Samples are a set of samples demonstrating the use of the WebGPU API."
+    />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+
+    <link
+      href="https://fonts.googleapis.com/css?family=Inconsolata&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="favicon.ico"
+    />
+
+    <link href="css/styles.css" rel="stylesheet">
+
+  </head>
+  <script defer type="module" src="main.js"></script>
+  <body>
+    <div class="wrapper">
+      <nav class="panel container">
+        <h1>
+          <a href="./">WebGPU Samples</a>
+        </h1>
+        <input type="checkbox" id="menuToggle">
+        <label class="expand" for="menuToggle"></label>
+        <div class="panelContents">
+          <a href="https://github.com/webgpu/webpgu-samples">
+              Github
+          </a>
+          <hr>
+          <div id="samplelist"></div>
+          <hr>
+          <h3 style="margin-bottom: 5px">Other Pages</h3>
+          <ul class="exampleList">
+            <li>
+              <a
+                rel="noreferrer"
+                target="_blank"
+                href="./workload-simulator.html"
+              >
+                Workload Simulator ↗️
+              </a>
+            </li>
+          </ul>
+        </div>
+      </nav>
+
+      <main>
+        <div id="intro">
+          <p>
+            The WebGPU Samples are a set of samples and demos demonstrating the use
+            of the <a href="//webgpu.dev">WebGPU API</a>. Please see the current
+            implementation status and how to run WebGPU in your browser at
+            <a href="//webgpu.io">webgpu.io</a>.
+          </p>
+        </div>
+        <div id="sample" style="display: none;">
+          <div>
+            <h1 id="title"></h1>
+            <a id="src" target="_blank" rel="noreferrer" href="">See it on Github!</a>
+            <p id="description"></p>
+            <div class="sampleContainer"></div>
+          </div>
+        </div>
+        <nav id="code" class="sourceFileNav">
+          <div>
+            <ul id="codeTabs"></ul>
+          </div>
+        </nav>
+        <div id="sources"></div>
+      </main>
+    </div>
+  </body>
+</html>

src/meshes/stanfordDragon.ts → meshes/stanfordDragon.ts

@@ -1,4 +1,4 @@
-import dragonRawData from 'stanford-dragon/4';
+import dragonRawData from './stanfordDragonData';
 import { computeSurfaceNormals, computeProjectedPlaneUVs } from './utils';
 
 export const mesh = {