Single-object viewer POC (#14)

This commit implements a Sketchfab-style single-object viewer as a minimal
proof-of-concept.

### `@storyteller/studio-web`
This is a new package to house web components for interfacing with the
`@storyteller/studio` WASM library. It currently includes a single component,
`<sts-viewer />`, which is exported from `@storyteller/studio-web/viewer`.

### `react-frontend`
This is a new application intended as a proof-of-concept and testbed for React
interop with `@storyteller/studio-web`.

Web components are currently a little bit fiddly to use in a React application.
`react-frontend/src/app/studio-viewer.tsx` demonstrates how a React-idiomatic
component can be written as a thin wrapper around a web component, and
`react-frontend/src/app/app.tsx` demonstrates that wrapper component in use.

react-frontend/vite-plugins/multiple-assets/build.ts

@@ -0,0 +1,25 @@
+import fs from "fs";
+import {NormalizedOutputOptions} from "rollup";
+
+function copyRecursively(src: string, dst: string) {
+    if (fs.statSync(src).isDirectory()) {
+        // folder
+        if (!fs.existsSync(dst)) {
+            fs.mkdirSync(dst);
+        }
+        for (const file of fs.readdirSync(src)) {
+            copyRecursively(src + "/" + file, dst + "/" + file);
+        }
+    } else {
+        // file
+        fs.copyFileSync(src, dst);
+    }
+}
+
+export function buildMiddleWare(options: NormalizedOutputOptions, assets: string[] = []) {
+    const dst = options.dir;
+    if (!dst) throw new Error("options.dir is undefined");
+    for (const dir of assets) {
+        copyRecursively(dir, dst)
+    }
+}

react-frontend/vite-plugins/multiple-assets/index.ts

@@ -0,0 +1,26 @@
+// FIXME: Oh my god, did Danny seriously just copy and paste this entire folder
+//        from `studio-frontend` instead of creating a separate project for it
+//        and importing it like a decent, law-abiding citizen? Wow, dude really
+//        needs to get his shit together.
+
+// NOTE: This is an inline fork of this npm package:
+// https://github.com/nguyenbatranvan/vite-multiple-assets
+//
+// The published version at time of writing doesn't include mime types for many
+// of the asset types Bevy needs to load.
+
+import {PluginOption, ViteDevServer} from "vite";
+import {ServerMiddleWare} from "./server";
+import {buildMiddleWare} from "./build";
+
+export default function DynamicPublicDirectory(assets: string[]): PluginOption {
+    return {
+        configureServer(server: ViteDevServer) {
+            return ServerMiddleWare(server, assets)
+        },
+        async writeBundle(options) {
+            buildMiddleWare(options, assets)
+        },
+        name: "dynamic assets"
+    };
+}

react-frontend/vite-plugins/multiple-assets/server.ts

@@ -0,0 +1,91 @@
+import fs from "fs";
+import path from "path";
+import { ViteDevServer } from "vite";
+
+interface IPropsFile {
+    name: string;
+    files: string[];
+}
+
+function getFiles(dir, files_): string[] {
+    files_ = files_ || [];
+    const files = fs.readdirSync(dir);
+    for (const i in files) {
+        const name = dir + "/" + files[i];
+        if (fs.statSync(name).isDirectory()) {
+            getFiles(name, files_);
+        } else {
+            files_.push(name);
+        }
+    }
+    return files_;
+}
+
+const mimeTypes = {
+    ".7z": "application/x-7z-compressed",
+    ".bin": "application/octet-stream",
+    ".css": "text/css",
+    ".eot": "font/eot",
+    ".gif": "image/gif",
+    ".gltf": "model/gltf+json",
+    ".gz": "application/gzip",
+    ".hdr": "image/vnd.radiance",
+    ".html": "text/html",
+    ".ico": "image/x-icon",
+    ".jpg": "image/jpeg",
+    ".js": "text/javascript",
+    ".json": "application/json",
+    ".ktx": "image/ktx",
+    ".ktx2": "image/ktx",
+    ".meta": "text/plain",
+    ".mjs": "text/javascript",
+    ".mp3": "audio/mpeg",
+    ".mp4": "video/mp4",
+    ".otf": "font/otf",
+    ".png": "image/png",
+    ".rar": "application/x-rar-compressed",
+    ".svg": "image/svg+xml",
+    ".tiff": "image/tiff",
+    ".ttf": "font/ttf",
+    ".txt": "text/plain",
+    ".wasm": "application/wasm",
+    ".webm": "video/webm",
+    ".webp": "image/webp",
+    ".wgsl": "text/wgsl",
+    ".woff": "font/woff",
+    ".woff2": "font/woff2",
+    ".xml": "text/xml",
+    ".zip": "application/zip",
+}
+
+export function ServerMiddleWare(server: ViteDevServer, assets: string[] = []) {
+    if (!assets || !assets.length)
+        return;
+
+    const fileObject: IPropsFile[] = [];
+    for (let i = 0; i < assets.length; i++) {
+        const files = getFiles(path.join(process.cwd(), `/${assets[i]}`), []);
+        fileObject.push({
+            name: assets[i],
+            files
+        });
+    }
+
+    return () => {
+        server.middlewares.use(async (req, res, next) => {
+            for (let i = 0; i < fileObject.length; i++) {
+                const file = path.join(process.cwd(), `${fileObject[i].name}/${req.originalUrl}`);
+                if (fileObject[i].files.some(f => path.relative(f, file) === "")) {
+                    const extension = file.substring(file.lastIndexOf("."));
+                    res.setHeader("Cache-Control", "max-age=31536000, immutable");
+                    res.setHeader("Content-Type", mimeTypes[extension]);
+                    res.writeHead(200);
+                    res.write(fs.readFileSync(path.join(process.cwd(), "/" + fileObject[i].name + req.originalUrl)));
+                    res.end();
+                    break;
+                }
+            }
+            next();
+        });
+    };
+}