natxocc/sigpro
1
1
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

Returno to inytegrate Tags in Core
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 4s
Details

Browse Source
This commit is contained in:
Natxo
2026-04-28 18:42:56 +02:00
parent 995f1557bf
commit 2a0ce8c68f
16 changed files with 196 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/api/global.md
View File

@@ -111,8 +111,9 @@ export const filteredTodos = $(() => {
```javascript
// components/TodoApp.js
import { sigpro } from 'sigpro';
import { todos, filter, addTodo, toggleTodo, filteredTodos } from "../store/todos.js";
import "sigpro/tags" // tags helpers available in global
sigpro(); // tags helpers available in global also core functions
const TodoApp = () =>
div({ class: "todo-app" }, [

3
docs/api/h.md
View File

@@ -138,7 +138,8 @@ h('svg', { width: 100, height: 100 }, [
## Complete Example
```javascript
import { $, h, mount } from 'sigpro';
import { sigpro } from 'sigpro';
sigpro(); // tags helpers available in global also core functions
const dynamicTag = $('h1');

4
docs/api/mount.md
View File

@@ -119,8 +119,8 @@ When `destroy()` is called (or when a new mount replaces an old one), everything
## Complete Example
```javascript
import { $, mount, div, h1, button } from 'sigpro';
import "sigpro/tags" // tags helpers available in global
import { sigpro } from 'sigpro';
sigpro(); // tags helpers available in global also core functions
const App = () => {
const count = $(0);

52
docs/api/quick.md
View File

@@ -1,18 +1,5 @@
# SigPro – Complete API Reference
SigPro is a **Real‑DOM first** reactive micro‑framework. No virtual DOM, no diffing overhead – it updates the DOM directly with surgical precision. Built‑in automatic cleanup prevents memory leaks, and the API is designed to be both tiny and powerful.
```javascript
import { $, $$, watch, h, when, each, router, mount, batch } from 'sigpro'
// Optional side‑effects (activate global helpers & security):
import 'sigpro/tags' // → window.div, window.span, etc.
import 'sigpro/xss' // → attribute sanitisation
```
In a classic IIFE script (`<script src="sigpro.min.js">`), **everything** (core, router, tags, XSS, global functions) is available automatically.
---
## Core Reactivity
### `$(value, localStorageKey?)` – Signal & Computed
@@ -113,7 +100,8 @@ 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/tags' // now window.div, window.span, etc. are available
import { sigpro } from "sigpro"
sigpro(); // now window.div, window.span, etc. are available
// You can now write:
div({ class: 'container' }, [
@@ -128,21 +116,6 @@ Available tags: `a`, `abbr`, `article`, `aside`, `audio`, `b`, `blockquote`, `br
---
## Built‑in XSS Shield (Optional)
SigPro includes an optional security layer that sanitises dangerous attributes (`href`, `src`, `formaction`, etc.) and blocks `javascript:` / `data:` / `vbscript:` protocols.
To enable it in ESM environments:
```javascript
import 'sigpro/xss'
```
In the IIFE bundle, the shield is **active by default**.
When the shield is enabled, trying to set `href="javascript:alert(1)"` will log a warning and replace the value with `'#'`.
---
## Flow Control Components
### `when(condition, thenComponent, elseComponent?)`
@@ -252,9 +225,8 @@ You never need to manually clean up – just write reactive code.
## Full Example – Counter with Persistence
```javascript
import { $, watch, mount } from 'sigpro'
import 'sigpro/tags' // ← activate global helpers
import 'sigpro/xss' // ← activate security (optional)
import { sigpro } from 'sigpro';
sigpro(); // All in global window
const count = $(0, 'counter') // persists in localStorage
@@ -268,19 +240,3 @@ const App = () =>
mount(App, '#app')
```
---
## 🔧 Customising the API (Renaming)
You can rename everything in one line:
```javascript
import { $ as signal, watch as effect, h as element, mount as render } from 'sigpro'
```
In the IIFE bundle, the core functions are already available as both `window.$` and `window.SigPro.$`, so you can alias them globally if needed:
```javascript
window.myReactive = $ // or window.SigPro.$
```

4
docs/api/router.md
View File

@@ -152,8 +152,8 @@ If you want the router outlet to have no layout impact, you can set `display: co
## Complete Example
```javascript
import { $, router, mount } from "sigpro";
import "sigpro/tags" // tags helpers available in global
import { sigpro } from 'sigpro';
sigpro(); // tags helpers available in global also core functions
const Home = () => div("Welcome home");
const About = () => div("About us");

43
docs/api/tags.md
View File

@@ -32,21 +32,13 @@ 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/tags'; // ← activates window.div, window.span, etc.
import { sigpro } from 'sigpro';
sigpro(); // tags helpers available in global also core functions
// Now you can use helpers globally
const App = () => div({ class: "app" }, "Ready!");
```
If you also want built‑in **XSS protection**, enable it once:
```js
import 'sigpro/xss'; // ← add security layer
import 'sigpro/tags'; // ← global helpers
```
Both are side‑effect modules, so the order doesn’t matter.
> **Important:** The tag helpers are **not** exported as individual named exports from the core (`sigpro`). They become available as global functions (`window.div`, etc.) after the side‑effect runs.
> If you prefer to avoid globals, you can always use `h('div', ...)` directly—it’s perfectly fine.
@@ -201,12 +193,8 @@ const Timer = () => {
### ESM (modern projects)
```javascript
// Enable global helpers + security
import 'sigpro/tags';
import 'sigpro/xss';
// Import core functions
import { $, mount } from 'sigpro';
import { sigpro } from 'sigpro';
sigpro(); // tags helpers available in global also core functions
const nameSignal = $('');
@@ -240,26 +228,3 @@ mount(App, '#app');
</script>
```
---
## 9. Important Notes
- **Naming:** All tag helpers are **lowercase**.
- **Global availability:**
- **IIFE script** – automatically on `window`.
- **ESM module** – not global by default; use `import 'sigpro/tags'` to activate them.
- **Custom components:** Use **PascalCase** for your own component functions (e.g., `UserCard`) to visually distinguish them from built‑in tags.
---
## 10. Summary
| Feature | Description |
| :--- | :--- |
| **Tag helpers** | Lowercase functions for every HTML element (e.g., `div()`, `button()`). |
| **Activation** | IIFE: automatic. ESM: `import 'sigpro/tags'`. |
| **Reactive attributes** | Pass a function to any attribute to keep it synced. |
| **Two‑way binding** | Assign a signal directly to `value` or `checked` on form elements. |
| **Dynamic children** | Pass a function as a child for live updating content. |
| **Auto‑cleanup** | All effects, events, and children are disposed when the element is removed. |
| **Security** | Optional XSS shield: `import 'sigpro/xss'`. |