working nix builds

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.

flake.nix

@@ -9,20 +9,108 @@
     flake-utils.lib.eachDefaultSystem (system:
       let
         pkgs = import nixpkgs { inherit system; };
-    in
+        username = "admin";
-      {
+        passwordHash =
-        devShells.default = pkgs.mkShell {
+          "$apr1$bhZ6EAAr$E8cv5p/2RUBrxLZD.9Jpi."; # Replace with your hash
-          buildInputs = with pkgs; [
-            go
-            pigeon
-            nodejs
-            sqlite
-          ];
 
-          shellHook = ''
+        nginxConfig = pkgs.writeText "nginx.conf" ''
-            echo "System: ${system}"
+          worker_processes auto;
+          daemon off;
+
+          events {
+            worker_connections 1024;
+          }
+
+          http {
+            include ${pkgs.nginx}/conf/mime.types;
+            
+            server {
+              listen 8080;
+              
+              location / {
+                auth_basic "Restricted Content";
+                auth_basic_user_file /etc/nginx/htpasswd;
+                
+                root /app;
+                index index.html;
+                try_files $uri $uri/ /index.html;
+              }
+            }
+          }
+        '';
+
+        htpasswd = pkgs.writeText "htpasswd" ''
+          ${username}:${passwordHash}
+        '';
+      in {
+        packages = rec {
+          react = pkgs.buildNpmPackage {
+            pname = "mast-react";
+            version = "0.0.1";
+            src = ./mast-react-vite;
+
+            npmDepsHash = "sha256-oqq55MEzXGEiF9UW7rZFyQrkyTPrUEkh2enZmbbZ7Ks=";
+            buildInputs = with pkgs; [ nodejs typescript ];
+            nativeBuildInputs = with pkgs; [ nodejs ];
+
+            # npmWorkspace = ./mast-react-vite;
+            npmBuildScript = "build";
+            installPhase = ''
+              mkdir -p $out
+              cp -r dist $out/
             '';
           };
-      }
+          react-server = pkgs.dockerTools.buildImage {
-    );
+            name = "react-server";
+            tag = "latest";
+
+            copyToRoot = pkgs.buildEnv {
+              name = "image-root";
+              paths = [
+                pkgs.nginx
+                react
+                (pkgs.writeScriptBin "start-server" ''
+                  #!/usr/bin/env bash 
+
+                  # Create necessary directories
+                  mkdir -p /etc/nginx
+                  cp ${htpasswd} /etc/nginx/htpasswd
+
+                  # Create app directory and copy built files
+                  mkdir -p /app
+                  cp -r ${react}/* /app/
+
+                  # Start nginx
+                  ${pkgs.nginx}/bin/nginx -c ${nginxConfig}
+                '')
+              ];
+              pathsToLink = [ "/bin" ];
+            };
+
+            config = {
+              Cmd = [ "/bin/start-server" ];
+              ExposedPorts = { "8080/tcp" = { }; };
+            };
+          };
+        };
+        devShells.default = pkgs.mkShell {
+          buildInputs = with pkgs; [ go pigeon nodejs sqlite git-bug openssl ];
+
+          shellHook = ''
+            alias start-dev='npm run dev'
+            alias build-dev='npm run build'
+            alias clean-dev='rm -rf dist node_modules'
+            alias ws-server='go run ./server/main.go'
+            alias gen-pass='openssl passwd -apr1 '
+
+            echo "System: ${system}"
+            echo "Available commands:"
+            echo "  start-dev  - Start Vite dev server"
+            echo "  build-dev  - Build the application"
+            echo "  clean-dev  - Clean build artifacts"
+            echo "  ws-server  - Run the websocket server"
+            echo "  gen-pass   - Generate a basic_auth password"
+          '';
+        };
+      });
 }

mast-react-vite/package-lock.json

@@ -8,10 +8,12 @@
       "name": "mast-react",
       "version": "0.0.0",
       "dependencies": {
+        "@radix-ui/react-checkbox": "^1.1.2",
         "@radix-ui/react-icons": "^1.3.0",
         "@tanstack/react-table": "^8.20.5",
         "@vlcn.io/react": "^3.1.0",
         "@vlcn.io/rx-tbl": "^0.15.0",
+        "@vlcn.io/ws-browserdb": "^0.2.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "lucide-react": "^0.454.0",
@@ -692,6 +694,68 @@
         "node": ">=14"
       }
     },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
+    },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.1.2.tgz",
+      "integrity": "sha512-/i0fl686zaJbDQLNKrkCbMyDm6FQMt4jg323k7HuqitoANm9sE23Ql8yOK3Wusk34HSLKDChhMux05FnP6KUkw==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-icons": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz",
@@ -700,6 +764,144 @@
         "react": "^16.x || ^17.x || ^18.x"
       }
     },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.1.tgz",
+      "integrity": "sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
+      "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
+      "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz",
+      "integrity": "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz",
+      "integrity": "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.24.2",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.2.tgz",
@@ -1203,13 +1405,13 @@
       "version": "15.7.13",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
       "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/react": {
       "version": "18.3.12",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.12.tgz",
       "integrity": "sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -1219,7 +1421,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -1503,6 +1705,19 @@
       "resolved": "https://registry.npmjs.org/@vlcn.io/wa-sqlite/-/wa-sqlite-0.22.0.tgz",
       "integrity": "sha512-OujKro0mAqP7/efUeCGB6zBiyMoSCFVe7jQKPF0n47U9ZhOaIW3kQUVCwF+CmzvzQfN1Vl4PrFQRNNxlSwTCNQ=="
     },
+    "node_modules/@vlcn.io/ws-browserdb": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@vlcn.io/ws-browserdb/-/ws-browserdb-0.2.0.tgz",
+      "integrity": "sha512-TKPygQomMPurQ8mwAwEefN5BROw30FagL21S3FzvUunyCybOByysAEoV/OrJ7xNCvYXN9yjg0qyf7iZZfeOsYg==",
+      "dependencies": {
+        "@types/throttle-debounce": "^5.0.0",
+        "@vlcn.io/crsqlite-wasm": "0.16.0",
+        "@vlcn.io/rx-tbl": "0.15.0",
+        "@vlcn.io/ws-client": "0.2.0",
+        "@vlcn.io/ws-common": "0.2.0",
+        "@vlcn.io/xplat-api": "0.15.0"
+      }
+    },
     "node_modules/@vlcn.io/ws-client": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@vlcn.io/ws-client/-/ws-client-0.2.0.tgz",
@@ -1909,7 +2124,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/debug": {
       "version": "4.3.7",

mast-react-vite/package.json

@@ -5,15 +5,17 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
+    "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },
   "dependencies": {
+    "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-icons": "^1.3.0",
     "@tanstack/react-table": "^8.20.5",
     "@vlcn.io/react": "^3.1.0",
     "@vlcn.io/rx-tbl": "^0.15.0",
+    "@vlcn.io/ws-browserdb": "^0.2.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.454.0",

mast-react-vite/src/App.tsx

@@ -1,18 +1,20 @@
 import { useState } from 'react'
-import { useCachedState, useQuery } from "@vlcn.io/react";
+import { useQuery } from "@vlcn.io/react";
 import {
   ColumnDef,
-  flexRender,
-  getCoreRowModel,
-  useReactTable,
 } from "@tanstack/react-table"
 import { DataTable } from "@/components/ui/data-table"
-import * as addParser from '../../parser/add_parser.js';
+import * as commandParser from '@/lib/command_parser.js';
-import * as commandParser from '../../parser/command_parser.js';
 import { Checkbox } from "@/components/ui/checkbox"
 import { Input } from "@/components/ui/input"
 
-function Marshall(parsed) {
+interface MarshalledCommand {
+  description: string;
+  tags: string;
+  project: string;
+}
+
+function Marshall(parsed): MarshalledCommand {
   let project = "";
   const tags = [];
   for (const attr of parsed.attributes) {
@@ -171,6 +173,10 @@ function App({ ctx }) {
       }
     }
     // React to key presses for selection
+    // TODO: 
+    // We should use the react way
+    // Where we update based on changes to newText
+    // Rather than changes to the input value
     else if (e.target.value.trim() !== "") {
       try {
         const parsed = commandParser.parse(e.target.value);

mast-react-vite/src/Root.tsx

@@ -0,0 +1,78 @@
+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("-", "");
+}

mast-react-vite/src/main.tsx

@@ -2,15 +2,18 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from "./App.tsx";
+import Root from "./Root.tsx";
+import { start } from "@vlcn.io/ws-client/worker.js";
+import { createDbProvider } from "@vlcn.io/ws-browserdb";
 
 import initWasm from '@vlcn.io/crsqlite-wasm';
 import wasmUrl from '@vlcn.io/crsqlite-wasm/crsqlite.wasm?url';
 import tblrx from '@vlcn.io/rx-tbl';
 
-const sqlite = await initWasm(() => wasmUrl);
+async function initializeDatabase() {
-
+  const sqlite = await initWasm(() => wasmUrl);
-const db = await sqlite.open("todo.db");
+  const db = await sqlite.open("todo.db");
-await db.exec(`
+  await db.exec(`
         CREATE TABLE IF NOT EXISTS todos (
         id BLOB PRIMARY KEY NOT NULL,
         description TEXT,
@@ -23,10 +26,65 @@ await db.exec(`
         completed INTEGER NOT NULL DEFAULT 0
       );
       SELECT crsql_as_crr('todos');
-`);
+  `);
+  db.onUpdate(async () => {
+    const changes = await db.execA(`SELECT * FROM crsql_changes WHERE db_version > 0 AND site_id = crsql_site_id()`);
 
-const rx = tblrx(db);
+    sendChangesToServer(changes);
-const ctx = { db, rx };
+  });
+  return db;
+}
+
+const config = {
+  dbProvider: createDbProvider(),
+  transportProvider: (dbName) => new WebSocket(`ws://localhost:8080/sync/${dbName}`),
+};
+
+start(config);
+const ws = new WebSocket('ws://localhost:8080/sync');
+
+ws.onmessage = async function(event) {
+    const { type, data } = JSON.parse(event.data);
+    if (type === 'changes') {
+        await applyChanges(data);
+    }
+};
+
+function sendChangesToServer(changes) {
+  const formattedChanges = changes.map(change => ({
+      TableName: change[0],
+      PK: Array.isArray(change[1]) ? btoa(String.fromCharCode.apply(null, change[1])) : btoa(change[1]),
+      ColumnName: change[2],
+      Value: Array.isArray(change[3]) ? btoa(String.fromCharCode.apply(null, change[3])) : change[3],
+      ColVersion: Number(change[4]),
+      DBVersion: Number(change[5]),
+      SiteID: Array.isArray(change[6]) ? btoa(new TextDecoder('utf8').decode(change[6])) : btoa(change[6]),
+      CL: Number(change[7]),
+      Seq: Number(change[8])
+  }));
+  console.log(formattedChanges)
+
+  const message = {
+      type: "changes",
+      data: formattedChanges
+  };
+
+  ws.send(JSON.stringify(message));
+}
+
+async function applyChanges(changes) {
+  const db = initializeDatabase();
+  const rx = tblrx(db);
+  const ctx = { db, rx };
+  await db.tx(async (tx) => {
+      for (const change of changes) {
+          await tx.exec(
+              `INSERT INTO crsql_changes VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+              change
+          );
+      }
+  });
+}
 
 document.getElementById("root")!.classList.add("dark");
 

mast-react-vite/tsconfig.json

@@ -9,6 +9,7 @@
     }
   ],
   "compilerOptions": {
+    "noEmitOnError": false,
     "baseUrl": ".",
     "paths": {
       "@/*": [