@viewfly/core 0.0.1-alpha.0

package/bundles/index.esm.js

@@ -0,0 +1,1188 @@
+import 'reflect-metadata';
+import { ReflectiveInjector, normalizeProvider, NullInjector, Injectable } from '@tanbo/di';
+export * from '@tanbo/di';
+import { Subject, Subscription, microTask } from '@tanbo/stream';
+
+class NativeRenderer {
+}
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise */
+
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+function __metadata(metadataKey, metadataValue) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+}
+
+function Fragment(props) {
+    return () => new JSXFragment(props);
+}
+class JSXFragment {
+    constructor(props) {
+        this.props = props;
+    }
+}
+function jsx(setup, config) {
+    if (typeof setup === 'string') {
+        return new JSXElement(setup, config);
+    }
+    return function (context) {
+        return new Component(context, setup, config);
+    };
+}
+function jsxs(setup, config) {
+    if (typeof setup === 'string') {
+        return new JSXElement(setup, config);
+    }
+    return function (context) {
+        return new Component(context, setup, config);
+    };
+}
+class JSXText {
+    constructor(text) {
+        this.text = text;
+    }
+}
+function flatChildren(jsxNodes) {
+    const children = [];
+    for (const node of jsxNodes) {
+        if (node instanceof JSXElement || typeof node === 'function') {
+            children.push(node);
+        }
+        else if (typeof node === 'string' && node.length) {
+            children.push(new JSXText(node));
+        }
+        else if (node !== null && typeof node !== 'undefined') {
+            children.push(new JSXText(String(node)));
+        }
+    }
+    return children;
+}
+class Props {
+    constructor(props) {
+        this.attrs = new Map();
+        this.styles = new Map();
+        this.classes = new Set();
+        this.listeners = {};
+        this.children = [];
+        if (!props) {
+            return;
+        }
+        Object.keys(props).forEach(key => {
+            if (key === 'children') {
+                if (props.children !== null && typeof props.children !== 'undefined') {
+                    if (Array.isArray(props.children)) {
+                        this.children = flatChildren(props.children);
+                    }
+                    else {
+                        this.children = flatChildren([props.children]);
+                    }
+                }
+                return;
+            }
+            if (key === 'class') {
+                this.classes = new Set(Props.classToArray(props[key]));
+                return;
+            }
+            if (key === 'style') {
+                const style = props.style || '';
+                if (typeof style === 'string') {
+                    style.split(';').map(s => s.split(':')).forEach(v => {
+                        if (!v[0] || !v[1]) {
+                            return;
+                        }
+                        this.styles.set(v[0].trim(), v[1].trim());
+                    });
+                }
+                else if (typeof style === 'object') {
+                    Object.keys(style).forEach(key => {
+                        this.styles.set(key, style[key]);
+                    });
+                }
+                return;
+            }
+            if (/^on[A-Z]/.test(key)) {
+                const listener = props[key];
+                if (typeof listener === 'function') {
+                    this.listeners[key.replace(/^on/, '').toLowerCase()] = listener;
+                }
+                else {
+                    this.attrs.set(key, listener);
+                }
+                return;
+            }
+            this.attrs.set(key, props[key]);
+        });
+    }
+    static classToArray(config) {
+        const classes = [];
+        if (!config) {
+            return classes;
+        }
+        if (typeof config === 'string') {
+            const items = config.match(/\S+/g);
+            return items || classes;
+        }
+        else if (Array.isArray(config)) {
+            for (const i of config) {
+                classes.push(...Props.classToArray(i));
+            }
+        }
+        else if (typeof config === 'object') {
+            if (config.toString !== Object.prototype.toString && !config.toString.toString().includes('[native code]')) {
+                classes.push(config.toString());
+                return classes;
+            }
+            for (const key in config) {
+                if ({}.hasOwnProperty.call(config, key) && config[key]) {
+                    classes.push(key);
+                }
+            }
+        }
+        return classes;
+    }
+}
+class JSXElement {
+    constructor(name, config) {
+        this.name = name;
+        this.config = config;
+        this.props = new Props(config);
+    }
+}
+
+function makeError(name) {
+    return function viewflyError(message) {
+        const error = new Error(message);
+        error.name = `[ViewflyError: ${name}]`;
+        error.stack = error.stack.replace(/\n.*?(?=\n)/, '');
+        return error;
+    };
+}
+
+const componentStack = [];
+const componentErrorFn = makeError('component');
+function getComponentContext(need = true) {
+    const current = componentStack[componentStack.length - 1];
+    if (!current && need) {
+        throw componentErrorFn('cannot be called outside the component!');
+    }
+    return current;
+}
+/**
+ * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
+ */
+class Component extends ReflectiveInjector {
+    get dirty() {
+        return this._dirty;
+    }
+    get changed() {
+        return this._changed;
+    }
+    constructor(context, setup, config) {
+        super(context, []);
+        this.setup = setup;
+        this.config = config;
+        this.destroyCallbacks = [];
+        this.mountCallbacks = [];
+        this.propsChangedCallbacks = [];
+        this.updatedCallbacks = [];
+        this._dirty = true;
+        this._changed = true;
+        this.updatedDestroyCallbacks = [];
+        this.propsChangedDestroyCallbacks = [];
+        this.isFirstRending = true;
+        this.props = new Props(config);
+        this.parentComponent = this.parentInjector;
+    }
+    addProvide(providers) {
+        providers = Array.isArray(providers) ? providers : [providers];
+        providers.forEach(p => {
+            this.normalizedProviders.push(normalizeProvider(p));
+        });
+    }
+    init() {
+        componentStack.push(this);
+        const self = this;
+        const props = new Proxy({}, {
+            get(_, key) {
+                if (self.config) {
+                    return self.config[key];
+                }
+            },
+            set() {
+                throw componentErrorFn('component props is readonly!');
+            }
+        });
+        const render = this.setup(props);
+        const template = render();
+        componentStack.pop();
+        return {
+            template,
+            render: () => {
+                componentStack.push(this);
+                const template = render();
+                componentStack.pop();
+                return template;
+            }
+        };
+    }
+    markAsDirtied() {
+        this._dirty = true;
+        this.markAsChanged();
+    }
+    markAsChanged() {
+        this._changed = true;
+        this.parentComponent.markAsChanged();
+    }
+    rendered() {
+        const is = this.isFirstRending;
+        this.isFirstRending = false;
+        this._dirty = this._changed = false;
+        if (is) {
+            this.invokeUpdatedHooks();
+            this.invokeMountHooks();
+        }
+        else {
+            this.invokeUpdatedHooks();
+        }
+    }
+    invokePropsChangedHooks(newProps) {
+        const oldProps = this.config;
+        this.config = newProps;
+        this.propsChangedDestroyCallbacks.forEach(fn => {
+            fn();
+        });
+        this.propsChangedDestroyCallbacks = [];
+        for (const fn of this.propsChangedCallbacks) {
+            const destroyFn = fn(newProps, oldProps);
+            if (typeof destroyFn === 'function') {
+                this.propsChangedDestroyCallbacks.push(destroyFn);
+            }
+        }
+    }
+    destroy() {
+        this.updatedDestroyCallbacks.forEach(fn => {
+            fn();
+        });
+        this.updatedDestroyCallbacks = [];
+        this.propsChangedDestroyCallbacks.forEach(fn => {
+            fn();
+        });
+        this.propsChangedDestroyCallbacks = [];
+        for (const fn of this.destroyCallbacks) {
+            fn();
+        }
+        this.updatedCallbacks = [];
+        this.mountCallbacks = [];
+        this.updatedCallbacks = [];
+    }
+    invokeMountHooks() {
+        for (const fn of this.mountCallbacks) {
+            const destroyFn = fn();
+            if (typeof destroyFn === 'function') {
+                this.destroyCallbacks.push(destroyFn);
+            }
+        }
+    }
+    invokeUpdatedHooks() {
+        this.updatedDestroyCallbacks.forEach(fn => {
+            fn();
+        });
+        this.updatedDestroyCallbacks = [];
+        for (const fn of this.updatedCallbacks) {
+            const destroyFn = fn();
+            if (typeof destroyFn === 'function') {
+                this.updatedDestroyCallbacks.push(destroyFn);
+            }
+        }
+    }
+}
+/**
+ * 当组件第一次渲染完成时触发
+ * @param callback
+ * ```tsx
+ * function App() {
+ *   onMount(() => {
+ *     console.log('App mounted!')
+ *   })
+ *   return () => <div>...</div>
+ * }
+ * ```
+ */
+function onMount(callback) {
+    const component = getComponentContext();
+    component.mountCallbacks.push(callback);
+}
+/**
+ * 当组件视图更新后调用
+ * @param callback
+ * ```tsx
+ * function App() {
+ *   onUpdated(() => {
+ *     console.log('App updated!')
+ *     return () => {
+ *       console.log('destroy prev update!')
+ *     }
+ *   })
+ *   return () => <div>...</div>
+ * }
+ * ```
+ */
+function onUpdated(callback) {
+    const component = getComponentContext();
+    component.updatedCallbacks.push(callback);
+    return () => {
+        const index = component.updatedCallbacks.indexOf(callback);
+        if (index > -1) {
+            component.updatedCallbacks.splice(index, 1);
+        }
+    };
+}
+/**
+ * 当组件 props 更新地调用
+ * @param callback
+ * @example
+ * ```tsx
+ * function YourComponent(props) {
+ *   onPropsChanged((currentProps, prevProps) => {
+ *     console.log(currentProps, prevProps)
+ *
+ *     return () => {
+ *       console.log('destroy prev changed!')
+ *     }
+ *   })
+ *   return () => {
+ *     return <div>xxx</div>
+ *   }
+ * }
+ * ```
+ */
+function onPropsChanged(callback) {
+    const component = getComponentContext();
+    component.propsChangedCallbacks.push(callback);
+    return () => {
+        const index = component.propsChangedCallbacks.indexOf(callback);
+        if (index > -1) {
+            component.propsChangedCallbacks.splice(index, 1);
+        }
+    };
+}
+/**
+ * 当组件销毁时调用回调函数
+ * @param callback
+ */
+function onDestroy(callback) {
+    const component = getComponentContext();
+    component.destroyCallbacks.push(callback);
+}
+class Ref {
+    // private prevValue: T | null = null
+    constructor(callback, component) {
+        this.callback = callback;
+        this.component = component;
+        this.unListenFn = null;
+        component.destroyCallbacks.push(() => {
+            this.unListen();
+        });
+    }
+    update(value) {
+        // if (value === this.prevValue) {
+        //   return
+        // }
+        // this.prevValue = value
+        this.unListen();
+        this.unListenFn = this.callback(value) || null;
+    }
+    unListen() {
+        if (typeof this.unListenFn === 'function') {
+            this.unListenFn();
+            this.unListenFn = null;
+        }
+    }
+}
+/**
+ * 用于节点渲染完成时获取 DOM 节点
+ * @param callback 获取 DOM 节点的回调函数
+ * @example
+ * ```tsx
+ * function App() {
+ *   const ref = useRef(node => {
+ *     function fn() {
+ *       // do something...
+ *     }
+ *     node.addEventListener('click', fn)
+ *     return () => {
+ *       node.removeEventListener('click', fn)
+ *     }
+ *   })
+ *   return () => {
+ *     return <div ref={ref}>xxx</div>
+ *   }
+ * }
+ * ```
+ */
+function useRef(callback) {
+    const component = getComponentContext();
+    return new Ref(callback, component);
+}
+const depsKey = Symbol('deps');
+/**
+ * 组件状态管理器
+ * @param state 初始状态
+ * @example
+ * ```tsx
+ * function App() {
+ *   // 初始化状态
+ *   const state = useSignal(1)
+ *
+ *   return () => {
+ *     <div>
+ *       <div>当前值为：{state()}</div>
+ *       <div>
+ *         <button type="button" onClick={() => {
+ *           // 当点击时更新状态
+ *           state.set(state() + 1)
+ *         }
+ *         }>updateState</button>
+ *       </div>
+ *     </div>
+ *   }
+ * }
+ */
+function useSignal(state) {
+    const usedComponents = new Set();
+    function stateManager() {
+        const component = getComponentContext(false);
+        if (component && !usedComponents.has(component)) {
+            usedComponents.add(component);
+            component.destroyCallbacks.push(() => {
+                usedComponents.delete(component);
+            });
+        }
+        return state;
+    }
+    stateManager.set = function (newState) {
+        if (typeof newState === 'function') {
+            newState = newState(state);
+        }
+        else if (newState === state) {
+            return;
+        }
+        state = newState;
+        for (const component of usedComponents) {
+            component.markAsDirtied();
+        }
+        for (const fn of stateManager[depsKey]) {
+            fn();
+        }
+    };
+    stateManager[depsKey] = new Set();
+    return stateManager;
+}
+/**
+ * 监听状态变化，当任意一个状态发生变更时，触发回调。
+ * useEffect 会返回一个取消监听的函数，调用此函数，可以取消监听。
+ * 当在组件中调用时，组件销毁时会自动取消监听。
+ * @param deps 依赖的状态 Signal，可以是一个 Signal，只可以一个数包含 Signal 的数组
+ * @param effect 状态变更后的回调函数
+ */
+function useEffect(deps, effect) {
+    const signals = Array.isArray(deps) ? deps : [deps];
+    let prevCleanup;
+    function effectCallback() {
+        if (typeof prevCleanup === 'function') {
+            prevCleanup();
+        }
+        prevCleanup = effect();
+    }
+    for (const dep of signals) {
+        dep[depsKey].add(effectCallback);
+    }
+    const component = getComponentContext(false);
+    let isClean = false;
+    const destroyFn = () => {
+        if (isClean) {
+            return;
+        }
+        isClean = true;
+        if (component) {
+            const index = component.destroyCallbacks.indexOf(destroyFn);
+            component.destroyCallbacks.splice(index, 1);
+        }
+        for (const dep of signals) {
+            dep[depsKey].delete(effectCallback);
+        }
+    };
+    if (component) {
+        component.destroyCallbacks.push(destroyFn);
+    }
+    return destroyFn;
+}
+/**
+ * 通过 IoC 容器当前组件提供上下文共享数据的方法
+ * @param provider
+ */
+function provide(provider) {
+    const component = getComponentContext();
+    component.addProvide(provider);
+    return component;
+}
+/**
+ * 通过组件上下文获取 IoC 容器内数据的勾子方法
+ */
+function inject(token, notFoundValue, flags) {
+    const component = getComponentContext();
+    return component.parentInjector.get(token, notFoundValue, flags);
+}
+
+/**
+ * Viewfly 根组件，用于实现组件状态更新事件通知
+ */
+class RootComponent extends Component {
+    constructor(factory) {
+        super(new NullInjector(), factory, new Props(null));
+        this.changeEmitter = new Subject();
+    }
+    markAsChanged() {
+        this._changed = true;
+        this.changeEmitter.next();
+    }
+}
+
+const refKey = 'ref';
+function getObjectChanges(target, source) {
+    const changes = {
+        remove: [],
+        add: []
+    };
+    // if (!target) {
+    //   if (source) {
+    //     Object.keys(source).forEach(key => {
+    //       changes.remove.push([key, source[key]])
+    //     })
+    //   }
+    //   return changes
+    // }
+    //
+    // if (!source) {
+    //   Object.keys(target).forEach(key => {
+    //     changes.add.push([key, target[key]])
+    //   })
+    //   return changes
+    // }
+    Object.keys(target).forEach(key => {
+        const leftValue = target[key];
+        if (!Reflect.has(source, key)) {
+            changes.add.push([key, leftValue]);
+            return;
+        }
+        const rightValue = source[key];
+        if (leftValue === rightValue) {
+            return;
+        }
+        changes.add.push([key, leftValue]);
+        changes.remove.push([key, rightValue]);
+    });
+    Object.keys(source).forEach(key => {
+        if (!Reflect.has(target, key)) {
+            changes.remove.push([key, source[key]]);
+        }
+    });
+    return changes;
+}
+function getMapChanges(target, source) {
+    const changes = {
+        remove: [],
+        set: []
+    };
+    // if (!target) {
+    //   if (source) {
+    //     source.forEach((value, key) => {
+    //       changes.remove.push([key, value])
+    //     })
+    //   }
+    //   return changes
+    // }
+    // if (!source) {
+    //   target.forEach((value, key) => {
+    //     changes.set.push([key, value])
+    //   })
+    //   return changes
+    // }
+    target.forEach((value, key) => {
+        const rightValue = source.get(key);
+        if (value === rightValue) {
+            return;
+        }
+        changes.set.push([key, value]);
+    });
+    source.forEach((value, key) => {
+        if (key === refKey && value instanceof Ref) {
+            const newValue = target.get(key);
+            if (value !== newValue) {
+                changes.remove.push([key, value]);
+            }
+            return;
+        }
+        if (!target.has(key)) {
+            changes.remove.push([key, value]);
+        }
+    });
+    return changes;
+}
+function getSetChanges(target, source) {
+    const changes = {
+        add: [],
+        remove: []
+    };
+    // if (!target) {
+    //   if (source) {
+    //     source.forEach(i => {
+    //       changes.remove.push(i)
+    //     })
+    //   }
+    //   return changes
+    // }
+    //
+    // if (!source) {
+    //   target.forEach(i => {
+    //     changes.add.push(i)
+    //   })
+    //   return changes
+    // }
+    target.forEach(i => {
+        if (!source.has(i)) {
+            changes.add.push(i);
+        }
+    });
+    source.forEach(i => {
+        if (!target.has(i)) {
+            changes.remove.push(i);
+        }
+    });
+    return changes;
+}
+const compareText = '0'.repeat(8);
+function getNodeChanges(newVNode, oldVNode) {
+    const newProps = newVNode.props;
+    const oldProps = oldVNode.props;
+    const styleChanges = getMapChanges(newProps.styles, oldProps.styles);
+    const attrChanges = getMapChanges(newProps.attrs, oldProps.attrs);
+    const classesChanges = getSetChanges(newProps.classes, oldProps.classes);
+    const listenerChanges = getObjectChanges(newProps.listeners, oldProps.listeners);
+    return {
+        styleChanges,
+        attrChanges,
+        classesChanges,
+        listenerChanges,
+        isChanged: [
+            attrChanges.set.length,
+            attrChanges.remove.length,
+            styleChanges.set.length,
+            styleChanges.remove.length,
+            classesChanges.add.length,
+            classesChanges.remove.length,
+            listenerChanges.add.length,
+            listenerChanges.remove.length
+        ].join('') !== compareText
+    };
+}
+
+class RootComponentRef {
+}
+class Atom {
+    constructor(jsxNode, parent) {
+        this.jsxNode = jsxNode;
+        this.parent = parent;
+        this.nativeNode = null;
+        this.child = null;
+        this.sibling = null;
+    }
+}
+let Renderer = class Renderer {
+    constructor(nativeRenderer, rootComponentRef) {
+        this.nativeRenderer = nativeRenderer;
+        this.rootComponentRef = rootComponentRef;
+        this.componentAtomCaches = new WeakMap();
+    }
+    render() {
+        const { component, host } = this.rootComponentRef;
+        const chain = new Atom(component, null);
+        const children = this.buildView(chain);
+        children.forEach(child => {
+            this.nativeRenderer.appendChild(host, child);
+        });
+    }
+    refresh() {
+        const { component, host } = this.rootComponentRef;
+        this.reconcile(component, {
+            host,
+            isParent: true
+        });
+    }
+    reconcile(component, context) {
+        if (component.dirty) {
+            this.applyChanges(component, context);
+        }
+        else if (component.changed) {
+            const atom = this.componentAtomCaches.get(component).atom.child;
+            this.reconcileElement(atom, context);
+        }
+    }
+    reconcileElement(atom, context) {
+        while (atom) {
+            if (atom.jsxNode instanceof Component) {
+                this.reconcile(atom.jsxNode, context);
+                atom = atom.sibling;
+                continue;
+            }
+            if (atom.jsxNode instanceof JSXElement) {
+                this.reconcileElement(atom.child, {
+                    host: atom.nativeNode,
+                    isParent: true
+                });
+                context.host = atom.nativeNode;
+                context.isParent = false;
+            }
+            atom = atom.sibling;
+        }
+    }
+    applyChanges(component, context) {
+        const { atom, render } = this.componentAtomCaches.get(component);
+        const diffAtom = atom.child;
+        const template = render();
+        if (template) {
+            this.linkTemplate(template, component, atom);
+        }
+        else {
+            atom.child = null;
+        }
+        this.diff(atom.child, diffAtom, context);
+        component.rendered();
+    }
+    diff(start, diffAtom, context) {
+        const oldChildren = [];
+        while (diffAtom) {
+            oldChildren.push(diffAtom);
+            diffAtom = diffAtom.sibling;
+        }
+        const commits = [];
+        const addReuseCommit = (start, reusedAtom) => {
+            commits.push(() => {
+                const isComponent = start.jsxNode instanceof Component;
+                if (!isComponent) {
+                    const host = context.host;
+                    if (context.isParent) {
+                        this.nativeRenderer.prependChild(host, start.nativeNode);
+                    }
+                    else {
+                        this.nativeRenderer.insertAfter(start.nativeNode, host);
+                    }
+                    context.host = start.nativeNode;
+                    context.isParent = false;
+                }
+                if (start.child) {
+                    const childContext = start.jsxNode instanceof JSXElement ? {
+                        host: start.nativeNode,
+                        isParent: true
+                    } : context;
+                    this.diff(start.child, reusedAtom.child, childContext);
+                }
+                else if (reusedAtom.child) {
+                    this.cleanView(reusedAtom.child, false);
+                }
+                if (isComponent) {
+                    start.jsxNode.rendered();
+                }
+            });
+        };
+        const addCreateCommit = (start) => {
+            commits.push(() => {
+                const children = this.createViewByAtom(start);
+                children.forEach(child => {
+                    if (context.isParent) {
+                        this.nativeRenderer.prependChild(context.host, child);
+                    }
+                    else {
+                        this.nativeRenderer.insertAfter(child, context.host);
+                    }
+                    context.host = child;
+                    context.isParent = false;
+                });
+            });
+        };
+        while (start && !start.nativeNode) {
+            const reusedAtom = this.reuseAndUpdate(start, oldChildren);
+            if (reusedAtom) {
+                addReuseCommit(start, reusedAtom);
+            }
+            else {
+                addCreateCommit(start);
+            }
+            start = start.sibling;
+        }
+        for (const atom of oldChildren) {
+            this.cleanView(atom, false);
+        }
+        for (const commit of commits) {
+            commit();
+        }
+    }
+    cleanView(atom, isClean) {
+        if (atom.nativeNode) {
+            if (!isClean) {
+                this.nativeRenderer.remove(atom.nativeNode);
+                isClean = true;
+            }
+            if (atom.jsxNode instanceof JSXElement) {
+                const ref = atom.jsxNode.props.attrs.get(refKey);
+                if (ref instanceof Ref) {
+                    ref.unListen();
+                }
+            }
+        }
+        let child = atom.child;
+        while (child) {
+            this.cleanView(child, isClean);
+            child = child.sibling;
+        }
+        if (atom.jsxNode instanceof Component) {
+            atom.jsxNode.destroy();
+        }
+    }
+    reuseAndUpdate(start, oldChildren) {
+        for (let i = 0; i < oldChildren.length; i++) {
+            const diffAtom = oldChildren[i];
+            if (start.jsxNode instanceof JSXElement) {
+                if (diffAtom.jsxNode instanceof JSXElement && start.jsxNode.name === diffAtom.jsxNode.name) {
+                    const nativeNode = diffAtom.nativeNode;
+                    start.nativeNode = nativeNode;
+                    this.updateNativeNodeProperties(start.jsxNode, diffAtom.jsxNode, nativeNode);
+                    oldChildren.splice(i, 1);
+                    return diffAtom;
+                }
+            }
+            else if (start.jsxNode instanceof JSXText) {
+                if (diffAtom.jsxNode instanceof JSXText) {
+                    const nativeNode = diffAtom.nativeNode;
+                    if (start.jsxNode.text !== diffAtom.jsxNode.text) {
+                        this.nativeRenderer.syncTextContent(nativeNode, start.jsxNode.text);
+                    }
+                    start.nativeNode = nativeNode;
+                    oldChildren.splice(i, 1);
+                    return diffAtom;
+                }
+            }
+            else if (diffAtom.jsxNode instanceof Component) {
+                if (start.jsxNode.setup === diffAtom.jsxNode.setup) {
+                    const { isChanged } = getNodeChanges(start.jsxNode, diffAtom.jsxNode);
+                    if (isChanged) {
+                        diffAtom.jsxNode.invokePropsChangedHooks(start.jsxNode.config);
+                    }
+                    start.jsxNode = diffAtom.jsxNode;
+                    const { render } = this.componentAtomCaches.get(start.jsxNode);
+                    const template = render();
+                    if (template) {
+                        this.linkTemplate(template, start.jsxNode, start);
+                    }
+                    this.componentAtomCaches.set(start.jsxNode, {
+                        render,
+                        atom: start
+                    });
+                    oldChildren.splice(i, 1);
+                    return diffAtom;
+                }
+            }
+        }
+        return null;
+    }
+    createViewByAtom(atom) {
+        if (atom.jsxNode instanceof JSXElement) {
+            const nativeNode = this.createElement(atom.jsxNode);
+            atom.nativeNode = nativeNode;
+            if (atom.child) {
+                const children = this.buildView(atom.child);
+                for (const child of children) {
+                    this.nativeRenderer.appendChild(nativeNode, child);
+                }
+            }
+            return [nativeNode];
+        }
+        else if (atom.jsxNode instanceof JSXText) {
+            const nativeNode = this.createTextNode(atom.jsxNode);
+            atom.nativeNode = nativeNode;
+            return [nativeNode];
+        }
+        const { template, render } = atom.jsxNode.init();
+        this.componentAtomCaches.set(atom.jsxNode, {
+            atom,
+            render
+        });
+        if (template) {
+            this.linkTemplate(template, atom.jsxNode, atom);
+        }
+        if (atom.child) {
+            return this.buildView(atom.child);
+        }
+        return [];
+    }
+    buildView(chain) {
+        const context = [];
+        const children = [];
+        function getContext() {
+            return context[context.length - 1];
+        }
+        let atom = chain;
+        const stopAtom = chain.parent;
+        wrap: while (atom) {
+            if (atom.jsxNode instanceof Component) {
+                this.componentRender(atom.jsxNode, atom);
+                if (atom.child) {
+                    atom = atom.child;
+                    continue;
+                }
+                atom.jsxNode.rendered();
+            }
+            else {
+                const host = getContext();
+                const nativeNode = atom.jsxNode instanceof JSXElement ? this.createElement(atom.jsxNode) : this.createTextNode(atom.jsxNode);
+                atom.nativeNode = nativeNode;
+                if (host) {
+                    this.nativeRenderer.appendChild(host, nativeNode);
+                }
+                else {
+                    children.push(nativeNode);
+                }
+                if (atom.child) {
+                    context.push(nativeNode);
+                    atom = atom.child;
+                    continue;
+                }
+            }
+            while (atom) {
+                if (atom.sibling) {
+                    atom = atom.sibling;
+                    break;
+                }
+                atom = atom.parent;
+                const isComponent = (atom === null || atom === void 0 ? void 0 : atom.jsxNode) instanceof Component;
+                if (isComponent) {
+                    atom.jsxNode.rendered();
+                }
+                if (atom === stopAtom) {
+                    break wrap;
+                }
+                if (isComponent) {
+                    continue;
+                }
+                context.pop();
+            }
+        }
+        return children;
+    }
+    componentRender(component, parent) {
+        const { template, render } = component.init();
+        if (template) {
+            this.linkTemplate(template, component, parent);
+        }
+        this.componentAtomCaches.set(component, {
+            render,
+            atom: parent
+        });
+        return parent;
+    }
+    createChainByComponentFactory(context, factory, parent) {
+        const component = factory(context);
+        if (component.setup === Fragment) {
+            return this.createChainByChildren(component, component.props.children, parent);
+        }
+        return new Atom(component, parent);
+    }
+    createChain(context, template, parent) {
+        if (template instanceof JSXElement) {
+            return this.createChainByJSXElement(context, template, parent);
+        }
+        if (template instanceof JSXText) {
+            return this.createChainByJSXText(template, parent);
+        }
+        return this.createChainByComponentFactory(context, template, parent);
+    }
+    createChainByJSXElement(context, element, parent) {
+        const atom = new Atom(element, parent);
+        const children = this.createChainByChildren(context, element.props.children, atom);
+        this.link(atom, children);
+        return atom;
+    }
+    createChainByJSXText(node, parent) {
+        return new Atom(node, parent);
+    }
+    createChainByChildren(context, children, parent) {
+        const atoms = [];
+        for (const item of children) {
+            const child = this.createChain(context, item, parent);
+            if (Array.isArray(child)) {
+                atoms.push(...child);
+            }
+            else {
+                atoms.push(child);
+            }
+        }
+        return atoms;
+    }
+    linkTemplate(template, component, parent) {
+        if (template) {
+            const child = this.createChain(component, template, parent);
+            this.link(parent, Array.isArray(child) ? child : [child]);
+        }
+    }
+    link(parent, children) {
+        for (let i = 1; i < children.length; i++) {
+            const prev = children[i - 1];
+            prev.sibling = children[i];
+        }
+        parent.child = children[0] || null;
+    }
+    createElement(vNode) {
+        const nativeNode = this.nativeRenderer.createElement(vNode.name);
+        const props = vNode.props;
+        if (props) {
+            props.attrs.forEach((value, key) => {
+                if (key === refKey && value instanceof Ref) {
+                    value.update(nativeNode);
+                    return;
+                }
+                this.nativeRenderer.setProperty(nativeNode, key, value);
+            });
+            props.styles.forEach((value, key) => {
+                this.nativeRenderer.setStyle(nativeNode, key, value);
+            });
+            props.classes.forEach(k => this.nativeRenderer.addClass(nativeNode, k));
+            Object.keys(props.listeners).forEach(type => {
+                this.nativeRenderer.listen(nativeNode, type, props.listeners[type]);
+            });
+        }
+        return nativeNode;
+    }
+    createTextNode(child) {
+        return this.nativeRenderer.createTextNode(child.text);
+    }
+    updateNativeNodeProperties(newVNode, oldVNode, nativeNode) {
+        const { styleChanges, attrChanges, classesChanges, listenerChanges, isChanged } = getNodeChanges(newVNode, oldVNode);
+        if (!isChanged) {
+            return;
+        }
+        styleChanges.remove.forEach(i => this.nativeRenderer.removeStyle(nativeNode, i[0]));
+        styleChanges.set.forEach(i => this.nativeRenderer.setStyle(nativeNode, i[0], i[1]));
+        attrChanges.remove.forEach(([key, value]) => {
+            if (key === refKey && value instanceof Ref) {
+                value.unListen();
+                return;
+            }
+            this.nativeRenderer.removeProperty(nativeNode, key);
+        });
+        attrChanges.set.forEach(([key, value]) => {
+            if (key === refKey && value instanceof Ref) {
+                value.update(nativeNode);
+                return;
+            }
+            this.nativeRenderer.setProperty(nativeNode, key, value);
+        });
+        classesChanges.remove.forEach(i => this.nativeRenderer.removeClass(nativeNode, i));
+        classesChanges.add.forEach(i => this.nativeRenderer.addClass(nativeNode, i));
+        listenerChanges.remove.forEach(i => {
+            this.nativeRenderer.unListen(nativeNode, i[0], i[1]);
+        });
+        listenerChanges.add.forEach(i => {
+            this.nativeRenderer.listen(nativeNode, i[0], i[1]);
+        });
+    }
+};
+Renderer = __decorate([
+    Injectable(),
+    __metadata("design:paramtypes", [NativeRenderer,
+        RootComponentRef])
+], Renderer);
+
+const viewflyErrorFn = makeError('Viewfly');
+/**
+ * Viewfly 核心类，用于启动一个 Viewfly 应用
+ */
+class Viewfly extends ReflectiveInjector {
+    constructor(config) {
+        super(new NullInjector(), [
+            ...(config.providers || []),
+            Renderer,
+            {
+                provide: RootComponentRef,
+                useFactory: () => {
+                    return {
+                        host: config.host,
+                        component: this.rootComponent
+                    };
+                }
+            },
+            {
+                provide: NativeRenderer,
+                useFactory() {
+                    throw viewflyErrorFn('You must implement the `NativeRenderer` interface to start Viewfly!');
+                }
+            }
+        ]);
+        this.config = config;
+        this.destroyed = false;
+        this.subscription = new Subscription();
+        this.rootComponent = this.createRootComponent(config.root);
+    }
+    /**
+     * 启动 Viewfly
+     */
+    start() {
+        const renderer = this.get(Renderer);
+        renderer.render();
+        if (this.config.autoUpdate === false) {
+            return;
+        }
+        this.subscription.add(this.rootComponent.changeEmitter.pipe(microTask()).subscribe(() => {
+            renderer.refresh();
+        }));
+    }
+    /**
+     * 销毁 Viewfly 实例
+     */
+    destroy() {
+        const renderer = this.get(Renderer);
+        this.destroyed = true;
+        this.rootComponent.markAsDirtied();
+        this.subscription.unsubscribe();
+        renderer.refresh();
+    }
+    createRootComponent(rootNode) {
+        return new RootComponent(() => {
+            return () => {
+                return this.destroyed ? null : rootNode;
+            };
+        });
+    }
+}
+
+export { Component, Fragment, JSXElement, JSXFragment, JSXText, NativeRenderer, Props, Ref, Renderer, RootComponent, RootComponentRef, Viewfly, inject, jsx, jsxs, onDestroy, onMount, onPropsChanged, onUpdated, provide, useEffect, useRef, useSignal };