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

Este sigpro es optimizado leible y con For muy rapido tipo Sigwork

Browse Source
This commit is contained in:
natxocc
2026-04-13 11:28:14 +02:00
parent d0b55ff354
commit 00b9b8f911
10 changed files with 597 additions and 497 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -46,7 +46,6 @@
Stack: () => Stack,
Select: () => Select,
Router: () => Router,
Render: () => Render,
Rating: () => Rating,
Range: () => Range,
Radio: () => Radio,
@@ -77,34 +76,33 @@
});
// src/sigpro.js
var isFunc = (f) => typeof f === "function";
var isObj = (o) => o && typeof o === "object";
var isFunc = (fn) => typeof fn === "function";
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 = (node) => node?._isRuntime ? node.container : node instanceof Node ? node : doc.createTextNode(node == null ? "" : String(node));
var activeEffect = null;
var activeOwner = null;
var isFlushing = false;
var effectQueue = new Set;
var MOUNTED_NODES = new WeakMap;
var dispose = (eff) => {
if (!eff || eff._disposed)
var dispose = (effect) => {
if (!effect || effect._disposed)
return;
eff._disposed = true;
const stack = [eff];
effect._disposed = true;
const stack = [effect];
while (stack.length) {
const e = stack.pop();
if (e._cleanups) {
e._cleanups.forEach((fn) => fn());
e._cleanups.clear();
const eff = stack.pop();
if (eff._cleanups) {
eff._cleanups.forEach((fn) => fn());
eff._cleanups.clear();
}
if (e._children) {
e._children.forEach((child) => stack.push(child));
e._children.clear();
if (eff._children) {
eff._children.forEach((child) => stack.push(child));
eff._children.clear();
}
if (e._deps) {
e._deps.forEach((depSet) => depSet.delete(e));
e._deps.clear();
if (eff._deps) {
eff._deps.forEach((depSet) => depSet.delete(eff));
eff._deps.clear();
}
}
};
@@ -119,7 +117,7 @@
if (effect._deps)
effect._deps.forEach((depSet) => depSet.delete(effect));
if (effect._cleanups) {
effect._cleanups.forEach((cl) => cl());
effect._cleanups.forEach((cleanup) => cleanup());
effect._cleanups.clear();
}
const prevEffect = activeEffect;
@@ -151,9 +149,9 @@
isFlushing = true;
const sorted = Array.from(effectQueue).sort((a, b) => a._depth - b._depth);
effectQueue.clear();
for (const e of sorted)
if (!e._disposed)
e();
for (const eff of sorted)
if (!eff._disposed)
eff();
isFlushing = false;
};
var trackUpdate = (subs, trigger = false) => {
@@ -162,15 +160,15 @@
(activeEffect._deps ||= new Set).add(subs);
} else if (trigger) {
let hasQueue = false;
subs.forEach((e) => {
if (e === activeEffect || e._disposed)
subs.forEach((eff) => {
if (eff === activeEffect || eff._disposed)
return;
if (e._isComputed) {
e._dirty = true;
if (e._subs)
trackUpdate(e._subs, true);
if (eff._isComputed) {
eff._dirty = true;
if (eff._subs)
trackUpdate(eff._subs, true);
} else {
effectQueue.add(e);
effectQueue.add(eff);
hasQueue = true;
}
});
@@ -179,28 +177,28 @@
}
};
var untrack = (fn) => {
const p = activeEffect;
const prev = activeEffect;
activeEffect = null;
try {
return fn();
} finally {
activeEffect = p;
activeEffect = prev;
}
};
var onMount = (fn) => {
if (activeOwner)
(activeOwner._mounts ||= []).push(fn);
};
var $2 = (val, key = null) => {
var $2 = (value, storageKey = null) => {
const subs = new Set;
if (isFunc(val)) {
if (isFunc(value)) {
let cache, dirty = true;
const computed = () => {
if (dirty) {
const prev = activeEffect;
activeEffect = computed;
try {
const next = val();
const next = value();
if (!Object.is(cache, next)) {
cache = next;
dirty = false;
@@ -233,33 +231,33 @@
onUnmount(computed.stop);
return computed;
}
if (key)
if (storageKey)
try {
val = JSON.parse(localStorage.getItem(key)) ?? val;
value = JSON.parse(localStorage.getItem(storageKey)) ?? value;
} catch (e) {}
return (...args) => {
if (args.length) {
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));
const next = isFunc(args[0]) ? args[0](value) : args[0];
if (!Object.is(value, next)) {
value = next;
if (storageKey)
localStorage.setItem(storageKey, JSON.stringify(value));
trackUpdate(subs, true);
}
}
trackUpdate(subs);
return val;
return value;
};
};
var Watch2 = (sources, cb) => {
if (cb === undefined) {
var Watch2 = (sources, callback) => {
if (callback === undefined) {
const effect2 = createEffect(sources);
effect2();
return () => dispose(effect2);
}
const effect = createEffect(() => {
const vals = Array.isArray(sources) ? sources.map((s) => s()) : sources();
untrack(() => cb(vals));
const vals = isArr(sources) ? sources.map((src) => src()) : sources();
untrack(() => callback(vals));
});
effect();
return () => dispose(effect);
@@ -279,17 +277,12 @@
var validateAttr = (key, val) => {
if (val == null || val === false)
return null;
if (isDangerousAttr(key)) {
const sVal = String(val);
if (DANGEROUS_PROTOCOL.test(sVal)) {
console.warn(`[SigPro] Bloqueado protocolo peligroso en ${key}`);
return "#";
}
}
if (isDangerousAttr(key) && DANGEROUS_PROTOCOL.test(String(val)))
return "#";
return val;
};
var Tag2 = (tag, props = {}, children = []) => {
if (props instanceof Node || isArr(props) || !isObj(props)) {
if (props instanceof Node || isArr(props) || props && typeof props !== "object") {
children = props;
props = {};
}
@@ -307,7 +300,13 @@
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);
const attachLifecycle = (node) => {
if (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;
@@ -315,61 +314,61 @@
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) {
if (!props.hasOwnProperty(k))
const isSVG = /^(svg|path|circle|rect|line|polyline|polygon|g|defs|text|tspan|use|image|ellipse|foreignObject|linearGradient|radialGradient|stop|pattern|mask|clipPath|filter|feColorMatrix|feBlend|feGaussianBlur|animate|animateTransform|set|metadata|desc|title|symbol|marker|view)$/i.test(tag);
const elem = isSVG ? doc.createElementNS("http://www.w3.org/2000/svg", tag) : doc.createElement(tag);
elem._cleanups = new Set;
for (let key in props) {
if (!props.hasOwnProperty(key))
continue;
let v = props[k];
if (k === "ref") {
isFunc(v) ? v(el) : v.current = el;
let value = props[key];
if (key === "ref") {
isFunc(value) ? value(elem) : value.current = elem;
continue;
}
if (k.startsWith("on")) {
const ev = k.slice(2).toLowerCase();
el.addEventListener(ev, v);
const off = () => el.removeEventListener(ev, v);
el._cleanups.add(off);
if (key.startsWith("on")) {
const event = key.slice(2).toLowerCase();
elem.addEventListener(event, value);
const off = () => elem.removeEventListener(event, value);
elem._cleanups.add(off);
onUnmount(off);
} else if (isFunc(v)) {
} else if (isFunc(value)) {
const effect = createEffect(() => {
const val = validateAttr(k, v());
if (k === "class")
el.className = val || "";
const val = validateAttr(key, value());
if (key === "class")
elem.className = val || "";
else if (val == null)
el.removeAttribute(k);
else if (k in el && !isSVG)
el[k] = val;
elem.removeAttribute(key);
else if (key in elem && !isSVG)
elem[key] = val;
else
el.setAttribute(k, val === true ? "" : val);
elem.setAttribute(key, val === true ? "" : val);
});
effect();
el._cleanups.add(() => dispose(effect));
elem._cleanups.add(() => dispose(effect));
onUnmount(() => dispose(effect));
if (/^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName) && (k === "value" || k === "checked")) {
const evType = k === "checked" ? "change" : "input";
el.addEventListener(evType, (ev) => v(ev.target[k]));
if (/^(INPUT|TEXTAREA|SELECT)$/.test(elem.tagName) && (key === "value" || key === "checked")) {
const eventType = key === "checked" ? "change" : "input";
elem.addEventListener(eventType, (ev) => value(ev.target[key]));
}
} else {
const val = validateAttr(k, v);
const val = validateAttr(key, value);
if (val != null) {
if (k in el && !isSVG)
el[k] = val;
if (key in elem && !isSVG)
elem[key] = val;
else
el.setAttribute(k, val === true ? "" : val);
elem.setAttribute(key, val === true ? "" : val);
}
}
}
const append = (c) => {
if (isArr(c))
return c.forEach(append);
if (isFunc(c)) {
const append = (child) => {
if (isArr(child))
return child.forEach(append);
if (isFunc(child)) {
const anchor = doc.createTextNode("");
el.appendChild(anchor);
elem.appendChild(anchor);
let currentNodes = [];
const effect = createEffect(() => {
const res = c();
const res = child();
const next = (isArr(res) ? res : [res]).map(ensureNode);
currentNodes.forEach((n) => {
if (n._isRuntime)
@@ -391,43 +390,55 @@
currentNodes = next;
});
effect();
el._cleanups.add(() => dispose(effect));
elem._cleanups.add(() => dispose(effect));
onUnmount(() => dispose(effect));
} else {
const node = ensureNode(c);
el.appendChild(node);
const node = ensureNode(child);
elem.appendChild(node);
if (node._mounts)
node._mounts.forEach((fn) => fn());
}
};
append(children);
return el;
return elem;
};
var Render = (renderFn) => {
var createView = (renderFn) => {
const cleanups = new Set;
const mounts = [];
const previousOwner = activeOwner;
activeOwner = { _cleanups: cleanups, _mounts: mounts };
const result = renderFn({ onCleanup: (fn) => cleanups.add(fn) });
activeOwner = previousOwner;
if (result == null)
return null;
if (result instanceof Node) {
mounts.forEach((fn) => fn());
return {
_isRuntime: true,
container: result,
destroy: () => {
cleanups.forEach((fn) => fn());
cleanupNode(result);
result.remove();
}
};
}
const container = doc.createElement("div");
container.style.display = "contents";
container.setAttribute("role", "presentation");
activeOwner = { _cleanups: cleanups, _mounts: mounts };
const processResult = (result) => {
if (!result)
const process = (node) => {
if (!node)
return;
if (result._isRuntime) {
cleanups.add(result.destroy);
container.appendChild(result.container);
} else if (isArr(result)) {
result.forEach(processResult);
if (node._isRuntime) {
cleanups.add(node.destroy);
container.appendChild(node.container);
} else if (isArr(node)) {
node.forEach(process);
} else {
container.appendChild(result instanceof Node ? result : doc.createTextNode(String(result == null ? "" : result)));
container.appendChild(node instanceof Node ? node : doc.createTextNode(String(node)));
}
};
try {
processResult(renderFn({ onCleanup: (fn) => cleanups.add(fn) }));
} finally {
activeOwner = previousOwner;
}
process(result);
mounts.forEach((fn) => fn());
return {
_isRuntime: true,
@@ -469,7 +480,7 @@
}
const content = show ? ifYes : ifNot;
if (content) {
currentView = Render(() => isFunc(content) ? content() : content);
currentView = createView(() => isFunc(content) ? content() : content);
root.insertBefore(currentView.container, anchor);
if (trans?.in)
trans.in(currentView.container);
@@ -490,7 +501,7 @@
const key = keyFn ? keyFn(item, i) : item?.id ?? i;
let view = cache.get(key);
if (!view)
view = Render(() => itemFn(item, i));
view = createView(() => itemFn(item, i));
else
cache.delete(key);
nextCache.set(key, view);
@@ -520,9 +531,9 @@
Watch2([path], () => {
const cur = path();
const route = routes.find((r) => {
const p1 = r.path.split("/").filter(Boolean);
const p2 = cur.split("/").filter(Boolean);
return p1.length === p2.length && p1.every((p, i) => p[0] === ":" || p === p2[i]);
const rParts = r.path.split("/").filter(Boolean);
const curParts = cur.split("/").filter(Boolean);
return rParts.length === curParts.length && rParts.every((p, i) => p[0] === ":" || p === curParts[i]);
}) || routes.find((r) => r.path === "*");
if (route) {
currentView?.destroy();
@@ -532,14 +543,14 @@
params[p.slice(1)] = cur.split("/").filter(Boolean)[i];
});
Router.params(params);
currentView = Render(() => isFunc(route.component) ? route.component(params) : route.component);
currentView = createView(() => isFunc(route.component) ? route.component(params) : route.component);
outlet.replaceChildren(currentView.container);
}
});
return outlet;
};
Router.params = $2({});
Router.to = (p) => window.location.hash = p.replace(/^#?\/?/, "#/");
Router.to = (path) => window.location.hash = path.replace(/^#?\/?/, "#/");
Router.back = () => window.history.back();
Router.path = () => window.location.hash.replace(/^#/, "") || "/";
var Mount2 = (comp, target) => {
@@ -548,12 +559,24 @@
return;
if (MOUNTED_NODES.has(t))
MOUNTED_NODES.get(t).destroy();
const inst = Render(isFunc(comp) ? comp : () => comp);
const inst = createView(() => isFunc(comp) ? comp() : comp);
t.replaceChildren(inst.container);
MOUNTED_NODES.set(t, inst);
return inst;
};
var SigPro = Object.freeze({ $: $2, Watch: Watch2, Tag: Tag2, Render, If: If2, For: For2, Router, Mount: Mount2, onMount, onUnmount });
var 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);
}
};
var SigPro = Object.freeze({ $: $2, Watch: Watch2, Tag: Tag2, If: If2, For: For2, Router, Mount: Mount2, onMount, onUnmount, set });
if (typeof window !== "undefined") {
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));