import{_ as s,o as i,c as a,ae as e}from"./chunks/framework.C8AWLET_.js";const k=JSON.parse('{"title":"🔌 Application Mounter: $mount( )","description":"","frontmatter":{},"headers":[],"relativePath":"api/mount.md","filePath":"api/mount.md"}'),n={name:"api/mount.md"};function l(o,t,h,r,p,d){return i(),a("div",null,[...t[0]||(t[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 and initializing its reactive lifecycle.

🛠️ 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 to wipe all reactivity and DOM nodes.

📖 Common Usage Scenarios ​

1. The SPA Entry Point ​

In a Single Page Application, you typically mount your main component to the body or a root div. SigPro manages the entire view from that point.

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

// Mounts your main App component
$mount(App, '#app-root');

2. Reactive "Islands" ​

SigPro is perfect for adding reactivity to static pages. You can mount small widgets into specific parts of an existing HTML layout.

javascript
const Counter = () => {
  const count = $(0);
  return Button({ onclick: () => count(c => c + 1) }, [
    "Clicks: ", count
  ]);
};

// Mount only the counter into a specific sidebar div
$mount(Counter, '#sidebar-widget');

🔄 How it Works (Lifecycle & Cleanup) ​

When $mount is executed, it performs these critical steps to ensure a leak-free environment:

  1. Duplicate Detection: If you call $mount on a target that already has a SigPro instance, it automatically calls .destroy() on the previous instance. This prevents "Zombie Effects" from stacking in memory.
  2. Internal Scoping: It executes the component function inside an internal Reactive Owner. This captures every $watch and event listener created during the render.
  3. Target Injection: It clears the target using replaceChildren() and appends the new component.
  4. Runtime Creation: It returns a control object:

🛑 Manual Unmounting ​

While SigPro handles most cleanups automatically (via $if, $for, and $router), you can manually destroy any mounted instance. This is vital for imperatively managed UI like Toasts or Modals.

javascript
const instance = $mount(MyToast, '#toast-container');

// Later, to remove the toast and kill its reactivity:
instance.destroy();

💡 Summary Cheat Sheet ​

GoalCode Pattern
Mount to body$mount(App)
Mount to CSS Selector$mount(App, '#root')
Mount to DOM Node$mount(App, myElement)
Clean & Re-mountCalling $mount again on the same target
Total Cleanupconst app = $mount(App); app.destroy();
`,25)])])}const g=s(n,[["render",l]]);export{k as __pageData,g as default};