WorkRoot/WorkRoot-WRNexusJSComponent
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: sync WRNexusJS component showcase 0.5.0

Browse Source
This commit is contained in:
Clintchiz
2026-07-29 13:45:16 +05:30
parent 72552f2381
commit 8ba1f67f98
104 changed files with 10238 additions and 7893 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/avatar-example-2.svg
+9
View File
@@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
<rect width="160" height="160" rx="28" fill="#7c3aed"/>
<circle cx="80" cy="62" r="31" fill="#f5c7a9"/>
<path d="M45 67c0-36 14-52 37-52 25 0 38 19 34 56-8-12-14-23-17-34-13 17-31 27-54 30Z" fill="#3f1d18"/>
<circle cx="68" cy="65" r="3" fill="#292524"/>
<circle cx="92" cy="65" r="3" fill="#292524"/>
<path d="M69 79c8 6 15 6 22 0" fill="none" stroke="#9a3412" stroke-width="3" stroke-linecap="round"/>
<path d="M27 160c4-39 22-59 53-59s49 20 53 59Z" fill="#f3e8ff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 553 B

public/avatar-example-3.svg
+9
View File
@@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
<rect width="160" height="160" rx="28" fill="#0f9f8f"/>
<circle cx="80" cy="61" r="31" fill="#8d5524"/>
<path d="M47 56c2-27 15-41 34-41 22 0 35 17 34 44-14-4-26-13-34-26-8 12-20 20-34 23Z" fill="#18181b"/>
<circle cx="69" cy="64" r="3" fill="#18181b"/>
<circle cx="92" cy="64" r="3" fill="#18181b"/>
<path d="M69 78c7 6 15 6 22 0" fill="none" stroke="#4a1d0b" stroke-width="3" stroke-linecap="round"/>
<path d="M27 160c4-40 22-60 53-60s49 20 53 60Z" fill="#ccfbf1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 552 B

public/avatar-example.svg
+18
View File
@@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" role="img" aria-labelledby="title description">
<title id="title">Example profile portrait</title>
<desc id="description">Illustrated portrait of a person on a blue background.</desc>
<defs>
<linearGradient id="background" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#0ea5e9"/>
<stop offset="1" stop-color="#2563eb"/>
</linearGradient>
</defs>
<rect width="160" height="160" rx="28" fill="url(#background)"/>
<circle cx="80" cy="62" r="31" fill="#fed7aa"/>
<path d="M49 61c2-28 16-42 34-42 22 0 34 18 31 45-10-5-19-14-24-24-9 13-23 21-41 21Z" fill="#312e81"/>
<circle cx="69" cy="64" r="3" fill="#1f2937"/>
<circle cx="93" cy="64" r="3" fill="#1f2937"/>
<path d="M70 78c7 6 14 6 21 0" fill="none" stroke="#9a3412" stroke-width="3" stroke-linecap="round"/>
<path d="M28 160c3-39 22-59 52-59s49 20 52 59Z" fill="#e0f2fe"/>
<path d="m61 104 19 23 20-23 11 56H49Z" fill="#ffffff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1005 B

public/card-landscape.svg
+23
View File
@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 560" role="img" aria-labelledby="title description">
<title id="title">Abstract blue glass landscape</title>
<desc id="description">Layered translucent blue and teal shapes on a pale background.</desc>
<defs>
<linearGradient id="background" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#e0f2fe"/>
<stop offset="1" stop-color="#bae6fd"/>
</linearGradient>
<linearGradient id="glass" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#22d3ee" stop-opacity=".78"/>
<stop offset=".52" stop-color="#0284c7" stop-opacity=".82"/>
<stop offset="1" stop-color="#1d4ed8" stop-opacity=".9"/>
</linearGradient>
</defs>
<rect width="960" height="560" fill="url(#background)"/>
<g transform="translate(92 46)">
<path d="M80 440 290 85l145 355Z" fill="#14b8a6" opacity=".42"/>
<path d="m170 440 238-335 190 335Z" fill="#06b6d4" opacity=".58"/>
<path d="m285 440 220-390 260 390Z" fill="url(#glass)"/>
<path d="m410 440 170-278 238 278Z" fill="#0369a1" opacity=".46"/>
<path d="m32 440 210-248 176 248Z" fill="#0ea5e9" opacity=".36"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

public/llms.txt
-276
View File
@@ -1,276 +0,0 @@
# WrNexus
> WrNexus is an SSR-first, **Bun-native** full-stack web framework. UI is written in
> `.wrn` files (its own component language — NOT React/JSX/Vue). Routing is file-based.
> This document teaches an AI how to write correct WrNexus code. It is private and
> post-dates model training data, so rely on THIS document, not prior web-framework
> assumptions.
## Golden rules
- **Pages, components, and layouts are `.wrn` files.** Do NOT write `.tsx`/`.jsx`/React
for UI. Do NOT use `useState`, hooks, JSX, or a client bundler.
- **Routing is file-based** under `app/`. The filename is the route. No router config.
- **Interactivity** lives in `state` + `{expr}` + `@event` inside `.wrn`. Components render
on the server and hydrate automatically — you never write client-side JS islands.
- **Runtime is Bun only** (uses `Bun.serve`, `bun:sqlite`, `Bun.password`, …). Node is not supported.
- To add files, prefer the CLI: `wrnexus generate page <Name>` / `component <name>` / `api <path>` / `schema <name>`.
## Project layout
```
app/
pages/ *.wrn → routes: index.wrn = "/", about.wrn = "/about", blog/[slug].wrn = "/blog/:slug"
components/ *.wrn → reusable UI, mounted in a page/component via <div data-component="name" ...props>
layouts/ *.wrn → named layouts; a page opts in with layout = "name"
api/ *.ts → HTTP handlers: export const GET/POST/PUT/PATCH/DELETE = async (ctx) => Response
middleware/ *.ts → export default async (ctx, next) => next()
realtime/ *.ts → export default defineRoom({ ... }) from "@wrnexus/core" (ws://host/realtime/<name>)
schemas/ *.ts → validation schemas (the `v` builder), used by forms + parseBody
locales/ *.json → i18n messages per language
db/ schema.ts, queries/*.sql, migrations/*.sql
styles/ global.css → Tailwind (default) or plain CSS
wrnexus.config.ts → app config (AppConfig from "@wrnexus/styles")
public/ → static assets served at /
```
## `.wrn` page
```wrn
page Home {
layout = "public" // optional: a component in app/layouts/<name>.wrn ("none" to skip)
state count = 0 // optional: seeds client-reactive state (omit for pure SSR)
seo {
title = "Home"
description = "..."
canonical = "/"
}
view {
<h1>Hello</h1>
<p>Count is {count}, doubled is {count * 2}.</p>
<button @click="count++">Increment</button>
<div data-component="counter" start="5" label="Clicks"></div>
}
style {
h1 { color: var(--wire-color-text); }
}
}
```
## `.wrn` component
```wrn
component Counter {
props { // props come from mount attributes; each is coerced to the
start = 0 // TYPE of its default (so start="5" arrives as the number 5)
label = "Count"
}
state count = start // state may reference props
view {
<button @click="count++">{label}: {count}</button>
}
}
```
Mount it from any page/component: `<div data-component="counter" start="0" label="Clicks"></div>`.
Components render on the server with their props, then hydrate — no per-component JS.
## The `view { }` block (plain HTML + a few directives)
- `{expr}` — interpolate a JS expression. Reactive if it references `state`: `{count}`, `{count * 2}`, `{user.name}`.
- `@event="expr"` — bind a DOM event; the expression runs in the reactive scope: `@click="count++"`, `@input="name = event.target.value"`.
- `<div data-component="name" prop="v">` — mount a component (attrs become string props, coerced).
- `<slot></slot>` / `<slot name="x"></slot>` — component/layout slots; fill with `<div data-slot="x">…</div>`.
- **Server loop (DB/list/table):** `{#each <list> as <item>[, <i>]} …rows… {:empty} …fallback… {/each}` — iterates SSR data on the server and renders markup per item. `{item.field}` interpolates (HTML-escaped, XSS-safe). `<list>` is a JS expression, usually an `ssr` data binding (see "Data-driven tables" below). This is how you render a database table in `.wrn`.
- **Server conditional:** `{#if <expr>} … {:else if <expr>} … {:else} … {/if}` — renders the first truthy branch on the server. `<expr>` can reference `ssr` data, or the `item`/`index` of an enclosing `{#each}`. Works at page level and inside loops (e.g. `{#if r.active}<span>●</span>{:else}<span>○</span>{/if}` per row). For client-side show/hide based on reactive `state`, use `data-show="expr"` instead.
- i18n: `{t:home.title}` in text, `t:placeholder="form.name"` on attributes — resolved per request from `app/locales/`.
- Theme: any element with `data-wire-theme-toggle` toggles light/dark; `data-wire-theme-set="dark"` sets it.
- Void/self-closing tags are fine: `<br />`, `<img src="..." />`.
- Only `{` and `}` are special (interpolation). Don't use a bare `}` in view text.
## Data-driven tables / lists (server-rendered `.wrn`)
Use an `ssr` data binding to fetch rows on the server, then `{#each}` to render them.
This renders on the **server** (SSR-first) and is HTML-escaped by default.
```wrn
page Admin {
layout = "dashboard"
// Fetch on the server. The api handler at /api/contacts returns { contacts: [...] };
// this block's `return contacts` exposes that array (via `$data`) as the binding `rows`.
ssr {
api rows GET /api/contacts { return contacts }
}
view {
<table>
<tbody>
{#each rows as r, i}
<tr>
<td>#{i}</td>
<td>{r.name}</td>
<td><a href="mailto:{r.email}">{r.email}</a></td>
</tr>
{:empty}
<tr><td colspan="3">No submissions yet.</td></tr>
{/each}
</tbody>
</table>
}
}
```
The matching API returns the array under a key the `ssr` block reads:
```ts
// app/api/contacts.ts → GET /api/contacts
import { getDb } from "@wrnexus/db";
export const GET = async () => {
const contacts = await getDb().all("SELECT id, name, email FROM contacts ORDER BY id DESC");
return Response.json({ contacts }); // ssr block does `return contacts`
};
```
**Prefer this `.wrn` + `{#each}` approach for DB-backed tables and lists.** (`.ts`/`.tsx`
pages returning an HTML string are also supported for fully-custom programmatic rendering,
but a `.wrn` page with `ssr` data + `{#each}` is the idiomatic, SSR-first way.)
## API routes (`app/api/*.ts`)
```ts
// app/api/users/list.ts → GET /api/users/list
import { getDb } from "@wrnexus/db";
export const GET = async (ctx) => {
return Response.json({ users: await ListUsers(getDb()) });
};
export const POST = async (ctx) => {
const body = await ctx.req.json();
return Response.json({ ok: true, body }, { status: 201 });
};
```
`ctx` (the `Context` from `@wrnexus/core`) has:
`req: Request`, `url: URL`, `params: Record<string,string>` (dynamic route params, e.g. `/users/[id]` → `ctx.params.id`),
`lang: string`, `t(key, params?)` (i18n), `cookies` (get/set), `session` (get/set). Auth: `getUser(ctx)` after `sessionAuth`/`logIn`.
When an SSO forward-auth verifier needs the URL that originally reached the gateway, use
`@wrnexus/helpers` instead of constructing it from untrusted headers:
```ts
import { redirectToLogin } from "@wrnexus/helpers";
return redirectToLogin(ctx, "/login", {
allowedHosts: ["admin.localhost:3000", "reports.localhost:3000"],
});
```
The package also exports `getOriginalRequestUrl`, `getOriginalRequestOrigin`,
`getOriginalRequestPath`, and `getOriginalRequestMethod`. Always pass `allowedHosts` when
using forwarded gateway URLs; the helper rejects untrusted redirect destinations.
## Middleware & realtime
```ts
// app/middleware/logger.ts
export default async function logger(ctx, next) {
console.log(ctx.req.method, ctx.url.pathname);
return next(); // return a Response WITHOUT calling next() to short-circuit
}
```
```ts
// app/realtime/chat.ts → ws://host/realtime/chat
import { defineRoom } from "@wrnexus/core";
export default defineRoom({
onConnect(client) { client.send({ type: "system", text: "connected" }); },
onMessage(client, msg) { client.room.broadcast({ type: "message", data: msg }); },
});
```
Client side: a page opts in with `data-room="chat"` (handled by the realtime runtime).
## Config (`wrnexus.config.ts`)
```ts
import type { AppConfig } from "@wrnexus/styles";
const config: AppConfig = {
seo: { title: "App", titleTemplate: "%s | App", description: "..." },
styles: { entry: "app/styles/global.css", process: async ({ entryPath, mode }) => /* Tailwind */ "" },
fonts: { sans: '"Inter", system-ui, sans-serif', google: [{ family: "Inter", weights: [400, 600] }] },
theme: { default: "dark", themes: { light: { "color-primary": "#2563eb" } } },
i18n: { default: "en", locales: ["en", "es"] },
db: { driver: "sqlite", url: "file:./dev.db" },
security: { cors: { enabled: true, origin: ["http://localhost:5173"] } },
// profiles: { production: { db: { driver: "postgres", url: process.env.DATABASE_URL } } },
};
export default config;
```
## Database (`@wrnexus/db`)
```ts
// app/db/schema.ts
import { v, table } from "@wrnexus/db";
export const users = table("users", {
id: v.id(),
name: v.string(),
email: v.string().unique(),
createdAt: v.timestamp(),
});
```
- Queries: write `app/db/queries/*.sql` with `-- name: ListUsers :many` blocks; `wrnexus db generate` emits typed functions.
- Access at runtime: `import { getDb } from "@wrnexus/db"; const rows = await ListUsers(getDb());`
- Migrations in `app/db/migrations/`; run `wrnexus db migrate` (dev auto-migrates sqlite).
## Validation (`@wrnexus/validation`)
```ts
// app/schemas/login.ts
import { v } from "@wrnexus/validation";
export default v.object({
email: v.string().email(),
password: v.string().min(8),
});
```
In an API route: `import s from "../schemas/login"; import { parseBody } from "@wrnexus/validation"; const r = await parseBody(s, ctx.req);` → `r.ok ? r.value : r.response`.
In a form: `<form data-schema="login" action="/api/login" method="post">` + `<span data-error="email"></span>` (client + server validation wired automatically).
## AI / LLM (`@wrnexus/ai`)
```ts
// app/api/ai.ts
import { createAI } from "@wrnexus/ai";
const ai = createAI(); // reads ANTHROPIC_API_KEY; default model claude-opus-4-8
export const POST = async (ctx) => {
const { prompt } = await ctx.req.json();
return ai.streamResponse(prompt); // or: return Response.json({ text: await ai.generate(prompt) })
};
```
## CLI
```
wrnexus dev . # dev server + HMR
wrnexus build . # production build → dist/server.js
bun dist/server.js # run the production server (or npm start)
wrnexus create <name> # scaffold a new app
wrnexus update --latest # deps + syntax/config migrations + verification
wrnexus generate page <Name> # scaffold a page (aliases: g p)
wrnexus generate component <name> | api <path> | schema <name>
wrnexus db migrate | rollback | status | new [--from-models] | generate | seed
wrnexus eject <component> # copy a Wire UI component's .wrn into app/components to customize
```
## When asked to "create a page/component/feature"
1. Create the `.wrn` file under `app/pages/` (or `app/components/`) with a `page`/`component` block — or run `wrnexus generate page <Name>`.
2. Put markup in `view { }`, interactive bits in `state` + `{expr}` + `@event`, reusable UI as components mounted via `data-component`.
3. For data, add an `app/api/*.ts` route and `getDb()`; for forms, add an `app/schemas/*.ts` and `data-schema`.
4. Style with Tailwind utility classes in the view, or theme tokens (`var(--wire-*)`), or `style { }`.
5. Never emit React/JSX, a manual router, or client-side island JS — the framework handles hydration.
public/playground.js
+16 -4
View File
@@ -58,10 +58,21 @@
let design = storedDesign();
applyDesign(design, false);
for (const link of document.querySelectorAll(".docs-directory a[href]")) {
const target = new URL(link.href, window.location.origin);
if (target.pathname === window.location.pathname) link.setAttribute("aria-current", "page");
function updateActiveNavigation() {
for (const link of document.querySelectorAll(".docs-directory a[href]")) {
const target = new URL(link.href, window.location.origin);
if (target.pathname === window.location.pathname) {
link.setAttribute("aria-current", "page");
} else {
link.removeAttribute("aria-current");
}
}
}
updateActiveNavigation();
window.addEventListener("wrnexus:navigated", updateActiveNavigation);
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
if (design.mode === "system") applyDesign(design);
});
@@ -293,7 +304,8 @@
const links = [...document.querySelectorAll("[data-docs-component-link]")];
let visible = 0;
for (const link of links) {
const matches = !query || link.textContent.toLowerCase().includes(query);
const label = link.querySelector("[data-docs-component-name]")?.textContent || "";
const matches = !query || label.toLowerCase().includes(query);
link.hidden = !matches;
if (matches) visible++;
}