22 lines
4.5 KiB
Plaintext
22 lines
4.5 KiB
Plaintext
page Thewrnlanguage {
|
|
seo {
|
|
title = "The .wrn language"
|
|
description = "Reference for WRNexusJS .wrn pages, components, layouts, props, state, directives, forms, security, and errors."
|
|
canonical = "https://wrnexusjs.dev/language"
|
|
}
|
|
view {
|
|
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
<div class="docs-shell">
|
|
<header class="topbar"><a class="brand" href="/"><span>W</span> WRNexusJS</a><nav aria-label="Primary"><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="https://component.wrnexusjs.dev/">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a></nav><div class="topbar-actions"><a class="preview-pill" href="/access">Preview · v0.5.1</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div></header>
|
|
<div class="mobile-doc-nav"><details><summary>Browse documentation</summary><nav><a href="/getting-started">Get started</a><a href="/packages">Packages</a><a href="https://component.wrnexusjs.dev/">Components</a><a href="/language">Language</a><a href="/architecture">Architecture</a><a href="/tutorial">Tutorial</a><a href="/guides/project-structure">Guides</a><a href="/examples">Examples</a><a href="/search">Search</a></nav></details></div>
|
|
<main id="main" class="portal-main"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span aria-hidden="true">/</span><span>Documentation</span><span aria-hidden="true">/</span><span aria-current="page">The .wrn language</span></nav><article class="documentation prose standalone"><span class="status status-beta">Language reference · 0.5.1</span><h1>The <code>.wrn</code> language</h1><nav class="local-toc" aria-label="On this page"><a href="#anatomy">Anatomy</a><a href="#state">Props and state</a><a href="#server">Server control flow</a><a href="#directives">Directives</a><a href="#security">Security</a><a href="#errors">Errors</a></nav><h2 id="anatomy">File anatomy</h2><pre><code>page Account {
|
|
layout = "public"
|
|
seo { title = "Account" description = "Manage your account." }
|
|
state count = 0
|
|
view { <button @click="count++">Count {count}</button> }
|
|
}</code></pre><h2 id="state">Pages, components, layouts, props, and state</h2><p>Pages are routes. Components declare default-valued props and may hold state. Layouts provide shared slots. Mount components with <code>data-component</code>; fill default or named slots with <code>data-slot</code>.</p><h2 id="server">Interpolation, conditionals, and loops</h2><p>Interpolation is HTML-escaped. Use server <code>{#if}</code> and <code>{#each}</code> for SSR data. Use <code>data-show</code> for reactive client visibility.</p><h2 id="directives">Events and directives</h2><p><code>@click</code> and other events execute in the reactive scope. Data attributes opt into forms, i18n, themes, realtime, uploader, browser, and mobile behavior. Consult the exact package page because availability varies.</p><h2 id="forms">Forms, i18n, themes, and realtime</h2><p><code>form[data-schema]</code> connects descriptors to client and server validation. Translation keys use <code>{t:key}</code>. Theme toggles use <code>data-wire-theme-toggle</code>. Realtime pages opt into a named room.</p><h2 id="security">Escaping and security</h2><p>Text interpolation is escaped by default. Do not construct trusted HTML from user input. Server-only refinements must be repeated at the authoritative mutation boundary.</p><h2 id="errors">Common compiler errors</h2><ul><li>Use balanced braces; a literal brace must be escaped.</li><li>Declare UI in <code>view</code>, not JSX or hooks.</li><li>Use a valid page, component, or layout declaration matching the file role.</li><li>Keep server loops tied to available SSR bindings.</li><li>Check <a href="/guides/troubleshooting">troubleshooting</a> and <a href="/packages/compiler">compiler API</a> for this release.</li></ul></article></main>
|
|
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.1</strong><span>Server-first documentation for the Bun-native framework.</span></p></div><nav aria-label="Footer"><a href="/access">Request access</a><a href="/license">License</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Created by <a href="https://workroot.in/">WorkRoot</a> · Private Developer Preview</p></footer>
|
|
<BackToTop />
|
|
</div>
|
|
}
|
|
} |