natxocc
99780e8399
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s
513 lines
14 KiB
JavaScript
513 lines
14 KiB
JavaScript
// sigpro.js
|
|
var isFunc = (f) => typeof f === "function";
|
|
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 activeEffect = null;
|
|
var activeOwner = null;
|
|
var isFlushing = false;
|
|
var batchDepth = 0;
|
|
var effectQueue = new Set;
|
|
var proxyCache = new WeakMap;
|
|
var ITER = Symbol("iter");
|
|
var MOUNTED_NODES = new WeakMap;
|
|
var SVG_NS = "http://www.w3.org/2000/svg";
|
|
var XLINK_NS = "http://www.w3.org/1999/xlink";
|
|
var SVG_TAGS = new Set("svg,path,circle,rect,line,polyline,polygon,g,defs,text,textPath,tspan,use,symbol,image,marker,ellipse".split(","));
|
|
var attrFilter = null;
|
|
var filterXSS = (fn) => {
|
|
attrFilter = fn;
|
|
};
|
|
var dispose = (eff) => {
|
|
if (!eff || eff._disposed)
|
|
return;
|
|
eff._disposed = true;
|
|
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();
|
|
}
|
|
}
|
|
};
|
|
var onUnmount = (fn) => {
|
|
if (activeOwner)
|
|
(activeOwner._cleanups ||= new Set).add(fn);
|
|
};
|
|
var untrack = (fn) => {
|
|
const p = activeEffect;
|
|
activeEffect = null;
|
|
try {
|
|
return fn();
|
|
} finally {
|
|
activeEffect = p;
|
|
}
|
|
};
|
|
var 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;
|
|
activeEffect = activeOwner = effect;
|
|
try {
|
|
return effect._result = fn();
|
|
} catch (e) {
|
|
console.error("[SigPro]", e);
|
|
} finally {
|
|
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;
|
|
};
|
|
var flush = () => {
|
|
if (isFlushing)
|
|
return;
|
|
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();
|
|
isFlushing = false;
|
|
};
|
|
var batch = (fn) => {
|
|
batchDepth++;
|
|
try {
|
|
return fn();
|
|
} finally {
|
|
batchDepth--;
|
|
if (batchDepth === 0 && effectQueue.size > 0 && !isFlushing) {
|
|
flush();
|
|
}
|
|
}
|
|
};
|
|
var trackUpdate = (subs, trigger = false) => {
|
|
if (!trigger && activeEffect && !activeEffect._disposed) {
|
|
subs.add(activeEffect);
|
|
(activeEffect._deps ||= new Set).add(subs);
|
|
} else if (trigger && subs.size > 0) {
|
|
let hasQueue = false;
|
|
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);
|
|
}
|
|
};
|
|
var $ = (val, key = null) => {
|
|
const subs = new Set;
|
|
if (isFunc(val)) {
|
|
let cache;
|
|
const computed = () => {
|
|
if (computed._dirty) {
|
|
const prev = activeEffect;
|
|
activeEffect = computed;
|
|
try {
|
|
const next = val();
|
|
if (!Object.is(cache, next)) {
|
|
cache = next;
|
|
trackUpdate(subs, true);
|
|
}
|
|
} finally {
|
|
activeEffect = prev;
|
|
}
|
|
computed._dirty = false;
|
|
}
|
|
trackUpdate(subs);
|
|
return cache;
|
|
};
|
|
computed._isComputed = true;
|
|
computed._subs = subs;
|
|
computed._dirty = true;
|
|
computed._deps = null;
|
|
computed._disposed = false;
|
|
return computed;
|
|
}
|
|
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));
|
|
trackUpdate(subs, true);
|
|
}
|
|
}
|
|
trackUpdate(subs);
|
|
return val;
|
|
};
|
|
};
|
|
var $$ = (target) => {
|
|
if (!isObj(target))
|
|
return target;
|
|
const cached = proxyCache.get(target);
|
|
if (cached)
|
|
return cached;
|
|
const subs = new Map;
|
|
const getSubs = (key) => {
|
|
let set = subs.get(key);
|
|
if (!set)
|
|
subs.set(key, set = new Set);
|
|
return set;
|
|
};
|
|
const proxy = new Proxy(target, {
|
|
get(target2, key, receiver) {
|
|
if (typeof key !== "symbol")
|
|
trackUpdate(getSubs(key));
|
|
return $$(Reflect.get(target2, key, receiver));
|
|
},
|
|
set(target2, key, value, receiver) {
|
|
const hadKey = Reflect.has(target2, key);
|
|
const oldValue = Reflect.get(target2, key, receiver);
|
|
const result = Reflect.set(target2, key, value, receiver);
|
|
if (result && !Object.is(oldValue, value)) {
|
|
trackUpdate(getSubs(key), true);
|
|
if (!hadKey)
|
|
trackUpdate(getSubs(ITER), true);
|
|
}
|
|
return result;
|
|
},
|
|
deleteProperty(target2, key) {
|
|
const result = Reflect.deleteProperty(target2, key);
|
|
if (result) {
|
|
trackUpdate(getSubs(key), true);
|
|
trackUpdate(getSubs(ITER), true);
|
|
}
|
|
return result;
|
|
},
|
|
ownKeys(target2) {
|
|
trackUpdate(getSubs(ITER));
|
|
return Reflect.ownKeys(target2);
|
|
}
|
|
});
|
|
proxyCache.set(target, proxy);
|
|
return proxy;
|
|
};
|
|
var watch = (sources, cb) => {
|
|
if (cb === 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));
|
|
});
|
|
effect();
|
|
return () => dispose(effect);
|
|
};
|
|
var cleanupNode = (node) => {
|
|
if (!node)
|
|
return;
|
|
if (node._cleanups) {
|
|
node._cleanups.forEach((fn) => fn());
|
|
node._cleanups.clear();
|
|
}
|
|
if (node._ownerEffect)
|
|
dispose(node._ownerEffect);
|
|
if (node.childNodes)
|
|
node.childNodes.forEach((n) => cleanupNode(n));
|
|
};
|
|
var h = (tag, props = {}, children = []) => {
|
|
if (props instanceof Node || isArr(props) || !isObj(props)) {
|
|
children = props;
|
|
props = {};
|
|
}
|
|
if (isFunc(tag)) {
|
|
const effect = createEffect(() => {
|
|
const result2 = tag(props, {
|
|
children,
|
|
emit: (ev, ...args) => props[`on${ev[0].toUpperCase()}${ev.slice(1)}`]?.(...args)
|
|
});
|
|
effect._result = result2;
|
|
return result2;
|
|
});
|
|
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_TAGS.has(tag);
|
|
const el = isSVG ? doc.createElementNS(SVG_NS, tag) : doc.createElement(tag);
|
|
el._cleanups = new Set;
|
|
for (const k of Object.keys(props)) {
|
|
let v = props[k];
|
|
if (k === "ref") {
|
|
isFunc(v) ? v(el) : v.current = el;
|
|
continue;
|
|
}
|
|
let val = attrFilter ? attrFilter(k, v) : v;
|
|
if (isSVG && k.startsWith("xlink:")) {
|
|
val == null ? el.removeAttributeNS(XLINK_NS, k.slice(6)) : el.setAttributeNS(XLINK_NS, k.slice(6), val);
|
|
continue;
|
|
}
|
|
if (k.startsWith("on")) {
|
|
const ev = k.slice(2).toLowerCase();
|
|
el.addEventListener(ev, val);
|
|
const off = () => el.removeEventListener(ev, val);
|
|
el._cleanups.add(off);
|
|
onUnmount(off);
|
|
} else if (isFunc(val)) {
|
|
const effect = createEffect(() => {
|
|
const raw = val();
|
|
const safeVal = attrFilter ? attrFilter(k, raw) : raw;
|
|
if (k === "class")
|
|
el.className = safeVal || "";
|
|
else if (safeVal == null)
|
|
el.removeAttribute(k);
|
|
else if (k in el && !isSVG)
|
|
el[k] = safeVal;
|
|
else
|
|
el.setAttribute(k, safeVal === true ? "" : safeVal);
|
|
});
|
|
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) => val(ev.target[k]));
|
|
}
|
|
} else {
|
|
if (val != null) {
|
|
if (k in el && !isSVG)
|
|
el[k] = val;
|
|
else
|
|
el.setAttribute(k, val === true ? "" : val);
|
|
}
|
|
}
|
|
}
|
|
const append = (c) => {
|
|
if (isArr(c))
|
|
return c.forEach(append);
|
|
if (isFunc(c)) {
|
|
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();
|
|
});
|
|
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;
|
|
}
|
|
currentNodes = next;
|
|
});
|
|
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());
|
|
}
|
|
};
|
|
append(children);
|
|
return el;
|
|
};
|
|
var render = (renderFn) => {
|
|
const cleanups = new Set;
|
|
const previousOwner = activeOwner;
|
|
const previousEffect = activeEffect;
|
|
const container = doc.createElement("div");
|
|
container.style.display = "contents";
|
|
container.setAttribute("role", "presentation");
|
|
activeOwner = { _cleanups: cleanups };
|
|
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)));
|
|
}
|
|
};
|
|
try {
|
|
processResult(renderFn({ onCleanup: (fn) => cleanups.add(fn) }));
|
|
} finally {
|
|
activeOwner = previousOwner;
|
|
activeEffect = previousEffect;
|
|
}
|
|
return {
|
|
_isRuntime: true,
|
|
container,
|
|
destroy: () => {
|
|
cleanups.forEach((fn) => fn());
|
|
cleanupNode(container);
|
|
container.remove();
|
|
}
|
|
};
|
|
};
|
|
var when = (cond, SIP, NOP = null) => {
|
|
const anchor = doc.createTextNode("");
|
|
const root = h("div", { style: "display:contents" }, [anchor]);
|
|
let currentView = null;
|
|
watch(() => !!(isFunc(cond) ? cond() : cond), (show) => {
|
|
if (currentView) {
|
|
currentView.destroy();
|
|
currentView = null;
|
|
}
|
|
const content = show ? SIP : NOP;
|
|
if (content) {
|
|
currentView = render(() => isFunc(content) ? content() : content);
|
|
root.insertBefore(currentView.container, anchor);
|
|
}
|
|
});
|
|
onUnmount(() => currentView?.destroy());
|
|
return root;
|
|
};
|
|
var each = (src, itemFn, keyField) => {
|
|
const anchor = doc.createTextNode("");
|
|
const root = h("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 key = keyField ? item?.[keyField] ?? 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);
|
|
}
|
|
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;
|
|
if (node.nextSibling !== lastRef)
|
|
root.insertBefore(node, lastRef);
|
|
lastRef = node;
|
|
}
|
|
cache = nextCache;
|
|
});
|
|
return root;
|
|
};
|
|
var router = (routes) => {
|
|
const getHash = () => window.location.hash.slice(1) || "/";
|
|
const path = $(getHash());
|
|
const handler = () => path(getHash());
|
|
window.addEventListener("hashchange", handler);
|
|
onUnmount(() => window.removeEventListener("hashchange", handler));
|
|
const hook = h("div", { class: "router-hook" });
|
|
let currentView = null;
|
|
watch([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]);
|
|
}) || routes.find((r) => r.path === "*");
|
|
if (route) {
|
|
currentView?.destroy();
|
|
const params = {};
|
|
route.path.split("/").filter(Boolean).forEach((p, i) => {
|
|
if (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);
|
|
}
|
|
});
|
|
return hook;
|
|
};
|
|
router.params = $({});
|
|
router.to = (p) => window.location.hash = p.replace(/^#?\/?/, "#/");
|
|
router.back = () => window.history.back();
|
|
router.path = () => window.location.hash.replace(/^#/, "") || "/";
|
|
var mount = (comp, target) => {
|
|
const t = typeof target === "string" ? doc.querySelector(target) : 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);
|
|
return inst;
|
|
};
|
|
export {
|
|
when,
|
|
watch,
|
|
router,
|
|
mount,
|
|
h,
|
|
filterXSS,
|
|
each,
|
|
batch,
|
|
$$,
|
|
$
|
|
};
|