@viewfly/core 1.1.10 → 1.2.1

package/bundles/index.d.ts

@@ -413,19 +413,14 @@ interface ComponentInstance<P> {
     $useMemo?(currentProps: P, prevProps: P): boolean;
 }
 type JSXNode = JSX.Element | JSX.ElementClass | string | number | boolean | null | undefined | Iterable<JSXNode>;
-interface ComponentAnnotation {
-    scope?: Scope;
-    providers?: Provider[];
-}
 interface ComponentSetup<P = any> {
     (props: P): (() => JSXNode) | ComponentInstance<P>;
-    annotation?: ComponentAnnotation;
 }
 /**
  * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
  */
-declare class Component extends ReflectiveInjector {
-    private readonly parentComponent;
+declare class Component {
+    readonly parentComponent: Component | null;
     readonly type: ComponentSetup;
     props: Props;
     readonly key?: Key | undefined;
@@ -444,18 +439,31 @@ declare class Component extends ReflectiveInjector {
     private isFirstRendering;
     private refs;
     private listener;
-    constructor(parentComponent: Injector | null, type: ComponentSetup, props: Props, key?: Key | undefined);
+    constructor(parentComponent: Component | null, type: ComponentSetup, props: Props, key?: Key | undefined);
     markAsDirtied(): void;
     markAsChanged(changedComponent?: Component): void;
     render(update: (template: JSXNode, portalHost?: NativeNode) => void): void;
     update(newProps: Record<string, any>, updateChildren: (jsxNode: JSXNode) => void, reuseChildren: (skipSubComponentDiff: boolean) => void): void;
-    provide<T>(providers: Provider<T> | Provider<T>[]): void;
     destroy(): void;
     rendered(): void;
     private invokePropsChangedHooks;
     private invokeMountHooks;
     private invokeUpdatedHooks;
 }
+/**
+ * 获取当前组件实例
+ */
+declare function getCurrentInstance(): Component;
+
+declare function createContext(providers: Provider[], scope?: Scope, parentInjector?: Injector): (props: Props) => () => JSXNode | JSXNode[];
+/**
+ * 通过组件上下文获取 IoC 容器内数据的勾子方法
+ */
+declare function inject<T extends Type<any> | AbstractType<any> | InjectionToken<any>, U = never>(token: T, notFoundValue?: U, flags?: InjectFlags): ExtractValueType<T> | U;
+interface ComponentAnnotation {
+    scope?: Scope;
+    providers?: Provider[];
+}
 /**
  * 给组件添加注解
  * @param annotation
@@ -476,15 +484,6 @@ declare class Component extends ReflectiveInjector {
  * ```
  */
 declare function withAnnotation<T extends ComponentSetup>(annotation: ComponentAnnotation, componentSetup: T): T;
-/**
- * 通过组件上下文获取 IoC 容器内数据的勾子方法
- */
-declare function inject<T extends Type<any> | AbstractType<any> | InjectionToken<any>, U = never>(token: T, notFoundValue?: U, flags?: InjectFlags): ExtractValueType<T> | U;
-/**
- * 获取当前组件实例
- */
-declare function getCurrentInstance(): Component;
-
 interface ContextProps extends Props {
     providers: Provider[];
 }
@@ -492,7 +491,10 @@ declare function Context(props: ContextProps): () => ViewFlyNode<string | Compon
 
 declare function withMemo<T extends Props = Props>(canUseMemo: ComponentInstance<T>['$useMemo'], render: () => JSXNode): ComponentInstance<T>;
 
-declare const ElementNamespaceMap: Record<string, string>;
+declare const ElementNamespaceMap: {
+    readonly svg: "svg";
+    readonly math: "mathml";
+};
 declare function createRenderer(component: Component, nativeRenderer: NativeRenderer, namespace: ElementNamespace): (host: NativeNode) => void;
 
 /**
@@ -500,7 +502,7 @@ declare function createRenderer(component: Component, nativeRenderer: NativeRend
  */
 declare class RootComponent extends Component {
     private refresh;
-    constructor(parentInjector: Injector | null, factory: ComponentSetup, refresh: () => void);
+    constructor(factory: ComponentSetup, refresh: () => void);
     markAsChanged(changedComponent?: Component): void;
 }
 
@@ -602,4 +604,4 @@ interface Module {
 }
 declare function viewfly<T extends NativeNode>(config: Config): Application<T>;
 
-export { type AbstractInstanceType, type AbstractProvider, type AbstractType, type Application, type Atom, type ClassNames, type ClassProvider, Component, type ComponentAnnotation, type ComponentInstance, type ComponentSetup, type ComponentView, type Config, type ConstructorProvider, Context, type ContextProps, DynamicRef, type ElementNamespace, ElementNamespaceMap, type ExistingProvider, type ExtractInstanceType, type ExtractValueType, type FactoryProvider, ForwardRef, Fragment, Inject, type InjectDecorator, InjectFlags, Injectable, type InjectableDecorator, type InjectableOptions, InjectionToken, Injector, JSX, type JSXNode, JSXNodeFactory, type Key, type LifeCycleCallback, type Module, type NativeNode, NativeRenderer, type NormalizedProvider, NullInjector, Optional, type OptionalDecorator, Prop, type PropDecorator, type Props, type PropsChangedCallback, type ProvideScope, type Provider, type RefListener, type ReflectiveDependency, ReflectiveInjector, RootComponent, Scope, Self, type SelfDecorator, type Signal, SkipSelf, type SkipSelfDecorator, type StaticProvider, StaticRef, THROW_IF_NOT_FOUND, Type, type TypeProvider, type ValueProvider, type ViewFlyNode, type WatchCallback, computed, createDerived, createDynamicRef, createRef, createRenderer, createSignal, forwardRef, getCurrentInstance, getSetupContext, inject, jsx, jsxs, makeError, normalizeProvider, onMounted, onPropsChanged, onUnmounted, onUpdated, viewfly, watch, withAnnotation, withMemo };
+export { type AbstractInstanceType, type AbstractProvider, type AbstractType, type Application, type Atom, type ClassNames, type ClassProvider, Component, type ComponentAnnotation, type ComponentInstance, type ComponentSetup, type ComponentView, type Config, type ConstructorProvider, Context, type ContextProps, DynamicRef, type ElementNamespace, ElementNamespaceMap, type ExistingProvider, type ExtractInstanceType, type ExtractValueType, type FactoryProvider, ForwardRef, Fragment, Inject, type InjectDecorator, InjectFlags, Injectable, type InjectableDecorator, type InjectableOptions, InjectionToken, Injector, JSX, type JSXNode, JSXNodeFactory, type Key, type LifeCycleCallback, type Module, type NativeNode, NativeRenderer, type NormalizedProvider, NullInjector, Optional, type OptionalDecorator, Prop, type PropDecorator, type Props, type PropsChangedCallback, type ProvideScope, type Provider, type RefListener, type ReflectiveDependency, ReflectiveInjector, RootComponent, Scope, Self, type SelfDecorator, type Signal, SkipSelf, type SkipSelfDecorator, type StaticProvider, StaticRef, THROW_IF_NOT_FOUND, Type, type TypeProvider, type ValueProvider, type ViewFlyNode, type WatchCallback, computed, createContext, createDerived, createDynamicRef, createRef, createRenderer, createSignal, forwardRef, getCurrentInstance, getSetupContext, inject, jsx, jsxs, makeError, normalizeProvider, onMounted, onPropsChanged, onUnmounted, onUpdated, viewfly, watch, withAnnotation, withMemo };

package/bundles/index.esm.js

@@ -912,7 +912,7 @@ function toRefs(ref) {
 /**
  * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
  */
-class Component extends ReflectiveInjector {
+class Component {
     get dirty() {
         return this._dirty;
     }
@@ -920,12 +920,6 @@ class Component extends ReflectiveInjector {
         return this._changed;
     }
     constructor(parentComponent, type, props, key) {
-        const annotation = type.annotation || {};
-        const providers = annotation.providers || [];
-        super(parentComponent, [...providers, {
-                provide: Injector,
-                useFactory: () => this
-            }], annotation.scope);
         Object.defineProperty(this, "parentComponent", {
             enumerable: true,
             configurable: true,
@@ -962,7 +956,6 @@ class Component extends ReflectiveInjector {
             writable: true,
             value: new Set()
         });
-        // $$view!: ComponentView
         Object.defineProperty(this, "unmountedCallbacks", {
             enumerable: true,
             configurable: true,
@@ -1132,10 +1125,6 @@ class Component extends ReflectiveInjector {
         updateChildren(template);
         this.rendered();
     }
-    provide(providers) {
-        providers = Array.isArray(providers) ? providers : [providers];
-        this.normalizedProviders.unshift(...providers.map(i => normalizeProvider(i)));
-    }
     destroy() {
         var _a, _b, _c;
         this.listener.destroy();
@@ -1152,13 +1141,12 @@ class Component extends ReflectiveInjector {
             this.parentComponent.changedSubComponents.delete(this);
         }
         this.parentComponent =
-            this.parentInjector =
-                this.propsChangedDestroyCallbacks =
-                    this.updatedDestroyCallbacks =
-                        this.mountCallbacks =
-                            this.updatedCallbacks =
-                                this.propsChangedCallbacks =
-                                    this.unmountedCallbacks = null;
+            this.propsChangedDestroyCallbacks =
+                this.updatedDestroyCallbacks =
+                    this.mountCallbacks =
+                        this.updatedCallbacks =
+                            this.propsChangedCallbacks =
+                                this.unmountedCallbacks = null;
         this.changedSubComponents.clear();
     }
     rendered() {
@@ -1235,39 +1223,6 @@ class Component extends ReflectiveInjector {
         }
     }
 }
-/**
- * 给组件添加注解
- * @param annotation
- * @param componentSetup
- * @example
- * ```ts
- * export customScope = new Scope('scopeName')
- * export const App = withAnnotation({
- *   scope: customScope,
- *   providers: [
- *     ExampleService
- *   ]
- * }, function(props: Props) {
- *   return () => {
- *     return <div>...</div>
- *   }
- * })
- * ```
- */
-function withAnnotation(annotation, componentSetup) {
-    const setup = function setup(props) {
-        return componentSetup(props);
-    };
-    setup.annotation = annotation;
-    return setup;
-}
-/**
- * 通过组件上下文获取 IoC 容器内数据的勾子方法
- */
-function inject(token, notFoundValue = THROW_IF_NOT_FOUND, flags) {
-    const component = getSetupContext();
-    return component.get(token, notFoundValue, flags);
-}
 /**
  * 获取当前组件实例
  */
@@ -1294,6 +1249,63 @@ const JSXNodeFactory = {
     }
 };
 
+const injectMap = new WeakMap();
+function getInjector(start) {
+    while (start) {
+        const injector = injectMap.get(start);
+        if (injector) {
+            return injector;
+        }
+        start = start.parentComponent;
+    }
+    return new NullInjector();
+}
+function createContext(providers, scope, parentInjector) {
+    return function context(props) {
+        const instance = getCurrentInstance();
+        const injector = new ReflectiveInjector(parentInjector || getInjector(instance), providers, scope);
+        injectMap.set(instance, injector);
+        return () => {
+            return props.children;
+        };
+    };
+}
+/**
+ * 通过组件上下文获取 IoC 容器内数据的勾子方法
+ */
+function inject(token, notFoundValue = THROW_IF_NOT_FOUND, flags) {
+    const component = getCurrentInstance();
+    const injector = getInjector(component);
+    return injector.get(token, notFoundValue, flags);
+}
+/**
+ * 给组件添加注解
+ * @param annotation
+ * @param componentSetup
+ * @example
+ * ```ts
+ * export customScope = new Scope('scopeName')
+ * export const App = withAnnotation({
+ *   scope: customScope,
+ *   providers: [
+ *     ExampleService
+ *   ]
+ * }, function(props: Props) {
+ *   return () => {
+ *     return <div>...</div>
+ *   }
+ * })
+ * ```
+ */
+function withAnnotation(annotation, componentSetup) {
+    return function (props) {
+        const instance = getCurrentInstance();
+        const parentInjector = injectMap.get(instance) || getInjector(instance.parentComponent);
+        const injector = new ReflectiveInjector(parentInjector, annotation.providers || [], annotation.scope);
+        injectMap.set(instance, injector);
+        return componentSetup(props);
+    };
+}
 function Context(props) {
     function createContextComponent(providers) {
         return withAnnotation({
@@ -1408,9 +1420,8 @@ function applyChanges(nativeRenderer, component, atom, context, needMove) {
             view.host = context.host;
             view.isParent = context.isParent;
         }
-    }, () => {
-        // console.log(skipSubComponentDiff, '----')
-        //
+    }, (skipSubComponentDiff) => {
+        reuseComponentView(nativeRenderer, atom, context, needMove, skipSubComponentDiff);
     });
 }
 function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, needMove) {
@@ -1580,27 +1591,31 @@ function cleanElementChildren(atom, nativeRenderer) {
     }
 }
 function cleanView(nativeRenderer, atom, needClean) {
-    if (atom.nativeNode) {
-        if (needClean) {
-            nativeRenderer.remove(atom.nativeNode, atom.namespace);
-            needClean = false;
-        }
-        if (atom.type === ElementAtomType) {
-            const ref = atom.jsxNode.props[refKey];
-            applyRefs(ref, atom.nativeNode, false);
+    if (atom.type === ComponentAtomType) {
+        const jsxNode = atom.jsxNode;
+        if (jsxNode.instance.$portalHost) {
+            needClean = true;
         }
+        cleanChildren(atom, nativeRenderer, needClean);
+        jsxNode.destroy();
+        return;
     }
+    if (needClean) {
+        nativeRenderer.remove(atom.nativeNode, atom.namespace);
+        needClean = false;
+    }
+    if (atom.type === ElementAtomType) {
+        const ref = atom.jsxNode.props[refKey];
+        applyRefs(ref, atom.nativeNode, false);
+    }
+    cleanChildren(atom, nativeRenderer, needClean);
+}
+function cleanChildren(atom, nativeRenderer, needClean) {
     let child = atom.child;
     while (child) {
-        if (child.jsxNode instanceof Component && child.jsxNode.instance.$portalHost) {
-            needClean = true;
-        }
         cleanView(nativeRenderer, child, needClean);
         child = child.sibling;
     }
-    if (atom.jsxNode instanceof Component) {
-        atom.jsxNode.destroy();
-    }
 }
 function componentRender(nativeRenderer, component, from, context) {
     component.render((template, portalHost) => {
@@ -1653,7 +1668,9 @@ function createChainByNode(jsxNode, prevAtom, elementNamespace) {
     return prevAtom;
 }
 function createChainByChildren(children, prevAtom, elementNamespace) {
-    for (const item of children) {
+    const len = children.length;
+    for (let i = 0; i < len; i++) {
+        const item = children[i];
         prevAtom = createChainByNode(item, prevAtom, elementNamespace);
     }
     return prevAtom;
@@ -1676,6 +1693,12 @@ function insertNode(nativeRenderer, atom, context) {
         nativeRenderer.insertAfter(atom.nativeNode, context.host, atom.namespace);
     }
 }
+function createElementChildren(type, children, namespace) {
+    if (type === 'foreignObject' && namespace === ElementNamespaceMap.svg) {
+        return createChildChain(children, void 0);
+    }
+    return createChildChain(children, namespace);
+}
 function createElement(nativeRenderer, atom, parentComponent, context) {
     const { namespace, jsxNode } = atom;
     const nativeNode = nativeRenderer.createElement(jsxNode.type, namespace);
@@ -1683,7 +1706,7 @@ function createElement(nativeRenderer, atom, parentComponent, context) {
     let bindingRefs;
     for (const key in props) {
         if (key === 'children') {
-            atom.child = createChildChain(jsxNode.props.children, namespace);
+            atom.child = createElementChildren(jsxNode.type, props.children, namespace);
             continue;
         }
         if (key === 'class') {
@@ -1745,7 +1768,9 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
     let unBindRefs;
     let bindRefs;
     let updatedChildren = false;
-    for (const [key, value] of changes.remove) {
+    let len = changes.remove.length;
+    for (let i = 0; i < len; i++) {
+        const [key, value] = changes.remove[i];
         if (key === 'children') {
             updatedChildren = true;
             cleanElementChildren(oldAtom, nativeRenderer);
@@ -1773,10 +1798,12 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
         }
         nativeRenderer.removeProperty(nativeNode, key, isSvg);
     }
-    for (const [key, newValue, oldValue] of changes.replace) {
+    len = changes.replace.length;
+    for (let i = 0; i < len; i++) {
+        const [key, newValue, oldValue] = changes.replace[i];
         if (key === 'children') {
             updatedChildren = true;
-            newAtom.child = createChildChain(newValue, isSvg);
+            newAtom.child = createElementChildren(newVNode.type, newValue, isSvg);
             if (!newAtom.child) {
                 cleanElementChildren(oldAtom, nativeRenderer);
             }
@@ -1818,10 +1845,12 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
         }
         nativeRenderer.setProperty(nativeNode, key, newValue, isSvg);
     }
-    for (const [key, value] of changes.add) {
+    len = changes.add.length;
+    for (let i = 0; i < len; i++) {
+        const [key, value] = changes.add[i];
         if (key === 'children') {
             updatedChildren = true;
-            newAtom.child = createChildChain(value, isSvg);
+            newAtom.child = createElementChildren(newVNode.type, value, isSvg);
             buildElementChildren(newAtom, nativeRenderer, parentComponent, context);
             continue;
         }
@@ -1858,7 +1887,9 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
 function applyRefs(refs, nativeNode, binding) {
     if (refs) {
         const refList = Array.isArray(refs) ? refs : [refs];
-        for (const item of refList) {
+        const len = refList.length;
+        for (let i = 0; i < len; i++) {
+            const item = refList[i];
             if (item instanceof DynamicRef) {
                 binding ? item.bind(nativeNode) : item.unBind(nativeNode);
             }
@@ -1870,8 +1901,8 @@ function applyRefs(refs, nativeNode, binding) {
  * Viewfly 根组件，用于实现组件状态更新事件通知
  */
 class RootComponent extends Component {
-    constructor(parentInjector, factory, refresh) {
-        super(parentInjector, factory, {});
+    constructor(factory, refresh) {
+        super(null, factory, {});
         Object.defineProperty(this, "refresh", {
             enumerable: true,
             configurable: true,
@@ -2021,16 +2052,15 @@ function viewfly(config) {
     const modules = [];
     let destroyed = false;
     let appHost = null;
-    const rootComponent = new RootComponent(context || null, withAnnotation({
-        providers: [{
-                provide: NativeRenderer,
-                useValue: nativeRenderer
-            }]
-    }, () => {
+    const rootProviders = [];
+    const rootComponent = new RootComponent(() => {
+        const rootContext = createContext(rootProviders, void 0, context);
         return () => {
-            return destroyed ? null : root;
+            return jsx(rootContext, {
+                children: destroyed ? null : root
+            });
         };
-    }), function () {
+    }, function () {
         if (destroyed || !autoUpdate) {
             return;
         }
@@ -2052,7 +2082,8 @@ function viewfly(config) {
     }
     const app = {
         provide(providers) {
-            rootComponent.provide(providers);
+            providers = Array.isArray(providers) ? providers : [providers];
+            rootProviders.push(...providers);
             return app;
         },
         use(module) {
@@ -2102,4 +2133,4 @@ function viewfly(config) {
     return app;
 }
 
-export { Component, Context, DynamicRef, ElementNamespaceMap, ForwardRef, Fragment, Inject, InjectFlags, Injectable, InjectionToken, Injector, JSXNodeFactory, NativeRenderer, NullInjector, Optional, Prop, ReflectiveInjector, RootComponent, Scope, Self, SkipSelf, StaticRef, THROW_IF_NOT_FOUND, Type, computed, createDerived, createDynamicRef, createRef, createRenderer, createSignal, forwardRef, getCurrentInstance, getSetupContext, inject, jsx, jsxs, makeError, normalizeProvider, onMounted, onPropsChanged, onUnmounted, onUpdated, viewfly, watch, withAnnotation, withMemo };
+export { Component, Context, DynamicRef, ElementNamespaceMap, ForwardRef, Fragment, Inject, InjectFlags, Injectable, InjectionToken, Injector, JSXNodeFactory, NativeRenderer, NullInjector, Optional, Prop, ReflectiveInjector, RootComponent, Scope, Self, SkipSelf, StaticRef, THROW_IF_NOT_FOUND, Type, computed, createContext, createDerived, createDynamicRef, createRef, createRenderer, createSignal, forwardRef, getCurrentInstance, getSetupContext, inject, jsx, jsxs, makeError, normalizeProvider, onMounted, onPropsChanged, onUnmounted, onUpdated, viewfly, watch, withAnnotation, withMemo };

package/bundles/index.js

@@ -914,7 +914,7 @@ function toRefs(ref) {
 /**
  * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
  */
-class Component extends ReflectiveInjector {
+class Component {
     get dirty() {
         return this._dirty;
     }
@@ -922,12 +922,6 @@ class Component extends ReflectiveInjector {
         return this._changed;
     }
     constructor(parentComponent, type, props, key) {
-        const annotation = type.annotation || {};
-        const providers = annotation.providers || [];
-        super(parentComponent, [...providers, {
-                provide: Injector,
-                useFactory: () => this
-            }], annotation.scope);
         Object.defineProperty(this, "parentComponent", {
             enumerable: true,
             configurable: true,
@@ -964,7 +958,6 @@ class Component extends ReflectiveInjector {
             writable: true,
             value: new Set()
         });
-        // $$view!: ComponentView
         Object.defineProperty(this, "unmountedCallbacks", {
             enumerable: true,
             configurable: true,
@@ -1134,10 +1127,6 @@ class Component extends ReflectiveInjector {
         updateChildren(template);
         this.rendered();
     }
-    provide(providers) {
-        providers = Array.isArray(providers) ? providers : [providers];
-        this.normalizedProviders.unshift(...providers.map(i => normalizeProvider(i)));
-    }
     destroy() {
         var _a, _b, _c;
         this.listener.destroy();
@@ -1154,13 +1143,12 @@ class Component extends ReflectiveInjector {
             this.parentComponent.changedSubComponents.delete(this);
         }
         this.parentComponent =
-            this.parentInjector =
-                this.propsChangedDestroyCallbacks =
-                    this.updatedDestroyCallbacks =
-                        this.mountCallbacks =
-                            this.updatedCallbacks =
-                                this.propsChangedCallbacks =
-                                    this.unmountedCallbacks = null;
+            this.propsChangedDestroyCallbacks =
+                this.updatedDestroyCallbacks =
+                    this.mountCallbacks =
+                        this.updatedCallbacks =
+                            this.propsChangedCallbacks =
+                                this.unmountedCallbacks = null;
         this.changedSubComponents.clear();
     }
     rendered() {
@@ -1237,39 +1225,6 @@ class Component extends ReflectiveInjector {
         }
     }
 }
-/**
- * 给组件添加注解
- * @param annotation
- * @param componentSetup
- * @example
- * ```ts
- * export customScope = new Scope('scopeName')
- * export const App = withAnnotation({
- *   scope: customScope,
- *   providers: [
- *     ExampleService
- *   ]
- * }, function(props: Props) {
- *   return () => {
- *     return <div>...</div>
- *   }
- * })
- * ```
- */
-function withAnnotation(annotation, componentSetup) {
-    const setup = function setup(props) {
-        return componentSetup(props);
-    };
-    setup.annotation = annotation;
-    return setup;
-}
-/**
- * 通过组件上下文获取 IoC 容器内数据的勾子方法
- */
-function inject(token, notFoundValue = THROW_IF_NOT_FOUND, flags) {
-    const component = getSetupContext();
-    return component.get(token, notFoundValue, flags);
-}
 /**
  * 获取当前组件实例
  */
@@ -1296,6 +1251,63 @@ const JSXNodeFactory = {
     }
 };
 
+const injectMap = new WeakMap();
+function getInjector(start) {
+    while (start) {
+        const injector = injectMap.get(start);
+        if (injector) {
+            return injector;
+        }
+        start = start.parentComponent;
+    }
+    return new NullInjector();
+}
+function createContext(providers, scope, parentInjector) {
+    return function context(props) {
+        const instance = getCurrentInstance();
+        const injector = new ReflectiveInjector(parentInjector || getInjector(instance), providers, scope);
+        injectMap.set(instance, injector);
+        return () => {
+            return props.children;
+        };
+    };
+}
+/**
+ * 通过组件上下文获取 IoC 容器内数据的勾子方法
+ */
+function inject(token, notFoundValue = THROW_IF_NOT_FOUND, flags) {
+    const component = getCurrentInstance();
+    const injector = getInjector(component);
+    return injector.get(token, notFoundValue, flags);
+}
+/**
+ * 给组件添加注解
+ * @param annotation
+ * @param componentSetup
+ * @example
+ * ```ts
+ * export customScope = new Scope('scopeName')
+ * export const App = withAnnotation({
+ *   scope: customScope,
+ *   providers: [
+ *     ExampleService
+ *   ]
+ * }, function(props: Props) {
+ *   return () => {
+ *     return <div>...</div>
+ *   }
+ * })
+ * ```
+ */
+function withAnnotation(annotation, componentSetup) {
+    return function (props) {
+        const instance = getCurrentInstance();
+        const parentInjector = injectMap.get(instance) || getInjector(instance.parentComponent);
+        const injector = new ReflectiveInjector(parentInjector, annotation.providers || [], annotation.scope);
+        injectMap.set(instance, injector);
+        return componentSetup(props);
+    };
+}
 function Context(props) {
     function createContextComponent(providers) {
         return withAnnotation({
@@ -1410,9 +1422,8 @@ function applyChanges(nativeRenderer, component, atom, context, needMove) {
             view.host = context.host;
             view.isParent = context.isParent;
         }
-    }, () => {
-        // console.log(skipSubComponentDiff, '----')
-        //
+    }, (skipSubComponentDiff) => {
+        reuseComponentView(nativeRenderer, atom, context, needMove, skipSubComponentDiff);
     });
 }
 function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, needMove) {
@@ -1582,27 +1593,31 @@ function cleanElementChildren(atom, nativeRenderer) {
     }
 }
 function cleanView(nativeRenderer, atom, needClean) {
-    if (atom.nativeNode) {
-        if (needClean) {
-            nativeRenderer.remove(atom.nativeNode, atom.namespace);
-            needClean = false;
-        }
-        if (atom.type === ElementAtomType) {
-            const ref = atom.jsxNode.props[refKey];
-            applyRefs(ref, atom.nativeNode, false);
+    if (atom.type === ComponentAtomType) {
+        const jsxNode = atom.jsxNode;
+        if (jsxNode.instance.$portalHost) {
+            needClean = true;
         }
+        cleanChildren(atom, nativeRenderer, needClean);
+        jsxNode.destroy();
+        return;
     }
+    if (needClean) {
+        nativeRenderer.remove(atom.nativeNode, atom.namespace);
+        needClean = false;
+    }
+    if (atom.type === ElementAtomType) {
+        const ref = atom.jsxNode.props[refKey];
+        applyRefs(ref, atom.nativeNode, false);
+    }
+    cleanChildren(atom, nativeRenderer, needClean);
+}
+function cleanChildren(atom, nativeRenderer, needClean) {
     let child = atom.child;
     while (child) {
-        if (child.jsxNode instanceof Component && child.jsxNode.instance.$portalHost) {
-            needClean = true;
-        }
         cleanView(nativeRenderer, child, needClean);
         child = child.sibling;
     }
-    if (atom.jsxNode instanceof Component) {
-        atom.jsxNode.destroy();
-    }
 }
 function componentRender(nativeRenderer, component, from, context) {
     component.render((template, portalHost) => {
@@ -1655,7 +1670,9 @@ function createChainByNode(jsxNode, prevAtom, elementNamespace) {
     return prevAtom;
 }
 function createChainByChildren(children, prevAtom, elementNamespace) {
-    for (const item of children) {
+    const len = children.length;
+    for (let i = 0; i < len; i++) {
+        const item = children[i];
         prevAtom = createChainByNode(item, prevAtom, elementNamespace);
     }
     return prevAtom;
@@ -1678,6 +1695,12 @@ function insertNode(nativeRenderer, atom, context) {
         nativeRenderer.insertAfter(atom.nativeNode, context.host, atom.namespace);
     }
 }
+function createElementChildren(type, children, namespace) {
+    if (type === 'foreignObject' && namespace === ElementNamespaceMap.svg) {
+        return createChildChain(children, void 0);
+    }
+    return createChildChain(children, namespace);
+}
 function createElement(nativeRenderer, atom, parentComponent, context) {
     const { namespace, jsxNode } = atom;
     const nativeNode = nativeRenderer.createElement(jsxNode.type, namespace);
@@ -1685,7 +1708,7 @@ function createElement(nativeRenderer, atom, parentComponent, context) {
     let bindingRefs;
     for (const key in props) {
         if (key === 'children') {
-            atom.child = createChildChain(jsxNode.props.children, namespace);
+            atom.child = createElementChildren(jsxNode.type, props.children, namespace);
             continue;
         }
         if (key === 'class') {
@@ -1747,7 +1770,9 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
     let unBindRefs;
     let bindRefs;
     let updatedChildren = false;
-    for (const [key, value] of changes.remove) {
+    let len = changes.remove.length;
+    for (let i = 0; i < len; i++) {
+        const [key, value] = changes.remove[i];
         if (key === 'children') {
             updatedChildren = true;
             cleanElementChildren(oldAtom, nativeRenderer);
@@ -1775,10 +1800,12 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
         }
         nativeRenderer.removeProperty(nativeNode, key, isSvg);
     }
-    for (const [key, newValue, oldValue] of changes.replace) {
+    len = changes.replace.length;
+    for (let i = 0; i < len; i++) {
+        const [key, newValue, oldValue] = changes.replace[i];
         if (key === 'children') {
             updatedChildren = true;
-            newAtom.child = createChildChain(newValue, isSvg);
+            newAtom.child = createElementChildren(newVNode.type, newValue, isSvg);
             if (!newAtom.child) {
                 cleanElementChildren(oldAtom, nativeRenderer);
             }
@@ -1820,10 +1847,12 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
         }
         nativeRenderer.setProperty(nativeNode, key, newValue, isSvg);
     }
-    for (const [key, value] of changes.add) {
+    len = changes.add.length;
+    for (let i = 0; i < len; i++) {
+        const [key, value] = changes.add[i];
         if (key === 'children') {
             updatedChildren = true;
-            newAtom.child = createChildChain(value, isSvg);
+            newAtom.child = createElementChildren(newVNode.type, value, isSvg);
             buildElementChildren(newAtom, nativeRenderer, parentComponent, context);
             continue;
         }
@@ -1860,7 +1889,9 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
 function applyRefs(refs, nativeNode, binding) {
     if (refs) {
         const refList = Array.isArray(refs) ? refs : [refs];
-        for (const item of refList) {
+        const len = refList.length;
+        for (let i = 0; i < len; i++) {
+            const item = refList[i];
             if (item instanceof DynamicRef) {
                 binding ? item.bind(nativeNode) : item.unBind(nativeNode);
             }
@@ -1872,8 +1903,8 @@ function applyRefs(refs, nativeNode, binding) {
  * Viewfly 根组件，用于实现组件状态更新事件通知
  */
 class RootComponent extends Component {
-    constructor(parentInjector, factory, refresh) {
-        super(parentInjector, factory, {});
+    constructor(factory, refresh) {
+        super(null, factory, {});
         Object.defineProperty(this, "refresh", {
             enumerable: true,
             configurable: true,
@@ -2023,16 +2054,15 @@ function viewfly(config) {
     const modules = [];
     let destroyed = false;
     let appHost = null;
-    const rootComponent = new RootComponent(context || null, withAnnotation({
-        providers: [{
-                provide: NativeRenderer,
-                useValue: nativeRenderer
-            }]
-    }, () => {
+    const rootProviders = [];
+    const rootComponent = new RootComponent(() => {
+        const rootContext = createContext(rootProviders, void 0, context);
         return () => {
-            return destroyed ? null : root;
+            return jsx(rootContext, {
+                children: destroyed ? null : root
+            });
         };
-    }), function () {
+    }, function () {
         if (destroyed || !autoUpdate) {
             return;
         }
@@ -2054,7 +2084,8 @@ function viewfly(config) {
     }
     const app = {
         provide(providers) {
-            rootComponent.provide(providers);
+            providers = Array.isArray(providers) ? providers : [providers];
+            rootProviders.push(...providers);
             return app;
         },
         use(module) {
@@ -2128,6 +2159,7 @@ exports.StaticRef = StaticRef;
 exports.THROW_IF_NOT_FOUND = THROW_IF_NOT_FOUND;
 exports.Type = Type;
 exports.computed = computed;
+exports.createContext = createContext;
 exports.createDerived = createDerived;
 exports.createDynamicRef = createDynamicRef;
 exports.createRef = createRef;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "1.1.10",
+  "version": "1.2.1",
   "description": "Viewfly is a simple and easy-to-use JavaScript framework with an intuitive development experience.",
   "main": "./bundles/index.js",
   "module": "./bundles/index.esm.js",
@@ -50,7 +50,7 @@
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
   },
-  "gitHead": "08cdabe11ffa8fb6c9c4bc53898881af2396f735",
+  "gitHead": "8b79b4e067238c81c61d62581b9f6d2c64f60677",
   "dependencies": {
     "reflect-metadata": "^0.2.2"
   }