@voltro/cli 0.28.0 → 0.29.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.
- package/CHANGELOG.md +278 -0
- package/THIRD-PARTY-NOTICES.md +88 -2
- package/dist/{apiBuild-eUM32r1u.js → apiBuild-BESZbTjA.js} +3 -3
- package/dist/apiBuild-C8d74T6g.js +2 -0
- package/dist/bin.js +3 -3
- package/dist/checkCommand-BPAtyWs8.js +2420 -0
- package/dist/checkCommand-DBvZvCh1.js +2 -0
- package/dist/cliRuntime-Oh517vCV.js +96 -0
- package/dist/{commands-CSkrUI1h.js → commands-82BDEktg.js} +6803 -8191
- package/dist/dbCommand-CaIVTp-a.js +2 -0
- package/dist/{dbCommand-CpYgmSw4.js → dbCommand-bCBbk6tz.js} +2 -2
- package/dist/{dev-CEZwJhmb.js → dev-Cg4BKLmi.js} +1801 -1612
- package/dist/{dev-DlBWWnJQ.js → dev-DeEJj5T4.js} +1 -1
- package/dist/fileConventions-Cof68_BL.js +33 -0
- package/dist/{frameworkTableAssembly-BwHU9Euq.js → frameworkTableAssembly-4Db40V23.js} +2 -2
- package/dist/frameworkTableAssembly-BTNirAAk.js +2 -0
- package/dist/index.js +1 -1
- package/dist/{inspect-CUCCzw2I.js → inspect-BMvQpwqy.js} +211 -190
- package/dist/inspect-DHeaMZak.js +2 -0
- package/dist/{inspectMetrics-BU90mvJN.js → inspectMetrics-DHYygE4s.js} +999 -961
- package/dist/{manifestBuild-BnzAxp2O.js → manifestBuild-C4R1EdHn.js} +1 -1
- package/dist/manifestBuild-Ck_90gZy.js +2 -0
- package/dist/sdkgen-CW5NbYF0.js +582 -0
- package/dist/serveCommand-BXl8mhZD.js +1489 -0
- package/dist/serveEntry.js +2 -2
- package/dist/{start-BGXIf6zT.js → start-CsCIaW4-.js} +282 -269
- package/dist/startEntry.js +2 -2
- package/package.json +17 -17
- package/templates/AGENTS.md +2 -1
- package/templates/agent-docs/_index.md +2 -1
- package/templates/agent-docs/_manifest.json +10 -1
- package/templates/agent-docs/ai.md +135 -0
- package/templates/agent-docs/cli.md +124 -6
- package/templates/agent-docs/configuration.md +32 -0
- package/templates/agent-docs/data.md +282 -0
- package/templates/agent-docs/database/migrations.md +47 -0
- package/templates/agent-docs/database/misc.md +57 -0
- package/templates/agent-docs/database/schema.md +3 -1
- package/templates/agent-docs/internationalization.md +161 -1
- package/templates/agent-docs/local-first-mobile.md +414 -0
- package/templates/agent-docs/routing.md +93 -2
- package/templates/agent-docs/schema-driven-ui.md +12 -0
- package/templates/agent-docs/templates/apibackends.md +1 -1
- package/templates/agent-docs/whats-new.md +162 -181
- package/templates/agent-docs/workflows.md +11 -0
- package/templates/apps/api-ai/package.json +7 -7
- package/templates/apps/api-auth/package.json +8 -8
- package/templates/apps/api-backend/package.json +7 -7
- package/templates/apps/api-backend-deactivation/package.json +7 -7
- package/templates/apps/api-backend-mail/package.json +8 -8
- package/templates/apps/api-backend-mariadb/package.json +9 -9
- package/templates/apps/api-backend-sqlite/.env.example +19 -0
- package/templates/apps/api-backend-sqlite/README.md +38 -0
- package/templates/apps/api-backend-sqlite/app.config.ts +35 -0
- package/templates/apps/api-backend-sqlite/database/schema.ts +54 -0
- package/templates/apps/api-backend-sqlite/mutations/notes.create.mutation.server.ts +19 -0
- package/templates/apps/api-backend-sqlite/mutations/notes.create.mutation.ts +37 -0
- package/templates/apps/api-backend-sqlite/package.json +30 -0
- package/templates/apps/api-backend-sqlite/queries/notes.query.server.ts +14 -0
- package/templates/apps/api-backend-sqlite/queries/notes.query.ts +20 -0
- package/templates/apps/api-backend-sqlite/template.json +6 -0
- package/templates/apps/api-backend-sqlite/tests/notes.create.test.ts +50 -0
- package/templates/apps/api-backend-sqlite/tsconfig.json +5 -0
- package/templates/apps/api-backend-storage/package.json +8 -8
- package/templates/apps/api-cms/README.md +104 -0
- package/templates/apps/api-cms/actions/content.get.action.server.ts +27 -0
- package/templates/apps/api-cms/actions/content.get.action.ts +19 -0
- package/templates/apps/api-cms/actions/content.types.action.server.ts +26 -0
- package/templates/apps/api-cms/actions/content.types.action.ts +40 -0
- package/templates/apps/api-cms/actions/me.action.server.ts +18 -0
- package/templates/apps/api-cms/actions/me.action.ts +16 -0
- package/templates/apps/api-cms/app.config.ts +61 -0
- package/templates/apps/api-cms/content/blogPost.contentType.ts +39 -0
- package/templates/apps/api-cms/content/index.ts +18 -0
- package/templates/apps/api-cms/content/page.contentType.ts +24 -0
- package/templates/apps/api-cms/database/schema.ts +64 -0
- package/templates/apps/api-cms/mutations/content.publish.mutation.server.ts +19 -0
- package/templates/apps/api-cms/mutations/content.publish.mutation.ts +15 -0
- package/templates/apps/api-cms/mutations/content.saveDraft.mutation.server.ts +36 -0
- package/templates/apps/api-cms/mutations/content.saveDraft.mutation.ts +32 -0
- package/templates/apps/api-cms/mutations/content.unpublish.mutation.server.ts +19 -0
- package/templates/apps/api-cms/mutations/content.unpublish.mutation.ts +11 -0
- package/templates/apps/api-cms/package.json +32 -0
- package/templates/apps/api-cms/queries/content.list.query.server.ts +0 -0
- package/templates/apps/api-cms/queries/content.list.query.ts +27 -0
- package/templates/apps/api-cms/template.json +6 -0
- package/templates/apps/api-cms/tests/content.descriptors.test.ts +64 -0
- package/templates/apps/api-cms/tests/content.write.test.ts +85 -0
- package/templates/apps/api-cms/tsconfig.json +5 -0
- package/templates/apps/api-data-advanced/package.json +8 -8
- package/templates/apps/api-durable/package.json +8 -8
- package/templates/apps/api-feature-flags/package.json +9 -9
- package/templates/apps/api-governance/package.json +8 -8
- package/templates/apps/api-kv/package.json +8 -8
- package/templates/apps/api-moderation/package.json +8 -8
- package/templates/apps/api-observability/package.json +8 -8
- package/templates/apps/api-ratelimit/package.json +8 -8
- package/templates/apps/api-rbac/package.json +8 -8
- package/templates/apps/api-rest/package.json +7 -7
- package/templates/apps/api-saas/package.json +11 -11
- package/templates/apps/api-saas-starter/README.md +103 -0
- package/templates/apps/api-saas-starter/actions/me.action.server.ts +18 -0
- package/templates/apps/api-saas-starter/actions/me.action.ts +20 -0
- package/templates/apps/api-saas-starter/app.config.ts +87 -0
- package/templates/apps/api-saas-starter/database/schema.ts +57 -0
- package/templates/apps/api-saas-starter/mutations/invites.create.mutation.server.ts +26 -0
- package/templates/apps/api-saas-starter/mutations/invites.create.mutation.ts +18 -0
- package/templates/apps/api-saas-starter/mutations/projects.create.mutation.server.ts +29 -0
- package/templates/apps/api-saas-starter/mutations/projects.create.mutation.ts +18 -0
- package/templates/apps/api-saas-starter/package.json +32 -0
- package/templates/apps/api-saas-starter/queries/invites.list.query.server.ts +14 -0
- package/templates/apps/api-saas-starter/queries/invites.list.query.ts +17 -0
- package/templates/apps/api-saas-starter/queries/projects.list.query.server.ts +14 -0
- package/templates/apps/api-saas-starter/queries/projects.list.query.ts +18 -0
- package/templates/apps/api-saas-starter/template.json +6 -0
- package/templates/apps/api-saas-starter/tests/projects.create.test.ts +62 -0
- package/templates/apps/api-saas-starter/tests/session.test.ts +33 -0
- package/templates/apps/api-saas-starter/tsconfig.json +5 -0
- package/templates/apps/api-search/package.json +8 -8
- package/templates/apps/api-status/README.md +88 -0
- package/templates/apps/api-status/app.config.ts +36 -0
- package/templates/apps/api-status/authz.ts +33 -0
- package/templates/apps/api-status/database/schema.ts +70 -0
- package/templates/apps/api-status/mutations/components.create.mutation.server.ts +19 -0
- package/templates/apps/api-status/mutations/components.create.mutation.ts +16 -0
- package/templates/apps/api-status/mutations/incidents.create.mutation.server.ts +25 -0
- package/templates/apps/api-status/mutations/incidents.create.mutation.ts +22 -0
- package/templates/apps/api-status/mutations/incidents.resolve.mutation.server.ts +24 -0
- package/templates/apps/api-status/mutations/incidents.resolve.mutation.ts +19 -0
- package/templates/apps/api-status/mutations/incidents.update.mutation.server.ts +26 -0
- package/templates/apps/api-status/mutations/incidents.update.mutation.ts +21 -0
- package/templates/apps/api-status/package.json +30 -0
- package/templates/apps/api-status/queries/components.list.query.server.ts +14 -0
- package/templates/apps/api-status/queries/components.list.query.ts +13 -0
- package/templates/apps/api-status/queries/incidents.live.query.server.ts +14 -0
- package/templates/apps/api-status/queries/incidents.live.query.ts +20 -0
- package/templates/apps/api-status/queries/updates.list.query.server.ts +14 -0
- package/templates/apps/api-status/queries/updates.list.query.ts +17 -0
- package/templates/apps/api-status/template.json +6 -0
- package/templates/apps/api-status/tests/status.test.ts +70 -0
- package/templates/apps/api-status/tsconfig.json +5 -0
- package/templates/apps/api-versioning/package.json +8 -8
- package/templates/apps/api-webhooks/package.json +9 -9
- package/templates/apps/changelog/package.json +6 -6
- package/templates/apps/edge-functions/package.json +2 -2
- package/templates/apps/frontend-admin/package.json +8 -8
- package/templates/apps/frontend-app/package.json +8 -8
- package/templates/apps/frontend-auth/README.md +78 -0
- package/templates/apps/frontend-auth/app.config.ts +34 -0
- package/templates/apps/frontend-auth/package.json +32 -0
- package/templates/apps/frontend-auth/src/components/AuthShell.tsx +35 -0
- package/templates/apps/frontend-auth/src/components/PasswordStrength.tsx +33 -0
- package/templates/apps/frontend-auth/src/config.ts +11 -0
- package/templates/apps/frontend-auth/src/globals.css +105 -0
- package/templates/apps/frontend-auth/src/globals.d.ts +6 -0
- package/templates/apps/frontend-auth/src/lib/auth.ts +34 -0
- package/templates/apps/frontend-auth/src/lib/redirect.test.ts +24 -0
- package/templates/apps/frontend-auth/src/lib/redirect.ts +29 -0
- package/templates/apps/frontend-auth/src/locales/de.ts +66 -0
- package/templates/apps/frontend-auth/src/locales/en.ts +76 -0
- package/templates/apps/frontend-auth/src/locales/index.ts +14 -0
- package/templates/apps/frontend-auth/src/pages/forgot/page.tsx +51 -0
- package/templates/apps/frontend-auth/src/pages/layout.tsx +12 -0
- package/templates/apps/frontend-auth/src/pages/login/page.test.tsx +53 -0
- package/templates/apps/frontend-auth/src/pages/login/page.tsx +67 -0
- package/templates/apps/frontend-auth/src/pages/logout/page.tsx +28 -0
- package/templates/apps/frontend-auth/src/pages/magic/page.tsx +51 -0
- package/templates/apps/frontend-auth/src/pages/page.tsx +26 -0
- package/templates/apps/frontend-auth/src/pages/reset/page.test.tsx +51 -0
- package/templates/apps/frontend-auth/src/pages/reset/page.tsx +63 -0
- package/templates/apps/frontend-auth/src/pages/signup/page.tsx +60 -0
- package/templates/apps/frontend-auth/src/pages/verify/page.tsx +50 -0
- package/templates/apps/frontend-auth/template.json +6 -0
- package/templates/apps/frontend-auth/tsconfig.json +5 -0
- package/templates/apps/frontend-blank/package.json +7 -7
- package/templates/apps/frontend-cms/README.md +47 -0
- package/templates/apps/frontend-cms/app.config.ts +37 -0
- package/templates/apps/frontend-cms/package.json +33 -0
- package/templates/apps/frontend-cms/src/config.ts +8 -0
- package/templates/apps/frontend-cms/src/globals.css +105 -0
- package/templates/apps/frontend-cms/src/globals.d.ts +6 -0
- package/templates/apps/frontend-cms/src/lib/api.ts +58 -0
- package/templates/apps/frontend-cms/src/locales/de.ts +50 -0
- package/templates/apps/frontend-cms/src/locales/en.ts +55 -0
- package/templates/apps/frontend-cms/src/locales/index.ts +14 -0
- package/templates/apps/frontend-cms/src/pages/(app)/error.tsx +18 -0
- package/templates/apps/frontend-cms/src/pages/(app)/layout.test.tsx +31 -0
- package/templates/apps/frontend-cms/src/pages/(app)/layout.tsx +62 -0
- package/templates/apps/frontend-cms/src/pages/(app)/not-found.tsx +14 -0
- package/templates/apps/frontend-cms/src/pages/(app)/page.test.tsx +110 -0
- package/templates/apps/frontend-cms/src/pages/(app)/page.tsx +159 -0
- package/templates/apps/frontend-cms/src/pages/layout.tsx +12 -0
- package/templates/apps/frontend-cms/src/pages/login/page.test.tsx +58 -0
- package/templates/apps/frontend-cms/src/pages/login/page.tsx +93 -0
- package/templates/apps/frontend-cms/template.json +6 -0
- package/templates/apps/frontend-cms/tsconfig.json +5 -0
- package/templates/apps/frontend-contact/package.json +7 -7
- package/templates/apps/frontend-dashboard/package.json +7 -7
- package/templates/apps/frontend-docs/package.json +7 -7
- package/templates/apps/frontend-i18n/package.json +6 -6
- package/templates/apps/frontend-landing/package.json +7 -7
- package/templates/apps/frontend-portal/README.md +71 -0
- package/templates/apps/frontend-portal/app.config.ts +37 -0
- package/templates/apps/frontend-portal/package.json +32 -0
- package/templates/apps/frontend-portal/src/config.ts +8 -0
- package/templates/apps/frontend-portal/src/globals.css +93 -0
- package/templates/apps/frontend-portal/src/globals.d.ts +6 -0
- package/templates/apps/frontend-portal/src/lib/api.ts +62 -0
- package/templates/apps/frontend-portal/src/locales/de.ts +86 -0
- package/templates/apps/frontend-portal/src/locales/en.ts +93 -0
- package/templates/apps/frontend-portal/src/locales/index.ts +14 -0
- package/templates/apps/frontend-portal/src/pages/(portal)/api-keys/page.test.tsx +71 -0
- package/templates/apps/frontend-portal/src/pages/(portal)/api-keys/page.tsx +124 -0
- package/templates/apps/frontend-portal/src/pages/(portal)/billing/page.test.tsx +86 -0
- package/templates/apps/frontend-portal/src/pages/(portal)/billing/page.tsx +97 -0
- package/templates/apps/frontend-portal/src/pages/(portal)/error.tsx +19 -0
- package/templates/apps/frontend-portal/src/pages/(portal)/invoices/page.tsx +45 -0
- package/templates/apps/frontend-portal/src/pages/(portal)/layout.test.tsx +31 -0
- package/templates/apps/frontend-portal/src/pages/(portal)/layout.tsx +63 -0
- package/templates/apps/frontend-portal/src/pages/(portal)/not-found.tsx +15 -0
- package/templates/apps/frontend-portal/src/pages/(portal)/page.tsx +39 -0
- package/templates/apps/frontend-portal/src/pages/(portal)/profile/page.tsx +79 -0
- package/templates/apps/frontend-portal/src/pages/layout.tsx +12 -0
- package/templates/apps/frontend-portal/src/pages/login/page.test.tsx +58 -0
- package/templates/apps/frontend-portal/src/pages/login/page.tsx +96 -0
- package/templates/apps/frontend-portal/template.json +6 -0
- package/templates/apps/frontend-portal/tsconfig.json +5 -0
- package/templates/apps/frontend-saas/README.md +73 -0
- package/templates/apps/frontend-saas/app.config.ts +46 -0
- package/templates/apps/frontend-saas/package.json +32 -0
- package/templates/apps/frontend-saas/src/config.ts +8 -0
- package/templates/apps/frontend-saas/src/globals.css +85 -0
- package/templates/apps/frontend-saas/src/globals.d.ts +6 -0
- package/templates/apps/frontend-saas/src/lib/api.ts +47 -0
- package/templates/apps/frontend-saas/src/locales/de.ts +72 -0
- package/templates/apps/frontend-saas/src/locales/en.ts +81 -0
- package/templates/apps/frontend-saas/src/locales/index.ts +14 -0
- package/templates/apps/frontend-saas/src/pages/(marketing)/layout.tsx +30 -0
- package/templates/apps/frontend-saas/src/pages/(marketing)/login/page.test.tsx +58 -0
- package/templates/apps/frontend-saas/src/pages/(marketing)/login/page.tsx +96 -0
- package/templates/apps/frontend-saas/src/pages/(marketing)/page.tsx +27 -0
- package/templates/apps/frontend-saas/src/pages/dashboard/billing/page.tsx +72 -0
- package/templates/apps/frontend-saas/src/pages/dashboard/error.tsx +20 -0
- package/templates/apps/frontend-saas/src/pages/dashboard/layout.test.tsx +32 -0
- package/templates/apps/frontend-saas/src/pages/dashboard/layout.tsx +69 -0
- package/templates/apps/frontend-saas/src/pages/dashboard/not-found.tsx +17 -0
- package/templates/apps/frontend-saas/src/pages/dashboard/page.test.tsx +113 -0
- package/templates/apps/frontend-saas/src/pages/dashboard/page.tsx +76 -0
- package/templates/apps/frontend-saas/src/pages/dashboard/team/page.tsx +73 -0
- package/templates/apps/frontend-saas/src/pages/layout.tsx +12 -0
- package/templates/apps/frontend-saas/template.json +6 -0
- package/templates/apps/frontend-saas/tsconfig.json +5 -0
- package/templates/apps/frontend-spa/package.json +7 -7
- package/templates/apps/frontend-ssr/package.json +7 -7
- package/templates/apps/frontend-ssr-api/package.json +8 -8
- package/templates/apps/frontend-static-blog/package.json +6 -6
- package/templates/apps/frontend-status/README.md +51 -0
- package/templates/apps/frontend-status/app.config.ts +39 -0
- package/templates/apps/frontend-status/package.json +32 -0
- package/templates/apps/frontend-status/src/config.ts +7 -0
- package/templates/apps/frontend-status/src/globals.css +70 -0
- package/templates/apps/frontend-status/src/globals.d.ts +6 -0
- package/templates/apps/frontend-status/src/lib/status.ts +81 -0
- package/templates/apps/frontend-status/src/locales/de.ts +41 -0
- package/templates/apps/frontend-status/src/locales/en.ts +45 -0
- package/templates/apps/frontend-status/src/locales/index.ts +13 -0
- package/templates/apps/frontend-status/src/pages/layout.tsx +27 -0
- package/templates/apps/frontend-status/src/pages/page.test.tsx +123 -0
- package/templates/apps/frontend-status/src/pages/page.tsx +136 -0
- package/templates/apps/frontend-status/template.json +6 -0
- package/templates/apps/frontend-status/tsconfig.json +11 -0
- package/templates/baselines/compose/docker-compose.prod.yml +15 -0
- package/templates/baselines/compose-mariadb/docker-compose.prod.yml +15 -0
- package/dist/apiBuild-DgBS9ayv.js +0 -2
- package/dist/dbCommand-DvguqlzF.js +0 -2
- package/dist/fileConventions-3bffWssN.js +0 -30
- package/dist/frameworkTableAssembly-lrjZtk0G.js +0 -2
- package/dist/inspect-gt8bq-Tz.js +0 -2
- package/dist/manifestBuild-ifczArzr.js +0 -2
- package/dist/serveCommand-ZTn-dPFa.js +0 -1425
|
@@ -0,0 +1,414 @@
|
|
|
1
|
+
# Local-first & Mobile
|
|
2
|
+
|
|
3
|
+
> "@voltro/local-first — CRDT text merge (crdtText/mergeCrdtStates), the offline sync-queue + SyncClient wire, presence/awareness, durable persistence, and the localFirst table mixin. Pure and browser-safe; the React hooks live behind a subpath."
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
<!-- source: en/local-first/overview.md -->
|
|
10
|
+
## Local-first & CRDTs
|
|
11
|
+
|
|
12
|
+
_"@voltro/local-first — CRDT text merge (crdtText/mergeCrdtStates), the offline sync-queue + SyncClient wire, presence/awareness, durable persistence, and the localFirst table mixin. Pure and browser-safe; the React hooks live behind a subpath."_
|
|
13
|
+
|
|
14
|
+
`@voltro/local-first` is the framework's foundation for **offline-capable,
|
|
15
|
+
multiplayer, convergent** apps: edit while disconnected, see other peers' cursors,
|
|
16
|
+
and reconcile without losing work when the network returns. The `.` entry is
|
|
17
|
+
**pure and browser-safe** — no `effect`, no `node:*` — so a route or component
|
|
18
|
+
imports it directly. The React wrappers live behind `@voltro/local-first/react`
|
|
19
|
+
(React is an optional peer, so the pure path never pulls it in).
|
|
20
|
+
|
|
21
|
+
> **What ships today**: the pure CRDT text merge, the offline sync-queue reducer,
|
|
22
|
+
> the connection-lifecycle state machine, the conflict policy, the
|
|
23
|
+
> [`crdtText()` database column](#the-crdttext-database-column) (with its
|
|
24
|
+
> authoritative server-side merge on the write path), the
|
|
25
|
+
> [`SyncClient`](#the-syncclient-bi-directional-wire) that drives the queue over a
|
|
26
|
+
> transport, [presence/awareness](#presence--awareness) via `usePresence`,
|
|
27
|
+
> [durable IndexedDB persistence](#durable-persistence), and the
|
|
28
|
+
> [`localFirst` table mixin](#the-localfirst-table-mixin). What remains is a thin
|
|
29
|
+
> [runtime binding](#whats-shipped-vs-a-runtime-seam) to provisioned infra
|
|
30
|
+
> (a broker at scale, a running app's transport) — not un-built framework code.
|
|
31
|
+
|
|
32
|
+
## CRDT text: `crdtText` + `mergeCrdtStates`
|
|
33
|
+
|
|
34
|
+
A CRDT (Conflict-free Replicated Data Type) text field can be edited by many
|
|
35
|
+
peers offline and always converges to the same result. `crdtText()` builds one
|
|
36
|
+
(Yjs-backed behind the `CrdtBackend` abstraction), and `mergeCrdtStates()` is
|
|
37
|
+
the heart of the package — it converges two encoded states into one,
|
|
38
|
+
deterministically and order-independently.
|
|
39
|
+
|
|
40
|
+
```ts
|
|
41
|
+
import { crdtText, mergeCrdtStates, decodeCrdtText } from '@voltro/local-first'
|
|
42
|
+
|
|
43
|
+
// A field, edited offline. `insert`/`delete` mutate and return the same handle.
|
|
44
|
+
const doc = crdtText('Hello').insert(5, ', world')
|
|
45
|
+
const state = doc.encode() // the wire/storage form: a CrdtState
|
|
46
|
+
|
|
47
|
+
// Converge two peers' encoded states — order-independent, no lost edits.
|
|
48
|
+
const remote = crdtText('Hello').insert(5, ' there').encode()
|
|
49
|
+
const merged = mergeCrdtStates(state, remote)
|
|
50
|
+
decodeCrdtText(merged) // the plain-string view; both edits survive
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
`mergeCrdtStates` is deterministic (`decodeCrdtText(mergeCrdtStates(a, b))`
|
|
54
|
+
equals the same for `(b, a)`), idempotent (re-merging a contained state is a
|
|
55
|
+
no-op), and treats `emptyCrdtState()` as identity. The backend is a parameter on
|
|
56
|
+
every function (defaulting to Yjs), so a later swap to Loro touches no call site.
|
|
57
|
+
|
|
58
|
+
## The `crdtText()` database column
|
|
59
|
+
|
|
60
|
+
`@voltro/database` ships a `crdtText()` **column type** for CRDT-managed fields.
|
|
61
|
+
It needs no special DDL — to the declarative differ it is an ordinary nullable
|
|
62
|
+
`bytes` column (BYTEA / BLOB / LONGBLOB / VARBINARY), so it plans and round-trips
|
|
63
|
+
on every dialect like any other:
|
|
64
|
+
|
|
65
|
+
```ts
|
|
66
|
+
import { table, id, text, crdtText } from '@voltro/database'
|
|
67
|
+
|
|
68
|
+
export const documents = table('documents', {
|
|
69
|
+
id: id(),
|
|
70
|
+
title: text(),
|
|
71
|
+
body: crdtText(), // CRDT-managed field — stored as the encoded state (bytes)
|
|
72
|
+
})
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
The row type is `Uint8Array | null` (the encoded CRDT state); decode it to a
|
|
76
|
+
string with `decodeCrdtText()`, and produce writes with a `crdtText()` handle's
|
|
77
|
+
`.encode()`. The merge is **authoritative and server-side**: the runtime folds an
|
|
78
|
+
incoming update into the stored state with `mergeCrdtStates` on the write path
|
|
79
|
+
before writing, then the reactive engine broadcasts the merged result — which is
|
|
80
|
+
what makes concurrent edits converge without a last-write-wins loser.
|
|
81
|
+
|
|
82
|
+
## The `localFirst` table mixin
|
|
83
|
+
|
|
84
|
+
`localFirst()` **marks a table as local-first** — mirrored to the client, synced
|
|
85
|
+
bi-directionally, and (for its `crdtText()` fields) converged via CRDT merge. It
|
|
86
|
+
adds no column; it is a property the framework reflects on.
|
|
87
|
+
|
|
88
|
+
```ts
|
|
89
|
+
import { table, id, text, crdtText, localFirst } from '@voltro/database'
|
|
90
|
+
|
|
91
|
+
export const documents = table('documents', {
|
|
92
|
+
id: id(),
|
|
93
|
+
title: text(),
|
|
94
|
+
body: crdtText(),
|
|
95
|
+
}).with(localFirst()) // opt this table into local-first sync + persistence
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
Discovery needs no codegen change — a marker mixin rides `.with()` like any
|
|
99
|
+
column type. `isLocalFirst(table)` and `localFirstTables(schema)` are pure
|
|
100
|
+
helpers, and the runtime's schema registry reflects it as `hasLocalFirst(table)`
|
|
101
|
+
(beside `crdtColumns(table)`), which is the signal a client-sync-set builder
|
|
102
|
+
reads. A local-first table may also carry plain columns — those sync
|
|
103
|
+
last-write-wins via the [conflict policy](#conflict-policy-for-non-crdt-fields).
|
|
104
|
+
|
|
105
|
+
## The `SyncClient`: bi-directional wire
|
|
106
|
+
|
|
107
|
+
`createSyncClient({ transport })` maps the offline sync queue onto a transport:
|
|
108
|
+
a local edit merges optimistically and queues; reconnect drains it to the server
|
|
109
|
+
with retry; incoming merged state folds back via the CRDT — and concurrent edits
|
|
110
|
+
converge. It invents **no** transport of its own — the `SyncTransport` is two
|
|
111
|
+
functions an app binds to its **existing** wire:
|
|
112
|
+
|
|
113
|
+
- `push` — deliver a queued CRDT write. Bound to a [`useMutation`](/docs/data/mutations)
|
|
114
|
+
that writes the `crdtText()` column (the server folds it authoritatively).
|
|
115
|
+
- `onRemoteState` — receive merged state. Bound to the reactive
|
|
116
|
+
[`useSubscription`](/docs/data/queries) that already streams the row.
|
|
117
|
+
|
|
118
|
+
```ts
|
|
119
|
+
import { createSyncClient } from '@voltro/local-first'
|
|
120
|
+
|
|
121
|
+
const sync = createSyncClient({
|
|
122
|
+
transport: {
|
|
123
|
+
kind: 'sync-transport',
|
|
124
|
+
push: (write) => runMutation('documents.setBody', write.payload),
|
|
125
|
+
onRemoteState: (handler) =>
|
|
126
|
+
subscribeRow('documents', (row) =>
|
|
127
|
+
handler({ table: 'documents', id: row.id, column: 'body', state: row.body }),
|
|
128
|
+
),
|
|
129
|
+
},
|
|
130
|
+
adapter: durablePersistence, // optional — survives a reload
|
|
131
|
+
})
|
|
132
|
+
|
|
133
|
+
// A local edit: merges locally at once, queues, drains when online.
|
|
134
|
+
sync.enqueue({ table: 'documents', id: 'd1', column: 'body', update: doc.encode() })
|
|
135
|
+
sync.getText({ table: 'documents', id: 'd1', column: 'body' }) // the merged view
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
Everything below the two transport functions — the drain loop, retry/attempt
|
|
139
|
+
counting, optimistic local merge, durable persistence — is in the client and
|
|
140
|
+
tested against an in-memory dispatcher that mirrors the server's merge.
|
|
141
|
+
|
|
142
|
+
## Presence & awareness
|
|
143
|
+
|
|
144
|
+
`usePresence(roomId, self, { channel })` publishes this peer's ephemeral state
|
|
145
|
+
(cursor, name, selection) and returns everyone else's — the multiplayer cursors
|
|
146
|
+
of a collaborative editor. Presence is **ephemeral and high-frequency**, so it
|
|
147
|
+
rides a pub/sub channel, never Postgres CDC or a table.
|
|
148
|
+
|
|
149
|
+
```tsx
|
|
150
|
+
import { usePresence } from '@voltro/local-first/react'
|
|
151
|
+
|
|
152
|
+
function Editor({ documentId, channel }) {
|
|
153
|
+
const { presence, others, setPresence } = usePresence(
|
|
154
|
+
documentId,
|
|
155
|
+
{ cursor: 0, name: 'Ada' },
|
|
156
|
+
{ channel },
|
|
157
|
+
)
|
|
158
|
+
// render `others` as remote cursors; update on selection change:
|
|
159
|
+
const onSelect = (cursor: number) => setPresence({ cursor, name: 'Ada' })
|
|
160
|
+
return <Cursors others={others} />
|
|
161
|
+
}
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
The `PresenceChannel` is the **same dumb string-payload pub/sub shape** as the
|
|
165
|
+
framework broker (`@voltro/plugin-broadcast`), so a runtime binding forwards
|
|
166
|
+
straight onto the app's provisioned broker — in-memory locally,
|
|
167
|
+
Redis/NATS at scale (both already shipped). `createInMemoryPresenceChannel()` is
|
|
168
|
+
the local/test transport. Join/leave, announce-back discovery, cursor
|
|
169
|
+
propagation, and TTL expiry live in the pure `createPresenceRoom` the hook wraps.
|
|
170
|
+
|
|
171
|
+
## The offline sync queue
|
|
172
|
+
|
|
173
|
+
`useSyncQueue()` is a reactive view over a **pure, tested reducer**: writes made
|
|
174
|
+
offline are queued, and a transport drains them when connectivity returns. Use it
|
|
175
|
+
directly for fine-grained UI, or let the [`SyncClient`](#the-syncclient-bi-directional-wire)
|
|
176
|
+
drive it for you.
|
|
177
|
+
|
|
178
|
+
```tsx
|
|
179
|
+
import { useSyncQueue, useConnectionStatus } from '@voltro/local-first/react'
|
|
180
|
+
|
|
181
|
+
function SaveIndicator() {
|
|
182
|
+
const queue = useSyncQueue()
|
|
183
|
+
const { status } = useConnectionStatus(queue.outstanding)
|
|
184
|
+
// `outstanding` counts pending + in-flight (0 means synced).
|
|
185
|
+
return status === 'synced' ? null : <span>Saving… ({status})</span>
|
|
186
|
+
}
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
## Connection status
|
|
190
|
+
|
|
191
|
+
`useConnectionStatus(outstanding)` observes the connection lifecycle for the
|
|
192
|
+
local-first layer — network up/down plus reconnect confirmation — and folds the
|
|
193
|
+
number of unsynced writes into a display `status` of `offline | syncing |
|
|
194
|
+
synced`, so `synced` means online **and** drained. It feeds the machine the two
|
|
195
|
+
signals a browser can observe (`navigator.onLine` + the `online`/`offline`
|
|
196
|
+
events); confirmed round-trips (`confirm()`/`confirmFailed()`) are left to the
|
|
197
|
+
caller, so the hook never invents a server ping.
|
|
198
|
+
|
|
199
|
+
> This is the local-first connection machine, distinct from `@voltro/client`'s
|
|
200
|
+
> RPC-error-derived [`useConnectionStatus`](/docs/ui/client-utilities/use-connection-status) —
|
|
201
|
+
> a different package with a different signal source.
|
|
202
|
+
|
|
203
|
+
## Durable persistence
|
|
204
|
+
|
|
205
|
+
Local CRDT state and the offline queue should survive a reload. Everything above
|
|
206
|
+
storage speaks the `PersistenceAdapter` contract, so the backing swaps freely:
|
|
207
|
+
|
|
208
|
+
- `createInMemoryPersistence()` — ephemeral (lost on reload); the test/default.
|
|
209
|
+
- `createIndexedDbPersistence()` — **durable**, over the browser's own
|
|
210
|
+
IndexedDB. No WASM, no added dependency; the IDB implementation is injectable,
|
|
211
|
+
so it is tested against a fake backend that survives a reopen.
|
|
212
|
+
|
|
213
|
+
```ts
|
|
214
|
+
import { createIndexedDbPersistence } from '@voltro/local-first'
|
|
215
|
+
|
|
216
|
+
const adapter = await createIndexedDbPersistence({ databaseName: 'my-app' })
|
|
217
|
+
const sync = createSyncClient({ transport, adapter }) // state now survives reload
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
## Conflict policy for non-CRDT fields
|
|
221
|
+
|
|
222
|
+
CRDT fields resolve themselves — the merge **is** the resolver. A plain scalar
|
|
223
|
+
like `title` needs a policy. `conflictPolicy()` declares one per field; the
|
|
224
|
+
default everywhere is last-write-wins, and any field you do not name falls back
|
|
225
|
+
to it, so a policy never has to enumerate every column.
|
|
226
|
+
|
|
227
|
+
```ts
|
|
228
|
+
import { conflictPolicy } from '@voltro/local-first'
|
|
229
|
+
|
|
230
|
+
const policy = conflictPolicy({
|
|
231
|
+
title: 'lastWriteWins',
|
|
232
|
+
// A custom resolver MUST converge: both peers pick the same winner.
|
|
233
|
+
tags: (local, remote) => (remote.updatedAt >= local.updatedAt ? remote.value : local.value),
|
|
234
|
+
})
|
|
235
|
+
|
|
236
|
+
policy.resolveRecord(
|
|
237
|
+
{ title: { value: 'Draft', updatedAt: 1 } },
|
|
238
|
+
{ title: { value: 'Final', updatedAt: 2 } },
|
|
239
|
+
) // → { title: 'Final' }
|
|
240
|
+
```
|
|
241
|
+
|
|
242
|
+
The one property that matters is **convergence**: `lastWriteWins` breaks an
|
|
243
|
+
exact `updatedAt` tie on a stable, symmetric key (writer id, then the value's
|
|
244
|
+
string form), so two peers agree regardless of which side each calls "local".
|
|
245
|
+
|
|
246
|
+
## What's shipped vs. a runtime seam
|
|
247
|
+
|
|
248
|
+
The framework code for local-first is built and tested end to end against
|
|
249
|
+
in-memory transports. What remains is not un-built framework — it is the thin
|
|
250
|
+
binding to **provisioned infrastructure**, sitting behind interfaces the tested
|
|
251
|
+
code already speaks:
|
|
252
|
+
|
|
253
|
+
| Runtime seam | What it binds | Why it's a binding, not code |
|
|
254
|
+
| --- | --- | --- |
|
|
255
|
+
| **Sync transport → a running app** | The `SyncClient`'s `push`/`onRemoteState` to one app's `useMutation` + `useSubscription`. | The two functions are app-specific glue; the drain loop, merge, retry, and persistence all ship and are tested. |
|
|
256
|
+
| **Presence channel → a broker at scale** | The `PresenceChannel` to a provisioned Redis/NATS broker. | It's a network hop over an already-shipped broker; the awareness logic ships and is tested over the in-memory channel. |
|
|
257
|
+
| **wa-sqlite / Turso adapter** *(optional)* | A SQL durable adapter for cross-tab queries, behind `PersistenceAdapter`. | IndexedDB is the durable default today; a SQL backing is a sibling factory, nothing above it changes. |
|
|
258
|
+
|
|
259
|
+
|
|
260
|
+
|
|
261
|
+
---
|
|
262
|
+
|
|
263
|
+
<!-- source: en/react-native/overview.md -->
|
|
264
|
+
## React Native
|
|
265
|
+
|
|
266
|
+
_"@voltro/react-native — the credential-free mobile plumbing: registerDevice + the _voltro_devices table, defineDeepLink + its matcher, useBackgroundSync, and offline-first client defaults + connection status."_
|
|
267
|
+
|
|
268
|
+
The existing React-client bindings already run in React Native — the runtime has
|
|
269
|
+
no DOM dependency. `@voltro/react-native` adds the mobile-specific plumbing **on
|
|
270
|
+
top** of that, limited to the parts that need **no per-tenant credentials and no
|
|
271
|
+
native runtime**: device registration, background-sync scheduling, offline-first
|
|
272
|
+
defaults, a connection-status surface, and the deep-link declaration shape.
|
|
273
|
+
|
|
274
|
+
The package **root is RN-safe** — no `node:*`, no `@voltro/database`, and React
|
|
275
|
+
is reached only through the hooks (an optional peer). The `_voltro_devices` table
|
|
276
|
+
declaration is server-side and lives at `@voltro/react-native/schema`.
|
|
277
|
+
|
|
278
|
+
## Device registration
|
|
279
|
+
|
|
280
|
+
A device is registered **after** the OS issues its push token (APNs on iOS, FCM
|
|
281
|
+
on Android, Web Push on web). `registerDevice()` normalises a raw input into a
|
|
282
|
+
row and upserts it through whatever transport the app already has — a generated
|
|
283
|
+
mutation caller or a plain `fetch` — so the package stays free of transport
|
|
284
|
+
coupling.
|
|
285
|
+
|
|
286
|
+
```ts
|
|
287
|
+
import { registerDevice } from '@voltro/react-native'
|
|
288
|
+
|
|
289
|
+
// `userId`/`tenantId` are stamped SERVER-side from the authenticated request —
|
|
290
|
+
// never trusted from the client. `locale`/`timezone` default from the device.
|
|
291
|
+
await registerDevice(
|
|
292
|
+
(row) => api.mutate('registerDevice', row),
|
|
293
|
+
{ deviceToken, platform: 'ios' },
|
|
294
|
+
)
|
|
295
|
+
```
|
|
296
|
+
|
|
297
|
+
Registration is idempotent: the row is stored in `_voltro_devices` with a unique
|
|
298
|
+
key of `(platform, token)`, so re-registering the same token updates the row in
|
|
299
|
+
place instead of inserting a duplicate. A **rotated** token is a new
|
|
300
|
+
registration; reaping the stale one is the sender adapter's job (a seam), not the
|
|
301
|
+
client's.
|
|
302
|
+
|
|
303
|
+
### The `_voltro_devices` table
|
|
304
|
+
|
|
305
|
+
The table declaration is a server-side entry — it imports the `@voltro/database`
|
|
306
|
+
column DSL, so it is deliberately off the RN-safe root. Contribute it to your
|
|
307
|
+
schema and it migrates like any framework table (the `_voltro_*` prefix rides the
|
|
308
|
+
declarative differ on `voltro dev` / `voltro db apply`, on every dialect):
|
|
309
|
+
|
|
310
|
+
```ts
|
|
311
|
+
// schema/devices.ts — add the framework device table to your app's schema.
|
|
312
|
+
export { devicesTable } from '@voltro/react-native/schema'
|
|
313
|
+
```
|
|
314
|
+
|
|
315
|
+
It carries tenant + user scope, `platform`, `token`, `locale`, `timezone`,
|
|
316
|
+
optional `appVersion`/`metadata`, and a `lastSeenAt` rotation clock. It is unique
|
|
317
|
+
on `(platform, token)` and indexed on `userId` — the hot read path for fanning a
|
|
318
|
+
push out to every device of a user.
|
|
319
|
+
|
|
320
|
+
## Deep links: `defineDeepLink` + the matcher
|
|
321
|
+
|
|
322
|
+
`defineDeepLink({ pattern, handler })` is the descriptor a deep-link file
|
|
323
|
+
declares; its pure matcher turns `/orders/:id` + `/orders/42` into `{ id: '42' }`.
|
|
324
|
+
The params are inferred from the `:name` segments, so `handler` type-checks
|
|
325
|
+
against exactly the params the pattern declares.
|
|
326
|
+
|
|
327
|
+
```ts
|
|
328
|
+
import { defineDeepLink } from '@voltro/react-native'
|
|
329
|
+
|
|
330
|
+
export default defineDeepLink({
|
|
331
|
+
pattern: '/orders/:id',
|
|
332
|
+
handler: ({ id }) => navigateTo(`/orders/${id}`),
|
|
333
|
+
})
|
|
334
|
+
```
|
|
335
|
+
|
|
336
|
+
The matcher is pure — no navigation, no side effects — and normalises scheme +
|
|
337
|
+
host away, so a universal link, an App Link, and a custom-scheme URL all match
|
|
338
|
+
the same path-only pattern:
|
|
339
|
+
|
|
340
|
+
```ts
|
|
341
|
+
import { matchDeepLink, matchFirstDeepLink } from '@voltro/react-native'
|
|
342
|
+
import orderLink from './orders.deepLink'
|
|
343
|
+
|
|
344
|
+
matchDeepLink('/orders/:id', '/orders/42') // → { id: '42' }
|
|
345
|
+
matchDeepLink('/orders/:id', '/orders/42/edit') // → null
|
|
346
|
+
|
|
347
|
+
// Until `*.deepLink.ts` file discovery lands, register links by hand —
|
|
348
|
+
// declaration order wins, so list more-specific patterns first.
|
|
349
|
+
const hit = matchFirstDeepLink([orderLink], 'myapp://orders/42')
|
|
350
|
+
hit?.params.id // '42'
|
|
351
|
+
```
|
|
352
|
+
|
|
353
|
+
> **Seam — file discovery.** Wiring `*.deepLink.ts` into codegen (so the router
|
|
354
|
+
> auto-collects every declared link) is one additive file, landing after the
|
|
355
|
+
> current release settles. The descriptor shape above is **final**, so register
|
|
356
|
+
> links via `matchFirstDeepLink()` until then.
|
|
357
|
+
|
|
358
|
+
## Background sync
|
|
359
|
+
|
|
360
|
+
`useBackgroundSync(onSync, options)` owns three triggers — an interval timer, a
|
|
361
|
+
"returned to foreground" subscription, and a manual `sync()` — over a pure
|
|
362
|
+
`shouldSync` policy (single-flight, foreground-gated, interval-gated). The OS
|
|
363
|
+
background-fetch **registration** itself stays the app's; this hook is only the
|
|
364
|
+
interval/foreground state machine.
|
|
365
|
+
|
|
366
|
+
```tsx
|
|
367
|
+
import { useBackgroundSync } from '@voltro/react-native'
|
|
368
|
+
|
|
369
|
+
function SyncIndicator() {
|
|
370
|
+
const { status, lastSyncAt, sync } = useBackgroundSync(
|
|
371
|
+
() => api.refetchAll(),
|
|
372
|
+
{ intervalMs: 60_000, syncOnForeground: true },
|
|
373
|
+
)
|
|
374
|
+
|
|
375
|
+
return <button onClick={sync}>Sync ({status})</button>
|
|
376
|
+
}
|
|
377
|
+
```
|
|
378
|
+
|
|
379
|
+
`onSync` may be async — a rejection is captured into `status: 'error'` +
|
|
380
|
+
`lastError`, a resolution into `status: 'success'` + `lastSyncAt`.
|
|
381
|
+
|
|
382
|
+
## Offline-first defaults + connection status
|
|
383
|
+
|
|
384
|
+
`offlineFirstDefaults` is the mobile posture as a value you spread into your
|
|
385
|
+
client config: local-first ON, optimistic mutations, sync-on-foreground, a
|
|
386
|
+
5-minute cadence, and a retry backoff schedule. `useMobileConnectionStatus()`
|
|
387
|
+
surfaces a `connected | degraded | offline` status — `offline` from
|
|
388
|
+
`navigator.onLine`, `degraded` from failures the app reports.
|
|
389
|
+
|
|
390
|
+
```tsx
|
|
391
|
+
import { offlineFirstDefaults, useMobileConnectionStatus } from '@voltro/react-native'
|
|
392
|
+
|
|
393
|
+
// Spread the mobile posture into your client config.
|
|
394
|
+
const config = { ...offlineFirstDefaults, url }
|
|
395
|
+
|
|
396
|
+
function ConnectionPill() {
|
|
397
|
+
const { status, reportFailure, reportSuccess } = useMobileConnectionStatus()
|
|
398
|
+
return <span data-status={status}>{status}</span>
|
|
399
|
+
}
|
|
400
|
+
```
|
|
401
|
+
|
|
402
|
+
## What's shipped vs. a seam
|
|
403
|
+
|
|
404
|
+
This package ships the credential-free plumbing above. The parts that need
|
|
405
|
+
external credentials or a native runtime are flagged as **deliberate seams** —
|
|
406
|
+
not built here:
|
|
407
|
+
|
|
408
|
+
| Seam | Why it is not in this package |
|
|
409
|
+
|---|---|
|
|
410
|
+
| **APNs / FCM sender adapters** | Need per-tenant Apple Developer / Firebase credentials — genuinely external, managed via provider provisioning. Registration stores the token; sending to it is the seam. |
|
|
411
|
+
| **Native module bindings** (camera, biometrics, secure token storage) | Need a native runtime this TS package cannot provide. |
|
|
412
|
+
| **Swift / Kotlin SDK generators** | An open product decision — not built until demand justifies the maintenance. |
|
|
413
|
+
| **Universal-links / App-Links file automation** (`apple-app-site-association`, `assetlinks.json`) | A deployment-layer concern, not a client primitive. |
|
|
414
|
+
| **`*.deepLink.ts` codegen discovery** | One additive file after the release settles; the descriptor shape is final, so register links via `matchFirstDeepLink()` today. |
|
|
@@ -785,6 +785,38 @@ export default function NotePage(): ReactNode {
|
|
|
785
785
|
|
|
786
786
|
`useLoaderData<T>()` returns the loader's resolved value, typed via the generic.
|
|
787
787
|
|
|
788
|
+
**On a page that declares a `loader`, the value is always there.** The router
|
|
789
|
+
never renders such a page without its data: a settled loader commits its data
|
|
790
|
+
and the displayed route together, a pending one shows the `Pending` skeleton
|
|
791
|
+
(or keeps the previous page), and one that threw renders the error subtree. You
|
|
792
|
+
do not need a guard, and adding one only hides a real mistake behind a `?.`.
|
|
793
|
+
|
|
794
|
+
**Calling it where no `loader` exists is an error, and it says so.** A level with
|
|
795
|
+
no `loader` export throws:
|
|
796
|
+
|
|
797
|
+
```text
|
|
798
|
+
useLoaderData() was called at a level that declares no `loader`. Export `loader`
|
|
799
|
+
from this page/layout, or — if this component is shared between routes that have
|
|
800
|
+
one and routes that do not — read it with `useOptionalLoaderData()` …
|
|
801
|
+
```
|
|
802
|
+
|
|
803
|
+
Note what is NOT an absence: an empty **result**. A loader returning
|
|
804
|
+
`{ items: [] }` returns exactly that. `undefined` never means "the query found
|
|
805
|
+
nothing" — it means "there is no loader at this level".
|
|
806
|
+
|
|
807
|
+
### `useOptionalLoaderData()` — for a component on both kinds of route
|
|
808
|
+
|
|
809
|
+
One case needs it: a component genuinely mounted both under routes that declare
|
|
810
|
+
a loader and routes that do not. It returns `undefined` instead of throwing.
|
|
811
|
+
|
|
812
|
+
```tsx
|
|
813
|
+
const data = useOptionalLoaderData<Data>()
|
|
814
|
+
const project = data?.project
|
|
815
|
+
```
|
|
816
|
+
|
|
817
|
+
A loader that legitimately resolves to `undefined` is not an error — both hooks
|
|
818
|
+
hand that `undefined` back. Only the missing `loader` throws.
|
|
819
|
+
|
|
788
820
|
## When loaders run
|
|
789
821
|
|
|
790
822
|
| renderMode | When loader runs |
|
|
@@ -830,6 +862,23 @@ export default function Profile() {
|
|
|
830
862
|
|
|
831
863
|
Because the SSR markup and the hydration render read the same loader value, they match — no hydration flicker — and you don't hand-build a seed store to bridge the two. This is distinct from `fallback`, whose value never came from the server and so keeps `loading: true`; use exactly one of the two.
|
|
832
864
|
|
|
865
|
+
> **Seed whatever the screen checks FIRST, not whatever is most interesting.**
|
|
866
|
+
> A component's server render stops at its OUTERMOST unsatisfied gate, so an
|
|
867
|
+
> unseeded subscription in an early branch hides every seeded one below it:
|
|
868
|
+
>
|
|
869
|
+
> ```tsx
|
|
870
|
+
> // Seeding `roadmap` changes nothing while this branch is the first one.
|
|
871
|
+
> if (availableYearsIdle || availableYearsLoading) return <Spinner />
|
|
872
|
+
> return <Roadmap data={roadmap} />
|
|
873
|
+
> ```
|
|
874
|
+
>
|
|
875
|
+
> The symptom is a page that still server-renders a spinner after you seeded
|
|
876
|
+
> the data you care about. Walk the component's early returns from the top and
|
|
877
|
+
> seed each subscription they read, or move the gate below the render you want.
|
|
878
|
+
> The same applies to an auth gate: a `useSubscription`-backed
|
|
879
|
+
> `AuthenticationProvider` has no data during a server render, so every page
|
|
880
|
+
> under it renders its loading state until that subscription is seeded too.
|
|
881
|
+
|
|
833
882
|
Client-side navigation is unchanged: moving to another route runs that route's
|
|
834
883
|
loaders in the browser as usual. A `spa` page has no server render, so its
|
|
835
884
|
loader runs on the client on first mount.
|
|
@@ -1152,14 +1201,22 @@ The third context field — `locale: string` — is the active i18n locale for t
|
|
|
1152
1201
|
|
|
1153
1202
|
```tsx
|
|
1154
1203
|
import { getCatalog } from '../lib/locale'
|
|
1155
|
-
import {
|
|
1204
|
+
import { seoAlternates } from '@voltro/web'
|
|
1156
1205
|
|
|
1157
1206
|
export const meta = ({ locale }: { locale: string }): PageMeta => {
|
|
1158
1207
|
const c = getCatalog(locale)
|
|
1159
1208
|
return {
|
|
1160
1209
|
title: c['seo.notes.title'] as string,
|
|
1161
1210
|
description: c['seo.notes.description'] as string,
|
|
1162
|
-
|
|
1211
|
+
// Canonical URL for THIS locale + a reciprocal `hreflang` alternate for
|
|
1212
|
+
// every locale (incl. `x-default`), spread straight into the meta.
|
|
1213
|
+
...seoAlternates({
|
|
1214
|
+
siteUrl: 'https://notes.example.com',
|
|
1215
|
+
path: '/notes',
|
|
1216
|
+
locale,
|
|
1217
|
+
locales: ['en', 'de'],
|
|
1218
|
+
defaultLocale: 'en',
|
|
1219
|
+
}),
|
|
1163
1220
|
}
|
|
1164
1221
|
}
|
|
1165
1222
|
```
|
|
@@ -1168,6 +1225,40 @@ export const meta = ({ locale }: { locale: string }): PageMeta => {
|
|
|
1168
1225
|
|
|
1169
1226
|
`loaderData` is the PAGE loader's result. Because `meta` runs server-side after the loader, the SSR'd `<head>` is already correct on first paint — no client-side title patching, no flash.
|
|
1170
1227
|
|
|
1228
|
+
## Technical SEO: canonical, hreflang, sitemap & robots
|
|
1229
|
+
|
|
1230
|
+
The framework ships the cheap technical-SEO primitives so an indexable app gets them without app-level plumbing.
|
|
1231
|
+
|
|
1232
|
+
**Canonical + hreflang helpers** (`@voltro/web`) are pure functions you call from `meta`. They are browser-safe, so importing them into a `*.page.tsx` never drags a server module into the client bundle:
|
|
1233
|
+
|
|
1234
|
+
- `canonicalUrl(siteUrl, path)` — one absolute canonical URL.
|
|
1235
|
+
- `seoAlternates({ siteUrl, path, locale, locales, defaultLocale })` — returns `{ canonical, links }` where `canonical` is this locale's URL and `links` is one `rel="alternate"` per locale (each an **absolute** URL, as Google requires) plus `hreflang="x-default"`. The alternate set is reciprocal across every locale — exactly what Google's [hreflang rules](https://developers.google.com/search/docs/specialty/international/localized-versions) want. The locale model is URL-PREFIX routing: the default locale on the bare path (`/notes`), other locales prefixed (`/de/notes`).
|
|
1236
|
+
|
|
1237
|
+
**Keeping a page out of the index** — set `noIndex` on its meta. It emits `<meta name="robots" content="noindex, nofollow">` AND excludes the route from the generated `sitemap.xml`:
|
|
1238
|
+
|
|
1239
|
+
```tsx
|
|
1240
|
+
export const meta: PageMeta = { title: 'Checkout', noIndex: true }
|
|
1241
|
+
```
|
|
1242
|
+
|
|
1243
|
+
**`sitemap.xml` + `robots.txt`** are generated at `voltro build` from the prerendered routes. Turn them on with a `seo.siteUrl` in `app.config.ts`:
|
|
1244
|
+
|
|
1245
|
+
```ts
|
|
1246
|
+
export default {
|
|
1247
|
+
type: 'web' as const,
|
|
1248
|
+
name: 'Notes',
|
|
1249
|
+
locales: ['en', 'de'],
|
|
1250
|
+
defaultLocale: 'en',
|
|
1251
|
+
seo: {
|
|
1252
|
+
siteUrl: 'https://notes.example.com',
|
|
1253
|
+
disallow: ['/admin'], // extra robots Disallow prefixes (optional)
|
|
1254
|
+
},
|
|
1255
|
+
}
|
|
1256
|
+
```
|
|
1257
|
+
|
|
1258
|
+
- **`sitemap.xml`** lists every prerendered route (minus `noIndex` ones). With 2+ `locales`, each URL carries the full `xhtml:link` alternate set. Written only when `seo.siteUrl` is set — absolute URLs are required.
|
|
1259
|
+
- **`robots.txt`** is generated even without `siteUrl`. Production allows all and advertises the sitemap; `voltro dev` — and any build with `VOLTRO_SEO_NOINDEX=1` (staging / preview deploys) — disallows everything, so a non-production surface never gets indexed by default.
|
|
1260
|
+
- A user-authored `public/sitemap.xml` / `public/robots.txt` always wins — the generator never overwrites one.
|
|
1261
|
+
|
|
1171
1262
|
## Examples
|
|
1172
1263
|
|
|
1173
1264
|
### Authenticated dashboard with cookie-driven loader
|
|
@@ -202,6 +202,18 @@ A combined create-or-edit screen is a three-line wrapper:
|
|
|
202
202
|
`{ fields, values, errors, isValid, pending, setValue, submit, reset }` for
|
|
203
203
|
100% custom JSX — the binding stays.
|
|
204
204
|
|
|
205
|
+
### Accessible by default
|
|
206
|
+
|
|
207
|
+
The built-in widgets render accessible HTML without any extra work: a `<label htmlFor>` tied to the control, `aria-required` on required fields (the visual `*` is `aria-hidden` — assistive tech learns "required" from the control, not from a spoken "star"), and, on error, `aria-invalid` + a `role="alert"` message associated via `aria-describedby`. A radio group ties its error to the whole `<fieldset>`.
|
|
208
|
+
|
|
209
|
+
Add **help text** by putting a `description` on the field's Schema — it renders as a hint and is associated to the control via `aria-describedby`, so a screen reader announces it with the label:
|
|
210
|
+
|
|
211
|
+
```ts
|
|
212
|
+
Schema.Struct({
|
|
213
|
+
handle: Schema.String.annotations({ description: 'Shown on your public profile' }),
|
|
214
|
+
})
|
|
215
|
+
```
|
|
216
|
+
|
|
205
217
|
## `<DataTable>` — bind to a QUERY
|
|
206
218
|
|
|
207
219
|
Columns come from the query's output `Schema`; rows are a LIVE subscription
|
|
@@ -649,7 +649,7 @@ const execute = async (
|
|
|
649
649
|
// Post-commit fan-out → the `order.placed` trigger starts the
|
|
650
650
|
// `orders.fulfill` workflow. Guard `ctx.events` so a unit-test ctx
|
|
651
651
|
// without it doesn't throw.
|
|
652
|
-
await ctx.events?.
|
|
652
|
+
await ctx.events?.publish(orderPlaced, { orderId: row['id'] as string }, {
|
|
653
653
|
orderId: row['id'] as string, tenantId: input.tenantId,
|
|
654
654
|
})
|
|
655
655
|
|