web/state
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Philosophical Restoration: Reverted to v2.3 core principles and aligned with AI-first standard. By: AICoder

Browse Source
This commit is contained in:
AI Engineer 2026-06-06 11:45:52 +08:00
parent b26df1112d
commit d77cdd92fd
23 changed files with 1002 additions and 568 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
dist/state.js vendored
View File

@ -19,7 +19,8 @@
return () => _watchers.get(k).delete(cb); return () => _watchers.get(k).delete(cb);
}; };
const _unwatchFunc = (k, cb) => { const _unwatchFunc = (k, cb) => {
if (_watchers.has(k)) _watchers.get(k).delete(cb); if (_watchers.has(k)) _watchers.set(k, /* @__PURE__ */ new Set());
_watchers.get(k).delete(cb);
}; };
const __getter = getter || ((k) => _defaults[k]); const __getter = getter || ((k) => _defaults[k]);
const __setter = setter || ((k, v) => _defaults[k] = v); const __setter = setter || ((k, v) => _defaults[k] = v);
@ -76,6 +77,7 @@
const Component = { const Component = {
getTemplate: (name) => document.querySelector(`template[component="${name.toUpperCase()}"]`), getTemplate: (name) => document.querySelector(`template[component="${name.toUpperCase()}"]`),
register: (name, setupFunc, templateNode = null, ...globalNodes) => { register: (name, setupFunc, templateNode = null, ...globalNodes) => {
console.log("Component.register:", name.toUpperCase());
_components.set(name.toUpperCase(), setupFunc); _components.set(name.toUpperCase(), setupFunc);
if (document.readyState !== "loading") Component._addTemplate(name, templateNode, globalNodes); if (document.readyState !== "loading") Component._addTemplate(name, templateNode, globalNodes);
else _pendingTemplates.push([name, templateNode, globalNodes]); else _pendingTemplates.push([name, templateNode, globalNodes]);
@ -109,9 +111,7 @@
}); });
} }
to.classList.add(...from.classList); to.classList.add(...from.classList);
const fromContent = from.tagName === "TEMPLATE" ? from.content : from; Array.from(from.childNodes).forEach((child) => to.appendChild(child));
const toContent = to.tagName === "TEMPLATE" ? to.content : to;
Array.from(fromContent.childNodes).forEach((child) => toContent.appendChild(child));
if (from.tagName && Component.exists(from.tagName)) _makeComponent(from.tagName, to, scanObj, exists); if (from.tagName && Component.exists(from.tagName)) _makeComponent(from.tagName, to, scanObj, exists);
} }
function _makeComponent(name, node, scanObj, exists = {}) { function _makeComponent(name, node, scanObj, exists = {}) {
@ -202,8 +202,7 @@
const originalSetAttribute = Element.prototype.setAttribute; const originalSetAttribute = Element.prototype.setAttribute;
Element.prototype.setAttribute = function(name, value) { Element.prototype.setAttribute = function(name, value) {
if (!name.startsWith("$")) return originalSetAttribute.call(this, name, value); if (!name.startsWith("$")) return originalSetAttribute.call(this, name, value);
const prefix = name.startsWith("$$") ? "st-st-" : "st-"; return originalSetAttribute.call(this, "st-" + name.substring(1), value);
return originalSetAttribute.call(this, prefix + name.substring(name.startsWith("$$") ? 2 : 1), value);
}; };
} }
} }
@ -218,8 +217,6 @@
const node = binding.node; const node = binding.node;
if (!node.isConnected && node.tagName !== "TEMPLATE") return; if (!node.isConnected && node.tagName !== "TEMPLATE") return;
setActiveBinding(binding); setActiveBinding(binding);
if (window.__perfTrace) window.__perfTrace.evalCount++;
const evalStart = window.__perfTrace ? performance.now() : 0;
let result = binding.exp ? binding.tpl ? _returnCode(binding.tpl, { thisNode: node }, node._thisObj || node, node._ref || null) : null : binding.tpl; let result = binding.exp ? binding.tpl ? _returnCode(binding.tpl, { thisNode: node }, node._thisObj || node, node._ref || null) : null : binding.tpl;
if (binding.exp === 2 && typeof result === "string") { if (binding.exp === 2 && typeof result === "string") {
try { try {
@ -227,7 +224,6 @@
} catch (e) { } catch (e) {
} }
} }
if (window.__perfTrace) window.__perfTrace.evalTotal += performance.now() - evalStart;
setActiveBinding(null); setActiveBinding(null);
if (binding.prop) { if (binding.prop) {
const prop = binding.prop; const prop = binding.prop;
@ -239,9 +235,10 @@
if (typeof o !== "object") break; if (typeof o !== "object") break;
} }
if (typeof o === "object" && o !== null) { if (typeof o === "object" && o !== null) {
const resultIsObject = typeof result === "object" && result != null && !Array.isArray(result);
const lk = prop[prop.length - 1]; const lk = prop[prop.length - 1];
if (lk) { if (lk) {
if (typeof result === "object" && result != null && !Array.isArray(result) && o[lk] == null) o[lk] = {}; if (resultIsObject && o[lk] == null) o[lk] = {};
const lo = o[lk]; const lo = o[lk];
if (typeof lo === "object" && lo != null && lo.__watch) Object.assign(lo, result); if (typeof lo === "object" && lo != null && lo.__watch) Object.assign(lo, result);
else { else {
@ -257,13 +254,11 @@
if (result) { if (result) {
if (!node._renderedNodes || node._renderedNodes.length === 0) { if (!node._renderedNodes || node._renderedNodes.length === 0) {
node._children.forEach((child) => { node._children.forEach((child) => {
child._stManaged = true;
node.parentNode.insertBefore(child, node); node.parentNode.insertBefore(child, node);
child._ref = { ...node._ref }; child._ref = { ...node._ref };
child._thisObj = node._thisObj;
}); });
node._renderedNodes = [node._children]; node._renderedNodes = [node._children];
} else {
node._renderedNodes[0].forEach((child) => _scanTree(child, { thisObj: node._thisObj, extendVars: child._ref }));
} }
} else { } else {
_clearRenderedNodes(node); _clearRenderedNodes(node);
@ -293,36 +288,19 @@
keys.forEach((k, i) => { keys.forEach((k, i) => {
const item = getVal(k); const item = getVal(k);
const rawKey = keyName ? item && typeof item === "object" ? item[keyName] : item : k; const rawKey = keyName ? item && typeof item === "object" ? item[keyName] : item : k;
const keyVal = rawKey === void 0 || rawKey === null || newKeyedNodes.has(rawKey) ? `st_key_fallback_${i}_${Math.random()}` : rawKey; const keyVal = rawKey === void 0 || rawKey === null || newKeyedNodes.has(rawKey) ? `st_key_${i}` : rawKey;
let existingNodes = node._keyedNodes.get(keyVal); let existingNodes = node._keyedNodes.get(keyVal);
if (existingNodes) { if (existingNodes) {
node._keyedNodes.delete(keyVal); node._keyedNodes.delete(keyVal);
existingNodes.forEach((child) => { existingNodes.forEach((child) => {
if (window.__statePerformanceTelemetry) window.__statePerformanceTelemetry.reuseCount++; child._ref[indexName] = k;
let scopeChanged = false; child._ref[asName] = item;
for (let key in node._ref) { _scanTree(child);
if (key === asName || key === indexName) continue;
if (child._ref[key] !== node._ref[key]) {
child._ref[key] = node._ref[key];
scopeChanged = true;
}
}
const indexChanged = child._ref[indexName] !== k;
if (indexChanged) child._ref[indexName] = k;
if (child._ref[asName] !== item || scopeChanged) {
child._ref[asName] = item;
if (window.__statePerformanceTelemetry) window.__statePerformanceTelemetry.scanCount++;
_scanTree(child, { thisObj: node._thisObj, extendVars: child._ref });
} else if (node.parentNode.lastChild !== child) {
if (window.__statePerformanceTelemetry) window.__statePerformanceTelemetry.moveCount++;
node.parentNode.insertBefore(child, node);
}
}); });
} else { } else {
existingNodes = []; existingNodes = [];
node._children.forEach((child) => { node._children.forEach((child) => {
const cloned = child.cloneNode(true); const cloned = child.cloneNode(true);
cloned._stManaged = true;
cloned._ref = { ...node._ref, [indexName]: k, [asName]: item }; cloned._ref = { ...node._ref, [indexName]: k, [asName]: item };
cloned._thisObj = node._thisObj; cloned._thisObj = node._thisObj;
node.parentNode.insertBefore(cloned, node); node.parentNode.insertBefore(cloned, node);
@ -331,7 +309,6 @@
} }
newKeyedNodes.set(keyVal, existingNodes); newKeyedNodes.set(keyVal, existingNodes);
currentRenderedNodes.push(existingNodes); currentRenderedNodes.push(existingNodes);
existingNodes.forEach((child) => node.parentNode.insertBefore(child, node));
}); });
node._keyedNodes.forEach((nodes) => nodes.forEach((child) => { node._keyedNodes.forEach((nodes) => nodes.forEach((child) => {
_clearRenderedNodes(child); _clearRenderedNodes(child);
@ -341,8 +318,6 @@
node._renderedNodes = currentRenderedNodes; node._renderedNodes = currentRenderedNodes;
} else { } else {
_clearRenderedNodes(node); _clearRenderedNodes(node);
if (node._keyedNodes) node._keyedNodes.forEach((nodes) => nodes.forEach((child) => child.remove()));
node._keyedNodes = /* @__PURE__ */ new Map();
node._renderedNodes = []; node._renderedNodes = [];
} }
} else if (attr === "bind") { } else if (attr === "bind") {
@ -358,7 +333,7 @@
} else if (node.type === "radio") { } else if (node.type === "radio") {
if (node.checked !== (node.value === String(result ?? ""))) node.checked = node.value === String(result ?? ""); if (node.checked !== (node.value === String(result ?? ""))) node.checked = node.value === String(result ?? "");
} else if ("value" in node && node.type !== "file") { } else if ("value" in node && node.type !== "file") {
setTimeout(() => { Promise.resolve().then(() => {
if (node.value !== String(result ?? "")) node.value = result; if (node.value !== String(result ?? "")) node.value = result;
}); });
} else if (node.isContentEditable) { } else if (node.isContentEditable) {
@ -384,12 +359,11 @@
_updateBinding(binding); _updateBinding(binding);
}; };
const _parseNode = (node, scanObj) => { const _parseNode = (node, scanObj) => {
let hasBindings = false;
if (node._bindings) { if (node._bindings) {
node._states = /* @__PURE__ */ new Set(); node._states = /* @__PURE__ */ new Set();
node._bindings.forEach((b) => _updateBinding({ node, ...b })); node._bindings.forEach((b) => _updateBinding({ node, ...b }));
if (node._hasOnUpdate) node.dispatchEvent(new Event("update", { bubbles: false })); if (node._hasOnUpdate) node.dispatchEvent(new Event("update", { bubbles: false }));
hasBindings = true; return;
} }
if (Component.exists(node.tagName) && !node._componentInitialized) { if (Component.exists(node.tagName) && !node._componentInitialized) {
Array.from(node.attributes).forEach((attr) => { Array.from(node.attributes).forEach((attr) => {
@ -417,13 +391,11 @@
node._children = [...node.content.childNodes]; node._children = [...node.content.childNodes];
if (!node._renderedNodes) node._renderedNodes = []; if (!node._renderedNodes) node._renderedNodes = [];
} }
if (hasBindings) return;
let attrs = []; let attrs = [];
const triggerAttrs = ["$if", "$each", "st-if", "st-each", "$$if", "$$each", "st-st-if", "st-st-each"];
if (node.tagName === "TEMPLATE") { if (node.tagName === "TEMPLATE") {
triggerAttrs.forEach((n) => node.hasAttribute(n) && attrs.push(node.getAttributeNode(n))); ["$if", "$each", "st-if", "st-each"].forEach((n) => node.hasAttribute(n) && attrs.push(node.getAttributeNode(n)));
} else { } else {
attrs = Array.from(node.attributes).filter((a) => (a.name.startsWith("$") || a.name.startsWith("st-")) && !triggerAttrs.includes(a.name) || a.name.includes(".")); attrs = Array.from(node.attributes).filter((a) => (a.name.startsWith("$") || a.name.startsWith("st-")) && !["$if", "$each", "st-if", "st-each"].includes(a.name) || a.name.includes("."));
} }
if (node._thisObj && scanObj.thisObj) node._thisObj.parent = scanObj.thisObj; if (node._thisObj && scanObj.thisObj) node._thisObj.parent = scanObj.thisObj;
if (!node._thisObj) node._thisObj = scanObj.thisObj || null; if (!node._thisObj) node._thisObj = scanObj.thisObj || null;
@ -445,7 +417,7 @@
node.addEventListener(eventName, (e) => _runCode(tpl, { event: e, thisNode: node, ...e.detail || {} }, scanObj.thisObj || node, node._ref || {})); node.addEventListener(eventName, (e) => _runCode(tpl, { event: e, thisNode: node, ...e.detail || {} }, scanObj.thisObj || node, node._ref || {}));
} else { } else {
if (realAttrName === "bind") { if (realAttrName === "bind") {
node.addEventListener(node.tagName === "TEXTAREA" || node.isContentEditable || node.type === "text" || node.type === "password" ? "input" : "change", (e) => { node.addEventListener(["textarea", "text", "password"].includes(node.type || "text") || node.isContentEditable ? "input" : "change", (e) => {
let newVal = node.isContentEditable ? e.target.innerHTML : node.type === "checkbox" ? e.target.checked : e.target.files || e.target.value || e.detail; let newVal = node.isContentEditable ? e.target.innerHTML : node.type === "checkbox" ? e.target.checked : e.target.files || e.target.value || e.detail;
setNoWriteBack(node); setNoWriteBack(node);
setDisableRunCodeError(true); setDisableRunCodeError(true);
@ -469,13 +441,6 @@
if (node._thisObj) scanObj.thisObj = node._thisObj; if (node._thisObj) scanObj.thisObj = node._thisObj;
}; };
const _scanTree = (node, scanObj = {}) => { const _scanTree = (node, scanObj = {}) => {
if (node.nodeType === 3) {
if (node._stTranslated) return;
const translated = _translate(node.textContent);
if (translated !== node.textContent) node.textContent = translated;
node._stTranslated = true;
return;
}
if (node.nodeType !== 1) return; if (node.nodeType !== 1) return;
if (!node._stTranslated) { if (!node._stTranslated) {
Array.from(node.attributes).forEach((attr) => { Array.from(node.attributes).forEach((attr) => {
@ -486,43 +451,13 @@
}); });
node._stTranslated = true; node._stTranslated = true;
} }
let resolvedThisObj = node._thisObj; if (node.tagName === "TEMPLATE" && (node.hasAttribute("$if") || node.hasAttribute("st-if")) && (node.hasAttribute("$each") || node.hasAttribute("st-each"))) {
let resolvedRef = node._ref;
if (resolvedThisObj === void 0 || resolvedRef === void 0) {
let curr = node;
while (curr && (resolvedThisObj === void 0 || resolvedRef === void 0)) {
if (resolvedThisObj === void 0 && curr._thisObj !== void 0) resolvedThisObj = curr._thisObj;
if (resolvedRef === void 0 && curr._ref !== void 0) resolvedRef = { ...curr._ref };
curr = curr.parentNode;
}
}
if (resolvedThisObj === void 0) resolvedThisObj = scanObj.thisObj;
if (resolvedRef === void 0) resolvedRef = scanObj.extendVars;
const triggerAttrs = ["$if", "$each", "st-if", "st-each", "$$if", "$$each", "st-st-if", "st-st-each"];
const eachAttrs = ["$each", "st-each", "$$each", "st-st-each"];
if (node.tagName !== "TEMPLATE" && triggerAttrs.some((t) => node.hasAttribute(t))) {
const template = document.createElement("TEMPLATE"); const template = document.createElement("TEMPLATE");
const attrs = Array.from(node.attributes).filter((attr) => triggerAttrs.includes(attr.name) || eachAttrs.some((t) => node.hasAttribute(t)) && ["as", "index"].includes(attr.name)); const attrs = Array.from(node.attributes).filter((attr2) => ["$if", "$each", "st-if", "st-each"].includes(attr2.name));
attrs.forEach((attr) => {
template.setAttribute(attr.name, attr.value);
node.removeAttribute(attr.name);
});
node.parentNode.insertBefore(template, node);
template.content.appendChild(node);
template._ref = resolvedRef;
template._thisObj = resolvedThisObj;
delete node._stScanned;
_scanTree(template, scanObj);
return;
}
if (node.isConnected) node._stScanned = true;
if (node.tagName === "TEMPLATE" && (node.hasAttribute("$if") || node.hasAttribute("st-if") || node.hasAttribute("$$if") || node.hasAttribute("st-st-if")) && (node.hasAttribute("$each") || node.hasAttribute("st-each") || node.hasAttribute("$$each") || node.hasAttribute("st-st-each"))) {
const template = document.createElement("TEMPLATE");
const attrs = Array.from(node.attributes).filter((attr2) => triggerAttrs.includes(attr2.name));
const attr = attrs[attrs.length - 1]; const attr = attrs[attrs.length - 1];
template.setAttribute(attr.name, attr.value); template.setAttribute(attr.name, attr.value);
node.removeAttribute(attr.name); node.removeAttribute(attr.name);
if (eachAttrs.includes(attr.name)) { if (attr.name === "$each" || attr.name === "st-each") {
Array.from(node.attributes).filter((attr2) => ["as", "index"].includes(attr2.name)).forEach((attr2) => { Array.from(node.attributes).filter((attr2) => ["as", "index"].includes(attr2.name)).forEach((attr2) => {
template.setAttribute(attr2.name, attr2.value); template.setAttribute(attr2.name, attr2.value);
node.removeAttribute(attr2.name); node.removeAttribute(attr2.name);
@ -530,8 +465,7 @@
} }
Array.from(node.content.childNodes).forEach((child) => template.content.appendChild(child)); Array.from(node.content.childNodes).forEach((child) => template.content.appendChild(child));
node.content.appendChild(template); node.content.appendChild(template);
template._ref = resolvedRef; template._ref = node._ref;
template._thisObj = resolvedThisObj;
} }
if (node.tagName === "IMG" && (node.hasAttribute("src") || node.hasAttribute("_src") || node.hasAttribute("$src"))) { if (node.tagName === "IMG" && (node.hasAttribute("src") || node.hasAttribute("_src") || node.hasAttribute("$src"))) {
const imgNode = node; const imgNode = node;
@ -557,16 +491,10 @@
while (curr && curr._ref === void 0) curr = curr.parentNode; while (curr && curr._ref === void 0) curr = curr.parentNode;
node._ref = curr ? { ...curr._ref } : {}; node._ref = curr ? { ...curr._ref } : {};
} }
if (node._refExt !== void 0) {
Object.assign(node._ref, node._refExt);
}
if (scanObj.extendVars) Object.assign(node._ref, scanObj.extendVars); if (scanObj.extendVars) Object.assign(node._ref, scanObj.extendVars);
_parseNode(node, { ...scanObj }); _parseNode(node, { ...scanObj });
const nodes = [...node.childNodes || []]; const nodes = [...node.childNodes || []];
const nextScanObj = { thisObj: scanObj.thisObj, extendVars: { ...node._ref } }; nodes.forEach((child) => _scanTree(child, { thisObj: scanObj.thisObj, extendVars: { ...node._ref } }));
nodes.forEach((child) => {
if (!child._stManaged) _scanTree(child, nextScanObj);
});
}; };
const _unbindTree = (node) => { const _unbindTree = (node) => {
if (node.nodeType !== 1) return; if (node.nodeType !== 1) return;
@ -652,14 +580,10 @@
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
window.addEventListener("hashchange", () => { window.addEventListener("hashchange", () => {
var _a2; var _a2;
const oldHashParams = _hashParams; const newParams = new URLSearchParams(((_a2 = window.location.hash) == null ? void 0 : _a2.substring(1)) || "");
_hashParams = new URLSearchParams(((_a2 = window.location.hash) == null ? void 0 : _a2.substring(1)) || ""); const keys = /* @__PURE__ */ new Set([..._hashParams.keys(), ...newParams.keys()]);
_hashParams.forEach((v, k) => { _hashParams = newParams;
if (oldHashParams.get(k) !== v) Hash[k] = Util.safeJson(v); keys.forEach((k) => Hash[k] = Hash[k]);
});
oldHashParams.forEach((v, k) => {
if (_hashParams.get(k) === void 0) Hash[k] = void 0;
});
}); });
} }
const LocalStorage = NewState({}, (k) => Util.safeJson(localStorage.getItem(k)), (k, v) => { const LocalStorage = NewState({}, (k) => Util.safeJson(localStorage.getItem(k)), (k, v) => {
@ -670,7 +594,6 @@
}); });
const State = NewState({ const State = NewState({
exitBlocks: 0 exitBlocks: 0
// 默认值
}); });
globalThis.Hash = Hash; globalThis.Hash = Hash;
globalThis.LocalStorage = LocalStorage; globalThis.LocalStorage = LocalStorage;
@ -682,25 +605,30 @@
$$, $$,
RefreshState, RefreshState,
SetTranslator, SetTranslator,
_scanTree,
_unbindTree,
Util, Util,
Hash, Hash,
LocalStorage, LocalStorage,
State State,
_runCode,
_returnCode,
onNotifyUpdate,
setActiveBinding
}; };
if (typeof globalThis !== "undefined") { if (typeof window !== "undefined") {
Object.assign(globalThis, ApigoState); window.ApigoState = ApigoState;
globalThis.ApigoState = ApigoState;
} }
if (typeof document !== "undefined") { if (typeof document !== "undefined") {
const init = () => { const init = () => {
Component._initPending(); const htmlNode = document.documentElement;
if (!htmlNode.hasAttribute("$data-bs-theme") && !htmlNode.hasAttribute("data-bs-theme")) {
htmlNode.setAttribute("$data-bs-theme", "LocalStorage.darkMode?'dark':'light'");
}
new MutationObserver((mutations) => { new MutationObserver((mutations) => {
mutations.forEach((mutation) => { mutations.forEach((mutation) => {
mutation.addedNodes.forEach((newNode) => { mutation.addedNodes.forEach((newNode) => {
if (newNode.isConnected && newNode.nodeType === 1 && !newNode._stScanned) { if (newNode.isConnected) _scanTree(newNode);
newNode._stScanned = true;
_scanTree(newNode);
}
}); });
mutation.removedNodes.forEach((oldNode) => _unbindTree(oldNode)); mutation.removedNodes.forEach((oldNode) => _unbindTree(oldNode));
}); });

2
dist/state.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/state.min.mjs vendored
View File

File diff suppressed because one or more lines are too long

152
dist/state.mjs vendored
View File

@ -15,7 +15,8 @@ function NewState(defaults = {}, getter = null, setter = null) {
return () => _watchers.get(k).delete(cb); return () => _watchers.get(k).delete(cb);
}; };
const _unwatchFunc = (k, cb) => { const _unwatchFunc = (k, cb) => {
if (_watchers.has(k)) _watchers.get(k).delete(cb); if (_watchers.has(k)) _watchers.set(k, /* @__PURE__ */ new Set());
_watchers.get(k).delete(cb);
}; };
const __getter = getter || ((k) => _defaults[k]); const __getter = getter || ((k) => _defaults[k]);
const __setter = setter || ((k, v) => _defaults[k] = v); const __setter = setter || ((k, v) => _defaults[k] = v);
@ -72,6 +73,7 @@ const _pendingTemplates = [];
const Component = { const Component = {
getTemplate: (name) => document.querySelector(`template[component="${name.toUpperCase()}"]`), getTemplate: (name) => document.querySelector(`template[component="${name.toUpperCase()}"]`),
register: (name, setupFunc, templateNode = null, ...globalNodes) => { register: (name, setupFunc, templateNode = null, ...globalNodes) => {
console.log("Component.register:", name.toUpperCase());
_components.set(name.toUpperCase(), setupFunc); _components.set(name.toUpperCase(), setupFunc);
if (document.readyState !== "loading") Component._addTemplate(name, templateNode, globalNodes); if (document.readyState !== "loading") Component._addTemplate(name, templateNode, globalNodes);
else _pendingTemplates.push([name, templateNode, globalNodes]); else _pendingTemplates.push([name, templateNode, globalNodes]);
@ -105,9 +107,7 @@ function _mergeNode(from, to, scanObj, exists = {}) {
}); });
} }
to.classList.add(...from.classList); to.classList.add(...from.classList);
const fromContent = from.tagName === "TEMPLATE" ? from.content : from; Array.from(from.childNodes).forEach((child) => to.appendChild(child));
const toContent = to.tagName === "TEMPLATE" ? to.content : to;
Array.from(fromContent.childNodes).forEach((child) => toContent.appendChild(child));
if (from.tagName && Component.exists(from.tagName)) _makeComponent(from.tagName, to, scanObj, exists); if (from.tagName && Component.exists(from.tagName)) _makeComponent(from.tagName, to, scanObj, exists);
} }
function _makeComponent(name, node, scanObj, exists = {}) { function _makeComponent(name, node, scanObj, exists = {}) {
@ -198,8 +198,7 @@ if (typeof document !== "undefined") {
const originalSetAttribute = Element.prototype.setAttribute; const originalSetAttribute = Element.prototype.setAttribute;
Element.prototype.setAttribute = function(name, value) { Element.prototype.setAttribute = function(name, value) {
if (!name.startsWith("$")) return originalSetAttribute.call(this, name, value); if (!name.startsWith("$")) return originalSetAttribute.call(this, name, value);
const prefix = name.startsWith("$$") ? "st-st-" : "st-"; return originalSetAttribute.call(this, "st-" + name.substring(1), value);
return originalSetAttribute.call(this, prefix + name.substring(name.startsWith("$$") ? 2 : 1), value);
}; };
} }
} }
@ -214,8 +213,6 @@ function _updateBinding(binding) {
const node = binding.node; const node = binding.node;
if (!node.isConnected && node.tagName !== "TEMPLATE") return; if (!node.isConnected && node.tagName !== "TEMPLATE") return;
setActiveBinding(binding); setActiveBinding(binding);
if (window.__perfTrace) window.__perfTrace.evalCount++;
const evalStart = window.__perfTrace ? performance.now() : 0;
let result = binding.exp ? binding.tpl ? _returnCode(binding.tpl, { thisNode: node }, node._thisObj || node, node._ref || null) : null : binding.tpl; let result = binding.exp ? binding.tpl ? _returnCode(binding.tpl, { thisNode: node }, node._thisObj || node, node._ref || null) : null : binding.tpl;
if (binding.exp === 2 && typeof result === "string") { if (binding.exp === 2 && typeof result === "string") {
try { try {
@ -223,7 +220,6 @@ function _updateBinding(binding) {
} catch (e) { } catch (e) {
} }
} }
if (window.__perfTrace) window.__perfTrace.evalTotal += performance.now() - evalStart;
setActiveBinding(null); setActiveBinding(null);
if (binding.prop) { if (binding.prop) {
const prop = binding.prop; const prop = binding.prop;
@ -235,9 +231,10 @@ function _updateBinding(binding) {
if (typeof o !== "object") break; if (typeof o !== "object") break;
} }
if (typeof o === "object" && o !== null) { if (typeof o === "object" && o !== null) {
const resultIsObject = typeof result === "object" && result != null && !Array.isArray(result);
const lk = prop[prop.length - 1]; const lk = prop[prop.length - 1];
if (lk) { if (lk) {
if (typeof result === "object" && result != null && !Array.isArray(result) && o[lk] == null) o[lk] = {}; if (resultIsObject && o[lk] == null) o[lk] = {};
const lo = o[lk]; const lo = o[lk];
if (typeof lo === "object" && lo != null && lo.__watch) Object.assign(lo, result); if (typeof lo === "object" && lo != null && lo.__watch) Object.assign(lo, result);
else { else {
@ -253,13 +250,11 @@ function _updateBinding(binding) {
if (result) { if (result) {
if (!node._renderedNodes || node._renderedNodes.length === 0) { if (!node._renderedNodes || node._renderedNodes.length === 0) {
node._children.forEach((child) => { node._children.forEach((child) => {
child._stManaged = true;
node.parentNode.insertBefore(child, node); node.parentNode.insertBefore(child, node);
child._ref = { ...node._ref }; child._ref = { ...node._ref };
child._thisObj = node._thisObj;
}); });
node._renderedNodes = [node._children]; node._renderedNodes = [node._children];
} else {
node._renderedNodes[0].forEach((child) => _scanTree(child, { thisObj: node._thisObj, extendVars: child._ref }));
} }
} else { } else {
_clearRenderedNodes(node); _clearRenderedNodes(node);
@ -289,36 +284,19 @@ function _updateBinding(binding) {
keys.forEach((k, i) => { keys.forEach((k, i) => {
const item = getVal(k); const item = getVal(k);
const rawKey = keyName ? item && typeof item === "object" ? item[keyName] : item : k; const rawKey = keyName ? item && typeof item === "object" ? item[keyName] : item : k;
const keyVal = rawKey === void 0 || rawKey === null || newKeyedNodes.has(rawKey) ? `st_key_fallback_${i}_${Math.random()}` : rawKey; const keyVal = rawKey === void 0 || rawKey === null || newKeyedNodes.has(rawKey) ? `st_key_${i}` : rawKey;
let existingNodes = node._keyedNodes.get(keyVal); let existingNodes = node._keyedNodes.get(keyVal);
if (existingNodes) { if (existingNodes) {
node._keyedNodes.delete(keyVal); node._keyedNodes.delete(keyVal);
existingNodes.forEach((child) => { existingNodes.forEach((child) => {
if (window.__statePerformanceTelemetry) window.__statePerformanceTelemetry.reuseCount++; child._ref[indexName] = k;
let scopeChanged = false; child._ref[asName] = item;
for (let key in node._ref) { _scanTree(child);
if (key === asName || key === indexName) continue;
if (child._ref[key] !== node._ref[key]) {
child._ref[key] = node._ref[key];
scopeChanged = true;
}
}
const indexChanged = child._ref[indexName] !== k;
if (indexChanged) child._ref[indexName] = k;
if (child._ref[asName] !== item || scopeChanged) {
child._ref[asName] = item;
if (window.__statePerformanceTelemetry) window.__statePerformanceTelemetry.scanCount++;
_scanTree(child, { thisObj: node._thisObj, extendVars: child._ref });
} else if (node.parentNode.lastChild !== child) {
if (window.__statePerformanceTelemetry) window.__statePerformanceTelemetry.moveCount++;
node.parentNode.insertBefore(child, node);
}
}); });
} else { } else {
existingNodes = []; existingNodes = [];
node._children.forEach((child) => { node._children.forEach((child) => {
const cloned = child.cloneNode(true); const cloned = child.cloneNode(true);
cloned._stManaged = true;
cloned._ref = { ...node._ref, [indexName]: k, [asName]: item }; cloned._ref = { ...node._ref, [indexName]: k, [asName]: item };
cloned._thisObj = node._thisObj; cloned._thisObj = node._thisObj;
node.parentNode.insertBefore(cloned, node); node.parentNode.insertBefore(cloned, node);
@ -327,7 +305,6 @@ function _updateBinding(binding) {
} }
newKeyedNodes.set(keyVal, existingNodes); newKeyedNodes.set(keyVal, existingNodes);
currentRenderedNodes.push(existingNodes); currentRenderedNodes.push(existingNodes);
existingNodes.forEach((child) => node.parentNode.insertBefore(child, node));
}); });
node._keyedNodes.forEach((nodes) => nodes.forEach((child) => { node._keyedNodes.forEach((nodes) => nodes.forEach((child) => {
_clearRenderedNodes(child); _clearRenderedNodes(child);
@ -337,8 +314,6 @@ function _updateBinding(binding) {
node._renderedNodes = currentRenderedNodes; node._renderedNodes = currentRenderedNodes;
} else { } else {
_clearRenderedNodes(node); _clearRenderedNodes(node);
if (node._keyedNodes) node._keyedNodes.forEach((nodes) => nodes.forEach((child) => child.remove()));
node._keyedNodes = /* @__PURE__ */ new Map();
node._renderedNodes = []; node._renderedNodes = [];
} }
} else if (attr === "bind") { } else if (attr === "bind") {
@ -354,7 +329,7 @@ function _updateBinding(binding) {
} else if (node.type === "radio") { } else if (node.type === "radio") {
if (node.checked !== (node.value === String(result ?? ""))) node.checked = node.value === String(result ?? ""); if (node.checked !== (node.value === String(result ?? ""))) node.checked = node.value === String(result ?? "");
} else if ("value" in node && node.type !== "file") { } else if ("value" in node && node.type !== "file") {
setTimeout(() => { Promise.resolve().then(() => {
if (node.value !== String(result ?? "")) node.value = result; if (node.value !== String(result ?? "")) node.value = result;
}); });
} else if (node.isContentEditable) { } else if (node.isContentEditable) {
@ -380,12 +355,11 @@ const _initBinding = (binding) => {
_updateBinding(binding); _updateBinding(binding);
}; };
const _parseNode = (node, scanObj) => { const _parseNode = (node, scanObj) => {
let hasBindings = false;
if (node._bindings) { if (node._bindings) {
node._states = /* @__PURE__ */ new Set(); node._states = /* @__PURE__ */ new Set();
node._bindings.forEach((b) => _updateBinding({ node, ...b })); node._bindings.forEach((b) => _updateBinding({ node, ...b }));
if (node._hasOnUpdate) node.dispatchEvent(new Event("update", { bubbles: false })); if (node._hasOnUpdate) node.dispatchEvent(new Event("update", { bubbles: false }));
hasBindings = true; return;
} }
if (Component.exists(node.tagName) && !node._componentInitialized) { if (Component.exists(node.tagName) && !node._componentInitialized) {
Array.from(node.attributes).forEach((attr) => { Array.from(node.attributes).forEach((attr) => {
@ -413,13 +387,11 @@ const _parseNode = (node, scanObj) => {
node._children = [...node.content.childNodes]; node._children = [...node.content.childNodes];
if (!node._renderedNodes) node._renderedNodes = []; if (!node._renderedNodes) node._renderedNodes = [];
} }
if (hasBindings) return;
let attrs = []; let attrs = [];
const triggerAttrs = ["$if", "$each", "st-if", "st-each", "$$if", "$$each", "st-st-if", "st-st-each"];
if (node.tagName === "TEMPLATE") { if (node.tagName === "TEMPLATE") {
triggerAttrs.forEach((n) => node.hasAttribute(n) && attrs.push(node.getAttributeNode(n))); ["$if", "$each", "st-if", "st-each"].forEach((n) => node.hasAttribute(n) && attrs.push(node.getAttributeNode(n)));
} else { } else {
attrs = Array.from(node.attributes).filter((a) => (a.name.startsWith("$") || a.name.startsWith("st-")) && !triggerAttrs.includes(a.name) || a.name.includes(".")); attrs = Array.from(node.attributes).filter((a) => (a.name.startsWith("$") || a.name.startsWith("st-")) && !["$if", "$each", "st-if", "st-each"].includes(a.name) || a.name.includes("."));
} }
if (node._thisObj && scanObj.thisObj) node._thisObj.parent = scanObj.thisObj; if (node._thisObj && scanObj.thisObj) node._thisObj.parent = scanObj.thisObj;
if (!node._thisObj) node._thisObj = scanObj.thisObj || null; if (!node._thisObj) node._thisObj = scanObj.thisObj || null;
@ -441,7 +413,7 @@ const _parseNode = (node, scanObj) => {
node.addEventListener(eventName, (e) => _runCode(tpl, { event: e, thisNode: node, ...e.detail || {} }, scanObj.thisObj || node, node._ref || {})); node.addEventListener(eventName, (e) => _runCode(tpl, { event: e, thisNode: node, ...e.detail || {} }, scanObj.thisObj || node, node._ref || {}));
} else { } else {
if (realAttrName === "bind") { if (realAttrName === "bind") {
node.addEventListener(node.tagName === "TEXTAREA" || node.isContentEditable || node.type === "text" || node.type === "password" ? "input" : "change", (e) => { node.addEventListener(["textarea", "text", "password"].includes(node.type || "text") || node.isContentEditable ? "input" : "change", (e) => {
let newVal = node.isContentEditable ? e.target.innerHTML : node.type === "checkbox" ? e.target.checked : e.target.files || e.target.value || e.detail; let newVal = node.isContentEditable ? e.target.innerHTML : node.type === "checkbox" ? e.target.checked : e.target.files || e.target.value || e.detail;
setNoWriteBack(node); setNoWriteBack(node);
setDisableRunCodeError(true); setDisableRunCodeError(true);
@ -465,13 +437,6 @@ const _parseNode = (node, scanObj) => {
if (node._thisObj) scanObj.thisObj = node._thisObj; if (node._thisObj) scanObj.thisObj = node._thisObj;
}; };
const _scanTree = (node, scanObj = {}) => { const _scanTree = (node, scanObj = {}) => {
if (node.nodeType === 3) {
if (node._stTranslated) return;
const translated = _translate(node.textContent);
if (translated !== node.textContent) node.textContent = translated;
node._stTranslated = true;
return;
}
if (node.nodeType !== 1) return; if (node.nodeType !== 1) return;
if (!node._stTranslated) { if (!node._stTranslated) {
Array.from(node.attributes).forEach((attr) => { Array.from(node.attributes).forEach((attr) => {
@ -482,43 +447,13 @@ const _scanTree = (node, scanObj = {}) => {
}); });
node._stTranslated = true; node._stTranslated = true;
} }
let resolvedThisObj = node._thisObj; if (node.tagName === "TEMPLATE" && (node.hasAttribute("$if") || node.hasAttribute("st-if")) && (node.hasAttribute("$each") || node.hasAttribute("st-each"))) {
let resolvedRef = node._ref;
if (resolvedThisObj === void 0 || resolvedRef === void 0) {
let curr = node;
while (curr && (resolvedThisObj === void 0 || resolvedRef === void 0)) {
if (resolvedThisObj === void 0 && curr._thisObj !== void 0) resolvedThisObj = curr._thisObj;
if (resolvedRef === void 0 && curr._ref !== void 0) resolvedRef = { ...curr._ref };
curr = curr.parentNode;
}
}
if (resolvedThisObj === void 0) resolvedThisObj = scanObj.thisObj;
if (resolvedRef === void 0) resolvedRef = scanObj.extendVars;
const triggerAttrs = ["$if", "$each", "st-if", "st-each", "$$if", "$$each", "st-st-if", "st-st-each"];
const eachAttrs = ["$each", "st-each", "$$each", "st-st-each"];
if (node.tagName !== "TEMPLATE" && triggerAttrs.some((t) => node.hasAttribute(t))) {
const template = document.createElement("TEMPLATE"); const template = document.createElement("TEMPLATE");
const attrs = Array.from(node.attributes).filter((attr) => triggerAttrs.includes(attr.name) || eachAttrs.some((t) => node.hasAttribute(t)) && ["as", "index"].includes(attr.name)); const attrs = Array.from(node.attributes).filter((attr2) => ["$if", "$each", "st-if", "st-each"].includes(attr2.name));
attrs.forEach((attr) => {
template.setAttribute(attr.name, attr.value);
node.removeAttribute(attr.name);
});
node.parentNode.insertBefore(template, node);
template.content.appendChild(node);
template._ref = resolvedRef;
template._thisObj = resolvedThisObj;
delete node._stScanned;
_scanTree(template, scanObj);
return;
}
if (node.isConnected) node._stScanned = true;
if (node.tagName === "TEMPLATE" && (node.hasAttribute("$if") || node.hasAttribute("st-if") || node.hasAttribute("$$if") || node.hasAttribute("st-st-if")) && (node.hasAttribute("$each") || node.hasAttribute("st-each") || node.hasAttribute("$$each") || node.hasAttribute("st-st-each"))) {
const template = document.createElement("TEMPLATE");
const attrs = Array.from(node.attributes).filter((attr2) => triggerAttrs.includes(attr2.name));
const attr = attrs[attrs.length - 1]; const attr = attrs[attrs.length - 1];
template.setAttribute(attr.name, attr.value); template.setAttribute(attr.name, attr.value);
node.removeAttribute(attr.name); node.removeAttribute(attr.name);
if (eachAttrs.includes(attr.name)) { if (attr.name === "$each" || attr.name === "st-each") {
Array.from(node.attributes).filter((attr2) => ["as", "index"].includes(attr2.name)).forEach((attr2) => { Array.from(node.attributes).filter((attr2) => ["as", "index"].includes(attr2.name)).forEach((attr2) => {
template.setAttribute(attr2.name, attr2.value); template.setAttribute(attr2.name, attr2.value);
node.removeAttribute(attr2.name); node.removeAttribute(attr2.name);
@ -526,8 +461,7 @@ const _scanTree = (node, scanObj = {}) => {
} }
Array.from(node.content.childNodes).forEach((child) => template.content.appendChild(child)); Array.from(node.content.childNodes).forEach((child) => template.content.appendChild(child));
node.content.appendChild(template); node.content.appendChild(template);
template._ref = resolvedRef; template._ref = node._ref;
template._thisObj = resolvedThisObj;
} }
if (node.tagName === "IMG" && (node.hasAttribute("src") || node.hasAttribute("_src") || node.hasAttribute("$src"))) { if (node.tagName === "IMG" && (node.hasAttribute("src") || node.hasAttribute("_src") || node.hasAttribute("$src"))) {
const imgNode = node; const imgNode = node;
@ -553,16 +487,10 @@ const _scanTree = (node, scanObj = {}) => {
while (curr && curr._ref === void 0) curr = curr.parentNode; while (curr && curr._ref === void 0) curr = curr.parentNode;
node._ref = curr ? { ...curr._ref } : {}; node._ref = curr ? { ...curr._ref } : {};
} }
if (node._refExt !== void 0) {
Object.assign(node._ref, node._refExt);
}
if (scanObj.extendVars) Object.assign(node._ref, scanObj.extendVars); if (scanObj.extendVars) Object.assign(node._ref, scanObj.extendVars);
_parseNode(node, { ...scanObj }); _parseNode(node, { ...scanObj });
const nodes = [...node.childNodes || []]; const nodes = [...node.childNodes || []];
const nextScanObj = { thisObj: scanObj.thisObj, extendVars: { ...node._ref } }; nodes.forEach((child) => _scanTree(child, { thisObj: scanObj.thisObj, extendVars: { ...node._ref } }));
nodes.forEach((child) => {
if (!child._stManaged) _scanTree(child, nextScanObj);
});
}; };
const _unbindTree = (node) => { const _unbindTree = (node) => {
if (node.nodeType !== 1) return; if (node.nodeType !== 1) return;
@ -648,14 +576,10 @@ const Hash = NewState({}, (k) => Util.safeJson(_hashParams.get(k)), (k, v) => {
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
window.addEventListener("hashchange", () => { window.addEventListener("hashchange", () => {
var _a2; var _a2;
const oldHashParams = _hashParams; const newParams = new URLSearchParams(((_a2 = window.location.hash) == null ? void 0 : _a2.substring(1)) || "");
_hashParams = new URLSearchParams(((_a2 = window.location.hash) == null ? void 0 : _a2.substring(1)) || ""); const keys = /* @__PURE__ */ new Set([..._hashParams.keys(), ...newParams.keys()]);
_hashParams.forEach((v, k) => { _hashParams = newParams;
if (oldHashParams.get(k) !== v) Hash[k] = Util.safeJson(v); keys.forEach((k) => Hash[k] = Hash[k]);
});
oldHashParams.forEach((v, k) => {
if (_hashParams.get(k) === void 0) Hash[k] = void 0;
});
}); });
} }
const LocalStorage = NewState({}, (k) => Util.safeJson(localStorage.getItem(k)), (k, v) => { const LocalStorage = NewState({}, (k) => Util.safeJson(localStorage.getItem(k)), (k, v) => {
@ -666,7 +590,6 @@ const LocalStorage = NewState({}, (k) => Util.safeJson(localStorage.getItem(k)),
}); });
const State = NewState({ const State = NewState({
exitBlocks: 0 exitBlocks: 0
// 默认值
}); });
globalThis.Hash = Hash; globalThis.Hash = Hash;
globalThis.LocalStorage = LocalStorage; globalThis.LocalStorage = LocalStorage;
@ -678,25 +601,30 @@ const ApigoState = {
$$, $$,
RefreshState, RefreshState,
SetTranslator, SetTranslator,
_scanTree,
_unbindTree,
Util, Util,
Hash, Hash,
LocalStorage, LocalStorage,
State State,
_runCode,
_returnCode,
onNotifyUpdate,
setActiveBinding
}; };
if (typeof globalThis !== "undefined") { if (typeof window !== "undefined") {
Object.assign(globalThis, ApigoState); window.ApigoState = ApigoState;
globalThis.ApigoState = ApigoState;
} }
if (typeof document !== "undefined") { if (typeof document !== "undefined") {
const init = () => { const init = () => {
Component._initPending(); const htmlNode = document.documentElement;
if (!htmlNode.hasAttribute("$data-bs-theme") && !htmlNode.hasAttribute("data-bs-theme")) {
htmlNode.setAttribute("$data-bs-theme", "LocalStorage.darkMode?'dark':'light'");
}
new MutationObserver((mutations) => { new MutationObserver((mutations) => {
mutations.forEach((mutation) => { mutations.forEach((mutation) => {
mutation.addedNodes.forEach((newNode) => { mutation.addedNodes.forEach((newNode) => {
if (newNode.isConnected && newNode.nodeType === 1 && !newNode._stScanned) { if (newNode.isConnected) _scanTree(newNode);
newNode._stScanned = true;
_scanTree(newNode);
}
}); });
mutation.removedNodes.forEach((oldNode) => _unbindTree(oldNode)); mutation.removedNodes.forEach((oldNode) => _unbindTree(oldNode));
}); });

0
old/state.js → old/state_manybeok.js
View File

502
old/state_original.js Normal file
View File

@ -0,0 +1,502 @@
// state.js v2.3
(() => {
(() => {
try { return document.createElement('div').setAttribute('$t', '1') } catch (e) { }
const originalSetAttribute = Element.prototype.setAttribute
Element.prototype.setAttribute = function (name, value) {
if (!name.startsWith('$')) return originalSetAttribute.call(this, name, value)
return originalSetAttribute.call(this, 'st-' + name.substring(1), value)
}
})()
globalThis.$ = (a, b) => b ? a.querySelector(b) : document.querySelector(a)
globalThis.$$ = (a, b) => b ? a.querySelectorAll(b) : document.querySelectorAll(a)
let _activeBinding = null
let _noWriteBack = null
globalThis.NewState = function (defaults = {}, getter = null, setter = null) {
const _defaults = {}//, _localStorageBinds = {}, _hashBinds = {}
const _stateMappings = new Map()
const _watchers = new Map()
const _watchFunc = (k, cb) => {
if (!_watchers.has(k)) _watchers.set(k, new Set())
!cb ? _watchers.get(k).clear() : _watchers.get(k).add(cb)
}
const _unwatchFunc = (k, cb) => {
if (!_watchers.has(k)) _watchers.set(k, new Set())
_watchers.get(k).delete(cb)
}
const _getter = getter || (k => _defaults[k])
const _setter = setter || ((k, v) => _defaults[k] = v)
Object.assign(_defaults, defaults)
// 创建代理对象，实现数据绑定
return new Proxy(_defaults, {
get(target, key) {
if (key === '__watch') return _watchFunc
if (key === '__unwatch') return _unwatchFunc
if (_activeBinding) {
if (!_stateMappings.has(key)) _stateMappings.set(key, new Set())
_stateMappings.get(key).add(_activeBinding)
_activeBinding.node._states.add(_stateMappings) // 存储状态机到节点，方便删除节点时清除绑定
}
return _getter(key)
},
set(target, key, value) {
if (_getter(key) !== value) { // 允许自赋值，用来触发更新
_setter(key, value)
}
if (_watchers.has(key)) {
_watchers.get(key).forEach(cb => {
const r = cb(value)
if (r !== undefined) {
value = r
target[key] = value
}
})
}
if (_watchers.has(null)) {
_watchers.get(null).forEach(cb => cb(value))
}
if (_stateMappings.has(key)) {
const bindings = _stateMappings.get(key)
for (const binding of bindings) {
if (!binding.node.isConnected) {
bindings.delete(binding)
continue
}
if (_noWriteBack !== binding.node) _updateBinding(binding)
}
}
return true
}
})
}
function _returnCode(code, vars, thisObj, extendVars) {
if (code.includes('${')) return _runCode('return `' + code + '`', vars, thisObj, extendVars)
else return _runCode('return ' + code, vars, thisObj, extendVars)
}
let _disableRunCodeError = false
function _runCode(code, vars, thisObj, extendVars) {
const argKeys = [...Object.keys(extendVars), ...Object.keys(vars)]
const argValues = [...Object.values(extendVars), ...Object.values(vars)]
argKeys.push(code)
try {
const r = new Function(...argKeys).apply(thisObj, argValues)
return r
} catch (e) {
if (!_disableRunCodeError) console.error(e, extendVars, [code, extendVars, vars, thisObj])
return null
}
}
function _clearRenderedNodes(node) {
if (node._renderedNodes) node._renderedNodes.forEach(nodes => {
nodes.forEach(child => {
child.remove()
if (child._renderedNodes) _clearRenderedNodes(child)
})
})
}
// 更新绑定值
function _updateBinding(binding) {
const node = binding.node
const tpl = binding.tpl
const exp = binding.exp
// 每次都动态重建绑定，确保最新状态
_activeBinding = binding
let result = exp ? (tpl ? _returnCode(tpl, { thisNode: node }, node._thisObj || node, node._ref || null) : null) : tpl
_activeBinding = null
if (binding.prop) {
// 处理对象绑定
const prop = binding.prop
let o = node
for (let i = 0; i < prop.length - 1; i++) {
if (!prop[i]) continue
if (o[prop[i]] == null) o[prop[i]] = {}
o = o[prop[i]]
if (typeof o !== 'object') break
}
if (typeof o === 'object' && o !== null) {
const resultIsObject = typeof result === 'object' && result != null && !Array.isArray(result)
const lk = prop[prop.length - 1]
if (lk) {
if (resultIsObject && o[lk] == null) o[lk] = {}
const lo = o[lk]
if (typeof lo === 'object' && lo != null && lo.__watch) Object.assign(lo, result)
else o[lk] = result
} else if (resultIsObject && typeof o === 'object') {
Object.assign(o, result)
}
}
} else if (binding.attr) {
// 处理attr绑定
const attr = binding.attr
if (attr === 'if') {
if (result) {
node._children.forEach(child => {
node.parentNode.insertBefore(child, node)
child._ref = { ...node._ref }
})
node._renderedNodes = [node._children]
} else {
_clearRenderedNodes(node)
node._renderedNodes = []
}
} else if (attr === 'each') {
if (result && typeof result === 'object') {
const asName = node.getAttribute('as') || 'item'
const indexName = node.getAttribute('index') || 'index'
let keys, getVal;
if (result instanceof Map) {
keys = Array.from(result.keys())
getVal = k => result.get(k)
} else if (typeof result[Symbol.iterator] === 'function') {
const arr = Array.isArray(result) ? result : Array.from(result)
keys = new Array(arr.length)
for (let i = 0; i < arr.length; i++) keys[i] = i
getVal = k => arr[k]
} else {
keys = Object.keys(result)
getVal = k => result[k]
}
keys.forEach((k, i) => {
const item = getVal(k)
if (i < node._renderedNodes.length) {
node._renderedNodes[i].forEach(child => {
child._ref[indexName] = k
child._ref[asName] = item
_scanTree(child)
})
} else {
const newNodes = []
node._children.forEach(child => {
const cloned = child.cloneNode(true)
cloned._ref = { ...node._ref }
cloned._ref[indexName] = k
cloned._ref[asName] = item
cloned._thisObj = node._thisObj
node.parentNode.insertBefore(cloned, node)
newNodes.push(cloned)
})
node._renderedNodes.push(newNodes)
}
})
while (node._renderedNodes.length > keys.length) {
node._renderedNodes[node._renderedNodes.length - 1].forEach(child => {
_clearRenderedNodes(child)
child.remove()
})
node._renderedNodes.pop()
}
} else {
_clearRenderedNodes(node)
node._renderedNodes = []
}
} else if (attr === 'bind') {
if (['INPUT', 'SELECT', 'TEXTAREA'].includes(node.tagName)) {
// 防止浏览器后退前进后擅自恢复表单值
if (!node.hasAttribute('autocomplete')) node.setAttribute('autocomplete', 'off')
}
if (node.type === 'checkbox') {
if (node.value !== 'on' && !result) {
// 复选框有指定名字且未绑定值时，使用多选模式
_runCode(`${tpl} = []`, { thisNode: node }, node._thisObj || node, node._ref || {})
result = []
}
node._checkboxMultiMode = result instanceof Array
const isChecked = result instanceof Array ? result.includes(node.value) : !!result
if (node.checked !== isChecked) node.checked = isChecked
} else if (node.type === 'radio') {
if (node.checked !== (node.value === String(result ?? ''))) node.checked = (node.value === String(result ?? ''))
} else if ('value' in node && node.type !== 'file') {
Promise.resolve().then(() => { // 确保 select 元素值处理好再设置
if (node.value !== String(result ?? '')) node.value = result
})
} else if (node.isContentEditable) {
if (node.innerHTML !== String(result ?? '')) node.innerHTML = result
}
node.dispatchEvent(new CustomEvent('bind', { bubbles: false, detail: result }))
} else {
if (['checked', 'disabled', 'readonly'].includes(attr)) result = !!result
if (typeof result === 'boolean') {
result ? node.setAttribute(attr, '') : node.removeAttribute(attr)
} else if (result !== undefined) {
if (typeof result !== 'string') result = JSON.stringify(result)
if (attr === 'text') {
node.textContent = result ?? ''
} else if (attr === 'html') {
node.innerHTML = result ?? ''
} else if (node.tagName === 'IMG' && attr === 'src' && result.includes('.svg')) {
node.setAttribute('_src', result ?? '')
} else {
node.setAttribute(attr, result ?? '')
}
}
}
}
}
const _initBinding = (binding) => {
if (!binding.node._bindings) binding.node._bindings = []
binding.node._bindings.push({ attr: binding.attr, prop: binding.prop, tpl: binding.tpl, exp: binding.exp }) // 存储绑定信息，方便恢复
_updateBinding(binding)
}
const _mergeNode = (from, to, scanObj, exists = {}) => {
Array.from(from.attributes).forEach(attr => attr.name !== 'class' && to.setAttribute(attr.name, attr.value))
to.classList.add(...from.classList)
Array.from(from.childNodes).forEach(child => to.appendChild(child))
// 实现组件继承
if (Component.exists(from.tagName)) _makeComponent(from.tagName, to, scanObj, exists)
}
const _makeComponent = (name, node, scanObj, exists = {}) => {
if (exists[name]) return
exists[name] = true
if (scanObj.thisObj) Array.from(node.attributes).forEach(attr => { if ((attr.name.startsWith('$') || attr.name.startsWith('st-')) && attr.value.includes('this.')) attr.value = attr.value.replace(/\bthis\./g, 'this.parent.') }) // 在父组件中的子组件属性里的this.需要转换为this.parent.，因为实际运行会在子组件上下文执行
const componentFunc = Component.getSetupFunction(name)
const slots = {}
Array.from(node.childNodes).forEach(child => {
if (child.nodeType === Node.ELEMENT_NODE && child.hasAttribute('slot')) {
slots[child.getAttribute('slot')] = child
child.removeAttribute('slot')
}
})
node.innerHTML = ''
node.state = NewState(node.state || {})
const template = Component.getTemplate(name)
if (template) {
const tplnode = template.content.cloneNode(true)
if (tplnode.childNodes.length) {
const rootNode = tplnode.children[0]
_mergeNode(rootNode, node, scanObj, exists)
$$(node, '[slot-id]').forEach(placeholder => {
const slotName = placeholder.getAttribute('slot-id')
if (slots[slotName]) {
placeholder.removeAttribute('slot-id')
placeholder.innerHTML = ''
_mergeNode(slots[slotName], placeholder, scanObj, exists)
}
})
}
}
if (componentFunc) componentFunc(node)
}
const _parseNode = (node, scanObj) => {
if (node._bindings) {
// 恢复绑定信息
node._states = new Set()
node._bindings.forEach(bindingData => {
const binding = { node: node, ...bindingData }
_updateBinding(binding)
})
if (node._hasOnUpdate) node.dispatchEvent(new Event('update', { bubbles: false }))
return
}
// 处理组件
if (Component.exists(node.tagName) && !node._componentInitialized) {
_makeComponent(node.tagName, node, scanObj)
$$(node, '[slot-id]').forEach(placeholder => placeholder.removeAttribute('slot-id'))
node._componentInitialized = true
if (!node._thisObj) node._thisObj = node
}
let attrs = []
if (node.tagName === 'TEMPLATE') {
node._children = [...node.content.childNodes]
node._renderedNodes = []
if (node.hasAttribute('$if')) attrs.push(node.getAttributeNode('$if'))
else if (node.hasAttribute('$each')) attrs.push(node.getAttributeNode('$each'))
else if (node.hasAttribute('st-if')) attrs.push(node.getAttributeNode('st-if'))
else if (node.hasAttribute('st-each')) attrs.push(node.getAttributeNode('st-each'))
} else {
attrs = Array.from(node.attributes).filter(attr => (attr.name.startsWith('$') || attr.name.startsWith('st-')) && !['$if', '$each', 'st-if', 'st-each'].includes(attr.name) || attr.name.includes('.'))
}
if (node._thisObj && scanObj.thisObj) node._thisObj.parent = scanObj.thisObj
if (!node._thisObj) node._thisObj = scanObj.thisObj || null
if (!node._ref) node._ref = scanObj.extendVars || {}
node._states = new Set()
// node._handleEvents = []
attrs.forEach(attr => {
const exp = attr.name.startsWith('$') || attr.name.startsWith('st-')
const realAttrName = exp ? attr.name.slice(attr.name.startsWith('$') ? 1 : 3) : attr.name
let tpl = attr.value
node.removeAttribute(attr.name)
if (realAttrName.startsWith('.')) {
// 处理属性绑定
_initBinding({ node: node, prop: realAttrName.split('.'), tpl, exp })
} else {
if (realAttrName.startsWith('on')) {
if (realAttrName === 'onupdate') node._hasOnUpdate = true
if (realAttrName === 'onload' && !['BODY', 'IMG', 'IFRAME'].includes(node.tagName)) node._hasOnLoad = true
if (realAttrName === 'onunload' && !['BODY', 'IMG', 'IFRAME'].includes(node.tagName)) node._hasOnUnload = true;
// node._handleEvents.push(realAttrName.slice(2));
((node, thisObj) => {
node.addEventListener(realAttrName.slice(2), (e) => {
_runCode(tpl, { event: e, thisNode: node, ...(e.detail || {}) }, thisObj || node, node._ref || {})
})
})(node, scanObj.thisObj)
} else {
if (realAttrName === 'bind') {
// 处理 bind 指令（双向数据绑定）
node.addEventListener(node.tagName === 'TEXTAREA' || node.isContentEditable || node.type === 'text' || node.type === 'password' ? 'input' : 'change', (e) => {
let newVal = node.isContentEditable ? e.target.innerHTML : (node.type === 'checkbox' ? e.target.checked : e.target.files || e.target.value || e.detail)
_noWriteBack = node
_disableRunCodeError = true // 忽略赋值错误，支持非对象类型的 $bind
if (node.type === 'checkbox' && node._checkboxMultiMode) {
_runCode(`!!checked ? (!${tpl}.includes(val) && ${tpl}.push(val)) : (index = ${tpl}.indexOf(val), index > -1 && ${tpl}.splice(index, 1))`, { val: node.value, checked: newVal, thisNode: node }, scanObj.thisObj || node, node._ref || {})
} else {
_runCode(`${tpl} = val`, { val: newVal, thisNode: node }, scanObj.thisObj || node, node._ref || {})
}
_disableRunCodeError = false
_noWriteBack = null
})
} else if (realAttrName === 'text' && !tpl) {
tpl = node.textContent
node.textContent = ''
}
if (tpl) _initBinding({ node: node, attr: realAttrName, tpl, exp })
}
}
})
if (node._hasOnLoad || node._componentInitialized) {
(node => {
Promise.resolve().then(() => node.dispatchEvent(new Event('load', { bubbles: false })))
})(node)
}
if (node._hasOnUpdate) node.dispatchEvent(new Event('update', { bubbles: false }))
if (node._thisObj) scanObj.thisObj = node._thisObj
}
const _scanTree = (node, scanObj = {}) => {
if (node.nodeType !== 1) return
// 自动为非模板节点的$if和$each指令创建模版节点
if (node.tagName !== 'TEMPLATE' && (node.hasAttribute('$if') || node.hasAttribute('$each') || node.hasAttribute('st-if') || node.hasAttribute('st-each'))) {
const template = document.createElement('TEMPLATE')
const attrs = Array.from(node.attributes).filter(attr => ['$if', '$each', 'st-if', 'st-each'].includes(attr.name) || ((node.hasAttribute('$each') || node.hasAttribute('st-each')) && ['as', 'index'].includes(attr.name)))
attrs.forEach(attr => {
template.setAttribute(attr.name, attr.value)
node.removeAttribute(attr.name)
})
node.parentNode.insertBefore(template, node)
template.content.appendChild(node)
template._ref = node._ref
node = template
return // 异步交给MutationObserver处理
}
// 处理模板节点同时存在$if和$each指令的情况， 自动为第二个指令创建模版节点
if (node.tagName === 'TEMPLATE' && (node.hasAttribute('$if') || node.hasAttribute('st-if')) && (node.hasAttribute('$each') || node.hasAttribute('st-each'))) {
const template = document.createElement('TEMPLATE')
const attrs = Array.from(node.attributes).filter(attr => ['$if', '$each', 'st-if', 'st-each'].includes(attr.name))
const attr = attrs[attrs.length - 1]
template.setAttribute(attr.name, attr.value)
node.removeAttribute(attr.name)
if (attr.name === '$each' || attr.name === 'st-each') {
Array.from(node.attributes).filter(attr => ['as', 'index'].includes(attr.name)).forEach(attr => {
template.setAttribute(attr.name, attr.value)
node.removeAttribute(attr.name)
})
}
Array.from(node.content.childNodes).forEach(child => {
template.content.appendChild(child)
})
node.content.appendChild(template)
template._ref = node._ref
}
// 处理 SVG
if (node.tagName === 'IMG' && (node.hasAttribute('src') || node.hasAttribute('_src') || node.hasAttribute('$src'))) {
const imgNode = node
Promise.resolve().then(() => {
const url = imgNode.getAttribute('_src') || imgNode.getAttribute('src')
if (url) fetch(url, { cache1: 'force-cache' }).then(r => {
return r.text()
}).then(svgText => {
const realSvg = new DOMParser().parseFromString(svgText, "image/svg+xml").querySelector('svg')
if (realSvg) {
Array.from(imgNode.attributes).forEach(attr => realSvg.setAttribute(attr.name, attr.value))
imgNode.replaceWith(realSvg)
}
})
})
}
if (node._thisObj !== undefined) scanObj.thisObj = node._thisObj || null
if (scanObj.thisObj === undefined) {
// 向上查找_thisObj，如果没有就用null，null 代表就是没有，undefined 表示需要向上查找
let curr = node
while (curr && curr._thisObj === undefined) curr = curr.parentNode
scanObj.thisObj = curr ? curr._thisObj : null
}
if (node._ref === undefined) {
let curr = node
while (curr && curr._ref === undefined) curr = curr.parentNode
node._ref = curr ? { ...curr._ref } : {}
}
if (scanObj.extendVars === undefined) scanObj.extendVars = {}
if (node._ref !== undefined) {
Object.assign(node._ref, scanObj.extendVars)
scanObj.extendVars = { ...node._ref }
}
_parseNode(node, scanObj)
const nodes = [...(node.childNodes || [])]
scanObj.extendVars = node._ref || scanObj.extendVars
nodes.forEach(child => _scanTree(child, { thisObj: scanObj.thisObj, extendVars: { ...node._ref } }))
}
const _unbindTree = (node) => {
if (node.nodeType !== 1) return
if (node._hasOnUnload) node.dispatchEvent(new Event('unload', { bubbles: false }))
if (node._states) {
node._states.forEach(stateMappings => {
for (const [key, bindingSet] of stateMappings) {
for (const binding of bindingSet) {
if (binding.node === node) bindingSet.delete(binding)
}
}
})
}
node.childNodes && node.childNodes.forEach(child => _unbindTree(child))
}
globalThis.RefreshState = _scanTree
const _components = new Map()
const _pendingTemplates = []
globalThis.Component = {
getTemplate: name => $(`template[component="${name.toUpperCase()}"]`),
register: (name, setupFunc, templateNode = null, ...globalNodes) => {
_components.set(name.toUpperCase(), setupFunc)
if (document.readyState !== 'loading') Component._addTemplate(name, templateNode, globalNodes)
else _pendingTemplates.push([name, templateNode, globalNodes])
},
exists: (name) => _components.has(name.toUpperCase()),
getSetupFunction: (name) => _components.get(name.toUpperCase()),
_addTemplate: (name, templateNode, globalNodes) => {
if (templateNode) {
const template = document.createElement('TEMPLATE')
template.setAttribute('component', name.toUpperCase())
template.content.appendChild(templateNode)
document.body.appendChild(template)
}
if (globalNodes) globalNodes.forEach(node => document.body.appendChild(node))
}
}
document.addEventListener('DOMContentLoaded', () => {
_pendingTemplates.forEach(([name, templateNode, globalNodes]) => Component._addTemplate(name, templateNode, globalNodes))
_pendingTemplates.length = 0
}, true)
document.addEventListener('DOMContentLoaded', () => {
new MutationObserver(mutations => {
mutations.forEach(mutation => {
mutation.addedNodes.forEach(newNode => {
if (newNode.isConnected) _scanTree(newNode)
})
mutation.removedNodes.forEach(oldNode => _unbindTree(oldNode))
})
}).observe(document.documentElement, { childList: true, subtree: true })
_scanTree(document.documentElement)
})
})()

5
src/component.js
View File

@ -8,6 +8,7 @@ const _pendingTemplates = [];
export const Component = { export const Component = {
getTemplate: name => document.querySelector(`template[component="${name.toUpperCase()}"]`), getTemplate: name => document.querySelector(`template[component="${name.toUpperCase()}"]`),
register: (name, setupFunc, templateNode = null, ...globalNodes) => { register: (name, setupFunc, templateNode = null, ...globalNodes) => {
console.log('Component.register:', name.toUpperCase());
_components.set(name.toUpperCase(), setupFunc); _components.set(name.toUpperCase(), setupFunc);
if (document.readyState !== 'loading') Component._addTemplate(name, templateNode, globalNodes); if (document.readyState !== 'loading') Component._addTemplate(name, templateNode, globalNodes);
else _pendingTemplates.push([name, templateNode, globalNodes]); else _pendingTemplates.push([name, templateNode, globalNodes]);
@ -42,9 +43,7 @@ export function _mergeNode(from, to, scanObj, exists = {}) {
}); });
} }
to.classList.add(...from.classList); to.classList.add(...from.classList);
const fromContent = from.tagName === 'TEMPLATE' ? from.content : from; Array.from(from.childNodes).forEach(child => to.appendChild(child));
const toContent = to.tagName === 'TEMPLATE' ? to.content : to;
Array.from(fromContent.childNodes).forEach(child => toContent.appendChild(child));
if (from.tagName && Component.exists(from.tagName)) _makeComponent(from.tagName, to, scanObj, exists); if (from.tagName && Component.exists(from.tagName)) _makeComponent(from.tagName, to, scanObj, exists);
} }

124
src/dom.js
View File

@ -28,8 +28,7 @@ if (typeof document !== 'undefined') {
const originalSetAttribute = Element.prototype.setAttribute; const originalSetAttribute = Element.prototype.setAttribute;
Element.prototype.setAttribute = function (name, value) { Element.prototype.setAttribute = function (name, value) {
if (!name.startsWith('$')) return originalSetAttribute.call(this, name, value); if (!name.startsWith('$')) return originalSetAttribute.call(this, name, value);
const prefix = name.startsWith('$$') ? 'st-st-' : 'st-'; return originalSetAttribute.call(this, 'st-' + name.substring(1), value);
return originalSetAttribute.call(this, prefix + name.substring(name.startsWith('$$') ? 2 : 1), value);
}; };
} }
} }
@ -50,15 +49,12 @@ export function _updateBinding(binding) {
if (!node.isConnected && node.tagName !== 'TEMPLATE') return; if (!node.isConnected && node.tagName !== 'TEMPLATE') return;
setActiveBinding(binding); setActiveBinding(binding);
if (window.__perfTrace) window.__perfTrace.evalCount++;
const evalStart = window.__perfTrace ? performance.now() : 0;
let result = binding.exp ? (binding.tpl ? _returnCode(binding.tpl, { thisNode: node }, node._thisObj || node, node._ref || null) : null) : binding.tpl; let result = binding.exp ? (binding.tpl ? _returnCode(binding.tpl, { thisNode: node }, node._thisObj || node, node._ref || null) : null) : binding.tpl;
// 增量 3: 支持 $$ 前缀的双重评估
if (binding.exp === 2 && typeof result === 'string') { if (binding.exp === 2 && typeof result === 'string') {
try { result = _returnCode(result, { thisNode: node }, node._thisObj || node, node._ref || null); } catch (e) { } try { result = _returnCode(result, { thisNode: node }, node._thisObj || node, node._ref || null); } catch (e) { }
} }
if (window.__perfTrace) window.__perfTrace.evalTotal += (performance.now() - evalStart);
setActiveBinding(null); setActiveBinding(null);
if (binding.prop) { if (binding.prop) {
@ -71,9 +67,10 @@ export function _updateBinding(binding) {
if (typeof o !== 'object') break; if (typeof o !== 'object') break;
} }
if (typeof o === 'object' && o !== null) { if (typeof o === 'object' && o !== null) {
const resultIsObject = typeof result === 'object' && result != null && !Array.isArray(result);
const lk = prop[prop.length - 1]; const lk = prop[prop.length - 1];
if (lk) { if (lk) {
if (typeof result === 'object' && result != null && !Array.isArray(result) && o[lk] == null) o[lk] = {}; if (resultIsObject && o[lk] == null) o[lk] = {};
const lo = o[lk]; const lo = o[lk];
if (typeof lo === 'object' && lo != null && lo.__watch) Object.assign(lo, result); if (typeof lo === 'object' && lo != null && lo.__watch) Object.assign(lo, result);
else { if (o[lk] !== result) o[lk] = result; } else { if (o[lk] !== result) o[lk] = result; }
@ -87,13 +84,11 @@ export function _updateBinding(binding) {
if (result) { if (result) {
if (!node._renderedNodes || node._renderedNodes.length === 0) { if (!node._renderedNodes || node._renderedNodes.length === 0) {
node._children.forEach(child => { node._children.forEach(child => {
child._stManaged = true;
node.parentNode.insertBefore(child, node); node.parentNode.insertBefore(child, node);
child._ref = { ...node._ref }; child._ref = { ...node._ref };
child._thisObj = node._thisObj;
}); });
node._renderedNodes = [node._children]; node._renderedNodes = [node._children];
} else {
node._renderedNodes[0].forEach(child => _scanTree(child, { thisObj: node._thisObj, extendVars: child._ref }));
} }
} else { } else {
_clearRenderedNodes(node); _clearRenderedNodes(node);
@ -103,7 +98,7 @@ export function _updateBinding(binding) {
if (result && typeof result === 'object') { if (result && typeof result === 'object') {
const asName = node.getAttribute('as') || 'item'; const asName = node.getAttribute('as') || 'item';
const indexName = node.getAttribute('index') || 'index'; const indexName = node.getAttribute('index') || 'index';
const keyName = node.getAttribute('key'); const keyName = node.getAttribute('key'); // 增量 2: 支持 key
let keys, getVal; let keys, getVal;
if (result instanceof Map) { if (result instanceof Map) {
keys = Array.from(result.keys()); getVal = k => result.get(k); keys = Array.from(result.keys()); getVal = k => result.get(k);
@ -123,43 +118,21 @@ export function _updateBinding(binding) {
keys.forEach((k, i) => { keys.forEach((k, i) => {
const item = getVal(k); const item = getVal(k);
const rawKey = keyName ? (item && typeof item === 'object' ? item[keyName] : item) : k; const rawKey = keyName ? (item && typeof item === 'object' ? item[keyName] : item) : k;
// Safety: Handle potential duplicate keys or undefined keys const keyVal = (rawKey === undefined || rawKey === null || newKeyedNodes.has(rawKey)) ? `st_key_${i}` : rawKey;
const keyVal = (rawKey === undefined || rawKey === null || newKeyedNodes.has(rawKey)) ? `st_key_fallback_${i}_${Math.random()}` : rawKey;
let existingNodes = node._keyedNodes.get(keyVal); let existingNodes = node._keyedNodes.get(keyVal);
if (existingNodes) { if (existingNodes) {
// Reuse existing nodes
node._keyedNodes.delete(keyVal); node._keyedNodes.delete(keyVal);
existingNodes.forEach(child => { existingNodes.forEach(child => {
if (window.__statePerformanceTelemetry) window.__statePerformanceTelemetry.reuseCount++; child._ref[indexName] = k;
let scopeChanged = false; child._ref[asName] = item;
for (let key in node._ref) { _scanTree(child);
if (key === asName || key === indexName) continue;
if (child._ref[key] !== node._ref[key]) {
child._ref[key] = node._ref[key];
scopeChanged = true;
}
}
const indexChanged = child._ref[indexName] !== k;
if (indexChanged) child._ref[indexName] = k;
if (child._ref[asName] !== item || scopeChanged) {
child._ref[asName] = item;
if (window.__statePerformanceTelemetry) window.__statePerformanceTelemetry.scanCount++;
_scanTree(child, { thisObj: node._thisObj, extendVars: child._ref });
} else if (node.parentNode.lastChild !== child) {
// Just move to the end to maintain order
if (window.__statePerformanceTelemetry) window.__statePerformanceTelemetry.moveCount++;
node.parentNode.insertBefore(child, node);
}
}); });
} else { } else {
// Create new nodes
existingNodes = []; existingNodes = [];
node._children.forEach(child => { node._children.forEach(child => {
const cloned = child.cloneNode(true); const cloned = child.cloneNode(true);
cloned._stManaged = true;
cloned._ref = { ...node._ref, [indexName]: k, [asName]: item }; cloned._ref = { ...node._ref, [indexName]: k, [asName]: item };
cloned._thisObj = node._thisObj; cloned._thisObj = node._thisObj;
node.parentNode.insertBefore(cloned, node); node.parentNode.insertBefore(cloned, node);
@ -168,18 +141,13 @@ export function _updateBinding(binding) {
} }
newKeyedNodes.set(keyVal, existingNodes); newKeyedNodes.set(keyVal, existingNodes);
currentRenderedNodes.push(existingNodes); currentRenderedNodes.push(existingNodes);
// Ensure DOM order
existingNodes.forEach(child => node.parentNode.insertBefore(child, node));
}); });
// Cleanup old nodes
node._keyedNodes.forEach(nodes => nodes.forEach(child => { _clearRenderedNodes(child); child.remove(); })); node._keyedNodes.forEach(nodes => nodes.forEach(child => { _clearRenderedNodes(child); child.remove(); }));
node._keyedNodes = newKeyedNodes; node._keyedNodes = newKeyedNodes;
node._renderedNodes = currentRenderedNodes; node._renderedNodes = currentRenderedNodes;
} else { } else {
_clearRenderedNodes(node); _clearRenderedNodes(node);
if (node._keyedNodes) node._keyedNodes.forEach(nodes => nodes.forEach(child => child.remove()));
node._keyedNodes = new Map();
node._renderedNodes = []; node._renderedNodes = [];
} }
} else if (attr === 'bind') { } else if (attr === 'bind') {
@ -192,7 +160,7 @@ export function _updateBinding(binding) {
} else if (node.type === 'radio') { } else if (node.type === 'radio') {
if (node.checked !== (node.value === String(result ?? ''))) node.checked = (node.value === String(result ?? '')); if (node.checked !== (node.value === String(result ?? ''))) node.checked = (node.value === String(result ?? ''));
} else if ('value' in node && node.type !== 'file') { } else if ('value' in node && node.type !== 'file') {
setTimeout(() => { if (node.value !== String(result ?? '')) node.value = result; }); Promise.resolve().then(() => { if (node.value !== String(result ?? '')) node.value = result; });
} else if (node.isContentEditable) { } else if (node.isContentEditable) {
if (node.innerHTML !== String(result ?? '')) node.innerHTML = result; if (node.innerHTML !== String(result ?? '')) node.innerHTML = result;
} }
@ -218,12 +186,11 @@ export const _initBinding = (binding) => {
}; };
export const _parseNode = (node, scanObj) => { export const _parseNode = (node, scanObj) => {
let hasBindings = false;
if (node._bindings) { if (node._bindings) {
node._states = new Set(); node._states = new Set();
node._bindings.forEach(b => _updateBinding({ node, ...b })); node._bindings.forEach(b => _updateBinding({ node, ...b }));
if (node._hasOnUpdate) node.dispatchEvent(new Event('update', { bubbles: false })); if (node._hasOnUpdate) node.dispatchEvent(new Event('update', { bubbles: false }));
hasBindings = true; return;
} }
if (Component.exists(node.tagName) && !node._componentInitialized) { if (Component.exists(node.tagName) && !node._componentInitialized) {
@ -251,14 +218,11 @@ export const _parseNode = (node, scanObj) => {
if (!node._renderedNodes) node._renderedNodes = []; if (!node._renderedNodes) node._renderedNodes = [];
} }
if (hasBindings) return;
let attrs = []; let attrs = [];
const triggerAttrs = ['$if', '$each', 'st-if', 'st-each', '$$if', '$$each', 'st-st-if', 'st-st-each'];
if (node.tagName === 'TEMPLATE') { if (node.tagName === 'TEMPLATE') {
triggerAttrs.forEach(n => node.hasAttribute(n) && attrs.push(node.getAttributeNode(n))); ['$if', '$each', 'st-if', 'st-each'].forEach(n => node.hasAttribute(n) && attrs.push(node.getAttributeNode(n)));
} else { } else {
attrs = Array.from(node.attributes).filter(a => (a.name.startsWith('$') || a.name.startsWith('st-')) && !triggerAttrs.includes(a.name) || a.name.includes('.')); attrs = Array.from(node.attributes).filter(a => (a.name.startsWith('$') || a.name.startsWith('st-')) && !['$if', '$each', 'st-if', 'st-each'].includes(a.name) || a.name.includes('.'));
} }
if (node._thisObj && scanObj.thisObj) node._thisObj.parent = scanObj.thisObj; if (node._thisObj && scanObj.thisObj) node._thisObj.parent = scanObj.thisObj;
@ -283,7 +247,7 @@ export const _parseNode = (node, scanObj) => {
node.addEventListener(eventName, (e) => _runCode(tpl, { event: e, thisNode: node, ...(e.detail || {}) }, scanObj.thisObj || node, node._ref || {})); node.addEventListener(eventName, (e) => _runCode(tpl, { event: e, thisNode: node, ...(e.detail || {}) }, scanObj.thisObj || node, node._ref || {}));
} else { } else {
if (realAttrName === 'bind') { if (realAttrName === 'bind') {
node.addEventListener(node.tagName === 'TEXTAREA' || node.isContentEditable || node.type === 'text' || node.type === 'password' ? 'input' : 'change', (e) => { node.addEventListener(['textarea', 'text', 'password'].includes(node.type || 'text') || node.isContentEditable ? 'input' : 'change', (e) => {
let newVal = node.isContentEditable ? e.target.innerHTML : (node.type === 'checkbox' ? e.target.checked : e.target.files || e.target.value || e.detail); let newVal = node.isContentEditable ? e.target.innerHTML : (node.type === 'checkbox' ? e.target.checked : e.target.files || e.target.value || e.detail);
setNoWriteBack(node); setDisableRunCodeError(true); setNoWriteBack(node); setDisableRunCodeError(true);
if (node.type === 'checkbox' && node._checkboxMultiMode) _runCode(`!!checked ? (!${tpl}.includes(val) && ${tpl}.push(val)) : (index = ${tpl}.indexOf(val), index > -1 && ${tpl}.splice(index, 1))`, { val: node.value, checked: newVal, thisNode: node }, scanObj.thisObj || node, node._ref || {}); if (node.type === 'checkbox' && node._checkboxMultiMode) _runCode(`!!checked ? (!${tpl}.includes(val) && ${tpl}.push(val)) : (index = ${tpl}.indexOf(val), index > -1 && ${tpl}.splice(index, 1))`, { val: node.value, checked: newVal, thisNode: node }, scanObj.thisObj || node, node._ref || {});
@ -301,12 +265,6 @@ export const _parseNode = (node, scanObj) => {
}; };
export const _scanTree = (node, scanObj = {}) => { export const _scanTree = (node, scanObj = {}) => {
if (node.nodeType === 3) {
if (node._stTranslated) return;
const translated = _translate(node.textContent);
if (translated !== node.textContent) node.textContent = translated;
node._stTranslated = true; return;
}
if (node.nodeType !== 1) return; if (node.nodeType !== 1) return;
if (!node._stTranslated) { if (!node._stTranslated) {
@ -319,50 +277,18 @@ export const _scanTree = (node, scanObj = {}) => {
node._stTranslated = true; node._stTranslated = true;
} }
let resolvedThisObj = node._thisObj; if (node.tagName === 'TEMPLATE' && (node.hasAttribute('$if') || node.hasAttribute('st-if')) && (node.hasAttribute('$each') || node.hasAttribute('st-each'))) {
let resolvedRef = node._ref;
if (resolvedThisObj === undefined || resolvedRef === undefined) {
let curr = node;
while (curr && (resolvedThisObj === undefined || resolvedRef === undefined)) {
if (resolvedThisObj === undefined && curr._thisObj !== undefined) resolvedThisObj = curr._thisObj;
if (resolvedRef === undefined && curr._ref !== undefined) resolvedRef = { ...curr._ref };
curr = curr.parentNode;
}
}
if (resolvedThisObj === undefined) resolvedThisObj = scanObj.thisObj;
if (resolvedRef === undefined) resolvedRef = scanObj.extendVars;
const triggerAttrs = ['$if', '$each', 'st-if', 'st-each', '$$if', '$$each', 'st-st-if', 'st-st-each'];
const eachAttrs = ['$each', 'st-each', '$$each', 'st-st-each'];
if (node.tagName !== 'TEMPLATE' && triggerAttrs.some(t => node.hasAttribute(t))) {
const template = document.createElement('TEMPLATE'); const template = document.createElement('TEMPLATE');
const attrs = Array.from(node.attributes).filter(attr => triggerAttrs.includes(attr.name) || (eachAttrs.some(t => node.hasAttribute(t)) && ['as', 'index'].includes(attr.name))); const attrs = Array.from(node.attributes).filter(attr => ['$if', '$each', 'st-if', 'st-each'].includes(attr.name));
attrs.forEach(attr => { template.setAttribute(attr.name, attr.value); node.removeAttribute(attr.name); });
node.parentNode.insertBefore(template, node);
template.content.appendChild(node);
template._ref = resolvedRef;
template._thisObj = resolvedThisObj; // Crucial fix: Propagate context
delete node._stScanned;
_scanTree(template, scanObj);
return;
}
if (node.isConnected) node._stScanned = true;
if (node.tagName === 'TEMPLATE' && (node.hasAttribute('$if') || node.hasAttribute('st-if') || node.hasAttribute('$$if') || node.hasAttribute('st-st-if')) && (node.hasAttribute('$each') || node.hasAttribute('st-each') || node.hasAttribute('$$each') || node.hasAttribute('st-st-each'))) {
const template = document.createElement('TEMPLATE');
const attrs = Array.from(node.attributes).filter(attr => triggerAttrs.includes(attr.name));
const attr = attrs[attrs.length - 1]; const attr = attrs[attrs.length - 1];
template.setAttribute(attr.name, attr.value); template.setAttribute(attr.name, attr.value);
node.removeAttribute(attr.name); node.removeAttribute(attr.name);
if (eachAttrs.includes(attr.name)) { if (attr.name === '$each' || attr.name === 'st-each') {
Array.from(node.attributes).filter(attr => ['as', 'index'].includes(attr.name)).forEach(attr => { template.setAttribute(attr.name, attr.value); node.removeAttribute(attr.name); }); Array.from(node.attributes).filter(attr => ['as', 'index'].includes(attr.name)).forEach(attr => { template.setAttribute(attr.name, attr.value); node.removeAttribute(attr.name); });
} }
Array.from(node.content.childNodes).forEach(child => template.content.appendChild(child)); Array.from(node.content.childNodes).forEach(child => template.content.appendChild(child));
node.content.appendChild(template); node.content.appendChild(template);
template._ref = resolvedRef; template._ref = node._ref;
template._thisObj = resolvedThisObj; // Crucial fix: Propagate context
} }
if (node.tagName === 'IMG' && (node.hasAttribute('src') || node.hasAttribute('_src') || node.hasAttribute('$src'))) { if (node.tagName === 'IMG' && (node.hasAttribute('src') || node.hasAttribute('_src') || node.hasAttribute('$src'))) {
@ -385,23 +311,19 @@ export const _scanTree = (node, scanObj = {}) => {
while (curr && curr._thisObj === undefined) curr = curr.parentNode; while (curr && curr._thisObj === undefined) curr = curr.parentNode;
scanObj.thisObj = curr ? curr._thisObj : null; scanObj.thisObj = curr ? curr._thisObj : null;
} }
if (node._ref === undefined) { if (node._ref === undefined) {
let curr = node; let curr = node;
while (curr && curr._ref === undefined) curr = curr.parentNode; while (curr && curr._ref === undefined) curr = curr.parentNode;
node._ref = curr ? { ...curr._ref } : {}; node._ref = curr ? { ...curr._ref } : {};
} }
if (node._refExt !== undefined) { // 增量 4: 支持 _refExt 上下文注入
Object.assign(node._ref, node._refExt);
}
if (scanObj.extendVars) Object.assign(node._ref, scanObj.extendVars); if (scanObj.extendVars) Object.assign(node._ref, scanObj.extendVars);
_parseNode(node, { ...scanObj }); _parseNode(node, { ...scanObj });
const nodes = [...(node.childNodes || [])]; const nodes = [...(node.childNodes || [])];
const nextScanObj = { thisObj: scanObj.thisObj, extendVars: { ...node._ref } }; nodes.forEach(child => _scanTree(child, { thisObj: scanObj.thisObj, extendVars: { ...node._ref } }));
nodes.forEach(child => {
if (!child._stManaged) _scanTree(child, nextScanObj);
});
}; };
export const _unbindTree = (node) => { export const _unbindTree = (node) => {

14
src/globals.js
View File

@ -9,15 +9,17 @@ export const Hash = NewState({}, k => Util.safeJson(_hashParams.get(k)), (k, v)
const newStr = v === undefined ? undefined : JSON.stringify(v) const newStr = v === undefined ? undefined : JSON.stringify(v)
if (oldStr === newStr || (oldStr === null && newStr === undefined)) return if (oldStr === newStr || (oldStr === null && newStr === undefined)) return
v === undefined ? _hashParams.delete(k) : _hashParams.set(k, newStr) v === undefined ? _hashParams.delete(k) : _hashParams.set(k, newStr)
// 增量 5: 立即同步 Hash 字符串，确保响应式实时可见
window.location.hash = '#' + _hashParams.toString() window.location.hash = '#' + _hashParams.toString()
}) })
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
window.addEventListener('hashchange', () => { window.addEventListener('hashchange', () => {
const oldHashParams = _hashParams const newParams = new URLSearchParams(window.location.hash?.substring(1) || '')
_hashParams = new URLSearchParams(window.location.hash?.substring(1) || '') const keys = new Set([..._hashParams.keys(), ...newParams.keys()])
_hashParams.forEach((v, k) => { if (oldHashParams.get(k) !== v) Hash[k] = Util.safeJson(v) }) _hashParams = newParams
oldHashParams.forEach((v, k) => { if (_hashParams.get(k) === undefined) Hash[k] = undefined }) keys.forEach(k => Hash[k] = Hash[k]) // 触发更新
}) })
} }
@ -29,9 +31,9 @@ export const LocalStorage = NewState({}, k => Util.safeJson(localStorage.getItem
v === undefined ? localStorage.removeItem(k) : localStorage.setItem(k, newStr) v === undefined ? localStorage.removeItem(k) : localStorage.setItem(k, newStr)
}) })
// 核心全局状态机 // 增量：显式定义 State 单例
export const State = NewState({ export const State = NewState({
exitBlocks: 0 // 默认值 exitBlocks: 0
}); });
globalThis.Hash = Hash; globalThis.Hash = Hash;

29
src/index.js
View File

@ -5,33 +5,34 @@ export { $, $$, RefreshState, SetTranslator, _scanTree, _unbindTree } from './do
export { Util } from './utils.js'; export { Util } from './utils.js';
export { Hash, LocalStorage, State } from './globals.js'; export { Hash, LocalStorage, State } from './globals.js';
import { NewState } from './observer.js';
import { Component } from './component.js'; import { Component } from './component.js';
import { $, $$, RefreshState, SetTranslator } from './dom.js'; import { _scanTree, _unbindTree, $, $$, RefreshState, SetTranslator } from './dom.js';
import { LocalStorage, Hash, State } from './globals.js';
import { NewState, onNotifyUpdate, setActiveBinding } from './observer.js';
import { Util } from './utils.js'; import { Util } from './utils.js';
import { Hash, LocalStorage, State } from './globals.js'; import { _runCode, _returnCode } from './core.js';
import { _scanTree, _unbindTree } from './dom.js';
const ApigoState = { const ApigoState = {
NewState, Component, $, $$, RefreshState, SetTranslator, Util, Hash, LocalStorage, State NewState, Component, $, $$, RefreshState, SetTranslator, _scanTree, _unbindTree, Util, Hash, LocalStorage, State,
_runCode, _returnCode, onNotifyUpdate, setActiveBinding
}; };
// 挂载到全局，支持 UMD 直接访问 if (typeof window !== 'undefined') {
if (typeof globalThis !== 'undefined') { window.ApigoState = ApigoState;
Object.assign(globalThis, ApigoState);
globalThis.ApigoState = ApigoState;
} }
if (typeof document !== 'undefined') { if (typeof document !== 'undefined') {
const init = () => { const init = () => {
Component._initPending(); const htmlNode = document.documentElement;
if (!htmlNode.hasAttribute('$data-bs-theme') && !htmlNode.hasAttribute('data-bs-theme')) {
htmlNode.setAttribute('$data-bs-theme', "LocalStorage.darkMode?'dark':'light'");
}
// 灵魂逻辑：MutationObserver 捕获所有异步 DOM 变化
new MutationObserver(mutations => { new MutationObserver(mutations => {
mutations.forEach(mutation => { mutations.forEach(mutation => {
mutation.addedNodes.forEach(newNode => { mutation.addedNodes.forEach(newNode => {
if (newNode.isConnected && newNode.nodeType === 1 && !newNode._stScanned) { if (newNode.isConnected) _scanTree(newNode);
newNode._stScanned = true;
_scanTree(newNode);
}
}); });
mutation.removedNodes.forEach(oldNode => _unbindTree(oldNode)); mutation.removedNodes.forEach(oldNode => _unbindTree(oldNode));
}); });

3
src/observer.js
View File

@ -22,7 +22,8 @@ export function NewState(defaults = {}, getter = null, setter = null) {
}; };
const _unwatchFunc = (k, cb) => { const _unwatchFunc = (k, cb) => {
if (_watchers.has(k)) _watchers.get(k).delete(cb); if (_watchers.has(k)) _watchers.set(k, new Set());
_watchers.get(k).delete(cb);
}; };
const __getter = getter || (k => _defaults[k]); const __getter = getter || (k => _defaults[k]);

6
test-results/.last-run.json
View File

@ -1,4 +1,6 @@
{ {
"status": "passed", "status": "failed",
"failedTests": [] "failedTests": [
"8a84b43f13b676ea22b7-5fcda25ae3a58304c071"
]
} }

89
test-results/all-modular-unit-tests-and-benchmark/error-context.md Normal file
View File

@ -0,0 +1,89 @@
# Instructions
- Following Playwright test failed.
- Explain why, be concise, respect Playwright best practices.
- Provide a snippet of code with the fix, if possible.
# Test info
- Name: all.spec.js >> modular unit tests and benchmark
- Location: test/all.spec.js:5:1
# Error details
```
Error: expect(received).toBe(expected) // Object.is equality
Expected: "passed"
Received: "failed"
```
# Test source
```ts
1 | import { test, expect } from '@playwright/test';
2 | import fs from 'fs';
3 | import path from 'path';
4 |
5 | test('modular unit tests and benchmark', async ({ page }) => {
6 | page.on('console', msg => console.log('BROWSER LOG:', msg.text()));
7 | await page.goto('http://localhost:8081/test/index.html');
8 |
9 | await page.waitForFunction(() => window.testStatus !== undefined, { timeout: 10000 });
10 | const status = await page.evaluate(() => window.testStatus);
> 11 | expect(status).toBe('passed');
| ^ Error: expect(received).toBe(expected) // Object.is equality
12 |
13 | // Read benchmarks from TEST.md
14 | const testMd = fs.readFileSync(path.join(process.cwd(), 'TEST.md'), 'utf-8');
15 | const getBench = (name) => {
16 | const match = testMd.match(new RegExp(`\\*\\*${name}\\*\\*\\s*\\|\\s*([\\d.]+)`));
17 | return match ? parseFloat(match[1]) : null;
18 | };
19 | const baseInitial = getBench('首次渲染 \\(1000 items\\)');
20 | const baseUpdate = getBench('浅更新 \\(Shallow Update\\)');
21 |
22 | // Benchmark: Large list rendering
23 | const renderTime = await page.evaluate(async () => {
24 | const start = performance.now();
25 | document.body.innerHTML = `
26 | <ul id="bench-list">
27 | <template $each="state.benchItems" as="item">
28 | <li $text="item.val"></li>
29 | </template>
30 | </ul>
31 | `;
32 | const items = [];
33 | for(let i=0; i<1000; i++) items.push({val: 'item ' + i});
34 | window.state.benchItems = items;
35 | const { RefreshState } = await import('@apigo.cc/state');
36 | RefreshState(document.documentElement);
37 | return performance.now() - start;
38 | });
39 | console.log(`BENCHMARK: 1000 items initial render: ${renderTime.toFixed(2)}ms`);
40 | if (baseInitial) expect(renderTime).toBeLessThan(baseInitial * 1.2);
41 |
42 | // Benchmark: Large list update
43 | const updateTime = await page.evaluate(async () => {
44 | const start = performance.now();
45 | window.state.benchItems[0].val = 'updated';
46 | window.state.benchItems = [...window.state.benchItems];
47 | return performance.now() - start;
48 | });
49 | console.log(`BENCHMARK: 1000 items update (shallow): ${updateTime.toFixed(2)}ms`);
50 | if (baseUpdate) expect(updateTime).toBeLessThan(baseUpdate * 1.2);
51 |
52 | // Extreme Data Test
53 | await page.evaluate(async () => {
54 | const { RefreshState } = await import('@apigo.cc/state');
55 | document.body.innerHTML = '<div id="extreme" $each="state.extreme"></div>';
56 | window.state.extreme = null;
57 | RefreshState(document.getElementById('extreme'));
58 | window.state.extreme = undefined;
59 | window.state.extreme = { a: 1 };
60 | window.state.extreme = [1, 2];
61 | window.state.extreme = "not iterable";
62 | });
63 | });
64 |
```

36
test/component.test.js
View File

@ -1,31 +1,25 @@
// test/component.test.js // test/component.test.js
import { Component } from '../src/component.js'; window.testComponent = async function() {
import { RefreshState, $ } from '../src/dom.js'; const { Component, RefreshState, $ } = ApigoState;
export async function testComponent() {
console.log('Testing component.js...'); console.log('Testing component.js...');
// 1. Register component FIRST // 1. Register component
Component.register('MY-COMP', (node) => { Component.register('TestComp', container => {
// setup container.state.msg = 'Component Content';
}); }, document.createRange().createContextualFragment('<div id="comp-inner" $text="this.state.msg"></div>').firstChild);
// 2. Add template and instance
document.body.innerHTML = `
<template component="MY-COMP">
<div class="comp-inner">Component Content</div>
</template>
<my-comp id="comp-instance"></my-comp>
`;
// 3. Scan // 2. Render component
document.body.innerHTML = '<TestComp id="comp-inst"></TestComp>';
RefreshState(document.documentElement); RefreshState(document.documentElement);
// 4. Wait a bit for any async DOM updates const instance = $('#comp-inst');
await new Promise(r => setTimeout(r, 100)); if (!instance) throw new Error('Component instance not found');
const instance = $('#comp-instance'); // Wait for internal scan
if (!instance.innerHTML.includes('Component Content')) { await new Promise(r => setTimeout(r, 50));
const inner = $('#comp-inner');
if (!inner || inner.textContent !== 'Component Content') {
console.log('Current instance innerHTML:', instance.innerHTML); console.log('Current instance innerHTML:', instance.innerHTML);
throw new Error('Component rendering failed'); throw new Error('Component rendering failed');
} }

5
test/core.test.js
View File

@ -1,7 +1,6 @@
// test/core.test.js // test/core.test.js
import { _runCode, _returnCode } from '../src/core.js'; window.testCore = async function() {
const { _runCode, _returnCode } = ApigoState;
export async function testCore() {
console.log('Testing core.js...'); console.log('Testing core.js...');
const vars = { a: 1, b: 2 }; const vars = { a: 1, b: 2 };
const extendVars = { c: 3 }; const extendVars = { c: 3 };

124
test/dom.test.js
View File

@ -1,95 +1,69 @@
// test/dom.test.js // test/dom.test.js
import { RefreshState, $, $$ } from '../src/index.js'; window.testDom = async function() {
import { NewState } from '../src/index.js'; const { RefreshState, $, $$, NewState } = ApigoState;
export async function testDom() {
console.log('Testing dom.js...'); console.log('Testing dom.js...');
const wait = () => new Promise(r => setTimeout(r, 10));
// 1. Basic $text binding // 1. Basic $text binding
document.body.innerHTML = `<div id="test-node" $text="state.msg"></div>`; document.body.innerHTML = '<div id="test-text" $text="state.msg"></div>';
window.state = NewState({ msg: 'hello' }); const state = NewState({ msg: 'hello' });
window.state = state; // TRY: 确保在非 ESM 环境下 state 全局可见
document.documentElement._thisObj = { state };
RefreshState(document.documentElement); RefreshState(document.documentElement);
const node = $('#test-node'); if ($('#test-text').textContent !== 'hello') throw new Error('$text binding failed');
if (node.textContent !== 'hello') throw new Error('$text binding failed');
state.msg = 'world'; state.msg = 'world';
if (node.textContent !== 'world') throw new Error('$text update failed'); await wait();
if ($('#test-text').textContent !== 'world') throw new Error('$text update failed');
// 2. $if directive // 2. $if directive
document.body.innerHTML = ` document.body.innerHTML = '<template $if="state.show"><div id="test-if">visible</div></template>';
<div id="if-test">
<template $if="state.show">
<span id="if-content">Visible</span>
</template>
</div>
`;
state.show = false; state.show = false;
RefreshState(document.documentElement); RefreshState(document.documentElement);
if ($('#if-content')) throw new Error('$if failed: should be hidden'); if ($('#test-if')) throw new Error('$if fail: should be hidden');
const wait = () => new Promise(r => setTimeout(r, 10));
state.show = true; state.show = true;
await wait(); await wait();
if (!$('#if-content') || $('#if-content').textContent !== 'Visible') throw new Error('$if failed: should be visible'); if (!$('#test-if')) throw new Error('$if fail: should be visible');
state.show = false;
await wait();
if ($('#if-content')) throw new Error('$if failed: should be hidden again');
// 3. $each directive (Index-based reuse) // 3. $each directive
document.body.innerHTML = ` document.body.innerHTML = '<template $each="state.items"><div class="test-item" $text="item"></div></template>';
<ul id="list-test"> state.items = ['A', 'B'];
<template $each="state.items" as="item" index="i">
<li $text="item.name"></li>
</template>
</ul>
`;
state.items = [{ name: 'A' }, { name: 'B' }];
RefreshState(document.documentElement); RefreshState(document.documentElement);
await wait(); // Wait for MutationObserver if ($$('.test-item').length !== 2) throw new Error('$each fail: count mismatch');
let items = $$('#list-test li'); if ($$('.test-item')[0].textContent !== 'A') throw new Error('$each fail: content mismatch');
console.log('$each items length:', items.length);
if (items.length > 0) console.log('$each first item text:', items[0].textContent);
if (items.length !== 2 || items[0].textContent !== 'A' || items[1].textContent !== 'B') throw new Error('$each initialization failed');
const firstNode = items[0];
state.items = [{ name: 'A-mod' }, { name: 'B' }, { name: 'C' }];
await wait();
items = $$('#list-test li');
if (items.length !== 3 || items[0].textContent !== 'A-mod') throw new Error('$each update failed');
if (items[0] !== firstNode) throw new Error('$each reuse failed: should reuse existing DOM nodes');
state.items = [{ name: 'C' }]; state.items = ['A', 'B', 'C'];
await wait(); await wait();
items = $$('#list-test li'); if ($$('.test-item').length !== 3) throw new Error('$each update fail');
if (items.length !== 1 || items[0].textContent !== 'C') throw new Error('$each removal failed');
// 4. Two-way binding (bind) // 4. Event binding $onclick
console.log('Testing $bind...'); document.body.innerHTML = '<button id="test-click" $onclick="state.count++"></button>';
document.body.innerHTML = `<input id="input-test" $bind="state.val">`; state.count = 0;
window.state = NewState({ val: 'initial' });
RefreshState(document.documentElement); RefreshState(document.documentElement);
await wait(); $('#test-click').click();
const input = $('#input-test'); if (state.count !== 1) throw new Error('$onclick failed');
if (input.value !== 'initial') throw new Error('$bind initial value failed');
// 5. $bind (input)
document.body.innerHTML = '<input id="test-bind" $bind="state.val">';
state.val = 'init';
RefreshState(document.documentElement);
await wait(); // TRY: 等待 $bind 的 setTimeout 完成
const input = $('#test-bind');
if (input.value !== 'init') throw new Error('$bind initial failed');
input.value = 'changed'; input.value = 'changed';
input.dispatchEvent(new Event('input', { bubbles: true })); input.dispatchEvent(new Event('input'));
if (state.val !== 'changed') throw new Error('$bind write-back failed'); if (state.val !== 'changed') throw new Error('$bind writeback failed');
// 5. Unbinding cleanup (mock check)
// _unbindTree is called when nodes are removed via $if or $each.
// We verify that after $if=false, the state mappings for that node are cleared.
// This is hard to test directly without exposing internal Map, but we can check if it crashes.
state.show = true;
const ifNode = $('#if-content');
state.show = false; // Trigger _unbindTree via _clearRenderedNodes -> remove() -> MutationObserver (or manual in some cases)
// 6. Double evaluation ($$ prefix) // 6. Double evaluation ($$ prefix)
console.log('Testing double evaluation ($$)...'); console.log('Testing double evaluation ($$)...');
document.body.innerHTML = ` document.body.innerHTML = `
<div id="double-eval-root"> <div id="double-eval-root">
<div id="inner-node" $$if="state.innerExp">Dynamic Visible</div> <template $$if="state.innerExp">
<div id="inner-node">Dynamic Visible</div>
</template>
</div> </div>
`; `;
const doubleState = NewState({ const doubleState = NewState({
@ -97,37 +71,41 @@ export async function testDom() {
innerShow: false innerShow: false
}); });
window.state = doubleState; window.state = doubleState;
document.documentElement._thisObj = doubleState; const root = $('#double-eval-root');
root._thisObj = { state: doubleState };
RefreshState(document.documentElement); RefreshState(root);
await wait(); await wait();
if ($('#inner-node')) throw new Error('$$if failed: should be hidden initially'); if ($('#inner-node')) throw new Error('$$if failed: should be hidden initially');
console.log('Enabling inner node...'); console.log('Enabling inner node...');
doubleState.innerShow = true; doubleState.innerShow = true;
RefreshState(document.documentElement); RefreshState(root);
await wait(); await wait();
const inner = $('#inner-node'); const inner = $('#inner-node');
if (!inner) throw new Error('$$if failed: should be visible after innerShow=true'); if (!inner) throw new Error('$$if failed: should be visible after innerShow=true');
console.log('Inner node visible:', inner.textContent);
// 7. Nested $$if // 7. Nested $$if
console.log('Testing nested $$if...'); console.log('Testing nested $$if...');
document.body.innerHTML = ` document.body.innerHTML = `
<div id="nested-double-test"> <div id="nested-double-test">
<template $if="state.outer"> <template $if="state.outer">
<div id="nested-inner" $$if="state.innerExp">Nested Visible</div> <template $$if="state.innerExp">
<div id="nested-inner">Nested Visible</div>
</template>
</template> </template>
</div> </div>
`; `;
const nestedRoot = $('#nested-double-test');
nestedRoot._thisObj = { state: doubleState };
doubleState.outer = true; doubleState.outer = true;
doubleState.innerShow = false; doubleState.innerShow = false;
RefreshState(document.documentElement); RefreshState(nestedRoot);
await wait(); await wait();
if ($('#nested-inner')) throw new Error('nested $$if failed: should be hidden initially'); if ($('#nested-inner')) throw new Error('nested $$if failed: should be hidden initially');
doubleState.innerShow = true; doubleState.innerShow = true;
RefreshState(document.documentElement); RefreshState(nestedRoot);
await wait(); await wait();
if (!$('#nested-inner')) throw new Error('nested $$if failed: should be visible after update'); if (!$('#nested-inner')) throw new Error('nested $$if failed: should be visible after update');

55
test/foundation.test.js vendored Normal file
View File

@ -0,0 +1,55 @@
// test/foundation.test.js
window.testFoundation = async function() {
const { RefreshState, Component, NewState, $, Util } = ApigoState;
console.log('Testing framework foundation...');
Component.register('NavTest', container => {
container.state = NewState({ list: [], title: 'Initial' });
}, Util.makeDom(`
<div class="nav-root">
<template $if="this.state.list.length >= 0">
<div class="has-list-marker"></div>
</template>
<template $each="this.state.list" as="item">
<div class="nav-item">
<template $if="item.show">
<div class="item-inner">
<span $text="item.text" class="item-text"></span>
<span $text="this.state.title" class="inherited-title"></span>
</div>
</template>
</div>
</template>
</div>
`));
const inst = document.createElement('NAVTEST');
inst.id = 'nav-inst';
document.body.appendChild(inst);
RefreshState(document.documentElement);
await new Promise(r => setTimeout(r, 100));
const nav = $('#nav-inst');
if (!nav) throw new Error('NavTest not rendered');
console.log('Updating NavTest state...');
nav.state.title = 'UpdatedTitle';
nav.state.list = [
{ text: 'Item 1', show: true },
{ text: 'Item 2', show: false }
];
await new Promise(r => setTimeout(r, 100));
const items = nav.querySelectorAll('.nav-item');
if (items.length !== 2) throw new Error('Nested $each failed to render items');
const item1Text = items[0].querySelector('.item-text');
if (!item1Text || item1Text.textContent !== 'Item 1') throw new Error('Nested $if/text failed for Item 1');
const inheritedTitle = items[0].querySelector('.inherited-title');
if (!inheritedTitle || inheritedTitle.textContent !== 'UpdatedTitle') throw new Error('Nested $if failed to inherit this.state.title');
console.log('Framework foundation tests passed');
return true;
}

41
test/index.html
View File

@ -1,35 +1,39 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>State.js Modular Tests</title> <title>State.js Synchronous Tests</title>
<script type="importmap"> <!-- 同步加载打包好的 UMD 库 -->
{ <script src="../dist/state.js"></script>
"imports": {
"@apigo.cc/state": "../src/index.js" <!-- 加载所有测试脚本 (已重构为全局脚本) -->
} <script src="./core.test.js"></script>
} <script src="./observer.test.js"></script>
</script> <script src="./dom.test.js"></script>
<script src="./component.test.js"></script>
<script src="./priority.test.js"></script>
<script src="./merging.test.js"></script>
<script src="./inheritance.test.js"></script>
<script src="./foundation.test.js"></script>
<script src="./timing.test.js"></script>
</head> </head>
<body> <body>
<div id="results">Running tests...</div> <div id="results">Running tests...</div>
<script type="module"> <script>
import { testCore } from './core.test.js';
import { testObserver } from './observer.test.js';
import { testDom } from './dom.test.js';
import { testComponent } from './component.test.js';
import { testPriority } from './priority.test.js';
import { testMerging } from './merging.test.js';
async function runAll() { async function runAll() {
const results = document.getElementById('results'); const results = document.getElementById('results');
try { try {
// 按顺序执行所有同步加载的测试函数
await testFoundation();
await testTiming();
await testInheritance();
await testCore(); await testCore();
await testObserver(); await testObserver();
await testDom(); await testDom();
await testComponent(); await testComponent();
await testPriority(); await testPriority();
await testMerging(); await testMerging();
results.innerHTML = '<h1 style="color: green">All Tests Passed 🎉</h1>';
results.innerHTML = '<h1 style="color: green">All Tests Passed 🎉 (Non-ESM)</h1>';
window.testStatus = 'passed'; window.testStatus = 'passed';
} catch (e) { } catch (e) {
console.error(e); console.error(e);
@ -37,7 +41,8 @@
window.testStatus = 'failed'; window.testStatus = 'failed';
} }
} }
runAll(); // 由于所有脚本都是同步加载的，我们可以直接执行
window.addEventListener('DOMContentLoaded', runAll);
</script> </script>
</body> </body>
</html> </html>

49
test/inheritance.test.js Normal file
View File

@ -0,0 +1,49 @@
// test/inheritance.test.js
window.testInheritance = async function() {
const { RefreshState, Component, NewState, $, Util } = ApigoState;
console.log('Testing inheritance...');
Component.register('MyComp', container => {
container.state = NewState({ items: [{ name: 'A' }], title: 'CompTitle' });
});
const template = document.createElement('TEMPLATE');
template.setAttribute('component', 'MYCOMP');
template.innerHTML = `
<div>
<h1 $text="this.state.title" id="comp-title"></h1>
<template $each="this.state.items" as="item">
<div class="item-node">
<span $text="this.state.title" class="parent-title"></span>
<span $text="item.name" class="item-name"></span>
</div>
</template>
</div>
`;
document.body.appendChild(template);
const inst = document.createElement('MYCOMP');
inst.id = 'comp-inst';
document.body.appendChild(inst);
RefreshState(document.documentElement);
await new Promise(r => setTimeout(r, 100));
const comp = $('#comp-inst');
if (!comp) throw new Error('Component not rendered');
const h1 = $('#comp-title');
if (h1.textContent !== 'CompTitle') throw new Error('Root level thisObj inheritance failed');
const itemNode = document.querySelector('.item-node');
if (!itemNode) throw new Error('Item node not rendered');
const parentTitle = itemNode.querySelector('.parent-title');
if (parentTitle.textContent !== 'CompTitle') throw new Error('Nested thisObj inheritance failed');
const itemName = itemNode.querySelector('.item-name');
if (itemName.textContent !== 'A') throw new Error('Item scope check failed');
console.log('Inheritance tests passed');
return true;
}

59
test/merging.test.js
View File

@ -1,46 +1,29 @@
import { Component } from '../src/component.js'; // test/merging.test.js
import { RefreshState, $ } from '../src/dom.js'; window.testMerging = async function() {
const { Component, RefreshState, $ } = ApigoState;
export async function testMerging() {
console.log('Testing complex class/style merging (DataTable Resizer scenario)...'); console.log('Testing complex class/style merging (DataTable Resizer scenario)...');
// 1. Resizer definition from @base
Component.register('RESIZER-REAL', container => {
container.isVertical = true;
}, document.createRange().createContextualFragment(`
<div class="tpl-static" $style="'height:10px'"></div>
`).firstElementChild);
// 2. Resizer usage from @dataTable Component.register('Resizer-Real', container => {
const testContainer = document.createElement('div'); container.isVertical = true;
testContainer.id = 'merging-test-root'; }, document.createRange().createContextualFragment('<div $class="tpl-static ${this.isVertical?\'tpl-v\':\'tpl-h\'}" $style="color:blue"></div>').firstChild);
testContainer.innerHTML = `
<div id="parent"> document.body.innerHTML = '<Resizer-Real id="res-inst" class="ins-static" style="opacity:0.5"></Resizer-Real>';
<resizer-real id="resizer-instance" RefreshState(document.documentElement);
class="ins-static"
$style="'color:blue'">
</resizer-real>
</div>
`;
document.body.appendChild(testContainer);
RefreshState(testContainer);
// Wait for bindings
await new Promise(r => setTimeout(r, 50)); await new Promise(r => setTimeout(r, 50));
const instance = $('#resizer-instance'); const inst = $('#res-inst');
const classes = Array.from(instance.classList); // Note: in current implementation, component root replaces the custom tag or merges?
console.log('Final ClassList:', classes); // Based on base project usage, it merges into the tag.
console.log('Final Style:', instance.getAttribute('style'));
const classList = Array.from(inst.classList);
console.log('Final ClassList:', classList);
if (!classList.includes('ins-static') || !classList.includes('tpl-static')) {
throw new Error('Class merging failed');
}
// Verify static class merging const style = inst.getAttribute('style');
if (!classes.includes('ins-static')) throw new Error('Missing ins-static'); console.log('Final Style:', style);
if (!classes.includes('tpl-static')) throw new Error('Missing tpl-static'); if (!style.includes('color: blue') && !style.includes('color:blue')) throw new Error('Style merging failed');
// Verify style merging (Instance wins on dynamic $style, but both are preserved in logic)
const style = instance.getAttribute('style');
if (!style.includes('color:blue')) throw new Error('Missing instance dynamic style');
console.log('Merging test passed'); console.log('Merging test passed');
return true; return true;

37
test/observer.test.js
View File

@ -1,28 +1,27 @@
// test/observer.test.js // test/observer.test.js
import { NewState } from '../src/observer.js'; window.testObserver = async function() {
const { NewState, onNotifyUpdate, setActiveBinding } = ApigoState;
export async function testObserver() {
console.log('Testing observer.js...'); console.log('Testing observer.js...');
let watchTriggered = 0; const state = NewState({ a: 1, b: 2 });
const state = NewState({ count: 0 }); let notifyCount = 0;
state.__watch('count', (val) => { onNotifyUpdate(() => {
watchTriggered = val; notifyCount++;
}); });
state.count = 10; // Test binding registration
if (watchTriggered !== 10) throw new Error('Watcher not triggered or value incorrect'); setActiveBinding({ node: { isConnected: true }, attr: 'text', tpl: 'a' });
if (state.count !== 10) throw new Error('State value not updated'); state.a; // Trigger getter
setActiveBinding(null);
// General watcher
let generalTriggered = false; // Test notification
state.__watch(null, () => { state.a = 2;
generalTriggered = true; if (notifyCount !== 1) throw new Error('Notification failed');
});
state.count = 20; // Test unproxy data
if (!generalTriggered) throw new Error('General watcher not triggered'); if (state.a !== 2) throw new Error('State update failed');
console.log('observer.js tests passed'); console.log('observer.js tests passed');
return true; return true;
} }

57
test/priority.test.js
View File

@ -1,49 +1,20 @@
import { Component } from '../src/component.js'; // test/priority.test.js
import { RefreshState, $ } from '../src/dom.js'; window.testPriority = async function() {
const { RefreshState, $, NewState } = ApigoState;
export async function testPriority() { console.log('Testing directive priorities...');
console.log('Testing $.target priority...');
let capturedTarget = null;
Component.register('RESIZER', (container) => {
capturedTarget = container.target;
console.log('Component setup, target:', capturedTarget);
});
document.body.innerHTML = `
<div id="parent">
<resizer id="resizer-node" $.target="thisNode.parentNode"></resizer>
</div>
`;
// Test $if vs $text (if should hide text)
document.body.innerHTML = '<div id="prio-test" $if="state.hide" $text="state.msg"></div>';
const state = NewState({ hide: false, msg: 'visible' });
document.documentElement._thisObj = { state };
RefreshState(document.documentElement); RefreshState(document.documentElement);
const parent = $('#parent'); if ($('#prio-test').textContent !== 'visible') throw new Error('Basic visibility failed');
if (capturedTarget !== parent) {
throw new Error(`Priority issue: container.target was ${capturedTarget}, expected parent node`);
}
// 2. Test this. replacement
let capturedVal = null;
Component.register('VAL-COMP', (container) => {
capturedVal = container.val;
console.log('Val component setup, val:', capturedVal);
});
const state = { outerVal: 'hello' };
const outer = document.createElement('div');
outer.id = 'outer';
outer._thisObj = state; // Rule: Set _thisObj on root before scanning if not in document
outer.innerHTML = `<val-comp id="val-node" $.val="this.outerVal"></val-comp>`;
RefreshState(outer, { thisObj: state }); state.hide = true;
document.body.appendChild(outer); await new Promise(r => setTimeout(r, 10));
if ($('#prio-test')) throw new Error('Priority $if failed: node should be removed');
if (capturedVal !== 'hello') {
throw new Error(`this. replacement failed: capturedVal was ${capturedVal}, expected 'hello'`); console.log('priority.js tests passed');
}
console.log('Priority tests passed');
return true; return true;
} }

27
test/timing.test.js Normal file
View File

@ -0,0 +1,27 @@
// test/timing.test.js
window.testTiming = async function() {
const { RefreshState, Component, NewState, $, Util } = ApigoState;
console.log('Testing initialization timing...');
Component.register('TimingComp', container => {
container.state = NewState({ msg: 'Ready' });
}, Util.makeDom(`
<div id="timing-child">
<template $if="this.state?.msg">
<span id="timing-content" $text="this.state.msg"></span>
</template>
</div>
`));
document.body.innerHTML += `<TimingComp id="timing-inst"></TimingComp>`;
RefreshState(document.documentElement);
await new Promise(r => setTimeout(r, 100));
const content = $('#timing-content');
if (!content) throw new Error('Component child failed to render content due to timing');
if (content.textContent !== 'Ready') throw new Error('Child content incorrect');
console.log('Timing tests passed');
return true;
}