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

New modular Sigpro
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s
Details

Browse Source
This commit is contained in:
Natxo
2026-04-27 15:22:57 +02:00
parent b931434edc
commit 99780e8399
21 changed files with 888 additions and 1036 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
docs/README.md
View File

@@ -22,23 +22,6 @@
<li><strong>SigPro:</strong> You ship <strong>Pure Vanilla JS</strong>. The runtime is so small that it often costs less than a single high‑res icon.</li>
</ul>
<h3 class="text-2xl font-bold mt-8 mb-4">Two Ways to Use SigPro</h3>
<p class="mb-2"><strong>🎯 Modern ESM (recommended):</strong> Import only the functions you need – zero global pollution.</p>
<pre class="bg-base-300/30 p-4 rounded-lg mb-4"><code>import { $, div, button, mount } from 'sigpro';
const count = $(0);
mount(() => div([ button({ onclick: () => count(count()+1) }, count) ]), '#app');</code></pre>
<p class="mb-2"><strong>🌍 Classic Global (IIFE):</strong> Load the script and everything is automatically on <code>window</code> – no imports needed.</p>
<pre class="bg-base-300/30 p-4 rounded-lg mb-4"><code>&lt;script src="https://cdn.jsdelivr.net/npm/sigpro@1.2.19/dist/sigpro.js"&gt;&lt;/script&gt;
&lt;script&gt;
const count = $(0);
mount(() => div([ button({ onclick: () => count(count()+1) }, count) ]), '#app');
&lt;/script&gt;</code></pre>
<p class="mb-2"><strong>🔧 ESM + Global injection:</strong> If you want the global helpers but still use <code>type="module"</code>, call <code>sigpro()</code>.</p>
<pre class="bg-base-300/30 p-4 rounded-lg"><code>&lt;script type="module"&gt;
import { sigpro } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
sigpro(); // now $, div, button, etc. are global
&lt;/script&gt;</code></pre>
<h3 class="text-2xl font-bold mt-10 mb-4">Precision Engineering</h3>
<h4 class="text-xl font-semibold mt-6 mb-2">1. Functional Efficiency</h4>
<p><code>div()</code>, <code>button()</code>, <code>span()</code>… These aren't just wrappers; they are pre‑optimized constructors. When you call <code>div({ class: 'btn' }, "Click")</code>, SigPro creates the element and attaches its reactive listeners in a single, surgical operation.</p>