Compacted Size
This commit is contained in:
431
sigpro2.js
431
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
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user