airx 0.2.1 → 0.2.3

package/output/esm/index.js

@@ -0,0 +1,1212 @@
+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 = typeof process != 'undefined' && process?.env?.NODE_ENV === 'development';
+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;
+}
+
+export { Fragment, component, createApp, createElement, createSignal, inject, onMounted, onUnmounted, provide, watchSignal };
+//# sourceMappingURL=index.js.map