nine-9 1.8.0 → 1.8.1

package/dist/index.js

@@ -1 +1,672 @@
-"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});
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  $: () => $,
+  EventSubcriber: () => EventSubcriber,
+  assets: () => assets_exports,
+  attachUUID: () => attachUUID,
+  camelToHyphen: () => camelToHyphen,
+  createArray: () => createArray,
+  createComponent: () => createComponent,
+  defineEvent: () => defineEvent,
+  examples: () => examples_default,
+  flagment: () => flagment,
+  hostdown: () => hostdown,
+  hyphenToCamel: () => hyphenToCamel,
+  normalizePropertyDescriptor: () => normalizePropertyDescriptor,
+  pipeExtract: () => pipeExtract,
+  putIntoArray: () => putIntoArray,
+  rawProperty: () => rawProperty,
+  render: () => render,
+  styleSet: () => styleSet,
+  sync: () => sync,
+  tree: () => tree,
+  typedIsArray: () => typedIsArray,
+  validateStore: () => validateStore,
+  when: () => when,
+  wrap: () => wrap
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/channel/event-subcriber.ts
+var EventSubcriber = class {
+  subcribers = [];
+  emitting = false;
+  subcribe(callback, once = false) {
+    this.subcribers.push({
+      callback,
+      once
+    });
+  }
+  emit(...data) {
+    if (this.emitting) return;
+    this.emitting = true;
+    const result = [];
+    for (const subcriber of this.subcribers) {
+      result.push(subcriber.callback(...data));
+    }
+    this.emitting = false;
+    return result;
+  }
+};
+
+// src/util/char.ts
+function camelToHyphen(str) {
+  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+}
+function hyphenToCamel(str) {
+  return str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+}
+
+// src/util/array.ts
+function typedIsArray(arr) {
+  return Array.isArray(arr);
+}
+function putIntoArray(data) {
+  return [...Array.isArray(data) ? data : [data]];
+}
+function createArray(length, filler) {
+  return new Array(length).fill(0).map(filler);
+}
+
+// src/constants/flags.ts
+var HOST_TREE = /* @__PURE__ */ Symbol("HostTreeFlag");
+var COMPONENT_INSTANCE = /* @__PURE__ */ Symbol("ComponentInstanceFlag");
+var WRAPPER = /* @__PURE__ */ Symbol("WrapperFlag");
+function attachFlag(data, flag) {
+  return Object.assign(data, { [flag]: true });
+}
+function matchFlag(data, flag) {
+  return data !== null && data !== void 0 && typeof data === "object" && Object.hasOwn(data, flag) && data[flag] === true;
+}
+
+// src/dom/tree.ts
+function tree(data) {
+  const element = typeof data === "string" ? document.createElement(data) : data;
+  const hooks = {
+    treeUpdated: new EventSubcriber(),
+    attributeUpdated: new EventSubcriber(),
+    initialized: new EventSubcriber(),
+    preventEvent: new EventSubcriber()
+  };
+  const context = new Proxy(attachFlag({
+    element,
+    hooks,
+    append(...children) {
+      for (const child of children) {
+        if (matchFlag(child, WRAPPER)) {
+          let oldChildren = [];
+          const baseAnchor = new Comment("Tree anchor");
+          element.appendChild(baseAnchor);
+          const update = (newTrees) => {
+            const normalizedTrees = [...Array.isArray(newTrees) ? newTrees : [newTrees]].reverse();
+            const newChildren = [];
+            for (const newTree of normalizedTrees) {
+              const child2 = render(newTree);
+              newChildren.push(child2);
+              element.insertBefore(child2.element, baseAnchor.nextSibling);
+            }
+            for (const oldChild of oldChildren) {
+              oldChild.element.remove();
+            }
+            hooks.treeUpdated.emit(newChildren, oldChildren);
+            oldChildren = newChildren;
+          };
+          child.event.subcribe(update);
+          update(child.get());
+        } else {
+          const children2 = child;
+          for (const child2 of putIntoArray(children2)) {
+            element.appendChild(render(child2).element);
+          }
+        }
+      }
+      return context;
+    },
+    use(styleSet2) {
+      if (element instanceof HTMLElement) {
+        const update = (rules) => {
+          for (const [key, value] of Object.entries(rules)) {
+            element.style.setProperty(camelToHyphen(String(key)), value);
+          }
+        };
+        if (matchFlag(styleSet2, WRAPPER)) {
+          styleSet2.event.subcribe((newData) => update(newData.rules));
+          update(styleSet2.get().rules);
+        } else {
+          update(styleSet2.rules);
+        }
+      }
+      return context;
+    },
+    on(key, handler, options) {
+      if (element instanceof EventTarget) {
+        element.addEventListener(key, (e) => {
+          const emitResult = hooks.preventEvent.emit(key, handler);
+          if (emitResult && !emitResult.some(Boolean)) {
+            handler(e);
+          }
+        }, options);
+      }
+      return context;
+    }
+  }, HOST_TREE), {
+    get(target, p, receiver) {
+      if (Reflect.has(target, p)) {
+        return Reflect.get(target, p, receiver);
+      } else {
+        return (data2) => {
+          const update = (newData, oldData) => {
+            if (Object.hasOwn(element, p)) {
+              element[p] = newData;
+            }
+            if (element instanceof Element) {
+              element.setAttribute(camelToHyphen(p), String(newData));
+            }
+            hooks.attributeUpdated.emit(p, newData, oldData);
+          };
+          if (matchFlag(data2, WRAPPER)) {
+            data2.event.subcribe(update);
+            update(data2.get(), data2.get());
+          } else {
+            update(data2, data2);
+          }
+          return context;
+        };
+      }
+    }
+  });
+  Promise.resolve().then(() => hooks.initialized.emit(context));
+  return context;
+}
+
+// src/exceptions/index.ts
+var ValidationFailed = class extends Error {
+};
+var MissingFieldError = class extends Error {
+};
+var ConflictionError = class extends Error {
+};
+var AccessError = class extends Error {
+};
+var BrokenRendererError = class extends Error {
+};
+
+// src/dom/reactive.ts
+function wrap(initialData, wrapperOptions) {
+  const arrayActions = ["push", "pop", "shift", "unshift", "splice", "sort", "reverse"];
+  const patch = (data) => {
+    if (!Array.isArray(data)) {
+      return data;
+    }
+    const { proxy, revoke: newRevoke } = Proxy.revocable(data, {
+      get(target, p, receiver) {
+        if (arrayActions.includes(p)) {
+          const originalMethod = Reflect.get(target, p, receiver);
+          if (typeof originalMethod === "function") {
+            return (...args) => {
+              let oldData = wrapper.get();
+              if (Array.isArray(oldData)) {
+                oldData = [...oldData];
+                const result = originalMethod.call(target, ...args);
+                wrapper.event.emit(wrapper.get(), oldData);
+                return result;
+              }
+            };
+          } else return Reflect.get(target, p, receiver);
+        } else {
+          return Reflect.get(target, p, receiver);
+        }
+      },
+      set(target, p, newValue, receiver) {
+        const oldValue = Reflect.get(target, p, receiver);
+        if (oldValue !== newValue) {
+          let oldData = wrapper.get();
+          if (Array.isArray(oldData)) {
+            oldData = [...oldData];
+            const result = Reflect.set(target, p, newValue, receiver);
+            wrapper.event.emit(wrapper.get(), oldData);
+            return result;
+          }
+        }
+        return Reflect.set(target, p, newValue, receiver);
+      }
+    });
+    oldRevoke = newRevoke;
+    return proxy;
+  };
+  const event = new EventSubcriber();
+  let oldRevoke = null;
+  let currentData = patch(initialData);
+  const wrapper = attachFlag({
+    get() {
+      return currentData;
+    },
+    set(newData) {
+      if (currentData !== newData) {
+        let oldData = currentData;
+        if (Array.isArray(oldData) && oldRevoke) {
+          oldData = [...oldData];
+          oldRevoke();
+          currentData = patch(newData);
+        } else {
+          currentData = newData;
+        }
+        ;
+        this.event.emit(newData, oldData);
+      }
+    },
+    updateOnly() {
+      this.event.emit(this.get(), this.get());
+    },
+    event
+  }, WRAPPER);
+  return { ...wrapper, ...wrapperOptions ?? {} };
+}
+function sync(effectRenderer, dependencies = []) {
+  const internalWrapper = wrap(effectRenderer());
+  const update = () => {
+    const newData = effectRenderer();
+    const currentData = internalWrapper.get();
+    const hasChanged = currentData !== newData;
+    if (hasChanged) {
+      internalWrapper.set(newData);
+    }
+  };
+  for (const dependency of dependencies) {
+    if (!matchFlag(dependency, WRAPPER)) continue;
+    dependency.event.subcribe(update);
+  }
+  return internalWrapper;
+}
+function when(condition, tree2, dependencies = []) {
+  return sync(() => {
+    let result;
+    if (typeof condition === "function") {
+      result = condition();
+    } else {
+      result = condition.get();
+    }
+    return [result ? tree2() : null];
+  }, [...dependencies, ...matchFlag(condition, WRAPPER) ? [condition] : []]);
+}
+
+// src/dom/property.ts
+function rawProperty() {
+  return (x) => x;
+}
+function normalizePropertyDescriptor(descriptor) {
+  return Object.assign({
+    validate: () => true,
+    transform: (x) => x,
+    shadow: null,
+    required: false,
+    downloadable: true,
+    uploadable: false
+  }, descriptor);
+}
+function validateStore(store) {
+  for (const propertyKey in store) {
+    const descriptor = store[propertyKey];
+    if (descriptor.shadow) {
+      if (descriptor.required) {
+        throw new ConflictionError(`The required property ${propertyKey} can't have a shadow.`);
+      }
+      if (descriptor.validate && !descriptor.validate(descriptor.shadow)) {
+        throw new ValidationFailed(`The shadow of ${propertyKey} can't pass the validation.`);
+      }
+    }
+  }
+}
+function hostdown(upstream, store) {
+  if (!upstream) upstream = {};
+  const downstream = {};
+  for (const propertyKey in store) {
+    const descriptor = normalizePropertyDescriptor(store[propertyKey]);
+    const setValue = (newValue) => {
+      if (matchFlag(downstream[propertyKey], WRAPPER)) {
+        downstream[propertyKey].set(newValue);
+      } else {
+        const wrapper = wrap(newValue);
+        downstream[propertyKey] = wrapper;
+        wrapper.event.subcribe((newData) => {
+          if (!matchFlag(upstream[propertyKey], WRAPPER) || !matchFlag(downstream[propertyKey], WRAPPER)) return;
+          if (downstream[propertyKey].get() === upstream[propertyKey].get()) return;
+          if (!descriptor.uploadable) throw new AccessError(`Property ${propertyKey} isn't uploadable but being set.`);
+          upstream[propertyKey].set(newData);
+        });
+      }
+    };
+    const update = (inputValue, firstSet) => {
+      if (!firstSet && !descriptor.downloadable) {
+        console.warn(`Property ${propertyKey} isn't downloadable but being emitted.`);
+        return;
+      }
+      if (!descriptor.validate(inputValue)) {
+        throw new ValidationFailed(`The input value of ${propertyKey} can't pass the validation.`);
+      }
+      setValue(descriptor.transform(inputValue));
+    };
+    if (!Object.hasOwn(upstream, propertyKey)) {
+      if (descriptor.required) {
+        throw new MissingFieldError(`Missing a required property ${propertyKey}.`);
+      }
+      setValue(descriptor.shadow);
+      continue;
+    }
+    if (matchFlag(upstream[propertyKey], WRAPPER)) {
+      upstream[propertyKey].event.subcribe((e) => update(e, false));
+      update(upstream[propertyKey].get(), true);
+    } else {
+      update(upstream[propertyKey], true);
+    }
+  }
+  return downstream;
+}
+
+// src/dom/slot.ts
+function pipeExtract(input) {
+  if (typeof input === "function") {
+    return () => wrap(input());
+  } else if (matchFlag(input, WRAPPER)) {
+    return pipeExtract(input);
+  } else return () => wrap(input);
+}
+
+// src/dom/component.ts
+function render(nodeTree) {
+  let result;
+  if (nodeTree instanceof Node) {
+    result = tree(nodeTree);
+  } else if (typeof nodeTree === "string" || typeof nodeTree === "number" || typeof nodeTree === "boolean" || typeof nodeTree === "bigint") {
+    result = tree(new Text(String(nodeTree)));
+  } else if (matchFlag(nodeTree, COMPONENT_INSTANCE)) {
+    result = nodeTree.$;
+  } else if (nodeTree === null || nodeTree === void 0) {
+    result = tree(new Comment("Empty tree context"));
+  } else if (matchFlag(nodeTree, HOST_TREE)) {
+    result = nodeTree;
+  } else {
+    throw new BrokenRendererError(`Failed to render ${nodeTree} into a Node.`);
+  }
+  return result;
+}
+function $(data) {
+  return data;
+}
+function flagment(uuid) {
+  return `nine_${uuid.replaceAll("-", "_")}`;
+}
+function attachUUID(root, uuid) {
+  for (const node of [root, ...root.childNodes]) {
+    if (node instanceof HTMLElement) {
+      node.dataset[flagment(uuid)] = "true";
+    }
+    if (node !== root && node.childNodes.length > 0) {
+      attachUUID(node, uuid);
+    }
+  }
+  return root;
+}
+function createComponent(options, internalRenderer) {
+  validateStore(options.props ?? {});
+  const propStore = Object.fromEntries(
+    Object.entries(options.props ?? {}).map(([key, value]) => [
+      key,
+      normalizePropertyDescriptor(value)
+    ])
+  );
+  const rawComponentUUID = crypto.randomUUID();
+  const flagmentedUUID = flagment(rawComponentUUID);
+  if (options.styles) {
+    for (const styleSet2 of options.styles) {
+      styleSet2.apply(`[data-${flagmentedUUID}="true"]`);
+    }
+  }
+  const entryRenderer = (props, slot) => {
+    const nodeTree = internalRenderer(hostdown(props, propStore), pipeExtract(slot), (key, data) => {
+      const targetEvent = options.events?.find((e) => e.name === key);
+      if (!targetEvent) throw new TypeError(`No events named ${key} to emit.`);
+      hostTree.element.dispatchEvent(new CustomEvent(key, {
+        detail: data,
+        bubbles: targetEvent.bubbleable,
+        cancelable: false
+      }));
+    });
+    const hostTree = render(nodeTree);
+    attachUUID(hostTree.element, rawComponentUUID);
+    hostTree.hooks.treeUpdated.subcribe((newTrees) => newTrees.forEach((tree2) => attachUUID(tree2.element, rawComponentUUID)));
+    return attachFlag({
+      mount(to) {
+        const targets = typeof to === "string" ? [...document.querySelectorAll(to)] : [to];
+        for (const target of targets) {
+          target.appendChild(hostTree.element);
+        }
+      },
+      on(key, handler) {
+        hostTree.on(key, (event) => event instanceof CustomEvent ? handler(event.detail) : null);
+        return this;
+      },
+      $: hostTree
+    }, COMPONENT_INSTANCE);
+  };
+  return Object.assign(entryRenderer, {
+    props: propStore,
+    events: options.events
+  });
+}
+
+// src/dom/style.ts
+function styleSet(selector) {
+  const rules = {};
+  const context = new Proxy({
+    rules,
+    selector,
+    apply(selector2) {
+      const style = document.createElement("style");
+      document.head.appendChild(style);
+      style.textContent = `${this.selectorString(selector2)}{${this.ruleString()}}`;
+    },
+    ruleString() {
+      return Object.entries(rules).map(([key, value]) => `${camelToHyphen(String(key))}:${value};`).join("");
+    },
+    selectorString(selector2) {
+      return (this.selector || "") + (selector2 || "") || "*";
+    }
+  }, {
+    get(target, p, receiver) {
+      if (Reflect.has(target, p)) {
+        return Reflect.get(target, p, receiver);
+      } else {
+        return (data) => {
+          rules[p] = String(data);
+          return context;
+        };
+      }
+    }
+  });
+  return context;
+}
+
+// src/dom/event.ts
+function defineEvent(name, options) {
+  return { name, ...options ?? {} };
+}
+
+// src/assets/index.ts
+var assets_exports = {};
+__export(assets_exports, {
+  logo: () => logo_exports
+});
+
+// src/assets/logo.svg
+var logo_exports = {};
+__export(logo_exports, {
+  default: () => logo_default
+});
+var logo_default = '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>';
+
+// src/examples/Counter.ts
+var Counter_default = createComponent({
+  //创建组件
+  props: {
+    value: {
+      //参数名
+      validate: Number.isInteger,
+      //验证器
+      transform: Number,
+      //转换器
+      required: false,
+      //是否必填
+      shadow: 0,
+      //默认值
+      downloadable: true,
+      //（上游→下游）
+      uploadable: true
+      //（下游→上游），v-model双向绑定
+    }
+  },
+  events: [
+    defineEvent("up", {
+      template: {
+        arg1: 0,
+        arg2: false
+      },
+      bubbleable: true
+    }),
+    defineEvent("down", {
+      template: {
+        arg3: "sb",
+        arg4: /* @__PURE__ */ Symbol()
+      },
+      bubbleable: true
+    })
+  ]
+}, (props) => {
+  const doubled = sync(() => props.value.get() * 2, [props.value]);
+  return tree("div").use(styleSet().fontSize("20px").padding("10px")).append(
+    "\u6572\u6728\u9C7C",
+    tree("br"),
+    tree("button").on("click", () => props.value.set(props.value.get() + 1)).append("\u70B9\u51FB\u52A0\u4E00"),
+    tree("button").on("click", () => props.value.set(props.value.get() - 1)).append("\u70B9\u51FB\u51CF\u4E00"),
+    tree("br"),
+    "\u5F53\u524D\u503C\uFF1A",
+    $(props.value),
+    //引用响应式的值，类似模板语法{{ count }}
+    "\u53CC\u500D\u503C\uFF1A",
+    $(doubled),
+    $(sync(
+      //只要是能渲染的东西，就能进行响应式引用
+      () => createArray(
+        doubled.get(),
+        () => tree("div").append("\u4F60\u70B9\u4E86\u4E00\u4E0B")
+      ),
+      [doubled]
+    )),
+    //列表渲染v-for
+    when(
+      () => props.value.get() > 10,
+      () => tree("p").append("count > 10 \u65F6\u663E\u793A"),
+      [props.value]
+    )
+    //条件渲染v-if
+  );
+});
+
+// src/examples/Selector.ts
+var Selector_default = createComponent({
+  props: {
+    items: {
+      transform: rawProperty(),
+      shadow: ["OptionA", "OptionB", "OptionC"]
+    },
+    value: {
+      transform: Number,
+      uploadable: true,
+      required: true
+    }
+  },
+  events: [
+    defineEvent("select", { template: 0 }),
+    defineEvent("toggleState", { template: false })
+  ],
+  styles: [
+    styleSet(".item").backgroundColor("blue").color("white"),
+    styleSet(".flexdown").display("flex").flexDirection("column")
+  ]
+}, (props, slot, emit) => {
+  const showing = wrap(false);
+  const select = (index) => {
+    props.value.set(index);
+    showing.set(false);
+    emit("select", props.value.get());
+  };
+  showing.event.subcribe((e) => emit("toggleState", e));
+  return tree("div").class("flexdown").ariaAtomic("false").append(
+    tree("span").class("item").use(styleSet().backgroundColor("red")).append($(sync(() => props.items.get()[props.value.get()], [props.items, props.value]))).on("click", () => showing.set(!showing.get())),
+    slot(),
+    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]))
+      )
+    )
+  );
+});
+
+// src/examples/index.ts
+var examples_default = { Counter: Counter_default, Selector: Selector_default };
+
+// src/index.ts
+if (window.__NINE_ENV__?.mode === "development") {
+  console.warn("[Nine-9] Initialized in development mode.");
+}
+// Annotate the CommonJS export names for ESM import in node:
+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
+});
+//# sourceMappingURL=index.js.map