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

on

Browse Source
This commit is contained in:
Natxo
2026-04-08 00:34:32 +02:00
parent 61635a23f7
commit 679c6a54c1
1 changed files with 28 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
sigwork.js
View File

@@ -1,8 +1,7 @@
/* /*
* SigPro * SigPro
*/ */
// --- Scheduler (Ciclo Completo) ---
let isScheduled = false; let isScheduled = false;
const queue = new Set(); const queue = new Set();
const tick = () => { const tick = () => {
@@ -14,17 +13,21 @@ const tick = () => {
isScheduled = false; isScheduled = false;
}; };
// --- Estado Global y Contexto ---
let activeEffect = null; let activeEffect = null;
let currentContext = null; let currentContext = null;
const nodeContexts = new WeakMap(); const nodeContexts = new WeakMap();
const reactiveCache = new WeakMap(); // <-- Añadido para que Reactive funcione const reactiveCache = new WeakMap();
// --- Seguridad ---
const DANGEROUS = /^(javascript|data|vbscript):/i; const DANGEROUS = /^(javascript|data|vbscript):/i;
const sanitize = v => DANGEROUS.test(String(v)) ? '#' : v; const sanitize = v => DANGEROUS.test(String(v)) ? '#' : v;
// --- Sistema de Efectos con Scope --- const track = (subs) => {
if (activeEffect) {
subs.add(activeEffect);
activeEffect.deps.add(subs);
}
};
export const Effect = (fn, is_scope = false) => { export const Effect = (fn, is_scope = false) => {
let cleanup = null; let cleanup = null;
const runner = () => { const runner = () => {
@@ -36,7 +39,6 @@ export const Effect = (fn, is_scope = false) => {
activeEffect = prevEffect; activeEffect = prevEffect;
currentContext = prevContext; currentContext = prevContext;
}; };
const stop = () => { const stop = () => {
runner.deps?.forEach(subs => subs.delete(runner)); runner.deps?.forEach(subs => subs.delete(runner));
runner.deps?.clear(); runner.deps?.clear();
@@ -44,25 +46,14 @@ export const Effect = (fn, is_scope = false) => {
runner.cleanups?.forEach(f => f()); runner.cleanups?.forEach(f => f());
runner.cleanups = []; runner.cleanups = [];
}; };
runner.deps = new Set(); runner.deps = new Set();
runner.cleanups = []; runner.cleanups = [];
if (activeEffect) activeEffect.cleanups.push(stop); if (activeEffect) activeEffect.cleanups.push(stop);
else if (currentContext) currentContext.cleanups.add(stop); else if (currentContext) currentContext.cleanups.add(stop);
runner(); runner();
return stop; return stop;
}; };
// --- Signals & Reactividad ---
const track = (subs) => {
if (activeEffect) {
subs.add(activeEffect);
activeEffect.deps.add(subs);
}
};
export const Signal = (value) => { export const Signal = (value) => {
const subs = new Set(); const subs = new Set();
return { return {
@@ -117,18 +108,19 @@ export const Storage = (key, val) => {
return s; return s;
}; };
// --- Renderer Core (Diffing Avanzado y SVG) ---
const isNode = v => v instanceof Node; const isNode = v => v instanceof Node;
export const destroy = (node) => { export const destroy = async (node) => {
if (!node) return; if (!node) return;
const ctx = nodeContexts.get(node); const ctx = nodeContexts.get(node);
if (node.off) await node.off(node);
if (ctx) { if (ctx) {
ctx.unmount.forEach(fn => fn()); ctx.unmount.forEach(fn => fn());
ctx.cleanups.forEach(fn => fn()); ctx.cleanups.forEach(fn => fn());
nodeContexts.delete(node); nodeContexts.delete(node);
} }
node.childNodes?.forEach(destroy); const children = Array.from(node.childNodes);
for (const child of children) await destroy(child);
node.remove(); node.remove();
}; };
@@ -138,7 +130,7 @@ const append = (parent, child) => {
const anchor = document.createTextNode(''); const anchor = document.createTextNode('');
parent.appendChild(anchor); parent.appendChild(anchor);
let nodes = []; let nodes = [];
Effect(() => { Effect(async () => {
const raw = child(); const raw = child();
const next = [raw].flat(Infinity) const next = [raw].flat(Infinity)
.map(n => typeof n === 'function' ? n() : n) .map(n => typeof n === 'function' ? n() : n)
@@ -147,7 +139,7 @@ const append = (parent, child) => {
.map(n => isNode(n) ? n : document.createTextNode(String(n))); .map(n => isNode(n) ? n : document.createTextNode(String(n)));
const nextSet = new Set(next); const nextSet = new Set(next);
nodes.forEach(n => { if (!nextSet.has(n)) destroy(n); }); for (const n of nodes) { if (!nextSet.has(n)) await destroy(n); }
const oldIdxs = new Map(nodes.filter(n => nextSet.has(n)).map((n, i) => [n, i])); const oldIdxs = new Map(nodes.filter(n => nextSet.has(n)).map((n, i) => [n, i]));
let p = oldIdxs.size - 1; let p = oldIdxs.size - 1;
@@ -157,6 +149,7 @@ const append = (parent, child) => {
const ref = next[i + 1] || anchor; const ref = next[i + 1] || anchor;
if (!oldIdxs.has(node) || nodes[p] !== node) { if (!oldIdxs.has(node) || nodes[p] !== node) {
parent.insertBefore(node, ref); parent.insertBefore(node, ref);
if (node.on) queueMicrotask(() => node.on(node));
} else { } else {
p--; p--;
} }
@@ -164,7 +157,9 @@ const append = (parent, child) => {
nodes = next; nodes = next;
}, true); }, true);
} else { } else {
parent.appendChild(isNode(child) ? child : document.createTextNode(String(child))); const n = isNode(child) ? child : document.createTextNode(String(child));
parent.appendChild(n);
if (n.on) queueMicrotask(() => n.on(n));
} }
}; };
@@ -186,28 +181,24 @@ export const h = (tag, props = {}, ...children) => {
let el; let el;
const isSVG = /^(svg|path|circle|rect|g)$/i.test(tag); const isSVG = /^(svg|path|circle|rect|g)$/i.test(tag);
if (isSVG) { el = isSVG ? document.createElementNS("http://www.w3.org/2000/svg", tag) : document.createElement(tag);
el = document.createElementNS("http://www.w3.org/2000/svg", tag);
} else {
el = document.createElement(tag);
}
for (const key in props) { for (const key in props) {
const val = props[key]; const val = props[key];
if (key.startsWith('on')) { if (key.startsWith('on')) {
el.addEventListener(key.slice(2).toLowerCase(), val); el.addEventListener(key.slice(2).toLowerCase(), val);
} } else if (key === 'ref') {
else if (key === 'ref') {
if (typeof val === 'function') val(el); if (typeof val === 'function') val(el);
else if (val && val._isSig) val.value = el; else if (val && val._isSig) val.value = el;
} } else if (typeof val === 'function' || (val && val._isSig)) {
else if (typeof val === 'function' || (val && val._isSig)) {
Effect(() => { Effect(() => {
const v = typeof val === 'function' ? val() : val.value; const v = typeof val === 'function' ? val() : val.value;
if (key === 'on' || key === 'off') { el[key] = v; return; }
const attr = (key === 'href' || key === 'src') ? sanitize(v) : v; const attr = (key === 'href' || key === 'src') ? sanitize(v) : v;
if (!isSVG && key in el) el[key] = attr; else el.setAttribute(key, attr); if (!isSVG && key in el) el[key] = attr; else el.setAttribute(key, attr);
}); });
} else { } else {
if (key === 'on' || key === 'off') { el[key] = val; continue; }
const attr = (key === 'href' || key === 'src') ? sanitize(val) : val; const attr = (key === 'href' || key === 'src') ? sanitize(val) : val;
if (!isSVG && key in el) el[key] = attr; else el.setAttribute(key, attr); if (!isSVG && key in el) el[key] = attr; else el.setAttribute(key, attr);
} }
@@ -216,7 +207,6 @@ export const h = (tag, props = {}, ...children) => {
return el; return el;
}; };
// --- Helpers ---
export const If = (cond, a, b) => () => cond() ? a() : (b ? b() : null); export const If = (cond, a, b) => () => cond() ? a() : (b ? b() : null);
export const For = (list, key, render) => { export const For = (list, key, render) => {
@@ -235,15 +225,14 @@ export const For = (list, key, render) => {
}; };
}; };
// --- Router ---
export const Router = (routes) => { export const Router = (routes) => {
const path = Signal(window.location.hash.replace(/^#/, '') || '/'); const path = Signal(window.location.hash.replace(/^#/, '') || '/');
window.onhashchange = () => path.value = window.location.hash.replace(/^#/, '') || '/'; window.onhashchange = () => path.value = window.location.hash.replace(/^#/, '') || '/';
const outlet = h('div', { class: 'router-outlet' }); const outlet = h('div', { class: 'router-outlet' });
let currentView = null; let currentView = null;
Effect(() => { Effect(async () => {
const route = routes.find(r => r.path === path.value) || routes.find(r => r.path === '*'); const route = routes.find(r => r.path === path.value) || routes.find(r => r.path === '*');
if (currentView) destroy(currentView); if (currentView) await destroy(currentView);
if (route) { if (route) {
currentView = route.component(); currentView = route.component();
outlet.appendChild(currentView); outlet.appendChild(currentView);
@@ -254,7 +243,8 @@ export const Router = (routes) => {
export const Mount = (root, target) => { export const Mount = (root, target) => {
const el = typeof root === 'function' ? root() : root; const el = typeof root === 'function' ? root() : root;
(typeof target === 'string' ? document.querySelector(target) : target).replaceChildren(el); const container = typeof target === 'string' ? document.querySelector(target) : target;
container.replaceChildren(el);
return () => destroy(el); return () => destroy(el);
}; };