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

docs: publish package usage examples for 0.2.24

Browse Source
This commit is contained in:
Clintchiz
2026-07-13 20:58:28 +05:30
parent b07ef5058a
commit 379553bdf7
79 changed files with 1542 additions and 894 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/pages/packages/styles.wrn
+46 -29
View File
@@ -10,12 +10,12 @@ page wrnexusstyles {
<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="/language">Language</a><a href="/architecture">Architecture</a></nav>
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.23</a><button data-wire-theme-toggle class="theme-button" aria-label="Toggle color theme" title="Toggle color theme">◐</button></div>
<div class="topbar-actions"><a class="preview-pill" href="/access">Private preview · v0.2.24</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="/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 class="page package-page">
<aside class="sidebar"><a href="/packages">← All packages</a><span class="category">Frontend</span><h2>@wrnexus/styles</h2><p>CSS pipeline, themes, fonts, profiles, and application config.</p><span class="status status-beta">Private preview · 0.2.23</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
<article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">Frontend · Preview</span><h1>@wrnexus/styles</h1><p>CSS pipeline, themes, fonts, profiles, and application config.</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/styles@0.2.23</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose"><blockquote>Global CSS bundling, the <code>--wire-*</code> design-token theme system, and the <code>wrnexus.config.ts</code> app-config loader for WRNexusJS apps.</blockquote>
<aside class="sidebar"><a href="/packages">← All packages</a><span class="category">Frontend</span><h2>@wrnexus/styles</h2><p>CSS pipeline, themes, fonts, profiles, and application config.</p><span class="status status-beta">Private preview · 0.2.24</span><nav><a href="#access">Access</a><a href="#guide">Guide</a><a href="#api">Complete API</a></nav></aside>
<article id="main" class="documentation"><section class="doc-intro"><span class="eyebrow">Frontend · Preview</span><h1>@wrnexus/styles</h1><p>CSS pipeline, themes, fonts, profiles, and application config.</p><section id="access" class="access-callout"><h2>Private registry access required</h2><p>This package is not available from the public npm registry. After WorkRoot approves access and supplies private registry instructions, install the release-aligned package:</p><pre><code>bun add @wrnexus/styles@0.2.24</code><button type="button" class="copy-button" aria-label="Copy installation command">Copy</button></pre><p><a href="/access">Request preview access</a>. Never put registry tokens in source control.</p></section></section><section id="guide" class="prose"><blockquote>Global CSS bundling, the <code>--wire-*</code> design-token theme system, and the <code>wrnexus.config.ts</code> app-config loader for WRNexusJS apps.</blockquote>
<p>Part of the <strong>WRNexusJS</strong> framework — an SSR-first, Bun-native full-stack web framework.</p>
<h3 id="overview">Overview</h3>
<p>This package owns three server-side concerns that shape every page a WRNexusJS app renders:</p>
@@ -509,30 +509,7 @@ declare function bundleCss(entryPath: string, mode: Mode): Promise&lt;string&gt;
declare function renderStyles(ctx: StyleProcessContext, styles?: StylesConfig): Promise&lt;string&gt;;
export &#123; type AppConfig, DEFAULT_THEMES, type FontConfig, type FontDisplay, type GoogleFont, type LocalFontFace, type MobileConfig, type Mode, type PwaConfig, type ResolvedTheme, type StyleProcessContext, type StylesConfig, type Mode as StylesMode, THEME_COOKIE, THEME_CSS_HREF, THEME_JS_HREF, type ThemeConfig, type ThemeTokens, bundleCss, findStyleEntry, fontCspSources, headToString, loadAppConfig, loadEnv, loadRawConfig, renderFontHead, renderProductionFontHead, renderStyles, renderThemeCss, renderThemeRuntime, resolveProfile, resolveThemeConfig, resolveThemeName &#125;;
</code></pre></section><section id="examples" class="prose examples"><h2>Examples</h2><p>Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.</p><div class="example-grid"><article class="example-card"><h3>Example 1</h3><pre data-language="bash"><code>bun add @wrnexus/styles</code></pre></article><article class="example-card"><h3>Example 2</h3><pre data-language="ts"><code>interface StylesConfig &#123;
/** CSS entry path relative to the app root. Default: app/styles/global.css */
entry?: string;
/** Custom processor — return the final CSS string (Tailwind/PostCSS/Sass). */
process?: (ctx: StyleProcessContext) =&gt; string | Promise&lt;string&gt;;
&#125;
interface StyleProcessContext &#123;
entryPath: string | null; // resolved absolute CSS entry, or null
appDir: string;
appRoot: string;
mode: Mode; // &quot;development&quot; | &quot;production&quot;
&#125;</code></pre></article><article class="example-card"><h3>Example 3</h3><pre data-language="ts"><code>type ThemeTokens = Record&lt;string, string&gt;;
interface ThemeConfig &#123;
default?: string; // theme used when no cookie is present
themes?: Record&lt;string, ThemeTokens&gt;; // deep-merged over built-in light/dark
&#125;
interface ResolvedTheme &#123;
default: string;
names: string[];
themes: Record&lt;string, ThemeTokens&gt;;
&#125;</code></pre></article><article class="example-card"><h3>Example 4</h3><pre data-language="ts"><code>import type &#123; AppConfig &#125; from &quot;@wrnexus/styles&quot;;
</code></pre></section><section id="examples" class="prose examples"><h2>Examples</h2><p>Examples are taken from this package's installed documentation and must be evaluated with its requirements and stability notes.</p><div class="example-grid"><article class="example-card"><h3>wrnexus.config.ts</h3><pre data-language="ts"><code>import type &#123; AppConfig &#125; from &quot;@wrnexus/styles&quot;;
export default &#123;
head: [
@@ -560,10 +537,50 @@ export default &#123;
db: &#123; driver: &quot;postgres&quot;, url: process.env.DATABASE_URL! &#125;,
&#125;,
&#125;,
&#125; satisfies AppConfig;</code></pre></article></div></section></article>
&#125; satisfies AppConfig;</code></pre></article><article class="example-card"><h3>Loading config + producing CSS</h3><pre data-language="ts"><code>import &#123;
loadAppConfig,
resolveProfile,
loadEnv,
findStyleEntry,
renderStyles,
&#125; from &quot;@wrnexus/styles&quot;;
const appRoot = process.cwd();
const mode = &quot;production&quot; as const;
const profile = resolveProfile(&#123; mode &#125;);
loadEnv(appRoot, profile);
const config = await loadAppConfig(appRoot, profile);
const appDir = `$&#123;appRoot&#125;/app`;
const entryPath = findStyleEntry(appDir, appRoot, config.styles?.entry);
const css = await renderStyles(&#123; entryPath, appDir, appRoot, mode &#125;, config.styles);</code></pre></article><article class="example-card"><h3>Rendering the theme</h3><pre data-language="ts"><code>import &#123;
resolveThemeConfig,
resolveThemeName,
renderThemeCss,
renderThemeRuntime,
THEME_COOKIE,
&#125; from &quot;@wrnexus/styles&quot;;
const theme = resolveThemeConfig(config.theme);
// Server: pick the active theme from the request cookie (no flash).
const active = resolveThemeName(cookies[THEME_COOKIE], theme);
// → render &lt;html data-theme=&#123;active&#125;&gt;
const themeCss = renderThemeCss(theme); // served at THEME_CSS_HREF
const themeJs = renderThemeRuntime(theme); // served at THEME_JS_HREF</code></pre></article><article class="example-card"><h3>Rendering the theme</h3><pre data-language="css"><code>.card &#123;
background: var(--wire-color-surface);
color: var(--wire-color-text);
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius);
box-shadow: var(--wire-shadow-1);
&#125;</code></pre></article><article class="example-card"><h3>Rendering the theme</h3><pre data-language="html"><code>&lt;button data-wire-theme-toggle&gt;Toggle theme&lt;/button&gt;
&lt;button data-wire-theme-set=&quot;brand&quot;&gt;Brand theme&lt;/button&gt;</code></pre></article></div></section></article>
<aside class="on-this-page"><h2>On this page</h2><nav><a class="toc-level-2" href="#guide">Guide</a><a class="toc-level-3" href="#overview">Overview</a><a class="toc-level-3" href="#api">API</a><a class="toc-level-4" href="#config-loading">Config loading</a><a class="toc-level-4" href="#appconfig">AppConfig</a><a class="toc-level-4" href="#styles-pipeline">Styles pipeline</a><a class="toc-level-4" href="#theme-system">Theme system</a><a class="toc-level-3" href="#usage">Usage</a><a class="toc-level-4" href="#wrnexus-config-ts">wrnexus.config.ts</a><a class="toc-level-4" href="#loading-config-producing-css">Loading config + producing CSS</a><a class="toc-level-4" href="#rendering-the-theme">Rendering the theme</a><a class="toc-level-3" href="#requirements-notes">Requirements / Notes</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a></nav></aside>
</main>
<footer>WRNexusJS 0.2.23 · Private Developer Preview · Bun-native · Documentation generated from installed package APIs.</footer>
<footer>WRNexusJS 0.2.24 · Private Developer Preview · Bun-native · Documentation generated from installed package APIs.</footer>
</div>
}
}