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

upt

Browse Source
This commit is contained in:
natxocc
2026-04-13 10:49:46 +02:00
parent c4ebf5847b
commit 3c1f14415e
7 changed files with 441 additions and 408 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
dist/sigpro-ui.esm.js vendored
View File

@@ -10,10 +10,10 @@ var __export = (target, all) => {
}; };
// src/sigpro.js // src/sigpro.js
var doc = typeof document !== "undefined" ? document : null;
var isArr = Array.isArray;
var isFunc = (f) => typeof f === "function"; var isFunc = (f) => typeof f === "function";
var isObj = (o) => o && typeof o === "object"; var isObj = (o) => o && typeof o === "object";
var isArr = Array.isArray;
var doc = typeof document !== "undefined" ? document : null;
var ensureNode = (n) => n?._isRuntime ? n.container : n instanceof Node ? n : doc.createTextNode(n == null ? "" : String(n)); var ensureNode = (n) => n?._isRuntime ? n.container : n instanceof Node ? n : doc.createTextNode(n == null ? "" : String(n));
var activeEffect = null; var activeEffect = null;
var activeOwner = null; var activeOwner = null;
@@ -55,7 +55,8 @@ var createEffect = (fn, isComputed = false) => {
effect._cleanups.forEach((cl) => cl()); effect._cleanups.forEach((cl) => cl());
effect._cleanups.clear(); effect._cleanups.clear();
} }
const prevEffect = activeEffect, prevOwner = activeOwner; const prevEffect = activeEffect;
const prevOwner = activeOwner;
activeEffect = activeOwner = effect; activeEffect = activeOwner = effect;
try { try {
const res = isComputed ? fn() : (fn(), undefined); const res = isComputed ? fn() : (fn(), undefined);
@@ -183,29 +184,6 @@ var $2 = (val, key = null) => {
return val; return val;
}; };
}; };
var $$ = (obj, cache = new WeakMap) => {
if (!isObj(obj))
return obj;
if (cache.has(obj))
return cache.get(obj);
const subs = {};
const proxy = new Proxy(obj, {
get: (t, k) => {
trackUpdate(subs[k] ??= new Set);
return isObj(t[k]) ? $$(t[k], cache) : t[k];
},
set: (t, k, v) => {
if (!Object.is(t[k], v)) {
t[k] = v;
if (subs[k])
trackUpdate(subs[k], true);
}
return true;
}
});
cache.set(obj, proxy);
return proxy;
};
var Watch2 = (sources, cb) => { var Watch2 = (sources, cb) => {
if (cb === undefined) { if (cb === undefined) {
const effect2 = createEffect(sources); const effect2 = createEffect(sources);
@@ -251,7 +229,10 @@ var Tag2 = (tag, props = {}, children = []) => {
if (isFunc(tag)) { if (isFunc(tag)) {
const ctx = { _mounts: [], _cleanups: new Set }; const ctx = { _mounts: [], _cleanups: new Set };
const effect = createEffect(() => { const effect = createEffect(() => {
const result2 = tag(props, { children, emit: (ev, ...args) => props[`on${ev[0].toUpperCase()}${ev.slice(1)}`]?.(...args) }); const result2 = tag(props, {
children,
emit: (ev, ...args) => props[`on${ev[0].toUpperCase()}${ev.slice(1)}`]?.(...args)
});
effect._result = result2; effect._result = result2;
return result2; return result2;
}); });
@@ -361,6 +342,7 @@ var Render = (renderFn) => {
const previousOwner = activeOwner; const previousOwner = activeOwner;
const container = doc.createElement("div"); const container = doc.createElement("div");
container.style.display = "contents"; container.style.display = "contents";
container.setAttribute("role", "presentation");
activeOwner = { _cleanups: cleanups, _mounts: mounts }; activeOwner = { _cleanups: cleanups, _mounts: mounts };
const processResult = (result) => { const processResult = (result) => {
if (!result) if (!result)
@@ -393,7 +375,9 @@ var Render = (renderFn) => {
var If2 = (cond, ifYes, ifNot = null, trans = null) => { var If2 = (cond, ifYes, ifNot = null, trans = null) => {
const anchor = doc.createTextNode(""); const anchor = doc.createTextNode("");
const root = Tag2("div", { style: "display:contents" }, [anchor]); const root = Tag2("div", { style: "display:contents" }, [anchor]);
let currentView = null, last = null; let currentView = null;
let last = null;
let exitPromise = null;
Watch2(() => !!(isFunc(cond) ? cond() : cond), (show) => { Watch2(() => !!(isFunc(cond) ? cond() : cond), (show) => {
if (show === last) if (show === last)
return; return;
@@ -404,10 +388,18 @@ var If2 = (cond, ifYes, ifNot = null, trans = null) => {
currentView = null; currentView = null;
} }
}; };
if (currentView && !show && trans?.out) if (currentView && !show && trans?.out) {
trans.out(currentView.container, disposeView); if (exitPromise && exitPromise.cancel)
else exitPromise.cancel();
const anim = trans.out(currentView.container, disposeView);
exitPromise = anim;
if (anim && anim.finished)
anim.finished.then(disposeView);
else
disposeView();
} else {
disposeView(); disposeView();
}
const content = show ? ifYes : ifNot; const content = show ? ifYes : ifNot;
if (content) { if (content) {
currentView = Render(() => isFunc(content) ? content() : content); currentView = Render(() => isFunc(content) ? content() : content);
@@ -494,7 +486,7 @@ var Mount2 = (comp, target) => {
MOUNTED_NODES.set(t, inst); MOUNTED_NODES.set(t, inst);
return inst; return inst;
}; };
var SigPro = Object.freeze({ $: $2, $$, Watch: Watch2, Tag: Tag2, Render, If: If2, For: For2, Router, Mount: Mount2, onMount, onUnmount }); var SigPro = Object.freeze({ $: $2, Watch: Watch2, Tag: Tag2, Render, If: If2, For: For2, Router, Mount: Mount2, onMount, onUnmount });
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
Object.assign(window, SigPro); Object.assign(window, SigPro);
"div span p h1 h2 h3 h4 h5 h6 br hr section article aside nav main header footer ul ol li a em strong pre code form label input textarea select button img svg".split(" ").forEach((t) => window[t[0].toUpperCase() + t.slice(1)] = (p, c) => SigPro.Tag(t, p, c)); "div span p h1 h2 h3 h4 h5 h6 br hr section article aside nav main header footer ul ol li a em strong pre code form label input textarea select button img svg".split(" ").forEach((t) => window[t[0].toUpperCase() + t.slice(1)] = (p, c) => SigPro.Tag(t, p, c));
@@ -1995,6 +1987,5 @@ export {
Autocomplete, Autocomplete,
Alert, Alert,
Accordion, Accordion,
$$,
$2 as $ $2 as $
}; };

6
dist/sigpro-ui.esm.min.js vendored
View File

File diff suppressed because one or more lines are too long

57
dist/sigpro-ui.js vendored
View File

@@ -73,15 +73,14 @@
Autocomplete: () => Autocomplete, Autocomplete: () => Autocomplete,
Alert: () => Alert, Alert: () => Alert,
Accordion: () => Accordion, Accordion: () => Accordion,
$$: () => $$,
$: () => $2 $: () => $2
}); });
// src/sigpro.js // src/sigpro.js
var doc = typeof document !== "undefined" ? document : null;
var isArr = Array.isArray;
var isFunc = (f) => typeof f === "function"; var isFunc = (f) => typeof f === "function";
var isObj = (o) => o && typeof o === "object"; var isObj = (o) => o && typeof o === "object";
var isArr = Array.isArray;
var doc = typeof document !== "undefined" ? document : null;
var ensureNode = (n) => n?._isRuntime ? n.container : n instanceof Node ? n : doc.createTextNode(n == null ? "" : String(n)); var ensureNode = (n) => n?._isRuntime ? n.container : n instanceof Node ? n : doc.createTextNode(n == null ? "" : String(n));
var activeEffect = null; var activeEffect = null;
var activeOwner = null; var activeOwner = null;
@@ -123,7 +122,8 @@
effect._cleanups.forEach((cl) => cl()); effect._cleanups.forEach((cl) => cl());
effect._cleanups.clear(); effect._cleanups.clear();
} }
const prevEffect = activeEffect, prevOwner = activeOwner; const prevEffect = activeEffect;
const prevOwner = activeOwner;
activeEffect = activeOwner = effect; activeEffect = activeOwner = effect;
try { try {
const res = isComputed ? fn() : (fn(), undefined); const res = isComputed ? fn() : (fn(), undefined);
@@ -251,29 +251,6 @@
return val; return val;
}; };
}; };
var $$ = (obj, cache = new WeakMap) => {
if (!isObj(obj))
return obj;
if (cache.has(obj))
return cache.get(obj);
const subs = {};
const proxy = new Proxy(obj, {
get: (t, k) => {
trackUpdate(subs[k] ??= new Set);
return isObj(t[k]) ? $$(t[k], cache) : t[k];
},
set: (t, k, v) => {
if (!Object.is(t[k], v)) {
t[k] = v;
if (subs[k])
trackUpdate(subs[k], true);
}
return true;
}
});
cache.set(obj, proxy);
return proxy;
};
var Watch2 = (sources, cb) => { var Watch2 = (sources, cb) => {
if (cb === undefined) { if (cb === undefined) {
const effect2 = createEffect(sources); const effect2 = createEffect(sources);
@@ -319,7 +296,10 @@
if (isFunc(tag)) { if (isFunc(tag)) {
const ctx = { _mounts: [], _cleanups: new Set }; const ctx = { _mounts: [], _cleanups: new Set };
const effect = createEffect(() => { const effect = createEffect(() => {
const result2 = tag(props, { children, emit: (ev, ...args) => props[`on${ev[0].toUpperCase()}${ev.slice(1)}`]?.(...args) }); const result2 = tag(props, {
children,
emit: (ev, ...args) => props[`on${ev[0].toUpperCase()}${ev.slice(1)}`]?.(...args)
});
effect._result = result2; effect._result = result2;
return result2; return result2;
}); });
@@ -429,6 +409,7 @@
const previousOwner = activeOwner; const previousOwner = activeOwner;
const container = doc.createElement("div"); const container = doc.createElement("div");
container.style.display = "contents"; container.style.display = "contents";
container.setAttribute("role", "presentation");
activeOwner = { _cleanups: cleanups, _mounts: mounts }; activeOwner = { _cleanups: cleanups, _mounts: mounts };
const processResult = (result) => { const processResult = (result) => {
if (!result) if (!result)
@@ -461,7 +442,9 @@
var If2 = (cond, ifYes, ifNot = null, trans = null) => { var If2 = (cond, ifYes, ifNot = null, trans = null) => {
const anchor = doc.createTextNode(""); const anchor = doc.createTextNode("");
const root = Tag2("div", { style: "display:contents" }, [anchor]); const root = Tag2("div", { style: "display:contents" }, [anchor]);
let currentView = null, last = null; let currentView = null;
let last = null;
let exitPromise = null;
Watch2(() => !!(isFunc(cond) ? cond() : cond), (show) => { Watch2(() => !!(isFunc(cond) ? cond() : cond), (show) => {
if (show === last) if (show === last)
return; return;
@@ -472,10 +455,18 @@
currentView = null; currentView = null;
} }
}; };
if (currentView && !show && trans?.out) if (currentView && !show && trans?.out) {
trans.out(currentView.container, disposeView); if (exitPromise && exitPromise.cancel)
else exitPromise.cancel();
const anim = trans.out(currentView.container, disposeView);
exitPromise = anim;
if (anim && anim.finished)
anim.finished.then(disposeView);
else
disposeView();
} else {
disposeView(); disposeView();
}
const content = show ? ifYes : ifNot; const content = show ? ifYes : ifNot;
if (content) { if (content) {
currentView = Render(() => isFunc(content) ? content() : content); currentView = Render(() => isFunc(content) ? content() : content);
@@ -562,7 +553,7 @@
MOUNTED_NODES.set(t, inst); MOUNTED_NODES.set(t, inst);
return inst; return inst;
}; };
var SigPro = Object.freeze({ $: $2, $$, Watch: Watch2, Tag: Tag2, Render, If: If2, For: For2, Router, Mount: Mount2, onMount, onUnmount }); var SigPro = Object.freeze({ $: $2, Watch: Watch2, Tag: Tag2, Render, If: If2, For: For2, Router, Mount: Mount2, onMount, onUnmount });
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
Object.assign(window, SigPro); Object.assign(window, SigPro);
"div span p h1 h2 h3 h4 h5 h6 br hr section article aside nav main header footer ul ol li a em strong pre code form label input textarea select button img svg".split(" ").forEach((t) => window[t[0].toUpperCase() + t.slice(1)] = (p, c) => SigPro.Tag(t, p, c)); "div span p h1 h2 h3 h4 h5 h6 br hr section article aside nav main header footer ul ol li a em strong pre code form label input textarea select button img svg".split(" ").forEach((t) => window[t[0].toUpperCase() + t.slice(1)] = (p, c) => SigPro.Tag(t, p, c));

6
dist/sigpro-ui.min.js vendored
View File

File diff suppressed because one or more lines are too long

57
docs/sigpro-ui.min.js vendored
View File

@@ -73,15 +73,14 @@
Autocomplete: () => Autocomplete, Autocomplete: () => Autocomplete,
Alert: () => Alert, Alert: () => Alert,
Accordion: () => Accordion, Accordion: () => Accordion,
$$: () => $$,
$: () => $2 $: () => $2
}); });
// src/sigpro.js // src/sigpro.js
var doc = typeof document !== "undefined" ? document : null;
var isArr = Array.isArray;
var isFunc = (f) => typeof f === "function"; var isFunc = (f) => typeof f === "function";
var isObj = (o) => o && typeof o === "object"; var isObj = (o) => o && typeof o === "object";
var isArr = Array.isArray;
var doc = typeof document !== "undefined" ? document : null;
var ensureNode = (n) => n?._isRuntime ? n.container : n instanceof Node ? n : doc.createTextNode(n == null ? "" : String(n)); var ensureNode = (n) => n?._isRuntime ? n.container : n instanceof Node ? n : doc.createTextNode(n == null ? "" : String(n));
var activeEffect = null; var activeEffect = null;
var activeOwner = null; var activeOwner = null;
@@ -123,7 +122,8 @@
effect._cleanups.forEach((cl) => cl()); effect._cleanups.forEach((cl) => cl());
effect._cleanups.clear(); effect._cleanups.clear();
} }
const prevEffect = activeEffect, prevOwner = activeOwner; const prevEffect = activeEffect;
const prevOwner = activeOwner;
activeEffect = activeOwner = effect; activeEffect = activeOwner = effect;
try { try {
const res = isComputed ? fn() : (fn(), undefined); const res = isComputed ? fn() : (fn(), undefined);
@@ -251,29 +251,6 @@
return val; return val;
}; };
}; };
var $$ = (obj, cache = new WeakMap) => {
if (!isObj(obj))
return obj;
if (cache.has(obj))
return cache.get(obj);
const subs = {};
const proxy = new Proxy(obj, {
get: (t, k) => {
trackUpdate(subs[k] ??= new Set);
return isObj(t[k]) ? $$(t[k], cache) : t[k];
},
set: (t, k, v) => {
if (!Object.is(t[k], v)) {
t[k] = v;
if (subs[k])
trackUpdate(subs[k], true);
}
return true;
}
});
cache.set(obj, proxy);
return proxy;
};
var Watch2 = (sources, cb) => { var Watch2 = (sources, cb) => {
if (cb === undefined) { if (cb === undefined) {
const effect2 = createEffect(sources); const effect2 = createEffect(sources);
@@ -319,7 +296,10 @@
if (isFunc(tag)) { if (isFunc(tag)) {
const ctx = { _mounts: [], _cleanups: new Set }; const ctx = { _mounts: [], _cleanups: new Set };
const effect = createEffect(() => { const effect = createEffect(() => {
const result2 = tag(props, { children, emit: (ev, ...args) => props[`on${ev[0].toUpperCase()}${ev.slice(1)}`]?.(...args) }); const result2 = tag(props, {
children,
emit: (ev, ...args) => props[`on${ev[0].toUpperCase()}${ev.slice(1)}`]?.(...args)
});
effect._result = result2; effect._result = result2;
return result2; return result2;
}); });
@@ -429,6 +409,7 @@
const previousOwner = activeOwner; const previousOwner = activeOwner;
const container = doc.createElement("div"); const container = doc.createElement("div");
container.style.display = "contents"; container.style.display = "contents";
container.setAttribute("role", "presentation");
activeOwner = { _cleanups: cleanups, _mounts: mounts }; activeOwner = { _cleanups: cleanups, _mounts: mounts };
const processResult = (result) => { const processResult = (result) => {
if (!result) if (!result)
@@ -461,7 +442,9 @@
var If2 = (cond, ifYes, ifNot = null, trans = null) => { var If2 = (cond, ifYes, ifNot = null, trans = null) => {
const anchor = doc.createTextNode(""); const anchor = doc.createTextNode("");
const root = Tag2("div", { style: "display:contents" }, [anchor]); const root = Tag2("div", { style: "display:contents" }, [anchor]);
let currentView = null, last = null; let currentView = null;
let last = null;
let exitPromise = null;
Watch2(() => !!(isFunc(cond) ? cond() : cond), (show) => { Watch2(() => !!(isFunc(cond) ? cond() : cond), (show) => {
if (show === last) if (show === last)
return; return;
@@ -472,10 +455,18 @@
currentView = null; currentView = null;
} }
}; };
if (currentView && !show && trans?.out) if (currentView && !show && trans?.out) {
trans.out(currentView.container, disposeView); if (exitPromise && exitPromise.cancel)
else exitPromise.cancel();
const anim = trans.out(currentView.container, disposeView);
exitPromise = anim;
if (anim && anim.finished)
anim.finished.then(disposeView);
else
disposeView();
} else {
disposeView(); disposeView();
}
const content = show ? ifYes : ifNot; const content = show ? ifYes : ifNot;
if (content) { if (content) {
currentView = Render(() => isFunc(content) ? content() : content); currentView = Render(() => isFunc(content) ? content() : content);
@@ -562,7 +553,7 @@
MOUNTED_NODES.set(t, inst); MOUNTED_NODES.set(t, inst);
return inst; return inst;
}; };
var SigPro = Object.freeze({ $: $2, $$, Watch: Watch2, Tag: Tag2, Render, If: If2, For: For2, Router, Mount: Mount2, onMount, onUnmount }); var SigPro = Object.freeze({ $: $2, Watch: Watch2, Tag: Tag2, Render, If: If2, For: For2, Router, Mount: Mount2, onMount, onUnmount });
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
Object.assign(window, SigPro); Object.assign(window, SigPro);
"div span p h1 h2 h3 h4 h5 h6 br hr section article aside nav main header footer ul ol li a em strong pre code form label input textarea select button img svg".split(" ").forEach((t) => window[t[0].toUpperCase() + t.slice(1)] = (p, c) => SigPro.Tag(t, p, c)); "div span p h1 h2 h3 h4 h5 h6 br hr section article aside nav main header footer ul ol li a em strong pre code form label input textarea select button img svg".split(" ").forEach((t) => window[t[0].toUpperCase() + t.slice(1)] = (p, c) => SigPro.Tag(t, p, c));

4
index.js
View File

@@ -1,12 +1,12 @@
// import './src/sigpro.js'; // import './src/sigpro.js';
import { $, $$, Render, Watch, Tag, If, For, Router, Mount } from './src/sigpro.js'; import { $, Render, Watch, Tag, If, For, Router, Mount } from './src/sigpro.js';
import * as Components from './src/components/index.js'; import * as Components from './src/components/index.js';
import * as Utils from './src/core/utils.js'; import * as Utils from './src/core/utils.js';
import { tt } from './src/core/i18n.js'; import { tt } from './src/core/i18n.js';
export * from './src/components/index.js'; export * from './src/components/index.js';
export * from './src/core/utils.js'; export * from './src/core/utils.js';
export { $, $$, Render, Watch, Tag, If, For, Router, Mount, tt }; export { $, Render, Watch, Tag, If, For, Router, Mount, tt };
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
// const CoreAPI = { $, $$, Render, Watch, Tag, If, For, Router, Mount } = SigPro; // const CoreAPI = { $, $$, Render, Watch, Tag, If, For, Router, Mount } = SigPro;

662
src/sigpro.js
View File

@@ -1,416 +1,476 @@
/** SigPro - Signals & Proxies */ const isFunc = f => typeof f === "function"
const isObj = o => o && typeof o === "object"
const isArr = Array.isArray
const doc = typeof document !== "undefined" ? document : null
const ensureNode = n => n?._isRuntime ? n.container : (n instanceof Node ? n : doc.createTextNode(n == null ? "" : String(n)))
// Helpers let activeEffect = null
const doc = typeof document !== "undefined" ? document : null; let activeOwner = null
const isArr = Array.isArray, isFunc = f => typeof f === "function", isObj = o => o && typeof o === "object"; let isFlushing = false
const ensureNode = n => n?._isRuntime ? n.container : (n instanceof Node ? n : doc.createTextNode(n == null ? "" : String(n))); const effectQueue = new Set()
const MOUNTED_NODES = new WeakMap()
let activeEffect = null, activeOwner = null, isFlushing = false;
const effectQueue = new Set(), MOUNTED_NODES = new WeakMap();
const dispose = eff => { const dispose = eff => {
if (!eff || eff._disposed) return; if (!eff || eff._disposed) return
eff._disposed = true; eff._disposed = true
const stack = [eff]; const stack = [eff]
while (stack.length) { while (stack.length) {
const e = stack.pop(); const e = stack.pop()
if (e._cleanups) { e._cleanups.forEach(fn => fn()); e._cleanups.clear(); } if (e._cleanups) {
if (e._children) { e._children.forEach(child => stack.push(child)); e._children.clear(); } e._cleanups.forEach(fn => fn())
if (e._deps) { e._deps.forEach(depSet => depSet.delete(e)); e._deps.clear(); } e._cleanups.clear()
}
if (e._children) {
e._children.forEach(child => stack.push(child))
e._children.clear()
}
if (e._deps) {
e._deps.forEach(depSet => depSet.delete(e))
e._deps.clear()
}
} }
}; }
const onUnmount = fn => { const onUnmount = fn => {
if (activeOwner) (activeOwner._cleanups ||= new Set()).add(fn); if (activeOwner) (activeOwner._cleanups ||= new Set()).add(fn)
}; }
// Effect creation
const createEffect = (fn, isComputed = false) => { const createEffect = (fn, isComputed = false) => {
const effect = () => { const effect = () => {
if (effect._disposed) return; if (effect._disposed) return
if (effect._deps) effect._deps.forEach(depSet => depSet.delete(effect)); if (effect._deps) effect._deps.forEach(depSet => depSet.delete(effect))
if (effect._cleanups) { effect._cleanups.forEach(cl => cl()); effect._cleanups.clear(); } if (effect._cleanups) {
const prevEffect = activeEffect, prevOwner = activeOwner; effect._cleanups.forEach(cl => cl())
activeEffect = activeOwner = effect; effect._cleanups.clear()
try {
const res = isComputed ? fn() : (fn(), undefined);
if (!isComputed) effect._result = res;
return res;
} finally {
activeEffect = prevEffect;
activeOwner = prevOwner;
} }
}; const prevEffect = activeEffect
effect._deps = effect._cleanups = effect._children = null; const prevOwner = activeOwner
effect._disposed = false; activeEffect = activeOwner = effect
effect._isComputed = isComputed; try {
effect._depth = activeEffect ? activeEffect._depth + 1 : 0; const res = isComputed ? fn() : (fn(), undefined)
effect._mounts = []; if (!isComputed) effect._result = res
effect._parent = activeOwner; return res
if (activeOwner) (activeOwner._children ||= new Set()).add(effect); } finally {
return effect; activeEffect = prevEffect
}; activeOwner = prevOwner
}
}
effect._deps = effect._cleanups = effect._children = null
effect._disposed = false
effect._isComputed = isComputed
effect._depth = activeEffect ? activeEffect._depth + 1 : 0
effect._mounts = []
effect._parent = activeOwner
if (activeOwner) (activeOwner._children ||= new Set()).add(effect)
return effect
}
const flush = () => { const flush = () => {
if (isFlushing) return; if (isFlushing) return
isFlushing = true; isFlushing = true
const sorted = Array.from(effectQueue).sort((a, b) => a._depth - b._depth); const sorted = Array.from(effectQueue).sort((a, b) => a._depth - b._depth)
effectQueue.clear(); effectQueue.clear()
for (const e of sorted) if (!e._disposed) e(); for (const e of sorted) if (!e._disposed) e()
isFlushing = false; isFlushing = false
}; }
const trackUpdate = (subs, trigger = false) => { const trackUpdate = (subs, trigger = false) => {
if (!trigger && activeEffect && !activeEffect._disposed) { if (!trigger && activeEffect && !activeEffect._disposed) {
subs.add(activeEffect); subs.add(activeEffect)
(activeEffect._deps ||= new Set()).add(subs); ;(activeEffect._deps ||= new Set()).add(subs)
} else if (trigger) { } else if (trigger) {
let hasQueue = false; let hasQueue = false
subs.forEach(e => { subs.forEach(e => {
if (e === activeEffect || e._disposed) return; if (e === activeEffect || e._disposed) return
if (e._isComputed) { if (e._isComputed) {
e._dirty = true; e._dirty = true
if (e._subs) trackUpdate(e._subs, true); if (e._subs) trackUpdate(e._subs, true)
} else { } else {
effectQueue.add(e); effectQueue.add(e)
hasQueue = true; hasQueue = true
} }
}); })
if (hasQueue && !isFlushing) queueMicrotask(flush); if (hasQueue && !isFlushing) queueMicrotask(flush)
} }
}; }
const untrack = fn => { const p = activeEffect; activeEffect = null; try { return fn(); } finally { activeEffect = p; } }; const untrack = fn => {
const p = activeEffect
activeEffect = null
try { return fn() } finally { activeEffect = p }
}
const onMount = fn => { const onMount = fn => {
if (activeOwner) (activeOwner._mounts ||= []).push(fn); if (activeOwner) (activeOwner._mounts ||= []).push(fn)
}; }
// Reactive state
const $ = (val, key = null) => { const $ = (val, key = null) => {
const subs = new Set(); const subs = new Set()
if (isFunc(val)) { if (isFunc(val)) {
let cache, dirty = true; let cache, dirty = true
const computed = () => { const computed = () => {
if (dirty) { if (dirty) {
const prev = activeEffect; const prev = activeEffect
activeEffect = computed; activeEffect = computed
try { try {
const next = val(); const next = val()
if (!Object.is(cache, next)) { cache = next; dirty = false; trackUpdate(subs, true); } if (!Object.is(cache, next)) {
} finally { activeEffect = prev; } cache = next
dirty = false
trackUpdate(subs, true)
}
} finally { activeEffect = prev }
} }
trackUpdate(subs); trackUpdate(subs)
return cache; return cache
}; }
computed._isComputed = true; computed._isComputed = true
computed._subs = subs; computed._subs = subs
computed._dirty = true; computed._dirty = true
computed._deps = null; computed._deps = null
computed._disposed = false; computed._disposed = false
computed.markDirty = () => { dirty = true; }; computed.markDirty = () => { dirty = true }
computed.stop = () => { computed.stop = () => {
computed._disposed = true; computed._disposed = true
if (computed._deps) { computed._deps.forEach(depSet => depSet.delete(computed)); computed._deps.clear(); } if (computed._deps) {
subs.clear(); computed._deps.forEach(depSet => depSet.delete(computed))
}; computed._deps.clear()
if (activeOwner) onUnmount(computed.stop); }
return computed; subs.clear()
}
if (activeOwner) onUnmount(computed.stop)
return computed
} }
if (key) try { val = JSON.parse(localStorage.getItem(key)) ?? val; } catch (e) { } if (key) try { val = JSON.parse(localStorage.getItem(key)) ?? val } catch (e) {}
return (...args) => { return (...args) => {
if (args.length) { if (args.length) {
const next = isFunc(args[0]) ? args[0](val) : args[0]; const next = isFunc(args[0]) ? args[0](val) : args[0]
if (!Object.is(val, next)) { val = next; if (key) localStorage.setItem(key, JSON.stringify(val)); trackUpdate(subs, true); } if (!Object.is(val, next)) {
val = next
if (key) localStorage.setItem(key, JSON.stringify(val))
trackUpdate(subs, true)
}
} }
trackUpdate(subs); trackUpdate(subs)
return val; return val
}; }
}; }
const $$ = (obj, cache = new WeakMap()) => {
if (!isObj(obj)) return obj;
if (cache.has(obj)) return cache.get(obj);
const subs = {};
const proxy = new Proxy(obj, {
get: (t, k) => { trackUpdate(subs[k] ??= new Set()); return isObj(t[k]) ? $$(t[k], cache) : t[k]; },
set: (t, k, v) => { if (!Object.is(t[k], v)) { t[k] = v; if (subs[k]) trackUpdate(subs[k], true); } return true; }
});
cache.set(obj, proxy);
return proxy;
};
// Watchers
const Watch = (sources, cb) => { const Watch = (sources, cb) => {
if (cb === undefined) { if (cb === undefined) {
const effect = createEffect(sources); const effect = createEffect(sources)
effect(); effect()
return () => dispose(effect); return () => dispose(effect)
} }
const effect = createEffect(() => { const effect = createEffect(() => {
const vals = Array.isArray(sources) ? sources.map(s => s()) : sources(); const vals = Array.isArray(sources) ? sources.map(s => s()) : sources()
untrack(() => cb(vals)); untrack(() => cb(vals))
}); })
effect(); effect()
return () => dispose(effect); return () => dispose(effect)
}; }
const cleanupNode = node => { const cleanupNode = node => {
if (node._cleanups) { node._cleanups.forEach(fn => fn()); node._cleanups.clear(); } if (node._cleanups) {
if (node._ownerEffect) dispose(node._ownerEffect); node._cleanups.forEach(fn => fn())
if (node.childNodes) node.childNodes.forEach(cleanupNode); node._cleanups.clear()
}; }
if (node._ownerEffect) dispose(node._ownerEffect)
if (node.childNodes) node.childNodes.forEach(cleanupNode)
}
// --- Seguridad optimizada --- const DANGEROUS_PROTOCOL = /^\s*(javascript|data|vbscript):/i
const DANGEROUS_PROTOCOL = /^\s*(javascript|data|vbscript):/i; const isDangerousAttr = key => key === 'src' || key === 'href' || key.startsWith('on')
const isDangerousAttr = key => key === 'src' || key === 'href' || key.startsWith('on');
const validateAttr = (key, val) => { const validateAttr = (key, val) => {
if (val == null || val === false) return null; if (val == null || val === false) return null
if (isDangerousAttr(key)) { if (isDangerousAttr(key)) {
const sVal = String(val); const sVal = String(val)
if (DANGEROUS_PROTOCOL.test(sVal)) { if (DANGEROUS_PROTOCOL.test(sVal)) {
console.warn(`[SigPro] Bloqueado protocolo peligroso en ${key}`); console.warn(`[SigPro] Bloqueado protocolo peligroso en ${key}`)
return '#'; return '#'
} }
} }
return val; return val
}; }
// CreateElement
const Tag = (tag, props = {}, children = []) => { const Tag = (tag, props = {}, children = []) => {
if (props instanceof Node || isArr(props) || !isObj(props)) { children = props; props = {}; } if (props instanceof Node || isArr(props) || !isObj(props)) {
if (isFunc(tag)) { children = props
const ctx = { _mounts: [], _cleanups: new Set() }; props = {}
const effect = createEffect(() => {
const result = tag(props, { children, emit: (ev, ...args) => props[`on${ev[0].toUpperCase()}${ev.slice(1)}`]?.(...args) });
effect._result = result;
return result;
});
effect();
ctx._mounts = effect._mounts || [];
ctx._cleanups = effect._cleanups || new Set();
const result = effect._result;
const attachLifecycle = node => node && typeof node === 'object' && !node._isRuntime && (node._mounts = ctx._mounts, node._cleanups = ctx._cleanups, node._ownerEffect = effect);
isArr(result) ? result.forEach(attachLifecycle) : attachLifecycle(result);
if (result == null) return null;
if (result instanceof Node || (isArr(result) && result.every(n => n instanceof Node))) return result;
return doc.createTextNode(String(result));
} }
const isSVG = /^(svg|path|circle|rect|line|polyline|polygon|g|defs|text|tspan|use)$/.test(tag); if (isFunc(tag)) {
const el = isSVG ? doc.createElementNS("http://www.w3.org/2000/svg", tag) : doc.createElement(tag); const ctx = { _mounts: [], _cleanups: new Set() }
el._cleanups = new Set(); const effect = createEffect(() => {
const result = tag(props, {
children,
emit: (ev, ...args) => props[`on${ev[0].toUpperCase()}${ev.slice(1)}`]?.(...args)
})
effect._result = result
return result
})
effect()
ctx._mounts = effect._mounts || []
ctx._cleanups = effect._cleanups || new Set()
const result = effect._result
const attachLifecycle = node => node && typeof node === 'object' && !node._isRuntime && (
node._mounts = ctx._mounts,
node._cleanups = ctx._cleanups,
node._ownerEffect = effect
)
isArr(result) ? result.forEach(attachLifecycle) : attachLifecycle(result)
if (result == null) return null
if (result instanceof Node || (isArr(result) && result.every(n => n instanceof Node))) return result
return doc.createTextNode(String(result))
}
const isSVG = /^(svg|path|circle|rect|line|polyline|polygon|g|defs|text|tspan|use)$/.test(tag)
const el = isSVG ? doc.createElementNS("http://www.w3.org/2000/svg", tag) : doc.createElement(tag)
el._cleanups = new Set()
for (let k in props) { for (let k in props) {
if (!props.hasOwnProperty(k)) continue; if (!props.hasOwnProperty(k)) continue
let v = props[k]; let v = props[k]
if (k === "ref") { isFunc(v) ? v(el) : (v.current = el); continue; } if (k === "ref") {
isFunc(v) ? v(el) : (v.current = el)
continue
}
if (k.startsWith("on")) { if (k.startsWith("on")) {
const ev = k.slice(2).toLowerCase(); const ev = k.slice(2).toLowerCase()
el.addEventListener(ev, v); el.addEventListener(ev, v)
const off = () => el.removeEventListener(ev, v); const off = () => el.removeEventListener(ev, v)
el._cleanups.add(off); el._cleanups.add(off)
onUnmount(off); onUnmount(off)
} else if (isFunc(v)) { } else if (isFunc(v)) {
const effect = createEffect(() => { const effect = createEffect(() => {
const val = validateAttr(k, v()); const val = validateAttr(k, v())
if (k === "class") el.className = val || ""; if (k === "class") el.className = val || ""
else if (val == null) el.removeAttribute(k); else if (val == null) el.removeAttribute(k)
else if (k in el && !isSVG) el[k] = val; else if (k in el && !isSVG) el[k] = val
else el.setAttribute(k, val === true ? "" : val); else el.setAttribute(k, val === true ? "" : val)
}); })
effect(); effect()
el._cleanups.add(() => dispose(effect)); el._cleanups.add(() => dispose(effect))
onUnmount(() => dispose(effect)); onUnmount(() => dispose(effect))
if (/^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName) && (k === "value" || k === "checked")) { if (/^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName) && (k === "value" || k === "checked")) {
const evType = k === "checked" ? "change" : "input"; const evType = k === "checked" ? "change" : "input"
el.addEventListener(evType, ev => v(ev.target[k])); el.addEventListener(evType, ev => v(ev.target[k]))
} }
} else { } else {
const val = validateAttr(k, v); const val = validateAttr(k, v)
if (val != null) { if (val != null) {
if (k in el && !isSVG) el[k] = val; if (k in el && !isSVG) el[k] = val
else el.setAttribute(k, val === true ? "" : val); else el.setAttribute(k, val === true ? "" : val)
} }
} }
} }
const append = c => { const append = c => {
if (isArr(c)) return c.forEach(append); if (isArr(c)) return c.forEach(append)
if (isFunc(c)) { if (isFunc(c)) {
const anchor = doc.createTextNode(""); const anchor = doc.createTextNode("")
el.appendChild(anchor); el.appendChild(anchor)
let currentNodes = []; let currentNodes = []
const effect = createEffect(() => { const effect = createEffect(() => {
const res = c(); const res = c()
const next = (isArr(res) ? res : [res]).map(ensureNode); const next = (isArr(res) ? res : [res]).map(ensureNode)
currentNodes.forEach(n => { currentNodes.forEach(n => {
if (n._isRuntime) n.destroy(); if (n._isRuntime) n.destroy()
else cleanupNode(n); else cleanupNode(n)
if (n.parentNode) n.remove(); if (n.parentNode) n.remove()
}); })
let ref = anchor; let ref = anchor
for (let i = next.length - 1; i >= 0; i--) { for (let i = next.length - 1; i >= 0; i--) {
const node = next[i]; const node = next[i]
if (node.parentNode !== ref.parentNode) ref.parentNode?.insertBefore(node, ref); if (node.parentNode !== ref.parentNode) ref.parentNode?.insertBefore(node, ref)
if (node._mounts) node._mounts.forEach(fn => fn()); if (node._mounts) node._mounts.forEach(fn => fn())
ref = node; ref = node
} }
currentNodes = next; currentNodes = next
}); })
effect(); effect()
el._cleanups.add(() => dispose(effect)); el._cleanups.add(() => dispose(effect))
onUnmount(() => dispose(effect)); onUnmount(() => dispose(effect))
} else { } else {
const node = ensureNode(c); const node = ensureNode(c)
el.appendChild(node); el.appendChild(node)
if (node._mounts) node._mounts.forEach(fn => fn()); if (node._mounts) node._mounts.forEach(fn => fn())
} }
}; }
append(children); append(children)
return el; return el
}; }
// Render const Render = renderFn => {
const Render = (renderFn) => { const cleanups = new Set()
const cleanups = new Set(); const mounts = []
const mounts = []; const previousOwner = activeOwner
const previousOwner = activeOwner; const container = doc.createElement("div")
const container = doc.createElement("div"); container.style.display = "contents"
container.style.display = "contents"; container.setAttribute("role", "presentation") // ← único cambio real
activeOwner = { _cleanups: cleanups, _mounts: mounts }; activeOwner = { _cleanups: cleanups, _mounts: mounts }
const processResult = (result) => { const processResult = result => {
if (!result) return; if (!result) return
if (result._isRuntime) { if (result._isRuntime) {
cleanups.add(result.destroy); cleanups.add(result.destroy)
container.appendChild(result.container); container.appendChild(result.container)
} else if (isArr(result)) { } else if (isArr(result)) {
result.forEach(processResult); result.forEach(processResult)
} else { } else {
container.appendChild(result instanceof Node ? result : doc.createTextNode(String(result == null ? "" : result))); container.appendChild(result instanceof Node ? result : doc.createTextNode(String(result == null ? "" : result)))
} }
}; }
try { try {
processResult(renderFn({ onCleanup: (fn) => cleanups.add(fn) })); processResult(renderFn({ onCleanup: fn => cleanups.add(fn) }))
} finally { activeOwner = previousOwner; } } finally { activeOwner = previousOwner }
mounts.forEach(fn => fn()); mounts.forEach(fn => fn())
return { return {
_isRuntime: true, _isRuntime: true,
container, container,
destroy: () => { destroy: () => {
cleanups.forEach((fn) => fn()); cleanups.forEach(fn => fn())
cleanupNode(container); cleanupNode(container)
container.remove(); container.remove()
}, }
}; }
}; }
// If
const If = (cond, ifYes, ifNot = null, trans = null) => { const If = (cond, ifYes, ifNot = null, trans = null) => {
const anchor = doc.createTextNode(""); const anchor = doc.createTextNode("")
const root = Tag("div", { style: "display:contents" }, [anchor]); const root = Tag("div", { style: "display:contents" }, [anchor])
let currentView = null, last = null; let currentView = null
let last = null
let exitPromise = null
Watch( Watch(
() => !!(isFunc(cond) ? cond() : cond), () => !!(isFunc(cond) ? cond() : cond),
(show) => { show => {
if (show === last) return; if (show === last) return
last = show; last = show
const disposeView = () => { if (currentView) { currentView.destroy(); currentView = null; } };
if (currentView && !show && trans?.out) trans.out(currentView.container, disposeView); const disposeView = () => {
else disposeView(); if (currentView) {
const content = show ? ifYes : ifNot; currentView.destroy()
currentView = null
}
}
if (currentView && !show && trans?.out) {
if (exitPromise && exitPromise.cancel) exitPromise.cancel()
const anim = trans.out(currentView.container, disposeView)
exitPromise = anim
if (anim && anim.finished) anim.finished.then(disposeView)
else disposeView()
} else {
disposeView()
}
const content = show ? ifYes : ifNot
if (content) { if (content) {
currentView = Render(() => isFunc(content) ? content() : content); currentView = Render(() => isFunc(content) ? content() : content)
root.insertBefore(currentView.container, anchor); root.insertBefore(currentView.container, anchor)
if (trans?.in) trans.in(currentView.container); if (trans?.in) trans.in(currentView.container)
} }
} }
); )
return root; return root
}; }
// For
const For = (src, itemFn, keyFn) => { const For = (src, itemFn, keyFn) => {
const anchor = doc.createTextNode(""); const anchor = doc.createTextNode("")
const root = Tag("div", { style: "display:contents" }, [anchor]); const root = Tag("div", { style: "display:contents" }, [anchor])
let cache = new Map(); let cache = new Map()
Watch(() => (isFunc(src) ? src() : src) || [], (items) => { Watch(() => (isFunc(src) ? src() : src) || [], items => {
const nextCache = new Map(); const nextCache = new Map()
const nextOrder = []; const nextOrder = []
const newItems = items || []; const newItems = items || []
for (let i = 0; i < newItems.length; i++) { for (let i = 0; i < newItems.length; i++) {
const item = newItems[i]; const item = newItems[i]
const key = keyFn ? keyFn(item, i) : (item?.id ?? i); const key = keyFn ? keyFn(item, i) : (item?.id ?? i)
let view = cache.get(key); let view = cache.get(key)
if (!view) view = Render(() => itemFn(item, i)); else cache.delete(key); if (!view) view = Render(() => itemFn(item, i))
nextCache.set(key, view); else cache.delete(key)
nextOrder.push(view); nextCache.set(key, view)
nextOrder.push(view)
} }
cache.forEach(view => view.destroy()); cache.forEach(view => view.destroy())
let lastRef = anchor; let lastRef = anchor
for (let i = nextOrder.length - 1; i >= 0; i--) { for (let i = nextOrder.length - 1; i >= 0; i--) {
const view = nextOrder[i]; const view = nextOrder[i]
const node = view.container; const node = view.container
if (node.nextSibling !== lastRef) root.insertBefore(node, lastRef); if (node.nextSibling !== lastRef) root.insertBefore(node, lastRef)
lastRef = node; lastRef = node
} }
cache = nextCache; cache = nextCache
}); })
return root; return root
}; }
// Router
const Router = routes => { const Router = routes => {
const getHash = () => window.location.hash.slice(1) || "/"; const getHash = () => window.location.hash.slice(1) || "/"
const path = $(getHash()); const path = $(getHash())
const handler = () => path(getHash()); const handler = () => path(getHash())
window.addEventListener("hashchange", handler); window.addEventListener("hashchange", handler)
onUnmount(() => window.removeEventListener("hashchange", handler)); onUnmount(() => window.removeEventListener("hashchange", handler))
const outlet = Tag("div", { class: "router-outlet" }); const outlet = Tag("div", { class: "router-outlet" })
let currentView = null; let currentView = null
Watch([path], () => { Watch([path], () => {
const cur = path(); const cur = path()
const route = routes.find(r => { const route = routes.find(r => {
const p1 = r.path.split("/").filter(Boolean); const p1 = r.path.split("/").filter(Boolean)
const p2 = cur.split("/").filter(Boolean); const p2 = cur.split("/").filter(Boolean)
return p1.length === p2.length && p1.every((p, i) => p[0] === ":" || p === p2[i]); return p1.length === p2.length && p1.every((p, i) => p[0] === ":" || p === p2[i])
}) || routes.find(r => r.path === "*"); }) || routes.find(r => r.path === "*")
if (route) { if (route) {
currentView?.destroy(); currentView?.destroy()
const params = {}; const params = {}
route.path.split("/").filter(Boolean).forEach((p, i) => { if (p[0] === ":") params[p.slice(1)] = cur.split("/").filter(Boolean)[i]; }); route.path.split("/").filter(Boolean).forEach((p, i) => {
Router.params(params); if (p[0] === ":") params[p.slice(1)] = cur.split("/").filter(Boolean)[i]
currentView = Render(() => isFunc(route.component) ? route.component(params) : route.component); })
outlet.replaceChildren(currentView.container); Router.params(params)
currentView = Render(() => isFunc(route.component) ? route.component(params) : route.component)
outlet.replaceChildren(currentView.container)
} }
}); })
return outlet; return outlet
}; }
Router.params = $({}); Router.params = $({})
Router.to = p => window.location.hash = p.replace(/^#?\/?/, "#/"); Router.to = p => window.location.hash = p.replace(/^#?\/?/, "#/")
Router.back = () => window.history.back(); Router.back = () => window.history.back()
Router.path = () => window.location.hash.replace(/^#/, "") || "/"; Router.path = () => window.location.hash.replace(/^#/, "") || "/"
// Mount
const Mount = (comp, target) => { const Mount = (comp, target) => {
const t = typeof target === "string" ? doc.querySelector(target) : target; const t = typeof target === "string" ? doc.querySelector(target) : target
if (!t) return; if (!t) return
if (MOUNTED_NODES.has(t)) MOUNTED_NODES.get(t).destroy(); if (MOUNTED_NODES.has(t)) MOUNTED_NODES.get(t).destroy()
const inst = Render(isFunc(comp) ? comp : () => comp); const inst = Render(isFunc(comp) ? comp : () => comp)
t.replaceChildren(inst.container); t.replaceChildren(inst.container)
MOUNTED_NODES.set(t, inst); MOUNTED_NODES.set(t, inst)
return inst; return inst
}
const set = (signal, path, value) => {
if (value === undefined) {
signal(isFunc(path) ? path(signal()) : path);
} else {
const keys = path.split('.');
const last = keys.pop();
const current = signal();
const obj = keys.reduce((o, k) => ({ ...o, [k]: { ...o[k] } }), { ...current });
obj[last] = value;
signal(obj);
}
}; };
const SigPro = Object.freeze({ $, $$, Watch, Tag, Render, If, For, Router, Mount, onMount, onUnmount }); const SigPro = Object.freeze({ $, Watch, Tag, Render, If, For, Router, Mount, onMount, onUnmount, set })
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
Object.assign(window, SigPro); Object.assign(window, SigPro)
"div span p h1 h2 h3 h4 h5 h6 br hr section article aside nav main header footer ul ol li a em strong pre code form label input textarea select button img svg" "div span p h1 h2 h3 h4 h5 h6 br hr section article aside nav main header footer ul ol li a em strong pre code form label input textarea select button img svg"
.split(" ").forEach(t => window[t[0].toUpperCase() + t.slice(1)] = (p, c) => SigPro.Tag(t, p, c)); .split(" ").forEach(t => window[t[0].toUpperCase() + t.slice(1)] = (p, c) => SigPro.Tag(t, p, c))
} }
export { $, $$, Watch, Tag, Render, If, For, Router, Mount, onMount, onUnmount };
export default SigPro; export { $, Watch, Tag, Render, If, For, Router, Mount, onMount, onUnmount, set }
export default SigPro