App schema

apps/client/src/lib/hooks/use-food.ts

@@ -0,0 +1,13 @@
+import { hookQuery, useDexieQuery } from "@local/client-lib";
+import { SnapshotSchema } from "@local/schema";
+import { RuntimeClient } from "../runtime-client";
+
+export const useFood = ({ workspaceId }: { workspaceId: string }) => {
+  return useDexieQuery(
+    () =>
+      RuntimeClient.runPromise(
+        hookQuery((doc) => doc.getList("food"), { workspaceId })
+      ),
+    SnapshotSchema.fields.food.value
+  );
+};

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

@@ -0,0 +1,7 @@
+import { RuntimeLayer } from "@local/client-lib";
+import { Layer, ManagedRuntime } from "effect";
+import { Storage } from "./storage";
+
+const MainLayer = Layer.mergeAll(RuntimeLayer, Storage.Default);
+
+export const RuntimeClient = ManagedRuntime.make(MainLayer);

apps/client/src/lib/storage.ts

@@ -0,0 +1,54 @@
+import { Service } from "@local/client-lib";
+import { SnapshotSchema } from "@local/schema";
+import { Effect, Schema } from "effect";
+import { LoroMap, VersionVector } from "loro-crdt";
+
+export class Storage extends Effect.Service<Storage>()("Storage", {
+  dependencies: [Service.TempWorkspace.Default, Service.LoroStorage.Default],
+  effect: Effect.gen(function* () {
+    const temp = yield* Service.TempWorkspace;
+    const { load } = yield* Service.LoroStorage;
+
+    const insertFood = ({
+      workspaceId,
+      value,
+    }: {
+      workspaceId: string;
+      value: typeof SnapshotSchema.fields.food.value.Type;
+    }) =>
+      Effect.gen(function* () {
+        const { doc, workspace } = yield* load({ workspaceId });
+
+        const list = doc.getList("food");
+
+        const container = list.insertContainer(list.length, new LoroMap());
+
+        const food = yield* Schema.encode(SnapshotSchema.fields.food.value)(
+          value
+        );
+
+        Object.entries(food).forEach(([key, val]) => {
+          container.set(
+            key as keyof typeof SnapshotSchema.fields.food.value.Type,
+            val
+          );
+        });
+
+        const snapshotExport =
+          workspace === undefined
+            ? doc.export({ mode: "snapshot" })
+            : doc.export({
+                mode: "update",
+                from: new VersionVector(workspace.version),
+              });
+
+        return yield* temp.put({
+          workspaceId,
+          snapshot: snapshotExport,
+          snapshotId: crypto.randomUUID(),
+        });
+      });
+
+    return { insertFood };
+  }),
+}) {}

apps/client/src/routes/$workspaceId/index.tsx

@@ -1,16 +1,12 @@
 import { Worker } from "@effect/platform";
 import { BrowserWorker } from "@effect/platform-browser";
-import {
-  RuntimeLib,
-  Service,
-  SyncWorker,
-  useActionEffect,
-} from "@local/client-lib";
+import { Service, SyncWorker, useActionEffect } from "@local/client-lib";
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { Effect } from "effect";
 import { startTransition, useEffect } from "react";
-import { useActivity } from "../../lib/hooks/use-activity";
-import { useMetadata } from "../../lib/hooks/use-metadata";
+import { useFood } from "../../lib/hooks/use-food";
+import { RuntimeClient } from "../../lib/runtime-client";
+import { Storage } from "../../lib/storage";
 
 const bootstrap = ({ workspaceId }: { workspaceId: string }) =>
   Effect.gen(function* () {
@@ -33,7 +29,7 @@ const bootstrap = ({ workspaceId }: { workspaceId: string }) =>
 export const Route = createFileRoute("/$workspaceId/")({
   component: RouteComponent,
   loader: ({ params: { workspaceId } }) =>
-    RuntimeLib.runPromise(
+    RuntimeClient.runPromise(
       Service.WorkspaceManager.getById({ workspaceId }).pipe(
         Effect.flatMap(Effect.fromNullable),
         Effect.tap(({ workspaceId }) => bootstrap({ workspaceId }))
@@ -44,28 +40,27 @@ export const Route = createFileRoute("/$workspaceId/")({
 function RouteComponent() {
   const workspace = Route.useLoaderData();
 
-  const { data: metadata } = useMetadata({
-    workspaceId: workspace.workspaceId,
-  });
-  const { data, error, loading } = useActivity({
+  const { data, error, loading } = useFood({
     workspaceId: workspace.workspaceId,
   });
 
-  const [, onBootstrap, bootstrapping] = useActionEffect(bootstrap);
-  const [, onAdd] = useActionEffect((formData: FormData) =>
+  const [, onBootstrap, bootstrapping] = useActionEffect(
+    RuntimeClient,
+    bootstrap
+  );
+  const [, onAdd] = useActionEffect(RuntimeClient, (formData: FormData) =>
     Effect.gen(function* () {
-      const loroStorage = yield* Service.LoroStorage;
+      const loroStorage = yield* Storage;
 
-      const firstName = formData.get("firstName") as string;
-      const lastName = formData.get("lastName") as string;
+      const name = formData.get("name") as string;
+      const calories = formData.get("calories") as string;
 
-      yield* loroStorage.insertActivity({
+      yield* loroStorage.insertFood({
         workspaceId: workspace.workspaceId,
         value: {
           id: crypto.randomUUID(),
-          firstName,
-          lastName,
-          age: 10,
+          name,
+          calories: parseInt(calories, 10),
         },
       });
     })
@@ -75,7 +70,7 @@ function RouteComponent() {
     const url = new URL("./src/workers/live.ts", globalThis.origin);
     const newWorker = new globalThis.Worker(url, { type: "module" });
 
-    void RuntimeLib.runPromise(
+    void RuntimeClient.runPromise(
       Effect.gen(function* () {
         const pool = yield* Worker.makePoolSerialized({ size: 1 });
         return yield* pool.broadcast(
@@ -98,7 +93,6 @@ function RouteComponent() {
 
   return (
     <div>
-      <pre>{JSON.stringify(metadata)}</pre>
       <Link
         to="/$workspaceId/token"
         params={{ workspaceId: workspace.workspaceId }}
@@ -119,19 +113,18 @@ function RouteComponent() {
       </button>
 
       <form action={onAdd}>
-        <input type="text" name="firstName" />
-        <input type="text" name="lastName" />
-        <button type="submit">Add activity</button>
+        <input type="text" name="name" />
+        <input type="number" name="calories" min={1} />
+        <button type="submit">Add food</button>
       </form>
 
       <div>
         {loading && <p>Loading...</p>}
         {error && <pre>{JSON.stringify(error, null, 2)}</pre>}
-        {(data ?? []).map((activity) => (
-          <div key={activity.id}>
-            <p>First name: {activity.firstName}</p>
-            <p>Last name: {activity.lastName}</p>
-            {activity.age && <p>Age: {activity.age}</p>}
+        {(data ?? []).map((food) => (
+          <div key={food.id}>
+            <p>Name: {food.name}</p>
+            <p>Calories: {food.calories}</p>
           </div>
         ))}
       </div>

apps/client/src/routes/$workspaceId/join.tsx

@@ -1,11 +1,12 @@
-import { RuntimeLib, Service } from "@local/client-lib";
+import { Service } from "@local/client-lib";
 import { createFileRoute, redirect } from "@tanstack/react-router";
 import { Effect } from "effect";
+import { RuntimeClient } from "../../lib/runtime-client";
 
 export const Route = createFileRoute("/$workspaceId/join")({
   component: RouteComponent,
   loader: ({ params }) =>
-    RuntimeLib.runPromise(
+    RuntimeClient.runPromise(
       Effect.gen(function* () {
         const { join } = yield* Service.Sync;
         yield* join({ workspaceId: params.workspaceId });

apps/client/src/routes/$workspaceId/token.tsx

@@ -1,12 +1,13 @@
-import { RuntimeLib, Service, useActionEffect } from "@local/client-lib";
+import { Service, useActionEffect } from "@local/client-lib";
 import { createFileRoute, Link, useRouter } from "@tanstack/react-router";
 import { Duration, Effect } from "effect";
 import { WEBSITE_URL } from "../../lib/constants";
+import { RuntimeClient } from "../../lib/runtime-client";
 
 export const Route = createFileRoute("/$workspaceId/token")({
   component: RouteComponent,
   loader: ({ params: { workspaceId } }) =>
-    RuntimeLib.runPromise(
+    RuntimeClient.runPromise(
       Effect.gen(function* () {
         const api = yield* Service.ApiClient;
         const token = yield* Service.WorkspaceManager.getById({
@@ -30,39 +31,43 @@ function RouteComponent() {
   const { tokens, token } = Route.useLoaderData();
   const router = useRouter();
 
-  const [, onIssueToken, issuing] = useActionEffect((formData: FormData) =>
-    Effect.gen(function* () {
-      const api = yield* Service.ApiClient;
+  const [, onIssueToken, issuing] = useActionEffect(
+    RuntimeClient,
+    (formData: FormData) =>
+      Effect.gen(function* () {
+        const api = yield* Service.ApiClient;
 
-      const clientId = formData.get("clientId") as string;
+        const clientId = formData.get("clientId") as string;
 
-      yield* api.client.syncAuth.issueToken({
-        path: { workspaceId },
-        headers: { "x-api-key": token },
-        payload: {
-          clientId,
-          expiresIn: Duration.days(30),
-          scope: "read_write",
-        },
-      });
+        yield* api.client.syncAuth.issueToken({
+          path: { workspaceId },
+          headers: { "x-api-key": token },
+          payload: {
+            clientId,
+            expiresIn: Duration.days(30),
+            scope: "read_write",
+          },
+        });
 
-      yield* Effect.promise(() => router.invalidate({ sync: true }));
-    })
+        yield* Effect.promise(() => router.invalidate({ sync: true }));
+      })
   );
 
-  const [, onRevoke, revoking] = useActionEffect((formData: FormData) =>
-    Effect.gen(function* () {
-      const api = yield* Service.ApiClient;
+  const [, onRevoke, revoking] = useActionEffect(
+    RuntimeClient,
+    (formData: FormData) =>
+      Effect.gen(function* () {
+        const api = yield* Service.ApiClient;
 
-      const clientId = formData.get("clientId") as string;
+        const clientId = formData.get("clientId") as string;
 
-      yield* api.client.syncAuth.revokeToken({
-        path: { workspaceId, clientId },
-        headers: { "x-api-key": token },
-      });
+        yield* api.client.syncAuth.revokeToken({
+          path: { workspaceId, clientId },
+          headers: { "x-api-key": token },
+        });
 
-      yield* Effect.promise(() => router.invalidate({ sync: true }));
-    })
+        yield* Effect.promise(() => router.invalidate({ sync: true }));
+      })
   );
 
   return (

apps/client/src/routes/__root.tsx

@@ -1,11 +1,12 @@
-import { RuntimeLib, Service } from "@local/client-lib";
+import { Service } from "@local/client-lib";
 import { Outlet, createRootRoute } from "@tanstack/react-router";
 import { Effect } from "effect";
+import { RuntimeClient } from "../lib/runtime-client";
 
 export const Route = createRootRoute({
   component: RootComponent,
   loader: () =>
-    RuntimeLib.runPromise(
+    RuntimeClient.runPromise(
       Service.Migration.pipe(
         Effect.flatMap((migration) => migration.migrate),
         Effect.catchAll((error) => Effect.logError("Migration error", error)),

apps/client/src/routes/index.tsx

@@ -1,17 +1,18 @@
-import { RuntimeLib, Service, useActionEffect } from "@local/client-lib";
+import { Service, useActionEffect } from "@local/client-lib";
 import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
 import { Effect } from "effect";
+import { RuntimeClient } from "../lib/runtime-client";
 
 export const Route = createFileRoute("/")({
   component: HomeComponent,
-  loader: () => RuntimeLib.runPromise(Service.WorkspaceManager.getAll),
+  loader: () => RuntimeClient.runPromise(Service.WorkspaceManager.getAll),
 });
 
 function HomeComponent() {
   const allWorkspaces = Route.useLoaderData();
   const navigate = useNavigate();
 
-  const [, joinWorkspace] = useActionEffect(() =>
+  const [, joinWorkspace] = useActionEffect(RuntimeClient, () =>
     Effect.gen(function* () {
       const workspace = yield* Service.WorkspaceManager.create;
       yield* Effect.sync(() =>

apps/client/src/workers/bootstrap.ts

@@ -1,7 +1,8 @@
 import { WorkerRunner } from "@effect/platform";
 import { BrowserWorkerRunner } from "@effect/platform-browser";
-import { RuntimeLib, SyncWorker } from "@local/client-lib";
+import { SyncWorker } from "@local/client-lib";
 import { Effect, Layer } from "effect";
+import { RuntimeClient } from "../lib/runtime-client";
 
 const WorkerLive = WorkerRunner.layerSerialized(SyncWorker.WorkerMessage, {
   Bootstrap: (params) =>
@@ -11,4 +12,4 @@ const WorkerLive = WorkerRunner.layerSerialized(SyncWorker.WorkerMessage, {
     }),
 }).pipe(Layer.provide(BrowserWorkerRunner.layer));
 
-RuntimeLib.runFork(WorkerRunner.launch(WorkerLive));
+RuntimeClient.runFork(WorkerRunner.launch(WorkerLive));

apps/client/src/workers/live.ts

@@ -1,7 +1,8 @@
 import { WorkerRunner } from "@effect/platform";
 import { BrowserWorkerRunner } from "@effect/platform-browser";
-import { RuntimeLib, SyncWorker } from "@local/client-lib";
+import { SyncWorker } from "@local/client-lib";
 import { Effect, Layer } from "effect";
+import { RuntimeClient } from "../lib/runtime-client";
 
 const WorkerLive = WorkerRunner.layer((params: SyncWorker.LiveQuery) =>
   Effect.scoped(
@@ -13,4 +14,4 @@ const WorkerLive = WorkerRunner.layer((params: SyncWorker.LiveQuery) =>
   )
 ).pipe(Layer.provide(BrowserWorkerRunner.layer));
 
-RuntimeLib.runFork(WorkerRunner.launch(WorkerLive));
+RuntimeClient.runFork(WorkerRunner.launch(WorkerLive));