airx 0.2.0 → 0.2.2

package/output/umd/index.js

@@ -0,0 +1,1229 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.airx = {}));
+})(this, (function (exports) { 'use strict';
+
+  const globalContext$1 = {
+      current: null
+  };
+  function useContext() {
+      if (globalContext$1.current == null) {
+          throw new Error('Unable to find a valid component context');
+      }
+      return globalContext$1.current;
+  }
+  const onMounted = (listener) => {
+      return useContext().onMounted(listener);
+  };
+  const onUnmounted = (listener) => {
+      return useContext().onUnmounted(listener);
+  };
+  const inject = (key) => {
+      return useContext().inject(key);
+  };
+  const provide = (key, value) => {
+      return useContext().provide(key, value);
+  };
+
+  const isDev = localStorage.getItem('airx-dev');
+  function createLogger(name) {
+      function getPrintPrefix() {
+          const date = new Date().toLocaleString();
+          return `[${date}][${name}]`;
+      }
+      function debug(...args) {
+          if (isDev)
+              console.log(getPrintPrefix(), ...args);
+      }
+      return { debug };
+  }
+
+  const airxElementSymbol = Symbol('airx-element');
+  const airxReactiveDependenciesSymbol = Symbol('airx-dependencies');
+
+  /** FIXME: 污染全局总是不好的 */
+  const globalContext = {
+      dependencies: new Set()
+  };
+  function createCollector() {
+      const newDependencies = new Set();
+      return {
+          clear: () => newDependencies.clear(),
+          complete: () => [...newDependencies.values()],
+          collect: (process) => {
+              const beforeDeps = globalContext.dependencies;
+              globalContext.dependencies = newDependencies;
+              const result = process();
+              globalContext.dependencies = beforeDeps;
+              return result;
+          }
+      };
+  }
+  function triggerRef(ref) {
+      requestAnimationFrame(() => {
+          const deps = Reflect.get(ref, airxReactiveDependenciesSymbol);
+          for (const dep of deps) {
+              dep();
+          }
+      });
+  }
+  function createRefObject(value) {
+      const object = Object.create({ value });
+      Reflect.defineProperty(object, airxReactiveDependenciesSymbol, {
+          configurable: false,
+          enumerable: false,
+          writable: true,
+          value: new Set()
+      });
+      return object;
+  }
+  function watchSignal(ref, listener) {
+      const deps = Reflect.get(ref, airxReactiveDependenciesSymbol);
+      deps.add(listener);
+      return () => { deps.delete(listener); };
+  }
+  function createSignal(obj) {
+      const ref = createRefObject(obj);
+      if (!globalContext.dependencies.has(ref)) {
+          globalContext.dependencies.add(ref);
+      }
+      let value = ref.value;
+      Reflect.defineProperty(ref, 'value', {
+          get() {
+              if (!globalContext.dependencies.has(ref)) {
+                  globalContext.dependencies.add(ref);
+              }
+              return value;
+          },
+          set(newValue) {
+              value = newValue;
+              triggerRef(ref);
+              return value;
+          }
+      });
+      return ref;
+  }
+
+  /**
+   * createElement 是用于创建 AirxElement 的工具函数
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function createElement(type, props, ...children) {
+      return {
+          type,
+          props: {
+              ...props,
+              children
+          },
+          [airxElementSymbol]: true
+      };
+  }
+  function isValidElement(element) {
+      return typeof element === 'object'
+          && element !== null
+          && Reflect.get(element, airxElementSymbol);
+  }
+  function Fragment(props) {
+      return () => props.children;
+  }
+  function component(comp) {
+      return comp;
+  }
+
+  class InnerAirxComponentContext {
+      instance;
+      disposers = new Set();
+      providedMap = new Map();
+      injectedMap = new Map();
+      mountListeners = new Set();
+      unmountedListeners = new Set();
+      triggerMounted() {
+          this.mountListeners.forEach(listener => {
+              let disposer = undefined;
+              try {
+                  disposer = listener();
+              }
+              catch (err) {
+                  console.error(err, listener);
+              }
+              if (typeof disposer === 'function') {
+                  this.addDisposer(disposer);
+              }
+          });
+          // 生命周期只会调用一次
+          this.mountListeners.clear();
+      }
+      triggerUnmounted() {
+          // 递归的调用子 child 的 Unmounted
+          if (this.instance?.child != null) {
+              this.instance.child.context.triggerUnmounted();
+          }
+          // 处理自己
+          this.unmountedListeners.forEach(listener => {
+              try {
+                  listener();
+              }
+              catch (err) {
+                  console.error(err, listener);
+              }
+          });
+          // 处理兄弟节点
+          if (this.instance?.sibling != null) {
+              this.instance.sibling.context.triggerUnmounted();
+          }
+          this.dispose();
+      }
+      onMounted(listener) {
+          this.mountListeners.add(listener);
+      }
+      onUnmounted(listener) {
+          this.unmountedListeners.add(listener);
+      }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      provide(key, value) {
+          this.providedMap.set(key, value);
+          return v => this.providedMap.set(key, v);
+      }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      inject(key) {
+          const getProvideValueForParent = (instance, key) => {
+              if (instance && instance.context) {
+                  const value = instance.context.providedMap.get(key);
+                  if (value != undefined)
+                      return value;
+                  if (instance.parent)
+                      return getProvideValueForParent(instance.parent, key);
+              }
+              return undefined;
+          };
+          const currentParentValue = getProvideValueForParent(this.instance.parent, key);
+          this.injectedMap.set(key, currentParentValue); // 更新本地值
+          return this.injectedMap.get(key);
+      }
+      addDisposer(...disposers) {
+          disposers.forEach(disposer => {
+              this.disposers.add(disposer);
+          });
+      }
+      dispose() {
+          this.disposers.forEach((disposer) => {
+              try {
+                  disposer();
+              }
+              catch (err) {
+                  // eslint-disable-next-line no-console
+                  console.error(err, disposer);
+              }
+          });
+          this.disposers.clear();
+          this.injectedMap.clear();
+          this.providedMap.clear();
+          this.mountListeners.clear();
+          this.unmountedListeners.clear();
+      }
+      /**
+       * 当 context 传递给外部消费时，隐藏内部实现，仅暴露接口定义的内容
+       * @returns 和 AirxComponentContext 接口完全一致的对象
+       */
+      getSafeContext() {
+          return {
+              inject: k => this.inject(k),
+              provide: (k, v) => this.provide(k, v),
+              onMounted: listener => this.onMounted(listener),
+              onUnmounted: listener => this.onUnmounted(listener)
+          };
+      }
+  }
+  /**
+     * 更新 children
+     * @param parentInstance  当前正在处理的组件的实例
+     * @param children  当前组件的子节点
+     */
+  function reconcileChildren(appContext, parentInstance, childrenElementArray) {
+      const logger = createLogger('reconcileChildren');
+      logger.debug('reconcileChildren', parentInstance, childrenElementArray);
+      // parentInstance ←-------- 
+      //   |    ↑                ↑
+      // child parent          parent
+      //   ↓    |                |
+      // instance  -sibling→  instance -→ ....
+      /**
+       * 内部通过 index 生成 element 的 key
+       * 通过前缀来避免和用户手动设置的 key 发生冲突
+       * @param index
+       * @returns 生成的 key
+       */
+      function getInnerElementIndexKey(index) {
+          return `airx-element-inner-key:${index}`;
+      }
+      /**
+       * 将 children 实例链转成 Map 便于此处消费
+       * @param firstChild children 实例的第一个元素
+       * @returns 从 firstChild 开始之后的所有 sibling 实例组成的 Map
+       */
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      function getChildrenInstanceMap(firstChild) {
+          // 不使用递归是因为递归容易爆栈
+          let nextIndex = 0;
+          let nextChild = firstChild;
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const map = new Map();
+          while (nextChild) {
+              /* 如果有 key，则将 key 作为 map key，否则将 index 作为 key */
+              if (nextChild.element?.props.key != null) {
+                  map.set(nextChild.element?.props.key, nextChild);
+              }
+              else {
+                  map.set(getInnerElementIndexKey(nextIndex), nextChild);
+              }
+              nextChild = nextChild.sibling;
+              nextIndex += 1;
+          }
+          return map;
+      }
+      const newChildrenInstanceArray = [];
+      const childrenInstanceMap = getChildrenInstanceMap(parentInstance.child);
+      function getChildInstance(child, index) {
+          if (child.props.key != null) {
+              const key = child.props.key;
+              const instance = childrenInstanceMap.get(key) || null;
+              return [instance, () => childrenInstanceMap.delete(key)];
+          }
+          const innerKey = getInnerElementIndexKey(index);
+          const instance = childrenInstanceMap.get(innerKey) || null;
+          return [instance, () => childrenInstanceMap.delete(innerKey)];
+      }
+      /** 是否复用实例 */
+      function isReuseInstance(instance, nextElement) {
+          for (const plugin of appContext.plugins) {
+              if (typeof plugin.isReuseInstance === 'function') {
+                  const result = plugin.isReuseInstance(instance, nextElement);
+                  // 任意一个插件要求不复用就不复用
+                  if (result === false)
+                      return false;
+              }
+          }
+          return true;
+      }
+      function updateMemoProps(instance) {
+          if (instance.element == null)
+              return;
+          if (instance.memoProps == null)
+              instance.memoProps = {};
+          // 简单来说就是以下几件事情
+          // 始终保持 props 的引用不变
+          // 1. 创建一个新对象来保存 beforeElement props 的状态
+          // 2. 将新的 element 上的 props 引用设置为之前的 props
+          // 3. 将新的 element 上的 props 更新到之前的 props 上去
+          if (instance.memoProps != null) {
+              for (const key in instance.memoProps) {
+                  delete instance.memoProps[key];
+              }
+          }
+          // 将新的 props 更新上去
+          for (const key in instance.element.props) {
+              const value = instance.element.props[key];
+              instance.memoProps[key] = value;
+          }
+      }
+      function isNeedReRender(instance) {
+          for (const plugin of appContext.plugins) {
+              if (typeof plugin.isReRender === 'function') {
+                  const result = plugin.isReRender(instance);
+                  // 任意一个插件要求重新渲染就重新渲染
+                  if (result === true)
+                      return true;
+              }
+          }
+          return false;
+      }
+      function getElementNamespace(element) {
+          const ns = Object.keys(element.props)
+              .filter(key => (key === 'xmlns' || key.startsWith('xmlns:')))
+              .sort((a, b) => a.length - b.length);
+          if (ns.length > 1) {
+              console.log('airx currently does not support setting multiple xmlns');
+              return '';
+          }
+          if (ns.some(i => i.startsWith('xmlns:'))) {
+              console.log('airx does not currently support setting named namespaces，only supports default');
+              return '';
+          }
+          // 原则上来说 html 仅支持设置默认的 namespace
+          return element.props[ns[0]];
+      }
+      // 依次遍历 child 并和 instance 对比
+      for (let index = 0; index < childrenElementArray.length; index++) {
+          const element = childrenElementArray[index];
+          const [instance, seize] = getChildInstance(element, index);
+          if (instance && isReuseInstance(instance, element)) {
+              seize(); // 从 childrenInstanceMap 中释放
+              newChildrenInstanceArray.push(instance);
+              instance.beforeElement = instance.element;
+              instance.element = element;
+              updateMemoProps(instance);
+              // 如果父组件更新了，子组件全部都要更新
+              if (instance.needReRender !== true && typeof element.type === 'function') {
+                  instance.needReRender = parentInstance.needReRender || isNeedReRender(instance);
+              }
+          }
+          else {
+              const context = new InnerAirxComponentContext();
+              const elementNamespace = getElementNamespace(element);
+              const instance = { element, context, elementNamespace };
+              newChildrenInstanceArray.push(instance);
+              context.instance = instance;
+              updateMemoProps(instance);
+              // 添加 ref 处理
+              if ('ref' in instance.memoProps) {
+                  context.onMounted(() => {
+                      if (instance.domRef) { // 如果组件有自己的 dom
+                          instance.memoProps.ref.value = instance.domRef;
+                          return () => instance.memoProps.ref.value = null;
+                      }
+                  });
+              }
+          }
+      }
+      // 新的 node
+      for (let index = 0; index < newChildrenInstanceArray.length; index++) {
+          const instance = newChildrenInstanceArray[index];
+          // 确保链的干净
+          instance.parent = parentInstance;
+          if (index === 0)
+              parentInstance.child = instance;
+          if (index > 0)
+              newChildrenInstanceArray[index - 1].sibling = instance;
+          if (index === newChildrenInstanceArray.length - 1)
+              delete instance.sibling;
+          // 处理 ElementNS: 继承父级 namespace
+          if (!instance.elementNamespace && instance.parent?.elementNamespace) {
+              // SVG 中 foreignObject 代表外来对象，起到隔离 namespace 的作用
+              if (instance.parent.element?.type !== 'foreignObject') {
+                  instance.elementNamespace = instance.parent.elementNamespace;
+              }
+          }
+      }
+      // 剩余的是需要移除的
+      if (childrenInstanceMap.size > 0) {
+          if (parentInstance.deletions == null) {
+              parentInstance.deletions = new Set();
+          }
+          childrenInstanceMap.forEach(instance => {
+              parentInstance.deletions?.add(instance);
+          });
+      }
+      logger.debug('parentInstance', parentInstance);
+  }
+  /**
+   * 处理单个 instance
+   * @param instance 当前处理的实例
+   * @returns 返回下一个需要处理的 instance
+   */
+  function performUnitOfWork(pluginContext, instance, onUpdateRequire) {
+      const element = instance.element;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      function childrenAsElements(children) {
+          const childrenAsArray = Array.isArray(children) ? children : [children];
+          function isComment(element) {
+              if (element === '')
+                  return true;
+              if (element == null)
+                  return true;
+              if (element === false)
+                  return true;
+              return false;
+          }
+          return childrenAsArray.flat(3).map(element => {
+              if (isValidElement(element))
+                  return element;
+              const elementType = isComment(element) ? 'comment' : 'text';
+              const textContent = element === '' ? 'empty-string' : String(element);
+              return createElement(elementType, { textContent });
+          });
+      }
+      // airx 组件
+      if (typeof element?.type === 'function') {
+          const collector = createCollector();
+          if (instance.render == null) {
+              const component = element.type;
+              const beforeContext = globalContext$1.current;
+              globalContext$1.current = instance.context.getSafeContext();
+              const componentReturnValue = collector.collect(() => component(instance.memoProps));
+              if (typeof componentReturnValue !== 'function') {
+                  throw new Error('Component must return a render function');
+              }
+              globalContext$1.current = beforeContext;
+              instance.render = componentReturnValue;
+              const children = collector.collect(() => instance.render?.());
+              reconcileChildren(pluginContext, instance, childrenAsElements(children));
+          }
+          if (instance.needReRender) {
+              const children = collector.collect(() => instance.render?.());
+              reconcileChildren(pluginContext, instance, childrenAsElements(children));
+              delete instance.needReRender;
+          }
+          // 处理依赖触发的更新
+          collector.complete().forEach(ref => {
+              instance.context.addDisposer(watchSignal(ref, () => {
+                  instance.needReRender = true;
+                  onUpdateRequire?.(instance);
+              }));
+          });
+      }
+      // 浏览器组件/标签
+      if (typeof element?.type === 'string') {
+          if ('children' in element.props && Array.isArray(element.props.children)) {
+              reconcileChildren(pluginContext, instance, childrenAsElements(element.props.children));
+          }
+      }
+      // 优先处理 child
+      if (instance.child) {
+          return instance.child;
+      }
+      /**
+       * 递归向上查找可用的兄弟 instance
+       * @param instance
+       * @returns 返回下一个需要处理的兄弟 instance
+       */
+      function returnSibling(instance) {
+          if (instance.sibling) {
+              return instance.sibling;
+          }
+          if (instance.parent) {
+              return returnSibling(instance.parent);
+          }
+          return null;
+      }
+      return returnSibling(instance);
+  }
+
+  function camelToKebab(str) {
+      return str.replace(/([A-Z])/g, (match, p1, offset) => {
+          if (offset === 0) {
+              return p1.toLowerCase();
+          }
+          else {
+              return '-' + p1.toLowerCase();
+          }
+      });
+  }
+  class ServerElement {
+      nodeName;
+      static createTextNode(content) {
+          const dom = new ServerElement('#text');
+          dom.content = content;
+          return dom;
+      }
+      static createComment(content) {
+          const dom = new ServerElement('#comment');
+          dom.content = content;
+          return dom;
+      }
+      static createElement(tag) {
+          return new ServerElement(tag);
+      }
+      constructor(nodeName) {
+          this.nodeName = nodeName;
+          this.style = {};
+          this.content = '';
+          this.children = [];
+          this.className = '';
+          this.attributes = new Map();
+      }
+      firstChild;
+      nextSibling;
+      parentNode;
+      className;
+      style;
+      content;
+      children;
+      attributes;
+      removeChild(dom) {
+          /* eslint-disable @typescript-eslint/ban-ts-comment */
+          const index = this.children.findIndex(v => v === dom);
+          if (index != -1)
+              this.children.splice(index, 1);
+          // @ts-ignore
+          this.firstChild = undefined;
+          // @ts-ignore
+          this.nextSibling = undefined;
+          // @ts-ignore
+          this.parentNode = undefined;
+          /* eslint-enable @typescript-eslint/ban-ts-comment */
+      }
+      appendChild(dom) {
+          /* eslint-disable @typescript-eslint/ban-ts-comment */
+          // @ts-ignore
+          dom.parentNode = this;
+          if (this.children.length > 0) {
+              // @ts-ignore
+              this.children[this.children.length - 1].nextSibling = dom;
+          }
+          // @ts-ignore
+          this.firstChild = this.children[0];
+          this.children.push(dom);
+          /* eslint-enable @typescript-eslint/ban-ts-comment */
+      }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      setAttribute(name, value) {
+          if (value === '')
+              return this.attributes.delete(name);
+          /* eslint-disable @typescript-eslint/ban-ts-comment */
+          // @ts-ignore
+          if (name === 'class')
+              return this.className = value;
+          // @ts-ignore
+          if (name === 'style')
+              return this.style = value;
+          /* eslint-enable @typescript-eslint/ban-ts-comment */
+          this.attributes.set(name, value);
+      }
+      removeAttribute(name) {
+          this.attributes.delete(name);
+      }
+      toString() {
+          if (this.nodeName === '#text')
+              return this.content;
+          if (this.nodeName === '#comment')
+              return this.content;
+          const styleString = Object.entries(this.style)
+              .map(([key, value]) => `${camelToKebab(key)}:${value}`)
+              .join(';');
+          const attributes = [...this.attributes.entries()];
+          if (styleString.length > 0)
+              attributes.push(['style', styleString]);
+          if (this.className.length > 0)
+              attributes.push(['class', this.className]);
+          const attributesString = attributes.map(([name, value]) => ` ${name}="${value}"`).join('');
+          return `<${this.nodeName}${attributesString}>${this.children.map(child => child.toString()).join('')}</${this.nodeName}>`;
+      }
+  }
+  function render$1(pluginContext, element, onComplete) {
+      const rootInstance = {
+          domRef: ServerElement.createElement('div'),
+          context: new InnerAirxComponentContext()
+      };
+      rootInstance.context.instance = rootInstance;
+      const context = {
+          rootInstance,
+          nextUnitOfWork: null,
+          needCommitDom: false
+      };
+      const appInstance = {
+          element,
+          parent: context.rootInstance,
+          memoProps: { ...element.props },
+          context: new InnerAirxComponentContext()
+      };
+      appInstance.context.instance = appInstance;
+      context.rootInstance.child = appInstance;
+      context.nextUnitOfWork = appInstance;
+      /**
+       * 提交 Dom 变化
+       */
+      function commitDom(rootInstance, rootNode) {
+          const logger = createLogger('commitDom');
+          logger.debug('commitDom', rootInstance);
+          function updateDomProperties(dom, nextProps, prevProps = {}) {
+              const isKey = (key) => key === 'key';
+              const isRef = (key) => key === 'ref';
+              const isStyle = (key) => key === 'style';
+              const isClass = (key) => key === 'class';
+              const isEvent = (key) => key.startsWith("on");
+              const isChildren = (key) => key === 'children';
+              const isGone = (_prev, next) => (key) => !(key in next);
+              const isNew = (prev, next) => (key) => prev[key] !== next[key];
+              const isProperty = (key) => !isChildren(key) && !isEvent(key) && !isStyle(key) && !isClass(key) && !isKey(key) && !isRef(key);
+              // https://developer.mozilla.org/zh-CN/docs/Web/API/Node
+              if (dom.nodeName === '#text' || dom.nodeName === '#comment') {
+                  const textNode = dom;
+                  if (textNode.nodeValue !== nextProps.textContent) {
+                      textNode.nodeValue = String(nextProps.textContent);
+                  }
+                  return;
+              }
+              // remove old style
+              const oldStyle = prevProps?.style;
+              if (typeof oldStyle === 'object' && oldStyle != null) {
+                  Object.keys(oldStyle).forEach(key => {
+                      /* eslint-disable @typescript-eslint/no-explicit-any */
+                      delete dom.style[key];
+                      /* eslint-enable @typescript-eslint/no-explicit-any */
+                  });
+              }
+              // add new style
+              const newStyle = nextProps?.style;
+              if (typeof newStyle === 'object' && newStyle != null) {
+                  Object.keys(newStyle).forEach((key) => {
+                      /* eslint-disable @typescript-eslint/no-explicit-any */
+                      const value = newStyle?.[key];
+                      dom.style[key] = value == null ? '' : value;
+                      /* eslint-enable @typescript-eslint/no-explicit-any */
+                  });
+              }
+              if (dom.className !== nextProps?.class) {
+                  if (!nextProps?.class) {
+                      dom.removeAttribute('class');
+                  }
+                  else if (typeof nextProps?.class === 'string') {
+                      dom.setAttribute('class', nextProps?.class);
+                  }
+              }
+              // Remove old properties
+              Object.keys(prevProps)
+                  .filter(isProperty)
+                  .filter(isGone(prevProps, nextProps))
+                  .forEach(name => dom.setAttribute(name, ''));
+              // Set new or changed properties
+              Object.keys(nextProps)
+                  .filter(isProperty)
+                  .filter(isNew(prevProps, nextProps))
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  .forEach(name => dom.setAttribute(name, nextProps[name]));
+          }
+          function getParentDom(instance) {
+              if (instance.parent?.domRef != null) {
+                  return instance.parent.domRef;
+              }
+              if (instance.parent) {
+                  return getParentDom(instance.parent);
+              }
+              throw new Error('Cant find dom');
+          }
+          /**
+           * 查找 instance 下所有的一级 dom
+           * @param instance
+           * @returns
+           */
+          function getChildDoms(instance) {
+              const domList = [];
+              const todoList = [instance];
+              while (todoList.length > 0) {
+                  const current = todoList.pop();
+                  // 找到真实 dom 直接提交
+                  if (current?.domRef != null) {
+                      domList.push(current.domRef);
+                  }
+                  // 有子节点但是无真实 dom，向下继续查找
+                  if (current?.domRef == null) {
+                      if (current?.child != null) {
+                          todoList.push(current.child);
+                      }
+                  }
+                  // 可能有兄弟节点，则需要继续查找
+                  if (current?.sibling != null) {
+                      todoList.push(current.sibling);
+                  }
+              }
+              return domList;
+          }
+          function commitInstanceDom(nextInstance, oldNode) {
+              // 移除标删元素
+              if (nextInstance.deletions) {
+                  for (const deletion of nextInstance.deletions) {
+                      const domList = getChildDoms(deletion);
+                      for (let index = 0; index < domList.length; index++) {
+                          const dom = domList[index];
+                          if (dom && dom.parentNode)
+                              dom.parentNode.removeChild(dom);
+                      }
+                      deletion.context.triggerUnmounted();
+                  }
+                  nextInstance.deletions.clear();
+              }
+              // 创建 dom
+              if (nextInstance.domRef == null) {
+                  if (nextInstance.element == null)
+                      throw new Error('???');
+                  if (typeof nextInstance.element.type === 'string') {
+                      if (nextInstance.element.type === 'text') {
+                          const textContent = nextInstance.element.props.textContent;
+                          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                          nextInstance.domRef = ServerElement.createTextNode(textContent);
+                      }
+                      else if (nextInstance.element.type === 'comment') {
+                          const textContent = nextInstance.element.props.textContent;
+                          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                          nextInstance.domRef = ServerElement.createComment(textContent);
+                      }
+                      else {
+                          nextInstance.domRef = ServerElement.createElement(nextInstance.element.type);
+                      }
+                  }
+              }
+              // 更新属性
+              if (nextInstance.domRef != null && nextInstance.element != null) {
+                  updateDomProperties(nextInstance.domRef, nextInstance.element.props, nextInstance.beforeElement?.props);
+              }
+              // 插入 parent
+              // TODO: 针对仅移动时优化
+              if (nextInstance.domRef != null) {
+                  if (oldNode !== nextInstance.domRef) {
+                      if (nextInstance.domRef.parentNode) {
+                          nextInstance.domRef.parentNode.removeChild(nextInstance.domRef);
+                      }
+                      const parentDom = getParentDom(nextInstance);
+                      parentDom.appendChild(nextInstance.domRef);
+                  }
+              }
+          }
+          function commitWalkV2(initInstance, initNode) {
+              // 创建一个栈，将根节点压入栈中
+              const stack = [[initInstance, initNode]];
+              while (stack.length > 0) {
+                  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                  const stackLayer = stack.pop();
+                  if (typeof stackLayer === 'function') {
+                      stackLayer();
+                      continue;
+                  }
+                  const [instance, node] = stackLayer;
+                  commitInstanceDom(instance, node);
+                  // stack 是先入后出
+                  // 实际上是先渲染 child
+                  // 这里然后再渲染 sibling
+                  // 执行生命周期的 Mount
+                  stack.push(() => instance.context.triggerMounted());
+                  // 更新下一个兄弟节点
+                  if (instance.sibling != null) {
+                      const siblingNode = instance.domRef
+                          ? instance.domRef.nextSibling
+                          : node?.nextSibling;
+                      stack.push([instance.sibling, siblingNode || undefined]);
+                  }
+                  // 更新下一个子节点
+                  if (instance.child != null) {
+                      const childNode = instance.domRef
+                          ? instance.domRef.firstChild
+                          : node;
+                      stack.push([instance.child, childNode || undefined]);
+                  }
+              }
+          }
+          commitWalkV2(rootInstance, rootNode);
+      }
+      while (context.nextUnitOfWork) {
+          context.nextUnitOfWork = performUnitOfWork(pluginContext, context.nextUnitOfWork);
+      }
+      commitDom(context.rootInstance.child, context.rootInstance.domRef?.firstChild || undefined);
+      onComplete(context.rootInstance.domRef?.toString() || '');
+  }
+
+  function render(pluginContext, element, domRef) {
+      const rootInstance = {
+          domRef,
+          context: new InnerAirxComponentContext()
+      };
+      rootInstance.context.instance = rootInstance;
+      const context = {
+          rootInstance,
+          nextUnitOfWork: null,
+          needCommitDom: false
+      };
+      const appInstance = {
+          element,
+          parent: context.rootInstance,
+          memoProps: { ...element.props },
+          context: new InnerAirxComponentContext()
+      };
+      appInstance.context.instance = appInstance;
+      context.rootInstance.child = appInstance;
+      context.nextUnitOfWork = appInstance;
+      /**
+       * 提交 Dom 变化
+       */
+      function commitDom(rootInstance, rootNode) {
+          const logger = createLogger('commitDom');
+          logger.debug('commitDom', rootInstance);
+          function updateDomProperties(dom, nextProps, prevProps = {}) {
+              for (const plugin of pluginContext.plugins) {
+                  if (plugin.updateDom)
+                      plugin.updateDom(dom, nextProps, prevProps);
+              }
+          }
+          function getParentDom(instance) {
+              if (instance.parent?.domRef != null) {
+                  return instance.parent.domRef;
+              }
+              if (instance.parent) {
+                  return getParentDom(instance.parent);
+              }
+              throw new Error('Cant find dom');
+          }
+          /**
+           * 查找 instance 下所有的一级 dom
+           * @param instance
+           * @returns
+           */
+          function getChildDoms(instance) {
+              const domList = [];
+              const todoList = [instance];
+              while (todoList.length > 0) {
+                  const current = todoList.pop();
+                  // 找到真实 dom 直接提交
+                  if (current?.domRef != null) {
+                      domList.push(current.domRef);
+                  }
+                  // 有子节点但是无真实 dom，向下继续查找
+                  if (current?.domRef == null) {
+                      if (current?.child != null) {
+                          todoList.push(current.child);
+                      }
+                  }
+                  // 可能有兄弟节点，则需要继续查找
+                  if (current?.sibling != null) {
+                      todoList.push(current.sibling);
+                  }
+              }
+              return domList;
+          }
+          function commitInstanceDom(nextInstance, oldNode) {
+              // 移除标删元素
+              if (nextInstance.deletions) {
+                  for (const deletion of nextInstance.deletions) {
+                      const domList = getChildDoms(deletion);
+                      for (let index = 0; index < domList.length; index++) {
+                          const dom = domList[index];
+                          if (dom && dom.parentNode)
+                              dom.parentNode.removeChild(dom);
+                      }
+                      deletion.context.triggerUnmounted();
+                  }
+                  nextInstance.deletions.clear();
+              }
+              // 创建 dom
+              if (nextInstance.domRef == null) {
+                  if (nextInstance.element == null)
+                      throw new Error('???');
+                  if (typeof nextInstance.element.type === 'string') {
+                      if (nextInstance.element.type === 'text') {
+                          const textContent = nextInstance.element.props.textContent;
+                          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                          nextInstance.domRef = document.createTextNode(textContent);
+                      }
+                      else if (nextInstance.element.type === 'comment') {
+                          const textContent = nextInstance.element.props.textContent;
+                          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                          nextInstance.domRef = document.createComment(textContent);
+                      }
+                      else {
+                          nextInstance.domRef = nextInstance.elementNamespace
+                              ? document.createElementNS(nextInstance.elementNamespace, nextInstance.element.type)
+                              : document.createElement(nextInstance.element.type);
+                      }
+                      if (nextInstance.domRef) {
+                          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                          nextInstance.domRef.airxInstance = nextInstance;
+                      }
+                  }
+              }
+              // 更新属性
+              if (nextInstance.domRef != null && nextInstance.element != null) {
+                  updateDomProperties(nextInstance.domRef, nextInstance.element.props, nextInstance.beforeElement?.props);
+              }
+              // 插入 parent
+              // TODO: 针对仅移动时优化
+              if (nextInstance.domRef != null) {
+                  if (oldNode !== nextInstance.domRef) {
+                      if (nextInstance.domRef.parentNode) {
+                          nextInstance.domRef.parentNode.removeChild(nextInstance.domRef);
+                      }
+                      const parentDom = getParentDom(nextInstance);
+                      parentDom.appendChild(nextInstance.domRef);
+                  }
+              }
+          }
+          function commitWalkV2(initInstance, initNode) {
+              // 创建一个栈，将根节点压入栈中
+              const stack = [[initInstance, initNode]];
+              while (stack.length > 0) {
+                  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                  const stackLayer = stack.pop();
+                  if (typeof stackLayer === 'function') {
+                      stackLayer();
+                      continue;
+                  }
+                  const [instance, node] = stackLayer;
+                  commitInstanceDom(instance, node);
+                  // stack 是先入后出
+                  // 实际上是先渲染 child
+                  // 这里然后再渲染 sibling
+                  // 执行生命周期的 Mount
+                  stack.push(() => instance.context.triggerMounted());
+                  // 更新下一个兄弟节点
+                  if (instance.sibling != null) {
+                      const siblingNode = instance.domRef
+                          ? instance.domRef.nextSibling
+                          : node?.nextSibling;
+                      stack.push([instance.sibling, siblingNode || undefined]);
+                  }
+                  // 更新下一个子节点
+                  if (instance.child != null) {
+                      const childNode = instance.domRef
+                          ? instance.domRef.firstChild
+                          : node;
+                      stack.push([instance.child, childNode || undefined]);
+                  }
+              }
+          }
+          commitWalkV2(rootInstance, rootNode);
+      }
+      function onUpdateRequire() {
+          if (context.nextUnitOfWork == null && context.rootInstance.child) {
+              context.nextUnitOfWork = context.rootInstance.child;
+          }
+      }
+      /**
+       * 调度
+       */
+      function workLoop(deadline) {
+          let shouldYield = false;
+          const logger = createLogger('workLoop');
+          while (context.nextUnitOfWork && !shouldYield) {
+              logger.debug('nextUnitOfWork', context.nextUnitOfWork);
+              context.nextUnitOfWork = performUnitOfWork(pluginContext, context.nextUnitOfWork, onUpdateRequire);
+              if (context.nextUnitOfWork == null)
+                  context.needCommitDom = true;
+              if (deadline)
+                  shouldYield = deadline.timeRemaining() < 1;
+          }
+          if (context.needCommitDom && context.rootInstance.child) {
+              commitDom(context.rootInstance.child, context.rootInstance.domRef?.firstChild || undefined);
+              context.needCommitDom = false;
+          }
+          // TODO: 兼容性
+          requestIdleCallback(workLoop);
+      }
+      // 开始调度
+      workLoop();
+      return context.rootInstance;
+  }
+
+  class BasicLogic {
+      logger = createLogger('basicLogicPlugin');
+      isSameProps(preProps, nextProps) {
+          if (Object.is(nextProps, preProps)) {
+              return true;
+          }
+          if (typeof preProps !== 'object'
+              || typeof nextProps !== 'object'
+              || preProps === null
+              || nextProps === null) {
+              this.logger.debug('props must be an object');
+              return false;
+          }
+          // 对应 key 的值不相同返回 false
+          const prevKeys = Object.keys(preProps);
+          for (let index = 0; index < prevKeys.length; index++) {
+              const key = prevKeys[index];
+              if (key !== 'children' && key !== 'key') {
+                  if (!Object.hasOwn(nextProps, key))
+                      return false;
+                  if (!Object.is(preProps[key], nextProps[key]))
+                      return false;
+              }
+              if (key === 'children') {
+                  const prevChildren = preProps['children'];
+                  const nextChildren = nextProps['children'];
+                  // children 都是空的，则无需更新
+                  if (prevChildren.length === 0 && nextChildren.length === 0)
+                      return true;
+                  // 简单比较一下 child 的引用
+                  for (let index = 0; index < prevChildren.length; index++) {
+                      const prevChild = prevChildren[index];
+                      const nextChild = nextChildren[index];
+                      if (prevChild !== nextChild)
+                          return false;
+                      if (typeof prevChild !== typeof nextChild)
+                          return false;
+                  }
+              }
+              return true;
+          }
+          return false;
+      }
+      isReRender(instance) {
+          const nextProps = instance.element?.props;
+          const preProps = instance.beforeElement?.props;
+          if (!this.isSameProps(preProps, nextProps))
+              return true;
+      }
+      updateDom(dom, nextProps, prevProps = {}) {
+          this.logger.debug('updateDom', dom, nextProps, prevProps);
+          const isKey = (key) => key === 'key';
+          const isRef = (key) => key === 'ref';
+          const isStyle = (key) => key === 'style';
+          const isClass = (key) => key === 'class';
+          const isEvent = (key) => key.startsWith("on");
+          const isChildren = (key) => key === 'children';
+          const isGone = (_prev, next) => (key) => !(key in next);
+          const isNew = (prev, next) => (key) => prev[key] !== next[key];
+          const isProperty = (key) => !isChildren(key) && !isEvent(key) && !isStyle(key) && !isClass(key) && !isKey(key) && !isRef(key);
+          // https://developer.mozilla.org/zh-CN/docs/Web/API/Node
+          if (dom.nodeName === '#text' || dom.nodeName === '#comment') {
+              const textNode = dom;
+              if (textNode.nodeValue !== nextProps.textContent) {
+                  textNode.nodeValue = String(nextProps.textContent);
+              }
+              return;
+          }
+          // remove old style
+          const oldStyle = prevProps?.style;
+          if (typeof oldStyle === 'object' && oldStyle != null) {
+              if (!('style' in dom) || !dom.style)
+                  return;
+              Object.keys(oldStyle).forEach(key => {
+                  /* eslint-disable @typescript-eslint/no-explicit-any */
+                  if ('style' in dom && dom.style) {
+                      delete dom.style[key];
+                      /* eslint-enable @typescript-eslint/no-explicit-any */
+                  }
+              });
+          }
+          // add new style
+          const newStyle = nextProps?.style;
+          if (typeof newStyle === 'object' && newStyle != null) {
+              if (!('style' in dom) || !dom.style)
+                  return;
+              Object.keys(newStyle).forEach((key) => {
+                  /* eslint-disable @typescript-eslint/no-explicit-any */
+                  const value = newStyle?.[key];
+                  dom.style[key] = value == null ? '' : value;
+                  /* eslint-enable @typescript-eslint/no-explicit-any */
+              });
+          }
+          if (dom.className !== nextProps?.class) {
+              if (!nextProps?.class) {
+                  dom.removeAttribute('class');
+              }
+              else if (typeof nextProps?.class === 'string') {
+                  dom.setAttribute('class', nextProps?.class);
+              }
+          }
+          //Remove old or changed event listeners
+          Object.keys(prevProps)
+              .filter(isEvent)
+              .filter(key => !(key in nextProps) ||
+              isNew(prevProps, nextProps)(key))
+              .forEach(name => {
+              const eventType = name
+                  .toLowerCase()
+                  .substring(2);
+              if (prevProps[name] == null)
+                  return;
+              if (typeof prevProps[name] !== 'function') {
+                  console.error('EventListener is not a function');
+              }
+              else {
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  dom.removeEventListener(eventType, prevProps[name]);
+              }
+          });
+          // Add event listeners
+          Object.keys(nextProps)
+              .filter(isEvent)
+              .filter(isNew(prevProps, nextProps))
+              .forEach(name => {
+              const eventType = name
+                  .toLowerCase()
+                  .substring(2);
+              if (nextProps[name] == null)
+                  return;
+              if (typeof nextProps[name] !== 'function') {
+                  console.error('EventListener is not a function');
+              }
+              else {
+                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                  dom.addEventListener(eventType, nextProps[name]);
+              }
+          });
+          // Remove old properties
+          Object.keys(prevProps)
+              .filter(isProperty)
+              .filter(isGone(prevProps, nextProps))
+              .forEach(name => dom.setAttribute(name, ''));
+          // Set new or changed properties
+          Object.keys(nextProps)
+              .filter(isProperty)
+              .filter(isNew(prevProps, nextProps))
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              .forEach(name => dom.setAttribute(name, nextProps[name]));
+      }
+      isReuseInstance(instance, nextElement) {
+          if (instance && instance.element && instance.element.type !== nextElement.type) {
+              return false;
+          }
+      }
+  }
+
+  class InjectSystem {
+      getProvideValueForParent(instance, key) {
+          if (instance && instance.context) {
+              const value = instance.context.providedMap.get(key);
+              if (value != undefined)
+                  return value;
+              if (instance.parent) {
+                  return this.getProvideValueForParent(instance.parent, key);
+              }
+          }
+          return undefined;
+      }
+      isReuseInstance(instance) {
+          const injectedKeys = [...instance.context.injectedMap.keys()];
+          for (let index = 0; index < injectedKeys.length; index++) {
+              const key = injectedKeys[index];
+              const currentValue = instance.context.injectedMap.get(key);
+              const parentValue = this.getProvideValueForParent(instance.parent, key);
+              // 如果发现任何值发生变化，则重建实例
+              if (parentValue !== currentValue)
+                  return false;
+          }
+      }
+  }
+
+  class PluginContext {
+      plugins = [
+          new BasicLogic(),
+          new InjectSystem()
+      ];
+      registerPlugin(...plugins) {
+          this.plugins.push(...plugins);
+      }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function createApp(element) {
+      const appContext = new PluginContext();
+      const app = {
+          plugin: (...plugins) => {
+              appContext.registerPlugin(...plugins);
+              return app;
+          },
+          mount: (container) => {
+              render(appContext, element, container);
+              return app;
+          },
+          renderToHTML: () => {
+              return new Promise(resolve => {
+                  render$1(appContext, element, resolve);
+              });
+          }
+      };
+      return app;
+  }
+
+  exports.Fragment = Fragment;
+  exports.component = component;
+  exports.createApp = createApp;
+  exports.createElement = createElement;
+  exports.createSignal = createSignal;
+  exports.inject = inject;
+  exports.onMounted = onMounted;
+  exports.onUnmounted = onUnmounted;
+  exports.provide = provide;
+  exports.watchSignal = watchSignal;
+
+}));
+//# sourceMappingURL=index.js.map