@viewfly/core 1.0.0-alpha.1 → 1.0.0-alpha.10

package/bundles/di/injector.d.ts

@@ -22,5 +22,5 @@ export type ExtractValueType<T> = T extends Type<any> ? InstanceType<T> : T exte
  */
 export declare abstract class Injector {
     abstract parentInjector: Injector | null;
-    abstract get<T extends Type<any> | AbstractType<any> | InjectionToken<any>, U = never>(token: T, flags?: InjectFlags, notFoundValue?: U): ExtractValueType<T> | U;
+    abstract get<T extends Type<any> | AbstractType<any> | InjectionToken<any>, U = never>(token: T, notFoundValue?: U, flags?: InjectFlags): ExtractValueType<T> | U;
 }

package/bundles/di/metadata.d.ts

@@ -37,7 +37,7 @@ export declare const Optional: OptionalDecorator;
 export interface Prop {
 }
 export interface PropDecorator {
-    <T extends Type<any> | AbstractType<any> | InjectionToken<any>, U = never>(token?: T | ForwardRef<ExtractValueType<T>>, flags?: InjectFlags, notFoundValue?: U): PropertyDecorator;
+    <T extends Type<any> | AbstractType<any> | InjectionToken<any>, U = never>(token?: T | ForwardRef<ExtractValueType<T>>, notFoundValue?: U, flags?: InjectFlags): PropertyDecorator;
     new (token: any): Prop;
 }
 export declare const Prop: PropDecorator;

package/bundles/di/null-injector.d.ts

@@ -2,5 +2,5 @@ import { InjectFlags, Injector } from './injector';
 export declare const THROW_IF_NOT_FOUND: any;
 export declare class NullInjector extends Injector {
     parentInjector: null;
-    get(token: any, flag?: InjectFlags, notFoundValue?: any): any;
+    get(token: any, notFoundValue?: any, _?: InjectFlags): any;
 }

package/bundles/di/reflective-injector.d.ts

@@ -17,10 +17,10 @@ export declare class ReflectiveInjector extends Injector {
     /**
      * 用于获取当前注入器上下文内的实例、对象或数据
      * @param token 访问 token
-     * @param flags 查询规则
      * @param notFoundValue 如未查找到的返回值
+     * @param flags 查询规则
      */
-    get<T extends Type<any> | AbstractType<any> | InjectionToken<any>, U = never>(token: T, flags?: InjectFlags, notFoundValue?: U): ExtractValueType<T> | U;
+    get<T extends Type<any> | AbstractType<any> | InjectionToken<any>, U = never>(token: T, notFoundValue?: U, flags?: InjectFlags): ExtractValueType<T> | U;
     private getValue;
     /**
      * 解决并获取依赖参数

package/bundles/foundation/_utils.d.ts

@@ -21,6 +21,7 @@ export declare function classToString(config: unknown): string;
 export declare function styleToObject(style: string | Record<string, any>): Record<string, any>;
 export interface TextAtom {
     type: 'text';
+    index: number;
     jsxNode: string;
     nativeNode: NativeNode | null;
     child: Atom | null;
@@ -29,6 +30,7 @@ export interface TextAtom {
 }
 export interface ElementAtom {
     type: 'element';
+    index: number;
     jsxNode: JSXNode<string>;
     nativeNode: NativeNode | null;
     child: Atom | null;
@@ -37,6 +39,7 @@ export interface ElementAtom {
 }
 export interface ComponentAtom {
     type: 'component';
+    index: number;
     jsxNode: JSXNode<JSXInternal.ComponentSetup> | Component;
     nativeNode: NativeNode | null;
     child: Atom | null;

package/bundles/foundation/component.d.ts

@@ -1,6 +1,5 @@
 import { AbstractType, ExtractValueType, InjectFlags, InjectionToken, Injector, Provider, ReflectiveInjector, Type } from '../di/_api';
 import { Key, Props } from './jsx-element';
-import { ComponentView } from './_utils';
 /**
  * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
  */
@@ -14,7 +13,6 @@ export declare class Component extends ReflectiveInjector {
     changedSubComponents: Set<Component>;
     get dirty(): boolean;
     get changed(): boolean;
-    $$view: ComponentView;
     unmountedCallbacks?: LifeCycleCallback[] | null;
     mountCallbacks?: LifeCycleCallback[] | null;
     propsChangedCallbacks?: PropsChangedCallback<any>[] | null;
@@ -33,7 +31,7 @@ export declare class Component extends ReflectiveInjector {
         template: any;
         portalHost: import("./injection-tokens").NativeNode | undefined;
     };
-    update(newProps: Props, forceUpdate?: boolean): any;
+    update(newProps: Record<string, any>, forceUpdate?: boolean): any;
     provide<T>(providers: Provider<T> | Provider<T>[]): void;
     rendered(): void;
     destroy(): void;
@@ -237,7 +235,7 @@ export declare function withAnnotation<T extends JSXInternal.ComponentSetup>(ann
 /**
  * 通过组件上下文获取 IoC 容器内数据的勾子方法
  */
-export declare function inject<T extends Type<any> | AbstractType<any> | InjectionToken<any>, U = never>(token: T, flags?: InjectFlags, notFoundValue?: U): ExtractValueType<T> | U;
+export declare function inject<T extends Type<any> | AbstractType<any> | InjectionToken<any>, U = never>(token: T, notFoundValue?: U, flags?: InjectFlags): ExtractValueType<T> | U;
 /**
  * 获取当前组件实例
  */

package/bundles/foundation/jsx-element.d.ts

@@ -1,19 +1,17 @@
 import { ListenDelegate } from './_utils';
 export interface Props {
     children?: JSXInternal.ViewNode | JSXInternal.ViewNode[];
-    [key: string]: any;
-    [key: symbol]: any;
 }
 export declare function Fragment(props: Props): () => any;
 export type Key = number | string;
-export declare function jsx(type: string | JSXInternal.ComponentSetup, props: Props, key?: Key): JSXNode;
+export declare function jsx(type: string | JSXInternal.ComponentSetup, props: Props & Record<string, any>, key?: Key): JSXNode;
 export declare const jsxs: typeof jsx;
 export interface JSXNode<T = string | JSXInternal.ComponentSetup> {
     type: T;
-    props: Props;
+    props: Props & Record<string, any>;
     key?: Key;
     on?: Record<string, ListenDelegate>;
 }
 export declare const JSXNodeFactory: {
-    createNode<T = string | JSXInternal.ComponentSetup<any>>(type: T, props: Props, key?: Key): JSXNode<T>;
+    createNode<T = string | JSXInternal.ComponentSetup<any>>(type: T, props: Props & Record<string, any>, key?: Key): JSXNode<T>;
 };

package/bundles/index.esm.js

@@ -161,6 +161,40 @@ var InjectFlags;
 class Injector {
 }
 
+/**
+ * 构造函数参数装饰器，用于改变注入 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, 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);
+        });
+    }
+};
+
 function stringify(token) {
     if (typeof token === 'string') {
         return token;
@@ -205,7 +239,8 @@ class NullInjector extends Injector {
         super(...arguments);
         this.parentInjector = null;
     }
-    get(token, flag, notFoundValue = THROW_IF_NOT_FOUND) {
+    /* eslint-disable-next-line */
+    get(token, notFoundValue = THROW_IF_NOT_FOUND, _) {
         if (notFoundValue === THROW_IF_NOT_FOUND) {
             throw nullInjectorErrorFn(token);
         }
@@ -213,40 +248,6 @@ class NullInjector extends Injector {
     }
 }
 
-/**
- * 构造函数参数装饰器，用于改变注入 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, flags, notFoundValue = THROW_IF_NOT_FOUND) {
-    if (!(this instanceof Prop)) {
-        return makePropertyDecorator(Prop, token, function (instance, propertyName, token, injector) {
-            instance[propertyName] = injector.get(token instanceof ForwardRef ? token.getRef() : token, flags, notFoundValue);
-        });
-    }
-};
-
 /**
  * 标准化 provide，并返回统一数据结构
  * @param provider
@@ -424,15 +425,15 @@ class ReflectiveInjector extends Injector {
     /**
      * 用于获取当前注入器上下文内的实例、对象或数据
      * @param token 访问 token
-     * @param flags 查询规则
      * @param notFoundValue 如未查找到的返回值
+     * @param flags 查询规则
      */
-    get(token, flags = InjectFlags.Default, notFoundValue = THROW_IF_NOT_FOUND) {
+    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, InjectFlags.Default, notFoundValue);
+                return this.parentInjector.get(token, notFoundValue);
             }
             if (notFoundValue !== THROW_IF_NOT_FOUND) {
                 return notFoundValue;
@@ -476,9 +477,12 @@ class ReflectiveInjector extends Injector {
             return notFoundValue;
         }
         if (this.parentInjector) {
-            return this.parentInjector.get(token, flags === InjectFlags.Optional ? InjectFlags.Optional : InjectFlags.Default, notFoundValue);
+            return this.parentInjector.get(token, notFoundValue, flags === InjectFlags.Optional ? InjectFlags.Optional : InjectFlags.Default);
         }
         if (notFoundValue === THROW_IF_NOT_FOUND) {
+            // if (flags === InjectFlags.Optional) {
+            //   return null as U
+            // }
             throw reflectiveInjectorErrorFn(token);
         }
         return notFoundValue;
@@ -508,11 +512,11 @@ class ReflectiveInjector extends Injector {
             const tryValue = {};
             const injectToken = dep.injectKey instanceof ForwardRef ? dep.injectKey.getRef() : dep.injectKey;
             if (dep.visibility instanceof Self) {
-                reflectiveValue = this.get(injectToken, InjectFlags.Self, tryValue);
+                reflectiveValue = this.get(injectToken, tryValue, InjectFlags.Self);
             }
             else if (dep.visibility instanceof SkipSelf) {
                 if (this.parentInjector) {
-                    reflectiveValue = this.parentInjector.get(injectToken, InjectFlags.Default, tryValue);
+                    reflectiveValue = this.parentInjector.get(injectToken, tryValue);
                 }
                 else {
                     if (dep.optional) {
@@ -525,7 +529,7 @@ class ReflectiveInjector extends Injector {
                 }
             }
             else {
-                reflectiveValue = this.get(injectToken, InjectFlags.Default, tryValue);
+                reflectiveValue = this.get(injectToken, tryValue);
             }
             if (reflectiveValue === tryValue) {
                 if (dep.optional) {
@@ -587,13 +591,13 @@ function getArrayChanges(left, right) {
     return changes;
 }
 function classToString(config) {
-    if (!config) {
-        return '';
-    }
     if (typeof config === 'string') {
         return config;
     }
-    else if (Array.isArray(config)) {
+    if (!config) {
+        return '';
+    }
+    if (Array.isArray(config)) {
         const classes = [];
         for (const i of config) {
             const v = classToString(i);
@@ -603,7 +607,7 @@ function classToString(config) {
         }
         return classes.join(' ');
     }
-    else if (typeof config === 'object') {
+    if (typeof config === 'object') {
         if (config.toString !== Object.prototype.toString && !config.toString.toString().includes('[native code]')) {
             return config.toString();
         }
@@ -737,30 +741,32 @@ class Component extends ReflectiveInjector {
         };
     }
     update(newProps, forceUpdate = false) {
-        const oldProps = this.props;
-        const { add, remove, replace } = getObjectChanges(newProps, this.props);
-        if (add.length || remove.length || replace.length) {
-            this.invokePropsChangedHooks(newProps);
-        }
-        else if (!this.dirty) {
-            return this.template;
-        }
-        const newRefs = toRefs(newProps.ref);
-        if (this.refs) {
-            for (const oldRef of this.refs) {
-                if (!newRefs.includes(oldRef)) {
-                    oldRef.unBind(this.instance);
+        if (!forceUpdate) {
+            const { add, remove, replace } = getObjectChanges(newProps, this.props);
+            if (add.length || remove.length || replace.length) {
+                this.invokePropsChangedHooks(newProps);
+            }
+            else if (!this.dirty) {
+                this.props = newProps;
+                return this.template;
+            }
+            const newRefs = toRefs(newProps.ref);
+            if (this.refs) {
+                for (const oldRef of this.refs) {
+                    if (!newRefs.includes(oldRef)) {
+                        oldRef.unBind(this.instance);
+                    }
                 }
             }
+            for (const newRef of newRefs) {
+                newRef.bind(this.instance);
+            }
+            if (newRefs.length) {
+                this.refs = newRefs;
+            }
         }
-        for (const newRef of newRefs) {
-            newRef.bind(this.instance);
-        }
-        if (newRefs.length) {
-            this.refs = newRefs;
-        }
-        if (!forceUpdate && typeof this.instance.$useMemo === 'function') {
-            if (this.instance.$useMemo(newProps, oldProps)) {
+        if (typeof this.instance.$useMemo === 'function') {
+            if (this.instance.$useMemo(newProps, this.props)) {
                 return this.template;
             }
         }
@@ -843,7 +849,12 @@ class Component extends ReflectiveInjector {
             }
         }
         if (unmountedCallbacks.length) {
-            this.unmountedCallbacks = unmountedCallbacks;
+            if (this.unmountedCallbacks) {
+                this.unmountedCallbacks.push(...unmountedCallbacks);
+            }
+            else {
+                this.unmountedCallbacks = unmountedCallbacks;
+            }
         }
         this.mountCallbacks = null;
     }
@@ -1232,9 +1243,9 @@ function withAnnotation(annotation, componentSetup) {
 /**
  * 通过组件上下文获取 IoC 容器内数据的勾子方法
  */
-function inject(token, flags = InjectFlags.Default, notFoundValue = THROW_IF_NOT_FOUND) {
+function inject(token, notFoundValue = THROW_IF_NOT_FOUND, flags) {
     const component = getSetupContext();
-    return component.get(token, flags, notFoundValue);
+    return component.get(token, notFoundValue, flags);
 }
 /**
  * 获取当前组件实例
@@ -1272,6 +1283,7 @@ function withMemo(canUseMemo, render) {
     };
 }
 
+const componentViewCache = new WeakMap();
 const listenerReg = /^on(?=[A-Z])/;
 function createRenderer(component, nativeRenderer) {
     let isInit = true;
@@ -1280,6 +1292,7 @@ function createRenderer(component, nativeRenderer) {
             isInit = false;
             const atom = {
                 type: 'component',
+                index: 0,
                 jsxNode: component,
                 sibling: null,
                 child: null,
@@ -1349,7 +1362,7 @@ function updateView(nativeRenderer, component) {
     }
 }
 function applyChanges(nativeRenderer, component) {
-    const { atom, host, isParent, rootHost } = component.$$view;
+    const { atom, host, isParent, rootHost } = componentViewCache.get(component);
     const diffAtom = atom.child;
     const template = component.update(component.props, true);
     atom.child = createChildChain(template, atom.isSvg);
@@ -1358,58 +1371,35 @@ function applyChanges(nativeRenderer, component) {
         isParent,
         rootHost
     };
-    diff(nativeRenderer, component, atom.child, diffAtom, context, 0, 0);
+    diff(nativeRenderer, component, atom.child, diffAtom, context);
     const next = atom.sibling;
     if (next && next.jsxNode instanceof Component) {
-        next.jsxNode.$$view.host = context.host;
-        next.jsxNode.$$view.isParent = context.isParent;
-    }
-}
-function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expectIndex, index) {
-    let prevDiffAtom = null;
-    let firstDiffAtomIndexed = null;
-    if (oldAtom) {
-        prevDiffAtom = {
-            index,
-            atom: oldAtom,
-            prev: null
-        };
-        index++;
-        firstDiffAtomIndexed = prevDiffAtom;
-        oldAtom = oldAtom.sibling;
-        while (oldAtom) {
-            const diffAtom = {
-                index,
-                atom: oldAtom,
-                prev: prevDiffAtom
-            };
-            prevDiffAtom.next = diffAtom;
-            prevDiffAtom = diffAtom;
-            oldAtom = oldAtom.sibling;
-            index++;
-        }
+        const view = componentViewCache.get(next.jsxNode);
+        view.host = context.host;
+        view.isParent = context.isParent;
     }
+}
+function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context) {
     const commits = [];
     function changeOffset() {
         offset++;
     }
     while (newAtom) {
-        firstDiffAtomIndexed = createChanges(newAtom, expectIndex, firstDiffAtomIndexed, nativeRenderer, commits, context, parentComponent, changeOffset);
+        oldAtom = createChanges(newAtom, oldAtom, nativeRenderer, commits, context, parentComponent, changeOffset);
         newAtom = newAtom.sibling;
-        expectIndex++;
     }
-    let dirtyDiffAtom = firstDiffAtomIndexed;
+    let dirtyDiffAtom = oldAtom;
     while (dirtyDiffAtom) {
-        cleanView(nativeRenderer, dirtyDiffAtom.atom, false);
-        dirtyDiffAtom = dirtyDiffAtom.next;
+        cleanView(nativeRenderer, dirtyDiffAtom, true);
+        dirtyDiffAtom = dirtyDiffAtom.sibling;
     }
     let offset = 0;
     for (let i = 0; i < commits.length; i++) {
         const commit = commits[i];
-        while (firstDiffAtomIndexed) {
-            if (firstDiffAtomIndexed.index <= i) {
+        while (oldAtom) {
+            if (oldAtom.index <= i) {
                 offset--;
-                firstDiffAtomIndexed = firstDiffAtomIndexed.next;
+                oldAtom = oldAtom.sibling;
                 continue;
             }
             break;
@@ -1417,47 +1407,42 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
         commit(offset);
     }
 }
-function createChanges(newAtom, expectIndex, diffAtomIndexed, nativeRenderer, commits, context, parentComponent, effect) {
-    const startDiffAtom = diffAtomIndexed;
+function createChanges(newAtom, oldAtom, nativeRenderer, commits, context, parentComponent, effect) {
+    const startDiffAtom = oldAtom;
     const { jsxNode: newJsxNode, type } = newAtom;
     const key = newJsxNode.key;
-    while (diffAtomIndexed) {
-        const { atom: diffAtom, index: diffIndex } = diffAtomIndexed;
-        if (type === diffAtom.type) {
+    let prev = null;
+    while (oldAtom) {
+        const diffIndex = oldAtom.index;
+        if (type === oldAtom.type) {
             let commit;
             if (type === 'text') {
-                commit = updateText(newAtom, diffAtom, nativeRenderer, context);
+                commit = updateText(newAtom, oldAtom, nativeRenderer, context);
             }
             else {
-                const { key: diffKey, type: diffType } = diffAtom.jsxNode;
+                const { key: diffKey, type: diffType } = oldAtom.jsxNode;
                 if (diffKey !== key || newJsxNode.type !== diffType) {
-                    diffAtomIndexed = diffAtomIndexed.next;
+                    prev = oldAtom;
+                    oldAtom = oldAtom.sibling;
                     continue;
                 }
                 if (type === 'component') {
-                    commit = updateComponent(newAtom, diffAtom, expectIndex, diffIndex, nativeRenderer, context);
+                    commit = updateComponent(newAtom, oldAtom, newAtom.index, diffIndex, nativeRenderer, context);
                 }
                 else {
-                    commit = updateElement(newAtom, diffAtom, expectIndex, diffIndex, nativeRenderer, context, parentComponent);
+                    commit = updateElement(newAtom, oldAtom, newAtom.index, diffIndex, nativeRenderer, context, parentComponent);
                 }
             }
             commits.push(commit);
-            const next = diffAtomIndexed.next;
-            const prev = diffAtomIndexed.prev;
+            const next = oldAtom.sibling;
             if (!prev) {
-                diffAtomIndexed = next;
-                if (diffAtomIndexed) {
-                    diffAtomIndexed.prev = null;
-                }
-                return diffAtomIndexed;
-            }
-            prev.next = next;
-            if (next) {
-                next.prev = prev;
+                return next;
             }
+            prev.sibling = next;
             return startDiffAtom;
         }
-        diffAtomIndexed = diffAtomIndexed.next;
+        prev = oldAtom;
+        oldAtom = oldAtom.sibling;
     }
     commits.push(createNewView(newAtom, nativeRenderer, context, parentComponent, effect));
     return startDiffAtom;
@@ -1493,13 +1478,13 @@ function updateElement(newAtom, oldAtom, expectIndex, oldIndex, nativeRenderer,
                 host: newAtom.nativeNode,
                 isParent: true,
                 rootHost: context.rootHost
-            }, 0, 0);
+            });
         }
         else if (oldAtom.child) {
             let atom = oldAtom.child;
             nativeRenderer.cleanChildren(oldAtom.nativeNode, oldAtom.isSvg);
             while (atom) {
-                cleanView(nativeRenderer, atom, true);
+                cleanView(nativeRenderer, atom, false);
                 atom = atom.sibling;
             }
         }
@@ -1514,7 +1499,7 @@ function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRende
         const newTemplate = component.update(newProps);
         const portalHost = component.instance.$portalHost;
         context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
-        component.$$view = Object.assign({ atom: newAtom }, context);
+        componentViewCache.set(component, Object.assign({ atom: newAtom }, context));
         newAtom.jsxNode = component;
         if (newTemplate === oldTemplate) {
             reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, expectIndex - offset !== oldIndex);
@@ -1525,12 +1510,12 @@ function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRende
             newAtom.child = createChildChain(newTemplate, newAtom.isSvg);
         }
         if (newAtom.child) {
-            diff(nativeRenderer, component, newAtom.child, reusedAtom.child, context, expectIndex, oldIndex + offset);
+            diff(nativeRenderer, component, newAtom.child, reusedAtom.child, context);
         }
         else if (reusedAtom.child) {
             let atom = reusedAtom.child;
             while (atom) {
-                cleanView(nativeRenderer, atom, false);
+                cleanView(nativeRenderer, atom, true);
                 atom = atom.sibling;
             }
         }
@@ -1563,9 +1548,9 @@ function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveVi
 }
 function cleanView(nativeRenderer, atom, needClean) {
     if (atom.nativeNode) {
-        if (!needClean) {
+        if (needClean) {
             nativeRenderer.remove(atom.nativeNode, atom.isSvg);
-            needClean = true;
+            needClean = false;
         }
         if (atom.type === 'element') {
             const ref = atom.jsxNode.props[refKey];
@@ -1575,7 +1560,7 @@ function cleanView(nativeRenderer, atom, needClean) {
     let child = atom.child;
     while (child) {
         if (child.jsxNode instanceof Component && child.jsxNode.instance.$portalHost) {
-            needClean = false;
+            needClean = true;
         }
         cleanView(nativeRenderer, child, needClean);
         child = child.sibling;
@@ -1588,7 +1573,7 @@ function componentRender(nativeRenderer, component, from, context) {
     const { template, portalHost } = component.render();
     from.child = createChildChain(template, from.isSvg);
     context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
-    component.$$view = Object.assign({ atom: from }, context);
+    componentViewCache.set(component, Object.assign({ atom: from }, context));
     let child = from.child;
     while (child) {
         buildView(nativeRenderer, component, child, context);
@@ -1599,6 +1584,7 @@ function componentRender(nativeRenderer, component, from, context) {
 function createChainByJSXComponent(jsxNode, prevAtom, isSvg) {
     const atom = {
         type: 'component',
+        index: prevAtom.index + 1,
         jsxNode,
         sibling: null,
         child: null,
@@ -1611,6 +1597,7 @@ function createChainByJSXComponent(jsxNode, prevAtom, isSvg) {
 function createChainByJSXText(jsxNode, prevAtom, isSvg) {
     const atom = {
         type: 'text',
+        index: prevAtom.index + 1,
         jsxNode,
         sibling: null,
         child: null,
@@ -1624,6 +1611,7 @@ function createChainByJSXElement(element, prevAtom, isSvg) {
     isSvg = isSvg || element.type === 'svg';
     const atom = {
         type: 'element',
+        index: prevAtom.index + 1,
         jsxNode: element,
         sibling: null,
         child: null,
@@ -1663,7 +1651,7 @@ function createChainByChildren(children, prevAtom, isSvg) {
     return prevAtom;
 }
 function createChildChain(template, isSvg) {
-    const beforeAtom = { sibling: null };
+    const beforeAtom = { sibling: null, index: -1 };
     createChainByNode(template, beforeAtom, isSvg);
     return beforeAtom.sibling;
 }
@@ -1726,6 +1714,11 @@ function createTextNode(nativeRenderer, text, isSvg) {
     return nativeRenderer.createTextNode(text, isSvg);
 }
 function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNode, isSvg) {
+    if (newVNode === oldVNode) {
+        return () => {
+            //
+        };
+    }
     const changes = getObjectChanges(newVNode.props, oldVNode.props);
     let unBindRefs;
     let bindRefs;
@@ -1884,7 +1877,7 @@ function viewfly(config) {
             return destroyed ? null : root;
         };
     }), function () {
-        if (destroyed) {
+        if (destroyed || !autoUpdate) {
             return;
         }
         nextTick(() => {

package/bundles/index.js

@@ -163,6 +163,40 @@ exports.InjectFlags = void 0;
 class Injector {
 }
 
+/**
+ * 构造函数参数装饰器，用于改变注入 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, 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);
+        });
+    }
+};
+
 function stringify(token) {
     if (typeof token === 'string') {
         return token;
@@ -207,7 +241,8 @@ class NullInjector extends Injector {
         super(...arguments);
         this.parentInjector = null;
     }
-    get(token, flag, notFoundValue = THROW_IF_NOT_FOUND) {
+    /* eslint-disable-next-line */
+    get(token, notFoundValue = THROW_IF_NOT_FOUND, _) {
         if (notFoundValue === THROW_IF_NOT_FOUND) {
             throw nullInjectorErrorFn(token);
         }
@@ -215,40 +250,6 @@ class NullInjector extends Injector {
     }
 }
 
-/**
- * 构造函数参数装饰器，用于改变注入 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, flags, notFoundValue = THROW_IF_NOT_FOUND) {
-    if (!(this instanceof Prop)) {
-        return makePropertyDecorator(Prop, token, function (instance, propertyName, token, injector) {
-            instance[propertyName] = injector.get(token instanceof ForwardRef ? token.getRef() : token, flags, notFoundValue);
-        });
-    }
-};
-
 /**
  * 标准化 provide，并返回统一数据结构
  * @param provider
@@ -426,15 +427,15 @@ class ReflectiveInjector extends Injector {
     /**
      * 用于获取当前注入器上下文内的实例、对象或数据
      * @param token 访问 token
-     * @param flags 查询规则
      * @param notFoundValue 如未查找到的返回值
+     * @param flags 查询规则
      */
-    get(token, flags = exports.InjectFlags.Default, notFoundValue = THROW_IF_NOT_FOUND) {
+    get(token, notFoundValue = THROW_IF_NOT_FOUND, flags) {
         var _a;
         flags = flags || exports.InjectFlags.Default;
         if (flags === exports.InjectFlags.SkipSelf) {
             if (this.parentInjector) {
-                return this.parentInjector.get(token, exports.InjectFlags.Default, notFoundValue);
+                return this.parentInjector.get(token, notFoundValue);
             }
             if (notFoundValue !== THROW_IF_NOT_FOUND) {
                 return notFoundValue;
@@ -478,9 +479,12 @@ class ReflectiveInjector extends Injector {
             return notFoundValue;
         }
         if (this.parentInjector) {
-            return this.parentInjector.get(token, flags === exports.InjectFlags.Optional ? exports.InjectFlags.Optional : exports.InjectFlags.Default, notFoundValue);
+            return this.parentInjector.get(token, notFoundValue, flags === exports.InjectFlags.Optional ? exports.InjectFlags.Optional : exports.InjectFlags.Default);
         }
         if (notFoundValue === THROW_IF_NOT_FOUND) {
+            // if (flags === InjectFlags.Optional) {
+            //   return null as U
+            // }
             throw reflectiveInjectorErrorFn(token);
         }
         return notFoundValue;
@@ -510,11 +514,11 @@ class ReflectiveInjector extends Injector {
             const tryValue = {};
             const injectToken = dep.injectKey instanceof ForwardRef ? dep.injectKey.getRef() : dep.injectKey;
             if (dep.visibility instanceof Self) {
-                reflectiveValue = this.get(injectToken, exports.InjectFlags.Self, tryValue);
+                reflectiveValue = this.get(injectToken, tryValue, exports.InjectFlags.Self);
             }
             else if (dep.visibility instanceof SkipSelf) {
                 if (this.parentInjector) {
-                    reflectiveValue = this.parentInjector.get(injectToken, exports.InjectFlags.Default, tryValue);
+                    reflectiveValue = this.parentInjector.get(injectToken, tryValue);
                 }
                 else {
                     if (dep.optional) {
@@ -527,7 +531,7 @@ class ReflectiveInjector extends Injector {
                 }
             }
             else {
-                reflectiveValue = this.get(injectToken, exports.InjectFlags.Default, tryValue);
+                reflectiveValue = this.get(injectToken, tryValue);
             }
             if (reflectiveValue === tryValue) {
                 if (dep.optional) {
@@ -589,13 +593,13 @@ function getArrayChanges(left, right) {
     return changes;
 }
 function classToString(config) {
-    if (!config) {
-        return '';
-    }
     if (typeof config === 'string') {
         return config;
     }
-    else if (Array.isArray(config)) {
+    if (!config) {
+        return '';
+    }
+    if (Array.isArray(config)) {
         const classes = [];
         for (const i of config) {
             const v = classToString(i);
@@ -605,7 +609,7 @@ function classToString(config) {
         }
         return classes.join(' ');
     }
-    else if (typeof config === 'object') {
+    if (typeof config === 'object') {
         if (config.toString !== Object.prototype.toString && !config.toString.toString().includes('[native code]')) {
             return config.toString();
         }
@@ -739,30 +743,32 @@ class Component extends ReflectiveInjector {
         };
     }
     update(newProps, forceUpdate = false) {
-        const oldProps = this.props;
-        const { add, remove, replace } = getObjectChanges(newProps, this.props);
-        if (add.length || remove.length || replace.length) {
-            this.invokePropsChangedHooks(newProps);
-        }
-        else if (!this.dirty) {
-            return this.template;
-        }
-        const newRefs = toRefs(newProps.ref);
-        if (this.refs) {
-            for (const oldRef of this.refs) {
-                if (!newRefs.includes(oldRef)) {
-                    oldRef.unBind(this.instance);
+        if (!forceUpdate) {
+            const { add, remove, replace } = getObjectChanges(newProps, this.props);
+            if (add.length || remove.length || replace.length) {
+                this.invokePropsChangedHooks(newProps);
+            }
+            else if (!this.dirty) {
+                this.props = newProps;
+                return this.template;
+            }
+            const newRefs = toRefs(newProps.ref);
+            if (this.refs) {
+                for (const oldRef of this.refs) {
+                    if (!newRefs.includes(oldRef)) {
+                        oldRef.unBind(this.instance);
+                    }
                 }
             }
+            for (const newRef of newRefs) {
+                newRef.bind(this.instance);
+            }
+            if (newRefs.length) {
+                this.refs = newRefs;
+            }
         }
-        for (const newRef of newRefs) {
-            newRef.bind(this.instance);
-        }
-        if (newRefs.length) {
-            this.refs = newRefs;
-        }
-        if (!forceUpdate && typeof this.instance.$useMemo === 'function') {
-            if (this.instance.$useMemo(newProps, oldProps)) {
+        if (typeof this.instance.$useMemo === 'function') {
+            if (this.instance.$useMemo(newProps, this.props)) {
                 return this.template;
             }
         }
@@ -845,7 +851,12 @@ class Component extends ReflectiveInjector {
             }
         }
         if (unmountedCallbacks.length) {
-            this.unmountedCallbacks = unmountedCallbacks;
+            if (this.unmountedCallbacks) {
+                this.unmountedCallbacks.push(...unmountedCallbacks);
+            }
+            else {
+                this.unmountedCallbacks = unmountedCallbacks;
+            }
         }
         this.mountCallbacks = null;
     }
@@ -1234,9 +1245,9 @@ function withAnnotation(annotation, componentSetup) {
 /**
  * 通过组件上下文获取 IoC 容器内数据的勾子方法
  */
-function inject(token, flags = exports.InjectFlags.Default, notFoundValue = THROW_IF_NOT_FOUND) {
+function inject(token, notFoundValue = THROW_IF_NOT_FOUND, flags) {
     const component = getSetupContext();
-    return component.get(token, flags, notFoundValue);
+    return component.get(token, notFoundValue, flags);
 }
 /**
  * 获取当前组件实例
@@ -1274,6 +1285,7 @@ function withMemo(canUseMemo, render) {
     };
 }
 
+const componentViewCache = new WeakMap();
 const listenerReg = /^on(?=[A-Z])/;
 function createRenderer(component, nativeRenderer) {
     let isInit = true;
@@ -1282,6 +1294,7 @@ function createRenderer(component, nativeRenderer) {
             isInit = false;
             const atom = {
                 type: 'component',
+                index: 0,
                 jsxNode: component,
                 sibling: null,
                 child: null,
@@ -1351,7 +1364,7 @@ function updateView(nativeRenderer, component) {
     }
 }
 function applyChanges(nativeRenderer, component) {
-    const { atom, host, isParent, rootHost } = component.$$view;
+    const { atom, host, isParent, rootHost } = componentViewCache.get(component);
     const diffAtom = atom.child;
     const template = component.update(component.props, true);
     atom.child = createChildChain(template, atom.isSvg);
@@ -1360,58 +1373,35 @@ function applyChanges(nativeRenderer, component) {
         isParent,
         rootHost
     };
-    diff(nativeRenderer, component, atom.child, diffAtom, context, 0, 0);
+    diff(nativeRenderer, component, atom.child, diffAtom, context);
     const next = atom.sibling;
     if (next && next.jsxNode instanceof Component) {
-        next.jsxNode.$$view.host = context.host;
-        next.jsxNode.$$view.isParent = context.isParent;
-    }
-}
-function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expectIndex, index) {
-    let prevDiffAtom = null;
-    let firstDiffAtomIndexed = null;
-    if (oldAtom) {
-        prevDiffAtom = {
-            index,
-            atom: oldAtom,
-            prev: null
-        };
-        index++;
-        firstDiffAtomIndexed = prevDiffAtom;
-        oldAtom = oldAtom.sibling;
-        while (oldAtom) {
-            const diffAtom = {
-                index,
-                atom: oldAtom,
-                prev: prevDiffAtom
-            };
-            prevDiffAtom.next = diffAtom;
-            prevDiffAtom = diffAtom;
-            oldAtom = oldAtom.sibling;
-            index++;
-        }
+        const view = componentViewCache.get(next.jsxNode);
+        view.host = context.host;
+        view.isParent = context.isParent;
     }
+}
+function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context) {
     const commits = [];
     function changeOffset() {
         offset++;
     }
     while (newAtom) {
-        firstDiffAtomIndexed = createChanges(newAtom, expectIndex, firstDiffAtomIndexed, nativeRenderer, commits, context, parentComponent, changeOffset);
+        oldAtom = createChanges(newAtom, oldAtom, nativeRenderer, commits, context, parentComponent, changeOffset);
         newAtom = newAtom.sibling;
-        expectIndex++;
     }
-    let dirtyDiffAtom = firstDiffAtomIndexed;
+    let dirtyDiffAtom = oldAtom;
     while (dirtyDiffAtom) {
-        cleanView(nativeRenderer, dirtyDiffAtom.atom, false);
-        dirtyDiffAtom = dirtyDiffAtom.next;
+        cleanView(nativeRenderer, dirtyDiffAtom, true);
+        dirtyDiffAtom = dirtyDiffAtom.sibling;
     }
     let offset = 0;
     for (let i = 0; i < commits.length; i++) {
         const commit = commits[i];
-        while (firstDiffAtomIndexed) {
-            if (firstDiffAtomIndexed.index <= i) {
+        while (oldAtom) {
+            if (oldAtom.index <= i) {
                 offset--;
-                firstDiffAtomIndexed = firstDiffAtomIndexed.next;
+                oldAtom = oldAtom.sibling;
                 continue;
             }
             break;
@@ -1419,47 +1409,42 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, expect
         commit(offset);
     }
 }
-function createChanges(newAtom, expectIndex, diffAtomIndexed, nativeRenderer, commits, context, parentComponent, effect) {
-    const startDiffAtom = diffAtomIndexed;
+function createChanges(newAtom, oldAtom, nativeRenderer, commits, context, parentComponent, effect) {
+    const startDiffAtom = oldAtom;
     const { jsxNode: newJsxNode, type } = newAtom;
     const key = newJsxNode.key;
-    while (diffAtomIndexed) {
-        const { atom: diffAtom, index: diffIndex } = diffAtomIndexed;
-        if (type === diffAtom.type) {
+    let prev = null;
+    while (oldAtom) {
+        const diffIndex = oldAtom.index;
+        if (type === oldAtom.type) {
             let commit;
             if (type === 'text') {
-                commit = updateText(newAtom, diffAtom, nativeRenderer, context);
+                commit = updateText(newAtom, oldAtom, nativeRenderer, context);
             }
             else {
-                const { key: diffKey, type: diffType } = diffAtom.jsxNode;
+                const { key: diffKey, type: diffType } = oldAtom.jsxNode;
                 if (diffKey !== key || newJsxNode.type !== diffType) {
-                    diffAtomIndexed = diffAtomIndexed.next;
+                    prev = oldAtom;
+                    oldAtom = oldAtom.sibling;
                     continue;
                 }
                 if (type === 'component') {
-                    commit = updateComponent(newAtom, diffAtom, expectIndex, diffIndex, nativeRenderer, context);
+                    commit = updateComponent(newAtom, oldAtom, newAtom.index, diffIndex, nativeRenderer, context);
                 }
                 else {
-                    commit = updateElement(newAtom, diffAtom, expectIndex, diffIndex, nativeRenderer, context, parentComponent);
+                    commit = updateElement(newAtom, oldAtom, newAtom.index, diffIndex, nativeRenderer, context, parentComponent);
                 }
             }
             commits.push(commit);
-            const next = diffAtomIndexed.next;
-            const prev = diffAtomIndexed.prev;
+            const next = oldAtom.sibling;
             if (!prev) {
-                diffAtomIndexed = next;
-                if (diffAtomIndexed) {
-                    diffAtomIndexed.prev = null;
-                }
-                return diffAtomIndexed;
-            }
-            prev.next = next;
-            if (next) {
-                next.prev = prev;
+                return next;
             }
+            prev.sibling = next;
             return startDiffAtom;
         }
-        diffAtomIndexed = diffAtomIndexed.next;
+        prev = oldAtom;
+        oldAtom = oldAtom.sibling;
     }
     commits.push(createNewView(newAtom, nativeRenderer, context, parentComponent, effect));
     return startDiffAtom;
@@ -1495,13 +1480,13 @@ function updateElement(newAtom, oldAtom, expectIndex, oldIndex, nativeRenderer,
                 host: newAtom.nativeNode,
                 isParent: true,
                 rootHost: context.rootHost
-            }, 0, 0);
+            });
         }
         else if (oldAtom.child) {
             let atom = oldAtom.child;
             nativeRenderer.cleanChildren(oldAtom.nativeNode, oldAtom.isSvg);
             while (atom) {
-                cleanView(nativeRenderer, atom, true);
+                cleanView(nativeRenderer, atom, false);
                 atom = atom.sibling;
             }
         }
@@ -1516,7 +1501,7 @@ function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRende
         const newTemplate = component.update(newProps);
         const portalHost = component.instance.$portalHost;
         context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
-        component.$$view = Object.assign({ atom: newAtom }, context);
+        componentViewCache.set(component, Object.assign({ atom: newAtom }, context));
         newAtom.jsxNode = component;
         if (newTemplate === oldTemplate) {
             reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, expectIndex - offset !== oldIndex);
@@ -1527,12 +1512,12 @@ function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRende
             newAtom.child = createChildChain(newTemplate, newAtom.isSvg);
         }
         if (newAtom.child) {
-            diff(nativeRenderer, component, newAtom.child, reusedAtom.child, context, expectIndex, oldIndex + offset);
+            diff(nativeRenderer, component, newAtom.child, reusedAtom.child, context);
         }
         else if (reusedAtom.child) {
             let atom = reusedAtom.child;
             while (atom) {
-                cleanView(nativeRenderer, atom, false);
+                cleanView(nativeRenderer, atom, true);
                 atom = atom.sibling;
             }
         }
@@ -1565,9 +1550,9 @@ function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveVi
 }
 function cleanView(nativeRenderer, atom, needClean) {
     if (atom.nativeNode) {
-        if (!needClean) {
+        if (needClean) {
             nativeRenderer.remove(atom.nativeNode, atom.isSvg);
-            needClean = true;
+            needClean = false;
         }
         if (atom.type === 'element') {
             const ref = atom.jsxNode.props[refKey];
@@ -1577,7 +1562,7 @@ function cleanView(nativeRenderer, atom, needClean) {
     let child = atom.child;
     while (child) {
         if (child.jsxNode instanceof Component && child.jsxNode.instance.$portalHost) {
-            needClean = false;
+            needClean = true;
         }
         cleanView(nativeRenderer, child, needClean);
         child = child.sibling;
@@ -1590,7 +1575,7 @@ function componentRender(nativeRenderer, component, from, context) {
     const { template, portalHost } = component.render();
     from.child = createChildChain(template, from.isSvg);
     context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
-    component.$$view = Object.assign({ atom: from }, context);
+    componentViewCache.set(component, Object.assign({ atom: from }, context));
     let child = from.child;
     while (child) {
         buildView(nativeRenderer, component, child, context);
@@ -1601,6 +1586,7 @@ function componentRender(nativeRenderer, component, from, context) {
 function createChainByJSXComponent(jsxNode, prevAtom, isSvg) {
     const atom = {
         type: 'component',
+        index: prevAtom.index + 1,
         jsxNode,
         sibling: null,
         child: null,
@@ -1613,6 +1599,7 @@ function createChainByJSXComponent(jsxNode, prevAtom, isSvg) {
 function createChainByJSXText(jsxNode, prevAtom, isSvg) {
     const atom = {
         type: 'text',
+        index: prevAtom.index + 1,
         jsxNode,
         sibling: null,
         child: null,
@@ -1626,6 +1613,7 @@ function createChainByJSXElement(element, prevAtom, isSvg) {
     isSvg = isSvg || element.type === 'svg';
     const atom = {
         type: 'element',
+        index: prevAtom.index + 1,
         jsxNode: element,
         sibling: null,
         child: null,
@@ -1665,7 +1653,7 @@ function createChainByChildren(children, prevAtom, isSvg) {
     return prevAtom;
 }
 function createChildChain(template, isSvg) {
-    const beforeAtom = { sibling: null };
+    const beforeAtom = { sibling: null, index: -1 };
     createChainByNode(template, beforeAtom, isSvg);
     return beforeAtom.sibling;
 }
@@ -1728,6 +1716,11 @@ function createTextNode(nativeRenderer, text, isSvg) {
     return nativeRenderer.createTextNode(text, isSvg);
 }
 function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNode, isSvg) {
+    if (newVNode === oldVNode) {
+        return () => {
+            //
+        };
+    }
     const changes = getObjectChanges(newVNode.props, oldVNode.props);
     let unBindRefs;
     let bindRefs;
@@ -1886,7 +1879,7 @@ function viewfly(config) {
             return destroyed ? null : root;
         };
     }), function () {
-        if (destroyed) {
+        if (destroyed || !autoUpdate) {
             return;
         }
         nextTick(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.10",
   "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",
@@ -47,8 +47,8 @@
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
   },
-  "gitHead": "8a25e6e350ba9cade6036506e7fe2aba4e4396ac",
+  "gitHead": "2ffc5cb30c6509aa4a5c6b0c3fe228dacd7e08de",
   "dependencies": {
-    "reflect-metadata": "^0.1.13"
+    "reflect-metadata": "^0.2.2"
   }
 }