docs: publish package usage examples for 0.2.24
This commit is contained in:
@@ -10,22 +10,64 @@ page wrnexusmobile {
|
||||
<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">Native</span><h2>@wrnexus/mobile</h2><p>SSR-safe compatibility access to Capacitor plugins.</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">Native · Preview</span><h1>@wrnexus/mobile</h1><p>SSR-safe compatibility access to Capacitor plugins.</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/mobile@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"><p>SSR-safe access to Capacitor plugins from WRNexusJS browser code.</p>
|
||||
<pre data-language="bash"><code>wrnexus mobile add @capacitor/camera</code></pre>
|
||||
<pre data-language="ts"><code>import { Camera } from "@capacitor/camera";
|
||||
<aside class="sidebar"><a href="/packages">← All packages</a><span class="category">Native</span><h2>@wrnexus/mobile</h2><p>SSR-safe compatibility access to Capacitor plugins.</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">Native · Preview</span><h1>@wrnexus/mobile</h1><p>SSR-safe compatibility access to Capacitor plugins.</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/mobile@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>SSR-safe access to Capacitor plugins from WRNexusJS browser code.</blockquote>
|
||||
<h3 id="overview">Overview</h3>
|
||||
<p><code>@wrnexus/mobile</code> keeps optional native imports out of server rendering while giving browser-owned modules one consistent registry for Capacitor plugins. During SSR, <code>mobile.isNative()</code> is <code>false</code> and <code>mobile.platform()</code> is <code>"web"</code>.</p>
|
||||
<p>Install a plugin through the WRNexusJS CLI so the web and native projects stay aligned:</p>
|
||||
<pre data-language="bash"><code>wrnexus mobile add @capacitor/camera @capacitor/haptics</code></pre>
|
||||
<h3 id="usage">Usage</h3>
|
||||
<h4 id="register-and-invoke-a-capacitor-plugin">Register and invoke a Capacitor plugin</h4>
|
||||
<p>Import Capacitor packages only from browser-owned code, never from API routes or SSR helpers.</p>
|
||||
<pre data-language="ts"><code>import { Camera, CameraResultType } from "@capacitor/camera";
|
||||
import { mobile } from "@wrnexus/mobile";
|
||||
|
||||
if (mobile.isNative()) {
|
||||
mobile.registerPlugin("Camera", Camera);
|
||||
const photo = await mobile.invoke("Camera", "getPhoto", { resultType: "uri" });
|
||||
mobile.registerPlugin("Camera", Camera);
|
||||
|
||||
export async function takePhoto() {
|
||||
if (!mobile.isNative()) return null;
|
||||
return mobile.invoke("Camera", "getPhoto", {
|
||||
quality: 85,
|
||||
resultType: CameraResultType.Uri,
|
||||
});
|
||||
}</code></pre>
|
||||
<p><code>isNative()</code> is false and <code>platform()</code> is <code>web</code> during SSR. <code>plugin()</code> returns <code>undefined</code> when unavailable; <code>requirePlugin()</code> and <code>invoke()</code> throw an actionable <code>MobileUnavailableError</code>.</p>
|
||||
<p>Import and register Capacitor packages only from browser-owned code. Do not import them in server routes, SSR helpers, or other Bun-only modules.</p></section><section id="api" class="prose api"><h2>Complete TypeScript API</h2><p>This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.</p><pre data-language="typescript"><code>export { native } from '@wrnexus/native';
|
||||
<h4 id="provide-a-browser-fallback">Provide a browser fallback</h4>
|
||||
<p><code>whenNative</code> runs the first callback only in a Capacitor WebView and can return a web/SSR-safe fallback everywhere else.</p>
|
||||
<pre data-language="ts"><code>import { Haptics, ImpactStyle } from "@capacitor/haptics";
|
||||
import { mobile } from "@wrnexus/mobile";
|
||||
|
||||
mobile.registerPlugin("Haptics", Haptics);
|
||||
|
||||
export const confirmAction = () =>
|
||||
mobile.whenNative(
|
||||
() => mobile.invoke("Haptics", "impact", { style: ImpactStyle.Medium }),
|
||||
() => navigator.vibrate?.(30),
|
||||
);</code></pre>
|
||||
<h4 id="read-an-optional-plugin-without-throwing">Read an optional plugin without throwing</h4>
|
||||
<pre data-language="ts"><code>import type { NetworkPlugin } from "@capacitor/network";
|
||||
import { mobile } from "@wrnexus/mobile";
|
||||
|
||||
const network = mobile.plugin<NetworkPlugin>("Network");
|
||||
const status = network ? await network.getStatus() : { connected: true, connectionType: "unknown" };</code></pre>
|
||||
<h3 id="api">API</h3>
|
||||
<ul>
|
||||
<li><code>registerPlugin(name, instance)</code> registers a browser-imported plugin.</li>
|
||||
<li><code>plugin(name)</code> returns a plugin or <code>undefined</code>; <code>requirePlugin(name)</code> throws when absent.</li>
|
||||
<li><code>invoke(plugin, method, options?)</code> calls a registered method and returns its result.</li>
|
||||
<li><code>whenNative(native, fallback?)</code> selects native behavior without breaking SSR.</li>
|
||||
<li><code>isNative()</code> and <code>platform()</code> report the current Capacitor environment.</li>
|
||||
</ul>
|
||||
<p>Unavailable required plugins throw <code>MobileUnavailableError</code> with an actionable message.</p>
|
||||
<h3 id="requirements-notes">Requirements / Notes</h3>
|
||||
<ul>
|
||||
<li>Capacitor plugin imports must remain in browser-owned modules.</li>
|
||||
<li><code>@wrnexus/mobile</code> re-exports <code>native</code> from <code>@wrnexus/native</code> for applications that</li>
|
||||
<p>prefer the higher-level cross-platform capability API.</p>
|
||||
</ul></section><section id="api" class="prose api"><h2>Complete TypeScript API</h2><p>This declaration comes from the exact installed package and lists its exported functions, classes, interfaces, and types.</p><pre data-language="typescript"><code>export { native } from '@wrnexus/native';
|
||||
|
||||
/** @wrnexus/mobile — SSR-safe access to Capacitor's native bridge. */
|
||||
|
||||
@@ -63,16 +105,34 @@ declare const mobile: {
|
||||
};
|
||||
|
||||
export { type CapacitorBridge, type MobilePlatform, MobileUnavailableError, invoke, isNative, mobile, platform, plugin, registerPlugin, requirePlugin, whenNative };
|
||||
</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>wrnexus mobile add @capacitor/camera</code></pre></article><article class="example-card"><h3>Example 2</h3><pre data-language="ts"><code>import { Camera } from "@capacitor/camera";
|
||||
</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>Register and invoke a Capacitor plugin</h3><pre data-language="ts"><code>import { Camera, CameraResultType } from "@capacitor/camera";
|
||||
import { mobile } from "@wrnexus/mobile";
|
||||
|
||||
if (mobile.isNative()) {
|
||||
mobile.registerPlugin("Camera", Camera);
|
||||
const photo = await mobile.invoke("Camera", "getPhoto", { resultType: "uri" });
|
||||
}</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-2" href="#api">Complete API</a><a class="toc-level-2" href="#examples">Examples</a></nav></aside>
|
||||
mobile.registerPlugin("Camera", Camera);
|
||||
|
||||
export async function takePhoto() {
|
||||
if (!mobile.isNative()) return null;
|
||||
return mobile.invoke("Camera", "getPhoto", {
|
||||
quality: 85,
|
||||
resultType: CameraResultType.Uri,
|
||||
});
|
||||
}</code></pre></article><article class="example-card"><h3>Provide a browser fallback</h3><pre data-language="ts"><code>import { Haptics, ImpactStyle } from "@capacitor/haptics";
|
||||
import { mobile } from "@wrnexus/mobile";
|
||||
|
||||
mobile.registerPlugin("Haptics", Haptics);
|
||||
|
||||
export const confirmAction = () =>
|
||||
mobile.whenNative(
|
||||
() => mobile.invoke("Haptics", "impact", { style: ImpactStyle.Medium }),
|
||||
() => navigator.vibrate?.(30),
|
||||
);</code></pre></article><article class="example-card"><h3>Read an optional plugin without throwing</h3><pre data-language="ts"><code>import type { NetworkPlugin } from "@capacitor/network";
|
||||
import { mobile } from "@wrnexus/mobile";
|
||||
|
||||
const network = mobile.plugin<NetworkPlugin>("Network");
|
||||
const status = network ? await network.getStatus() : { connected: true, connectionType: "unknown" };</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="#usage">Usage</a><a class="toc-level-4" href="#register-and-invoke-a-capacitor-plugin">Register and invoke a Capacitor plugin</a><a class="toc-level-4" href="#provide-a-browser-fallback">Provide a browser fallback</a><a class="toc-level-4" href="#read-an-optional-plugin-without-throwing">Read an optional plugin without throwing</a><a class="toc-level-3" href="#api">API</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>
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user