From d46c5ca3af9c3b4ab84c6a83db0221808d6f6d0d Mon Sep 17 00:00:00 2001 From: natxocc Date: Tue, 28 Apr 2026 19:05:23 +0200 Subject: [PATCH] update Docs --- Readme.md | 3 +-- docs/api/global.md | 5 ++--- docs/api/h.md | 7 +++---- docs/api/mount.md | 6 +++--- docs/api/quick.md | 6 ++---- docs/api/router.md | 5 ++--- docs/api/tags.md | 6 ++---- docs/api/watch.md | 2 +- docs/api/when.md | 2 +- docs/install.md | 14 +++----------- 10 files changed, 20 insertions(+), 36 deletions(-) diff --git a/Readme.md b/Readme.md index 270d39d..44effc4 100644 --- a/Readme.md +++ b/Readme.md @@ -62,8 +62,7 @@ Create reactive, persistent components with a syntax that feels like Vanilla JS, ``` ```javascript -import { sigpro } from "sigpro"; -sigpro(); // All functions and tags are available in window +import "sigpro"; const Counter = () => { // Simple signal diff --git a/docs/api/global.md b/docs/api/global.md index 3aedad2..cd1ec5b 100644 --- a/docs/api/global.md +++ b/docs/api/global.md @@ -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.** -> **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) @@ -111,9 +111,8 @@ export const filteredTodos = $(() => { ```javascript // components/TodoApp.js -import { sigpro } from 'sigpro'; +import 'sigpro'; import { todos, filter, addTodo, toggleTodo, filteredTodos } from "../store/todos.js"; -sigpro(); // tags helpers available in global also core functions const TodoApp = () => div({ class: "todo-app" }, [ diff --git a/docs/api/h.md b/docs/api/h.md index 2c48aeb..deff0a5 100644 --- a/docs/api/h.md +++ b/docs/api/h.md @@ -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. -> **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 @@ -131,15 +131,14 @@ h('svg', { width: 100, height: 100 }, [ | **Availability** | Import or global | Import or global (same) | | **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 ```javascript -import { sigpro } from 'sigpro'; -sigpro(); // tags helpers available in global also core functions +import 'sigpro'; const dynamicTag = $('h1'); diff --git a/docs/api/mount.md b/docs/api/mount.md index 77acb01..2970b78 100644 --- a/docs/api/mount.md +++ b/docs/api/mount.md @@ -17,7 +17,7 @@ mount(component: Function | Node, target: string | HTMLElement): RuntimeObject - `container`: The actual DOM element created by the renderer. - `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 ```javascript -import { sigpro } from 'sigpro'; -sigpro(); // tags helpers available in global also core functions +import 'sigpro'; + const App = () => { const count = $(0); diff --git a/docs/api/quick.md b/docs/api/quick.md index 89e59cf..d62f6a3 100644 --- a/docs/api/quick.md +++ b/docs/api/quick.md @@ -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: ```javascript -import { sigpro } from "sigpro" -sigpro(); // now window.div, window.span, etc. are available +import "sigpro" // You can now write: div({ class: 'container' }, [ @@ -225,8 +224,7 @@ You never need to manually clean up – just write reactive code. ## Full Example – Counter with Persistence ```javascript -import { sigpro } from 'sigpro'; -sigpro(); // All in global window +import 'sigpro'; const count = $(0, 'counter') // persists in localStorage diff --git a/docs/api/router.md b/docs/api/router.md index 5dd2174..a4d3618 100644 --- a/docs/api/router.md +++ b/docs/api/router.md @@ -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. -> **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 ```javascript -import { sigpro } from 'sigpro'; -sigpro(); // tags helpers available in global also core functions +import 'sigpro'; const Home = () => div("Welcome home"); const About = () => div("About us"); diff --git a/docs/api/tags.md b/docs/api/tags.md index 0bcf6d8..f6f2d8d 100644 --- a/docs/api/tags.md +++ b/docs/api/tags.md @@ -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: ```js -import { sigpro } from 'sigpro'; -sigpro(); // tags helpers available in global also core functions +import 'sigpro'; // Now you can use helpers globally const App = () => div({ class: "app" }, "Ready!"); @@ -193,8 +192,7 @@ const Timer = () => { ### ESM (modern projects) ```javascript -import { sigpro } from 'sigpro'; -sigpro(); // tags helpers available in global also core functions +import 'sigpro'; const nameSignal = $(''); diff --git a/docs/api/watch.md b/docs/api/watch.md index b92ec83..b09d59b 100644 --- a/docs/api/watch.md +++ b/docs/api/watch.md @@ -20,7 +20,7 @@ watch(deps: Signal[], callback: (values: any[]) => void): StopFunction **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. --- diff --git a/docs/api/when.md b/docs/api/when.md index aa6c0b4..3dee486 100644 --- a/docs/api/when.md +++ b/docs/api/when.md @@ -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. -> **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. --- diff --git a/docs/install.md b/docs/install.md index 0d4aa45..05e0c36 100644 --- a/docs/install.md +++ b/docs/install.md @@ -49,8 +49,7 @@ bun add sigpro ```html