This is a high-level summary of the SigPro core API. For detailed guides and edge cases, please refer to the specific documentation for each module.
$( ) The $ function is a polymorphic constructor. It creates Signals (state) or Computed Effects (logic) based on the input type.
| Usage | Input Type | Returns | Description |
|---|---|---|---|
| Signal | any | Function | A getter/setter for reactive state. |
| Computed | Function | Function | A read-only signal that auto-updates when its dependencies change. |
Example:
const $count = $(0); // Signal
const $double = $(() => $count() * 2); // Computed$.html SigPro uses a hyperscript-style engine to create live DOM nodes.
| Argument | Type | Required | Description |
|---|---|---|---|
| tag | string | Yes | Standard HTML tag (e.g., 'div', 'button'). |
| props | Object | No | Attributes (id), Events (onclick), or Reactive Props ($value). |
| content | any | No | String, Node, Array, or Reactive Function. |
Example:
$.html('button', { onclick: () => alert('Hi!') }, 'Click Me');To keep your code clean, SigPro automatically exposes common HTML tags to the global scope.
| Category | Available Tags |
|---|---|
| Layout | div, section, main, nav, header, footer, span |
| Typography | h1, h2, h3, p, label, a, li, ul, ol |
| Forms | input, button, form, select, option |
| Media | img, video, audio, canvas |
Example:
// No imports needed!
div([
h1("Title"),
button("Ok")
]);Methods to initialize your application and extend the engine.
| Method | Signature | Description |
|---|---|---|
$.mount | (node, target) | Wipes the target (default: body) and renders the component. |
$.plugin | (source) | Registers a function or loads external .js scripts as plugins. |
Example:
$.plugin([UI, Router]);
$.mount(App, '#root');| Feature | Syntax | Description |
|---|---|---|
| Text Binding | p(["Value: ", $sig]) | Updates text content automatically. |
| Attributes | div({ id: $sig }) | Static attribute assignment. |
| Reactive Attr | div({ $class: $sig }) | Attribute updates when $sig changes. |
| Two-way Binding | input({ $value: $sig }) | Syncs input value and signal automatically. |
| Conditional | div(() => $sig() > 0 ? "Yes" : "No") | Re-renders only the content when the condition changes. |
| Feature | SigPro Approach | Benefit |
|---|---|---|
| Update Logic | Fine-grained (Surgical) | Blazing fast updates. |
| DOM | Native Nodes | Zero abstraction cost. |
| Syntax | Pure JavaScript | No build-tool lock-in. |
| Footprint | Modular | Load only what you use. |