403 lines
23 KiB
TypeScript
403 lines
23 KiB
TypeScript
import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
|
|
import { join, resolve } from "node:path";
|
|
|
|
const root = resolve(import.meta.dir, "..");
|
|
const projectPackage = JSON.parse(readFileSync(join(root, "package.json"), "utf8")) as {
|
|
wrnexus?: { version?: string };
|
|
};
|
|
const frameworkVersion = projectPackage.wrnexus?.version;
|
|
if (!frameworkVersion) throw new Error("package.json is missing wrnexus.version");
|
|
const pages = join(root, "app", "pages");
|
|
const packagePages = join(pages, "packages");
|
|
mkdirSync(packagePages, { recursive: true });
|
|
|
|
const catalog = [
|
|
["ai", "AI", "Server-side Anthropic client with generation and streaming."],
|
|
["authz", "Security", "Role, permission, policy, and authorization guards."],
|
|
["cli", "Tooling", "Create, develop, build, generate, test, and maintain WrNexus apps."],
|
|
["compiler", "Core", "Parser and code generators for the .wrn language."],
|
|
["core", "Core", "Contexts, middleware, security, sessions, caching, JSX, and realtime."],
|
|
["csr", "Frontend", "Reactive, navigation, and realtime browser runtimes."],
|
|
["db", "Data", "Database adapters, typed queries, models, migrations, and sessions."],
|
|
["dev-server", "Runtime", "Development and production servers, HMR, assets, and gateways."],
|
|
["encryption", "Security", "Hashing, HMAC, authenticated encryption, and key derivation."],
|
|
["i18n", "Frontend", "Translation loading, locale resolution, and Intl formatting."],
|
|
["jwt", "Security", "HS256 JWT signing, verification, and bearer authentication."],
|
|
["mobile", "Native", "SSR-safe compatibility access to Capacitor plugins."],
|
|
["native", "Native", "Cross-platform browser and Capacitor capability registry."],
|
|
["oauth", "Security", "OAuth 2.0, PKCE, provider presets, and profile mapping."],
|
|
["pubsub", "Realtime", "In-process and Redis-backed publish/subscribe."],
|
|
["queue", "Data", "Background jobs with delay, concurrency, retry, and repetition."],
|
|
["reactive", "Frontend", "Small type-safe reactive signal primitives."],
|
|
["router", "Core", "Filesystem discovery, route matching, and typed route generation."],
|
|
["ssr", "Runtime", "Secure HTML document rendering and SEO metadata."],
|
|
["styles", "Frontend", "CSS pipeline, themes, fonts, profiles, and application config."],
|
|
["test", "Tooling", "WrNexus-aware component, route, and browser testing utilities."],
|
|
["tracking", "Runtime", "Error/event capture, middleware, filtering, and sinks."],
|
|
["ui", "Frontend", "Themeable server-rendered UI components and CSS."],
|
|
["uploader", "Data", "Validated local/S3 uploads and secure file serving."],
|
|
["validation", "Security", "Typed schemas, coercion, validation, and browser descriptors."],
|
|
] as const;
|
|
|
|
const escape = (value: string) =>
|
|
value
|
|
.replace(/&/g, "&")
|
|
.replace(/</g, "<")
|
|
.replace(/>/g, ">")
|
|
.replace(/"/g, """)
|
|
.replace(/\{/g, "{")
|
|
.replace(/\}/g, "}");
|
|
|
|
function inline(value: string): string {
|
|
return escape(value)
|
|
.replace(/`([^`]+)`/g, "<code>$1</code>")
|
|
.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
|
|
.replace(/\[([^\]]+)\]\((https?:\/\/[^)]+)\)/g, '<a href="$2" rel="noreferrer">$1</a>');
|
|
}
|
|
|
|
interface DocHeading {
|
|
id: string;
|
|
title: string;
|
|
level: number;
|
|
}
|
|
|
|
function markdown(source: string): { html: string; headings: DocHeading[] } {
|
|
const lines = source.replace(/\r/g, "").split("\n");
|
|
const out: string[] = [];
|
|
const headings: DocHeading[] = [];
|
|
const usedIds = new Map<string, number>();
|
|
let code: string[] | null = null;
|
|
let language = "";
|
|
let list = false;
|
|
let paragraph: string[] = [];
|
|
let table: string[][] = [];
|
|
const flushParagraph = () => {
|
|
if (paragraph.length) out.push(`<p>${inline(paragraph.join(" "))}</p>`);
|
|
paragraph = [];
|
|
};
|
|
const closeList = () => {
|
|
if (list) out.push("</ul>");
|
|
list = false;
|
|
};
|
|
const flushTable = () => {
|
|
if (!table.length) return;
|
|
const separator = table[1]?.every((cell) => /^:?-{3,}:?$/.test(cell.trim()));
|
|
const header = separator ? table[0]! : undefined;
|
|
const rows = separator ? table.slice(2) : table;
|
|
out.push('<div class="table-wrap"><table>');
|
|
if (header) {
|
|
out.push(
|
|
`<thead><tr>${header.map((cell) => `<th>${inline(cell.trim())}</th>`).join("")}</tr></thead>`,
|
|
);
|
|
}
|
|
out.push(
|
|
`<tbody>${rows.map((row) => `<tr>${row.map((cell) => `<td>${inline(cell.trim())}</td>`).join("")}</tr>`).join("")}</tbody></table></div>`,
|
|
);
|
|
table = [];
|
|
};
|
|
for (const line of lines) {
|
|
if (/^\|.*\|\s*$/.test(line)) {
|
|
flushParagraph();
|
|
closeList();
|
|
table.push(line.slice(1, line.lastIndexOf("|")).split("|"));
|
|
continue;
|
|
}
|
|
flushTable();
|
|
const fence = /^```(.*)$/.exec(line);
|
|
if (fence) {
|
|
flushParagraph();
|
|
closeList();
|
|
if (code) {
|
|
out.push(
|
|
`<pre data-language="${escape(language)}"><code>${escape(code.join("\n"))}</code></pre>`,
|
|
);
|
|
code = null;
|
|
} else {
|
|
code = [];
|
|
language = fence[1]!.trim();
|
|
}
|
|
continue;
|
|
}
|
|
if (code) {
|
|
code.push(line);
|
|
continue;
|
|
}
|
|
const heading = /^(#{1,4})\s+(.+)$/.exec(line);
|
|
if (heading) {
|
|
flushParagraph();
|
|
closeList();
|
|
const level = Math.min(4, heading[1]!.length + 1);
|
|
const title = heading[2]!.replace(/[`*_]/g, "").trim();
|
|
const base =
|
|
title
|
|
.toLowerCase()
|
|
.replace(/[^a-z0-9]+/g, "-")
|
|
.replace(/^-|-$/g, "") || "section";
|
|
const occurrence = usedIds.get(base) ?? 0;
|
|
usedIds.set(base, occurrence + 1);
|
|
const id = occurrence ? `${base}-${occurrence + 1}` : base;
|
|
headings.push({ id, title, level });
|
|
out.push(`<h${level} id="${id}">${inline(heading[2]!)}</h${level}>`);
|
|
continue;
|
|
}
|
|
const item = /^[-*]\s+(.+)$/.exec(line);
|
|
if (item) {
|
|
flushParagraph();
|
|
if (!list) out.push("<ul>");
|
|
list = true;
|
|
out.push(`<li>${inline(item[1]!)}</li>`);
|
|
continue;
|
|
}
|
|
if (!line.trim()) {
|
|
flushParagraph();
|
|
closeList();
|
|
continue;
|
|
}
|
|
if (/^>\s?/.test(line)) {
|
|
flushParagraph();
|
|
closeList();
|
|
out.push(`<blockquote>${inline(line.replace(/^>\s?/, ""))}</blockquote>`);
|
|
continue;
|
|
}
|
|
if (/^---+$/.test(line.trim())) continue;
|
|
paragraph.push(line.trim());
|
|
}
|
|
flushParagraph();
|
|
closeList();
|
|
flushTable();
|
|
if (code) out.push(`<pre><code>${escape(code.join("\n"))}</code></pre>`);
|
|
return { html: out.join("\n"), headings };
|
|
}
|
|
|
|
function examplesFrom(readme: string, name: string): string {
|
|
const examples = [...readme.matchAll(/```([^\n]*)\n([\s\S]*?)```/g)]
|
|
.map((match) => ({ language: match[1]!.trim(), code: match[2]!.trim() }))
|
|
.filter((example) => example.code)
|
|
.filter(
|
|
(example, index, all) => all.findIndex((value) => value.code === example.code) === index,
|
|
)
|
|
.slice(0, 4);
|
|
if (!examples.length) {
|
|
examples.push({
|
|
language: "ts",
|
|
code: `import * as packageApi from "@wrnexus/${name}";\n\nconsole.log(packageApi);`,
|
|
});
|
|
}
|
|
return examples
|
|
.map(
|
|
(example, index) =>
|
|
`<article class="example-card"><h3>Example ${index + 1}</h3><pre data-language="${escape(example.language || "text")}"><code>${escape(example.code)}</code></pre></article>`,
|
|
)
|
|
.join("");
|
|
}
|
|
|
|
function shell(title: string, description: string, content: string, state = ""): string {
|
|
const document = `page ${title.replace(/[^A-Za-z0-9]/g, "")} {
|
|
seo {
|
|
title = "${title.replace(/"/g, "'")}"
|
|
description = "${description.replace(/"/g, "'")}"
|
|
}
|
|
${state}
|
|
view {
|
|
<div class="docs-shell">
|
|
<header class="topbar">
|
|
<a class="brand" href="/"><span>W</span> WrNexus</a>
|
|
<nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav>
|
|
<button data-wire-theme-toggle class="theme-button" aria-label="Toggle theme">Theme</button>
|
|
</header>
|
|
${content}
|
|
<footer>WrNexus ${frameworkVersion} · SSR-first · Bun-native · Documentation generated from published package APIs.</footer>
|
|
</div>
|
|
}
|
|
}
|
|
`;
|
|
return document.replace(/\bWrNexus\b/g, "WRNexusJS");
|
|
}
|
|
|
|
const cards = catalog
|
|
.map(
|
|
([
|
|
name,
|
|
category,
|
|
summary,
|
|
]) => `<a class="package-card" href="/packages/${name}" data-show="(category === 'All' ? true : category === '${category}') ? (query === '' ? true : '${name} ${category.toLowerCase()} ${summary.toLowerCase().replace(/'/g, "")} '.includes(query.toLowerCase())) : false">
|
|
<span class="category">${category}</span><h2>@wrnexus/${name}</h2><p>${summary}</p><span class="card-link">Open documentation →</span>
|
|
</a>`,
|
|
)
|
|
.join("\n");
|
|
|
|
const categories = ["All", ...new Set(catalog.map(([, category]) => category))];
|
|
const categoryButtons = categories
|
|
.map((category) => {
|
|
const count =
|
|
category === "All"
|
|
? catalog.length
|
|
: catalog.filter(([, value]) => value === category).length;
|
|
return `<button type="button" @click="category = '${category}'">${category}<span>${count}</span></button>`;
|
|
})
|
|
.join("");
|
|
|
|
writeFileSync(
|
|
join(pages, "packages.wrn"),
|
|
shell(
|
|
"Packages",
|
|
"Explore every WrNexus package, API, function, and copy-ready usage example.",
|
|
`<main class="page"><section class="hero compact"><span class="eyebrow">25 focused packages</span><h1>Package reference</h1><p>Everything in the framework, organized by responsibility and documented from the published ${frameworkVersion} APIs.</p><input class="search" type="search" placeholder="Search packages, features, or categories…" @input="query = event.target.value" /></section><section class="category-filter" aria-label="Filter packages by category"><div class="category-row">${categoryButtons}</div><p>Showing <strong>{category}</strong> packages</p></section><section class="package-grid">${cards}</section></main>`,
|
|
' state query = ""\n state category = "All"\n',
|
|
),
|
|
);
|
|
|
|
for (const [name, category, summary] of catalog) {
|
|
const packageRoot = join(root, "node_modules", "@wrnexus", name);
|
|
const readmePath = join(packageRoot, "README.md");
|
|
const typesPath = join(packageRoot, "dist", "index.d.ts");
|
|
if (!existsSync(readmePath) || !existsSync(typesPath))
|
|
throw new Error(`Install @wrnexus/${name} before generating docs`);
|
|
const readme = readFileSync(readmePath, "utf8").replace(/^#\s+[^\n]+\n?/, "");
|
|
const types = readFileSync(typesPath, "utf8");
|
|
const guide = markdown(readme);
|
|
const toc = [
|
|
{ id: "guide", title: "Guide", level: 2 },
|
|
...guide.headings,
|
|
{ id: "api", title: "Complete API", level: 2 },
|
|
{ id: "examples", title: "Examples", level: 2 },
|
|
]
|
|
.map(
|
|
(heading) =>
|
|
`<a class="toc-level-${heading.level}" href="#${heading.id}">${escape(heading.title)}</a>`,
|
|
)
|
|
.join("");
|
|
const content = `<main class="page package-page">
|
|
<aside class="sidebar"><a href="/packages">← All packages</a><span class="category">${category}</span><h1>@wrnexus/${name}</h1><p>${summary}</p><code>bun add @wrnexus/${name}@${frameworkVersion}</code><nav><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
|
|
<article class="documentation"><section class="doc-intro"><span class="eyebrow">${category}</span><h1>@wrnexus/${name}</h1><p>${summary}</p><pre><code>bun add @wrnexus/${name}@${frameworkVersion}</code></pre></section><section id="guide" class="prose">${guide.html}</section><section id="api" class="prose api"><h2>Complete TypeScript API</h2><p>This declaration is generated from the exact published package and lists its exported functions, classes, interfaces, and types.</p><pre data-language="typescript"><code>${escape(types)}</code></pre></section><section id="examples" class="prose examples"><h2>Examples</h2><p>Copy-ready examples taken from this package's published documentation.</p><div class="example-grid">${examplesFrom(readme, name)}</div></section></article>
|
|
<aside class="on-this-page"><h2>On this page</h2><nav>${toc}</nav></aside>
|
|
</main>`;
|
|
writeFileSync(join(packagePages, `${name}.wrn`), shell(`@wrnexus/${name}`, summary, content));
|
|
}
|
|
|
|
writeFileSync(
|
|
join(pages, "index.wrn"),
|
|
shell(
|
|
"Home",
|
|
"WrNexus documentation: build secure, server-rendered, reactive applications with Bun.",
|
|
`<main class="page"><section class="hero"><span class="eyebrow">WrNexus ${frameworkVersion}</span><h1>Build from the server.<br><em>Ship only what matters.</em></h1><p>An SSR-first, Bun-native framework with reactive .wrn components, typed data, realtime rooms, mobile capabilities, and production security built in.</p><div class="actions"><a class="primary" href="/getting-started">Start building</a><a href="/packages">Explore 25 packages</a></div><div class="code-window"><span>app/pages/counter.wrn</span><pre><code>page Counter {
|
|
state count = 0
|
|
view {
|
|
<button @click="count++">
|
|
Count {count}
|
|
</button>
|
|
}
|
|
}</code></pre></div></section><section class="feature-grid"><article><h2>SSR by default</h2><p>Useful HTML reaches the browser immediately. Interactive pages hydrate only the runtime they use.</p></article><article><h2>Secure foundations</h2><p>CSP, Trusted Types, CSRF, sessions, validation, authorization, encryption, and safe rendering are integrated.</p></article><article><h2>Web to native</h2><p>Share markup through Capacitor or compile portable pages into Expo and React Native routes.</p></article></section></main>`,
|
|
),
|
|
);
|
|
|
|
const guides = {
|
|
"getting-started": [
|
|
"Getting started",
|
|
"Getting started with WrNexus",
|
|
`<main class="page"><article class="documentation prose standalone"><span class="eyebrow">Guide</span><h1>Getting started</h1><p>Create a production-ready WrNexus application with Bun.</p><h2>1. Create the project</h2><pre><code>bunx @wrnexus/cli create my-app
|
|
cd my-app
|
|
bun install
|
|
bun run dev</code></pre><h2>2. Add a page</h2><pre><code>page Dashboard {
|
|
state count = 0
|
|
view {
|
|
<main>
|
|
<h1>Dashboard</h1>
|
|
<button @click="count++">{count}</button>
|
|
</main>
|
|
}
|
|
}</code></pre><h2>3. Verify and build</h2><pre><code>wrnexus doctor
|
|
wrnexus test
|
|
wrnexus build</code></pre><h2>Where things live</h2><ul><li><code>app/pages</code> contains routes.</li><li><code>app/components</code> contains reusable .wrn components.</li><li><code>app/api</code> contains server API handlers.</li><li><code>app/layouts</code> contains shared shells.</li><li><code>app/middleware</code> contains request middleware.</li><li><code>wrnexus.config.ts</code> configures security, styles, data, mobile, and deployment.</li></ul></article></main>`,
|
|
],
|
|
language: [
|
|
"Language and directives",
|
|
"Complete WrNexus language reference for events, directives, loops, conditionals, data, components, forms, realtime, and native behavior.",
|
|
`<main class="page"><article class="documentation prose standalone language-reference"><span class="eyebrow">Complete reference</span><h1>Language and directives</h1><p>This page documents the .wrn language and declarative browser features that span multiple packages.</p>
|
|
<h2 id="file-anatomy">File anatomy</h2><p>A file declares a <code>page</code> or <code>component</code> and can contain metadata, props, state, data, view, style, server functions, APIs, and realtime handlers.</p><pre><code>${escape(`page Dashboard {
|
|
layout = "default"
|
|
seo { title = "Dashboard" }
|
|
state count = 0
|
|
view { <button @click="count++">{count}</button> }
|
|
style { button { padding: 12px; } }
|
|
}`)}</code></pre>
|
|
<h2 id="state">State and interpolation</h2><p>State is scoped to the nearest generated <code>data-scope</code>. Text expressions update reactively after hydration.</p><pre><code>${escape(`state count = 0
|
|
state user = { name: "Ada" }
|
|
|
|
view {
|
|
<p>Count: {count}</p>
|
|
<p>{user.name}</p>
|
|
}`)}</code></pre>
|
|
<h2 id="events">Events</h2><p>Any DOM event can use <code>@event="statement"</code>. The compiler emits <code>data-on-event</code>. The expression receives <code>event</code> and can mutate state.</p><div class="table-wrap"><table><thead><tr><th>Syntax</th><th>Purpose</th></tr></thead><tbody><tr><td><code>@click</code></td><td>Pointer or keyboard activation.</td></tr><tr><td><code>@input</code></td><td>Read live field values.</td></tr><tr><td><code>@change</code></td><td>React to committed field changes.</td></tr><tr><td><code>@submit</code></td><td>Handle form submission behavior.</td></tr><tr><td><code>@browser-click</code></td><td>Run only in a browser target.</td></tr><tr><td><code>@mobile-click</code></td><td>Run only in a native/mobile target.</td></tr></tbody></table></div><pre><code>${escape(`<input @input="name = event.target.value">
|
|
<button @click="count++">Add</button>
|
|
<form @submit="submitted = true">...</form>`)}</code></pre>
|
|
<h2 id="directives">Reactive data attributes</h2><div class="table-wrap"><table><thead><tr><th>Directive</th><th>Behavior</th></tr></thead><tbody><tr><td><code>data-scope</code></td><td>Declares reactive state for a subtree.</td></tr><tr><td><code>data-text</code></td><td>Synchronizes textContent with an expression.</td></tr><tr><td><code>data-show</code></td><td>Shows or hides an element by truthiness.</td></tr><tr><td><code>data-for</code></td><td>Repeats an element for a client-side list.</td></tr><tr><td><code>data-on-<event></code></td><td>Compiled form of an event binding.</td></tr><tr><td><code>data-component</code></td><td>Mounts a server-rendered component.</td></tr><tr><td><code>data-slot</code></td><td>Fills a named component or layout slot.</td></tr><tr><td><code>data-wrnexus-csr</code></td><td>Connects generated client data fetching.</td></tr></tbody></table></div>
|
|
<h2 id="conditionals">Conditional rendering</h2><h3>Server conditionals</h3><p>Server blocks render only the selected branch into the response.</p><pre><code>${escape(`{#if user.isAdmin}
|
|
<a href="/admin">Admin</a>
|
|
{:else if user}
|
|
<p>Welcome {user.name}</p>
|
|
{:else}
|
|
<a href="/login">Sign in</a>
|
|
{/if}`)}</code></pre><h3>Client visibility</h3><pre><code>${escape(`<section data-show="open">Visible while open is true</section>`)}</code></pre>
|
|
<h2 id="loops">Loops and lists</h2><h3>Server each block</h3><pre><code>${escape(`{#each users as user, i}
|
|
<p>{i + 1}. {user.name}</p>
|
|
{:empty}
|
|
<p>No users</p>
|
|
{/each}`)}</code></pre><h3>Reactive client loop</h3><pre><code>${escape(`<li data-for="item, i in items">
|
|
<span data-text="item.name"></span>
|
|
<button data-on-click="items = items.filter(x => x !== item)">Remove</button>
|
|
</li>`)}</code></pre>
|
|
<h2 id="components">Components, props, and slots</h2><pre><code>${escape(`component Card {
|
|
props { title = "Card" }
|
|
view {
|
|
<article><h2>{title}</h2><slot></slot></article>
|
|
}
|
|
}
|
|
|
|
<div data-component="card" title="Profile">
|
|
<p>Card content</p>
|
|
</div>`)}</code></pre>
|
|
<h2 id="data">Server and client data</h2><p>Use named data bindings for SSR data or client hydration. Secrets and database work stay on the server.</p><pre><code>${escape(`data users {
|
|
ssr GET "/api/users"
|
|
}
|
|
|
|
view {
|
|
{#each users as user}<p>{user.name}</p>{/each}
|
|
}`)}</code></pre>
|
|
<h2 id="forms">Forms and validation</h2><p>Schema-backed forms validate in the browser and on the server with the same descriptor.</p><pre><code>${escape(`<form data-schema="login" method="post" action="/api/login" data-redirect="/dashboard">
|
|
<input name="email" type="email">
|
|
<span data-error="email"></span>
|
|
<button>Sign in</button>
|
|
<p data-success="Signed in" hidden></p>
|
|
</form>`)}</code></pre>
|
|
<h2 id="i18n">Internationalization and themes</h2><pre><code>${escape(`<h1>{t:home.title}</h1>
|
|
<button data-wire-lang-set="fr">Français</button>
|
|
<button data-wire-theme-toggle>Toggle theme</button>
|
|
<button data-wire-theme-set="dark">Dark</button>`)}</code></pre>
|
|
<h2 id="realtime">Realtime rooms</h2><pre><code>${escape(`<div data-room="chat" data-room-user="Ada">
|
|
<span data-room-status></span>
|
|
<div data-room-log></div>
|
|
<template data-room-item="message"><p>%user%: %text%</p></template>
|
|
<form data-room-send><input name="text" data-room-reset></form>
|
|
</div>`)}</code></pre>
|
|
<h2 id="native">Browser and native directives</h2><pre><code>${escape(`<button data-native-browser="share" data-native-mobile="share"
|
|
data-native-options='{"title":"WrNexus"}'>Share</button>
|
|
<nav data-native-only="mobile">Mobile navigation</nav>
|
|
<p data-native-only="browser">Browser instructions</p>
|
|
<button data-native-requires="haptics">Haptic action</button>`)}</code></pre>
|
|
<h2 id="other">Other framework attributes</h2><div class="table-wrap"><table><thead><tr><th>Attribute</th><th>Purpose</th></tr></thead><tbody><tr><td><code>data-error</code></td><td>Field validation error destination.</td></tr><tr><td><code>data-success</code></td><td>Successful form message.</td></tr><tr><td><code>data-redirect</code></td><td>Navigation after form success.</td></tr><tr><td><code>data-room-*</code></td><td>Realtime status, templates, sending, and reset behavior.</td></tr><tr><td><code>data-uploader</code></td><td>Config-driven upload widget.</td></tr><tr><td><code>data-wire-theme-*</code></td><td>Theme selection and toggling.</td></tr><tr><td><code>data-wire-lang*</code></td><td>Language selection.</td></tr><tr><td><code>data-native-*</code></td><td>Cross-platform capability and visibility behavior.</td></tr></tbody></table></div></article></main>`,
|
|
],
|
|
architecture: [
|
|
"Architecture",
|
|
"Understand the WrNexus SSR, compiler, runtime, and package architecture.",
|
|
`<main class="page"><article class="documentation prose standalone"><span class="eyebrow">Concepts</span><h1>Architecture</h1><p>WrNexus separates server work, generated markup, and browser behavior so applications stay understandable and efficient.</p><h2>Request path</h2><pre><code>Request → Router → Middleware → Page/API → SSR document → Browser runtime</code></pre><h2>Compiler</h2><p>The compiler parses .wrn files and lowers state, events, interpolation, loops, conditionals, data bindings, components, and styles into server modules and small declarative browser directives.</p><h2>Runtime</h2><p>The server owns routing, data, secrets, sessions, validation, uploads, and rendering. The browser owns reactive scopes, navigation, forms, realtime clients, and native capability dispatch.</p><h2>Package boundaries</h2><p>Each package is independently installable. Start with the CLI and core, then add database, security, realtime, native, UI, and operational packages as required.</p><div class="actions"><a class="primary" href="/packages/core">Read core API</a><a href="/packages/compiler">Read compiler API</a></div></article></main>`,
|
|
],
|
|
} as const;
|
|
for (const [route, [title, description, content]] of Object.entries(guides)) {
|
|
writeFileSync(join(pages, `${route}.wrn`), shell(title, description, content));
|
|
}
|
|
|
|
console.log(
|
|
`Generated ${catalog.length} package pages and ${Object.keys(guides).length + 2} site pages.`,
|
|
);
|