sigpro 1.1.20 → 1.2.39

package/Readme.md

@@ -1,10 +1,12 @@
-# `SigPro` ⚛️
+Blazing fast, zero-overhead, vanilla JS renderer with atomic reactivity.
 
-### **The Atomic Reactivity Engine for the Modern Web.**
+# `SigPro`
 
-**SigPro** is an ultra-lightweight rendering engine designed for extreme performance. By eliminating the Virtual DOM and heavy compilers, it achieves **surgical reactivity** in less than 2KB.
+[![npm version](https://img.shields.io/npm/v/sigpro.svg)](https://www.npmjs.com/package/sigpro)
+![js size](https://img.shields.io/badge/js_size-2.8_kB_brotli-blue)
+[![license](https://img.shields.io/npm/l/sigpro)](https://github.com/natxocc/sigpro/blob/main/LICENSE)
 
-[**Explore the Docs →**](https://natxocc.github.io/sigpro/) | [**View on GitHub**](https://github.com/natxocc/sigpro)
+[**Explore the Docs →**](https://sigpro.natxocc.com/#/)
 
 ---
 
@@ -14,23 +16,23 @@ After years of building within closed ecosystems like **React, Vue, or Svelte**
 
 That extra development time and the cognitive load of "learning the framework" instead of "learning the language" is exactly what **SigPro** eliminates. If the final destination is always JS, why not use a Pure JS-based system that drastically simplifies coding with a readable, vanilla, and remarkably fast architecture?
 
-* 🎯 **Atomic Precision:** Powered by a *Signal-based* architecture. State is bound directly to DOM nodes—when a value changes, **only that specific node updates**.
-* 🚀 **Zero-Hydration Bottlenecks:** No 100KB bundles or complex build steps. SigPro is pure, optimized JavaScript tailored for the browser's native engine.
-* 🍦 **Pure Vanilla JS Performance:** High-octane performance without the need for transpilers or heavy transformations. It runs natively in the browser just as well as it does in complex build pipelines.
-* 🛠️ **Build-Tool Agnostic:** Total freedom. Use it with **Vite, Webpack, or Rollup** for enterprise projects, or simply import it via a **`<script>` tag** for rapid prototyping. No tooling required.
-* 🚀 **Vite-Powered DX:** First-class Vite support with **file-based routing** out of the box. The official `sigpro/vite` plugin automatically scans your `src/pages` directory and generates reactive routes—no manual route configuration needed.
-* 📈 **Zero-Scale Bloat:** Unlike other frameworks where the bundle grows exponentially, SigPro's footprint remains **flat and predictable**. You only pay for the code you write.
-* 💎 **Premium DX (Developer Experience):** Forget boilerplate imports. SigPro injects an elegant, functional syntax (`Div()`, `Button()`, `Span()`) directly into your scope for a **"Zero-Import"** workflow.
-* 📦 **Fully Loaded:** Built-in Hash Routing, native **`localStorage` persistence**, and automatic lifecycle management (cleanups) included in less than 2KB.
-* 🌳 **Tree-Shakable:** Optimized for modern bundlers. Import only what you use, or load the full engine for rapid prototyping.
+* **Atomic Precision:** Powered by a *Signal-based* architecture. State is bound directly to DOM nodes—when a value changes, **only that specific node updates**.
+* **Zero-Hydration Bottlenecks:** No 100KB bundles or complex build steps. SigPro is pure, optimized JavaScript tailored for the browser's native engine.
+* **Pure Vanilla JS Performance:** High-octane performance without the need for transpilers or heavy transformations. It runs natively in the browser just as well as it does in complex build pipelines.
+* **Build-Tool Agnostic:** Total freedom. Use it with **Vite, Webpack, or Rollup** for enterprise projects, or simply import it via a **`<script>` tag** for rapid prototyping. No tooling required.
+* **Vite-Powered DX:** First-class Vite support with **file-based routing** out of the box. The official `sigpro/vite` plugin automatically scans your `src/pages` directory and generates reactive routes—no manual route configuration needed.
+* **Zero-Scale Bloat:** Unlike other frameworks where the bundle grows exponentially, SigPro's footprint remains **flat and predictable**. You only pay for the code you write.
+* **Premium DX (Developer Experience):** Forget boilerplate imports. SigPro injects an elegant, functional syntax (`div()`, `button()`, `span()`) directly into your scope for a **"Zero-Import"** workflow.
+* **Fully Loaded:** Built-in Hash Routing, native **`localStorage` persistence**, and automatic lifecycle management (cleanups) included in less than 2KB.
+* **Tree-Shakable:** Optimized for modern bundlers. Import only what you use, or load the full engine for rapid prototyping.
 
 -----
 
-## ⚡ Real-World Benchmarks
+## Real-World Benchmarks
 
 SigPro isn't just "fast on paper." In the industry-standard **JS Framework Benchmark**, it consistently outperforms the most popular libraries by operating at near-native speeds with almost zero memory overhead.
 
-### 🚀 Execution Speed (CPU)
+### Execution Speed (CPU)
 *Lower is better. Measured in milliseconds (ms).*
 
 | Benchmark Test | **SigPro** | SolidJS | Vue 3 | React 18 |
@@ -39,7 +41,7 @@ SigPro isn't just "fast on paper." In the industry-standard **JS Framework Bench
 | **Direct Selection** (on click) | **17.5ms** | ~18ms | ~32ms | ~65ms |
 | **Initial Render** (1k rows) | **~35ms** | ~32ms | ~45ms | ~70ms |
 
-### 🧠 Memory Footprint
+### Memory Footprint
 *Lower is better. Measured in Megabytes (MB) after 1k rows.*
 
 | Metric | **SigPro** | Vanilla JS | Svelte | React |
@@ -60,6 +62,8 @@ Create reactive, persistent components with a syntax that feels like Vanilla JS,
 ```
 
 ```javascript
+import { $, mount } from "sigpro";
+
 const Counter = () => {
   // Simple signal
   const value = $(100);
@@ -69,14 +73,14 @@ const Counter = () => {
   const doubleValue = $(()=> value() * count());
 
   // Create fast HTML with pure JS
-  return Div({ class: "card" }, [
-    H1(`Count: ${count()}, Reference: ${value()}, Double x Ref: ${doubleValue()}`),
-    P("Atomic updates. Zero re-renders of the parent tree."),
-    Button({ onclick: () => count(c => c + 1)}, "Increment +1")
+  return div({ class: "card" }, [
+    h1(() => `Count: ${count()}, Reference: ${value()}, Double x Ref: ${doubleValue()}`),
+    p("Atomic updates. Zero re-renders of the parent tree."),
+    button({ onclick: () => count(c => c + 1)}, "Increment +1")
   ]);
 };
 
-$mount(Counter, "#app");
+mount(Counter, "#app");
 ```
 
 -----
@@ -85,13 +89,13 @@ $mount(Counter, "#app");
 
 | Feature | **SigPro** | React / Vue | Svelte |
 | :--- | :--- | :--- | :--- |
-| **Payload (Gzipped)** | **< 1.8KB** | ~30KB - 50KB | ~5KB (Compiled Runtime) |
+| **Payload (Gzipped)** | **<3KB** | ~30KB - 50KB | ~5KB (Compiled Runtime) |
 | **State Logic** | **Atomic Signals** | Virtual DOM Diffing | Compiler Dirty Bits |
 | **Update Speed** | **Direct Node Access** | Component Re-render | Block Reconciliation |
 | **Native Persistence** | **Included ($)** | Requires Plugins | Manual |
 | **Dependencies** | **Zero** | Many | Build Toolchain |
 | **Lifecycle Mgmt** | **Automatic (Cleanup Root)** | Manual / Hook-based | Manual / Hook-based |
-| **Routing** | **Reactive Hash ($router) + File-based (Vite)** | Virtual Router (External) | File-based / External |
+| **Routing** | **Reactive Hash (Router) + File-based (Vite)** | Virtual Router (External) | File-based / External |
 | **Learning Curve** | **Zero (Vanilla JS)** | Steep (JSX/Templates) | Medium (Directives) |
 
 -----
@@ -118,7 +122,7 @@ src/
 ```javascript
 // vite.config.js
 import { defineConfig } from 'vite';
-import { sigproRouter } from 'sigpro/vite';
+import { sigproRouter } from 'sigpro/router';
 
 export default defineConfig({
   plugins: [sigproRouter()]

package/dist/sigpro.editor.js

@@ -0,0 +1 @@
+var{$:u,isF:C}=window.SigPro,S=(x)=>{let{value:s,class:z}=x,l=u(0),g=u(""),v=u(0),h=u(0),c=u(0),w=()=>window.getSelection().rangeCount?window.getSelection().getRangeAt(0):0,o,d,R="\uD83D\uDE00 \uD83D\uDE0A \uD83D\uDE09 \uD83E\uDDD0 \uD83D\uDE2E \uD83E\uDD14 \uD83D\uDE05 \uD83D\uDE02 \uD83D\uDE0D \uD83D\uDE18 \uD83E\uDD70 \uD83D\uDC4D \uD83D\uDC4E \uD83D\uDC4C \uD83E\uDD1D \uD83E\uDD1E \uD83D\uDC4B \uD83D\uDC4F \uD83D\uDE4C \uD83D\uDE4F \uD83D\uDCAA ☝️ \uD83D\uDC47 \uD83D\uDC48 \uD83D\uDC49 \uD83D\uDD95 ✅ ⚠️ \uD83D\uDE80 \uD83D\uDCE2 ✉️ ❤️".split(" "),k=()=>{h(h()+1),o&&v(o.innerText.length)},b=()=>{if(o){let e=o.innerHTML;C(s)?s(e):x.onchange?.(e),k()}},r=(e,i=null)=>{if(o?.focus(),d){let n=window.getSelection();n.removeAllRanges(),n.addRange(d)}document.execCommand(e,0,i),d=0,b()},L=(e,i=null)=>{if(h(),!o||l())return 0;try{if(e=="formatBlock"){let n=window.getSelection().getRangeAt(0).commonAncestorContainer;while(n&&n!==o){if(n.tagName===i)return 1;n=n.parentNode}return 0}return document.queryCommandState(e)}catch(n){return 0}},T=(e)=>{if(e){let i=new FileReader;i.onload=(n)=>{let f=e.type.startsWith("image/"),m=n.target.result;r("insertHTML",f?div({style:"display:inline-block;resize:both;overflow:hidden;vertical-align:bottom;width:200px;border:1px dashed #ccc;padding:2px;cursor:pointer",class:"resizable-img-container"},[img({src:m,style:"width:100%;height:100%;object-fit:contain;pointer-events:none"})]):a({href:m,download:e.name,contenteditable:"false",style:"display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border:1px solid #ccc;border-radius:4px;background:#f9f9f9;text-decoration:none;color:#333;font-size:12px;margin:2px;cursor:pointer"},[span({class:"icon-[lucide--paperclip] w-3 h-3"}),e.name]))},i.readAsDataURL(e)}},t=(e,i,n)=>button({type:"button",class:()=>`btn btn-ghost btn-xs ${L(i,n)?"btn-active bg-primary/20":""}`,onclick:()=>typeof i=="function"?i():r(i,n)},[span({class:`icon-[lucide--${e}]`})]);return div({class:`border border-base-300 rounded-box bg-base-100 overflow-hidden flex flex-col ${z||""}`},[div({class:"flex flex-wrap items-center gap-1 p-2 border-b border-base-300 bg-base-200 sticky top-0 z-20"},[div({class:"flex flex-wrap gap-1 flex-1"},[t("bold","bold"),t("italic","italic"),t("underline","underline"),input({type:"color",class:"w-5 h-5 p-0 bg-transparent cursor-pointer",oninput:(e)=>r("foreColor",e.target.value)}),span({class:"w-px h-5 bg-base-300 mx-1"}),t("align-left","justifyLeft"),t("align-center","justifyCenter"),t("align-right","justifyRight"),span({class:"w-px h-5 bg-base-300 mx-1"}),t("list","insertUnorderedList"),t("list-ordered","insertOrderedList"),t("indent-decrease","outdent"),t("indent-increase","indent"),t("quote",()=>r("formatBlock",L("formatBlock","BLOCKQUOTE")?"P":"BLOCKQUOTE"),"BLOCKQUOTE"),span({class:"w-px h-5 bg-base-300 mx-1"}),t("link",()=>{let e=prompt("URL:");e&&r("createLink",e)}),t("paperclip",()=>{let e=document.createElement("input");e.type="file",e.onchange=(i)=>T(i.target.files[0]),e.click()}),div({class:"relative"},[t("smile",()=>{d=w(),c(!c())}),div({class:"absolute top-full left-0 mt-1 p-2 bg-base-100 border shadow-xl rounded-box w-52 z-50 flex flex-wrap gap-1",style:()=>c()?"":"display:none"},R.map((e)=>span({class:"cursor-pointer p-1 text-lg",onclick:()=>{r("insertText",e),c(0)}},e)))]),t("undo-2","undo"),t("redo-2","redo")]),t("code-2",()=>{if(!l())g(o?.innerHTML||"");else if(o)o.innerHTML=g(),b();l(!l())})]),div({class:"relative flex-1 flex flex-col",onclick:()=>c(0)},[div({ref:(e)=>{if(e&&!o)o=e,e.innerHTML=(C(s)?s():s)||"",document.execCommand("defaultParagraphSeparator",0,"br"),e.onclick=(i)=>{let n=i.target.closest(".resizable-img-container");if(n){let f=n.querySelector("img");f&&((m)=>{let p=document.createElement("div");p.style="position:fixed;top:0;left:0;width:100%;height:100%;background:#000e;z-index:9999;display:flex;align-items:center;justify-content:center;cursor:zoom-out",p.onclick=()=>p.remove();let y=document.createElement("img");y.src=m,y.style="max-width:95%;max-height:95%",p.appendChild(y),document.body.appendChild(p)})(f.src)}}},style:()=>`min-height:22rem;${l()?"display:none":""}`,class:"p-4 outline-none text-base-content leading-relaxed [&>div]:m-0 [&>p]:m-0 [&>div]:min-h-[1em] [&_.resizable-img-container]:hover:border-primary [&_blockquote]:border-l-4 [&_blockquote]:border-base-300 [&_blockquote]:pl-4 [&_blockquote]:italic [&_ul]:list-disc [&_ul]:pl-8 [&_ol]:list-decimal [&_ol]:pl-8",contenteditable:"true",oninput:b,onkeydown:(e)=>e.key==="Tab"&&(e.preventDefault(),r("indent")),onkeyup:()=>{k(),d=w()},onmouseup:b,onpaste:(e)=>{e.preventDefault(),r("insertText",e.clipboardData.getData("text/plain"))},ondrop:(e)=>{e.preventDefault(),T(e.dataTransfer.files[0])},ondragover:(e)=>e.preventDefault()}),textarea({class:"w-full flex-1 min-h-[22rem] p-4 font-mono text-sm bg-base-200 border-0",style:()=>l()?"":"display:none",value:g,oninput:(e)=>{if(g(e.target.value),o)o.innerHTML=e.target.value;x.onchange?.(e.target.value)}})]),div({class:"px-3 py-1 border-t text-[10px] text-right opacity-60"},[span(()=>v())])])};export{S as Editor};