45 lines
6.4 KiB
Plaintext
45 lines
6.4 KiB
Plaintext
page wrnexusdevtoolbar {
|
|
seo {
|
|
title = "@wrnexus/dev-toolbar"
|
|
description = "Development toolbar diagnostics, inspection, and runtime status."
|
|
}
|
|
|
|
view {
|
|
<div class="docs-shell">
|
|
<SkipLink label="Skip to content" href="#main" class="docs-skip-link" />
|
|
<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">Private 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 class="portal-main docs-layout">
|
|
<article id="main" class="documentation prose standalone package-document"><nav class="breadcrumbs" aria-label="Breadcrumb"><a href="/">Home</a><span>/</span><a href="/packages">Packages</a><span>/</span><span aria-current="page">@wrnexus/dev-toolbar</span></nav><section class="doc-intro"><span class="eyebrow">Tooling · Package reference</span><h1>@wrnexus/dev-toolbar</h1><p>Development toolbar diagnostics, inspection, and runtime status.</p><div class="doc-meta"><span>v0.5.1</span><span>Private registry</span><span>Tooling</span></div><section id="access" class="access-callout"><h2>Install the package</h2><p>After WorkRoot approves private registry access, install the release-aligned package:</p><pre><code>bun add @wrnexus/dev-toolbar@0.5.1</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"><p>Development-only page quality toolbar for WRNexusJS.</p>
|
|
<h3 id="features">Features</h3>
|
|
<ul>
|
|
<li>Runtime, resource and unhandled promise error capture</li>
|
|
<li>Accessibility, SEO, image, media, color, HTML, form, link, responsive and security checks</li>
|
|
<li>Performance and network observations</li>
|
|
<li>Element highlighting and issue filtering</li>
|
|
<li>Server-side issue collector</li>
|
|
<li>Development-only asset strings for direct serving by <code>@wrnexus/dev-server</code></li>
|
|
<li>Safe open-in-editor helper</li>
|
|
</ul>
|
|
<h3 id="dev-server-integration">Dev-server integration</h3>
|
|
<p>Serve <code>DEV_TOOLBAR_RUNTIME</code> at <code>/__wrnexus/dev-toolbar.js</code> and <code>DEV_TOOLBAR_CSS</code> at <code>/__wrnexus/dev-toolbar.css</code>, then inject this before <code></body></code> in development:</p>
|
|
<pre data-language="html"><code><script type="module" src="/__wrnexus/dev-toolbar.js" data-wrnexus-dev-toolbar></script></code></pre>
|
|
<p>The browser runtime exposes <code>window.__wrnexusDevToolbar</code>.</p></section><section id="api" class="api"><h2>Complete TypeScript API</h2><p>Generated from the exact installed package declarations.</p><pre data-language="typescript"><code>export { DevToolbarCategory, DevToolbarClientApi, DevToolbarConfig, DevToolbarElementTarget, DevToolbarFix, DevToolbarIssue, DevToolbarMetrics, DevToolbarPageReport, DevToolbarPanel, DevToolbarPlatformSnapshot, DevToolbarServerMessage, DevToolbarSeverity, DevToolbarSourceLocation } from './types.js';
|
|
export { DEV_TOOLBAR_RULES, DevToolbarRule, DevToolbarRuleContext, accessibilityRules, accessibleName, colorRules, contrastRatio, createFingerprint, createIssue, effectiveBackground, formRules, getStableSelector, htmlRules, imageRules, isVisible, linkRules, luminance, mediaRules, parseRgb, parseSource, performanceRules, responsiveRules, runDevToolbarRules, securityRules, seoRules } from './rules/index.js';
|
|
export { DevToolbarApp, DevToolbarCollector, DevToolbarIssueListener, DevToolbarRegistry, DevToolbarRouteOptions, OpenEditorOptions, OpenEditorRequest, buildEditorCommand, createDevToolbarCollector, createDevToolbarRegistry, createServerIssue, handleDevToolbarRoute, issueFromError, openInEditor, resolveEditorFile, serializeDevToolbarJson } from './server/index.js';
|
|
export { DEV_TOOLBAR_CSS, DEV_TOOLBAR_RUNTIME } from './client/index.js';
|
|
</code></pre></section><section id="examples" class="examples"><h2>Examples</h2><p>Copy-ready examples from the installed package documentation.</p><div class="example-grid"><article class="example-card"><h3>Serve DEVTOOLBARRUNTIME at /wrnexus/dev-toolbar.js and DEVTOOLBARCSS at /wrnexus/dev-toolbar.css, then inject this before </body> in development</h3><pre data-language="html"><code><script type="module" src="/__wrnexus/dev-toolbar.js" data-wrnexus-dev-toolbar></script></code></pre></article><article class="example-card"><h3>Run development-toolbar rules</h3><pre data-language="ts"><code>import { runDevToolbarRules } from "@wrnexus/dev-toolbar";
|
|
|
|
const issues = runDevToolbarRules(context);</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="#features">Features</a><a class="toc-level-3" href="#dev-server-integration">Dev-server integration</a><a class="toc-level-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a></nav></aside>
|
|
</main>
|
|
<footer><div class="footer-brand"><span class="footer-mark" aria-hidden="true">W</span><p><strong>WRNexusJS 0.5.1</strong><span>Complete API documentation generated from installed package declarations.</span></p></div><nav aria-label="Footer"><a href="/packages">All packages</a><a href="/getting-started">Get started</a><a href="/security">Security</a><a href="/support">Support</a><a href="/llms.txt">AI guide</a></nav><p class="footer-meta">Private Developer Preview · Bun-native</p></footer>
|
|
<BackToTop />
|
|
</div>
|
|
}
|
|
}
|