@apigo.cc/state 1.0.11

package/README.md

@@ -0,0 +1,173 @@
+# State.js AI 开发指南
+
+> ⚠️ **AI 强制指令 (AI Mandate):**
+> 1. **尊重原创逻辑**：本项目（State.js）核心架构极其精炼且经过精雕细琢。**严禁擅自修改原有逻辑**（如 `_returnCode`, `_runCode`, `NewState` 等底层函数），除非你能证明修改后的质量、性能与简洁度均显著优于原版。
+> 2. **禁止过度设计**：不要尝试引入复杂的编译器、多语句解析器或防御性代码。任何试图将“简单问题复杂化”的重构大概率会破坏现有结构。
+> 3. **汇报与许可**：若你认为有必要修改库的核心逻辑，**必须首先向人类开发者汇报修改的必要性与潜在影响**，只有在得到明确允许后方可进行。
+> 4. **回归测试**：任何改动必须通过现有 Playwright 自动化测试，确保 `DataTable` 等复杂组件场景的渲染与合并逻辑完全正常。
+
+State.js 是基于 Vanilla JS 的无编译数据驱动 UI 框架。依赖原生 DOM 与 Proxy，通过解析 HTML `$指令` 属性映射状态。
+
+> **核心设定：** 你是一个追求极致代码压缩和执行效率的资深极客。
+> **编码原则：**
+> 1. **拒绝废话变量：** 除非一个变量会被复用两次以上，否则**绝对禁止**声明临时变量。
+> 2. **极致精简：** 极度偏爱链式调用（Chaining）、短路求值、三元运算符和 One-liner。能一行写完的逻辑，绝不拆成三行。
+> 3. **无解释模式：** 假设你的对话者是顶尖黑客，不需要解释基础 API，不需要防御性废话，直接给出最硬核的最终代码即可。
+
+## 一、 核心语法与指令字典
+
+### 1\. 属性与数据绑定矩阵
+
+| 语法 | 类型 | 解析与执行规则 |
+| :--- | :--- | :--- |
+| `$attr="exp"` | 动态 JS 表达式 | 映射为 HTML 属性。若包含 `\${}`，作为模板字符串计算；若不包含，作为纯 JS 表达式执行并保留返回值类型。 |
+| `.prop="val"` | 静态 DOM 属性 | 将字符串字面量赋值给底层 DOM 节点的 JS 属性。 |
+| `$.prop="exp"` | 动态 DOM 属性 | 将 JS 执行结果赋值给底层 DOM 节点的 JS 属性。<br>**对象自动初始化**：对深层路径（如 `$.state.schema`）赋值时，若路径上的中间节点不存在，框架会自动生成空对象（`{}`）以防止报错。 |
+| `$bind="exp"` | 双向数据绑定 | 适用于原生表单元素及遵循 `$bind` 契约的组件（如 `<Modal>` 的显示状态绑定、`<AutoForm>` 的数据绑定）。 |
+
+### 2. attr绑定规范 (例如 `$style` vs `style`)
+* **唯一正确写法**：动态样式强制使用 `$style` 指令，并利用模板字符串 `${}` 进行变量插值，而不是字符串拼接。
+    * ❌ 不推荐：`$style="'transform:translateY(' + this.state.offsetY + 'px)'"`
+    * ❌ 不推荐：`$.style.transform="'transform:translateY(' + this.state.offsetY + 'px)'"`
+    * ✅ 正确：`$style="transform: translateY(\${this.state.offsetY}px);"`
+* **覆盖原则**：`$style` 的优先级高于原生 `style` 属性。如果同一个节点同时存在 `$style` 和 `style`，`$style` 会**完全覆盖** `style` 的内容。因此，最佳实践是将该节点的所有静态和动态样式全部合并写在 `$style` 中。
+
+### 3\. 控制流指令
+
+  * **`$if="exp"`**: 动态挂载/卸载 DOM 节点（布尔值映射）。
+  * **`$each="exp"`**: 遍历 Iterable 对象（Array, Object, Map, Set）。
+      * **默认变量**：单层循环时，默认可直接使用隐式变量 `item`（当前项）和 `index`（索引）。
+      * **嵌套约束**：当 `$each`存在嵌套时，**必须**使用 `as` 和 `index` 属性显式重命名迭代变量以防止遮蔽（Shadowing）。例：`<div $each="list" as="row" index="rowIdx">`。
+      * **作用域继承**：内层循环可直接访问外层作用域的变量及组件实例上下文。
+
+### 4\. 文本、属性与 i18n 多语言
+
+  * **`$text="exp"`**: 将 JS 表达式结果渲染为 `textContent`。
+  * **原地解析 (`$text`)**: 仅声明属性不赋值，框架会提取节点原有文本，将其中的 `\${}` 表达式进行响应式计算。
+  * **i18n 多语言 (`{#...#}`)**: 
+    * **自动解析**：框架在扫描 DOM 树时，会自动解析文本节点（TextNode）及静态属性（如 `placeholder`, `title`）中的 `{#...#}` 标签。
+    * **SetTranslator(fn)**: 导出一个全局 API，用于设置前端翻译逻辑。若不设置，框架会自动剥离 `{# #}` 符号并保留原文。
+    * **基础格式**：`{#文本#}`
+    * **带参格式**：`{#模板文本{变量名1}{变量名2} || 参数1 || 参数2#}`
+    * **示例**：`{#欢迎 {name} 来到 {place} || 怼怼 || 地球#}`。翻译器将接收到 `rawText="欢迎 {name} 来到 {place}"` 和 `args={name: "怼怼", place: "地球"}`。
+
+## 二、 核心 API 导出清单
+
+### 1. 状态管理 (Observer)
+*   **`NewState(defaults: Object, getter?: Function, setter?: Function): Proxy`**
+    *   创建单层响应式 Proxy。
+    *   `getter(key)`: 自定义读取逻辑。
+    *   `setter(key, value)`: 自定义写入逻辑。
+*   **`Hash: Proxy`**
+    *   映射 URL Hash 的响应式状态，修改属性将同步至 URL。
+*   **`LocalStorage: Proxy`**
+    *   映射 LocalStorage 的响应式状态，修改属性将持久化存储。
+*   **`<State>.__watch(key: string|null, callback: Function)`**
+    *   监听指定属性变化。若 `key` 为 `null`，则监听所有属性变化。
+*   **`<State>.__unwatch(key: string, callback: Function)`**
+    *   取消监听。
+
+### 2. 系统 API (Global)
+*   **`RefreshState(node: HTMLElement)`**
+    *   手动触发指定节点及其子树的指令扫描与绑定。
+*   **`SetTranslator(fn: (rawText: string, args: Object) => string)`**
+    *   设置全局 i18n 翻译器。
+
+### 3. 组件系统 (Component)
+*   **`Component.register(name: string, setupFunc: Function, template?: HTMLElement)`**
+    *   注册自定义组件。
+    *   `setupFunc(container)`: 组件逻辑初始化入口。
+    *   `template`: 组件的 DOM 模板。
+
+### 4. 工具类 (Util)
+*   **`Util.makeDom(html: string): HTMLElement`**: HTML 字符串转 DOM。
+*   **`Util.copyFunction(to: Object, from: Object, ...names: string[])`**: 批量绑定方法。
+*   **`Util.safeJson(str: string): any`**: 安全解析 JSON。
+
+### 5. DOM 查询
+*   **`$(selector: string, context?: HTMLElement): HTMLElement`**: querySelector 封装。
+*   **`$$(selector: string, context?: HTMLElement): NodeList`**: querySelectorAll 封装。
+
+
+## 三、 自定义组件开发约束 (SOP)
+
+### 1\. 组件模板转义规则 (Template Literal Escaping)
+
+由于模板使用 JS 字符串声明，若模板内部需使用框架的 `\${}` 语法绑定动态属性，**必须进行反斜杠转义 (`\${...}`)**，防止被原生 JS 提前求值。
+
+  * **正确**：`<div $class="\${this.state.type}">`
+
+### 2\. `$bind` 接口契约
+
+若自定义组件需支持 `$bind` 双向绑定，需在 `setupFunc` 中实现：
+
+  * **数据输入 (响应更新)**：`container.addEventListener('bind', (e) => { const val = e.detail; ... })`
+  * **数据输出 (触发更新)**：`container.dispatchEvent(new CustomEvent('change', { bubbles: false, detail: newValue }))`
+  * **插槽注入规则**：消费者调用组件时，**必须**使用 `<div slot-id="插槽名">` 的形式显式向组件内注入对应节点。如果组件只有一个插槽位时调用代码可以直接写内容不需要使用模版来定义插槽。
+
+### 3. 容器与 DOM 就绪机制 (DOM Readiness)
+* **`container` 的本质**：在 `setupFunc` 中，传入的 `container` 参数**即为调用组件的 DOM 节点**。组件模板的根节点会合并到该节点变成同一个节点，但是调用组件时属性中的this指向上层组件，而组件内的this指向组件实例。
+* **同步就绪**：当进入 `setupFunc` 时，组件的 DOM 树（包括插槽内容）已经**完全初始化并挂载就绪**，可以在 `setupFunc` 中直接使用。
+
+### 4. 插槽 (Slot) 的渲染时序
+* 组件框架在进入 setupFunc 之前就已经完成了插槽内容（`<div slot-id="...">`）的初始化注入。因此，在 setupFunc 中直接使用插槽内容是完全安全且符合预期的。
+
+### 5. 高级状态管理与生命周期能力
+* **隐式节点变量 (`thisNode`)**:
+    在 `$each` 循环或属性指令中，可以直接使用隐式变量 `thisNode` 获取当前执行上下文绑定的 DOM 节点对象自身。
+
+## 四、 极简主义与高性能开发哲学
+
+1. **拒绝过度工程 (No Over-engineering)**：严禁使用复杂的树结构或大段防御性代码。
+2. **DOM 访问极小化**：优先通过 `this.state` 驱动 UI，避免在 JS 中手动调用 `element.style.xxx`。
+3. **闭包与内存的权衡**：优先将逻辑挂载到 `container` 或 `container.state` 上。
+4. **组件内聚**：能用指令解决的 UI 逻辑绝不写在 JS 里。
+5. **思维重塑**：彻底抛弃 Vue/React 的生命周期崇拜，回归 DOM 本质。
+6. **无分号运动**：除了必须的情况，代码结尾禁止使用分号 `;`。
+
+## 五、 开发范例
+
+### 范例 1：带插槽与 UI 的组件 (以 Modal 为例)
+
+```javascript
+Component.register('Modal', container => {
+    container.modal = new bootstrap.Modal(container)
+    container.addEventListener('bind', e => e.detail ? container.modal.show() : container.modal.hide())
+    container.addEventListener('hide.bs.modal', () => {
+        document.activeElement?.blur()
+        container.dispatchEvent(new CustomEvent('change', { bubbles: false, detail: false }))
+    })
+    Util.copyFunction(container, container.modal, 'show', 'hide')
+}, Util.makeDom(/*html*/`
+<div class="modal fade" data-bs-backdrop="static">
+<div class="modal-dialog modal-dialog-centered">
+    <div $class="modal-content text-bg-\${this.state?.type || 'body'}">
+        <div slot-id="header" class="modal-header">
+            <h6 class="modal-title" $text="this.state?.title"></h6>
+            <button type="button" class="btn-close btn-sm ms-2" data-bs-dismiss="modal"></button>
+        </div>
+        <div slot-id="body" class="modal-body"></div>
+        <div slot-id="footer" class="modal-footer"></div>
+    </div>
+</div>
+</div>
+`))
+```
+
+### 范例 2：无模板纯逻辑组件 (以 API 为例)
+
+```javascript
+Component.register('API', container => {
+    container.request = NewState({ url: '', method: 'GET', headers: {}, data: null, timeout: 10000 })
+    container.response = NewState({ loading: false, result: null })
+    container.do = async (opt = {}) => {
+        const req = { ...container.request, ...opt }
+        container.response.loading = true
+        const resp = await fetch(req.url, req)
+        container.response.result = await resp.json()
+        container.response.loading = false
+        container.dispatchEvent(new CustomEvent('response', { detail: container.response }))
+    }
+    container.request.__watch(null, () => container.hasAttribute('auto') && container.request.url && container.do())
+})
+```

package/dist/state.js

@@ -0,0 +1,681 @@
+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.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) => {
+    _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);
+  const fromContent = from.tagName === "TEMPLATE" ? from.content : from;
+  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);
+}
+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 = Array.from(tplnode.childNodes).find((n) => n.nodeType === Node.ELEMENT_NODE);
+      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);
+  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;
+  if (window.__perfTrace) window.__perfTrace.evalTotal += performance.now() - evalStart;
+  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 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) => {
+            child._stManaged = true;
+            node.parentNode.insertBefore(child, node);
+            child._ref = { ...node._ref };
+          });
+          node._renderedNodes = [node._children];
+        } else {
+          node._renderedNodes[0].forEach((child) => _scanTree(child, { thisObj: node._thisObj, extendVars: child._ref }));
+        }
+      } 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_fallback_${i}_${Math.random()}` : rawKey;
+          let existingNodes = node._keyedNodes.get(keyVal);
+          if (existingNodes) {
+            node._keyedNodes.delete(keyVal);
+            existingNodes.forEach((child) => {
+              if (window.__statePerformanceTelemetry) window.__statePerformanceTelemetry.reuseCount++;
+              let scopeChanged = false;
+              for (let key in node._ref) {
+                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 {
+            existingNodes = [];
+            node._children.forEach((child) => {
+              const cloned = child.cloneNode(true);
+              cloned._stManaged = 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);
+          existingNodes.forEach((child) => node.parentNode.insertBefore(child, node));
+        });
+        node._keyedNodes.forEach((nodes) => nodes.forEach((child) => {
+          _clearRenderedNodes(child);
+          child.remove();
+        }));
+        node._keyedNodes = newKeyedNodes;
+        node._renderedNodes = currentRenderedNodes;
+      } else {
+        _clearRenderedNodes(node);
+        if (node._keyedNodes) node._keyedNodes.forEach((nodes) => nodes.forEach((child) => child.remove()));
+        node._keyedNodes = /* @__PURE__ */ new Map();
+        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") {
+        setTimeout(() => {
+          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) => {
+  let hasBindings = false;
+  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 }));
+    hasBindings = true;
+  }
+  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 = [];
+  }
+  if (hasBindings) return;
+  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) => {
+    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, 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(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;
+          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 === 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) => {
+      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;
+  }
+  let resolvedThisObj = node._thisObj;
+  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;
+  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 = resolvedRef;
+    template._thisObj = resolvedThisObj;
+    _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 = resolvedRef;
+    template._thisObj = resolvedThisObj;
+  }
+  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 (node._refExt !== void 0) {
+    Object.assign(node._ref, node._refExt);
+  }
+  if (scanObj.extendVars) Object.assign(node._ref, scanObj.extendVars);
+  _parseNode(node, { ...scanObj });
+  const nodes = [...node.childNodes || []];
+  const nextScanObj = { thisObj: scanObj.thisObj, extendVars: { ...node._ref } };
+  nodes.forEach((child) => {
+    if (!child._stManaged) _scanTree(child, nextScanObj);
+  });
+};
+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 RefreshState = _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 oldHashParams = _hashParams;
+    _hashParams = new URLSearchParams(((_a2 = window.location.hash) == null ? void 0 : _a2.substring(1)) || "");
+    _hashParams.forEach((v, k) => {
+      if (oldHashParams.get(k) !== v) Hash[k] = Util.safeJson(v);
+    });
+    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 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);
+});
+globalThis.Hash = Hash;
+globalThis.LocalStorage = LocalStorage;
+if (typeof document !== "undefined") {
+  const init = () => {
+    Component._initPending();
+    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,
+  RefreshState,
+  SetTranslator,
+  Util,
+  _scanTree,
+  _unbindTree
+};

package/dist/state.min.js

@@ -0,0 +1 @@
+var e;let t=null,n=null;const r=e=>t=e,a=e=>n=e,s=new Set;function o(e={},r=null,a=null){const o={},i=new Map,d=new Map,l=(e,t)=>(d.has(e)||d.set(e,new Set),t?d.get(e).add(t):d.get(e).clear(),()=>d.get(e).delete(t)),c=(e,t)=>{d.has(e)&&d.get(e).delete(t)},h=r||(e=>o[e]),u=a||((e,t)=>o[e]=t);return Object.assign(o,e),new Proxy(o,{get:(e,n)=>"__watch"===n?l:"__unwatch"===n?c:"__isProxy"===n||(t&&(i.has(n)||i.set(n,new Set),i.get(n).add(t),t.node._states||(t.node._states=new Set),t.node._states.add(i)),h(n)),set(e,t,r){if(h(t)!==r&&u(t,r),d.has(t)&&d.get(t).forEach(n=>{const a=n(r);void 0!==a&&(r=a,e[t]=r)}),d.has(null)&&d.get(null).forEach(e=>e(r)),i.has(t)){const e=i.get(t);for(const t of e)t.node.isConnected?n!==t.node&&s.forEach(e=>e(t)):e.delete(t)}return!0}})}const i=(e,t)=>t?e.querySelector(t):document.querySelector(e),d=(e,t)=>t?e.querySelectorAll(t):document.querySelectorAll(e),l=new Map,c=[],h={getTemplate:e=>document.querySelector(`template[component="${e.toUpperCase()}"]`),register:(e,t,n=null,...r)=>{l.set(e.toUpperCase(),t),"loading"!==document.readyState?h._addTemplate(e,n,r):c.push([e,n,r])},exists:e=>l.has(e.toUpperCase()),getSetupFunction:e=>l.get(e.toUpperCase()),_addTemplate:(e,t,n)=>{if(t){const n=document.createElement("TEMPLATE");n.setAttribute("component",e.toUpperCase()),n.content.appendChild(t),document.body.appendChild(n)}n&&n.forEach(e=>document.body.appendChild(e))},_initPending:()=>{c.forEach(([e,t,n])=>h._addTemplate(e,t,n)),c.length=0}};function u(e,t,n,r={}){e.attributes&&Array.from(e.attributes).forEach(e=>{"class"!==e.name&&("style"===e.name?t.hasAttribute("style")?t.setAttribute("style",`${e.value}; ${t.getAttribute("style")}`):t.setAttribute("style",e.value):t.hasAttribute(e.name)||t.setAttribute(e.name,e.value))}),t.classList.add(...e.classList);const a="TEMPLATE"===e.tagName?e.content:e,s="TEMPLATE"===t.tagName?t.content:t;Array.from(a.childNodes).forEach(e=>s.appendChild(e)),e.tagName&&h.exists(e.tagName)&&f(e.tagName,t,n,r)}function f(e,t,n,r={}){if(r[e])return;r[e]=!0,n.thisObj&&Array.from(t.attributes).forEach(e=>{(e.name.startsWith("$")||e.name.startsWith("st-"))&&e.value.includes("this.")&&(e.value=e.value.replace(/\bthis\./g,"this.parent."))});const a=h.getSetupFunction(e),s={};Array.from(t.childNodes).forEach(e=>{e.nodeType===Node.ELEMENT_NODE&&e.hasAttribute("slot")&&(s[e.getAttribute("slot")]=e,e.removeAttribute("slot"))}),t.innerHTML="",t.state=o(t.state||{});const i=h.getTemplate(e);if(i){const e=i.content.cloneNode(!0);if(e.childNodes.length){const a=Array.from(e.childNodes).find(e=>e.nodeType===Node.ELEMENT_NODE);a&&u(a,t,n,r),d(t,"[slot-id]").forEach(e=>{const t=e.getAttribute("slot-id");s[t]&&(e.removeAttribute("slot-id"),e.innerHTML="",u(s[t],e,n,r))})}}a&&a(t)}let b=!1;function m(e){b=e}const p=new Map;function _(e,t,n,r){const a={...r||{},...t||{}},s=Object.keys(a),o=Object.values(a),i=e+s.join(",");try{let t=p.get(i);return t||(t=new Function("Hash","LocalStorage","State",...s,e),p.set(i,t)),t.apply(n,[globalThis.Hash,globalThis.LocalStorage,globalThis.State,...o])}catch(a){return b||console.error(a,r,[e,r,t,n]),null}}function g(e,t,n,r){return e.includes("${")?_("return `"+e+"`",t,n,r):_("return "+e,t,n,r)}let v=(e,t)=>e&&"string"==typeof e?e.replace(/\{(.+?)\}/g,(e,n)=>t.hasOwnProperty(n)?t[n]:e):e;const E=e=>v=e,y=e=>e&&"string"==typeof e&&e.includes("{#")?e.replace(/\{#(.+?)#\}/g,(e,t)=>{const n=t.split("||").map(e=>e.trim()),r={};if(n.length>1){const e=n[0].match(/\{(.+?)\}/g);e&&e.forEach((e,t)=>r[e.substring(1,e.length-1)]=n[t+1]||"")}return v(n[0],r)}):e;if("undefined"!=typeof document)try{document.createElement("div").setAttribute("$t","1")}catch(e){const t=Element.prototype.setAttribute;Element.prototype.setAttribute=function(e,n){return e.startsWith("$")?t.call(this,"st-"+e.substring(1),n):t.call(this,e,n)}}var A;function N(e){e._renderedNodes&&e._renderedNodes.forEach(e=>e.forEach(e=>{e.remove(),e._renderedNodes&&N(e)}))}function T(e){const t=e.node;if(!t.isConnected&&"TEMPLATE"!==t.tagName)return;r(e),window.__perfTrace&&window.__perfTrace.evalCount++;const n=window.__perfTrace?performance.now():0;let a=e.exp?e.tpl?g(e.tpl,{thisNode:t},t._thisObj||t,t._ref||null):null:e.tpl;if(window.__perfTrace&&(window.__perfTrace.evalTotal+=performance.now()-n),r(null),e.prop){const n=e.prop;let r=t;for(let e=0;e<n.length-1&&(!n[e]||(null==r[n[e]]&&(r[n[e]]={}),r=r[n[e]],"object"==typeof r));e++);if("object"==typeof r&&null!==r){const e=n[n.length-1];if(e){"object"!=typeof a||null==a||Array.isArray(a)||null!=r[e]||(r[e]={});const t=r[e];"object"==typeof t&&null!=t&&t.__watch?Object.assign(t,a):r[e]=a}else"object"!=typeof a||null==a||Array.isArray(a)||Object.assign(r,a)}}else if(e.attr){const n=e.attr;if("if"===n)a?t._renderedNodes&&0!==t._renderedNodes.length?t._renderedNodes[0].forEach(e=>O(e,{thisObj:t._thisObj,extendVars:e._ref})):(t._children.forEach(e=>{e._stManaged=!0,t.parentNode.insertBefore(e,t),e._ref={...t._ref}}),t._renderedNodes=[t._children]):(N(t),t._renderedNodes=[]);else if("each"===n)if(a&&"object"==typeof a){const e=t.getAttribute("as")||"item",n=t.getAttribute("index")||"index",r=t.getAttribute("key");let s,o;if(a instanceof Map)s=Array.from(a.keys()),o=e=>a.get(e);else if("function"==typeof a[Symbol.iterator]){const e=Array.isArray(a)?a:Array.from(a);s=new Array(e.length);for(let t=0;t<e.length;t++)s[t]=t;o=t=>e[t]}else s=Object.keys(a),o=e=>a[e];t._keyedNodes||(t._keyedNodes=new Map);const i=new Map,d=[];s.forEach((a,s)=>{const l=o(a),c=r?l&&"object"==typeof l?l[r]:l:a,h=null==c||i.has(c)?`st_key_fallback_${s}_${Math.random()}`:c;let u=t._keyedNodes.get(h);u?(t._keyedNodes.delete(h),u.forEach(r=>{window.__statePerformanceTelemetry&&window.__statePerformanceTelemetry.reuseCount++;let s=!1;for(let a in t._ref)a!==e&&a!==n&&r._ref[a]!==t._ref[a]&&(r._ref[a]=t._ref[a],s=!0);r._ref[n]!==a&&(r._ref[n]=a),r._ref[e]!==l||s?(r._ref[e]=l,window.__statePerformanceTelemetry&&window.__statePerformanceTelemetry.scanCount++,O(r,{thisObj:t._thisObj,extendVars:r._ref})):t.parentNode.lastChild!==r&&(window.__statePerformanceTelemetry&&window.__statePerformanceTelemetry.moveCount++,t.parentNode.insertBefore(r,t))})):(u=[],t._children.forEach(r=>{const s=r.cloneNode(!0);s._stManaged=!0,s._ref={...t._ref,[n]:a,[e]:l},s._thisObj=t._thisObj,t.parentNode.insertBefore(s,t),u.push(s)})),i.set(h,u),d.push(u),u.forEach(e=>t.parentNode.insertBefore(e,t))}),t._keyedNodes.forEach(e=>e.forEach(e=>{N(e),e.remove()})),t._keyedNodes=i,t._renderedNodes=d}else N(t),t._keyedNodes&&t._keyedNodes.forEach(e=>e.forEach(e=>e.remove())),t._keyedNodes=new Map,t._renderedNodes=[];else if("bind"===n){if(["INPUT","SELECT","TEXTAREA"].includes(t.tagName)&&!t.hasAttribute("autocomplete")&&t.setAttribute("autocomplete","off"),"checkbox"===t.type){"on"===t.value||a||(_(`${e.tpl} = []`,{thisNode:t},t._thisObj||t,t._ref||{}),a=[]),t._checkboxMultiMode=a instanceof Array;const n=a instanceof Array?a.includes(t.value):!!a;t.checked!==n&&(t.checked=n)}else"radio"===t.type?t.checked!==(t.value===String(a??""))&&(t.checked=t.value===String(a??"")):"value"in t&&"file"!==t.type?setTimeout(()=>{t.value!==String(a??"")&&(t.value=a)}):t.isContentEditable&&t.innerHTML!==String(a??"")&&(t.innerHTML=a);t.dispatchEvent(new CustomEvent("bind",{bubbles:!1,detail:a}))}else["checked","disabled","readonly"].includes(n)&&(a=!!a),"boolean"==typeof a?a?t.setAttribute(n,""):t.removeAttribute(n):void 0!==a&&("string"!=typeof a&&(a=JSON.stringify(a)),"text"===n?t.textContent=a??"":"html"===n?t.innerHTML=a??"":"IMG"===t.tagName&&"src"===n&&a.includes(".svg")?t.setAttribute("_src",a??""):t.setAttribute(n,a??""))}}A=e=>T(e),s.add(A);const w=e=>{e.node._bindings||(e.node._bindings=[]),e.node._bindings.push({attr:e.attr,prop:e.prop,tpl:e.tpl,exp:e.exp}),T(e)},O=(e,t={})=>{if(3===e.nodeType){if(e._stTranslated)return;const t=y(e.textContent);return t!==e.textContent&&(e.textContent=t),void(e._stTranslated=!0)}if(1!==e.nodeType)return;e._stTranslated||(Array.from(e.attributes).forEach(e=>{if(!e.name.startsWith("$")&&!e.name.startsWith("st-")&&!e.name.startsWith(".")){const t=y(e.value);t!==e.value&&(e.value=t)}}),e._stTranslated=!0);let n=e._thisObj,r=e._ref;if(void 0===n||void 0===r){let t=e;for(;t&&(void 0===n||void 0===r);)void 0===n&&void 0!==t._thisObj&&(n=t._thisObj),void 0===r&&void 0!==t._ref&&(r={...t._ref}),t=t.parentNode}if(void 0===n&&(n=t.thisObj),void 0===r&&(r=t.extendVars),"TEMPLATE"!==e.tagName&&(e.hasAttribute("$if")||e.hasAttribute("$each")||e.hasAttribute("st-if")||e.hasAttribute("st-each"))){const a=document.createElement("TEMPLATE");return Array.from(e.attributes).filter(t=>["$if","$each","st-if","st-each"].includes(t.name)||(e.hasAttribute("$each")||e.hasAttribute("st-each"))&&["as","index"].includes(t.name)).forEach(t=>{a.setAttribute(t.name,t.value),e.removeAttribute(t.name)}),e.parentNode.insertBefore(a,e),a.content.appendChild(e),a._ref=r,a._thisObj=n,void O(a,t)}if("TEMPLATE"===e.tagName&&(e.hasAttribute("$if")||e.hasAttribute("st-if"))&&(e.hasAttribute("$each")||e.hasAttribute("st-each"))){const t=document.createElement("TEMPLATE"),a=Array.from(e.attributes).filter(e=>["$if","$each","st-if","st-each"].includes(e.name)),s=a[a.length-1];t.setAttribute(s.name,s.value),e.removeAttribute(s.name),"$each"!==s.name&&"st-each"!==s.name||Array.from(e.attributes).filter(e=>["as","index"].includes(e.name)).forEach(n=>{t.setAttribute(n.name,n.value),e.removeAttribute(n.name)}),Array.from(e.content.childNodes).forEach(e=>t.content.appendChild(e)),e.content.appendChild(t),t._ref=r,t._thisObj=n}if("IMG"===e.tagName&&(e.hasAttribute("src")||e.hasAttribute("_src")||e.hasAttribute("$src"))){const t=e;Promise.resolve().then(()=>{const e=t.getAttribute("_src")||t.getAttribute("src");e&&fetch(e,{cache:"force-cache"}).then(e=>e.text()).then(e=>{const n=(new DOMParser).parseFromString(e,"image/svg+xml").querySelector("svg");n&&(Array.from(t.attributes).forEach(e=>n.setAttribute(e.name,e.value)),t.replaceWith(n))})})}if(void 0!==e._thisObj)t.thisObj=e._thisObj||null;else{let n=e;for(;n&&void 0===n._thisObj;)n=n.parentNode;t.thisObj=n?n._thisObj:null}if(void 0===e._ref){let t=e;for(;t&&void 0===t._ref;)t=t.parentNode;e._ref=t?{...t._ref}:{}}void 0!==e._refExt&&Object.assign(e._ref,e._refExt),t.extendVars&&Object.assign(e._ref,t.extendVars),((e,t)=>{let n=!1;if(e._bindings&&(e._states=new Set,e._bindings.forEach(t=>T({node:e,...t})),e._hasOnUpdate&&e.dispatchEvent(new Event("update",{bubbles:!1})),n=!0),h.exists(e.tagName)&&!e._componentInitialized&&(Array.from(e.attributes).forEach(n=>{var r;if(n.name.startsWith("$.")){const a=n.name.slice(2);let s=y(n.value);s.includes("this.")&&(s=s.replace(/\bthis\./g,"this.parent."));const o=g(s,{thisNode:e},{parent:t.thisObj||e},e._ref||{});let i=e;const d=a.split(".");for(let e=0;e<d.length-1;e++)d[e]&&(i=i[r=d[e]]??(i[r]={}));i[d[d.length-1]]=o,e.removeAttribute(n.name)}}),f(e.tagName,e,t),d(e,"[slot-id]").forEach(e=>e.removeAttribute("slot-id")),e._componentInitialized=!0,e._thisObj||(e._thisObj=e)),"TEMPLATE"===e.tagName&&(e._children=[...e.content.childNodes],e._renderedNodes||(e._renderedNodes=[])),n)return;let r=[];"TEMPLATE"===e.tagName?["$if","$each","st-if","st-each"].forEach(t=>e.hasAttribute(t)&&r.push(e.getAttributeNode(t))):r=Array.from(e.attributes).filter(e=>(e.name.startsWith("$")||e.name.startsWith("st-"))&&!["$if","$each","st-if","st-each"].includes(e.name)||e.name.includes(".")),e._thisObj&&t.thisObj&&(e._thisObj.parent=t.thisObj),e._thisObj||(e._thisObj=t.thisObj||null),e._ref||(e._ref=t.extendVars||{}),e._states=new Set,r.forEach(n=>{const r=n.name.startsWith("$")||n.name.startsWith("st-"),s=r?n.name.slice(n.name.startsWith("$")?1:3):n.name;let o=n.value;if(e.removeAttribute(n.name),s.startsWith("."))w({node:e,prop:s.split("."),tpl:o,exp:r});else if(s.startsWith("on")){const n=s.slice(2);"update"===n&&(e._hasOnUpdate=!0),"load"!==n||["BODY","IMG","IFRAME"].includes(e.tagName)||(e._hasOnLoad=!0),"unload"!==n||["BODY","IMG","IFRAME"].includes(e.tagName)||(e._hasOnUnload=!0),e.addEventListener(n,n=>_(o,{event:n,thisNode:e,...n.detail||{}},t.thisObj||e,e._ref||{}))}else"bind"===s?e.addEventListener("TEXTAREA"===e.tagName||e.isContentEditable||"text"===e.type||"password"===e.type?"input":"change",n=>{let r=e.isContentEditable?n.target.innerHTML:"checkbox"===e.type?n.target.checked:n.target.files||n.target.value||n.detail;a(e),m(!0),"checkbox"===e.type&&e._checkboxMultiMode?_(`!!checked ? (!${o}.includes(val) && ${o}.push(val)) : (index = ${o}.indexOf(val), index > -1 && ${o}.splice(index, 1))`,{val:e.value,checked:r,thisNode:e},t.thisObj||e,e._ref||{}):_(`${o} = val`,{val:r,thisNode:e},t.thisObj||e,e._ref||{}),m(!1),a(null)}):"text"!==s||o||(o=e.textContent,e.textContent=""),o&&(o=y(o),w({node:e,attr:s,tpl:o,exp:r}))}),(e._hasOnLoad||e._componentInitialized)&&Promise.resolve().then(()=>e.dispatchEvent(new Event("load",{bubbles:!1}))),e._hasOnUpdate&&e.dispatchEvent(new Event("update",{bubbles:!1})),e._thisObj&&(t.thisObj=e._thisObj)})(e,{...t});const s=[...e.childNodes||[]],o={thisObj:t.thisObj,extendVars:{...e._ref}};s.forEach(e=>{e._stManaged||O(e,o)})},j=e=>{1===e.nodeType&&(e._hasOnUnload&&e.dispatchEvent(new Event("unload",{bubbles:!1})),e._states&&e._states.forEach(t=>{for(const[n,r]of t)for(const t of r)t.node===e&&r.delete(t)}),e.childNodes&&e.childNodes.forEach(e=>j(e)))},x=O,M={clone:window.structuredClone||(e=>JSON.parse(JSON.stringify(e))),base64:e=>btoa(String.fromCharCode(...(new TextEncoder).encode(e))),unbase64:e=>(new TextDecoder).decode(Uint8Array.from(atob(e),e=>e.charCodeAt(0))),urlbase64:e=>M.base64(e).replace(/[+/=]/g,e=>({"+":"-","/":"","=":""}[e])),unurlbase64:e=>M.unbase64(e.replace(/[-_.]/g,e=>({"-":"+",_:"/",".":"="}[e])).padEnd(4*Math.ceil(e.length/4),"=")),safeJson:e=>{try{return JSON.parse(e)}catch{return null}},updateDefaults:(e,t)=>{for(const n in t)void 0===e[n]&&(e[n]=t[n])},copyFunction:(e,t,...n)=>{n.forEach(n=>e[n]=t[n].bind(t))},getFunctionBody:e=>{const t=e.toString();return t.slice(t.indexOf("{")+1,t.lastIndexOf("}")).trim()},makeDom:e=>{e.includes(">\n")&&(e=e.replace(/>\s+</g,"><").trim());const t=document.createElement("div");return t.innerHTML=e,t.children[0]},newAvg:()=>{let e=0,t=0,n=0;return{add:r=>(e+=r,t++,n=e/t),get:()=>n,clear:()=>{e=0,t=0,n=0}}},newTimeCount:()=>{let e=0,t=0,n=0;return{start:()=>e=(new Date).getTime(),end:()=>{const r=(new Date).getTime(),a=r-e;return e=r,t+=a,n++,a},avg:()=>t/n}}};globalThis.Util=M;let S=new URLSearchParams((null==(e=window.location.hash)?void 0:e.substring(1))||"");const C=o({},e=>M.safeJson(S.get(e)),(e,t)=>{const n=S.get(e),r=void 0===t?void 0:JSON.stringify(t);n===r||null===n&&void 0===r||(void 0===t?S.delete(e):S.set(e,r),window.location.hash="#"+S.toString())});"undefined"!=typeof window&&window.addEventListener("hashchange",()=>{var e;const t=S;S=new URLSearchParams((null==(e=window.location.hash)?void 0:e.substring(1))||""),S.forEach((e,n)=>{t.get(n)!==e&&(C[n]=M.safeJson(e))}),t.forEach((e,t)=>{void 0===S.get(t)&&(C[t]=void 0)})});const L=o({},e=>M.safeJson(localStorage.getItem(e)),(e,t)=>{const n=localStorage.getItem(e),r=void 0===t?void 0:JSON.stringify(t);n===r||null===n&&void 0===r||(void 0===t?localStorage.removeItem(e):localStorage.setItem(e,r))});if(globalThis.Hash=C,globalThis.LocalStorage=L,"undefined"!=typeof document){const e=()=>{h._initPending(),new MutationObserver(e=>{e.forEach(e=>{e.addedNodes.forEach(e=>{e.isConnected&&O(e)}),e.removedNodes.forEach(e=>j(e))})}).observe(document.documentElement,{childList:!0,subtree:!0}),O(document.documentElement)};"loading"!==document.readyState?e():document.addEventListener("DOMContentLoaded",e,!0)}export{i as $,d as $$,h as Component,C as Hash,L as LocalStorage,o as NewState,x as RefreshState,E as SetTranslator,M as Util,O as _scanTree,j as _unbindTree};

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@apigo.cc/state",
+  "version": "1.0.11",
+  "type": "module",
+  "main": "dist/state.js",
+  "module": "dist/state.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "test": "playwright test",
+    "publish": "node scripts/publish.js"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.40.0",
+    "@rollup/plugin-terser": "^1.0.0",
+    "terser": "^5.47.1",
+    "vite": "^5.0.0"
+  }
+}