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

This commit is contained in:
2026-04-28 18:42:56 +02:00
parent 995f1557bf
commit 2a0ce8c68f
16 changed files with 196 additions and 248 deletions

View File

@@ -1,18 +1,5 @@
# SigPro Complete API Reference
SigPro is a **RealDOM first** reactive microframework. No virtual DOM, no diffing overhead it updates the DOM directly with surgical precision. Builtin 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 sideeffects (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 sideeffect 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
---
## Builtin 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.$
```