import{_ as i,o as a,c as t,ae as e}from"./chunks/framework.C8AWLET_.js";const c=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(`

🔌 Application Mounter: $.mount( ) ​

The $.mount function is the entry point of your reactive world. It bridges the gap between your SigPro logic and the browser's Real DOM by injecting a component into the document.

1. Function Signature ​

typescript
$.mount(node: Function | HTMLElement, target?: string | HTMLElement): RuntimeObject
ParameterTypeDefaultDescription
nodeFunction or NodeRequiredThe component function or DOM element to render.
targetstring or Nodedocument.bodyCSS selector or DOM element where the app will live.

Returns: A Runtime object containing the container and a destroy() method.

2. Common Usage Scenarios ​

A. The "Clean Slate" (SPA Entry) ​

In a modern Single Page Application, you typically want SigPro to manage the entire view. By default, if no target is provided, it mounts to document.body.

javascript
import { $ } from './sigpro.js';
import App from './App.js';

// Mounts your main App component directly to the body
$.mount(App);

B. Targeting a Specific Container ​

If your HTML has a predefined structure, you can tell SigPro exactly where to render by passing a CSS selector or a direct reference.

html
<div id="sidebar"></div>
<main id="app-root"></main>
javascript
// Mount using a CSS selector
$.mount(MyComponent, '#app-root');

// Mount using a direct DOM reference
const sidebar = document.querySelector('#sidebar');
$.mount(SidebarComponent, sidebar);

C. Creating "Reactive Islands" ​

SigPro is excellent for "sprinkling" reactivity onto legacy or static pages. You can inject small reactive widgets into any part of an existing HTML layout.

javascript
// A small reactive widget
const CounterWidget = () => {
  const count = $(0);
  return Button({ onclick: () => count(c => c + 1) }, [
    "Clicks: ", count
  ]);
};

// Mount it into a specific div in your static HTML
$.mount(CounterWidget, '#counter-container');

3. How it Works (Lifecycle) ​

When $.mount is executed, it performs these critical steps:

  1. Resolution & Wrapping: If you pass a Function, SigPro wraps it in a $.view(). This starts tracking all internal signals and effects.
  2. Target Clearance: It uses target.replaceChildren(). This efficiently wipes any existing HTML or "zombie" nodes inside the target before mounting.
  3. Injection: The component's container is appended to the target.
  4. Memory Management: It stores the Runtime instance associated with that DOM element. If you call $.mount again on the same target, SigPro automatically destroys the previous app to prevent memory leaks.

4. Global vs. Local Scope ​

The "Framework" Way (Global) ​

By importing your core in your entry file, SigPro automatically initializes global Tag Constructors (Div, Span, H1, etc.). This allows for a clean, declarative DX across your entire project.

javascript
// main.js
import './sigpro.js'; 

// Now any file can simply do:
$.mount(() => H1("Global SigPro App"));

The "Library" Way (Local) ​

If you prefer to avoid global variables, you can use the low-level $.html factory to create elements locally.

javascript
import { $ } from './sigpro.js';

const myNode = $.html('div', { class: 'widget' }, 'Local Instance');
$.mount(myNode, '#widget-target');

5. Summary Cheat Sheet ​

GoalCode Pattern
Mount to body$.mount(App)
Mount to ID$.mount(App, '#root')
Mount to Element$.mount(App, myElement)
Mount raw Node$.mount(Div("Hello"), '#id')
Unmount/Destroyconst app = $.mount(App); app.destroy();
`,33)])])}const g=i(n,[["render",l]]);export{c as __pageData,g as default};