import{_ as i,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"Application Mounter: $.mount","description":"","frontmatter":{},"headers":[],"relativePath":"api/mount.md","filePath":"api/mount.md"}'),n={name:"api/mount.md"};function l(h,s,p,o,r,k){return a(),t("div",null,[...s[0]||(s[0]=[e(`<h1 id="application-mounter-mount" tabindex="-1">Application Mounter: <code>$.mount</code> <a class="header-anchor" href="#application-mounter-mount" aria-label="Permalink to &quot;Application Mounter: \`$.mount\`&quot;">​</a></h1><p>The <code>$.mount</code> function is the entry point of your reactive world. It takes a <strong>SigPro component</strong> (or a plain DOM node) and injects it into the real document.</p><h2 id="_1-syntax-mount-node-target" tabindex="-1">1. Syntax: <code>$.mount(node, [target])</code> <a class="header-anchor" href="#_1-syntax-mount-node-target" aria-label="Permalink to &quot;1. Syntax: \`$.mount(node, [target])\`&quot;">​</a></h2><table tabindex="0"><thead><tr><th style="text-align:left;">Parameter</th><th style="text-align:left;">Type</th><th style="text-align:left;">Default</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>node</strong></td><td style="text-align:left;"><code>HTMLElement</code> or <code>Function</code></td><td style="text-align:left;"><strong>Required</strong></td><td style="text-align:left;">The component or element to render.</td></tr><tr><td style="text-align:left;"><strong>target</strong></td><td style="text-align:left;"><code>string</code> or <code>HTMLElement</code></td><td style="text-align:left;"><code>document.body</code></td><td style="text-align:left;">Where to mount the app (CSS selector or Element).</td></tr></tbody></table><hr><h2 id="_2-usage-scenarios" tabindex="-1">2. Usage Scenarios <a class="header-anchor" href="#_2-usage-scenarios" aria-label="Permalink to &quot;2. Usage Scenarios&quot;">​</a></h2><h3 id="a-the-clean-slate-main-entry" tabindex="-1">A. The &quot;Clean Slate&quot; (Main Entry) <a class="header-anchor" href="#a-the-clean-slate-main-entry" aria-label="Permalink to &quot;A. The &quot;Clean Slate&quot; (Main Entry)&quot;">​</a></h3><p>In a modern app (like our <code>main.js</code> example), you usually want to control the entire page. By default, <code>$.mount</code> clears the target&#39;s existing HTML before mounting.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// src/main.js</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { $ } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;SigPro&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> App </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./App.js&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(App); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Mounts to &lt;body&gt; by default</span></span></code></pre></div><h3 id="b-targeting-a-specific-container" tabindex="-1">B. Targeting a Specific Container <a class="header-anchor" href="#b-targeting-a-specific-container" aria-label="Permalink to &quot;B. Targeting a Specific Container&quot;">​</a></h3><p>If you have an existing HTML structure and only want <strong>SigPro</strong> to manage a specific part (like a <code>#root</code> div), pass a CSS selector or a reference.</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;sidebar&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;app-root&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Local mount to a specific ID</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(MyComponent, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#app-root&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Or using a direct DOM reference</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> sidebar</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getElementById</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;sidebar&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(SidebarComponent, sidebar);</span></span></code></pre></div><hr><h2 id="_3-mounting-with-pure-html" tabindex="-1">3. Mounting with Pure HTML <a class="header-anchor" href="#_3-mounting-with-pure-html" aria-label="Permalink to &quot;3. Mounting with Pure HTML&quot;">​</a></h2><p>One of SigPro&#39;s strengths is that it works perfectly alongside &quot;Old School&quot; HTML. You can create a reactive &quot;island&quot; inside a static page.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// A small reactive widget in a static .js file</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> CounterWidget</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> $c</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  return</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">onclick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> $c</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">v</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> v </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) }, [</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">    &quot;Clicks: &quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, $c</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ]);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Mount it into an existing div in your HTML</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(CounterWidget, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#counter-container&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><hr><h2 id="_4-how-it-works-the-wipe-logic" tabindex="-1">4. How it Works (The &quot;Wipe&quot; Logic) <a class="header-anchor" href="#_4-how-it-works-the-wipe-logic" aria-label="Permalink to &quot;4. How it Works (The &quot;Wipe&quot; Logic)&quot;">​</a></h2><p>When <code>$.mount</code> is called, it performs two critical steps:</p><ol><li><strong>Clearance:</strong> It sets <code>target.innerHTML = &#39;&#39;</code>. This ensures no &quot;zombie&quot; HTML from previous renders or static placeholders interferes with your app.</li><li><strong>Injection:</strong> It appends your component. If you passed a <strong>Function</strong>, it executes it first to get the DOM node.</li></ol><hr><h2 id="_5-global-vs-local-scope" tabindex="-1">5. Global vs. Local Scope <a class="header-anchor" href="#_5-global-vs-local-scope" aria-label="Permalink to &quot;5. Global vs. Local Scope&quot;">​</a></h2><h3 id="global-the-framework-way" tabindex="-1">Global (The &quot;Framework&quot; Way) <a class="header-anchor" href="#global-the-framework-way" aria-label="Permalink to &quot;Global (The &quot;Framework&quot; Way)&quot;">​</a></h3><p>In a standard Vite/ESM project, you initialize SigPro globally in <code>main.js</code>. This makes the <code>$</code> and the tag helpers (<code>div</code>, <code>button</code>, etc.) available everywhere in your project.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// main.js - Global Initialization</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;SigPro&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">; </span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Now any other file can just use:</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Global App&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">));</span></span></code></pre></div><h3 id="local-the-library-way" tabindex="-1">Local (The &quot;Library&quot; Way) <a class="header-anchor" href="#local-the-library-way" aria-label="Permalink to &quot;Local (The &quot;Library&quot; Way)&quot;">​</a></h3><p>If you are worried about polluting the global <code>window</code> object, you can import and use SigPro locally within a specific module.</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// widget.js - Local usage</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { $ } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;SigPro&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> myNode</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> $.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;div&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Local Widget&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">$.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(myNode, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#widget-target&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span></code></pre></div><hr><h3 id="summary-cheat-sheet" tabindex="-1">Summary Cheat Sheet <a class="header-anchor" href="#summary-cheat-sheet" aria-label="Permalink to &quot;Summary Cheat Sheet&quot;">​</a></h3><table tabindex="0"><thead><tr><th style="text-align:left;">Goal</th><th style="text-align:left;">Code</th></tr></thead><tbody><tr><td style="text-align:left;"><strong>Mount to body</strong></td><td style="text-align:left;"><code>$.mount(App)</code></td></tr><tr><td style="text-align:left;"><strong>Mount to ID</strong></td><td style="text-align:left;"><code>$.mount(App, &#39;#id&#39;)</code></td></tr><tr><td style="text-align:left;"><strong>Mount to Element</strong></td><td style="text-align:left;"><code>$.mount(App, myElement)</code></td></tr><tr><td style="text-align:left;"><strong>Reactive Widget</strong></td><td style="text-align:left;"><code>$.mount(() =&gt; div(&quot;Hi&quot;), &#39;#widget&#39;)</code></td></tr></tbody></table>`,32)])])}const c=i(n,[["render",l]]);export{g as __pageData,c as default};
