Massive overhaul: the renderers are now classes that implement Renderer; replaced webpack and rollup with vite; converted bundle-contents to "core" and "full" bundle profiles; renamed "inclusions" to "staticAssets", which are "url" base64-encoded images and "raw" text strings; renamed the Matrix component module to the JSX extension; built out a test scaffold at tools/test/index.html to manually test the various deploy options.

tools/test/test-react.jsx

@@ -0,0 +1,144 @@
+import React, { useState } from "react";
+import { unmountComponentAtNode } from "react-dom";
+import { createRoot } from "react-dom/client";
+
+const urlParams = new URLSearchParams(import.meta.url.replaceAll(/.*?\?/g, ""));
+const rootID = urlParams.get("root-id") ?? "root";
+const root = createRoot(document.getElementById(rootID));
+
+let componentModule;
+switch (urlParams.get("bundle")) {
+	case "core": {
+		componentModule = (await import("../../dist/digital-rain.core.js"));
+		break;
+	}
+	default: {
+		componentModule = (await import("../../js/Matrix"));
+	}
+}
+const { Matrix } = componentModule;
+
+const versions = [
+	"classic",
+	"3d",
+	"resurrections",
+	"operator",
+	"megacity",
+	"nightmare",
+	"paradise",
+	"trinity",
+	"bugs",
+	"morpheus",
+];
+const effects = ["none", "palette", "stripes", "pride", "trans", "image", "mirror"];
+const App = () => {
+	const [version, setVersion] = useState(versions[0]);
+	const [effect, setEffect] = useState("palette");
+	const [numColumns, setNumColumns] = useState(80);
+	const [resolution, setResolution] = useState(0.75);
+	const [cursorColor, setCursorColor] = useState(null);
+	const [backgroundColor, setBackgroundColor] = useState("0,0,0");
+	const [rendererType, setRendererType] = useState(null);
+	const [density, setDensity] = useState(2);
+	const [destroyed, setDestroyed] = useState(false);
+	const onVersionButtonClick = () => {
+		setVersion((s) => {
+			let index = versions.indexOf(version) + 1;
+			if (index === versions.length) {
+				index = 0;
+			}
+			const newVersion = versions[index];
+			console.log("version:", newVersion);
+			return newVersion;
+		});
+		setCursorColor(null);
+		setBackgroundColor(null);
+	};
+	const onEffectButtonClick = () => {
+		setEffect((s) => {
+			let index = effects.indexOf(effect) + 1;
+			if (index === effects.length) {
+				index = 0;
+			}
+			const newEffect = effects[index];
+			console.log("effect:", newEffect);
+			return newEffect;
+		});
+		setCursorColor(null);
+		setBackgroundColor(null);
+	};
+	const onRendererButtonClick = () => {
+		setRendererType(() => (rendererType === "webgpu" ? "regl" : "webgpu"));
+	};
+	const onDestroyButtonClick = () => {
+		setDestroyed(true);
+	};
+
+	return (
+		<>
+			<button onClick={onVersionButtonClick}>Version: "{version}"</button>
+			<button onClick={onEffectButtonClick}>Effect: "{effect}"</button>
+			<button onClick={onRendererButtonClick}>Renderer: {rendererType ?? "default (regl)"}</button>
+			<button onClick={onDestroyButtonClick}>Destroy</button>
+			<label htmlFor="cursor-color">Cursor color: </label>
+			<input
+				name="cursor-color"
+				type="color"
+				onChange={(e) => {
+					const values = e.target.value
+						.match(/[\da-fA-F]{2}/g)
+						.map((s) => parseInt(s, 16) / 0xff)
+						.join(",");
+					setCursorColor(values);
+				}}
+			/>
+			<label htmlFor="background-color">Background color: </label>
+			<input
+				name="background-color"
+				type="color"
+				onChange={(e) => {
+					const values = e.target.value
+						.match(/[\da-fA-F]{2}/g)
+						.map((s) => parseInt(s, 16) / 0xff)
+						.join(",");
+					setBackgroundColor(values);
+				}}
+			/>
+			<label htmlFor="num-columns"># of columns:</label>
+			<input
+				name="num-columns"
+				type="range"
+				value={numColumns}
+				min="10"
+				max="160"
+				step="1"
+				onInput={(e) => setNumColumns(parseInt(e.target.value))}
+			/>
+			<label htmlFor="resolution">resolution:</label>
+			<input
+				name="resolution"
+				type="range"
+				value={resolution}
+				min="0"
+				max="1"
+				step="0.01"
+				onInput={(e) => setResolution(parseFloat(e.target.value))}
+			/>
+
+			{!destroyed && (
+				<Matrix
+					style={{ width: "40vw", height: "22vh" }}
+					version={version}
+					effect={effect}
+					numColumns={numColumns}
+					resolution={resolution}
+					renderer={rendererType}
+					cursorColor={cursorColor}
+					backgroundColor={backgroundColor}
+					density={2.0}
+				/>
+			)}
+		</>
+	);
+};
+root.render(<App />);