can compile both the react application statically so it can be served by nginx and then builds a docker container with nginx for easy deployment to something like fly.io I mean since it's static I could probably host it for free on a website like netlify or something, but I still wanted a docker container for now. Notably I did have to move the generated javascript parser into the mast-react-vite folder so that `buildNpmPackage` was scoped to the mast-react-vite folder. I'm not sure how to get it working in a truly monorepo style build working for it yet, but I'm not exactly inclined to make it super shiny right now either.
79 lines
1.8 KiB
TypeScript
79 lines
1.8 KiB
TypeScript
import App from "./App.tsx";
|
|
import schemaContent from "./schemas/main2.sql?raw";
|
|
import { DBProvider } from "@vlcn.io/react";
|
|
import { useEffect, useState } from "react";
|
|
|
|
/**
|
|
* Generates a random room name to sync with or pulls one from local storage.
|
|
*/
|
|
function getRoom(hash: HashBag): string {
|
|
return hash.room || localStorage.getItem("room") || newRoom();
|
|
}
|
|
|
|
function hashChanged() {
|
|
const hash = parseHash();
|
|
const room = getRoom(hash);
|
|
if (room != hash.room) {
|
|
hash.room = room;
|
|
window.location.hash = writeHash(hash);
|
|
}
|
|
localStorage.setItem("room", room);
|
|
return room;
|
|
}
|
|
const room = hashChanged();
|
|
|
|
export default function Root() {
|
|
const [theRoom, setTheRoom] = useState(room);
|
|
useEffect(() => {
|
|
const cb = () => {
|
|
const room = hashChanged();
|
|
if (room != theRoom) {
|
|
setTheRoom(room);
|
|
}
|
|
};
|
|
addEventListener("hashchange", cb);
|
|
return () => {
|
|
removeEventListener("hashchange", cb);
|
|
};
|
|
}, []); // ignore -- theRoom is managed by the effect
|
|
|
|
return (
|
|
<DBProvider
|
|
dbname={theRoom}
|
|
schema={{
|
|
name: "main2.sql",
|
|
content: schemaContent,
|
|
}}
|
|
Render={() => <App dbname={theRoom} />}
|
|
></DBProvider>
|
|
);
|
|
}
|
|
|
|
type HashBag = { [key: string]: string };
|
|
function parseHash(): HashBag {
|
|
const hash = window.location.hash;
|
|
const ret: { [key: string]: string } = {};
|
|
if (hash.length > 1) {
|
|
const substr = hash.substring(1);
|
|
const parts = substr.split(",");
|
|
for (const part of parts) {
|
|
const [key, value] = part.split("=");
|
|
ret[key] = value;
|
|
}
|
|
}
|
|
|
|
return ret;
|
|
}
|
|
|
|
function writeHash(hash: HashBag) {
|
|
const parts = [];
|
|
for (const key in hash) {
|
|
parts.push(`${key}=${hash[key]}`);
|
|
}
|
|
return parts.join(",");
|
|
}
|
|
|
|
function newRoom() {
|
|
return crypto.randomUUID().replaceAll("-", "");
|
|
}
|