Testing hot-swapping renderers, which requires destroying and rebuilding the canvas after all. Fixed a few other related bugs and moved the imports into "bundle-contents.js".

js/index.js

@@ -1,7 +1,6 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 import { Matrix } from "./Matrix";
-//import { Matrix } from "react-matrix-rain";
 
 const root = createRoot(document.getElementById("root"));
 let idx = 1;
@@ -23,6 +22,7 @@ const versions = [
 const App = () => {
 	const [version, setVersion] = React.useState(versions[0]);
 	const [numColumns, setNumColumns] = React.useState(10);
+	const [rendererType, setRendererType] = React.useState(null);
 	const onButtonClick = () => {
 		setVersion((s) => {
 			const newVersion = versions[idx];
@@ -36,16 +36,20 @@ const App = () => {
 			return newColumns;
 		});
 	};
+	const onRendererButtonClick = () => {
+		setRendererType(() => (rendererType === "webgpu" ? "regl" : "webgpu"));
+	};
 
 	return (
 		<div>
 			<h1>Rain</h1>
-			<button onClick={onButtonClick}>Change</button>
-			{/* <button onClick={newNum}>change number</button> */}
+			<button onClick={onButtonClick}>Change properties</button>
+			<button onClick={onRendererButtonClick}>Renderer: {rendererType ?? "default (regl)"}</button>
 			<Matrix
 				style={{ width: "80vw", height: "45vh" }}
 				version={version}
 				numColumns={numColumns}
+				renderer={rendererType}
 				density={2.0}
 			/>
 		</div>