sync client dexie setup

Author: SandroMaglione

README.md

@@ -1,3 +1,10 @@
 # Async Sync Engine
 [Source](https://x.com/i/grok?conversation=1893597036278100311)
 
+1. Init: Store clientId locally.
+2. Create: Owner creates workshop, gets masterToken, stores it.
+3. Share: Owner issues accessToken for collaborator, shares manually.
+4. Access: Collaborator inputs workshopId and accessToken, downloads data.
+5. Sync: Clients edit locally, sync with server using their token.
+6. Revoke: Owner revokes access, collaborator’s token fails.
+7. Expiry: Client handles token expiration gracefully.

apps/client/package.json

@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@effect/platform": "^0.77.2",
-    "@local/api": "workspace:*",
+    "@local/sync": "workspace:*",
     "@tanstack/react-router": "^1.105.0",
     "dexie": "^4.0.11",
     "dexie-react-hooks": "^1.1.7",

apps/client/src/lib/api-client.ts

@@ -1,49 +1,14 @@
 import { FetchHttpClient, HttpApiClient } from "@effect/platform";
-import { ServerApi } from "@local/api";
+import { SyncApi } from "@local/sync";
 import { Effect } from "effect";
-import { LoroDoc, LoroMap, type LoroList } from "loro-crdt";
-import type { UserTable } from "./schema";
 
 export class ApiClient extends Effect.Service<ApiClient>()("ApiClient", {
   dependencies: [FetchHttpClient.layer],
   effect: Effect.gen(function* () {
-    const client = yield* HttpApiClient.make(ServerApi, {
+    const client = yield* HttpApiClient.make(SyncApi, {
       baseUrl: "http://localhost:3000",
     });
 
-    const push = (users: readonly UserTable[]) =>
-      Effect.gen(function* () {
-        const doc = new LoroDoc<{
-          user: LoroList<LoroMap<typeof UserTable.Encoded>>;
-        }>();
-        const list = doc.getList("user");
-
-        users.forEach((user, index) => {
-          const map = new LoroMap<typeof UserTable.Encoded>();
-          map.set("userId", user.userId);
-          map.set("name", user.name);
-          list.insertContainer(index, map);
-        });
-
-        return yield* client.user.createUser({
-          payload: {
-            name: crypto.randomUUID(),
-            snapshot: doc.export({ mode: "snapshot" }),
-          },
-        });
-      });
-
-    const pull = Effect.gen(function* () {
-      const user = yield* client.user.getUser({ path: { id: 3 } });
-      const doc = new LoroDoc<{
-        user: LoroList<LoroMap<typeof UserTable.Encoded>>;
-      }>();
-      doc.import(user.snapshot!);
-      console.log(doc, doc.toJSON());
-
-      return doc.getList("user").toJSON() as UserTable[];
-    });
-
-    return { push, pull };
+    return { client };
   }),
 }) {}

apps/client/src/lib/dexie.ts

@@ -1,6 +1,10 @@
 import * as _Dexie from "dexie";
 import { Data, Effect, Schema } from "effect";
-import { type UserTable } from "./schema";
+import {
+  type ClientTable,
+  type TempWorkspaceTable,
+  type WorkspaceTable,
+} from "./schema";
 
 class WriteApiError extends Data.TaggedError("WriteApiError")<{
   cause: unknown;
@@ -20,11 +24,21 @@ export class Dexie extends Effect.Service<Dexie>()("Dexie", {
   accessors: true,
   effect: Effect.gen(function* () {
     const db = new _Dexie.Dexie("_db") as _Dexie.Dexie & {
-      user: _Dexie.EntityTable<typeof UserTable.Encoded, "userId">;
+      client: _Dexie.EntityTable<typeof ClientTable.Encoded, "clientId">;
+      workspace: _Dexie.EntityTable<
+        typeof WorkspaceTable.Encoded,
+        "workspaceId"
+      >;
+      temp_workspace: _Dexie.EntityTable<
+        typeof TempWorkspaceTable.Encoded,
+        "workspaceId"
+      >;
     };
 
     db.version(1).stores({
-      user: "++userId, &name",
+      workspace: "workspaceId",
+      temp_workspace: "workspaceId",
+      client: "clientId",
     });
 
     const formAction =
@@ -60,22 +74,6 @@ export class Dexie extends Effect.Service<Dexie>()("Dexie", {
           )
         );
 
-    return {
-      db,
-
-      insertUser: formAction(
-        Schema.Struct({ name: Schema.NonEmptyString }),
-        ({ name }) => db.user.add({ userId: crypto.randomUUID(), name })
-      ),
-
-      updateUser: changeAction(
-        Schema.Struct({
-          userId: Schema.UUID,
-          name: Schema.NonEmptyString,
-        }),
-
-        ({ userId, name }) => db.user.update(userId, { name })
-      ),
-    };
+    return { db };
   }),
 }) {}

apps/client/src/lib/schema.ts

@@ -1,6 +1,23 @@
+import { ClientId, Snapshot, WorkspaceId } from "@local/sync";
 import { Schema } from "effect";
 
-export class UserTable extends Schema.Class<UserTable>("UserTable")({
-  userId: Schema.UUID,
-  name: Schema.String,
+export class ClientTable extends Schema.Class<ClientTable>("ClientTable")({
+  clientId: ClientId,
+}) {}
+
+export class WorkspaceTable extends Schema.Class<WorkspaceTable>(
+  "WorkspaceTable"
+)({
+  workspaceId: WorkspaceId,
+  snapshot: Snapshot,
+  token: Schema.String,
+
+  version: Schema.Uint8Array,
+}) {}
+
+export class TempWorkspaceTable extends Schema.Class<TempWorkspaceTable>(
+  "TempWorkspaceTable"
+)({
+  workspaceId: WorkspaceId,
+  snapshot: Snapshot,
 }) {}

apps/client/src/lib/use-user.ts

@@ -1,61 +1,7 @@
 import { createFileRoute } from "@tanstack/react-router";
-import { Effect } from "effect";
-import { useActionState } from "react";
-import { ApiClient } from "../lib/api-client";
-import { Dexie } from "../lib/dexie";
-import { RuntimeClient } from "../lib/runtime-client";
-import { useActionEffect } from "../lib/use-action-effect";
-import { useUser } from "../lib/use-user";
 
 export const Route = createFileRoute("/")({ component: HomeComponent });
 
 function HomeComponent() {
-  const { data } = useUser();
-  const [, add] = useActionEffect(Dexie.insertUser);
-  const [, push] = useActionState(
-    () =>
-      RuntimeClient.runPromise(
-        Effect.gen(function* () {
-          const api = yield* ApiClient;
-          return yield* api.push(data ?? []);
-        })
-      ),
-    null
-  );
-  const [user, pull] = useActionState(
-    () =>
-      RuntimeClient.runPromise(
-        Effect.gen(function* () {
-          const api = yield* ApiClient;
-          return yield* api.pull;
-        })
-      ),
-    null
-  );
-  return (
-    <div>
-      <button type="button" onClick={push}>
-        Push
-      </button>
-
-      <button type="button" onClick={pull}>
-        Pull
-      </button>
-
-      {user && (
-        <div>
-          {user.map((u) => (
-            <p key={u.userId}>{u.name}</p>
-          ))}
-        </div>
-      )}
-
-      <form action={add}>
-        <input type="text" name="name" />
-        <button>Add</button>
-      </form>
-
-      <div>{data?.map((user) => <p key={user.userId}>{user.name}</p>)}</div>
-    </div>
-  );
+  return <></>;
 }

apps/client/src/routes/index.tsx

@@ -21,7 +21,7 @@
     "@effect/platform-node": "^0.73.1",
     "@effect/sql": "^0.30.2",
     "@effect/sql-pg": "^0.31.2",
-    "@local/api": "workspace:*",
+    "@local/sync": "workspace:*",
     "drizzle-orm": "^0.39.3",
     "effect": "^3.13.2",
     "pg": "^8.13.3"