@spooky-sync/cli 0.0.0-canary.1 → 0.0.1-canary.100

package/templates/cookbook/crdt-text-field.tsx

@@ -0,0 +1,36 @@
+// Recipe: crdt-text-field
+// Wire a CRDT text column (`{{table}}.{{field}}` annotated `-- @crdt text` in the schema)
+// to a textarea. Concurrent edits from multiple clients merge via Loro.
+
+import { useDb, useQuery, useCrdtField } from '@spooky-sync/client-solid';
+import { schema } from '../schema.gen';
+
+export function {{TablePascal}}{{FieldPascal}}Editor(props: { id: string }) {
+  const db = useDb<typeof schema>();
+
+  // Pull the surrounding row so we know the field is loaded.
+  const rowResult = useQuery(() =>
+    db.query('{{table}}').where({ id: props.id } as any).build()
+  );
+  const row = () => rowResult.data()?.[0];
+
+  // Bind the CRDT field. All four args take accessor functions for SolidJS tracking.
+  const field = useCrdtField(
+    '{{table}}',
+    () => row()?.id,
+    '{{field}}',
+    () => row()?.{{field}}
+  );
+
+  const handleInput = async (e: InputEvent) => {
+    const next = (e.currentTarget as HTMLTextAreaElement).value;
+    const r = row();
+    if (!r?.id) return;
+    // `debounced` coalesces rapid keystrokes into a single mutation.
+    await db.update('{{table}}', r.id, { {{field}}: next }, { debounced: true });
+  };
+
+  return (
+    <textarea value={field.value() ?? ''} onInput={handleInput} />
+  );
+}

package/templates/cookbook/live-list.tsx

@@ -0,0 +1,22 @@
+// Recipe: live-list
+// Reactive, sorted list of `{{table}}` rows. Re-runs automatically as records change.
+
+import { For } from 'solid-js';
+import { useQuery, useDb } from '@spooky-sync/client-solid';
+import { schema } from '../schema.gen';
+
+export function {{TablePascal}}List() {
+  const db = useDb<typeof schema>();
+
+  const result = useQuery(() =>
+    db.query('{{table}}').orderBy('id', 'asc').limit(50).build()
+  );
+
+  return (
+    <ul>
+      <For each={result.data() ?? []}>
+        {(row) => <li>{row.id}</li>}
+      </For>
+    </ul>
+  );
+}

package/templates/cookbook/optimistic-mutation.tsx

@@ -0,0 +1,33 @@
+// Recipe: optimistic-mutation
+// Insert a new `{{table}}` row from a UI action. Local cache updates immediately;
+// the mutation drains to the remote in the background.
+
+import { createSignal } from 'solid-js';
+import { Uuid, useDb } from '@spooky-sync/client-solid';
+import { schema } from '../schema.gen';
+
+export function Create{{TablePascal}}Form() {
+  const db = useDb<typeof schema>();
+  const [submitting, setSubmitting] = createSignal(false);
+
+  const handleSubmit = async (e: SubmitEvent) => {
+    e.preventDefault();
+    setSubmitting(true);
+    try {
+      const id = new Uuid().toString();
+      await db.create(`{{table}}:${id}`, {
+        // TODO: fill in the fields your `{{table}}` schema requires.
+      });
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <button type="submit" disabled={submitting()}>
+        {submitting() ? 'Creating…' : 'Create {{table}}'}
+      </button>
+    </form>
+  );
+}