refactor: migrate legacy wire namespace to wrn
This commit is contained in:
+32
-32
@@ -29,7 +29,7 @@ single generic runtime (no per‑component bundles). The `.wrn` language compile
|
||||
|
||||
**Part III — Build an app, feature by feature**
|
||||
|
||||
- 10. A page · 11. Layouts · 12. Components & props · 13. Reactivity · 14. Wire UI · 15. Theming · 16. Styles · 17. API routes · 18. Validation (forms + API) · 19. Database · 20. Auth, sessions & CSRF · 21. Middleware · 22. i18n · 23. SEO · 24. Security headers & CORS · 25. Realtime · 26. SSR/CSR data bindings · 27. Optional packages · 28. Config profiles & env · 29. Testing · 30. Build & deploy
|
||||
- 10. A page · 11. Layouts · 12. Components & props · 13. Reactivity · 14. WrNexus UI · 15. Theming · 16. Styles · 17. API routes · 18. Validation (forms + API) · 19. Database · 20. Auth, sessions & CSRF · 21. Middleware · 22. i18n · 23. SEO · 24. Security headers & CORS · 25. Realtime · 26. SSR/CSR data bindings · 27. Optional packages · 28. Config profiles & env · 29. Testing · 30. Build & deploy
|
||||
|
||||
**Part IV — Reference**
|
||||
|
||||
@@ -206,11 +206,11 @@ quoted or bare‑to‑end‑of‑line.
|
||||
|
||||
```
|
||||
style {
|
||||
.box { background: var(--wire-color-surface); border-radius: var(--wire-radius); }
|
||||
.box { background: var(--wrn-color-surface); border-radius: var(--wrn-radius); }
|
||||
}
|
||||
```
|
||||
|
||||
Multiple `style` blocks accumulate. Use theme tokens (`var(--wire-*)`) so styles restyle on theme
|
||||
Multiple `style` blocks accumulate. Use theme tokens (`var(--wrn-*)`) so styles restyle on theme
|
||||
change.
|
||||
|
||||
### `functions { }` — typed helpers
|
||||
@@ -339,8 +339,8 @@ view {
|
||||
```
|
||||
|
||||
There are also framework attributes consumed by **other** runtimes (loaded only when present):
|
||||
`data-wire-theme-toggle`/`data-wire-theme-set` (theme, §15), `data-schema`/`data-error`/
|
||||
`data-success`/`data-redirect` (forms, §18), `data-wire-lang-set`/`data-wire-lang` (i18n, §22),
|
||||
`data-wrn-theme-toggle`/`data-wrn-theme-set` (theme, §15), `data-schema`/`data-error`/
|
||||
`data-success`/`data-redirect` (forms, §18), `data-wrn-lang-set`/`data-wrn-lang` (i18n, §22),
|
||||
`data-room*` (realtime, §25).
|
||||
|
||||
Cross-platform pages can use `data-native-browser="capability"` and
|
||||
@@ -489,11 +489,11 @@ component Demo {
|
||||
The runtime tracks dependencies automatically and re‑renders only what changed. No `new Function`,
|
||||
no `eval` — CSP‑safe.
|
||||
|
||||
## 14. Wire UI
|
||||
## 14. WrNexus UI
|
||||
|
||||
`@wrnexus/ui` ships **24** themed components, auto‑discovered like your own. Mount with
|
||||
`data-component`; every component accepts a `class` prop (appended to the root) and is styled via
|
||||
`--wire-*` tokens + `.wire-*` classes you can override.
|
||||
`--wrn-*` tokens + `.wrn-*` classes you can override.
|
||||
|
||||
**Layout:** `container`, `stack` (`gap`), `hstack` (`gap`, `align`), `grid` (`cols`, `gap`),
|
||||
`spacer`, `divider`, `card`.
|
||||
@@ -514,14 +514,14 @@ Variants: buttons `default|primary|danger|ghost`, sizes `sm|md|lg`; badge/tag/al
|
||||
<div data-component="grid" cols="3" gap="4">…</div>
|
||||
```
|
||||
|
||||
**Override styling**, in priority order: (1) theme tokens `--wire-*`, (2) redefine `.wire-*` in your
|
||||
**Override styling**, in priority order: (1) theme tokens `--wrn-*`, (2) redefine `.wrn-*` in your
|
||||
CSS (loads after `ui.css`), (3) the `class` prop, (4) `wrnexus eject <name>` to copy the component's
|
||||
`.wrn` source into `app/components/` (your copy shadows the library one).
|
||||
|
||||
## 15. Theming
|
||||
|
||||
Themes are flat token maps rendered as `--wire-<key>` CSS variables (server + client). Built‑in
|
||||
`light` and `dark`; the cookie `wire-theme` selects one.
|
||||
Themes are flat token maps rendered as `--wrn-<key>` CSS variables (server + client). Built‑in
|
||||
`light` and `dark`; the cookie `wrn-theme` selects one.
|
||||
|
||||
```ts
|
||||
// wrnexus.config.ts
|
||||
@@ -543,11 +543,11 @@ Built‑in token keys include: `color-scheme`, `color-bg`, `color-surface`, `col
|
||||
Toggle from the view with zero JS:
|
||||
|
||||
```
|
||||
<button data-wire-theme-toggle>Toggle theme</button>
|
||||
<button data-wire-theme-set="light">Light</button>
|
||||
<button data-wrn-theme-toggle>Toggle theme</button>
|
||||
<button data-wrn-theme-set="light">Light</button>
|
||||
```
|
||||
|
||||
The client exposes `window.wireTheme = { get, set, toggle, bind, themes }`.
|
||||
The client exposes `window.wrnTheme = { get, set, toggle, bind, themes }`.
|
||||
|
||||
## 16. Styles
|
||||
|
||||
@@ -634,30 +634,30 @@ export async function POST(ctx: Context): Promise<Response> {
|
||||
`parseEnv(schema, source?)` validates env vars and throws one readable multi‑line error.
|
||||
|
||||
**Client form flow** (zero JS you write). The schema's descriptor is baked into
|
||||
`window.__wireSchemas` by name (filename). Wire a form up with attributes:
|
||||
`window.__wrnSchemas` by name (filename). WrNexus a form up with attributes:
|
||||
|
||||
```
|
||||
<form data-schema="login" method="post" action="/api/login" data-redirect="/dashboard">
|
||||
<div data-component="input" type="email" name="email"></div>
|
||||
<span class="wire-field-error" data-error="email"></span>
|
||||
<span class="wrn-field-error" data-error="email"></span>
|
||||
|
||||
<div data-component="input" type="password" name="password"></div>
|
||||
<span class="wire-field-error" data-error="password"></span>
|
||||
<span class="wrn-field-error" data-error="password"></span>
|
||||
|
||||
<div class="wire-alert wire-alert--success" data-success="Signed in!" hidden></div>
|
||||
<button type="submit" class="wire-btn wire-btn--primary">Sign in</button>
|
||||
<div class="wrn-alert wrn-alert--success" data-success="Signed in!" hidden></div>
|
||||
<button type="submit" class="wrn-btn wrn-btn--primary">Sign in</button>
|
||||
</form>
|
||||
```
|
||||
|
||||
- `data-schema="login"` — picks the descriptor.
|
||||
- `name="…"` — matched to schema fields; validated on `blur` and `submit`.
|
||||
- `data-error="field"` — receives the message; the input gets `aria-invalid` + `.wire-invalid`.
|
||||
- `data-error="field"` — receives the message; the input gets `aria-invalid` + `.wrn-invalid`.
|
||||
- `data-success` — shown on success when there's no redirect.
|
||||
- `data-redirect="/path"` (or `redirect` in the JSON response) — navigates on success.
|
||||
|
||||
On submit it validates client‑side, then POSTs `JSON` with `x-csrf-token` (from the `wire-csrf`
|
||||
On submit it validates client‑side, then POSTs `JSON` with `x-csrf-token` (from the `wrn-csrf`
|
||||
cookie) and `credentials: same-origin`, and re‑surfaces server `errors` into the `data-error`
|
||||
spans. It also dispatches `wire:success` / `wire:error` events. Scaffold: `wrnexus generate schema login`.
|
||||
spans. It also dispatches `wrn:success` / `wrn:error` events. Scaffold: `wrnexus generate schema login`.
|
||||
|
||||
## 19. Database
|
||||
|
||||
@@ -860,9 +860,9 @@ export async function POST(ctx: Context): Promise<Response> {
|
||||
**Guarding:** `requireAuth({ loginPath: "/login" })` as middleware — API/JSON → 401, page nav → 302
|
||||
to `${loginPath}?next=<target>`. Or inline: `if (getUser(ctx) == null) …`.
|
||||
|
||||
**CSRF** (double‑submit): cookie `wire-csrf` (JS‑readable), header `x-csrf-token`. `csrfToken(ctx)`
|
||||
**CSRF** (double‑submit): cookie `wrn-csrf` (JS‑readable), header `x-csrf-token`. `csrfToken(ctx)`
|
||||
returns/creates the token; `verifyCsrf(ctx)` passes GET/HEAD/OPTIONS, else compares header to cookie.
|
||||
The Wire UI form runtime sends the header automatically. Add `csrfProtection()` middleware to enforce
|
||||
The WrNexus UI form runtime sends the header automatically. Add `csrfProtection()` middleware to enforce
|
||||
globally.
|
||||
|
||||
**Sessions:** cookie `wrnexus.sid` (HttpOnly, Lax, Secure on HTTPS), 24h sliding TTL, 256‑bit id.
|
||||
@@ -908,7 +908,7 @@ Core factories and their key options:
|
||||
## 22. i18n
|
||||
|
||||
Opt‑in: add dictionaries under `app/locales/<lang>.json`. Language resolves per request from the
|
||||
`wire-lang` cookie → `Accept-Language` → default.
|
||||
`wrn-lang` cookie → `Accept-Language` → default.
|
||||
|
||||
```json
|
||||
// app/locales/en.json
|
||||
@@ -923,7 +923,7 @@ export const GET = async (ctx: Context) =>
|
||||
```
|
||||
|
||||
Config: `i18n: { default: "en", locales: ["en", "fr"] }` (both optional; inferred from files).
|
||||
Switch language from the view with `data-wire-lang-set="fr"`. Formatting helpers (Intl‑based) are
|
||||
Switch language from the view with `data-wrn-lang-set="fr"`. Formatting helpers (Intl‑based) are
|
||||
exported from `@wrnexus/i18n`: `formatNumber`, `formatCurrency`, `formatDate`, `formatRelativeTime`,
|
||||
`plural`.
|
||||
|
||||
@@ -1021,7 +1021,7 @@ realtime: { scale: true, redisUrl: process.env.REDIS_URL }, // defaults to redis
|
||||
Now `client.room.broadcast(msg)` in one app instance is delivered to subscribers in all the
|
||||
others. Connection‑targeted `send`/`to(id)` stay local (ids are per‑process). Under the hood it's
|
||||
`bridgeRealtime(registry, bus)` from `@wrnexus/core` + the `@wrnexus/pubsub` Redis driver — you can
|
||||
also wire it manually for custom buses.
|
||||
also wrn it manually for custom buses.
|
||||
|
||||
## 26. SSR/CSR data bindings
|
||||
|
||||
@@ -1264,7 +1264,7 @@ wrnexus gateway [--port=3000] [--prod] Serve every workspace a
|
||||
wrnexus generate <type> <name> (alias: g) Scaffold: page | component | api | schema
|
||||
wrnexus generate routes Regenerate app/routes.gen.ts
|
||||
wrnexus generate docker Scaffold Dockerfile + compose
|
||||
wrnexus eject <name...> Copy a Wire UI component into app/components/
|
||||
wrnexus eject <name...> Copy a WrNexus UI component into app/components/
|
||||
wrnexus db new [name] [--from-models] [--db=<name>] Scaffold a migration (optionally from schema.ts)
|
||||
wrnexus db generate [--db=<name>] Regenerate queries.gen.ts from queries/*.sql
|
||||
wrnexus db migrate | rollback | status [--db=<name>] Apply / revert / list migrations
|
||||
@@ -1299,7 +1299,7 @@ const config: AppConfig = {
|
||||
|
||||
theme: {
|
||||
palette: "violet",
|
||||
default: "dark", // theme when no wire-theme cookie
|
||||
default: "dark", // theme when no wrn-theme cookie
|
||||
themes: { light: { "color-primary": "#2563eb" }, dark: { "color-primary": "#6c8cff" } },
|
||||
},
|
||||
|
||||
@@ -1354,8 +1354,8 @@ directive to `false`/`null` to remove it.
|
||||
**Server/compiler:** `data-component` · `data-slot` · `<slot [name]>` · `{expr}` · `{{expr}}` ·
|
||||
`{t:key}` (→ `data-t`) · `@event="stmt"` · `api="binding"`.
|
||||
**Forms:** `data-schema` · `name` · `data-error` · `data-success` · `data-redirect`.
|
||||
**Theme:** `data-wire-theme-toggle` · `data-wire-theme-set="name"`.
|
||||
**i18n:** `data-wire-lang-set="lang"` · `data-wire-lang`.
|
||||
**Theme:** `data-wrn-theme-toggle` · `data-wrn-theme-set="name"`.
|
||||
**i18n:** `data-wrn-lang-set="lang"` · `data-wrn-lang`.
|
||||
**Realtime:** `data-room` · `data-room-user` · `data-room-log` · `data-room-status`
|
||||
(+`data-room-status-class`) · `<template data-room-item="type">` (`%field%`) · `data-room-send` ·
|
||||
`data-room-reset`.
|
||||
@@ -1371,7 +1371,7 @@ directive to `false`/`null` to remove it.
|
||||
(`saveUpload`, `collectUploads`, `sanitizeFilename`); streaming (`streamResponse`, `sse`); realtime
|
||||
(`defineRoom`, `createRealtimeRegistry`, `bridgeRealtime`); errors (`renderError`, `renderNotFound`); headers
|
||||
(`withSecurityHeaders`, CORS); sessions (`setSessionBackend`, `loadSession`); JSX runtime.
|
||||
- `@wrnexus/compiler` — `compileWireFile`, `compile`, `parse`, `generate`, `Lexer`, `ParseError`.
|
||||
- `@wrnexus/compiler` — `compileWrnFile`, `compile`, `parse`, `generate`, `Lexer`, `ParseError`.
|
||||
- `@wrnexus/router` — `buildRouter`, `matchRoute`, `generateRoutesFile`.
|
||||
- `@wrnexus/ssr` — `renderDocument`.
|
||||
- `@wrnexus/csr` — `getReactiveRuntime`, `getNavRuntime`, `getRealtimeRuntime`.
|
||||
@@ -1388,7 +1388,7 @@ directive to `false`/`null` to remove it.
|
||||
`createDb`, `paginate`, `loadRelated`, migrations, query generation; subpaths `/session`,
|
||||
`/sqlite`, `/postgres`, `/mysql`, `/mongo`.
|
||||
- `@wrnexus/dev-server` — `startServer`, `startGateway` (multi-app host router), prod handler.
|
||||
- `@wrnexus/cli` — the `wrnexus` binary; subpath `/workspace` (`WorkspaceConfig`, `startGateway` wiring).
|
||||
- `@wrnexus/cli` — the `wrnexus` binary; subpath `/workspace` (`WorkspaceConfig`, `startGateway` integration).
|
||||
- `@wrnexus/validation` — `v`, `parseBody`, `parseEnv`, `invalid`, `renderSchemasScript`.
|
||||
- `@wrnexus/helpers` — original gateway URL/path/method helpers and `redirectToLogin`.
|
||||
- `@wrnexus/ui` — `uiComponentsDir`, `uiCssPath`, `uiCss`, `uiComponentNames`.
|
||||
|
||||
Reference in New Issue
Block a user