@viewfly/core 0.0.1-alpha.12 → 0.0.1-alpha.13

package/bundles/index.js

@@ -1,1257 +0,0 @@
-'use strict';
-
-require('reflect-metadata');
-var di = require('@tanbo/di');
-var stream = require('@tanbo/stream');
-
-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;
-    };
-}
-
-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);
-}
-
-const componentSetupStack = [];
-const componentRendingStack = [];
-const derivedStack = [];
-const componentErrorFn = makeError('component');
-function getSetupContext(need = true) {
-    const current = componentSetupStack[componentSetupStack.length - 1];
-    if (!current && need) {
-        // 防止因外部捕获异常引引起的缓存未清理的问题
-        componentRendingStack.pop();
-        throw componentErrorFn('cannot be called outside the component!');
-    }
-    return current;
-}
-function getRendingContext() {
-    return componentRendingStack[componentRendingStack.length - 1];
-}
-function getDerivedContext() {
-    return derivedStack[derivedStack.length - 1];
-}
-class JSXComponent {
-    constructor(createInstance) {
-        this.createInstance = createInstance;
-    }
-}
-/**
- * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
- */
-class Component extends di.ReflectiveInjector {
-    get dirty() {
-        return this._dirty;
-    }
-    get changed() {
-        return this._changed;
-    }
-    constructor(context, setup, props, key) {
-        super(context, []);
-        this.setup = setup;
-        this.props = props;
-        this.key = key;
-        this.$$typeOf = this.setup;
-        this.destroyCallbacks = [];
-        this.mountCallbacks = [];
-        this.propsChangedCallbacks = [];
-        this.updatedCallbacks = [];
-        this._dirty = true;
-        this._changed = true;
-        this.updatedDestroyCallbacks = [];
-        this.propsChangedDestroyCallbacks = [];
-        this.isFirstRending = true;
-        this.parentComponent = this.parentInjector;
-    }
-    is(target) {
-        return target.$$typeOf === this.$$typeOf;
-    }
-    addProvide(providers) {
-        providers = Array.isArray(providers) ? providers : [providers];
-        providers.forEach(p => {
-            this.normalizedProviders.push(di.normalizeProvider(p));
-        });
-    }
-    init() {
-        const self = this;
-        const props = new Proxy(this.props, {
-            get(_, key) {
-                if (self.props) {
-                    return self.props[key];
-                }
-            },
-            set() {
-                // 防止因外部捕获异常引引起的缓存未清理的问题
-                if (isSetup) {
-                    componentSetupStack.pop();
-                }
-                if (isRending) {
-                    componentRendingStack.pop();
-                }
-                throw componentErrorFn('component props is readonly!');
-            }
-        });
-        componentSetupStack.push(this);
-        let isSetup = true;
-        const render = this.setup(props);
-        isSetup = false;
-        componentSetupStack.pop();
-        componentRendingStack.push(this);
-        let isRending = true;
-        const template = render();
-        isRending = false;
-        componentRendingStack.pop();
-        return {
-            template,
-            render: () => {
-                componentRendingStack.push(this);
-                isRending = true;
-                const template = render();
-                isRending = false;
-                componentRendingStack.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.props;
-        this.props = 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 onMounted(callback) {
-    const component = getSetupContext();
-    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 = getSetupContext();
-    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 = getSetupContext();
-    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 = getSetupContext();
-    component.destroyCallbacks.push(callback);
-}
-class Ref {
-    constructor(callback) {
-        this.callback = callback;
-        this.unBindMap = new WeakMap();
-        this.targetCaches = new Set();
-    }
-    bind(value) {
-        if (typeof value !== 'object' || value === null) {
-            return;
-        }
-        if (this.targetCaches.has(value)) {
-            return;
-        }
-        const unBindFn = this.callback(value);
-        if (typeof unBindFn === 'function') {
-            this.unBindMap.set(value, unBindFn);
-        }
-        this.targetCaches.add(value);
-    }
-    unBind(value) {
-        this.targetCaches.delete(value);
-        const unBindFn = this.unBindMap.get(value);
-        this.unBindMap.delete(value);
-        if (typeof unBindFn === 'function') {
-            unBindFn();
-        }
-    }
-}
-/**
- * 用于节点渲染完成时获取 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) {
-    return new Ref(callback);
-}
-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 signal() {
-        const component = getRendingContext();
-        const derivedContext = getDerivedContext();
-        if (derivedContext) {
-            derivedContext.push(signal);
-        }
-        if (component && !usedComponents.has(component)) {
-            usedComponents.add(component);
-            component.destroyCallbacks.push(() => {
-                usedComponents.delete(component);
-            });
-        }
-        return state;
-    }
-    signal.set = function (newState) {
-        if (newState === state) {
-            return;
-        }
-        state = newState;
-        for (const component of usedComponents) {
-            component.markAsDirtied();
-        }
-        for (const fn of signal[depsKey]) {
-            fn();
-        }
-    };
-    signal[depsKey] = new Set();
-    return signal;
-}
-/**
- * 使用派生值，Viewfly 会收集回调函数内同步执行时访问的 Signal，
- * 并在你获取 useDerived 函数返回的 Signal 的值时，自动计算最新的值。
- *
- * @param callback
- * @param isContinue 可选的停止函数，在每次值更新后调用，当返回值为 false 时，将不再监听依赖的变化
- */
-function useDerived(callback, isContinue) {
-    const deps = [];
-    derivedStack.push(deps);
-    const data = callback();
-    derivedStack.pop();
-    const signal = useSignal(data);
-    if (deps.length) {
-        const unListen = useEffect(deps, () => {
-            const data = callback();
-            signal.set(data);
-            if (typeof isContinue === 'function' && !isContinue(data)) {
-                unListen();
-            }
-        });
-    }
-    return signal;
-}
-/* eslint-enable max-len*/
-function useEffect(deps, effect) {
-    if (typeof deps === 'function' &&
-        typeof deps.set === 'undefined' &&
-        typeof deps[depsKey] === 'undefined') {
-        deps = useDerived(deps);
-    }
-    const signals = Array.isArray(deps) ? deps : [deps];
-    let oldValues = signals.map(s => s());
-    let prevCleanup;
-    function effectCallback() {
-        if (typeof prevCleanup === 'function') {
-            prevCleanup();
-        }
-        const newValues = signals.map(s => s());
-        prevCleanup = Array.isArray(deps) ? effect(newValues, oldValues) : effect(newValues[0], oldValues[0]);
-        oldValues = newValues;
-    }
-    for (const dep of signals) {
-        dep[depsKey].add(effectCallback);
-    }
-    const component = getSetupContext(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 = getSetupContext();
-    component.addProvide(provider);
-    return component;
-}
-/**
- * 通过组件上下文获取 IoC 容器内数据的勾子方法
- */
-function inject(token, notFoundValue, flags) {
-    const component = getSetupContext();
-    return component.parentInjector.get(token, notFoundValue, flags);
-}
-
-const jsxErrorFn = makeError('JSX');
-const Fragment = function Fragment() {
-    throw jsxErrorFn('Fragment does not support calling.');
-};
-function jsx(setup, config, key) {
-    if (typeof setup === 'string') {
-        return new JSXElement(setup, config, key);
-    }
-    return new JSXComponent(function (context) {
-        return new Component(context, setup, config, key);
-    });
-}
-function jsxs(setup, config, key) {
-    if (typeof setup === 'string') {
-        return new JSXElement(setup, config, key);
-    }
-    return new JSXComponent(function (context) {
-        return new Component(context, setup, config, key);
-    });
-}
-class JSXText {
-    constructor(text) {
-        this.text = text;
-        this.$$typeOf = '#text';
-    }
-    is(target) {
-        return target.$$typeOf === this.$$typeOf;
-    }
-}
-class JSXElement {
-    constructor(name, props, key) {
-        this.name = name;
-        this.props = props;
-        this.key = key;
-        this.$$typeOf = this.name;
-    }
-    is(target) {
-        return target.$$typeOf === this.$$typeOf;
-    }
-}
-
-/**
- * Viewfly 根组件，用于实现组件状态更新事件通知
- */
-class RootComponent extends Component {
-    constructor(factory, parentInjector = new di.NullInjector()) {
-        super(parentInjector, factory, {});
-        this.changeEmitter = new stream.Subject();
-    }
-    markAsChanged() {
-        this._changed = true;
-        this.changeEmitter.next();
-    }
-}
-
-const refKey = 'ref';
-function getObjectChanges(newProps, oldProps) {
-    const changes = {
-        remove: [],
-        add: [],
-        replace: []
-    };
-    if (!newProps) {
-        if (oldProps) {
-            Object.keys(oldProps).forEach(key => {
-                changes.remove.push([key, oldProps[key]]);
-            });
-        }
-        return changes;
-    }
-    if (!oldProps) {
-        Object.keys(newProps).forEach(key => {
-            changes.add.push([key, newProps[key]]);
-        });
-        return changes;
-    }
-    Object.keys(newProps).forEach(key => {
-        const leftValue = newProps[key];
-        const rightValue = oldProps[key];
-        if (Reflect.has(oldProps, key)) {
-            if (leftValue !== rightValue) {
-                changes.replace.push([key, leftValue, rightValue]);
-            }
-            return;
-        }
-        changes.add.push([key, leftValue]);
-    });
-    Object.keys(oldProps).forEach(key => {
-        if (!Reflect.has(newProps, key)) {
-            changes.remove.push([key, oldProps[key]]);
-        }
-    });
-    return changes;
-}
-function classToString(config) {
-    if (!config) {
-        return '';
-    }
-    if (typeof config === 'string') {
-        return config;
-    }
-    else if (Array.isArray(config)) {
-        return config.map(i => {
-            return classToString(i);
-        }).join(' ');
-    }
-    else if (typeof config === 'object') {
-        if (config.toString !== Object.prototype.toString && !config.toString.toString().includes('[native code]')) {
-            return config.toString();
-        }
-        const classes = [];
-        for (const key in config) {
-            if ({}.hasOwnProperty.call(config, key) && config[key]) {
-                classes.push(key);
-            }
-        }
-        return classes.join(' ');
-    }
-}
-function styleToObject(style) {
-    if (typeof style !== 'string') {
-        return style;
-    }
-    const obj = {};
-    style.split(';').map(s => s.split(':')).forEach(v => {
-        if (!v[0] || !v[1]) {
-            return;
-        }
-        obj[v[0].trim()] = v[1].trim();
-    });
-    return obj;
-}
-
-class RootComponentRef {
-}
-class Atom {
-    constructor(jsxNode, parent) {
-        this.jsxNode = jsxNode;
-        this.parent = parent;
-        this.nativeNode = null;
-        this.child = null;
-        this.sibling = null;
-    }
-}
-exports.Renderer = class Renderer {
-    constructor(nativeRenderer, rootComponentRef) {
-        this.nativeRenderer = nativeRenderer;
-        this.rootComponentRef = rootComponentRef;
-        this.componentAtomCaches = new WeakMap();
-    }
-    render() {
-        const { component, host } = this.rootComponentRef;
-        const atom = new Atom(component, null);
-        this.buildView(atom, {
-            isParent: true,
-            host
-        });
-    }
-    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);
-        }
-        else {
-            const prevSibling = this.getPrevSibling(component);
-            if (prevSibling) {
-                context.isParent = false;
-                context.host = prevSibling;
-            }
-        }
-    }
-    getPrevSibling(component) {
-        let atom = this.componentAtomCaches.get(component).atom.child;
-        const childAtoms = [];
-        while (atom) {
-            childAtoms.push(atom);
-            atom = atom.sibling;
-        }
-        const components = [];
-        while (childAtoms.length) {
-            const last = childAtoms.pop();
-            if (last.jsxNode instanceof Component) {
-                components.push(last.jsxNode);
-                continue;
-            }
-            return last.nativeNode;
-        }
-        for (const component of components) {
-            const nativeNode = this.getPrevSibling(component);
-            if (nativeNode) {
-                return nativeNode;
-            }
-        }
-        return null;
-    }
-    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, 0, 0);
-        component.rendered();
-    }
-    diff(newAtom, oldAtom, context, expectIndex, index) {
-        const oldChildren = [];
-        while (oldAtom) {
-            oldChildren.push({
-                index,
-                atom: oldAtom
-            });
-            oldAtom = oldAtom.sibling;
-            index++;
-        }
-        const commits = [];
-        const changeCommits = {
-            reuseComponent: (start, reusedAtom, expectIndex, diffIndex) => {
-                commits.push(() => {
-                    const { add, remove, replace } = getObjectChanges(start.jsxNode.props, reusedAtom.jsxNode.props);
-                    if (add.length || remove.length || replace.length) {
-                        reusedAtom.jsxNode.invokePropsChangedHooks(start.jsxNode.props);
-                    }
-                    const newProps = start.jsxNode.props;
-                    start.jsxNode = reusedAtom.jsxNode;
-                    start.jsxNode.props = newProps;
-                    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
-                    });
-                    if (start.child) {
-                        this.diff(start.child, reusedAtom.child, context, expectIndex, diffIndex);
-                    }
-                    else if (reusedAtom.child) {
-                        let atom = reusedAtom.child;
-                        while (atom) {
-                            this.cleanView(atom, false);
-                            atom = atom.sibling;
-                        }
-                    }
-                    start.jsxNode.rendered();
-                });
-            },
-            reuseElement: (newAtom, oldAtom, expectIndex, oldIndex) => {
-                commits.push((offset) => {
-                    newAtom.nativeNode = oldAtom.nativeNode;
-                    const host = context.host;
-                    if (expectIndex !== oldIndex - offset) {
-                        if (context.isParent) {
-                            this.nativeRenderer.prependChild(host, newAtom.nativeNode);
-                        }
-                        else {
-                            this.nativeRenderer.insertAfter(newAtom.nativeNode, host);
-                        }
-                    }
-                    context.host = newAtom.nativeNode;
-                    context.isParent = false;
-                    const applyRefs = this.updateNativeNodeProperties(newAtom.jsxNode, oldAtom.jsxNode, newAtom.nativeNode);
-                    if (newAtom.child) {
-                        this.diff(newAtom.child, oldAtom.child, {
-                            host: newAtom.nativeNode,
-                            isParent: true
-                        }, 0, 0);
-                    }
-                    else if (oldAtom.child) {
-                        let atom = oldAtom.child;
-                        while (atom) {
-                            this.cleanView(atom, false);
-                            atom = atom.sibling;
-                        }
-                    }
-                    applyRefs();
-                });
-            },
-            reuseText: (newAtom, oldAtom) => {
-                commits.push(() => {
-                    const nativeNode = oldAtom.nativeNode;
-                    if (newAtom.jsxNode.text !== oldAtom.jsxNode.text) {
-                        this.nativeRenderer.syncTextContent(nativeNode, newAtom.jsxNode.text);
-                    }
-                    newAtom.nativeNode = nativeNode;
-                    context.host = nativeNode;
-                    context.isParent = false;
-                });
-            },
-            create: (start) => {
-                commits.push(() => {
-                    this.buildView(start, context);
-                });
-            }
-        };
-        while (newAtom) {
-            this.createChanges(newAtom, expectIndex, oldChildren, changeCommits);
-            newAtom = newAtom.sibling;
-            expectIndex++;
-        }
-        for (const item of oldChildren) {
-            this.cleanView(item.atom, false);
-        }
-        let j = 0;
-        let offset = 0;
-        const len = oldChildren.length;
-        for (let i = 0; i < commits.length; i++) {
-            const commit = commits[i];
-            while (j < len) {
-                const current = oldChildren[j];
-                if (current.index <= i) {
-                    offset++;
-                    j++;
-                    continue;
-                }
-                break;
-            }
-            commit(offset);
-        }
-    }
-    createChanges(newAtom, expectIndex, oldChildren, changeCommits) {
-        for (let i = 0; i < oldChildren.length; i++) {
-            const { atom: diffAtom, index: diffIndex } = oldChildren[i];
-            const key = newAtom.jsxNode.key;
-            const diffKey = diffAtom.jsxNode.key;
-            if (key !== undefined && diffKey !== undefined) {
-                if (diffKey !== key) {
-                    continue;
-                }
-            }
-            if (newAtom.jsxNode.is(diffAtom.jsxNode)) {
-                if (newAtom.jsxNode instanceof JSXElement) {
-                    changeCommits.reuseElement(newAtom, diffAtom, expectIndex, diffIndex);
-                }
-                else if (newAtom.jsxNode instanceof JSXText) {
-                    changeCommits.reuseText(newAtom, diffAtom);
-                }
-                else {
-                    changeCommits.reuseComponent(newAtom, diffAtom, expectIndex, diffIndex);
-                }
-                oldChildren.splice(i, 1);
-                return;
-            }
-        }
-        changeCommits.create(newAtom);
-    }
-    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[refKey];
-                this.applyRefs(ref, atom.nativeNode, false);
-            }
-        }
-        let child = atom.child;
-        while (child) {
-            this.cleanView(child, isClean);
-            child = child.sibling;
-        }
-        if (atom.jsxNode instanceof Component) {
-            atom.jsxNode.destroy();
-        }
-    }
-    buildView(atom, context) {
-        if (atom.jsxNode instanceof Component) {
-            this.componentRender(atom.jsxNode, atom);
-            let child = atom.child;
-            while (child) {
-                this.buildView(child, context);
-                child = child.sibling;
-            }
-            atom.jsxNode.rendered();
-        }
-        else {
-            let nativeNode;
-            let applyRefs = null;
-            if (atom.jsxNode instanceof JSXElement) {
-                const { nativeNode: n, applyRefs: a } = this.createElement(atom.jsxNode);
-                nativeNode = n;
-                applyRefs = a;
-            }
-            else {
-                nativeNode = this.createTextNode(atom.jsxNode);
-            }
-            atom.nativeNode = nativeNode;
-            if (context.isParent) {
-                this.nativeRenderer.prependChild(context.host, nativeNode);
-            }
-            else {
-                this.nativeRenderer.insertAfter(nativeNode, context.host);
-            }
-            if (atom.jsxNode instanceof JSXElement) {
-                const childContext = {
-                    isParent: true,
-                    host: nativeNode
-                };
-                let child = atom.child;
-                while (child) {
-                    this.buildView(child, childContext);
-                    child = child.sibling;
-                }
-            }
-            context.host = nativeNode;
-            context.isParent = false;
-            if (applyRefs) {
-                applyRefs();
-            }
-        }
-    }
-    componentRender(component, from) {
-        const { template, render } = component.init();
-        if (template) {
-            this.linkTemplate(template, component, from);
-        }
-        this.componentAtomCaches.set(component, {
-            render,
-            atom: from
-        });
-        return from;
-    }
-    createChainByComponentFactory(context, factory, parent) {
-        const component = factory.createInstance(context);
-        if (component.setup === Fragment) {
-            return this.createChainByChildren(component, component.props.children, parent);
-        }
-        return new Atom(component, parent);
-    }
-    createChainByJSXElement(context, element, parent) {
-        const atom = new Atom(element, parent);
-        if (Reflect.has(element.props, 'children')) {
-            const jsxChildren = element.props.children;
-            const children = this.createChainByChildren(context, Array.isArray(jsxChildren) ? jsxChildren : [jsxChildren], 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) {
-            if (item instanceof JSXElement) {
-                atoms.push(this.createChainByJSXElement(context, item, parent));
-                continue;
-            }
-            if (item instanceof JSXComponent) {
-                const childAtom = this.createChainByComponentFactory(context, item, parent);
-                if (Array.isArray(childAtom)) {
-                    atoms.push(...childAtom);
-                }
-                else {
-                    atoms.push(childAtom);
-                }
-                continue;
-            }
-            if (typeof item === 'string' && item.length) {
-                atoms.push(this.createChainByJSXText(new JSXText(item), parent));
-                continue;
-            }
-            if (Array.isArray(item)) {
-                atoms.push(...this.createChainByChildren(context, item, parent));
-                continue;
-            }
-            if (item !== null && typeof item !== 'undefined') {
-                atoms.push(this.createChainByJSXText(new JSXText(String(item)), parent));
-            }
-        }
-        return atoms;
-    }
-    linkTemplate(template, component, parent) {
-        if (template) {
-            const child = template instanceof JSXElement ?
-                this.createChainByJSXElement(component, template, parent) :
-                this.createChainByComponentFactory(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;
-        let bindingRefs;
-        const keys = Object.keys(props);
-        for (const key of keys) {
-            if (key === 'children') {
-                continue;
-            }
-            if (key === 'class') {
-                this.nativeRenderer.setClass(nativeNode, classToString(props[key]));
-                continue;
-            }
-            if (key === 'style') {
-                const style = styleToObject(props.style);
-                Object.keys(style).forEach(key => {
-                    this.nativeRenderer.setStyle(nativeNode, key, style[key]);
-                });
-                continue;
-            }
-            if (/^on[A-Z]/.test(key)) {
-                const listener = props[key];
-                if (typeof listener === 'function') {
-                    this.nativeRenderer.listen(nativeNode, key.replace(/^on/, '').toLowerCase(), listener);
-                }
-                continue;
-            }
-            if (key === refKey) {
-                bindingRefs = props[key];
-                continue;
-            }
-            this.nativeRenderer.setProperty(nativeNode, key, props[key]);
-        }
-        return {
-            nativeNode,
-            applyRefs: () => {
-                this.applyRefs(bindingRefs, nativeNode, true);
-            }
-        };
-    }
-    createTextNode(child) {
-        return this.nativeRenderer.createTextNode(child.text);
-    }
-    updateNativeNodeProperties(newVNode, oldVNode, nativeNode) {
-        const changes = getObjectChanges(newVNode.props, oldVNode.props);
-        let unBindRefs;
-        let bindRefs;
-        for (const [key, value] of changes.remove) {
-            if (key === 'children') {
-                continue;
-            }
-            if (key === 'class') {
-                this.nativeRenderer.setClass(nativeNode, '');
-                continue;
-            }
-            if (key === 'style') {
-                Object.keys(styleToObject(value)).forEach(styleName => {
-                    this.nativeRenderer.removeStyle(nativeNode, styleName);
-                });
-                continue;
-            }
-            if (/^on[A-Z]/.test(key)) {
-                if (typeof value === 'function') {
-                    this.nativeRenderer.unListen(nativeNode, key.replace(/^on/, '').toLowerCase(), value);
-                }
-                continue;
-            }
-            if (key === refKey) {
-                unBindRefs = value;
-                continue;
-            }
-            this.nativeRenderer.removeProperty(nativeNode, key);
-        }
-        for (const [key, newValue, oldValue] of changes.replace) {
-            if (key === 'children') {
-                continue;
-            }
-            if (key === 'class') {
-                const oldClassName = classToString(oldValue);
-                const newClassName = classToString(newValue);
-                if (oldClassName !== newClassName) {
-                    this.nativeRenderer.setClass(nativeNode, newClassName);
-                }
-                continue;
-            }
-            if (key === 'style') {
-                const styleChanges = getObjectChanges(styleToObject(newValue), styleToObject(oldValue));
-                for (const [styleName] of styleChanges.remove) {
-                    this.nativeRenderer.removeStyle(nativeNode, styleName);
-                }
-                for (const [styleName, styleValue] of [...styleChanges.add, ...styleChanges.replace]) {
-                    this.nativeRenderer.setStyle(nativeNode, styleName, styleValue);
-                }
-                continue;
-            }
-            if (/^on[A-Z]/.test(key)) {
-                const listenType = key.replace(/^on/, '').toLowerCase();
-                if (typeof oldValue === 'function') {
-                    this.nativeRenderer.unListen(nativeNode, listenType, oldValue);
-                }
-                if (typeof newValue === 'function') {
-                    this.nativeRenderer.listen(nativeNode, listenType, newValue);
-                }
-                continue;
-            }
-            if (key === refKey) {
-                unBindRefs = oldValue;
-                bindRefs = newValue;
-                continue;
-            }
-            this.nativeRenderer.setProperty(nativeNode, key, newValue);
-        }
-        for (const [key, value] of changes.add) {
-            if (key === 'children') {
-                continue;
-            }
-            if (key === 'class') {
-                this.nativeRenderer.setClass(nativeNode, classToString(value));
-                continue;
-            }
-            if (key === 'style') {
-                const styleObj = styleToObject(value);
-                Object.keys(styleObj).forEach(styleName => {
-                    this.nativeRenderer.setStyle(nativeNode, styleName, styleObj[styleName]);
-                });
-                continue;
-            }
-            if (/^on[A-Z]/.test(key)) {
-                if (typeof value === 'function') {
-                    this.nativeRenderer.listen(nativeNode, key.replace(/^on/, '').toLowerCase(), value);
-                }
-                continue;
-            }
-            if (key === refKey) {
-                bindRefs = value;
-                continue;
-            }
-            this.nativeRenderer.setProperty(nativeNode, key, value);
-        }
-        return () => {
-            this.applyRefs(unBindRefs, nativeNode, false);
-            this.applyRefs(bindRefs, nativeNode, true);
-        };
-    }
-    applyRefs(refs, nativeNode, binding) {
-        const refList = Array.isArray(refs) ? refs : [refs];
-        for (const item of refList) {
-            if (item instanceof Ref) {
-                binding ? item.bind(nativeNode) : item.unBind(nativeNode);
-            }
-        }
-    }
-};
-exports.Renderer = __decorate([
-    di.Injectable(),
-    __metadata("design:paramtypes", [NativeRenderer,
-        RootComponentRef])
-], exports.Renderer);
-
-const viewflyErrorFn = makeError('Viewfly');
-/**
- * Viewfly 核心类，用于启动一个 Viewfly 应用
- */
-class Viewfly extends di.ReflectiveInjector {
-    constructor(config) {
-        super(new di.NullInjector(), [
-            ...(config.providers || []),
-            exports.Renderer,
-            {
-                provide: RootComponentRef,
-                useFactory: () => {
-                    return {
-                        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 stream.Subscription();
-        this.rootComponent = this.createRootComponent(config.root);
-    }
-    /**
-     * 启动 Viewfly
-     * @param host 应用根节点
-     */
-    mount(host) {
-        const rootComponentRef = this.get(RootComponentRef);
-        rootComponentRef.host = host;
-        const renderer = this.get(exports.Renderer);
-        renderer.render();
-        if (this.config.autoUpdate === false) {
-            return;
-        }
-        this.subscription.add(this.rootComponent.changeEmitter.pipe(stream.microTask()).subscribe(() => {
-            renderer.refresh();
-        }));
-    }
-    /**
-     * 销毁 Viewfly 实例
-     */
-    destroy() {
-        const renderer = this.get(exports.Renderer);
-        this.destroyed = true;
-        this.rootComponent.markAsDirtied();
-        this.subscription.unsubscribe();
-        renderer.refresh();
-    }
-    createRootComponent(rootNode) {
-        return new RootComponent(() => {
-            return () => {
-                return this.destroyed ? null : rootNode;
-            };
-        }, this.config.context);
-    }
-}
-
-exports.Component = Component;
-exports.Fragment = Fragment;
-exports.JSXComponent = JSXComponent;
-exports.JSXElement = JSXElement;
-exports.JSXText = JSXText;
-exports.NativeRenderer = NativeRenderer;
-exports.Ref = Ref;
-exports.RootComponent = RootComponent;
-exports.RootComponentRef = RootComponentRef;
-exports.Viewfly = Viewfly;
-exports.inject = inject;
-exports.jsx = jsx;
-exports.jsxs = jsxs;
-exports.makeError = makeError;
-exports.onDestroy = onDestroy;
-exports.onMounted = onMounted;
-exports.onPropsChanged = onPropsChanged;
-exports.onUpdated = onUpdated;
-exports.provide = provide;
-exports.useDerived = useDerived;
-exports.useEffect = useEffect;
-exports.useRef = useRef;
-exports.useSignal = useSignal;
-Object.keys(di).forEach(function (k) {
-    if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
-        enumerable: true,
-        get: function () { return di[k]; }
-    });
-});