From a43b624e00ec36a2fd3a430de9f0443d3cb213b0 Mon Sep 17 00:00:00 2001 From: natxocc Date: Tue, 14 Apr 2026 08:38:00 +0200 Subject: [PATCH] Compacted Size --- sigpro2.js | 431 +++++++++++++++-------------------------------------- 1 file changed, 118 insertions(+), 313 deletions(-) diff --git a/sigpro2.js b/sigpro2.js index 74ce884..3ad0179 100644 --- a/sigpro2.js +++ b/sigpro2.js @@ -1,18 +1,11 @@ -// sigpro 1.2.0 +// sigpro 1.2.0 (Micro-Optimizado) 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))) -let activeEffect = null -let activeOwner = null -let isFlushing = false -let batchDepth = 0 -const effectQueue = new Set() -const proxyCache = new WeakMap() -const ITER = Symbol('iter') -const MOUNTED_NODES = new WeakMap() +let activeEffect = null, activeOwner = null, isFlushing = false, batchDepth = 0 +const effectQueue = new Set(), proxyCache = new WeakMap(), ITER = Symbol(), MOUNTED_NODES = new WeakMap() const dispose = eff => { if (!eff || eff._disposed) return @@ -20,28 +13,14 @@ const dispose = eff => { const stack = [eff] while (stack.length) { const e = stack.pop() - if (e._cleanups) { - e._cleanups.forEach(fn => fn()) - 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() - } + e._cleanups?.forEach(fn => fn()); e._cleanups?.clear() + e._children?.forEach(c => stack.push(c)); e._children?.clear() + e._deps?.forEach(d => d.delete(e)); e._deps?.clear() } } -const onMount = fn => { - if (activeOwner) (activeOwner._mounts ||= []).push(fn) -} - -const onUnmount = fn => { - if (activeOwner) (activeOwner._cleanups ||= new Set()).add(fn) -} +const onMount = fn => activeOwner && (activeOwner._mounts ||= []).push(fn) +const onUnmount = fn => activeOwner && (activeOwner._cleanups ||= new Set()).add(fn) const untrack = fn => { const p = activeEffect @@ -52,71 +31,44 @@ const untrack = fn => { const createEffect = (fn, isComputed = false) => { const effect = () => { if (effect._disposed) return - if (effect._deps) effect._deps.forEach(s => s.delete(effect)) - if (effect._cleanups) { - effect._cleanups.forEach(c => c()) - effect._cleanups.clear() - } - const prevEffect = activeEffect - const prevOwner = activeOwner + effect._deps?.forEach(s => s.delete(effect)) + effect._cleanups?.forEach(c => c()); effect._cleanups?.clear() + + const prevEff = activeEffect, prevOwn = activeOwner activeEffect = activeOwner = effect - try { - return effect._result = fn() - } catch (e) { - console.error("[SigPro]", e) - } finally { - activeEffect = prevEffect - activeOwner = prevOwner - } + try { return effect._result = fn() } + catch (e) { console.error("[SigPro]", e) } + finally { activeEffect = prevEff; activeOwner = prevOwn } } - 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) + Object.assign(effect, { _disposed: false, _isComputed: isComputed, _mounts: [], _depth: activeEffect ? activeEffect._depth + 1 : 0 }) + activeOwner && (activeOwner._children ||= new Set()).add(effect) return effect } const flush = () => { if (isFlushing) return isFlushing = true - const sorted = Array.from(effectQueue).sort((a, b) => a._depth - b._depth) + Array.from(effectQueue).sort((a, b) => a._depth - b._depth).forEach(e => !e._disposed && e()) effectQueue.clear() - for (const e of sorted) if (!e._disposed) e() isFlushing = false } const Batch = fn => { batchDepth++ - try { - return fn() - } finally { - batchDepth-- - if (batchDepth === 0 && effectQueue.size > 0 && !isFlushing) { - flush() - } - } + try { return fn() } finally { !--batchDepth && effectQueue.size && !isFlushing && flush() } } const trackUpdate = (subs, trigger = false) => { if (!trigger && activeEffect && !activeEffect._disposed) { - subs.add(activeEffect) - ; (activeEffect._deps ||= new Set()).add(subs) + subs.add(activeEffect); (activeEffect._deps ||= new Set()).add(subs) } else if (trigger) { - let hasQueue = false + let hasQ = false subs.forEach(e => { if (e === activeEffect || e._disposed) return - if (e._isComputed) { - e._dirty = true - if (e._subs) trackUpdate(e._subs, true) - } else { - effectQueue.add(e) - hasQueue = true - } + if (e._isComputed) { e._dirty = true; e._subs && trackUpdate(e._subs, true) } + else { effectQueue.add(e); hasQ = true } }) - if (hasQueue && !isFlushing && batchDepth === 0) queueMicrotask(flush) + hasQ && !isFlushing && !batchDepth && queueMicrotask(flush) } } @@ -126,169 +78,87 @@ const $ = (val, key = null) => { let cache, dirty = true const computed = () => { if (dirty) { - const prev = activeEffect - activeEffect = computed + const prev = activeEffect; activeEffect = computed try { const next = val() - if (!Object.is(cache, next)) { - cache = next - dirty = false - trackUpdate(subs, true) - } + if (!Object.is(cache, next)) { cache = next; dirty = false; trackUpdate(subs, true) } } finally { activeEffect = prev } } - trackUpdate(subs) - return cache + return trackUpdate(subs), cache } - computed._isComputed = true - computed._subs = subs - computed._dirty = true - computed._deps = null - computed._disposed = false - computed.markDirty = () => { dirty = true } - computed.stop = () => { - computed._disposed = true - if (computed._deps) { - computed._deps.forEach(depSet => depSet.delete(computed)) - computed._deps.clear() - } - subs.clear() - } - if (activeOwner) onUnmount(computed.stop) - return computed + Object.assign(computed, { + _isComputed: true, _subs: subs, _dirty: true, _disposed: false, + markDirty: () => dirty = true, + stop: () => { computed._disposed = true; computed._deps?.forEach(d => d.delete(computed)); computed._deps?.clear(); subs.clear() } + }) + return onUnmount(computed.stop), 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) => { 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)) + val = next; key && localStorage.setItem(key, JSON.stringify(val)) trackUpdate(subs, true) } } - trackUpdate(subs) - return val + return trackUpdate(subs), val } } -const $$ = (target) => { +const $$ = target => { if (!isObj(target)) return target - - if (proxyCache.has(target)) return proxyCache.get(target) + let p = proxyCache.get(target) + if (p) return p const subsMap = new Map() - const getSubs = (k) => { - let s = subsMap.get(k) - if (!s) subsMap.set(k, s = new Set()) - return s - } + const getSubs = k => subsMap.get(k) || (subsMap.set(k, p = new Set()), p) - const proxy = new Proxy(target, { - get(t, k) { - trackUpdate(getSubs(k)) - return $$(t[k]) - }, - set(t, k, v) { - const isNew = !(k in t) + p = new Proxy(target, { + get: (t, k) => (trackUpdate(getSubs(k)), $$(t[k])), + set: (t, k, v) => { if (!Object.is(t[k], v)) { - t[k] = v + const isNew = !(k in t); t[k] = v trackUpdate(getSubs(k), true) - if (isNew) trackUpdate(getSubs(ITER), true) + isNew && trackUpdate(getSubs(ITER), true) } return true }, - deleteProperty(t, k) { - const res = Reflect.deleteProperty(t, k) - if (res) { - trackUpdate(getSubs(k), true) - trackUpdate(getSubs(ITER), true) - } - return res - }, - ownKeys(t) { - trackUpdate(getSubs(ITER)) - return Reflect.ownKeys(t) - } + deleteProperty: (t, k) => Reflect.deleteProperty(t, k) && (trackUpdate(getSubs(k), true), trackUpdate(getSubs(ITER), true), true), + ownKeys: t => (trackUpdate(getSubs(ITER)), Reflect.ownKeys(t)) }) - - proxyCache.set(target, proxy) - return proxy + + proxyCache.set(target, p) + return p } const Watch = (sources, cb) => { - if (cb === undefined) { - const effect = createEffect(sources) - effect() - return () => dispose(effect) - } - const effect = createEffect(() => { - const vals = Array.isArray(sources) ? sources.map(s => s()) : sources() - untrack(() => cb(vals)) - }) - effect() - return () => dispose(effect) + const effect = createEffect(cb === undefined ? sources : () => untrack(() => cb(Array.isArray(sources) ? sources.map(s => s()) : sources()))) + return effect(), () => dispose(effect) } const cleanupNode = node => { - if (node._cleanups) { - node._cleanups.forEach(fn => fn()) - node._cleanups.clear() - } - if (node._ownerEffect) dispose(node._ownerEffect) - if (node.childNodes) node.childNodes.forEach(cleanupNode) + node._cleanups?.forEach(fn => fn()); node._cleanups?.clear() + node._ownerEffect && dispose(node._ownerEffect) + node.childNodes?.forEach(cleanupNode) } const DANGEROUS_PROTOCOL = /^\s*(javascript|data|vbscript):/i -const isDangerousAttr = key => key === 'src' || key === 'href' || key.startsWith('on') - -const 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 '#' - } - } - return val -} +const validateAttr = (k, v) => v == null || v === false ? null : (k === 'src' || k === 'href' || k.startsWith('on')) && DANGEROUS_PROTOCOL.test(String(v)) ? '#' : v const Tag = (tag, props = {}, children = []) => { - if (props instanceof Node || isArr(props) || !isObj(props)) { - children = props - props = {} - } + if (props instanceof Node || Array.isArray(props) || !isObj(props)) [children, props] = [props, {}] + if (isFunc(tag)) { - const ctx = { _mounts: [], _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() - - const result = effect._result - if (result == null) return null - - const node = (result instanceof Node || (isArr(result) && result.every(n => n instanceof Node))) - ? result - : doc.createTextNode(String(result)) - - const attach = n => { - if (isObj(n) && !n._isRuntime) { - n._mounts = effect._mounts || [] - n._cleanups = effect._cleanups || new Set() - n._ownerEffect = effect - } - } - - isArr(node) ? node.forEach(attach) : attach(node) - return node + const effect = createEffect(() => tag(props, { children, emit: (ev, ...args) => props[`on${ev[0].toUpperCase()}${ev.slice(1)}`]?.(...args) })) + const res = effect() + if (res == null) return null + const node = res instanceof Node || (Array.isArray(res) && res.every(n => n instanceof Node)) ? res : doc.createTextNode(String(res)) + const attach = n => isObj(n) && !n._isRuntime && Object.assign(n, { _mounts: effect._mounts || [], _cleanups: effect._cleanups || new Set(), _ownerEffect: effect }) + return Array.isArray(node) ? node.forEach(attach) : attach(node), node } + 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() @@ -296,16 +166,12 @@ const Tag = (tag, props = {}, children = []) => { for (let k in props) { if (!props.hasOwnProperty(k)) continue 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")) { const ev = k.slice(2).toLowerCase() el.addEventListener(ev, v) const off = () => el.removeEventListener(ev, v) - el._cleanups.add(off) - onUnmount(off) + el._cleanups.add(off); onUnmount(off) } else if (isFunc(v)) { const effect = createEffect(() => { const val = validateAttr(k, v()) @@ -314,147 +180,89 @@ const Tag = (tag, props = {}, children = []) => { else if (k in el && !isSVG) el[k] = val else el.setAttribute(k, val === true ? "" : val) }) - effect() - el._cleanups.add(() => dispose(effect)) - onUnmount(() => dispose(effect)) + effect(); el._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])) + el.addEventListener(k === "checked" ? "change" : "input", ev => v(ev.target[k])) } } else { const val = validateAttr(k, v) - if (val != null) { - if (k in el && !isSVG) el[k] = val - else el.setAttribute(k, val === true ? "" : val) - } + if (val != null) k in el && !isSVG ? el[k] = val : el.setAttribute(k, val === true ? "" : val) } } const append = c => { - if (isArr(c)) return c.forEach(append) + if (Array.isArray(c)) return c.forEach(append) if (isFunc(c)) { - const anchor = doc.createTextNode("") - el.appendChild(anchor) + const anchor = doc.createTextNode(""); el.appendChild(anchor) let currentNodes = [] const effect = createEffect(() => { - const res = c() - const next = (isArr(res) ? res : [res]).map(ensureNode) - currentNodes.forEach(n => { - if (n._isRuntime) n.destroy() - else cleanupNode(n) - if (n.parentNode) n.remove() - }) + const res = c(), next = (Array.isArray(res) ? res : [res]).map(ensureNode) + currentNodes.forEach(n => { n._isRuntime ? n.destroy() : cleanupNode(n); n.parentNode?.remove() }) let ref = anchor for (let i = next.length - 1; i >= 0; i--) { const node = next[i] if (node.parentNode !== ref.parentNode) ref.parentNode?.insertBefore(node, ref) - if (node._mounts) node._mounts.forEach(fn => fn()) - ref = node + node._mounts?.forEach(fn => fn()); ref = node } currentNodes = next }) - effect() - el._cleanups.add(() => dispose(effect)) - onUnmount(() => dispose(effect)) + effect(); el._cleanups.add(() => dispose(effect)); onUnmount(() => dispose(effect)) } else { - const node = ensureNode(c) - el.appendChild(node) - if (node._mounts) node._mounts.forEach(fn => fn()) + const node = ensureNode(c); el.appendChild(node); node._mounts?.forEach(fn => fn()) } } - append(children) - return el + return append(children), el } const Render = renderFn => { - const cleanups = new Set() - const mounts = [] - const previousOwner = activeOwner - const previousEffect = activeEffect + const cleanups = new Set(), mounts = [], prevOwn = activeOwner, prevEff = activeEffect const container = doc.createElement("div") - container.style.display = "contents" + Object.assign(container.style, { display: "contents" }) container.setAttribute("role", "presentation") - activeOwner = { _cleanups: cleanups, _mounts: mounts } - activeEffect = null + activeOwner = { _cleanups: cleanups, _mounts: mounts }; activeEffect = null - const processResult = result => { - if (!result) return - if (result._isRuntime) { - cleanups.add(result.destroy) - container.appendChild(result.container) - } else if (isArr(result)) { - result.forEach(processResult) - } else { - container.appendChild(result instanceof Node ? result : doc.createTextNode(String(result == null ? "" : result))) - } + const process = r => { + if (!r) return + if (r._isRuntime) { cleanups.add(r.destroy); container.appendChild(r.container) } + else if (Array.isArray(r)) r.forEach(process) + else container.appendChild(r instanceof Node ? r : doc.createTextNode(String(r))) } - try { - processResult(renderFn({ onCleanup: fn => cleanups.add(fn) })) - } finally { - activeOwner = previousOwner - activeEffect = previousEffect - } + try { process(renderFn({ onCleanup: fn => cleanups.add(fn) })) } + finally { activeOwner = prevOwn; activeEffect = prevEff } mounts.forEach(fn => fn()) - return { - _isRuntime: true, - container, - destroy: () => { - cleanups.forEach(fn => fn()) - cleanupNode(container) - container.remove() - } - } + return { _isRuntime: true, container, destroy: () => (cleanups.forEach(fn => fn()), cleanupNode(container), container.remove()) } } const If = (cond, ifYes, ifNot = null) => { - const anchor = doc.createTextNode("") - const root = Tag("div", { style: "display:contents" }, [anchor]) - let currentView = null - - Watch( - () => !!(isFunc(cond) ? cond() : cond), - show => { - if (currentView) { - currentView.destroy() - currentView = null - } - - const content = show ? ifYes : ifNot - if (content) { - currentView = Render(() => isFunc(content) ? content() : content) - root.insertBefore(currentView.container, anchor) - } - } - ) - - onUnmount(() => currentView?.destroy()) - return root + const anchor = doc.createTextNode(""), root = Tag("div", { style: "display:contents" }, [anchor]) + let view = null + Watch(() => !!(isFunc(cond) ? cond() : cond), show => { + view?.destroy() + const content = show ? ifYes : ifNot + if (content) { + view = Render(() => isFunc(content) ? content() : content) + root.insertBefore(view.container, anchor) + } else view = null + }) + return onUnmount(() => view?.destroy()), root } const For = (src, itemFn, keyFn) => { - const anchor = doc.createTextNode("") - const root = Tag("div", { style: "display:contents" }, [anchor]) + const anchor = doc.createTextNode(""), root = Tag("div", { style: "display:contents" }, [anchor]) let cache = new Map() Watch(() => (isFunc(src) ? src() : src) || [], items => { - const nextCache = new Map() - const nextOrder = [] - const newItems = items || [] - for (let i = 0; i < newItems.length; i++) { - const item = newItems[i] + const nextCache = new Map(), nextOrder = [] + ;(items || []).forEach((item, i) => { const key = keyFn ? keyFn(item, i) : (item?.id ?? i) - let view = cache.get(key) - if (!view) view = Render(() => itemFn(item, i)) - else cache.delete(key) - nextCache.set(key, view) - nextOrder.push(view) - } + let view = cache.get(key) || Render(() => itemFn(item, i)) + cache.delete(key); nextCache.set(key, view); nextOrder.push(view) + }) cache.forEach(view => view.destroy()) let lastRef = anchor for (let i = nextOrder.length - 1; i >= 0; i--) { - const view = nextOrder[i] - const node = view.container + const node = nextOrder[i].container if (node.nextSibling !== lastRef) root.insertBefore(node, lastRef) lastRef = node } @@ -465,28 +273,26 @@ const For = (src, itemFn, keyFn) => { const Router = routes => { const getHash = () => window.location.hash.slice(1) || "/" - const path = $(getHash()) - const handler = () => path(getHash()) + const path = $(getHash()), handler = () => path(getHash()) window.addEventListener("hashchange", handler) onUnmount(() => window.removeEventListener("hashchange", handler)) + const hook = Tag("div", { class: "router-hook" }) - let currentView = null + let view = null Watch([path], () => { const cur = path() const route = routes.find(r => { - const p1 = r.path.split("/").filter(Boolean) - const p2 = cur.split("/").filter(Boolean) + const p1 = r.path.split("/").filter(Boolean), p2 = cur.split("/").filter(Boolean) return p1.length === p2.length && p1.every((p, i) => p[0] === ":" || p === p2[i]) }) || routes.find(r => r.path === "*") + if (route) { - currentView?.destroy() + view?.destroy() 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) => p[0] === ":" && (params[p.slice(1)] = cur.split("/").filter(Boolean)[i])) Router.params(params) - currentView = Render(() => isFunc(route.component) ? route.component(params) : route.component) - hook.replaceChildren(currentView.container) + view = Render(() => isFunc(route.component) ? route.component(params) : route.component) + hook.replaceChildren(view.container) } }) return hook @@ -501,8 +307,7 @@ const Mount = (comp, target) => { if (!t) return if (MOUNTED_NODES.has(t)) MOUNTED_NODES.get(t).destroy() const inst = Render(isFunc(comp) ? comp : () => comp) - t.replaceChildren(inst.container) - MOUNTED_NODES.set(t, inst) + t.replaceChildren(inst.container); MOUNTED_NODES.set(t, inst) return inst }