nine-9 1.11.1 → 1.11.2

package/README.md

@@ -3,7 +3,7 @@
 一个轻量、高性能、类型安全的 Vanilla DOM 响应式 UI 框架。
 
 融合了 Vue 模板指令和 React Hooks 的优点，取两者之长。
-同时运行及其轻量，甚至打包后可以用于 **单模块 UserScript**。
+同时运行及其轻量，甚至打包后可以用于 **UserScript**。
 
 ## 特性
 
@@ -25,67 +25,119 @@ npm install nine-9
 ## 示例用法
 
 ```typescript
-// Counter.ts
-import { $, createComponent, tree, sync, styleSet, createArray, when } from "nine";
-
-export default createComponent({ //创建组件
+//Selector.ts
+
+import {
+    $,
+    createComponent,
+    defineEvent,
+    defineSlot,
+    defineTemplate,
+    typed,
+    styleSet,
+    sync,
+    tree,
+    when,
+    wrap
+} from "@";
+
+export default createComponent({
     props: {
-        value: { //参数名
-            validate: Number.isInteger, //验证器
-            transform: Number, //转换器
-            required: false, //是否必填
-            shadow: 0, //默认值
-            downloadable: true, //（上游→下游）
-            uploadable: true, //（下游→上游），v-model双向绑定
+        items: {
+            validate: Array.isArray, //验证参数是否合法
+            transform: typed<string[]>(), //将输入的参数进行标准化，typed()函数不进行任何处理，只是类型投射
+            required: true, //参数是否必填
+            shadow: ["OptionA", "OptionB", "OptionC"], //默认值
+            downloadable: true, //是否可下载，即上游组件向下游传递值
+            uploadable: false //是否可上传，即下游组件向上游传递值
+        },
+        value: {
+            transform: Number,
+            uploadable: true, //组件的参数🉑上传，即v-model
+            required: true
         }
-    }
-}, (props) => {
-    const doubled = sync(() => props.value.get() * 2, [props.value]); //computed
+    },
+    events: [
+        defineEvent("select", {
+            template: defineTemplate<number>() //定义事件被触发时需要传递的数据类型
+        }),
+        defineEvent("toggleState", { template: defineTemplate<boolean>() })
+    ],
+    styles: [ //这些样式会被封装在组件所在的DOM域
+        styleSet(".item")
+            .backgroundColor("blue")
+            .color("white"),
+        styleSet(".flexdown")
+            .display("flex")
+            .flexDirection("column")
+    ],
+    slots: [
+        defineSlot("title", {
+            template: defineTemplate<string>(), //插槽作用域传值的数据类型
+            required: false, //插槽是否必填
+        })
+    ]
+}, (props, slot, emit) => {
+    const showing = wrap(false); //ref包装一个数据，基于事件订阅的响应式系统
+    const text = sync(() => //computed同步一个数据，任何一个依赖更新时都会引起自身的重新渲染
+        props.items.get()[props.value.get()]
+        , [props.items, props.value]); //🉑灵活的配置依赖列表
+
+    const select = (index: number) => {
+        props.value.set(index);
+        showing.set(false);
+        emit("select", props.value.get());
+    };
+    showing.event.subcribe(e => { //订阅一个包装器的更新事件
+        emit("toggleState", e); //发布组件的自定义事件
+    });
+
     return tree("div")
-        .use(styleSet().fontSize("20px").padding("10px"))
+        .class("flexdown")
+        .ariaAtomic("false")
         .append(
-            "敲木鱼", tree("br"),
-            tree("button")
-                .on("click", () => props.value.set(props.value.get() + 1)) //参数uploadable，赋值会实时同步到上游
-                .textContent("点击加一"),
-            tree("button")
-                .on("click", () => props.value.set(props.value.get() - 1))
-                .textContent("点击减一"),
-            tree("br"),
-            "当前值：", $(props.value), //引用响应式的值，类似模板语法{{ count }}
-            "双倍值：", $(doubled),
-            $(sync( //只要是能渲染的东西，就能进行响应式引用
-                () => createArray(
-                    doubled.get(),
-                    () => tree("div").textContent("你点了一下")
-                ),
-                [doubled]
-            )), //列表渲染v-for
-            when(
-                () => props.value.get() > 10,
-                () => tree("p").textContent("count > 10 时显示"),
-                [props.value]
-            ), //条件渲染v-if
+            tree("span")
+                .class("item")
+                .use(styleSet().backgroundColor("red")) //通过style赋值
+                .append(
+                    tree("div").append($(text)), //引用响应式包装器的值
+                    slot.title(text) //像正常元素一样，把插槽查到想要的位置（参数类型在定义时给出）
+                )
+                .on("click", () => showing.set(!showing.get())),
+            when(showing, () =>
+                tree("div")
+                    .class("flexdown")
+                    .append(
+                        $(sync(() => //只要包装器返回的数据可以被渲染，就可以通过$函数进行引用
+                            props.items.get().map((label, index) =>
+                                tree("span")
+                                    .class("item")
+                                    .append(label)
+                                    .on("click", () => select(index))
+                            ), [props.items]))
+                    )
+            )
         );
 });
 ```
 
 ## 与 Vue 对比
 
-| nine-9                       | Vue          | 说明           |
-|------------------------------|--------------|----------------|
-| `wrap()`                     | `ref()`      | 创建响应式引用 |
-| `sync()`                     | `computed()` | 响应式计算值   |
-| `when(condition, tree)`      | `v-if`       | 条件渲染       |
-| `sync(() => items.map(...))` | `v-for`      | 列表渲染       |
-| `Property.uploadable`        | `v-model`    | 双向绑定       |
+| nine-9                   | Vue          | 说明           |
+|--------------------------|--------------|----------------|
+| `wrap()`                 | `ref()`      | 创建响应式引用 |
+| `sync()`                 | `computed()` | 响应式计算值   |
+| `when(condition, tree)`  | `v-if`       | 条件渲染       |
+| `sync(() => Array<...>)` | `v-for`      | 列表渲染       |
+| `Property.uploadable`    | `v-model`    | 双向绑定       |
 
 ## 运行时特性
 
 ### 性能
 
-1. 由于框架不需要使用 **Runtime** 伴随运行，也无需通过虚拟节点重新生成整个节点树（对节点树的更改完全基于原生DOM操作命令），因此应用的运行性能相当高，甚至可以媲美Vanilla.js的速度了。
-2. 框架处理动态的节点树时，本质上是通过对新旧节点的CRUD实现。但不同于 Vue 的是，**nine-9** 不需要分析diff树，用列表渲染（`sync` ← `v-for`）举例，框架使用 `TreeContext` 接口来描述一个XML节点，**HTML元素、字符串、数字、各类空值（null、undefined）、组件渲染结果**都可以被归一化为一个 `TreeContext` 接口，而这个接口必定会用于封装一个非空的XML节点，当使用 `append` 方法添加一个响应式数组时，`TreeContext` 会首先在当前封装的节点最后添加一个注释节点用于当做锚点，旧列表中渲染出的节点将会被删除，新列表中的节点插入到锚点的后面。
+1. 框架不需要使用 **Runtime** 伴随运行，也无需通过虚拟节点定义，编译结果非常轻量。
+2. 框架处理动态的节点树时，本质上是通过对新旧节点的CRUD实现。由于不需要分析diff树，刷新组件的节点树时完全采用原生DOM操作命令，所以替换树的效率极其高。
+3. 框架的一切状态都是事件驱动的，只要包装器事件触发就能引起App视图更新。编写自定义的响应式封装器也相当灵活。
 
 ## 贡献指南
 

package/dist/index.d.ts

@@ -199,8 +199,12 @@ declare const _default: {
     }, (EventDescriptor<string, "up"> | EventDescriptor<number, "down">)[], SlotDescriptor[]>;
     Selector: Component<{
         items: {
+            validate: (arg: any) => arg is any[];
             transform: PropertyTransformer<unknown, string[]>;
+            required: true;
             shadow: string[];
+            downloadable: true;
+            uploadable: false;
         };
         value: {
             transform: NumberConstructor;

package/dist/index.js

@@ -1 +1 @@
-"use strict";var V=Object.defineProperty;var le=Object.getOwnPropertyDescriptor;var ue=Object.getOwnPropertyNames;var ce=Object.prototype.hasOwnProperty;var U=(e,t)=>{for(var n in t)V(e,n,{get:t[n],enumerable:!0})},de=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of ue(t))!ce.call(e,s)&&s!==n&&V(e,s,{get:()=>t[s],enumerable:!(r=le(t,s))||r.enumerable});return e};var fe=e=>de(V({},"__esModule",{value:!0}),e);var ve={};U(ve,{$:()=>F,EventSubcriber:()=>v,assets:()=>ee,attachUUID:()=>j,camelToHyphen:()=>P,createArray:()=>z,createComponent:()=>h,defineEvent:()=>R,defineSlot:()=>Q,defineTemplate:()=>g,examples:()=>ie,flagment:()=>X,hostdown:()=>G,hyphenToCamel:()=>me,normalizePropertyDescriptor:()=>$,normalizeRenderer:()=>oe,normalizeWrap:()=>N,putIntoArray:()=>q,render:()=>D,renderSlots:()=>Z,styleSet:()=>E,sync:()=>b,tree:()=>l,typed:()=>B,typedIsArray:()=>Te,validateStore:()=>J,when:()=>W,wrap:()=>w});module.exports=fe(ve);var v=class{subcribers=[];emitting=!1;subcribe(t,n=!1){this.subcribers.push({callback:t,once:n})}emit(...t){if(this.emitting)return;this.emitting=!0;let n=[];for(let r of this.subcribers)n.push(r.callback(...t));return this.emitting=!1,n}};function P(e){return e.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`)}function me(e){return e.replace(/-([a-z])/g,t=>t[1].toUpperCase())}function g(){return null}function Te(e){return Array.isArray(e)}function q(e){return[...Array.isArray(e)?e:[e]]}function z(e,t){return new Array(Math.max(e,0)).fill(0).map(t)}function E(e){let t={},n=new Proxy({rules:t,selector:e,apply(r){let s=document.createElement("style");document.head.appendChild(s),s.textContent=`${this.selectorString(r)}{${this.ruleString()}}`},ruleString(){return Object.entries(t).map(([r,s])=>`${P(String(r))}:${s};`).join("")},selectorString(r){return(this.selector||"")+(r||"")||"*"}},{get(r,s,o){return Reflect.has(r,s)?Reflect.get(r,s,o):p=>(t[s]=String(p),n)}});return n}var K=Symbol("HostTreeFlag"),_=Symbol("ComponentInstanceFlag"),S=Symbol("WrapperFlag");function k(e,t){return Object.assign(e,{[t]:!0})}function f(e,t){return e!=null&&typeof e=="object"&&Object.hasOwn(e,t)&&e[t]===!0}function l(e){let t=typeof e=="string"?document.createElement(e):e,n={treeUpdated:new v,attributeUpdated:new v,initialized:new v,preventEvent:new v},r=new Proxy(k({element:t,hooks:n,append(...s){for(let o of s)if(f(o,S)){let p=[],a=new Comment("Tree anchor");t.appendChild(a);let i=u=>{let c=[...Array.isArray(u)?u:[u]].reverse(),m=[];for(let x of c){let d=D(x);m.push(d),t.insertBefore(d.element,a.nextSibling)}for(let x of p)x.element.remove();n.treeUpdated.emit(m,p),p=m};o.event.subcribe(i),i(o.get())}else{let p=o;for(let a of q(p))t.appendChild(D(a).element)}return r},use(s){if(t instanceof HTMLElement){let o=p=>{for(let[a,i]of Object.entries(p))t.style.setProperty(P(String(a)),i)};f(s,S)?(s.event.subcribe(p=>o(p.rules)),o(s.get().rules)):o(s.rules)}return r},on(s,o,p){return t instanceof EventTarget&&t.addEventListener(s,a=>{let i=n.preventEvent.emit(s,o);i&&!i.some(Boolean)&&o(a)},p),r}},K),{get(s,o,p){return Reflect.has(s,o)?Reflect.get(s,o,p):a=>{let i=(u,c)=>{Object.hasOwn(t,o)&&(t[o]=u),t instanceof Element&&t.setAttribute(P(o),String(u)),n.attributeUpdated.emit(o,u,c)};return f(a,S)?(a.event.subcribe(i),i(a.get(),a.get())):i(a,a),r}}});return Promise.resolve().then(()=>n.initialized.emit(r)),r}var A=class extends Error{},C=class extends Error{},M=class extends Error{},O=class extends Error{},I=class extends Error{};var Se=[Array.prototype.push,Array.prototype.pop,Array.prototype.shift,Array.prototype.unshift,Array.prototype.splice,Array.prototype.sort,Array.prototype.reverse,Array.prototype.fill,Array.prototype.copyWithin].map(e=>e.name),te={validate:Array.isArray,duplicate:e=>[...e],patch(e,t,n){let{proxy:r,revoke:s}=Proxy.revocable(e,{get(o,p,a){if(Se.includes(p)){let i=Reflect.get(o,p,a);return typeof i=="function"?(...u)=>{t(o);let c=i.call(o,...u);return n(o),c}:Reflect.get(o,p,a)}else return Reflect.get(o,p,a)},set(o,p,a,i){if(Reflect.get(o,p,i)!==a){t(o);let c=Reflect.set(o,p,a,i);return n(o),c}return Reflect.set(o,p,a,i)}});return{data:r,revoke:s}}};function H(e,t=new WeakMap){if(e===null||typeof e!="object")return e;if(t.has(e))return t.get(e);if(e instanceof Date)return new Date(e);if(e instanceof RegExp)return new RegExp(e);if(e instanceof Map){let r=new Map;return t.set(e,r),e.forEach((s,o)=>{r.set(H(o,t),H(s,t))}),r}if(e instanceof Set){let r=new Set;return t.set(e,r),e.forEach(s=>{r.add(H(s,t))}),r}let n=Array.isArray(e)?[]:Object.create(Object.getPrototypeOf(e));return t.set(e,n),Reflect.ownKeys(e).forEach(r=>{n[r]=H(e[r],t)}),typeof e=="function"?e:n}var re={validate(e){return typeof e=="object"&&e!==null&&!Array.isArray(e)},duplicate:H,patch(e,t,n){let{proxy:r,revoke:s}=Proxy.revocable(e,{set(o,p,a,i){if(Reflect.get(o,p,i)!==a){t(o);let c=Reflect.set(o,p,a,i);return n(o),c}return Reflect.set(o,p,a,i)},deleteProperty(o,p){if(Reflect.has(o,p)){t(o);let a=Reflect.deleteProperty(o,p);return n(o),a}return Reflect.deleteProperty(o,p)},defineProperty(o,p,a){let i=Reflect.getOwnPropertyDescriptor(o,p);if(!i||"value"in a&&i.value!==a.value||"get"in a&&i.get!==a.get||"set"in a&&i.set!==a.set||"enumerable"in a&&i.enumerable!==a.enumerable||"configurable"in a&&i.configurable!==a.configurable||"writable"in a&&i.writable!==a.writable){t(o);let c=Reflect.defineProperty(o,p,a);return n(o),c}return Reflect.defineProperty(o,p,a)}});return{data:r,revoke:s}}};var ne=[te,re];function N(e){return f(e,S)?e:w(e)}function w(e,t){let n=new v,r=i=>{let u=null,c=null;for(let m of ne)if(m.validate(e)){u=m;break}if(u){let m=null,{data:x,revoke:d}=u.patch(i,T=>(u&&(m=u.duplicate(T)),m),T=>{if(!m)throw new O("StructWatcher updated a new data before snapshotting.");s.event.emit(T,m)},s);return c=d,{data:x,tryRevokeOld:(T,y)=>{if(u.validate(y)&&c)return y=u.duplicate(y),c(y),[r(T).data,y,!0];{let{data:L}=r(T);return[L,y,!0]}}}}else return{data:i,tryRevokeOld:(m,x)=>[m,x,!1]}},s=k({get(){return p},set(i){if(p!==i){let[u,c]=a(i,p);p=u,this.event.emit(u,c)}},updateOnly(){this.event.emit(this.get(),this.get())},event:n},S),o=r(e),p=o.data,a=o.tryRevokeOld;return{...s,...t??{}}}function b(e,t=[]){let n=w(e()),r=()=>{let s=e();n.get()!==s&&n.set(s)};for(let s of t)f(s,S)&&s.event.subcribe(r);return n}function W(e,t,n=[]){return b(()=>{let r;return typeof e=="function"?r=e():r=e.get(),[r?t():null]},[...n,...f(e,S)?[e]:[]])}function B(){return e=>e}function $(e){return Object.assign({validate:()=>!0,transform:t=>t,shadow:null,required:!1,downloadable:!0,uploadable:!1},e)}function J(e){for(let t in e){let n=e[t];if(n.shadow){if(n.required)throw new M(`The required property ${t} can't have a shadow.`);if(n.validate&&!n.validate(n.shadow))throw new A(`The shadow of ${t} can't pass the validation.`)}}}function G(e,t){e||(e={});let n={};for(let r in t){let s=$(t[r]),o=a=>{if(f(n[r],S))n[r].set(a);else{let i=w(a);n[r]=i,i.event.subcribe(u=>{if(!(!f(e[r],S)||!f(n[r],S))&&n[r].get()!==e[r].get()){if(!s.uploadable)throw new O(`Property ${r} isn't uploadable but being set.`);e[r].set(u)}})}},p=(a,i)=>{if(!i&&!s.downloadable){console.warn(`Property ${r} isn't downloadable but being emitted.`);return}if(!s.validate(a))throw new A(`The input value of ${r} can't pass the validation.`);o(s.transform(a))};if(!Object.hasOwn(e,r)){if(s.required)throw new C(`Missing a required property ${r}.`);o(s.shadow);continue}f(e[r],S)?(e[r].event.subcribe(a=>p(a,!1)),p(e[r].get(),!0)):p(e[r],!0)}return n}function oe(e){return t=>N(e(N(t)))}function Z(e,t){if(!t)return{};let n=e;return Object.fromEntries(t.map(r=>{if(r.required&&(!n||!Object.hasOwn(n,r.name)))throw new C(`Missing a required slot ${r.name}.`);return n?[r.name,oe(n[r.name])]:[r.name,()=>null]}))}function Q(e,t){return{name:e,...t}}function R(e,t){return{name:e,...t??{}}}function D(e){let t;if(e instanceof Node)t=l(e);else if(typeof e=="string"||typeof e=="number"||typeof e=="boolean"||typeof e=="bigint")t=l(new Text(String(e)));else if(f(e,_))t=e.$;else if(e==null)t=l(new Comment("Empty tree context"));else if(f(e,K))t=e;else throw new I(`Failed to render ${e} into a Node.`);return t}function F(e){return e}function X(e){return`nine_${e.replaceAll("-","_")}`}function j(e,t){for(let n of[e,...e.childNodes])n instanceof HTMLElement&&(n.dataset[X(t)]="true"),n!==e&&n.childNodes.length>0&&j(n,t);return e}function h(e,t){J(e.props??{});let n=Object.fromEntries(Object.entries(e.props??{}).map(([p,a])=>[p,$(a)])),r=crypto.randomUUID(),s=X(r);if(e.styles)for(let p of e.styles)p.apply(`[data-${s}="true"]`);return Object.assign((p,a)=>{let i=!1,u=[],c=()=>{i&&(u.forEach(([d,T,y])=>x.element.dispatchEvent(new CustomEvent(d,{detail:T,bubbles:y.bubbleable,cancelable:!1}))),u=[])},m=t(G(p,n),Z(a,e.slots),(d,T)=>{let y=e.events?.find(L=>L.name===d);if(!y)throw new TypeError(`No events named ${d} to emit.`);u.push([d,T,y]),c()}),x=D(m);return j(x.element,r),x.hooks.treeUpdated.subcribe(d=>d.forEach(T=>j(T.element,r))),i=!0,c(),k({mount(d){let T=typeof d=="string"?[...document.querySelectorAll(d)]:[d];for(let y of T)y.appendChild(x.element)},on(d,T){return x.on(d,y=>y instanceof CustomEvent?T(y.detail):null),this},$:x},_)},{props:n,events:e.events})}var ee={};U(ee,{logo:()=>Y});var Y={};U(Y,{default:()=>be});var be='data:image/svg+xml,<svg width="337" height="395" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden"><defs><filter id="fx0" x="-10%" y="-10%" width="120%" height="120%" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="discrete" tableValues="1 1"/><feFuncG type="discrete" tableValues="0.752941 0.752941"/><feFuncB type="discrete" tableValues="0 0"/><feFuncA type="linear" slope="0.4" intercept="0"/></feComponentTransfer><feGaussianBlur stdDeviation="0 0"/></filter><clipPath id="clip1"><rect x="119" y="90" width="93" height="142"/></clipPath></defs><g transform="translate(-119 -128)"><g clip-path="url(%23clip1)" filter="url(%23fx0)" transform="translate(125 135)"><g><path d="M37.352-111.688C33.9173-107.395 32.2-101.261 32.2-93.288 32.2-85.4373 33.9173-79.5493 37.352-75.624 40.7867-71.6987 45.5093-69.736 51.52-69.736 60.5973-69.736 68.08-74.6427 73.968-84.456 71.76-107.027 63.9707-118.312 50.6-118.312 45.3253-118.312 40.9093-116.104 37.352-111.688ZM84.088-16.008C74.0293-3.61867 61.5787 2.576 46.736 2.576 32.016 2.576 21.5893-0.797334 15.456-7.544 13.3707-9.26133 11.96-8.34133 11.224-4.784 10.12-10.1813 11.96-15.5787 16.744-20.976 21.528-26.496 25.944-27.4773 29.992-23.92 31.832-20.976 36.9227-19.504 45.264-19.504 53.6053-19.504 60.352-23.0613 65.504-30.176 70.7787-37.4133 73.4773-45.8773 73.6-55.568 73.8453-58.6347 75.1333-60.1067 77.464-59.984 75.3787-63.4187 72.128-63.296 67.712-59.616 63.4187-56.0587 58.7573-53.2987 53.728-51.336 53.6053-50.7227 51.152-50.416 46.368-50.416 34.592-50.416 25.1467-54.0347 18.032-61.272 10.9173-68.632 7.36-79.1813 7.36-92.92 7.36-106.781 11.4693-117.883 19.688-126.224 28.0293-134.565 38.2107-138.736 50.232-138.736 64.216-138.736 75.8693-133.032 85.192-121.624 94.5147-110.339 99.176-93.0427 99.176-69.736 99.176-46.4293 94.1467-28.52 84.088-16.008Z" fill="%23ED7D31" transform="translate(111.796 229)"/></g></g><text fill="%23ED7D31" font-family="Swei Fist Sans CJK JP,Swei Fist Sans CJK JP_MSFontService,sans-serif" font-weight="700" font-size="184" transform="translate(229.799 357)">9</text></g></svg>';var ae=h({props:{value:{validate:Number.isInteger,transform:Number,required:!1,shadow:0,downloadable:!0,uploadable:!0}},events:[R("up",{template:g(),bubbleable:!0}),R("down",{template:g(),bubbleable:!0})]},(e,t,n)=>{let r=b(()=>e.value.get()*2,[e.value]);return r.event.subcribe(console.log),n("down",0),n("up",""),l("div").use(E().fontSize("20px").padding("10px")).append("\u6572\u6728\u9C7C",l("br"),l("button").on("click",()=>e.value.set(e.value.get()+1)).append("\u70B9\u51FB\u52A0\u4E00"),l("button").on("click",()=>e.value.set(e.value.get()-1)).append("\u70B9\u51FB\u51CF\u4E00"),l("br"),"\u5F53\u524D\u503C\uFF1A",e.value,"\u53CC\u500D\u503C\uFF1A",r,b(()=>z(r.get(),()=>l("div").append("\u4F60\u70B9\u4E86\u4E00\u4E0B")),[r]),W(()=>e.value.get()>10,()=>l("p").append("count > 10 \u65F6\u663E\u793A"),[e.value]))});var pe=h({props:{items:{transform:B(),shadow:["OptionA","OptionB","OptionC"]},value:{transform:Number,uploadable:!0,required:!0}},events:[R("select",{template:g()}),R("toggleState",{template:g()})],styles:[E(".item").backgroundColor("blue").color("white"),E(".flexdown").display("flex").flexDirection("column")],slots:[Q("title",{template:g(),required:!1})]},(e,t,n)=>{let r=w(!1),s=b(()=>e.items.get()[e.value.get()],[e.items,e.value]),o=p=>{e.value.set(p),r.set(!1),n("select",e.value.get())};return r.event.subcribe(p=>n("toggleState",p)),l("div").class("flexdown").ariaAtomic("false").append(l("span").class("item").use(E().backgroundColor("red")).append(l("div").append(s),t.title(s)).on("click",()=>r.set(!r.get())),W(r,()=>l("div").class("flexdown").append(b(()=>e.items.get().map((p,a)=>l("span").class("item").append(p).on("click",()=>o(a))),[e.items]))))});var se=h({},()=>{let e=w({count:0,label:"hello",enabled:!0}),t=b(()=>JSON.stringify(e.get()),[e]),n=b(()=>Object.keys(e.get()).join(", "),[e]),r=()=>{e.get().count+=1},s=()=>{e.get().enabled=!e.get().enabled},o=()=>{e.get().label=`label-${e.get().count}`},p=()=>{delete e.get().label},a=()=>{Object.defineProperty(e.get(),"extra",{value:`extra-${Date.now()}`,configurable:!0,enumerable:!0,writable:!0})};return l("div").use(E().padding("10px").border("1px solid #ddd").fontFamily("monospace")).append(l("h3").append("Object Watcher Test"),l("div").append("keys: ",n),l("div").append("json: ",t),l("div").use(E().display("flex").gap("6px").marginTop("8px").flexWrap("wrap")).append(l("button").append("count++").on("click",r),l("button").append("toggle enabled").on("click",s),l("button").append("rename label").on("click",o),l("button").append("delete label").on("click",p),l("button").append("define extra").on("click",a)))});var ie={Counter:ae,Selector:pe,ObjectWatcher:se};window.__ENV_9__?.mode==="development"&&console.warn("[Nine-9] Initialized in development mode.");0&&(module.exports={$,EventSubcriber,assets,attachUUID,camelToHyphen,createArray,createComponent,defineEvent,defineSlot,defineTemplate,examples,flagment,hostdown,hyphenToCamel,normalizePropertyDescriptor,normalizeRenderer,normalizeWrap,putIntoArray,render,renderSlots,styleSet,sync,tree,typed,typedIsArray,validateStore,when,wrap});
+"use strict";var V=Object.defineProperty;var le=Object.getOwnPropertyDescriptor;var ue=Object.getOwnPropertyNames;var ce=Object.prototype.hasOwnProperty;var U=(e,t)=>{for(var n in t)V(e,n,{get:t[n],enumerable:!0})},de=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of ue(t))!ce.call(e,s)&&s!==n&&V(e,s,{get:()=>t[s],enumerable:!(r=le(t,s))||r.enumerable});return e};var fe=e=>de(V({},"__esModule",{value:!0}),e);var ve={};U(ve,{$:()=>F,EventSubcriber:()=>v,assets:()=>ee,attachUUID:()=>j,camelToHyphen:()=>P,createArray:()=>z,createComponent:()=>h,defineEvent:()=>R,defineSlot:()=>Q,defineTemplate:()=>g,examples:()=>ie,flagment:()=>X,hostdown:()=>G,hyphenToCamel:()=>me,normalizePropertyDescriptor:()=>$,normalizeRenderer:()=>oe,normalizeWrap:()=>N,putIntoArray:()=>q,render:()=>D,renderSlots:()=>Z,styleSet:()=>w,sync:()=>b,tree:()=>l,typed:()=>B,typedIsArray:()=>Te,validateStore:()=>J,when:()=>W,wrap:()=>E});module.exports=fe(ve);var v=class{subcribers=[];emitting=!1;subcribe(t,n=!1){this.subcribers.push({callback:t,once:n})}emit(...t){if(this.emitting)return;this.emitting=!0;let n=[];for(let r of this.subcribers)n.push(r.callback(...t));return this.emitting=!1,n}};function P(e){return e.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`)}function me(e){return e.replace(/-([a-z])/g,t=>t[1].toUpperCase())}function g(){return null}function Te(e){return Array.isArray(e)}function q(e){return[...Array.isArray(e)?e:[e]]}function z(e,t){return new Array(Math.max(e,0)).fill(0).map(t)}function w(e){let t={},n=new Proxy({rules:t,selector:e,apply(r){let s=document.createElement("style");document.head.appendChild(s),s.textContent=`${this.selectorString(r)}{${this.ruleString()}}`},ruleString(){return Object.entries(t).map(([r,s])=>`${P(String(r))}:${s};`).join("")},selectorString(r){return(this.selector||"")+(r||"")||"*"}},{get(r,s,o){return Reflect.has(r,s)?Reflect.get(r,s,o):p=>(t[s]=String(p),n)}});return n}var K=Symbol("HostTreeFlag"),_=Symbol("ComponentInstanceFlag"),S=Symbol("WrapperFlag");function k(e,t){return Object.assign(e,{[t]:!0})}function f(e,t){return e!=null&&typeof e=="object"&&Object.hasOwn(e,t)&&e[t]===!0}function l(e){let t=typeof e=="string"?document.createElement(e):e,n={treeUpdated:new v,attributeUpdated:new v,initialized:new v,preventEvent:new v},r=new Proxy(k({element:t,hooks:n,append(...s){for(let o of s)if(f(o,S)){let p=[],a=new Comment("Tree anchor");t.appendChild(a);let i=u=>{let c=[...Array.isArray(u)?u:[u]].reverse(),m=[];for(let x of c){let d=D(x);m.push(d),t.insertBefore(d.element,a.nextSibling)}for(let x of p)x.element.remove();n.treeUpdated.emit(m,p),p=m};o.event.subcribe(i),i(o.get())}else{let p=o;for(let a of q(p))t.appendChild(D(a).element)}return r},use(s){if(t instanceof HTMLElement){let o=p=>{for(let[a,i]of Object.entries(p))t.style.setProperty(P(String(a)),i)};f(s,S)?(s.event.subcribe(p=>o(p.rules)),o(s.get().rules)):o(s.rules)}return r},on(s,o,p){return t instanceof EventTarget&&t.addEventListener(s,a=>{let i=n.preventEvent.emit(s,o);i&&!i.some(Boolean)&&o(a)},p),r}},K),{get(s,o,p){return Reflect.has(s,o)?Reflect.get(s,o,p):a=>{let i=(u,c)=>{Object.hasOwn(t,o)&&(t[o]=u),t instanceof Element&&t.setAttribute(P(o),String(u)),n.attributeUpdated.emit(o,u,c)};return f(a,S)?(a.event.subcribe(i),i(a.get(),a.get())):i(a,a),r}}});return Promise.resolve().then(()=>n.initialized.emit(r)),r}var A=class extends Error{},C=class extends Error{},M=class extends Error{},O=class extends Error{},I=class extends Error{};var Se=[Array.prototype.push,Array.prototype.pop,Array.prototype.shift,Array.prototype.unshift,Array.prototype.splice,Array.prototype.sort,Array.prototype.reverse,Array.prototype.fill,Array.prototype.copyWithin].map(e=>e.name),te={validate:Array.isArray,duplicate:e=>[...e],patch(e,t,n){let{proxy:r,revoke:s}=Proxy.revocable(e,{get(o,p,a){if(Se.includes(p)){let i=Reflect.get(o,p,a);return typeof i=="function"?(...u)=>{t(o);let c=i.call(o,...u);return n(o),c}:Reflect.get(o,p,a)}else return Reflect.get(o,p,a)},set(o,p,a,i){if(Reflect.get(o,p,i)!==a){t(o);let c=Reflect.set(o,p,a,i);return n(o),c}return Reflect.set(o,p,a,i)}});return{data:r,revoke:s}}};function H(e,t=new WeakMap){if(e===null||typeof e!="object")return e;if(t.has(e))return t.get(e);if(e instanceof Date)return new Date(e);if(e instanceof RegExp)return new RegExp(e);if(e instanceof Map){let r=new Map;return t.set(e,r),e.forEach((s,o)=>{r.set(H(o,t),H(s,t))}),r}if(e instanceof Set){let r=new Set;return t.set(e,r),e.forEach(s=>{r.add(H(s,t))}),r}let n=Array.isArray(e)?[]:Object.create(Object.getPrototypeOf(e));return t.set(e,n),Reflect.ownKeys(e).forEach(r=>{n[r]=H(e[r],t)}),typeof e=="function"?e:n}var re={validate(e){return typeof e=="object"&&e!==null&&!Array.isArray(e)},duplicate:H,patch(e,t,n){let{proxy:r,revoke:s}=Proxy.revocable(e,{set(o,p,a,i){if(Reflect.get(o,p,i)!==a){t(o);let c=Reflect.set(o,p,a,i);return n(o),c}return Reflect.set(o,p,a,i)},deleteProperty(o,p){if(Reflect.has(o,p)){t(o);let a=Reflect.deleteProperty(o,p);return n(o),a}return Reflect.deleteProperty(o,p)},defineProperty(o,p,a){let i=Reflect.getOwnPropertyDescriptor(o,p);if(!i||"value"in a&&i.value!==a.value||"get"in a&&i.get!==a.get||"set"in a&&i.set!==a.set||"enumerable"in a&&i.enumerable!==a.enumerable||"configurable"in a&&i.configurable!==a.configurable||"writable"in a&&i.writable!==a.writable){t(o);let c=Reflect.defineProperty(o,p,a);return n(o),c}return Reflect.defineProperty(o,p,a)}});return{data:r,revoke:s}}};var ne=[te,re];function N(e){return f(e,S)?e:E(e)}function E(e,t){let n=new v,r=i=>{let u=null,c=null;for(let m of ne)if(m.validate(e)){u=m;break}if(u){let m=null,{data:x,revoke:d}=u.patch(i,T=>(u&&(m=u.duplicate(T)),m),T=>{if(!m)throw new O("StructWatcher updated a new data before snapshotting.");s.event.emit(T,m)},s);return c=d,{data:x,tryRevokeOld:(T,y)=>{if(u.validate(y)&&c)return y=u.duplicate(y),c(y),[r(T).data,y,!0];{let{data:L}=r(T);return[L,y,!0]}}}}else return{data:i,tryRevokeOld:(m,x)=>[m,x,!1]}},s=k({get(){return p},set(i){if(p!==i){let[u,c]=a(i,p);p=u,this.event.emit(u,c)}},updateOnly(){this.event.emit(this.get(),this.get())},event:n},S),o=r(e),p=o.data,a=o.tryRevokeOld;return{...s,...t??{}}}function b(e,t=[]){let n=E(e()),r=()=>{let s=e();n.get()!==s&&n.set(s)};for(let s of t)f(s,S)&&s.event.subcribe(r);return n}function W(e,t,n=[]){return b(()=>{let r;return typeof e=="function"?r=e():r=e.get(),[r?t():null]},[...n,...f(e,S)?[e]:[]])}function B(){return e=>e}function $(e){return Object.assign({validate:()=>!0,transform:t=>t,shadow:null,required:!1,downloadable:!0,uploadable:!1},e)}function J(e){for(let t in e){let n=e[t];if(n.shadow){if(n.required)throw new M(`The required property ${t} can't have a shadow.`);if(n.validate&&!n.validate(n.shadow))throw new A(`The shadow of ${t} can't pass the validation.`)}}}function G(e,t){e||(e={});let n={};for(let r in t){let s=$(t[r]),o=a=>{if(f(n[r],S))n[r].set(a);else{let i=E(a);n[r]=i,i.event.subcribe(u=>{if(!(!f(e[r],S)||!f(n[r],S))&&n[r].get()!==e[r].get()){if(!s.uploadable)throw new O(`Property ${r} isn't uploadable but being set.`);e[r].set(u)}})}},p=(a,i)=>{if(!i&&!s.downloadable){console.warn(`Property ${r} isn't downloadable but being emitted.`);return}if(!s.validate(a))throw new A(`The input value of ${r} can't pass the validation.`);o(s.transform(a))};if(!Object.hasOwn(e,r)){if(s.required)throw new C(`Missing a required property ${r}.`);o(s.shadow);continue}f(e[r],S)?(e[r].event.subcribe(a=>p(a,!1)),p(e[r].get(),!0)):p(e[r],!0)}return n}function oe(e){return t=>N(e(N(t)))}function Z(e,t){if(!t)return{};let n=e;return Object.fromEntries(t.map(r=>{if(r.required&&(!n||!Object.hasOwn(n,r.name)))throw new C(`Missing a required slot ${r.name}.`);return n?[r.name,oe(n[r.name])]:[r.name,()=>null]}))}function Q(e,t){return{name:e,...t}}function R(e,t){return{name:e,...t??{}}}function D(e){let t;if(e instanceof Node)t=l(e);else if(typeof e=="string"||typeof e=="number"||typeof e=="boolean"||typeof e=="bigint")t=l(new Text(String(e)));else if(f(e,_))t=e.$;else if(e==null)t=l(new Comment("Empty tree context"));else if(f(e,K))t=e;else throw new I(`Failed to render ${e} into a Node.`);return t}function F(e){return e}function X(e){return`nine_${e.replaceAll("-","_")}`}function j(e,t){for(let n of[e,...e.childNodes])n instanceof HTMLElement&&(n.dataset[X(t)]="true"),n!==e&&n.childNodes.length>0&&j(n,t);return e}function h(e,t){J(e.props??{});let n=Object.fromEntries(Object.entries(e.props??{}).map(([p,a])=>[p,$(a)])),r=crypto.randomUUID(),s=X(r);if(e.styles)for(let p of e.styles)p.apply(`[data-${s}="true"]`);return Object.assign((p,a)=>{let i=!1,u=[],c=()=>{i&&(u.forEach(([d,T,y])=>x.element.dispatchEvent(new CustomEvent(d,{detail:T,bubbles:y.bubbleable,cancelable:!1}))),u=[])},m=t(G(p,n),Z(a,e.slots),(d,T)=>{let y=e.events?.find(L=>L.name===d);if(!y)throw new TypeError(`No events named ${d} to emit.`);u.push([d,T,y]),c()}),x=D(m);return j(x.element,r),x.hooks.treeUpdated.subcribe(d=>d.forEach(T=>j(T.element,r))),i=!0,c(),k({mount(d){let T=typeof d=="string"?[...document.querySelectorAll(d)]:[d];for(let y of T)y.appendChild(x.element)},on(d,T){return x.on(d,y=>y instanceof CustomEvent?T(y.detail):null),this},$:x},_)},{props:n,events:e.events})}var ee={};U(ee,{logo:()=>Y});var Y={};U(Y,{default:()=>be});var be='data:image/svg+xml,<svg width="337" height="395" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden"><defs><filter id="fx0" x="-10%" y="-10%" width="120%" height="120%" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="discrete" tableValues="1 1"/><feFuncG type="discrete" tableValues="0.752941 0.752941"/><feFuncB type="discrete" tableValues="0 0"/><feFuncA type="linear" slope="0.4" intercept="0"/></feComponentTransfer><feGaussianBlur stdDeviation="0 0"/></filter><clipPath id="clip1"><rect x="119" y="90" width="93" height="142"/></clipPath></defs><g transform="translate(-119 -128)"><g clip-path="url(%23clip1)" filter="url(%23fx0)" transform="translate(125 135)"><g><path d="M37.352-111.688C33.9173-107.395 32.2-101.261 32.2-93.288 32.2-85.4373 33.9173-79.5493 37.352-75.624 40.7867-71.6987 45.5093-69.736 51.52-69.736 60.5973-69.736 68.08-74.6427 73.968-84.456 71.76-107.027 63.9707-118.312 50.6-118.312 45.3253-118.312 40.9093-116.104 37.352-111.688ZM84.088-16.008C74.0293-3.61867 61.5787 2.576 46.736 2.576 32.016 2.576 21.5893-0.797334 15.456-7.544 13.3707-9.26133 11.96-8.34133 11.224-4.784 10.12-10.1813 11.96-15.5787 16.744-20.976 21.528-26.496 25.944-27.4773 29.992-23.92 31.832-20.976 36.9227-19.504 45.264-19.504 53.6053-19.504 60.352-23.0613 65.504-30.176 70.7787-37.4133 73.4773-45.8773 73.6-55.568 73.8453-58.6347 75.1333-60.1067 77.464-59.984 75.3787-63.4187 72.128-63.296 67.712-59.616 63.4187-56.0587 58.7573-53.2987 53.728-51.336 53.6053-50.7227 51.152-50.416 46.368-50.416 34.592-50.416 25.1467-54.0347 18.032-61.272 10.9173-68.632 7.36-79.1813 7.36-92.92 7.36-106.781 11.4693-117.883 19.688-126.224 28.0293-134.565 38.2107-138.736 50.232-138.736 64.216-138.736 75.8693-133.032 85.192-121.624 94.5147-110.339 99.176-93.0427 99.176-69.736 99.176-46.4293 94.1467-28.52 84.088-16.008Z" fill="%23ED7D31" transform="translate(111.796 229)"/></g></g><text fill="%23ED7D31" font-family="Swei Fist Sans CJK JP,Swei Fist Sans CJK JP_MSFontService,sans-serif" font-weight="700" font-size="184" transform="translate(229.799 357)">9</text></g></svg>';var ae=h({props:{value:{validate:Number.isInteger,transform:Number,required:!1,shadow:0,downloadable:!0,uploadable:!0}},events:[R("up",{template:g(),bubbleable:!0}),R("down",{template:g(),bubbleable:!0})]},(e,t,n)=>{let r=b(()=>e.value.get()*2,[e.value]);return r.event.subcribe(console.log),n("down",0),n("up",""),l("div").use(w().fontSize("20px").padding("10px")).append("\u6572\u6728\u9C7C",l("br"),l("button").on("click",()=>e.value.set(e.value.get()+1)).append("\u70B9\u51FB\u52A0\u4E00"),l("button").on("click",()=>e.value.set(e.value.get()-1)).append("\u70B9\u51FB\u51CF\u4E00"),l("br"),"\u5F53\u524D\u503C\uFF1A",e.value,"\u53CC\u500D\u503C\uFF1A",r,b(()=>z(r.get(),()=>l("div").append("\u4F60\u70B9\u4E86\u4E00\u4E0B")),[r]),W(()=>e.value.get()>10,()=>l("p").append("count > 10 \u65F6\u663E\u793A"),[e.value]))});var pe=h({props:{items:{validate:Array.isArray,transform:B(),required:!0,shadow:["OptionA","OptionB","OptionC"],downloadable:!0,uploadable:!1},value:{transform:Number,uploadable:!0,required:!0}},events:[R("select",{template:g()}),R("toggleState",{template:g()})],styles:[w(".item").backgroundColor("blue").color("white"),w(".flexdown").display("flex").flexDirection("column")],slots:[Q("title",{template:g(),required:!1})]},(e,t,n)=>{let r=E(!1),s=b(()=>e.items.get()[e.value.get()],[e.items,e.value]),o=p=>{e.value.set(p),r.set(!1),n("select",e.value.get())};return r.event.subcribe(p=>{n("toggleState",p)}),l("div").class("flexdown").ariaAtomic("false").append(l("span").class("item").use(w().backgroundColor("red")).append(l("div").append(s),t.title(s)).on("click",()=>r.set(!r.get())),W(r,()=>l("div").class("flexdown").append(b(()=>e.items.get().map((p,a)=>l("span").class("item").append(p).on("click",()=>o(a))),[e.items]))))});var se=h({},()=>{let e=E({count:0,label:"hello",enabled:!0}),t=b(()=>JSON.stringify(e.get()),[e]),n=b(()=>Object.keys(e.get()).join(", "),[e]),r=()=>{e.get().count+=1},s=()=>{e.get().enabled=!e.get().enabled},o=()=>{e.get().label=`label-${e.get().count}`},p=()=>{delete e.get().label},a=()=>{Object.defineProperty(e.get(),"extra",{value:`extra-${Date.now()}`,configurable:!0,enumerable:!0,writable:!0})};return l("div").use(w().padding("10px").border("1px solid #ddd").fontFamily("monospace")).append(l("h3").append("Object Watcher Test"),l("div").append("keys: ",n),l("div").append("json: ",t),l("div").use(w().display("flex").gap("6px").marginTop("8px").flexWrap("wrap")).append(l("button").append("count++").on("click",r),l("button").append("toggle enabled").on("click",s),l("button").append("rename label").on("click",o),l("button").append("delete label").on("click",p),l("button").append("define extra").on("click",a)))});var ie={Counter:ae,Selector:pe,ObjectWatcher:se};window.__ENV_9__?.mode==="development"&&console.warn("[Nine-9] Initialized in development mode.");0&&(module.exports={$,EventSubcriber,assets,attachUUID,camelToHyphen,createArray,createComponent,defineEvent,defineSlot,defineTemplate,examples,flagment,hostdown,hyphenToCamel,normalizePropertyDescriptor,normalizeRenderer,normalizeWrap,putIntoArray,render,renderSlots,styleSet,sync,tree,typed,typedIsArray,validateStore,when,wrap});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "nine-9",
-    "version": "1.11.1",
+    "version": "1.11.2",
     "description": "一个轻量、高性能、类型安全的 Vanilla DOM 响应式 UI 框架。",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",