nine-9 1.7.0 → 1.8.0

package/dist/index.d.ts

@@ -1,19 +1,22 @@
 import { IntrinsicElementAttributes, Events } from '@vue/runtime-dom';
 
-interface SubcriberCallback<T extends unknown[]> {
-    (...data: T): void;
+interface SubcriberCallback<T extends unknown[], R> {
+    (...data: T): R;
 }
-declare class EventSubcriber<T extends unknown[]> {
+declare class EventSubcriber<T extends unknown[], R = void> {
     private subcribers;
     private emitting;
-    subcribe(callback: SubcriberCallback<T>, once?: boolean): void;
-    emit(...data: T): void;
+    subcribe(callback: SubcriberCallback<T, R>, once?: boolean): void;
+    emit(...data: T): R[] | void;
 }
 
 type EmptyValue = undefined | null | void | never;
 type Normalize<T extends Record<string, unknown>> = T extends Record<infer K, infer R> ? Record<K, Required<R>> : never;
 type Valueof<T> = T[keyof T];
 type KebabToCamel<S extends string> = S extends `${infer First}-${infer Rest}` ? `${First}${Capitalize<KebabToCamel<Rest>>}` : S;
+type ObjectToEntryUnion<T> = {
+    [K in keyof T]: [K, T[K]];
+}[keyof T];
 
 type Wrapper<T> = {
     get(): T;
@@ -36,17 +39,24 @@ type StyleSet = {
 };
 declare function styleSet(selector?: string): StyleSet;
 
-type HTMLEventAttributes = keyof Events;
+type VueEventAttributes = keyof Events;
+type HTMLEventName<V extends string> = V extends `on${infer R extends string}` ? Uncapitalize<R> : never;
 type SupportedHTMLElements = keyof HTMLElementTagNameMap & keyof IntrinsicElementAttributes;
 type SupportedHTMLRawAttributes = {
-    [K in SupportedHTMLElements]: Omit<IntrinsicElementAttributes[K], HTMLEventAttributes>;
+    [K in SupportedHTMLElements]: Omit<IntrinsicElementAttributes[K], VueEventAttributes>;
+};
+type SupportedEventHandlerMap = {
+    [K in VueEventAttributes as HTMLEventName<K>]: (event: Events[K]) => void;
 };
 
 interface HostTreeHooks {
-    update: [newTrees: HostTree[], oldTrees: HostTree[]];
+    treeUpdated: [newTrees: HostTree[], oldTrees: HostTree[]];
+    attributeUpdated: [attribute: string, newValue: unknown, oldValue: unknown];
+    initialized: [rootTree: HostTree];
+    $preventEvent: [ObjectToEntryUnion<SupportedEventHandlerMap>, boolean | void];
 }
 type HostTreeHookStore = {
-    [K in keyof HostTreeHooks]: EventSubcriber<HostTreeHooks[K]>;
+    [K in keyof HostTreeHooks as K extends `$${infer R}` ? R : K]: K extends `$${string}` ? HostTreeHooks[K] extends [infer E extends unknown[], infer R] ? EventSubcriber<E, R> : EventSubcriber<HostTreeHooks[K]> : EventSubcriber<HostTreeHooks[K]>;
 };
 type HostTree<E extends SupportedHTMLElements = SupportedHTMLElements, T = HTMLElementTagNameMap[E], A = SupportedHTMLRawAttributes[E]> = {
     [K in string & keyof A as KebabToCamel<K>]-?: (data: A[K] | Wrapper<A[K]>) => HostTree<E>;
@@ -55,7 +65,7 @@ type HostTree<E extends SupportedHTMLElements = SupportedHTMLElements, T = HTMLE
     hooks: HostTreeHookStore;
     append(...children: (RawSourceTree | HostTree | RawSourceTree[] | HostTree[] | (RawSourceTree | HostTree)[] | Wrapper<HostTree> | Wrapper<RawSourceTree> | Wrapper<RawSourceTree | HostTree> | Wrapper<(RawSourceTree | HostTree)[]> | Wrapper<RawSourceTree | RawSourceTree[]>)[]): HostTree<E>;
     use(styleSet: StyleSet | Wrapper<StyleSet>): HostTree<E>;
-    on<K extends keyof HTMLElementEventMap>(key: K, handler: (data: HTMLElementEventMap[K]) => void, options?: AddEventListenerOptions): HostTree<E>;
+    on<K extends keyof SupportedEventHandlerMap>(key: K, handler: SupportedEventHandlerMap[K], options?: AddEventListenerOptions): HostTree<E>;
     on(key: string, handler: (...args: unknown[]) => unknown, options?: AddEventListenerOptions): HostTree<E>;
 };
 declare function tree<E extends SupportedHTMLElements>(data: E | Node): HostTree<E, HTMLElementTagNameMap[E], SupportedHTMLRawAttributes[E]>;
@@ -137,7 +147,7 @@ declare function camelToHyphen<T extends string>(str: T): T;
 declare function hyphenToCamel<T extends string>(str: T): T;
 
 declare function typedIsArray<T>(arr: unknown[]): arr is T[];
-declare function putIn<T>(data: T): T extends (infer R)[] ? R[] : [T];
+declare function putIntoArray<T>(data: T): T extends (infer R)[] ? R[] : [T];
 declare function createArray<T>(length: number, filler: () => T): T[];
 
 declare namespace logo {
@@ -179,4 +189,4 @@ declare const _default: {
     }, (EventDescriptor<number, "select"> | EventDescriptor<boolean, "toggleState">)[]>;
 };
 
-export { $, type Component, type ComponentEventStore, type ComponentInstance, type ComponentInternalRender, type ComponentOption, type ComponentPropertyDescriptor, type ComponentPropertyInputDict, type ComponentPropertyOutputDict, type ComponentPropertyStore, type ComponentRenderEntry, type EmptyValue, type EventDescriptor, type EventOptions, EventSubcriber, type HostTree, type HostTreeHookStore, type HostTreeHooks, type KebabToCamel, type Normalize, type PropertyTransformer, type RawSlotInput, type RawSourceTree, type SlotInput, type SlotOutput, type SourceTree, type StyleSet, type Valueof, type Wrapper, index as assets, attachUUID, camelToHyphen, createArray, createComponent, defineEvent, _default as examples, flagment, hostdown, hyphenToCamel, normalizePropertyDescriptor, pipeExtract, putIn, rawProperty, render, styleSet, sync, tree, typedIsArray, validateStore, when, wrap };
+export { $, type Component, type ComponentEventStore, type ComponentInstance, type ComponentInternalRender, type ComponentOption, type ComponentPropertyDescriptor, type ComponentPropertyInputDict, type ComponentPropertyOutputDict, type ComponentPropertyStore, type ComponentRenderEntry, type EmptyValue, type EventDescriptor, type EventOptions, EventSubcriber, type HostTree, type HostTreeHookStore, type HostTreeHooks, type KebabToCamel, type Normalize, type ObjectToEntryUnion, type PropertyTransformer, type RawSlotInput, type RawSourceTree, type SlotInput, type SlotOutput, type SourceTree, type StyleSet, type Valueof, type Wrapper, index as assets, attachUUID, camelToHyphen, createArray, createComponent, defineEvent, _default as examples, flagment, hostdown, hyphenToCamel, normalizePropertyDescriptor, pipeExtract, putIntoArray, rawProperty, render, styleSet, sync, tree, typedIsArray, validateStore, when, wrap };

package/dist/index.js

@@ -1 +1 @@
-"use strict";var L=Object.defineProperty;var te=Object.getOwnPropertyDescriptor;var re=Object.getOwnPropertyNames;var ne=Object.prototype.hasOwnProperty;var $=(e,t)=>{for(var n in t)L(e,n,{get:t[n],enumerable:!0})},oe=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of re(t))!ne.call(e,o)&&o!==n&&L(e,o,{get:()=>t[o],enumerable:!(r=te(t,o))||r.enumerable});return e};var se=e=>oe(L({},"__esModule",{value:!0}),e);var ce={};$(ce,{$:()=>B,EventSubcriber:()=>b,assets:()=>Z,attachUUID:()=>N,camelToHyphen:()=>v,createArray:()=>j,createComponent:()=>H,defineEvent:()=>E,examples:()=>ee,flagment:()=>J,hostdown:()=>V,hyphenToCamel:()=>ae,normalizePropertyDescriptor:()=>K,pipeExtract:()=>M,putIn:()=>_,rawProperty:()=>U,render:()=>C,styleSet:()=>w,sync:()=>g,tree:()=>m,typedIsArray:()=>pe,validateStore:()=>z,when:()=>k,wrap:()=>x});module.exports=se(ce);var b=class{subcribers=[];emitting=!1;subcribe(t,n=!1){this.subcribers.push({callback:t,once:n})}emit(...t){if(!this.emitting){this.emitting=!0;for(let n of this.subcribers)n.callback(...t);this.emitting=!1}}};function v(e){return e.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`)}function ae(e){return e.replace(/-([a-z])/g,t=>t[1].toUpperCase())}function pe(e){return Array.isArray(e)}function _(e){return[...Array.isArray(e)?e:[e]]}function j(e,t){return new Array(e).fill(0).map(t)}var O=Symbol("HostTreeFlag"),q=Symbol("ComponentInstanceFlag"),y=Symbol("WrapperFlag");function P(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 m(e){let t=typeof e=="string"?document.createElement(e):e,n={update:new b},r=new Proxy(P({element:t,hooks:n,append(...o){for(let a of o)if(f(a,y)){let s=[],p=new Comment("Tree anchor");t.appendChild(p);let i=l=>{let d=[...Array.isArray(l)?l:[l]].reverse(),c=[];for(let u of d){let T=C(u);c.push(T),t.insertBefore(T.element,p.nextSibling)}for(let u of s)u.element.remove();n.update.emit(c,s),s=c};a.event.subcribe(i),i(a.get())}else{let s=a;for(let p of _(s))t.appendChild(C(p).element)}return r},use(o){if(t instanceof HTMLElement){let a=s=>{for(let[p,i]of Object.entries(s))t.style.setProperty(v(String(p)),i)};f(o,y)?(o.event.subcribe(s=>a(s.rules)),a(o.get().rules)):a(o.rules)}return r},on(o,a,s){return t instanceof HTMLElement&&t.addEventListener(o,a,s),r}},O),{get(o,a,s){return Reflect.has(o,a)?Reflect.get(o,a,s):p=>{let i=l=>{Object.hasOwn(t,a)&&(t[a]=l),t instanceof Element&&t.setAttribute(v(a),String(l))};return f(p,y)?(p.event.subcribe(i),i(p.get())):i(p),r}}});return r}var R=class extends Error{},D=class extends Error{},A=class extends Error{},I=class extends Error{},W=class extends Error{};function x(e,t){let n=["push","pop","shift","unshift","splice","sort","reverse"],r=i=>{if(!Array.isArray(i))return i;let{proxy:l,revoke:d}=Proxy.revocable(i,{get(c,u,T){if(n.includes(u)){let h=Reflect.get(c,u,T);return typeof h=="function"?(...Q)=>{let S=p.get();if(Array.isArray(S)){S=[...S];let F=h.call(c,...Q);return p.event.emit(p.get(),S),F}}:Reflect.get(c,u,T)}else return Reflect.get(c,u,T)},set(c,u,T,h){if(Reflect.get(c,u,h)!==T){let S=p.get();if(Array.isArray(S)){S=[...S];let F=Reflect.set(c,u,T,h);return p.event.emit(p.get(),S),F}}return Reflect.set(c,u,T,h)}});return a=d,l},o=new b,a=null,s=r(e),p=P({get(){return s},set(i){if(s!==i){let l=s;Array.isArray(l)&&a?(l=[...l],a(),s=r(i)):s=i,this.event.emit(i,l)}},updateOnly(){this.event.emit(this.get(),this.get())},event:o},y);return{...p,...t??{}}}function g(e,t=[]){let n=x(e()),r=()=>{let o=e();n.get()!==o&&n.set(o)};for(let o of t)f(o,y)&&o.event.subcribe(r);return n}function k(e,t,n=[]){return g(()=>{let r;return typeof e=="function"?r=e():r=e.get(),[r?t():null]},[...n,...f(e,y)?[e]:[]])}function U(){return e=>e}function K(e){return Object.assign({validate:()=>!0,transform:t=>t,shadow:null,required:!1,downloadable:!0,uploadable:!1},e)}function z(e){for(let t in e){let n=e[t];if(n.shadow){if(n.required)throw new A(`The required property ${t} can't have a shadow.`);if(n.validate&&!n.validate(n.shadow))throw new R(`The shadow of ${t} can't pass the validation.`)}}}function V(e,t){e||(e={});let n={};for(let r in t){let o=K(t[r]),a=p=>{if(f(n[r],y))n[r].set(p);else{let i=x(p);n[r]=i,i.event.subcribe(l=>{if(!(!f(e[r],y)||!f(n[r],y))&&n[r].get()!==e[r].get()){if(!o.uploadable)throw new I(`Property ${r} isn't uploadable but being set.`);e[r].set(l)}})}},s=(p,i)=>{if(!i&&!o.downloadable){console.warn(`Property ${r} isn't downloadable but being emitted.`);return}if(!o.validate(p))throw new R(`The input value of ${r} can't pass the validation.`);a(o.transform(p))};if(!Object.hasOwn(e,r)){if(o.required)throw new D(`Missing a required property ${r}.`);a(o.shadow);continue}f(e[r],y)?(e[r].event.subcribe(p=>s(p,!1)),s(e[r].get(),!0)):s(e[r],!0)}return n}function M(e){return typeof e=="function"?()=>x(e()):f(e,y)?M(e):()=>x(e)}function C(e){let t;if(e instanceof Node)t=m(e);else if(typeof e=="string"||typeof e=="number"||typeof e=="boolean"||typeof e=="bigint")t=m(new Text(String(e)));else if(f(e,q))t=e.$;else if(e==null)t=m(new Comment("Empty tree context"));else if(f(e,O))t=e;else throw new W(`Failed to render ${e} into a Node.`);return t}function B(e){return e}function J(e){return`nine_${e.replaceAll("-","_")}`}function N(e,t){for(let n of[e,...e.childNodes])n instanceof HTMLElement&&(n.dataset[J(t)]="true"),n!==e&&n.childNodes.length>0&&N(n,t);return e}function H(e,t){z(e.props??{});let n=Object.fromEntries(Object.entries(e.props??{}).map(([s,p])=>[s,K(p)])),r=crypto.randomUUID(),o=J(r);if(e.styles)for(let s of e.styles)s.apply(`[data-${o}="true"]`);return Object.assign((s,p)=>{let i=t(V(s,n),M(p),(d,c)=>{let u=e.events?.find(T=>T.name===d);if(!u)throw new TypeError(`No events named ${d} to emit.`);l.element.dispatchEvent(new CustomEvent(d,{detail:c,bubbles:u.bubbleable,cancelable:!1}))}),l=C(i);return N(l.element,r),l.hooks.update.subcribe(d=>d.forEach(c=>N(c.element,r))),P({mount(d){let c=typeof d=="string"?[...document.querySelectorAll(d)]:[d];for(let u of c)u.appendChild(l.element)},on(d,c){return l.on(d,u=>u instanceof CustomEvent?c(u.detail):null),this},$:l},q)},{props:n,events:e.events})}function w(e){let t={},n=new Proxy({rules:t,selector:e,apply(r){let o=document.createElement("style");document.head.appendChild(o),o.textContent=`${this.selectorString(r)}{${this.ruleString()}}`},ruleString(){return Object.entries(t).map(([r,o])=>`${v(String(r))}:${o};`).join("")},selectorString(r){return(this.selector||"")+(r||"")||"*"}},{get(r,o,a){return Reflect.has(r,o)?Reflect.get(r,o,a):s=>(t[o]=String(s),n)}});return n}function E(e,t){return{name:e,...t??{}}}var Z={};$(Z,{logo:()=>G});var G={};$(G,{default:()=>le});var le='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 X=H({props:{value:{validate:Number.isInteger,transform:Number,required:!1,shadow:0,downloadable:!0,uploadable:!0}},events:[E("up",{template:{arg1:0,arg2:!1},bubbleable:!0}),E("down",{template:{arg3:"sb",arg4:Symbol()},bubbleable:!0})]},e=>{let t=g(()=>e.value.get()*2,[e.value]);return m("div").use(w().fontSize("20px").padding("10px")).append("\u6572\u6728\u9C7C",m("br"),m("button").on("click",()=>e.value.set(e.value.get()+1)).append("\u70B9\u51FB\u52A0\u4E00"),m("button").on("click",()=>e.value.set(e.value.get()-1)).append("\u70B9\u51FB\u51CF\u4E00"),m("br"),"\u5F53\u524D\u503C\uFF1A",e.value,"\u53CC\u500D\u503C\uFF1A",t,g(()=>j(t.get(),()=>m("div").append("\u4F60\u70B9\u4E86\u4E00\u4E0B")),[t]),k(()=>e.value.get()>10,()=>m("p").append("count > 10 \u65F6\u663E\u793A"),[e.value]))});var Y=H({props:{items:{transform:U(),shadow:["OptionA","OptionB","OptionC"]},value:{transform:Number,uploadable:!0,required:!0}},events:[E("select",{template:0}),E("toggleState",{template:!1})],styles:[w(".item").backgroundColor("blue").color("white"),w(".flexdown").display("flex").flexDirection("column")]},(e,t,n)=>{let r=x(!1),o=a=>{e.value.set(a),r.set(!1),n("select",e.value.get())};return r.event.subcribe(a=>n("toggleState",a)),m("div").class("flexdown").ariaAtomic("false").append(m("span").class("item").use(w().backgroundColor("red")).append(g(()=>e.items.get()[e.value.get()],[e.items,e.value])).on("click",()=>r.set(!r.get())),t(),k(r,()=>m("div").class("flexdown").append(g(()=>e.items.get().map((a,s)=>m("span").class("item").append(a).on("click",()=>o(s))),[e.items]))))});var ee={Counter:X,Selector:Y};window.__NINE_ENV__?.mode==="development"&&console.warn("[Nine-9] Initialized in development mode.");0&&(module.exports={$,EventSubcriber,assets,attachUUID,camelToHyphen,createArray,createComponent,defineEvent,examples,flagment,hostdown,hyphenToCamel,normalizePropertyDescriptor,pipeExtract,putIn,rawProperty,render,styleSet,sync,tree,typedIsArray,validateStore,when,wrap});
+"use strict";var $=Object.defineProperty;var te=Object.getOwnPropertyDescriptor;var re=Object.getOwnPropertyNames;var ne=Object.prototype.hasOwnProperty;var L=(e,t)=>{for(var n in t)$(e,n,{get:t[n],enumerable:!0})},oe=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of re(t))!ne.call(e,o)&&o!==n&&$(e,o,{get:()=>t[o],enumerable:!(r=te(t,o))||r.enumerable});return e};var se=e=>oe($({},"__esModule",{value:!0}),e);var ue={};L(ue,{$:()=>B,EventSubcriber:()=>S,assets:()=>Z,attachUUID:()=>W,camelToHyphen:()=>h,createArray:()=>j,createComponent:()=>H,defineEvent:()=>E,examples:()=>ee,flagment:()=>J,hostdown:()=>V,hyphenToCamel:()=>ae,normalizePropertyDescriptor:()=>M,pipeExtract:()=>N,putIntoArray:()=>U,rawProperty:()=>q,render:()=>P,styleSet:()=>w,sync:()=>g,tree:()=>m,typedIsArray:()=>pe,validateStore:()=>z,when:()=>k,wrap:()=>b});module.exports=se(ue);var S=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 h(e){return e.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`)}function ae(e){return e.replace(/-([a-z])/g,t=>t[1].toUpperCase())}function pe(e){return Array.isArray(e)}function U(e){return[...Array.isArray(e)?e:[e]]}function j(e,t){return new Array(e).fill(0).map(t)}var O=Symbol("HostTreeFlag"),_=Symbol("ComponentInstanceFlag"),y=Symbol("WrapperFlag");function R(e,t){return Object.assign(e,{[t]:!0})}function d(e,t){return e!=null&&typeof e=="object"&&Object.hasOwn(e,t)&&e[t]===!0}function m(e){let t=typeof e=="string"?document.createElement(e):e,n={treeUpdated:new S,attributeUpdated:new S,initialized:new S,preventEvent:new S},r=new Proxy(R({element:t,hooks:n,append(...o){for(let s of o)if(d(s,y)){let p=[],a=new Comment("Tree anchor");t.appendChild(a);let i=l=>{let f=[...Array.isArray(l)?l:[l]].reverse(),u=[];for(let c of f){let T=P(c);u.push(T),t.insertBefore(T.element,a.nextSibling)}for(let c of p)c.element.remove();n.treeUpdated.emit(u,p),p=u};s.event.subcribe(i),i(s.get())}else{let p=s;for(let a of U(p))t.appendChild(P(a).element)}return r},use(o){if(t instanceof HTMLElement){let s=p=>{for(let[a,i]of Object.entries(p))t.style.setProperty(h(String(a)),i)};d(o,y)?(o.event.subcribe(p=>s(p.rules)),s(o.get().rules)):s(o.rules)}return r},on(o,s,p){return t instanceof EventTarget&&t.addEventListener(o,a=>{let i=n.event.emit(o,s);i&&!i.some(Boolean)&&s(a)},p),r}},O),{get(o,s,p){return Reflect.has(o,s)?Reflect.get(o,s,p):a=>{let i=(l,f)=>{Object.hasOwn(t,s)&&(t[s]=l),t instanceof Element&&t.setAttribute(h(s),String(l)),n.attributeUpdated.emit(s,l,f)};return d(a,y)?(a.event.subcribe(i),i(a.get(),a.get())):i(a,a),r}}});return Promise.resolve().then(()=>n.initialized.emit(r)),r}var C=class extends Error{},D=class extends Error{},A=class extends Error{},K=class extends Error{},I=class extends Error{};function b(e,t){let n=["push","pop","shift","unshift","splice","sort","reverse"],r=i=>{if(!Array.isArray(i))return i;let{proxy:l,revoke:f}=Proxy.revocable(i,{get(u,c,T){if(n.includes(c)){let v=Reflect.get(u,c,T);return typeof v=="function"?(...Q)=>{let x=a.get();if(Array.isArray(x)){x=[...x];let F=v.call(u,...Q);return a.event.emit(a.get(),x),F}}:Reflect.get(u,c,T)}else return Reflect.get(u,c,T)},set(u,c,T,v){if(Reflect.get(u,c,v)!==T){let x=a.get();if(Array.isArray(x)){x=[...x];let F=Reflect.set(u,c,T,v);return a.event.emit(a.get(),x),F}}return Reflect.set(u,c,T,v)}});return s=f,l},o=new S,s=null,p=r(e),a=R({get(){return p},set(i){if(p!==i){let l=p;Array.isArray(l)&&s?(l=[...l],s(),p=r(i)):p=i,this.event.emit(i,l)}},updateOnly(){this.event.emit(this.get(),this.get())},event:o},y);return{...a,...t??{}}}function g(e,t=[]){let n=b(e()),r=()=>{let o=e();n.get()!==o&&n.set(o)};for(let o of t)d(o,y)&&o.event.subcribe(r);return n}function k(e,t,n=[]){return g(()=>{let r;return typeof e=="function"?r=e():r=e.get(),[r?t():null]},[...n,...d(e,y)?[e]:[]])}function q(){return e=>e}function M(e){return Object.assign({validate:()=>!0,transform:t=>t,shadow:null,required:!1,downloadable:!0,uploadable:!1},e)}function z(e){for(let t in e){let n=e[t];if(n.shadow){if(n.required)throw new A(`The required property ${t} can't have a shadow.`);if(n.validate&&!n.validate(n.shadow))throw new C(`The shadow of ${t} can't pass the validation.`)}}}function V(e,t){e||(e={});let n={};for(let r in t){let o=M(t[r]),s=a=>{if(d(n[r],y))n[r].set(a);else{let i=b(a);n[r]=i,i.event.subcribe(l=>{if(!(!d(e[r],y)||!d(n[r],y))&&n[r].get()!==e[r].get()){if(!o.uploadable)throw new K(`Property ${r} isn't uploadable but being set.`);e[r].set(l)}})}},p=(a,i)=>{if(!i&&!o.downloadable){console.warn(`Property ${r} isn't downloadable but being emitted.`);return}if(!o.validate(a))throw new C(`The input value of ${r} can't pass the validation.`);s(o.transform(a))};if(!Object.hasOwn(e,r)){if(o.required)throw new D(`Missing a required property ${r}.`);s(o.shadow);continue}d(e[r],y)?(e[r].event.subcribe(a=>p(a,!1)),p(e[r].get(),!0)):p(e[r],!0)}return n}function N(e){return typeof e=="function"?()=>b(e()):d(e,y)?N(e):()=>b(e)}function P(e){let t;if(e instanceof Node)t=m(e);else if(typeof e=="string"||typeof e=="number"||typeof e=="boolean"||typeof e=="bigint")t=m(new Text(String(e)));else if(d(e,_))t=e.$;else if(e==null)t=m(new Comment("Empty tree context"));else if(d(e,O))t=e;else throw new I(`Failed to render ${e} into a Node.`);return t}function B(e){return e}function J(e){return`nine_${e.replaceAll("-","_")}`}function W(e,t){for(let n of[e,...e.childNodes])n instanceof HTMLElement&&(n.dataset[J(t)]="true"),n!==e&&n.childNodes.length>0&&W(n,t);return e}function H(e,t){z(e.props??{});let n=Object.fromEntries(Object.entries(e.props??{}).map(([p,a])=>[p,M(a)])),r=crypto.randomUUID(),o=J(r);if(e.styles)for(let p of e.styles)p.apply(`[data-${o}="true"]`);return Object.assign((p,a)=>{let i=t(V(p,n),N(a),(f,u)=>{let c=e.events?.find(T=>T.name===f);if(!c)throw new TypeError(`No events named ${f} to emit.`);l.element.dispatchEvent(new CustomEvent(f,{detail:u,bubbles:c.bubbleable,cancelable:!1}))}),l=P(i);return W(l.element,r),l.hooks.treeUpdated.subcribe(f=>f.forEach(u=>W(u.element,r))),R({mount(f){let u=typeof f=="string"?[...document.querySelectorAll(f)]:[f];for(let c of u)c.appendChild(l.element)},on(f,u){return l.on(f,c=>c instanceof CustomEvent?u(c.detail):null),this},$:l},_)},{props:n,events:e.events})}function w(e){let t={},n=new Proxy({rules:t,selector:e,apply(r){let o=document.createElement("style");document.head.appendChild(o),o.textContent=`${this.selectorString(r)}{${this.ruleString()}}`},ruleString(){return Object.entries(t).map(([r,o])=>`${h(String(r))}:${o};`).join("")},selectorString(r){return(this.selector||"")+(r||"")||"*"}},{get(r,o,s){return Reflect.has(r,o)?Reflect.get(r,o,s):p=>(t[o]=String(p),n)}});return n}function E(e,t){return{name:e,...t??{}}}var Z={};L(Z,{logo:()=>G});var G={};L(G,{default:()=>le});var le='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 X=H({props:{value:{validate:Number.isInteger,transform:Number,required:!1,shadow:0,downloadable:!0,uploadable:!0}},events:[E("up",{template:{arg1:0,arg2:!1},bubbleable:!0}),E("down",{template:{arg3:"sb",arg4:Symbol()},bubbleable:!0})]},e=>{let t=g(()=>e.value.get()*2,[e.value]);return m("div").use(w().fontSize("20px").padding("10px")).append("\u6572\u6728\u9C7C",m("br"),m("button").on("click",()=>e.value.set(e.value.get()+1)).append("\u70B9\u51FB\u52A0\u4E00"),m("button").on("click",()=>e.value.set(e.value.get()-1)).append("\u70B9\u51FB\u51CF\u4E00"),m("br"),"\u5F53\u524D\u503C\uFF1A",e.value,"\u53CC\u500D\u503C\uFF1A",t,g(()=>j(t.get(),()=>m("div").append("\u4F60\u70B9\u4E86\u4E00\u4E0B")),[t]),k(()=>e.value.get()>10,()=>m("p").append("count > 10 \u65F6\u663E\u793A"),[e.value]))});var Y=H({props:{items:{transform:q(),shadow:["OptionA","OptionB","OptionC"]},value:{transform:Number,uploadable:!0,required:!0}},events:[E("select",{template:0}),E("toggleState",{template:!1})],styles:[w(".item").backgroundColor("blue").color("white"),w(".flexdown").display("flex").flexDirection("column")]},(e,t,n)=>{let r=b(!1),o=s=>{e.value.set(s),r.set(!1),n("select",e.value.get())};return r.event.subcribe(s=>n("toggleState",s)),m("div").class("flexdown").ariaAtomic("false").append(m("span").class("item").use(w().backgroundColor("red")).append(g(()=>e.items.get()[e.value.get()],[e.items,e.value])).on("click",()=>r.set(!r.get())),t(),k(r,()=>m("div").class("flexdown").append(g(()=>e.items.get().map((s,p)=>m("span").class("item").append(s).on("click",()=>o(p))),[e.items]))))});var ee={Counter:X,Selector:Y};window.__NINE_ENV__?.mode==="development"&&console.warn("[Nine-9] Initialized in development mode.");0&&(module.exports={$,EventSubcriber,assets,attachUUID,camelToHyphen,createArray,createComponent,defineEvent,examples,flagment,hostdown,hyphenToCamel,normalizePropertyDescriptor,pipeExtract,putIntoArray,rawProperty,render,styleSet,sync,tree,typedIsArray,validateStore,when,wrap});

package/package.json

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