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

chore: remove ESM artifacts and pub. By: AICoder

Browse Source
This commit is contained in:
AI Engineer 2026-06-08 21:53:55 +08:00
parent 7660de7721
commit 1896a31782
12 changed files with 58 additions and 697 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
README.md
View File

@ -20,11 +20,15 @@
指令语法：`$attribute="code"`。作用域默认为全局，组件内优先访问 `node.state`。
### 结构化映射
| 指令 | 触发逻辑 | DOM 行为 |
| :--- | :--- | :--- |
| **`$if`** | `Boolean(result)` | `true`: 挂载节点; `false`: 移除节点。建议配合 `<template>`。 |
| **`$each`** | `Iterable` | 基于 `key` 属性执行节点复用。无 `key` 时按索引重建。支持 `as`, `index` 定义局部变量。 |
### 结构化映射 (AI 强制规范)
| 指令 | 触发逻辑 | DOM 行为 | 运行约束 |
| :--- | :--- | :--- | :--- |
| **`$if`** | `Boolean(result)` | `true`: 挂载节点; `false`: 移除节点。 | **必须** 作用于 `<template>`。 |
| **`$each`** | `Iterable` | 基于 `key` 属性执行节点复用。无 `key` 时按索引重建。支持 `as`, `index` 定义局部变量。 | **必须** 作用于 `<template>`。 |
**结构化指令铁律**：
1. **标签约束**：严禁在非 `<template>` 标签上使用 `$if` 或 `$each`。
2. **互斥约束**：严禁在同一个 `<template>` 上同时使用 `$if` 和 `$each`。若需组合，必须嵌套（如：`$if` 模版包裹 `$each` 模版）。
### 数据双向绑定 (`$bind`)
AI 必须根据不同的元素类型执行以下逻辑：
@ -37,11 +41,11 @@ AI 必须根据不同的元素类型执行以下逻辑：
- **`[contenteditable]`**: 监听 `input`，同步 `innerHTML`。
- **`input[type=file]`**: 同步 `files` 对象。
### 属性操作映射
### 属性与 Property 绑定
- **`$text`**: 映射至 `textContent`。
- **`$html`**: 映射至 `innerHTML`。
- **`$class`**: **严格要求使用模板字符串**。范式：`class="static-name ${condition ? 'dynamic-name' : ''}"`。严禁覆盖原有类名。
- **`.path.to.prop`**: 直接映射至 DOM 对象原生属性。例如：`.style.color="'red'"` 映射为 `el.style.color = 'red'`。
- **`$.path.to.prop`**: 直接映射至 DOM 对象或组件的 Property。初始化 Property 绑定必须带 `.` 前缀。
- **`$src`**: 增强逻辑。若值以 `.svg` 结尾，异步 Fetch 并替换为内联 `<svg>` 节点。
- **`$$attr`**: 二级求值。`eval(eval(expr))` 逻辑，用于动态生成指令代码。
@ -49,11 +53,11 @@ AI 必须根据不同的元素类型执行以下逻辑：
## 3. 生命周期与事件逻辑
- **`$on[event]`**: 映射为 `addEventListener`。注入 `event`, `thisNode`, `this`。
- **`$on[event]`**: 映射为 `addEventListener`。注入 `event`, `thisNode`, `State`, `LocalStorage`, `Hash`。
- **生命周期**：
- **`$onload`**: `DOMNodeInserted` 且指令解析完成后触发。
- **`$onunload`**: `DOMNodeRemoved` 前触发，必须用于清理定时器或外部监听。
- **`$onupdate`**: 属性 setter 触发且渲染微任务完成后执行。
- **`$onload`**: 节点进入 DOM 且指令解析完成后触发。
- **`$onunload`**: 节点从 DOM 移除前触发。
- **`$onupdate`**: 绑定的数据变更且渲染任务完成后执行。
---

14
dist/state.js vendored
View File

@ -111,7 +111,9 @@
});
}
to.classList.add(...from.classList);
Array.from(from.childNodes).forEach((child) => to.appendChild(child));
const target = to.tagName === "TEMPLATE" ? to.content : to;
const sourceNodes = from.tagName === "TEMPLATE" ? from.content.childNodes : from.childNodes;
Array.from(sourceNodes).forEach((child) => target.appendChild(child));
if (from.tagName && Component.exists(from.tagName)) _makeComponent(from.tagName, to, scanObj, exists);
}
function _makeComponent(name, node, scanObj, exists = {}) {
@ -440,6 +442,13 @@
if (node._thisObj) scanObj.thisObj = node._thisObj;
};
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._stTranslated) {
Array.from(node.attributes).forEach((attr) => {
@ -460,7 +469,6 @@
node.parentNode.insertBefore(template, node);
template.content.appendChild(node);
template._ref = node._ref;
_scanTree(template, scanObj);
return;
}
if (node.tagName === "TEMPLATE" && (node.hasAttribute("$if") || node.hasAttribute("st-if")) && (node.hasAttribute("$each") || node.hasAttribute("st-each"))) {
@ -624,6 +632,8 @@
LocalStorage,
State
};
globalThis.$ = $;
globalThis.$$ = $$;
if (typeof window !== "undefined") {
window.ApigoState = ApigoState;
}

2
dist/state.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/state.min.mjs vendored
View File

File diff suppressed because one or more lines are too long

659
dist/state.mjs vendored
View File

@ -1,659 +0,0 @@
var _a;
let __activeBinding = null;
let __noWriteBack = null;
const _setActiveBinding = (val) => __activeBinding = val;
const _setNoWriteBack = (val) => __noWriteBack = val;
const _notifiers = /* @__PURE__ */ new Set();
const _onNotifyUpdate = (fn) => _notifiers.add(fn);
function NewState(defaults = {}, getter = null, setter = null) {
const _defaults = {};
const _stateMappings = /* @__PURE__ */ new Map();
const _watchers = /* @__PURE__ */ new Map();
const _watchFunc = (k, cb) => {
if (!_watchers.has(k)) _watchers.set(k, /* @__PURE__ */ new Set());
!cb ? _watchers.get(k).clear() : _watchers.get(k).add(cb);
return () => _watchers.get(k).delete(cb);
};
const _unwatchFunc = (k, cb) => {
if (_watchers.has(k)) _watchers.set(k, /* @__PURE__ */ 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 (key === "__isProxy") return true;
if (__activeBinding) {
if (!_stateMappings.has(key)) _stateMappings.set(key, /* @__PURE__ */ new Set());
_stateMappings.get(key).add(__activeBinding);
if (!__activeBinding.node._states) __activeBinding.node._states = /* @__PURE__ */ new Set();
__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 !== void 0) {
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) {
_notifiers.forEach((fn) => fn(binding));
}
}
}
return true;
}
});
}
const $ = (a, b) => b ? a.querySelector(b) : document.querySelector(a);
const $$ = (a, b) => b ? a.querySelectorAll(b) : document.querySelectorAll(a);
const _components = /* @__PURE__ */ new Map();
const _pendingTemplates = [];
const Component = {
getTemplate: (name) => document.querySelector(`template[component="${name.toUpperCase()}"]`),
register: (name, setupFunc, templateNode = null, ...globalNodes) => {
console.log("Component.register:", name.toUpperCase());
_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));
},
_initPending: () => {
_pendingTemplates.forEach(([name, templateNode, globalNodes]) => Component._addTemplate(name, templateNode, globalNodes));
_pendingTemplates.length = 0;
}
};
function _mergeNode(from, to, scanObj, exists = {}) {
if (from.attributes) {
Array.from(from.attributes).forEach((attr) => {
if (attr.name === "class") return;
if (attr.name === "style") {
if (to.hasAttribute("style")) to.setAttribute("style", `${attr.value}; ${to.getAttribute("style")}`);
else to.setAttribute("style", attr.value);
} else if (!to.hasAttribute(attr.name)) {
to.setAttribute(attr.name, attr.value);
}
});
}
to.classList.add(...from.classList);
Array.from(from.childNodes).forEach((child) => to.appendChild(child));
if (from.tagName && Component.exists(from.tagName)) _makeComponent(from.tagName, to, scanObj, exists);
}
function _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.");
}
});
}
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];
if (rootNode) _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);
}
let _disableRunCodeError = false;
function setDisableRunCodeError(value) {
_disableRunCodeError = value;
}
const _fnCache = /* @__PURE__ */ new Map();
function _runCode(code, vars, thisObj, extendVars) {
const allVars = { ...extendVars || {}, ...vars || {} };
const argKeys = Object.keys(allVars);
const argValues = Object.values(allVars);
const cacheKey = code + argKeys.join(",");
try {
let fn = _fnCache.get(cacheKey);
if (!fn) {
fn = new Function("Hash", "LocalStorage", "State", ...argKeys, code);
_fnCache.set(cacheKey, fn);
}
return fn.apply(thisObj, [globalThis.Hash, globalThis.LocalStorage, globalThis.State, ...argValues]);
} catch (e) {
if (!_disableRunCodeError) console.error(e, extendVars, [code, extendVars, vars, thisObj]);
return null;
}
}
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 _translator = (text, args) => {
if (!text || typeof text !== "string") return text;
return text.replace(/\{(.+?)\}/g, (match, key) => args.hasOwnProperty(key) ? args[key] : match);
};
const SetTranslator = (fn) => _translator = fn;
const _translate = (text) => {
if (!text || typeof text !== "string" || !text.includes("{#")) return text;
return text.replace(/\{#(.+?)#\}/g, (m, content) => {
const parts = content.split("||").map((s) => s.trim());
const args = {};
if (parts.length > 1) {
const matches = parts[0].match(/\{(.+?)\}/g);
if (matches) matches.forEach((match, i) => args[match.substring(1, match.length - 1)] = parts[i + 1] || "");
}
return _translator(parts[0], args);
});
};
if (typeof document !== "undefined") {
try {
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);
};
}
}
_onNotifyUpdate((binding) => _updateBinding(binding));
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;
if (!node.isConnected && node.tagName !== "TEMPLATE") return;
_setActiveBinding(binding);
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") {
try {
result = _returnCode(result, { thisNode: node }, node._thisObj || node, node._ref || null);
} catch (e) {
}
}
_setActiveBinding(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 lk = prop[prop.length - 1];
if (lk) {
if (typeof result === "object" && result != null && !Array.isArray(result) && o[lk] == null) o[lk] = {};
const lo = o[lk];
if (typeof lo === "object" && lo != null && lo.__watch) Object.assign(lo, result);
else {
if (o[lk] !== result) o[lk] = result;
}
} else if (typeof result === "object" && result != null && !Array.isArray(result)) {
Object.assign(o, result);
}
}
} else if (binding.attr) {
const attr = binding.attr;
if (attr === "if") {
if (result) {
if (!node._renderedNodes || node._renderedNodes.length === 0) {
node._children.forEach((child) => {
node.parentNode.insertBefore(child, node);
child._ref = { ...node._ref };
child._thisObj = node._thisObj;
});
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";
const keyName = node.getAttribute("key");
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];
}
if (!node._keyedNodes) node._keyedNodes = /* @__PURE__ */ new Map();
const newKeyedNodes = /* @__PURE__ */ new Map();
const currentRenderedNodes = [];
keys.forEach((k, i) => {
const item = getVal(k);
const rawKey = keyName ? item && typeof item === "object" ? item[keyName] : item : k;
const keyVal = rawKey === void 0 || rawKey === null || newKeyedNodes.has(rawKey) ? `st_key_${i}` : rawKey;
let existingNodes = node._keyedNodes.get(keyVal);
if (existingNodes) {
node._keyedNodes.delete(keyVal);
existingNodes.forEach((child) => {
child._ref[indexName] = k;
child._ref[asName] = item;
_scanTree(child);
});
} else {
existingNodes = [];
node._children.forEach((child) => {
const cloned = child.cloneNode(true);
cloned._ref = { ...node._ref, [indexName]: k, [asName]: item };
cloned._thisObj = node._thisObj;
node.parentNode.insertBefore(cloned, node);
existingNodes.push(cloned);
});
}
newKeyedNodes.set(keyVal, existingNodes);
currentRenderedNodes.push(existingNodes);
});
node._keyedNodes.forEach((nodes) => nodes.forEach((child) => {
_clearRenderedNodes(child);
child.remove();
}));
node._keyedNodes = newKeyedNodes;
node._renderedNodes = currentRenderedNodes;
} else {
_clearRenderedNodes(node);
node._renderedNodes = [];
}
} else if (attr === "bind") {
if (["INPUT", "SELECT", "TEXTAREA"].includes(node.tagName) && !node.hasAttribute("autocomplete")) node.setAttribute("autocomplete", "off");
if (node.type === "checkbox") {
if (node.value !== "on" && !result) {
_runCode(`${binding.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(() => {
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 !== void 0) {
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 _parseNode = (node, scanObj) => {
if (node._bindings) {
node._states = /* @__PURE__ */ new Set();
node._bindings.forEach((b) => _updateBinding({ node, ...b }));
if (node._hasOnUpdate) node.dispatchEvent(new Event("update", { bubbles: false }));
return;
}
if (Component.exists(node.tagName) && !node._componentInitialized) {
Array.from(node.attributes).forEach((attr) => {
var _a2;
if (attr.name.startsWith("$.")) {
const realAttrName = attr.name.slice(2);
let tpl = _translate(attr.value);
if (tpl.includes("this.")) tpl = tpl.replace(/\bthis\./g, "this.parent.");
const result = _returnCode(tpl, { thisNode: node }, { parent: scanObj.thisObj || node }, node._ref || {});
let o = node;
const prop = realAttrName.split(".");
for (let i = 0; i < prop.length - 1; i++) {
if (prop[i]) o = o[_a2 = prop[i]] ?? (o[_a2] = {});
}
o[prop[prop.length - 1]] = result;
node.removeAttribute(attr.name);
}
});
_makeComponent(node.tagName, node, scanObj);
$$(node, "[slot-id]").forEach((p) => p.removeAttribute("slot-id"));
node._componentInitialized = true;
if (!node._thisObj) node._thisObj = node;
}
if (node.tagName === "TEMPLATE") {
node._children = [...node.content.childNodes];
if (!node._renderedNodes) node._renderedNodes = [];
}
let attrs = [];
if (node.tagName === "TEMPLATE") {
["$if", "$each", "st-if", "st-each"].forEach((n) => node.hasAttribute(n) && attrs.push(node.getAttributeNode(n)));
} else {
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) node._thisObj = scanObj.thisObj || null;
if (!node._ref) node._ref = scanObj.extendVars || {};
node._states = /* @__PURE__ */ new Set();
attrs.forEach((attr) => {
let exp = 0;
if (attr.name.startsWith("$$") || attr.name.startsWith("st-st-")) exp = 2;
else if (attr.name.startsWith("$") || attr.name.startsWith("st-")) exp = 1;
const realAttrName = exp === 2 ? attr.name.startsWith("$$") ? attr.name.slice(2) : attr.name.slice(6) : exp === 1 ? attr.name.startsWith("$") ? attr.name.slice(1) : attr.name.slice(3) : attr.name;
let tpl = attr.value;
node.removeAttribute(attr.name);
if (realAttrName.startsWith(".")) _initBinding({ node, prop: realAttrName.split("."), tpl, exp });
else if (realAttrName.startsWith("on")) {
const eventName = realAttrName.slice(2);
if (eventName === "update") node._hasOnUpdate = true;
if (eventName === "load" && !["BODY", "IMG", "IFRAME"].includes(node.tagName)) node._hasOnLoad = true;
if (eventName === "unload" && !["BODY", "IMG", "IFRAME"].includes(node.tagName)) node._hasOnUnload = true;
node.addEventListener(eventName, (e) => _runCode(tpl, { event: e, thisNode: node, ...e.detail || {} }, scanObj.thisObj || node, node._ref || {}));
} else {
if (realAttrName === "bind") {
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;
_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 || {});
else _runCode(`${tpl} = val`, { val: newVal, thisNode: node }, scanObj.thisObj || node, node._ref || {});
setDisableRunCodeError(false);
_setNoWriteBack(null);
});
} else if (realAttrName === "text" && !tpl) {
tpl = node.textContent;
node.textContent = "";
}
if (tpl) {
tpl = _translate(tpl);
_initBinding({ node, attr: realAttrName, tpl, exp });
}
}
});
if (node._hasOnLoad || node._componentInitialized) Promise.resolve().then(() => node.dispatchEvent(new Event("load", { bubbles: false })));
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 (!node._stTranslated) {
Array.from(node.attributes).forEach((attr) => {
if (!attr.name.startsWith("$") && !attr.name.startsWith("st-") && !attr.name.startsWith(".")) {
const translated = _translate(attr.value);
if (translated !== attr.value) attr.value = translated;
}
});
node._stTranslated = true;
}
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;
_scanTree(template, scanObj);
return;
}
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((attr2) => ["$if", "$each", "st-if", "st-each"].includes(attr2.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((attr2) => ["as", "index"].includes(attr2.name)).forEach((attr2) => {
template.setAttribute(attr2.name, attr2.value);
node.removeAttribute(attr2.name);
});
}
Array.from(node.content.childNodes).forEach((child) => template.content.appendChild(child));
node.content.appendChild(template);
template._ref = node._ref;
}
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, { cache: "force-cache" }).then((r) => 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 !== void 0) scanObj.thisObj = node._thisObj || null;
else {
let curr = node;
while (curr && curr._thisObj === void 0) curr = curr.parentNode;
scanObj.thisObj = curr ? curr._thisObj : null;
}
if (node._ref === void 0) {
let curr = node;
while (curr && curr._ref === void 0) curr = curr.parentNode;
node._ref = curr ? { ...curr._ref } : {};
}
if (scanObj.extendVars) Object.assign(node._ref, scanObj.extendVars);
_parseNode(node, { ...scanObj });
const nodes = [...node.childNodes || []];
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((mappings) => {
for (const [key, bindingSet] of mappings) {
for (const binding of bindingSet) {
if (binding.node === node) bindingSet.delete(binding);
}
}
});
node.childNodes && node.childNodes.forEach((child) => _unbindTree(child));
};
const _unsafeRefreshState = _scanTree;
const Util = {
clone: window.structuredClone || ((obj) => JSON.parse(JSON.stringify(obj))),
base64: (str) => btoa(String.fromCharCode(...new TextEncoder().encode(str))),
unbase64: (str) => new TextDecoder().decode(Uint8Array.from(atob(str), (c) => c.charCodeAt(0))),
urlbase64: (str) => Util.base64(str).replace(/[+/=]/g, (m) => ({ "+": "-", "/": "", "=": "" })[m]),
unurlbase64: (str) => Util.unbase64(str.replace(/[-_.]/g, (m) => ({ "-": "+", "_": "/", ".": "=" })[m]).padEnd(Math.ceil(str.length / 4) * 4, "=")),
safeJson: (str) => {
try {
return JSON.parse(str);
} catch {
return null;
}
},
updateDefaults: (obj, defaults) => {
for (const k in defaults) if (obj[k] === void 0) obj[k] = defaults[k];
},
copyFunction: (toObj, fromObj, ...funcNames) => {
funcNames.forEach((name) => toObj[name] = fromObj[name].bind(fromObj));
},
getFunctionBody: (fn) => {
const code = fn.toString();
return code.slice(code.indexOf("{") + 1, code.lastIndexOf("}")).trim();
},
makeDom: (html) => {
if (html.includes(">\n")) html = html.replace(/>\s+</g, "><").trim();
const node = document.createElement("div");
node.innerHTML = html;
return node.children[0];
},
newAvg: () => {
let total = 0, count = 0, avg = 0;
return {
add: (v) => {
total += v;
count++;
return avg = total / count;
},
get: () => avg,
clear: () => {
total = 0, count = 0, avg = 0;
}
};
},
newTimeCount: () => {
let startTime = 0, total = 0, count = 0;
return {
start: () => startTime = (/* @__PURE__ */ new Date()).getTime(),
end: () => {
const endTime = (/* @__PURE__ */ new Date()).getTime();
const left = endTime - startTime;
startTime = endTime;
total += left;
count++;
return left;
},
avg: () => total / count
};
}
};
globalThis.Util = Util;
let _hashParams = new URLSearchParams(((_a = window.location.hash) == null ? void 0 : _a.substring(1)) || "");
const Hash = NewState({}, (k) => Util.safeJson(_hashParams.get(k)), (k, v) => {
const oldStr = _hashParams.get(k);
const newStr = v === void 0 ? void 0 : JSON.stringify(v);
if (oldStr === newStr || oldStr === null && newStr === void 0) return;
v === void 0 ? _hashParams.delete(k) : _hashParams.set(k, newStr);
window.location.hash = "#" + _hashParams.toString();
});
if (typeof window !== "undefined") {
window.addEventListener("hashchange", () => {
var _a2;
const newParams = new URLSearchParams(((_a2 = window.location.hash) == null ? void 0 : _a2.substring(1)) || "");
const keys = /* @__PURE__ */ new Set([..._hashParams.keys(), ...newParams.keys()]);
_hashParams = newParams;
keys.forEach((k) => Hash[k] = Hash[k]);
});
}
const LocalStorage = NewState({}, (k) => Util.safeJson(localStorage.getItem(k)), (k, v) => {
const oldStr = localStorage.getItem(k);
const newStr = v === void 0 ? void 0 : JSON.stringify(v);
if (oldStr === newStr || oldStr === null && newStr === void 0) return;
v === void 0 ? localStorage.removeItem(k) : localStorage.setItem(k, newStr);
});
const State = NewState({
exitBlocks: 0
});
globalThis.Hash = Hash;
globalThis.LocalStorage = LocalStorage;
globalThis.State = State;
const ApigoState = {
NewState,
Component,
$,
$$,
RefreshState: _unsafeRefreshState,
SetTranslator,
_scanTree,
_unbindTree,
Util,
Hash,
LocalStorage,
State
};
if (typeof window !== "undefined") {
window.ApigoState = ApigoState;
}
if (typeof document !== "undefined") {
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) => {
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);
};
if (document.readyState !== "loading") init();
else document.addEventListener("DOMContentLoaded", init, true);
}
export {
$,
$$,
Component,
Hash,
LocalStorage,
NewState,
_unsafeRefreshState as RefreshState,
SetTranslator,
State,
Util,
_scanTree,
_unbindTree
};

3
package.json
View File

@ -1,9 +1,8 @@
{
"name": "@apigo.cc/state",
"version": "1.0.17",
"version": "1.0.18",
"type": "module",
"main": "dist/state.js",
"module": "dist/state.js",
"files": [
"dist"
],

4
src/component.js
View File

@ -43,7 +43,9 @@ export function _mergeNode(from, to, scanObj, exists = {}) {
});
}
to.classList.add(...from.classList);
Array.from(from.childNodes).forEach(child => to.appendChild(child));
const target = (to.tagName === 'TEMPLATE') ? to.content : to;
const sourceNodes = (from.tagName === 'TEMPLATE') ? from.content.childNodes : from.childNodes;
Array.from(sourceNodes).forEach(child => target.appendChild(child));
if (from.tagName && Component.exists(from.tagName)) _makeComponent(from.tagName, to, scanObj, exists);
}

14
src/dom.js
View File

@ -50,7 +50,7 @@ export function _updateBinding(binding) {
_setActiveBinding(binding);
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') {
try { result = _returnCode(result, { thisNode: node }, node._thisObj || node, node._ref || null); } catch (e) { }
}
@ -96,7 +96,7 @@ export function _updateBinding(binding) {
if (result && typeof result === 'object') {
const asName = node.getAttribute('as') || 'item';
const indexName = node.getAttribute('index') || 'index';
const keyName = node.getAttribute('key');
const keyName = node.getAttribute('key');
let keys, getVal;
if (result instanceof Map) {
keys = Array.from(result.keys()); getVal = k => result.get(k);
@ -263,6 +263,12 @@ export const _parseNode = (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._stTranslated) {
@ -275,7 +281,7 @@ export const _scanTree = (node, scanObj = {}) => {
node._stTranslated = true;
}
// 还原原始逻辑：自动为非模板节点的 $if 和 $each 指令创建模版节点
// 自动为非模板节点的 $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)));
@ -286,8 +292,6 @@ export const _scanTree = (node, scanObj = {}) => {
node.parentNode.insertBefore(template, node);
template.content.appendChild(node);
template._ref = node._ref;
// 修正原始版本可能存在的漏扫：转换后立即对新生成的 TEMPLATE 发起递归扫描
_scanTree(template, scanObj);
return;
}

3
src/index.js
View File

@ -16,6 +16,9 @@ const ApigoState = {
NewState, Component, $, $$, RefreshState: _unsafeRefreshState, SetTranslator, _scanTree, _unbindTree, Util, Hash, LocalStorage, State
};
globalThis.$ = $;
globalThis.$$ = $$;
if (typeof window !== 'undefined') {
window.ApigoState = ApigoState;
}

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

@ -18,6 +18,12 @@ Expected: "passed"
Received: "failed"
```
# Page snapshot
```yaml
- 'heading "Tests Failed: ___unsafeRefreshState is not a function" [level=1] [ref=e3]'
```
# Test source
```ts
@ -56,8 +62,8 @@ Received: "failed"
32 | const items = [];
33 | for(let i=0; i<1000; i++) items.push({val: 'item ' + i});
34 | window.state.benchItems = items;
35 | const { _unsafeRefreshState } = await import('@apigo.cc/state');
36 | _unsafeRefreshState(document.documentElement);
35 | const { ___unsafeRefreshState } = await import('@apigo.cc/state');
36 | ___unsafeRefreshState(document.documentElement);
37 | return performance.now() - start;
38 | });
39 | console.log(`BENCHMARK: 1000 items initial render: ${renderTime.toFixed(2)}ms`);
@ -75,10 +81,10 @@ Received: "failed"
51 |
52 | // Extreme Data Test
53 | await page.evaluate(async () => {
54 | const { _unsafeRefreshState } = await import('@apigo.cc/state');
54 | const { ___unsafeRefreshState } = await import('@apigo.cc/state');
55 | document.body.innerHTML = '<div id="extreme" $each="state.extreme"></div>';
56 | window.state.extreme = null;
57 | _unsafeRefreshState(document.getElementById('extreme'));
57 | ___unsafeRefreshState(document.getElementById('extreme'));
58 | window.state.extreme = undefined;
59 | window.state.extreme = { a: 1 };
60 | window.state.extreme = [1, 2];

4
test/component.test.js
View File

@ -9,7 +9,9 @@ window.testComponent = async function() {
}, document.createRange().createContextualFragment('<div id="comp-inner" $text="this.state.msg"></div>').firstChild);
// 2. Render component
document.body.innerHTML = '<TestComp id="comp-inst"></TestComp>';
const comp = document.createElement('TestComp');
comp.id = 'comp-inst';
document.body.appendChild(comp);
___unsafeRefreshState(document.documentElement);
const instance = $('#comp-inst');

11
vite.config.js
View File

@ -7,7 +7,7 @@ export default defineConfig({
lib: {
entry: resolve(__dirname, 'src/index.js'),
name: 'ApigoState', // UMD 内部名称，逻辑主要靠 globalThis 挂载
formats: ['umd', 'es']
formats: ['umd']
},
rollupOptions: {
output: [
@ -21,15 +21,6 @@ export default defineConfig({
name: 'ApigoState',
entryFileNames: 'state.min.js',
plugins: [terser()]
},
{
format: 'es',
entryFileNames: 'state.mjs'
},
{
format: 'es',
entryFileNames: 'state.min.mjs',
plugins: [terser()]
}
]
},