diff --git a/sigpro2.js b/sigpro2.js index 3ad0179..4d4a23c 100644 --- a/sigpro2.js +++ b/sigpro2.js @@ -1,11 +1,18 @@ -// sigpro 1.2.0 (Micro-Optimizado) +// sigpro 1.2.0 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, activeOwner = null, isFlushing = false, batchDepth = 0 -const effectQueue = new Set(), proxyCache = new WeakMap(), ITER = Symbol(), MOUNTED_NODES = new WeakMap() +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() const dispose = eff => { if (!eff || eff._disposed) return @@ -13,14 +20,28 @@ const dispose = eff => { const stack = [eff] while (stack.length) { const e = stack.pop() - 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() + 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() + } } } -const onMount = fn => activeOwner && (activeOwner._mounts ||= []).push(fn) -const onUnmount = fn => activeOwner && (activeOwner._cleanups ||= new Set()).add(fn) +const onMount = fn => { + if (activeOwner) (activeOwner._mounts ||= []).push(fn) +} + +const onUnmount = fn => { + if (activeOwner) (activeOwner._cleanups ||= new Set()).add(fn) +} const untrack = fn => { const p = activeEffect @@ -31,44 +52,72 @@ const untrack = fn => { const createEffect = (fn, isComputed = false) => { const effect = () => { if (effect._disposed) return - effect._deps?.forEach(s => s.delete(effect)) - effect._cleanups?.forEach(c => c()); effect._cleanups?.clear() - - const prevEff = activeEffect, prevOwn = activeOwner + 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 activeEffect = activeOwner = effect - try { return effect._result = fn() } - catch (e) { console.error("[SigPro]", e) } - finally { activeEffect = prevEff; activeOwner = prevOwn } + try { + return effect._result = fn() + } catch (e) { + console.error("[SigPro]", e) + } finally { + activeEffect = prevEffect + activeOwner = prevOwner + } } - Object.assign(effect, { _disposed: false, _isComputed: isComputed, _mounts: [], _depth: activeEffect ? activeEffect._depth + 1 : 0 }) - activeOwner && (activeOwner._children ||= new Set()).add(effect) + 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 = () => { if (isFlushing) return isFlushing = true - Array.from(effectQueue).sort((a, b) => a._depth - b._depth).forEach(e => !e._disposed && e()) + const sorted = Array.from(effectQueue).sort((a, b) => a._depth - b._depth) effectQueue.clear() + for (const e of sorted) if (!e._disposed) e() isFlushing = false } const Batch = fn => { batchDepth++ - try { return fn() } finally { !--batchDepth && effectQueue.size && !isFlushing && flush() } + try { + return fn() + } finally { + batchDepth-- + if (batchDepth === 0 && effectQueue.size > 0 && !isFlushing) { + flush() + } + } } const trackUpdate = (subs, trigger = false) => { if (!trigger && activeEffect && !activeEffect._disposed) { - subs.add(activeEffect); (activeEffect._deps ||= new Set()).add(subs) - } else if (trigger) { - let hasQ = false - subs.forEach(e => { - if (e === activeEffect || e._disposed) return - if (e._isComputed) { e._dirty = true; e._subs && trackUpdate(e._subs, true) } - else { effectQueue.add(e); hasQ = true } - }) - hasQ && !isFlushing && !batchDepth && queueMicrotask(flush) + subs.add(activeEffect) + ; (activeEffect._deps ||= new Set()).add(subs) + } else if (trigger && subs.size > 0) { + let hasQueue = false + // Optimización: for...of evita el overhead de crear callbacks + for (const e of subs) { + if (e === activeEffect || e._disposed) continue + if (e._isComputed) { + e._dirty = true + if (e._subs) trackUpdate(e._subs, true) + } else { + effectQueue.add(e) + hasQueue = true + } + } + if (hasQueue && !isFlushing && batchDepth === 0) queueMicrotask(flush) } } @@ -78,87 +127,174 @@ 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 } } - return trackUpdate(subs), cache + trackUpdate(subs) + return cache } - 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 + 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 } - - 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; key && localStorage.setItem(key, JSON.stringify(val)) + val = next + if (key) localStorage.setItem(key, JSON.stringify(val)) trackUpdate(subs, true) } } - return trackUpdate(subs), val + trackUpdate(subs) + return val } } -const $$ = target => { +const $$ = (target) => { if (!isObj(target)) return target - let p = proxyCache.get(target) - if (p) return p + + let proxy = proxyCache.get(target) + if (proxy) return proxy const subsMap = new Map() - const getSubs = k => subsMap.get(k) || (subsMap.set(k, p = new Set()), p) + const getSubs = (k) => { + let s = subsMap.get(k) + if (!s) subsMap.set(k, (s = new Set())) + return s + } - p = new Proxy(target, { - get: (t, k) => (trackUpdate(getSubs(k)), $$(t[k])), - set: (t, k, v) => { - if (!Object.is(t[k], v)) { - const isNew = !(k in t); t[k] = v - trackUpdate(getSubs(k), true) - isNew && trackUpdate(getSubs(ITER), true) - } - return true + proxy = new Proxy(target, { + get(t, k, receiver) { + // Ignoramos symbols internos de JS para evitar fugas/ciclos + if (typeof k !== 'symbol') trackUpdate(getSubs(k)) + // Reflect y receiver preservan el 'this' si el target tiene getters + return $$(Reflect.get(t, k, receiver)) }, - deleteProperty: (t, k) => Reflect.deleteProperty(t, k) && (trackUpdate(getSubs(k), true), trackUpdate(getSubs(ITER), true), true), - ownKeys: t => (trackUpdate(getSubs(ITER)), Reflect.ownKeys(t)) + set(t, k, v, receiver) { + const isNew = !Reflect.has(t, k) + const oldV = Reflect.get(t, k, receiver) + const result = Reflect.set(t, k, v, receiver) + + if (result && !Object.is(oldV, v)) { + trackUpdate(getSubs(k), true) + if (isNew) trackUpdate(getSubs(ITER), true) + } + return result + }, + deleteProperty(t, k) { + const result = Reflect.deleteProperty(t, k) + if (result) { + trackUpdate(getSubs(k), true) + trackUpdate(getSubs(ITER), true) + } + return result + }, + ownKeys(t) { + trackUpdate(getSubs(ITER)) + return Reflect.ownKeys(t) + } }) - - proxyCache.set(target, p) - return p + + proxyCache.set(target, proxy) + return proxy } const Watch = (sources, cb) => { - const effect = createEffect(cb === undefined ? sources : () => untrack(() => cb(Array.isArray(sources) ? sources.map(s => s()) : sources()))) - return effect(), () => dispose(effect) + 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 cleanupNode = node => { - node._cleanups?.forEach(fn => fn()); node._cleanups?.clear() - node._ownerEffect && dispose(node._ownerEffect) - node.childNodes?.forEach(cleanupNode) + if (node._cleanups) { + node._cleanups.forEach(fn => fn()) + node._cleanups.clear() + } + if (node._ownerEffect) dispose(node._ownerEffect) + if (node.childNodes) node.childNodes.forEach(cleanupNode) } const DANGEROUS_PROTOCOL = /^\s*(javascript|data|vbscript):/i -const validateAttr = (k, v) => v == null || v === false ? null : (k === 'src' || k === 'href' || k.startsWith('on')) && DANGEROUS_PROTOCOL.test(String(v)) ? '#' : v +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 Tag = (tag, props = {}, children = []) => { - if (props instanceof Node || Array.isArray(props) || !isObj(props)) [children, props] = [props, {}] - - if (isFunc(tag)) { - 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 + if (props instanceof Node || isArr(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 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() @@ -166,12 +302,16 @@ 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()) @@ -180,89 +320,147 @@ 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")) { - el.addEventListener(k === "checked" ? "change" : "input", ev => v(ev.target[k])) + const evType = k === "checked" ? "change" : "input" + el.addEventListener(evType, ev => v(ev.target[k])) } } else { const val = validateAttr(k, v) - if (val != null) k in el && !isSVG ? el[k] = val : el.setAttribute(k, val === true ? "" : val) + if (val != null) { + if (k in el && !isSVG) el[k] = val + else el.setAttribute(k, val === true ? "" : val) + } } } const append = c => { - if (Array.isArray(c)) return c.forEach(append) + if (isArr(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(), next = (Array.isArray(res) ? res : [res]).map(ensureNode) - currentNodes.forEach(n => { n._isRuntime ? n.destroy() : cleanupNode(n); n.parentNode?.remove() }) + 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() + }) 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) - node._mounts?.forEach(fn => fn()); ref = node + if (node._mounts) 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); node._mounts?.forEach(fn => fn()) + const node = ensureNode(c) + el.appendChild(node) + if (node._mounts) node._mounts.forEach(fn => fn()) } } - return append(children), el + append(children) + return el } const Render = renderFn => { - const cleanups = new Set(), mounts = [], prevOwn = activeOwner, prevEff = activeEffect + const cleanups = new Set() + const mounts = [] + const previousOwner = activeOwner + const previousEffect = activeEffect const container = doc.createElement("div") - Object.assign(container.style, { display: "contents" }) + container.style.display = "contents" container.setAttribute("role", "presentation") - activeOwner = { _cleanups: cleanups, _mounts: mounts }; activeEffect = null + activeOwner = { _cleanups: cleanups, _mounts: mounts } + activeEffect = null - 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))) + 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))) + } } - try { process(renderFn({ onCleanup: fn => cleanups.add(fn) })) } - finally { activeOwner = prevOwn; activeEffect = prevEff } + try { + processResult(renderFn({ onCleanup: fn => cleanups.add(fn) })) + } finally { + activeOwner = previousOwner + activeEffect = previousEffect + } 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(""), 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 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 For = (src, itemFn, keyFn) => { - const anchor = doc.createTextNode(""), root = Tag("div", { style: "display:contents" }, [anchor]) + const anchor = doc.createTextNode("") + const root = Tag("div", { style: "display:contents" }, [anchor]) let cache = new Map() Watch(() => (isFunc(src) ? src() : src) || [], items => { - const nextCache = new Map(), nextOrder = [] - ;(items || []).forEach((item, i) => { + const nextCache = new Map() + const nextOrder = [] + const newItems = items || [] + for (let i = 0; i < newItems.length; i++) { + const item = newItems[i] const key = keyFn ? keyFn(item, i) : (item?.id ?? i) - let view = cache.get(key) || Render(() => itemFn(item, i)) - cache.delete(key); nextCache.set(key, view); nextOrder.push(view) - }) + let view = cache.get(key) + if (!view) view = Render(() => itemFn(item, i)) + else 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 node = nextOrder[i].container + const view = nextOrder[i] + const node = view.container if (node.nextSibling !== lastRef) root.insertBefore(node, lastRef) lastRef = node } @@ -273,26 +471,28 @@ const For = (src, itemFn, keyFn) => { const Router = routes => { const getHash = () => window.location.hash.slice(1) || "/" - const path = $(getHash()), handler = () => path(getHash()) + const path = $(getHash()) + const handler = () => path(getHash()) window.addEventListener("hashchange", handler) onUnmount(() => window.removeEventListener("hashchange", handler)) - const hook = Tag("div", { class: "router-hook" }) - let view = null + let currentView = null Watch([path], () => { const cur = path() const route = routes.find(r => { - const p1 = r.path.split("/").filter(Boolean), p2 = cur.split("/").filter(Boolean) + 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]) }) || routes.find(r => r.path === "*") - if (route) { - view?.destroy() + currentView?.destroy() const params = {} - route.path.split("/").filter(Boolean).forEach((p, i) => p[0] === ":" && (params[p.slice(1)] = cur.split("/").filter(Boolean)[i])) + route.path.split("/").filter(Boolean).forEach((p, i) => { + if (p[0] === ":") params[p.slice(1)] = cur.split("/").filter(Boolean)[i] + }) Router.params(params) - view = Render(() => isFunc(route.component) ? route.component(params) : route.component) - hook.replaceChildren(view.container) + currentView = Render(() => isFunc(route.component) ? route.component(params) : route.component) + hook.replaceChildren(currentView.container) } }) return hook @@ -307,7 +507,8 @@ 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 }