This commit is contained in:
@@ -62,8 +62,7 @@ Create reactive, persistent components with a syntax that feels like Vanilla JS,
|
|||||||
```
|
```
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
import { sigpro } from "sigpro";
|
import "sigpro";
|
||||||
sigpro(); // All functions and tags are available in window
|
|
||||||
|
|
||||||
const Counter = () => {
|
const Counter = () => {
|
||||||
// Simple signal
|
// Simple signal
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
SigPro leverages the native power and efficiency of **signals** to create robust global stores with **zero complexity**. While other frameworks force you into heavy libraries and rigid boilerplate (Redux, Pinia, or Svelte stores), SigPro treats “the store” as a simple architectural choice: **defining a signal outside of a component.**
|
SigPro leverages the native power and efficiency of **signals** to create robust global stores with **zero complexity**. While other frameworks force you into heavy libraries and rigid boilerplate (Redux, Pinia, or Svelte stores), SigPro treats “the store” as a simple architectural choice: **defining a signal outside of a component.**
|
||||||
|
|
||||||
> **Availability:** `$` (and other core functions) are exported from the SigPro module. In **ESM** you must import them (`import { $ } from 'sigpro'`) or inject all globals via `sigpro()`. In the **IIFE** classic script, `$` is automatically available on `window`. The examples below assume `$` is already in scope (via import or global).
|
> **Availability:** `$` (and other core functions) are exported from the SigPro module. In **ESM** you must import them (`import { $ } from 'sigpro'`). In the **IIFE** classic script, `$` is automatically available on `window`. The examples below assume `$` is already in scope (via import or global).
|
||||||
|
|
||||||
## Modular Organization (Zero Constraints)
|
## Modular Organization (Zero Constraints)
|
||||||
|
|
||||||
@@ -111,9 +111,8 @@ export const filteredTodos = $(() => {
|
|||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// components/TodoApp.js
|
// components/TodoApp.js
|
||||||
import { sigpro } from 'sigpro';
|
import 'sigpro';
|
||||||
import { todos, filter, addTodo, toggleTodo, filteredTodos } from "../store/todos.js";
|
import { todos, filter, addTodo, toggleTodo, filteredTodos } from "../store/todos.js";
|
||||||
sigpro(); // tags helpers available in global also core functions
|
|
||||||
|
|
||||||
const TodoApp = () =>
|
const TodoApp = () =>
|
||||||
div({ class: "todo-app" }, [
|
div({ class: "todo-app" }, [
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
The `h` function is the **core DOM builder** of SigPro. It creates DOM elements from a tag name, props, and children. While the global tag helpers (`div()`, `button()`, etc.) are built on top of `h`, you may need `h` directly for dynamic tag names or when you prefer an explicit function style.
|
The `h` function is the **core DOM builder** of SigPro. It creates DOM elements from a tag name, props, and children. While the global tag helpers (`div()`, `button()`, etc.) are built on top of `h`, you may need `h` directly for dynamic tag names or when you prefer an explicit function style.
|
||||||
|
|
||||||
> **Availability:** `h` and all tag helpers (`div`, `button`, etc.) are exported from the SigPro module. In **ESM** you must import them (`import { h, div, button } from 'sigpro'`) or inject all globals via `sigpro()`. In the **IIFE** classic script, `h` and all tag helpers are automatically available on `window`. The examples below assume the functions are already in scope.
|
> **Availability:** `h` and all tag helpers (`div`, `button`, etc.) are exported from the SigPro module. In **ESM** you must import them (`import { h, div, button } from 'sigpro'`). In the **IIFE** classic script, `h` and all tag helpers are automatically available on `window`. The examples below assume the functions are already in scope.
|
||||||
|
|
||||||
## Function Signature
|
## Function Signature
|
||||||
|
|
||||||
@@ -131,15 +131,14 @@ h('svg', { width: 100, height: 100 }, [
|
|||||||
| **Availability** | Import or global | Import or global (same) |
|
| **Availability** | Import or global | Import or global (same) |
|
||||||
| **Performance** | Identical | Identical (helpers call `h` internally) |
|
| **Performance** | Identical | Identical (helpers call `h` internally) |
|
||||||
|
|
||||||
> **Recommendation:** Use tag helpers (`div()`, `button()`, etc.) for most cases – they are shorter and more readable. Use `h` directly only when the tag name is dynamic (e.g., `h(props.tag, ...)`). Remember that in ESM you need to import the helpers or call `sigpro()` to make them global.
|
> **Recommendation:** Use tag helpers (`div()`, `button()`, etc.) for most cases – they are shorter and more readable. Use `h` directly only when the tag name is dynamic (e.g., `h(props.tag, ...)`).
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Complete Example
|
## Complete Example
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
import { sigpro } from 'sigpro';
|
import 'sigpro';
|
||||||
sigpro(); // tags helpers available in global also core functions
|
|
||||||
|
|
||||||
const dynamicTag = $('h1');
|
const dynamicTag = $('h1');
|
||||||
|
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ mount(component: Function | Node, target: string | HTMLElement): RuntimeObject
|
|||||||
- `container`: The actual DOM element created by the renderer.
|
- `container`: The actual DOM element created by the renderer.
|
||||||
- `destroy()`: A method to completely unmount and clean up the application.
|
- `destroy()`: A method to completely unmount and clean up the application.
|
||||||
|
|
||||||
> **Availability:** `mount` is exported from the SigPro module. In **ESM** you must import it (`import { mount } from 'sigpro'`) or inject all globals via `sigpro()`. In the **IIFE** classic script, it is automatically available on `window`. The examples below assume the function is already in scope.
|
> **Availability:** `mount` is exported from the SigPro module. In **ESM** you must import it (`import { mount } from 'sigpro'`). In the **IIFE** classic script, it is automatically available on `window`. The examples below assume the function is already in scope.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -119,8 +119,8 @@ When `destroy()` is called (or when a new mount replaces an old one), everything
|
|||||||
## Complete Example
|
## Complete Example
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
import { sigpro } from 'sigpro';
|
import 'sigpro';
|
||||||
sigpro(); // tags helpers available in global also core functions
|
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
const count = $(0);
|
const count = $(0);
|
||||||
|
|||||||
@@ -100,8 +100,7 @@ h('div', {}, [
|
|||||||
Tag helpers are **not exported individually** from the core. To use them globally without the `h(...)` wrapper, activate the side‑effect module:
|
Tag helpers are **not exported individually** from the core. To use them globally without the `h(...)` wrapper, activate the side‑effect module:
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
import { sigpro } from "sigpro"
|
import "sigpro"
|
||||||
sigpro(); // now window.div, window.span, etc. are available
|
|
||||||
|
|
||||||
// You can now write:
|
// You can now write:
|
||||||
div({ class: 'container' }, [
|
div({ class: 'container' }, [
|
||||||
@@ -225,8 +224,7 @@ You never need to manually clean up – just write reactive code.
|
|||||||
## Full Example – Counter with Persistence
|
## Full Example – Counter with Persistence
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
import { sigpro } from 'sigpro';
|
import 'sigpro';
|
||||||
sigpro(); // All in global window
|
|
||||||
|
|
||||||
const count = $(0, 'counter') // persists in localStorage
|
const count = $(0, 'counter') // persists in localStorage
|
||||||
|
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ router(routes: Route[]): HTMLElement
|
|||||||
|
|
||||||
**Returns:** A `div` element (with class `"router-hook"`) that acts as the router outlet. The router automatically destroys the previous view and mounts the matched component when the hash changes.
|
**Returns:** A `div` element (with class `"router-hook"`) that acts as the router outlet. The router automatically destroys the previous view and mounts the matched component when the hash changes.
|
||||||
|
|
||||||
> **Availability:** `router` and its helper methods (`router.to`, `router.back`, `router.path`, `router.params`) are exported from the SigPro module. In **ESM** you must import them (`import { router } from 'sigpro'`) or inject all globals via `sigpro()`. In the **IIFE** classic script, they are automatically available on `window`. The examples below assume the functions are already in scope.
|
> **Availability:** `router` and its helper methods (`router.to`, `router.back`, `router.path`, `router.params`) are exported from the SigPro module. In **ESM** you must import them (`import { router } from 'sigpro'`). In the **IIFE** classic script, they are automatically available on `window`. The examples below assume the functions are already in scope.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -152,8 +152,7 @@ If you want the router outlet to have no layout impact, you can set `display: co
|
|||||||
## Complete Example
|
## Complete Example
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
import { sigpro } from 'sigpro';
|
import 'sigpro';
|
||||||
sigpro(); // tags helpers available in global also core functions
|
|
||||||
|
|
||||||
const Home = () => div("Welcome home");
|
const Home = () => div("Welcome home");
|
||||||
const About = () => div("About us");
|
const About = () => div("About us");
|
||||||
|
|||||||
@@ -32,8 +32,7 @@ When you use the **IIFE bundle** (`sigpro.js` or `sigpro.min.js`) with a traditi
|
|||||||
When you import the **ES module** (`import { ... } from 'sigpro'`), the core **does not** add helpers to `window` by default. To enable global tags, import the dedicated side‑effect module:
|
When you import the **ES module** (`import { ... } from 'sigpro'`), the core **does not** add helpers to `window` by default. To enable global tags, import the dedicated side‑effect module:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { sigpro } from 'sigpro';
|
import 'sigpro';
|
||||||
sigpro(); // tags helpers available in global also core functions
|
|
||||||
|
|
||||||
// Now you can use helpers globally
|
// Now you can use helpers globally
|
||||||
const App = () => div({ class: "app" }, "Ready!");
|
const App = () => div({ class: "app" }, "Ready!");
|
||||||
@@ -193,8 +192,7 @@ const Timer = () => {
|
|||||||
### ESM (modern projects)
|
### ESM (modern projects)
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
import { sigpro } from 'sigpro';
|
import 'sigpro';
|
||||||
sigpro(); // tags helpers available in global also core functions
|
|
||||||
|
|
||||||
const nameSignal = $('');
|
const nameSignal = $('');
|
||||||
|
|
||||||
|
|||||||
@@ -20,7 +20,7 @@ watch(deps: Signal[], callback: (values: any[]) => void): StopFunction
|
|||||||
|
|
||||||
**Returns:** A `StopFunction` that, when called, destroys the watcher and releases memory.
|
**Returns:** A `StopFunction` that, when called, destroys the watcher and releases memory.
|
||||||
|
|
||||||
> **Availability:** `watch` is exported from the SigPro module. In **ESM** you must import it (`import { watch } from 'sigpro'`) or inject all globals via `sigpro()`. In the **IIFE** classic script, it is automatically available on `window`. The examples below assume the function is already in scope.
|
> **Availability:** `watch` is exported from the SigPro module. In **ESM** you must import it (`import { watch } from 'sigpro'`). In the **IIFE** classic script, it is automatically available on `window`. The examples below assume the function is already in scope.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
@@ -20,7 +20,7 @@ when(
|
|||||||
|
|
||||||
**Returns:** A `div` with `style="display:contents"` that acts as an anchor for the dynamic content. This element is part of the DOM and will be replaced/updated automatically.
|
**Returns:** A `div` with `style="display:contents"` that acts as an anchor for the dynamic content. This element is part of the DOM and will be replaced/updated automatically.
|
||||||
|
|
||||||
> **Availability:** `when` is exported from the SigPro module. In **ESM** you must import it (`import { when } from 'sigpro'`) or inject all globals via `sigpro()`. In the **IIFE** classic script, it is automatically available on `window`. The examples below assume the function is already in scope.
|
> **Availability:** `when` is exported from the SigPro module. In **ESM** you must import it (`import { when } from 'sigpro'`). In the **IIFE** classic script, it is automatically available on `window`. The examples below assume the function is already in scope.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
@@ -49,8 +49,7 @@ bun add sigpro
|
|||||||
```html
|
```html
|
||||||
<script type="module">
|
<script type="module">
|
||||||
// Import the core
|
// Import the core
|
||||||
import { sigpro, $, h, mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/dist/sigpro.esm.min.js';
|
import { $, h, mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/dist/sigpro.esm.min.js';
|
||||||
sigpro(); // Optional: now div, span, button, etc. become global
|
|
||||||
|
|
||||||
// Option A: use named imports (no globals, recommended)
|
// Option A: use named imports (no globals, recommended)
|
||||||
const count = $(0);
|
const count = $(0);
|
||||||
@@ -92,8 +91,7 @@ SigPro uses **lowercase** Tag Helpers (e.g., `div`, `button`) to keep the syntax
|
|||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// App.js – Use named imports for the core, activate helpers if needed
|
// App.js – Use named imports for the core, activate helpers if needed
|
||||||
import { sigpro, $, mount } from 'sigpro';
|
import { $, mount } from 'sigpro';
|
||||||
sigpro(); // Optional: now div, span, button, etc. become global
|
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
const count = $(0);
|
const count = $(0);
|
||||||
@@ -159,18 +157,12 @@ When you load the **IIFE full bundle** (`sigpro.min.js`) with a traditional `<sc
|
|||||||
### Mode B: ESM (Modern) – Explicit Activation
|
### Mode B: ESM (Modern) – Explicit Activation
|
||||||
When you import the **ESM core** (`import { ... } from 'sigpro'`), **only the reactive core and router are available**. Tags and security are opt‑in:
|
When you import the **ESM core** (`import { ... } from 'sigpro'`), **only the reactive core and router are available**. Tags and security are opt‑in:
|
||||||
|
|
||||||
1. **Named imports** (for the core):
|
**Named imports** (for the core):
|
||||||
```javascript
|
```javascript
|
||||||
import { $, h, mount, router } from 'sigpro';
|
import { $, h, mount, router } from 'sigpro';
|
||||||
```
|
```
|
||||||
No global pollution – perfect for bundlers and large projects.
|
No global pollution – perfect for bundlers and large projects.
|
||||||
|
|
||||||
2. **Activate global helpers** (when you want `div`, `span`, etc. without importing each one):
|
|
||||||
```javascript
|
|
||||||
import { sigpro } from 'sigpro';
|
|
||||||
sigpro(); // side‑effect: injects all tag helpers into window
|
|
||||||
```
|
|
||||||
|
|
||||||
### Why two modes?
|
### Why two modes?
|
||||||
- **Legacy / no‑build**: Use the IIFE full script and get everything automatically.
|
- **Legacy / no‑build**: Use the IIFE full script and get everything automatically.
|
||||||
- **Modern ESM**: Keep your global namespace clean, only activate helpers/security when needed, and benefit from tree‑shaking.
|
- **Modern ESM**: Keep your global namespace clean, only activate helpers/security when needed, and benefit from tree‑shaking.
|
||||||
|
|||||||
Reference in New Issue
Block a user