Update docs

2026-04-25 20:28:38 +02:00
parent de4b09324d
commit f4654a938a
20 changed files with 2120 additions and 1202 deletions
--- a/docs/install.md
+++ b/docs/install.md
@@ -1,4 +1,4 @@
-# Installation & Setup
+# Installation & Setup (SigPro 1.2.18)

 SigPro is designed to be drop-in ready. Whether you are building a complex application with a bundler or a simple reactive widget in a single HTML file, SigPro scales with your needs.

@@ -47,36 +47,20 @@ bun add sigpro

 ```html
 <script type="module">
-  // Import the core and UI components
-  import SigPro from "[https://cdn.jsdelivr.net/npm/sigpro@latest/+esm](https://cdn.jsdelivr.net/npm/sigpro@latest/+esm)";
-  import { UI } from "[https://cdn.jsdelivr.net/npm/sigpro@latest/ui/+esm](https://cdn.jsdelivr.net/npm/sigpro@latest/ui/+esm)";
-
-  // Initialize UI components globally
-  UI($);
+  // Import the core – it auto-installs itself globally
+  import 'https://cdn.jsdelivr.net/npm/sigpro@1.2.18/+esm';
+  // Now $, $$, watch, h, when, each, fx, router, req, mount, batch and all lowercase tag helpers (div, button, etc.) are available
 </script>
 ```

  </div>
 </div>

-  <input type="radio" name="install_method" class="tab border-base-300 whitespace-nowrap" aria-label="CDN (ESM)" />
-  <div class="tab-content bg-base-100 border-base-300 rounded-box p-6">
-<pre class="bg-base-200 p-4 rounded-lg"><code class="language-html">&lt;script type="module"&gt;
-  // Import the core and UI components
-  import SigPro from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
-  import { UI } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/ui/+esm';
-  
-  // Initialize UI components globally
-  UI($);
-&lt;/script&gt;</code></pre>
-  </div>
-</div>
-
 ---

 ## 2. Quick Start Examples

-SigPro uses **PascalCase** for Tag Helpers (e.g., `Div`, `Button`) to provide a clean, component-like syntax without needing JSX.
+SigPro uses **lowercase** Tag Helpers (e.g., `div`, `button`) to keep the syntax close to raw HTML, while still being pure JavaScript functions.

 <div class="tabs tabs-box w-full mt-8 mb-12 bg-base-200/50 p-2 rounded-xl border border-base-300">
  <input type="radio" name="quick_start_tabs" class="tab !rounded-lg" aria-label="Mainstream (Bundlers)" checked />
@@ -84,29 +68,29 @@ SigPro uses **PascalCase** for Tag Helpers (e.g., `Div`, `Button`) to provide a

 ```javascript
 // File: App.js
-import "sigpro";
+import 'sigpro';  // auto-installs globals

 export const App = () => {
-  const $count = $(0);
+  const count = $(0);

-  // Tag Helpers like Div, H1, Button are available globally
-  return Div({ class: "card p-4" }, [
-    H1(["Count is: ", $count]),
-    Button(
+  // Tag helpers like div, h1, button are available globally (lowercase)
+  return div({ class: "card p-4" }, [
+    h1(() => `Count is: ${count()}`),
+    button(
      {
        class: "btn btn-primary",
-        onclick: () => $count((c) => c + 1),
+        onclick: () => count(count() + 1),
      },
-      "Increment",
+      "Increment"
    ),
  ]);
 };

 // File: main.js
-import "sigpro";
-import { App } from "./App.js";
+import 'sigpro';
+import { App } from './App.js';

-Mount(App, "#app");
+mount(App, '#app');
 ```

  </div>
@@ -121,23 +105,23 @@ Mount(App, "#app");
    <div id="app"></div>

    <script type="module">
-      import SigPro from "https://cdn.jsdelivr.net/npm/sigpro@latest/+esm";
+      import 'https://cdn.jsdelivr.net/npm/sigpro@1.2.18/+esm';

-      const $name = $("Developer");
+      const name = $('Developer');

-      // No need to import Div, Section, H2, Input... they are global!
+      // Lowercase tag helpers: section, h2, input
      const App = () =>
-        Section({ class: "container" }, [
-          H2(["Welcome, ", $name]),
-          Input({
+        section({ class: "container" }, [
+          h2(() => `Welcome, ${name()}`),
+          input({
            type: "text",
            class: "input input-bordered",
-            $value: $name, // Automatic two-way binding
+            value: name,   // ✅ Two-way binding: signal as value + automatic input event
            placeholder: "Type your name...",
          }),
        ]);

-      Mount(App, "#app");
+      mount(App, '#app');
    </script>
  </body>
 </html>
@@ -152,17 +136,16 @@ Mount(App, "#app");

 One of SigPro's core strengths is its **Global API**, which eliminates "Import Hell" while remaining ESM-compatible.

- **The "Zero-Config" Import:** By simply adding `import SigPro from "sigpro"`, the framework automatically "hydrates" the global `window` object.
-  - **Core Functions:** You get immediate access to `$`, `Watch`, `Tag`, `If`, `For`, and `Router` anywhere in your scripts without using the `SigPro.` prefix.
-  - **Auto-Installation:** This happens instantly upon import thanks to its built-in `install()` routine, making it "Plug & Play" for both local projects and CDN usage.
+- **The "Zero-Config" Import:** By simply adding `import 'sigpro'` (or importing from the CDN), the framework automatically "hydrates" the global `window` object.
+  - **Core Functions:** You get immediate access to `$`, `$$`, `watch`, `h`, `when`, `each`, `fx`, `router`, `req`, `mount`, `batch` anywhere in your scripts.
+  - **Auto-Installation:** This happens instantly upon import thanks to its built-in self‑installation, making it "Plug & Play" for both local projects and CDN usage.

- **PascalCase Tag Helpers:** Standard HTML tags are pre-registered as global functions (`Div`, `Span`, `Button`, `Section`, etc.).
-  - **Clean UI Syntax:** This allows you to write UI structures that look like HTML but are pure, reactive JavaScript: `Div({ class: "card" }, [ H1("Title") ])`.
+- **Lowercase Tag Helpers:** All standard HTML tags are pre-registered as global functions (`div`, `span`, `button`, `section`, `input`, `h1`, `h2`, etc.).
+  - **Clean UI Syntax:** Write UI structures that look almost like HTML but are pure, reactive JavaScript: `div({ class: "card" }, [ h1("Title") ])`.

- **Hybrid Tree Shaking:** \* For **Maximum Speed**, use `import SigPro from "sigpro"`.
-  - For **Maximum Optimization**, you can still use Named Imports: `import { $, Tag } from "sigpro"`. This allows modern bundlers like Vite to prune unused code while keeping your core reactive.
+- **Tree Shaking Friendly:** For maximum optimization, you can still use named imports: `import { $, watch, mount } from 'sigpro'`. Modern bundlers (Vite, esbuild) will prune unused code.

- **Custom Components:** We recommend using **PascalCase** for your own components (e.g., `UserCard()`) to maintain visual consistency with the built-in Tag Helpers and distinguish them from standard logic.
+- **Custom Components:** We recommend using **PascalCase** for your own components (e.g., `UserCard()`) to distinguish them from built-in lowercase tag helpers.

 ---

@@ -179,7 +162,7 @@ SigPro stands out by removing the "Build Step" tax and the "Virtual DOM" overhea

 | Feature            | **SigPro**       | **SolidJS**  | **Svelte**   | **React**   | **Vue**     |
 | :----------------- | :--------------- | :----------- | :----------- | :---------- | :---------- |
-| **Bundle Size**    | **~2KB**         | ~7KB         | ~4KB         | ~40KB+      | ~30KB       |
+| **Bundle Size**    | **~3KB**         | ~7KB         | ~4KB         | ~40KB+      | ~30KB       |
 | **DOM Strategy**   | **Direct DOM**   | Direct DOM   | Compiled DOM | Virtual DOM | Virtual DOM |
 | **Reactivity**     | **Fine-grained** | Fine-grained | Compiled     | Re-renders  | Proxies     |
 | **Build Step**     | **Optional**     | Required     | Required     | Required    | Optional    |
@@ -190,14 +173,16 @@ SigPro stands out by removing the "Build Step" tax and the "Virtual DOM" overhea

 ## 6. Key Advantages

- **Extreme Performance**: No Virtual DOM reconciliation. SigPro updates the specific node or attribute instantly when a Signal changes.
+- **Extreme Performance**: No Virtual DOM reconciliation. SigPro updates the specific node or attribute instantly when a signal changes.
 - **Fine-Grained Reactivity**: State changes only trigger updates where the data is actually used, not on the entire component.
 - **Native Web Standards**: Everything is a standard JS function. No custom template syntax to learn.
 - **Zero Magic**: No hidden compilers. What you write is what runs in the browser.
- **Global by Design**: Tag Helpers and the `$` function are available globally to eliminate "Import Hell" and keep your code clean.
+- **Global by Design**: Tag helpers and core functions are available globally to eliminate "Import Hell" and keep your code clean.
+
+---

 ## 7. Summary

-SigPro isn't just another framework; it's a bridge to the native web. By using standard ES Modules and functional DOM generation, you gain the benefits of a modern library with the weight of a utility script.
+SigPro isn't just another framework; it's a bridge to the native web. By using standard ES Modules and functional DOM generation, you get the benefits of a modern reactive library with the weight of a utility script.

 **Because, in the end... why fight the web when we can embrace it?**