npm - create-syncular-app - Versions diffs - 0.1.2 → 0.2.0 - Mend

create-syncular-app 0.1.2 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (64) hide show

package/README.md +70 -27
package/dist/cli.d.ts +11 -0
package/dist/cli.js +131 -179
package/dist/constants.d.ts +40 -0
package/dist/constants.js +46 -0
package/dist/index.d.ts +3 -0
package/dist/index.js +3 -0
package/dist/scaffold.d.ts +44 -0
package/dist/scaffold.js +106 -0
package/package.json +22 -15
package/src/cli.ts +174 -0
package/src/constants.ts +53 -0
package/src/index.ts +3 -0
package/src/scaffold.ts +161 -0
package/template/minimal/README.md +45 -0
package/template/minimal/gitignore +5 -0
package/template/minimal/migrations/0001_initial/up.sql +9 -0
package/template/minimal/package.json +22 -0
package/template/minimal/src/clients.ts +54 -0
package/template/minimal/src/make-client.ts +26 -0
package/template/minimal/src/server.ts +39 -0
package/template/minimal/src/smoke.test.ts +70 -0
package/template/minimal/src/syncular.generated.ts +66 -0
package/template/minimal/syncular.ir.json +66 -0
package/template/minimal/syncular.json +17 -0
package/template/minimal/tsconfig.json +16 -0
package/template/web/README.md +63 -0
package/template/web/gitignore +5 -0
package/template/web/migrations/0001_initial/up.sql +11 -0
package/template/web/package.json +22 -0
package/template/web/src/frontend/index.html +37 -0
package/template/web/src/frontend/main.ts +191 -0
package/template/web/src/frontend/worker.ts +9 -0
package/template/web/src/server.ts +183 -0
package/template/web/src/smoke.test.ts +91 -0
package/template/web/src/syncular.generated.ts +74 -0
package/template/web/syncular.ir.json +76 -0
package/template/web/syncular.json +17 -0
package/template/web/tsconfig.json +16 -0
package/template/README.md +0 -122
package/template/_gitignore +0 -5
package/template/generated/kotlin/SyncularApp.kt +0 -1005
package/template/generated/rust/diesel_tables.rs +0 -142
package/template/generated/rust/migrations.rs +0 -32
package/template/generated/rust/schema.rs +0 -15
package/template/generated/rust/syncular.rs +0 -926
package/template/generated/swift/SyncularApp.swift +0 -1191
package/template/generated/syncular.codegen.json +0 -19
package/template/index.html +0 -13
package/template/migrations/0001_initial/down.sql +0 -1
package/template/migrations/0001_initial/up.sql +0 -8
package/template/package.json +0 -33
package/template/scripts/dev.ts +0 -42
package/template/src/app.tsx +0 -231
package/template/src/client/syncular.ts +0 -61
package/template/src/generated/syncular.generated.ts +0 -769
package/template/src/generated/syncular.server.generated.ts +0 -512
package/template/src/main.tsx +0 -5
package/template/src/server/sync-server.ts +0 -129
package/template/src/styles.css +0 -233
package/template/syncular.app.ts +0 -23
package/template/syncular.schema.json +0 -145
package/template/tsconfig.json +0 -18
package/template/vite.config.ts +0 -9

package/template/generated/syncular.codegen.json DELETED Viewed

@@ -1,19 +0,0 @@
-{
-  "tables": {
-    "tasks": {
-      "serverVersionColumn": "server_version",
-      "subscriptionId": "sub-tasks",
-      "scopes": [
-        {
-          "name": "user_id",
-          "column": "user_id",
-          "source": "actorId",
-          "required": true
-        }
-      ],
-      "sqliteWithoutRowid": true
-    }
-  },
-  "typescriptOutputPath": "src/generated/syncular.generated.ts",
-  "typescriptServerOutputPath": "src/generated/syncular.server.generated.ts"
-}

package/template/index.html DELETED Viewed

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="data:," />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Syncular App</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package/template/migrations/0001_initial/down.sql DELETED Viewed

	@@ -1 +0,0 @@
1	- DROP TABLE IF EXISTS tasks;

package/template/migrations/0001_initial/up.sql DELETED Viewed

@@ -1,8 +0,0 @@
-CREATE TABLE IF NOT EXISTS tasks (
-  id TEXT PRIMARY KEY,
-  title TEXT NOT NULL,
-  completed INTEGER NOT NULL DEFAULT 0,
-  user_id TEXT NOT NULL,
-  created_at BIGINT NOT NULL DEFAULT 0,
-  server_version BIGINT NOT NULL DEFAULT 0
-) WITHOUT ROWID;

package/template/package.json DELETED Viewed

@@ -1,33 +0,0 @@
-{
-  "name": "syncular-app-template",
-  "version": "0.0.0",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "bun scripts/dev.ts",
-    "build": "vite build",
-    "preview": "bun scripts/dev.ts --preview",
-    "codegen": "syncular generate",
-    "codegen:check": "syncular generate --check",
-    "typecheck": "tsc --noEmit"
-  },
-  "dependencies": {
-    "@syncular/client": "workspace:*",
-    "@syncular/core": "workspace:*",
-    "@syncular/server": "workspace:*",
-    "@syncular/typegen": "workspace:*",
-    "hono": "^4.12.15",
-    "kysely": "^0.28.0",
-    "kysely-bun-sqlite": "^0.4.0",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4"
-  },
-  "devDependencies": {
-    "@types/bun": "^1.3.11",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "syncular": "workspace:*",
-    "typescript": "^6.0.2",
-    "vite": "^8.0.14"
-  }
-}

package/template/scripts/dev.ts DELETED Viewed

@@ -1,42 +0,0 @@
-import { createServer as createViteServer, preview } from 'vite';
-import { startSyncServer } from '../src/server/sync-server';
-const previewMode = process.argv.includes('--preview');
-const syncServer = await startSyncServer({
-  port: Number(process.env.SYNC_PORT ?? 4100),
-});
-async function stop() {
-  await syncServer.close();
-}
-process.on('SIGINT', () => {
-  void stop().finally(() => process.exit(0));
-});
-process.on('SIGTERM', () => {
-  void stop().finally(() => process.exit(0));
-});
-if (previewMode) {
-  const previewServer = await preview({
-    preview: {
-      host: '127.0.0.1',
-      port: 4173,
-    },
-  });
-  previewServer.printUrls();
-} else {
-  const vite = await createViteServer({
-    server: {
-      host: '127.0.0.1',
-      port: Number(process.env.PORT ?? 5173),
-      strictPort: false,
-    },
-  });
-  await vite.listen();
-  vite.printUrls();
-}
-console.log(`[syncular] sync server listening at ${syncServer.origin}`);
-await new Promise(() => {});

package/template/src/app.tsx DELETED Viewed

@@ -1,231 +0,0 @@
-import type { SyncularClientStatus } from '@syncular/client';
-import { createSyncularReact } from '@syncular/client/react';
-import type { FormEvent } from 'react';
-import { useEffect, useRef, useState } from 'react';
-import {
-  type AppDb,
-  type AppSyncClient,
-  appActorId,
-  openAppClient,
-  type Task,
-} from './client/syncular';
-// One hook set, bound to this app's database schema.
-const {
-  SyncProvider,
-  useMutations,
-  useOutboxStats,
-  useSyncQuery,
-  useSyncStatus,
-} = createSyncularReact<AppDb>();
-export function App() {
-  const [client, setClient] = useState<AppSyncClient | null>(null);
-  const [openError, setOpenError] = useState<string | null>(null);
-  useEffect(() => {
-    let disposed = false;
-    let opened: AppSyncClient | null = null;
-    void openAppClient()
-      .then((nextClient) => {
-        if (disposed) {
-          void nextClient.close().catch(() => undefined);
-          return;
-        }
-        opened = nextClient;
-        setClient(nextClient);
-      })
-      .catch((error) => {
-        if (!disposed) setOpenError(errorMessage(error));
-      });
-    return () => {
-      disposed = true;
-      if (opened) void opened.close().catch(() => undefined);
-    };
-  }, []);
-  return (
-    <main className="app-shell">
-      <header className="topbar">
-        <p className="eyebrow">Syncular</p>
-        <h1>Local-first tasks</h1>
-      </header>
-      {openError ? <p className="error-line">{openError}</p> : null}
-      <section className="client-pane" aria-label="Tasks">
-        {client ? (
-          <SyncProvider client={client}>
-            <TaskPane />
-          </SyncProvider>
-        ) : (
-          <p className="empty-state">Opening local database…</p>
-        )}
-      </section>
-    </main>
-  );
-}
-function TaskPane() {
-  // Live query: re-renders whenever synced rows change, locally or remotely.
-  const { data: tasks, error: queryError } = useSyncQuery(
-    ({ selectFrom }) =>
-      selectFrom('tasks')
-        .selectAll()
-        .orderBy('completed', 'asc')
-        .orderBy('created_at', 'desc'),
-    { tables: ['tasks'] }
-  );
-  const mutations = useMutations();
-  const outbox = useOutboxStats();
-  const status = useSyncStatus();
-  const inputRef = useRef<HTMLInputElement>(null);
-  const rows = tasks ?? [];
-  const doneCount = rows.filter((task) => task.completed).length;
-  const queued = (outbox?.pending ?? 0) + (outbox?.sending ?? 0);
-  const addTask = (event: FormEvent) => {
-    event.preventDefault();
-    const title = inputRef.current?.value.trim();
-    if (!title) return;
-    inputRef.current!.value = '';
-    void mutations.tasks
-      .insert({
-        id: crypto.randomUUID(),
-        title,
-        completed: 0,
-        user_id: appActorId,
-        created_at: Date.now(),
-      })
-      .catch(() => undefined);
-  };
-  return (
-    <>
-      <div className="pane-header">
-        <h2>Tasks</h2>
-        <StatusBadge state={paneStatus(status)} />
-      </div>
-      <form className="add-row" onSubmit={addTask}>
-        <input ref={inputRef} aria-label="New task" placeholder="New task" />
-        <button type="submit" aria-label="Add task">
-          +
-        </button>
-      </form>
-      {mutations.$error ? (
-        <p className="error-line">{mutations.$error.message}</p>
-      ) : null}
-      {queryError ? <p className="error-line">{queryError.message}</p> : null}
-      {queued > 0 ? (
-        <p className="offline-line">
-          {queued} queued change{queued === 1 ? '' : 's'} waiting to sync.
-        </p>
-      ) : null}
-      <div className="task-list">
-        {rows.length === 0 ? (
-          <p className="empty-state">
-            No tasks yet. Add one above — it is written to the local database
-            first and synced in the background.
-          </p>
-        ) : (
-          rows.map((task) => (
-            <TaskItem key={task.id} task={task} mutations={mutations} />
-          ))
-        )}
-      </div>
-      <p className="pane-footnote">
-        {rows.length} task{rows.length === 1 ? '' : 's'} · {doneCount} done
-      </p>
-    </>
-  );
-}
-function TaskItem({
-  task,
-  mutations,
-}: {
-  task: Task;
-  mutations: ReturnType<typeof useMutations>;
-}) {
-  const toggle = () => {
-    void mutations.tasks
-      .update(
-        task.id,
-        { completed: task.completed ? 0 : 1 },
-        { baseVersion: task.server_version }
-      )
-      .catch(() => undefined);
-  };
-  const remove = () => {
-    void mutations.tasks
-      .delete(task.id, { baseVersion: task.server_version })
-      .catch(() => undefined);
-  };
-  return (
-    <div className="task-row">
-      <button
-        className="icon-button"
-        type="button"
-        aria-label={task.completed ? 'Mark task open' : 'Mark task done'}
-        onClick={toggle}
-      >
-        {task.completed ? '✓' : '○'}
-      </button>
-      <span className={task.completed ? 'done' : undefined}>{task.title}</span>
-      <button
-        className="icon-button muted"
-        type="button"
-        aria-label="Delete task"
-        onClick={remove}
-      >
-        ×
-      </button>
-    </div>
-  );
-}
-type PaneStatus = 'syncing' | 'offline' | 'attention' | 'error' | 'ready';
-function StatusBadge({ state }: { state: PaneStatus }) {
-  const label =
-    state === 'syncing'
-      ? 'Syncing'
-      : state === 'offline'
-        ? 'Offline'
-        : state === 'attention'
-          ? 'Review'
-          : state === 'error'
-            ? 'Error'
-            : 'Ready';
-  return (
-    <div className={`status-badge ${state}`}>
-      <span className="status-dot" />
-      <span>{label}</span>
-    </div>
-  );
-}
-function paneStatus(status: SyncularClientStatus): PaneStatus {
-  const phase = status.lifecycle.phase;
-  if (phase === 'syncing' || phase === 'recovering' || phase === 'connecting') {
-    return 'syncing';
-  }
-  if (phase === 'offline') return 'offline';
-  if (phase === 'authRequired') return 'error';
-  if (status.requiresAction || phase === 'degraded') return 'attention';
-  return 'ready';
-}
-function errorMessage(error: unknown): string {
-  return error instanceof Error ? error.message : String(error);
-}

package/template/src/client/syncular.ts DELETED Viewed

@@ -1,61 +0,0 @@
-import type { SyncularClientLike, SyncularLiveQueries } from '@syncular/client';
-import type { Selectable } from 'kysely';
-import {
-  createSyncularAppDatabase,
-  type SyncularAppDb,
-} from '../generated/syncular.generated';
-/**
- * Kysely-style database schema for the React hooks. Columns the database
- * defaults (like the server-assigned `server_version`) are emitted as
- * Kysely `Generated<>` columns, so `useMutations().tasks.insert(...)` does
- * not require them.
- */
-export type AppDb = SyncularAppDb;
-export type Task = Selectable<AppDb['tasks']>;
-/** The managed client surface that `@syncular/client/react` consumes. */
-export type AppSyncClient = SyncularClientLike<AppDb> & SyncularLiveQueries;
-/**
- * Demo auth: the starter server accepts this static token and maps it to a
- * single user. Replace with your real auth (and pass the signed-in user's id
- * as `actorId`).
- */
-export const appActorId = 'demo-user';
-const appToken = 'demo-user';
-const syncBaseUrl =
-  import.meta.env.VITE_SYNCULAR_SYNC_URL ?? 'http://127.0.0.1:4100/sync';
-/**
- * Opens the local database (SQLite persisted in IndexedDB). The generated
- * factory installs the app schema, registers the default subscriptions, and
- * starts the sync lifecycle (HTTP sync + WebSocket realtime) before
- * resolving, so the returned client is ready for the React hooks.
- */
-export async function openAppClient(): Promise<AppSyncClient> {
-  const database = await createSyncularAppDatabase({
-    config: {
-      baseUrl: syncBaseUrl,
-      actorId: appActorId,
-      clientId: 'web',
-      fileName: 'syncular-app-v1.sqlite',
-      storage: 'indexedDb',
-    },
-    requestTimeoutMs: 15_000,
-    getHeaders: async () => ({
-      authorization: `Bearer ${appToken}`,
-    }),
-    realtime: {
-      params: { token: appToken },
-      initialReconnectDelayMs: 500,
-      maxReconnectDelayMs: 5_000,
-    },
-  });
-  // The cast bridges the generated mutations interface, which does not
-  // declare the structural `$table` helper the hooks type against.
-  return database as unknown as AppSyncClient;
-}