SigPro

Appearance

Application Mounter: $.mount ​

The $.mount function is the entry point of your reactive world. It takes a SigPro component (or a plain DOM node) and injects it into the real document.

1. Syntax: $.mount(node, [target]) ​

ParameterTypeDefaultDescription
nodeHTMLElement or FunctionRequiredThe component or element to render.
targetstring or HTMLElementdocument.bodyWhere to mount the app (CSS selector or Element).

2. Usage Scenarios ​

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

In a modern app (like our main.js example), you usually want to control the entire page. By default, $.mount clears the target's existing HTML before mounting.

javascript
// src/main.js
import { $ } from 'SigPro';
import App from './App.js';

$.mount(App); // Mounts to <body> by default

B. Targeting a Specific Container ​

If you have an existing HTML structure and only want SigPro to manage a specific part (like a #root div), pass a CSS selector or a reference.

html
<div id="sidebar"></div>
<div id="app-root"></div>
javascript
// Local mount to a specific ID
$.mount(MyComponent, '#app-root');

// Or using a direct DOM reference
const sidebar = document.getElementById('sidebar');
$.mount(SidebarComponent, sidebar);

3. Mounting with Pure HTML ​

One of SigPro's strengths is that it works perfectly alongside "Old School" HTML. You can create a reactive "island" inside a static page.

javascript
// A small reactive widget in a static .js file
const CounterWidget = () => {
  const $c = $(0);
  return button({ onclick: () => $c(v => v + 1) }, [
    "Clicks: ", $c
  ]);
};

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

4. How it Works (The "Wipe" Logic) ​

When $.mount is called, it performs two critical steps:

  1. Clearance: It sets target.innerHTML = ''. This ensures no "zombie" HTML from previous renders or static placeholders interferes with your app.
  2. Injection: It appends your component. If you passed a Function, it executes it first to get the DOM node.

5. Global vs. Local Scope ​

Global (The "Framework" Way) ​

In a standard Vite/ESM project, you initialize SigPro globally in main.js. This makes the $ and the tag helpers (div, button, etc.) available everywhere in your project.

javascript
// main.js - Global Initialization
import 'SigPro'; 

// Now any other file can just use:
$.mount(() => h1("Global App"));

Local (The "Library" Way) ​

If you are worried about polluting the global window object, you can import and use SigPro locally within a specific module.

javascript
// widget.js - Local usage
import { $ } from 'SigPro';

const myNode = $.html('div', 'Local Widget');
$.mount(myNode, '#widget-target');

Summary Cheat Sheet ​

GoalCode
Mount to body$.mount(App)
Mount to ID$.mount(App, '#id')
Mount to Element$.mount(App, myElement)
Reactive Widget$.mount(() => div("Hi"), '#widget')