@viewfly/core 0.0.18 → 0.0.20

package/bundles/index.esm.js

@@ -1,7 +1,188 @@
 import 'reflect-metadata';
-import { ReflectiveInjector, normalizeProvider, NullInjector, Injectable } from '@tanbo/di';
-export * from '@tanbo/di';
-import { Subject, Subscription, microTask } from '@tanbo/stream';
+
+class ForwardRef {
+    constructor(forwardRefFn) {
+        this.forwardRefFn = forwardRefFn;
+    }
+    getRef() {
+        return this.forwardRefFn();
+    }
+}
+/**
+ * 引用后声明的类的工具函数
+ * @param fn
+ */
+function forwardRef(fn) {
+    return new ForwardRef(fn);
+}
+
+/**
+ * 用于保存 class 的元数据
+ */
+class Annotations {
+    constructor() {
+        this.classes = new Map();
+        this.props = new Map();
+        this.params = new Map();
+    }
+    setClassMetadata(token, params) {
+        this.classes.set(token, params);
+    }
+    getClassMetadata(token) {
+        return this.classes.get(token);
+    }
+    pushParamMetadata(token, params) {
+        if (this.params.has(token)) {
+            this.params.get(token).push(params);
+        }
+        else {
+            this.params.set(token, [params]);
+        }
+    }
+    getParamMetadata(token) {
+        return this.params.get(token);
+    }
+    getPropMetadataKeys() {
+        return Array.from(this.props.keys());
+    }
+    pushPropMetadata(token, params) {
+        if (this.props.has(token)) {
+            this.props.get(token).push(params);
+        }
+        else {
+            this.props.set(token, [params]);
+        }
+    }
+    getPropMetadata(token) {
+        return this.props.get(token);
+    }
+}
+
+/**
+ * 创建参数装饰器的工厂函数
+ */
+function makeParamDecorator(token, metadata) {
+    return function (target, propertyKey, parameterIndex) {
+        const annotations = getAnnotations(target);
+        annotations.pushParamMetadata(token, {
+            propertyKey: propertyKey,
+            parameterIndex,
+            metadata
+        });
+    };
+}
+/**
+ * 创建属性装饰器的工厂函数
+ */
+function makePropertyDecorator(token, injectToken, contextCallback) {
+    return function (target, propertyKey) {
+        const annotations = getAnnotations(target.constructor);
+        annotations.pushPropMetadata(token, {
+            injectToken: injectToken || Reflect.getMetadata('design:type', target, propertyKey),
+            propertyKey,
+            contextCallback
+        });
+    };
+}
+/**
+ * 创建类装饰器的工厂函数
+ */
+function makeClassDecorator(token, metadata) {
+    return function (target) {
+        const annotations = getAnnotations(target);
+        annotations.setClassMetadata(token, {
+            paramTypes: Reflect.getMetadata('design:paramtypes', target),
+            metadata
+        });
+    };
+}
+/**
+ * 获取类注解的工具函数
+ */
+function getAnnotations(target) {
+    const key = '__annotations__';
+    // eslint-disable-next-line no-prototype-builtins
+    if (!target.hasOwnProperty(key)) {
+        target[key] = new Annotations();
+    }
+    return target[key];
+}
+
+class Scope {
+    constructor(name) {
+        this.name = name;
+    }
+    toString() {
+        return this.name || '[anonymous provide scope]';
+    }
+}
+/**
+ * 可注入类的装饰器
+ */
+const Injectable = function InjectableDecorator(options) {
+    if (this instanceof InjectableDecorator) {
+        this.provideIn = (options === null || options === void 0 ? void 0 : options.provideIn) || null;
+    }
+    else {
+        return makeClassDecorator(Injectable, new Injectable(options));
+    }
+};
+
+/**
+ * 生成自定义依赖注入 token 的类
+ */
+class InjectionToken {
+    constructor(description) {
+        this.description = description;
+    }
+    toString() {
+        return this.description || '[anonymous injection token]';
+    }
+}
+
+/**
+ * 查找规则
+ */
+var InjectFlags;
+(function (InjectFlags) {
+    /** 默认查找规则 */
+    InjectFlags["Default"] = "Default";
+    /** 锁定当前容器 */
+    InjectFlags["Self"] = "Self";
+    /** 跳过当前容器 */
+    InjectFlags["SkipSelf"] = "SkipSelf";
+    /** 可选查找 */
+    InjectFlags["Optional"] = "Optional";
+})(InjectFlags || (InjectFlags = {}));
+/**
+ * DI 容器抽象基类
+ */
+class Injector {
+}
+
+function stringify(token) {
+    if (typeof token === 'string') {
+        return token;
+    }
+    if (Array.isArray(token)) {
+        return '[' + token.map(stringify).join(', ') + ']';
+    }
+    if (token == null) {
+        return '' + token;
+    }
+    if (token.name) {
+        return `${token.name}`;
+    }
+    if (token.token) {
+        return `${token.token}`;
+    }
+    const res = token.toString();
+    if (res == null) {
+        return '' + res;
+    }
+    const newLineIndex = res.indexOf('\n');
+    return newLineIndex === -1 ? res : res.substring(0, newLineIndex);
+}
 
 function makeError(name) {
     return function viewflyError(message) {
@@ -12,41 +193,356 @@ function makeError(name) {
     };
 }
 
-class NativeRenderer {
+const THROW_IF_NOT_FOUND = {
+    __debug_value__: 'THROW_IF_NOT_FOUND'
+};
+const nullInjectorErrorFn = (token) => {
+    return makeError('NullInjector')(`No provide for \`${stringify(token)}\`!`);
+};
+class NullInjector extends Injector {
+    constructor() {
+        super(...arguments);
+        this.parentInjector = null;
+    }
+    get(token, notFoundValue = THROW_IF_NOT_FOUND) {
+        if (notFoundValue === THROW_IF_NOT_FOUND) {
+            throw nullInjectorErrorFn(token);
+        }
+        return notFoundValue;
+    }
 }
 
-/******************************************************************************
-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, SuppressedError, Symbol */
-
-
-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);
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+/**
+ * 构造函数参数装饰器，用于改变注入 token
+ */
+const Inject = function InjectDecorator(token) {
+    if (this instanceof Inject) {
+        this.token = token;
+    }
+    else {
+        return makeParamDecorator(Inject, new Inject(token));
+    }
+};
+const Self = function SelfDecorator() {
+    if (!(this instanceof Self)) {
+        return makeParamDecorator(Self, new Self());
+    }
+};
+const SkipSelf = function SkipSelfDecorator() {
+    if (!(this instanceof SkipSelf)) {
+        return makeParamDecorator(SkipSelf, new SkipSelf());
+    }
+};
+const Optional = function OptionalDecorator() {
+    if (!(this instanceof Optional)) {
+        return makeParamDecorator(Optional, new Optional());
+    }
+};
+const Prop = function PropDecorator(token, notFoundValue = THROW_IF_NOT_FOUND, flags) {
+    if (!(this instanceof Prop)) {
+        return makePropertyDecorator(Prop, token, function (instance, propertyName, token, injector) {
+            instance[propertyName] = injector.get(token instanceof ForwardRef ? token.getRef() : token, notFoundValue, flags);
+        });
+    }
+};
+
+/**
+ * 标准化 provide，并返回统一数据结构
+ * @param provider
+ */
+function normalizeProvider(provider) {
+    if (provider.useValue) {
+        return normalizeValueProviderFactory(provider);
+    }
+    if (provider.useClass) {
+        return normalizeClassProviderFactory(provider);
+    }
+    if (provider.useExisting) {
+        return normalizeExistingProviderFactory(provider);
+    }
+    if (provider.useFactory) {
+        return normalizeFactoryProviderFactory(provider);
+    }
+    if (provider.provide) {
+        if (provider.provide instanceof InjectionToken) {
+            return normalizeValueProviderFactory(provider);
+        }
+        return normalizeConstructorProviderFactory(provider);
+    }
+    return normalizeTypeProviderFactory(provider);
+}
+function normalizeValueProviderFactory(provider) {
+    return {
+        provide: provider.provide,
+        scope: null,
+        generateFactory() {
+            return function () {
+                return provider.useValue;
+            };
+        },
+        deps: []
+    };
+}
+function normalizeClassProviderFactory(provider) {
+    let deps;
+    let provideIn = null;
+    if (provider.deps) {
+        deps = normalizeDeps(provider.provide, provider.deps);
+    }
+    else {
+        const resolvedClass = resolveClassParams(provider.useClass);
+        provideIn = resolvedClass.scope;
+        deps = normalizeDeps(provider.provide, resolvedClass.deps);
+    }
+    return {
+        provide: provider.provide,
+        scope: provideIn,
+        deps,
+        generateFactory(injector, cacheFn) {
+            return function (...args) {
+                const instance = new provider.useClass(...args);
+                cacheFn(provider.provide, instance);
+                const propMetadataKeys = getAnnotations(provider.useClass).getPropMetadataKeys();
+                propMetadataKeys.forEach(key => {
+                    const propsMetadata = getAnnotations(provider.useClass).getPropMetadata(key);
+                    propsMetadata.forEach(item => {
+                        item.contextCallback(instance, item.propertyKey, item.injectToken, injector);
+                    });
+                });
+                return instance;
+            };
+        }
+    };
+}
+function normalizeExistingProviderFactory(provider) {
+    return {
+        provide: provider.provide,
+        scope: null,
+        generateFactory(injector) {
+            return function () {
+                return injector.get(provider.useExisting);
+            };
+        },
+        deps: []
+    };
+}
+function normalizeFactoryProviderFactory(provider) {
+    return {
+        provide: provider.provide,
+        scope: null,
+        generateFactory() {
+            return function (...args) {
+                return provider.useFactory(...args);
+            };
+        },
+        deps: normalizeDeps(provider.provide, provider.deps || [])
+    };
+}
+function normalizeConstructorProviderFactory(provider) {
+    return normalizeClassProviderFactory(Object.assign(Object.assign({}, provider), { useClass: provider.provide }));
+}
+function normalizeTypeProviderFactory(provider) {
+    return normalizeClassProviderFactory({
+        provide: provider,
+        useClass: provider
+    });
+}
+function resolveClassParams(construct) {
+    const annotations = getAnnotations(construct);
+    const metadata = annotations.getClassMetadata(Injectable);
+    if (typeof metadata === 'undefined') {
+        throw new Error(`Class \`${stringify(construct)}\` is not injectable!`);
+    }
+    const deps = (metadata.paramTypes || []).map(i => [i]);
+    const metadataKeys = [Inject, Self, SkipSelf, Optional];
+    metadataKeys.forEach(key => {
+        (annotations.getParamMetadata(key) || []).forEach(item => {
+            deps[item.parameterIndex].push(item.metadata);
+        });
+    });
+    return {
+        scope: metadata.metadata.provideIn,
+        deps
+    };
+}
+function normalizeDeps(provide, deps) {
+    return deps.map((dep, index) => {
+        const r = {
+            injectKey: null,
+            optional: false,
+            visibility: null
+        };
+        if (!Array.isArray(dep)) {
+            r.injectKey = dep;
+        }
+        else {
+            for (let i = 0; i < dep.length; i++) {
+                const item = dep[i];
+                if (item instanceof Inject) {
+                    r.injectKey = item.token;
+                }
+                else if (item instanceof Self || item instanceof SkipSelf) {
+                    r.visibility = item;
+                }
+                else if (item instanceof Optional) {
+                    r.optional = true;
+                }
+                else {
+                    r.injectKey = item;
+                }
+            }
+        }
+        if (typeof r.injectKey === 'undefined') {
+            throw new Error(`The ${index} th dependent parameter type of \`${stringify(provide)}\` was not obtained,
+if the dependency is declared later, you can refer to it using \`constructor(@Inject(forwardRef(() => [Type|InjectionToken])) paramName: [Type]) {}\``);
+        }
+        return r;
+    });
+}
+
+const reflectiveInjectorErrorFn = (token) => {
+    return makeError('ReflectiveInjector')(`No provide for \`${stringify(token)}\`!`);
+};
+const provideScopeError = (token) => {
+    return makeError('ProvideScope')(`Can not found provide scope \`${stringify(token)}\`!`);
 };
+/**
+ * 反射注入器
+ */
+class ReflectiveInjector extends Injector {
+    constructor(parentInjector, staticProviders, scope) {
+        super();
+        this.parentInjector = parentInjector;
+        this.staticProviders = staticProviders;
+        this.scope = scope;
+        this.recordValues = new Map();
+        this.normalizedProviders = staticProviders.map(provide => {
+            return normalizeProvider(provide);
+        });
+    }
+    /**
+     * 用于获取当前注入器上下文内的实例、对象或数据
+     * @param token 访问 token
+     * @param notFoundValue 如未查找到的返回值
+     * @param flags 查询规则
+     */
+    get(token, notFoundValue = THROW_IF_NOT_FOUND, flags) {
+        var _a;
+        flags = flags || InjectFlags.Default;
+        if (flags === InjectFlags.SkipSelf) {
+            if (this.parentInjector) {
+                return this.parentInjector.get(token, notFoundValue);
+            }
+            if (notFoundValue !== THROW_IF_NOT_FOUND) {
+                return notFoundValue;
+            }
+            throw reflectiveInjectorErrorFn(token);
+        }
+        if (this.recordValues.has(token)) {
+            return this.recordValues.get(token);
+        }
+        for (let i = 0; i < this.normalizedProviders.length; i++) {
+            const normalizedProvider = this.normalizedProviders[i];
+            if (normalizedProvider.provide === token) {
+                return this.getValue(token, THROW_IF_NOT_FOUND, normalizedProvider);
+            }
+        }
+        if (!(token instanceof InjectionToken)) {
+            const scope = (_a = getAnnotations(token).getClassMetadata(Injectable)) === null || _a === void 0 ? void 0 : _a.metadata.provideIn;
+            if (scope) {
+                const normalizedProvider = normalizeProvider(token);
+                if (this.scope === scope) {
+                    this.normalizedProviders.push(normalizedProvider);
+                    return this.getValue(token, THROW_IF_NOT_FOUND, normalizedProvider);
+                }
+                const parentInjector = this.parentInjector;
+                if (!parentInjector || parentInjector instanceof NullInjector) {
+                    if (normalizedProvider.scope === 'root') {
+                        this.normalizedProviders.push(normalizedProvider);
+                        return this.getValue(token, THROW_IF_NOT_FOUND, normalizedProvider);
+                    }
+                    if (notFoundValue !== THROW_IF_NOT_FOUND) {
+                        return notFoundValue;
+                    }
+                    throw provideScopeError(normalizedProvider.scope);
+                }
+            }
+        }
+        if (flags === InjectFlags.Self) {
+            if (notFoundValue === THROW_IF_NOT_FOUND) {
+                throw reflectiveInjectorErrorFn(token);
+            }
+            return notFoundValue;
+        }
+        if (this.parentInjector) {
+            return this.parentInjector.get(token, notFoundValue, flags === InjectFlags.Optional ? InjectFlags.Optional : InjectFlags.Default);
+        }
+        if (notFoundValue === THROW_IF_NOT_FOUND) {
+            throw reflectiveInjectorErrorFn(token);
+        }
+        return notFoundValue;
+    }
+    getValue(token, notFoundValue, normalizedProvider) {
+        const { generateFactory, deps } = normalizedProvider;
+        const params = this.resolveDeps(deps, notFoundValue);
+        let value = this.recordValues.get(token);
+        if (value) {
+            return value;
+        }
+        const factory = generateFactory(this, (token, value) => {
+            this.recordValues.set(token, value);
+        });
+        value = factory(...params);
+        this.recordValues.set(token, value);
+        return value;
+    }
+    /**
+     * 解决并获取依赖参数
+     * @param deps 依赖规则
+     * @param notFoundValue 未查找到时的返回值
+     * @private
+     */
+    resolveDeps(deps, notFoundValue) {
+        return deps.map(dep => {
+            let reflectiveValue;
+            const tryValue = {};
+            const injectToken = dep.injectKey instanceof ForwardRef ? dep.injectKey.getRef() : dep.injectKey;
+            if (dep.visibility instanceof Self) {
+                reflectiveValue = this.get(injectToken, tryValue, InjectFlags.Self);
+            }
+            else if (dep.visibility instanceof SkipSelf) {
+                if (this.parentInjector) {
+                    reflectiveValue = this.parentInjector.get(injectToken, tryValue);
+                }
+                else {
+                    if (dep.optional) {
+                        // if (notFoundValue === THROW_IF_NOT_FOUND) {
+                        //   return null
+                        // }
+                        return null;
+                    }
+                    throw reflectiveInjectorErrorFn(injectToken);
+                }
+            }
+            else {
+                reflectiveValue = this.get(injectToken, tryValue);
+            }
+            if (reflectiveValue === tryValue) {
+                if (dep.optional) {
+                    // if (notFoundValue === THROW_IF_NOT_FOUND) {
+                    //   return null
+                    // }
+                    // return notFoundValue
+                    return null;
+                }
+                throw reflectiveInjectorErrorFn(injectToken);
+            }
+            return reflectiveValue;
+        });
+    }
+}
+
+const Type = Function;
 
 const refKey = 'ref';
 function getObjectChanges(newProps, oldProps) {
@@ -152,7 +648,10 @@ class Component extends ReflectiveInjector {
         return this._changed;
     }
     constructor(context, type, props, key) {
-        super(context, []);
+        super(context, [{
+                provide: Injector,
+                useFactory: () => this
+            }]);
         this.type = type;
         this.props = props;
         this.key = key;
@@ -171,11 +670,11 @@ class Component extends ReflectiveInjector {
     is(target) {
         return target.$$typeOf === this.$$typeOf;
     }
-    addProvide(providers) {
+    provide(providers) {
         providers = Array.isArray(providers) ? providers : [providers];
         this.normalizedProviders.unshift(...providers.map(i => normalizeProvider(i)));
     }
-    init() {
+    setup() {
         const self = this;
         const props = new Proxy(this.props, {
             get(_, key) {
@@ -603,7 +1102,7 @@ function useEffect(deps, effect) {
  */
 function provide(provider) {
     const component = getSetupContext();
-    component.addProvide(provider);
+    component.provide(provider);
     return component;
 }
 /**
@@ -611,7 +1110,7 @@ function provide(provider) {
  */
 function inject(token, notFoundValue, flags) {
     const component = getSetupContext();
-    return component.parentInjector.get(token, notFoundValue, flags);
+    return component.get(token, notFoundValue, flags || InjectFlags.SkipSelf);
 }
 
 function Fragment(props) {
@@ -660,18 +1159,57 @@ function withMemo(shouldUpdate, render) {
  * Viewfly 根组件，用于实现组件状态更新事件通知
  */
 class RootComponent extends Component {
-    constructor(factory, parentInjector = new NullInjector()) {
+    constructor(factory, parentInjector) {
         super(parentInjector, factory, {});
-        this.changeEmitter = new Subject();
+        this.onChange = null;
     }
     markAsChanged() {
+        var _a;
         this._changed = true;
-        this.changeEmitter.next();
+        (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this);
     }
 }
 
+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, SuppressedError, Symbol */
+
+
+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);
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 class RootComponentRef {
 }
+class HostRef {
+}
 class Atom {
     constructor(jsxNode, parent) {
         this.jsxNode = jsxNode;
@@ -682,25 +1220,30 @@ class Atom {
     }
 }
 let Renderer = class Renderer {
-    constructor(nativeRenderer, rootComponentRef) {
+    constructor(nativeRenderer, rootComponentRef, hostRef) {
         this.nativeRenderer = nativeRenderer;
         this.rootComponentRef = rootComponentRef;
+        this.hostRef = hostRef;
         this.componentAtomCaches = new WeakMap();
+        this.isInit = true;
     }
     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
-        });
+        const component = this.rootComponentRef.component;
+        const host = this.hostRef.host;
+        if (this.isInit) {
+            const atom = new Atom(component, null);
+            this.buildView(atom, {
+                isParent: true,
+                host
+            });
+        }
+        else {
+            this.reconcile(component, {
+                host,
+                isParent: true
+            });
+        }
+        this.isInit = false;
     }
     reconcile(component, context) {
         if (component.dirty) {
@@ -1018,7 +1561,7 @@ let Renderer = class Renderer {
         }
     }
     componentRender(component, from) {
-        const { template, render } = component.init();
+        const { template, render } = component.setup();
         if (template) {
             this.linkTemplate(template, component, from);
         }
@@ -1255,7 +1798,8 @@ let Renderer = class Renderer {
 Renderer = __decorate([
     Injectable(),
     __metadata("design:paramtypes", [NativeRenderer,
-        RootComponentRef])
+        RootComponentRef,
+        HostRef])
 ], Renderer);
 
 const viewflyErrorFn = makeError('Viewfly');
@@ -1264,8 +1808,7 @@ const viewflyErrorFn = makeError('Viewfly');
  */
 class Viewfly extends ReflectiveInjector {
     constructor(config) {
-        super(new NullInjector(), [
-            ...(config.providers || []),
+        super(config.context || new NullInjector(), [
             Renderer,
             {
                 provide: RootComponentRef,
@@ -1280,46 +1823,78 @@ class Viewfly extends ReflectiveInjector {
                 useFactory() {
                     throw viewflyErrorFn('You must implement the `NativeRenderer` interface to start Viewfly!');
                 }
+            },
+            {
+                provide: HostRef,
+                useFactory() {
+                    throw viewflyErrorFn('Viewfly has not mounted!');
+                }
             }
         ]);
         this.config = config;
         this.destroyed = false;
-        this.subscription = new Subscription();
+        this.task = null;
         this.rootComponent = this.createRootComponent(config.root);
     }
+    provide(providers) {
+        providers = Array.isArray(providers) ? providers : [providers];
+        this.normalizedProviders.unshift(...providers.map(i => normalizeProvider(i)));
+        return this;
+    }
     /**
      * 启动 Viewfly
      * @param host 应用根节点
      */
     mount(host) {
-        const rootComponentRef = this.get(RootComponentRef);
-        rootComponentRef.host = host;
+        this.provide({
+            provide: HostRef,
+            useValue: {
+                host
+            }
+        });
         const renderer = this.get(Renderer);
         renderer.render();
         if (this.config.autoUpdate === false) {
-            return;
+            return this;
         }
-        this.subscription.add(this.rootComponent.changeEmitter.pipe(microTask()).subscribe(() => {
-            renderer.refresh();
-        }));
+        const refresh = () => {
+            if (this.destroyed) {
+                return;
+            }
+            renderer.render();
+        };
+        this.rootComponent.onChange = () => {
+            this.microTask(refresh);
+        };
+        return this;
+    }
+    render() {
+        const renderer = this.get(Renderer);
+        renderer.render();
     }
     /**
      * 销毁 Viewfly 实例
      */
     destroy() {
-        const renderer = this.get(Renderer);
         this.destroyed = true;
         this.rootComponent.markAsDirtied();
-        this.subscription.unsubscribe();
-        renderer.refresh();
+        this.render();
     }
     createRootComponent(rootNode) {
         return new RootComponent(() => {
             return () => {
                 return this.destroyed ? null : rootNode;
             };
-        }, this.config.context);
+        }, this);
+    }
+    microTask(callback) {
+        if (!this.task) {
+            this.task = Promise.resolve().then(() => {
+                this.task = null;
+                callback();
+            });
+        }
     }
 }
 
-export { Component, Fragment, JSXComponent, JSXElement, JSXText, NativeRenderer, Ref, Renderer, RootComponent, RootComponentRef, Viewfly, inject, jsx, jsxs, makeError, onDestroy, onMounted, onPropsChanged, onUpdated, provide, useDerived, useEffect, useRef, useSignal, withMemo };
+export { Component, ForwardRef, Fragment, HostRef, Inject, InjectFlags, Injectable, InjectionToken, Injector, JSXComponent, JSXElement, JSXText, NativeRenderer, NullInjector, Optional, Prop, Ref, ReflectiveInjector, Renderer, RootComponent, RootComponentRef, Scope, Self, SkipSelf, THROW_IF_NOT_FOUND, Type, Viewfly, forwardRef, inject, jsx, jsxs, makeError, normalizeProvider, onDestroy, onMounted, onPropsChanged, onUpdated, provide, useDerived, useEffect, useRef, useSignal, withMemo };