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

Improve tags info

Browse Source
This commit is contained in:
natxocc
2026-04-04 19:42:16 +02:00
parent fe5d1946fe
commit e30d7925b5
2 changed files with 74 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
docs/api/quick.md
View File

@@ -2,6 +2,22 @@
SigPro is a high-performance micro-framework that updates the **Real DOM** surgically. No Virtual DOM, no unnecessary re-renders, and built-in **Cleanup** (memory cleanup).
<div class="text-center my-8">
<div class="flex justify-center gap-2 flex-wrap mb-4">
<span class="badge badge-primary badge-lg font-mono text-lg">$-$$</span>
<span class="badge badge-secondary badge-lg font-mono text-lg">$watch</span>
<span class="badge badge-accent badge-lg font-mono text-lg">$html</span>
<span class="badge badge-info badge-lg font-mono text-lg">$if</span>
<span class="badge badge-success badge-lg font-mono text-lg">$for</span>
<span class="badge badge-warning badge-lg font-mono text-lg">$router</span>
<span class="badge badge-error badge-lg font-mono text-lg">$mount</span>
</div>
<h1 class="text-5xl font-black bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent">
⚡ All the power! ⚡
</h1>
<p class="text-xl opacity-70 mt-2">6 functions that will change the way you code</p>
</div>
## Core Functions
Explore the reactive building blocks of SigPro.
@@ -73,8 +89,8 @@ SigPro provides **PascalCase** wrappers for all standard HTML5 tags (e.g., `Div`
### Syntax Pattern
<div class="mockup-code bg-base-300 text-base-content my-6">
<pre data-prefix=">"><code>Tag({ attributes }, [children])</code></pre>
<div class="mockup-code bg-base-300 text-base-content">
<pre data-prefix=""><code>Tag({ attributes }, [children])</code></pre>
</div>
### Special Attributes & Routing

56
docs/api/tags.md
View File

@@ -126,6 +126,62 @@ const UserStatus = (name, online) => (
);
```
---
## 6. Custom Tags with `$html`
Create reusable components using `$html`. All reactivity auto-cleans itself.
### Basic Example
```javascript
const UserCard = (props, children) =>
$html('div', { class: 'card p-4', 'data-id': props.id }, children);
UserCard({ id: 123 }, [H3("John Doe"), P("john@example.com")]);
```
### Reactive Component (Auto-Cleaned)
```javascript
const Counter = (initial = 0) => {
const count = $(initial);
return $html('div', { class: 'flex gap-2' }, [
Button({ onclick: () => count(count() - 1) }, '-'),
Span(() => count()),
Button({ onclick: () => count(count() + 1) }, '+')
]);
};
```
### When Manual Cleanup is Needed
Only for external resources (intervals, sockets, third-party libs):
```javascript
const Timer = () => {
const time = $(new Date().toLocaleTimeString());
const el = $html('span', {}, () => time());
const interval = setInterval(() => time(new Date().toLocaleTimeString()), 1000);
el._cleanups.add(() => clearInterval(interval)); // Manual cleanup
return el;
};
```
### `$html` vs Tag Helpers
| Use | Recommendation |
|:---|:---|
| Standard tags (`div`, `span`) | `Div()`, `Span()` helpers |
| Reusable components | Function returning `$html` |
| Dynamic tag names | `$html(tagName, props, children)` |
> **Auto-cleanup**: `$html` automatically destroys watchers, events, and nested components. Only add to `_cleanups` for external resources.
---
| State (`online`) | Rendered HTML | Memory Management |
| :--- | :--- | :--- |
| **`true`** | `<div class="flex..."><span class="w-3..."></span><p class="text-bold">John</p></div>` | Watcher active |