@viewfly/core 1.0.1 → 1.0.4

package/bundles/index.d.ts

@@ -195,6 +195,10 @@ interface Props {
     children?: JSXNode | JSXNode[];
 }
 declare function Fragment(props: Props): () => JSXNode | JSXNode[];
+interface ContextProps extends Props {
+    providers: Provider[];
+}
+declare function Context(props: ContextProps): () => JSXNode | JSXNode[];
 type Key = number | string;
 declare function jsx(type: string | ComponentSetup, props: Props & Record<string, any>, key?: Key): ViewFlyNode;
 declare const jsxs: typeof jsx;
@@ -242,7 +246,11 @@ declare namespace JSX {
     }
     interface ElementClass<P = any> extends ComponentInstance<P> {
     }
+    interface ElementAttributesProperty {
+        props: {};
+    }
     interface ElementChildrenAttribute {
+        children: {};
     }
     interface IntrinsicElements {
         [name: string]: any;
@@ -276,7 +284,6 @@ declare class Component extends ReflectiveInjector {
     props: Props;
     readonly key?: Key | undefined;
     instance: ComponentInstance<Props>;
-    template: JSXNode;
     changedSubComponents: Set<Component>;
     get dirty(): boolean;
     get changed(): boolean;
@@ -294,14 +301,11 @@ declare class Component extends ReflectiveInjector {
     constructor(parentComponent: Injector | null, type: ComponentSetup, props: Props, key?: Key | undefined);
     markAsDirtied(): void;
     markAsChanged(changedComponent?: Component): void;
-    render(): {
-        template: JSXNode;
-        portalHost: NativeNode | undefined;
-    };
-    update(newProps: Record<string, any>): JSXNode;
+    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;
-    rendered(): void;
     destroy(): void;
+    rendered(): void;
     private invokePropsChangedHooks;
     private invokeMountHooks;
     private invokeUpdatedHooks;
@@ -559,7 +563,7 @@ interface ComponentAtom {
 }
 type Atom = TextAtom | ElementAtom | ComponentAtom;
 interface ComponentView {
-    atom: Atom;
+    atom: ComponentAtom;
     host: NativeNode;
     isParent: boolean;
     rootHost: NativeNode;
@@ -592,4 +596,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, DynamicRef, 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, createDerived, createDynamicRef, createRef, createRenderer, createSignal, forwardRef, getCurrentInstance, 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 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, createDerived, createDynamicRef, createRef, createRenderer, createSignal, forwardRef, getCurrentInstance, inject, jsx, jsxs, makeError, normalizeProvider, onMounted, onPropsChanged, onUnmounted, onUpdated, viewfly, watch, withAnnotation, withMemo };

package/bundles/index.esm.js

@@ -692,7 +692,7 @@ class Component extends ReflectiveInjector {
             this.parentComponent.markAsChanged(this);
         }
     }
-    render() {
+    render(update) {
         const self = this;
         const proxiesProps = new Proxy(this.props, {
             get(_, key) {
@@ -734,19 +734,22 @@ class Component extends ReflectiveInjector {
         this.unWatch = watch(Array.from(new Set(deps)), () => {
             this.markAsDirtied();
         });
-        this.template = template;
-        return {
-            template: template,
-            portalHost: this.instance.$portalHost
-        };
+        update(template, this.instance.$portalHost);
+        this.rendered();
     }
-    update(newProps) {
+    update(newProps, updateChildren, reuseChildren) {
         const oldProps = this.props;
         if (newProps !== oldProps) {
             const { add, remove, replace } = getObjectChanges(newProps, oldProps);
             if (add.length || remove.length || replace.length) {
                 this.invokePropsChangedHooks(newProps);
             }
+            else if (!this.dirty) {
+                this.props = newProps;
+                reuseChildren(false);
+                this.rendered();
+                return;
+            }
             const newRefs = toRefs(newProps.ref);
             if (this.refs) {
                 for (const oldRef of this.refs) {
@@ -764,39 +767,25 @@ class Component extends ReflectiveInjector {
         }
         if (typeof this.instance.$useMemo === 'function') {
             if (this.instance.$useMemo(newProps, oldProps)) {
-                return this.template;
+                reuseChildren(true);
+                this.rendered();
+                return;
             }
         }
         this.unWatch();
         signalDepsStack.push([]);
-        this.template = this.instance.$render();
+        const template = this.instance.$render();
         const deps = signalDepsStack.pop();
         this.unWatch = watch(Array.from(new Set(deps)), () => {
             this.markAsDirtied();
         });
-        return this.template;
+        updateChildren(template);
+        this.rendered();
     }
     provide(providers) {
         providers = Array.isArray(providers) ? providers : [providers];
         this.normalizedProviders.unshift(...providers.map(i => normalizeProvider(i)));
     }
-    rendered() {
-        this.changedSubComponents.clear();
-        const is = this.isFirstRendering;
-        this.isFirstRendering = false;
-        this._dirty = this._changed = false;
-        this.invokeUpdatedHooks();
-        if (is) {
-            this.invokeMountHooks();
-        }
-        if (this.changed) {
-            Promise.resolve().then(() => {
-                if (this.parentComponent instanceof Component) {
-                    this.parentComponent.markAsChanged(this);
-                }
-            });
-        }
-    }
     destroy() {
         var _a, _b, _c;
         this.unWatch();
@@ -816,6 +805,23 @@ class Component extends ReflectiveInjector {
                         this.propsChangedCallbacks =
                             this.unmountedCallbacks = null;
     }
+    rendered() {
+        this.changedSubComponents.clear();
+        const is = this.isFirstRendering;
+        this.isFirstRendering = false;
+        this._dirty = this._changed = false;
+        this.invokeUpdatedHooks();
+        if (is) {
+            this.invokeMountHooks();
+        }
+        if (this.changed) {
+            Promise.resolve().then(() => {
+                if (this.parentComponent instanceof Component) {
+                    this.parentComponent.markAsChanged(this);
+                }
+            });
+        }
+    }
     invokePropsChangedHooks(newProps) {
         const oldProps = this.props;
         this.props = newProps;
@@ -1259,6 +1265,13 @@ function Fragment(props) {
         return props.children;
     };
 }
+function Context(props) {
+    const instance = getCurrentInstance();
+    instance.provide(props.providers);
+    return () => {
+        return props.children;
+    };
+}
 function jsx(type, props, key) {
     return JSXNodeFactory.createNode(type, props, key);
 }
@@ -1304,7 +1317,7 @@ function createRenderer(component, nativeRenderer) {
             });
         }
         else {
-            updateView(nativeRenderer, component);
+            updateView(nativeRenderer, component, false);
         }
     };
 }
@@ -1323,46 +1336,43 @@ function buildView(nativeRenderer, parentComponent, atom, context) {
     }
 }
 function buildElementChildren(atom, nativeRenderer, parentComponent, context) {
-    const childContext = {
-        isParent: true,
-        host: atom.nativeNode,
-        rootHost: context.rootHost
-    };
     let child = atom.child;
     while (child) {
-        buildView(nativeRenderer, parentComponent, child, childContext);
+        buildView(nativeRenderer, parentComponent, child, context);
         child = child.sibling;
     }
 }
-function updateView(nativeRenderer, component) {
+function updateView(nativeRenderer, component, needMove) {
     if (component.dirty) {
-        applyChanges(nativeRenderer, component);
-        component.rendered();
+        const { atom, host, isParent, rootHost } = componentViewCache.get(component);
+        applyChanges(nativeRenderer, component, atom, {
+            host,
+            isParent,
+            rootHost
+        }, needMove);
     }
     else if (component.changed) {
         component.changedSubComponents.forEach(child => {
-            updateView(nativeRenderer, child);
+            updateView(nativeRenderer, child, needMove);
         });
         component.rendered();
     }
 }
-function applyChanges(nativeRenderer, component) {
-    const { atom, host, isParent, rootHost } = componentViewCache.get(component);
+function applyChanges(nativeRenderer, component, atom, context, needMove) {
     const diffAtom = atom.child;
-    const template = component.update(component.props);
-    atom.child = createChildChain(template, atom.isSvg);
-    const context = {
-        host,
-        isParent,
-        rootHost
-    };
-    diff(nativeRenderer, component, atom.child, diffAtom, context, false);
-    const next = atom.sibling;
-    if (next && next.jsxNode instanceof Component) {
-        const view = componentViewCache.get(next.jsxNode);
-        view.host = context.host;
-        view.isParent = context.isParent;
-    }
+    component.update(component.props, newTemplate => {
+        atom.child = createChildChain(newTemplate, atom.isSvg);
+        diff(nativeRenderer, component, atom.child, diffAtom, context, needMove);
+        const next = atom.sibling;
+        if (next && next.jsxNode instanceof Component) {
+            const view = componentViewCache.get(next.jsxNode);
+            view.host = context.host;
+            view.isParent = context.isParent;
+        }
+    }, () => {
+        // console.log(skipSubComponentDiff, '----')
+        //
+    });
 }
 function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, needMove) {
     const commits = [];
@@ -1447,54 +1457,60 @@ function updateElement(newAtom, oldAtom, nativeRenderer, context, parentComponen
         }
         context.host = newAtom.nativeNode;
         context.isParent = false;
-        updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, context);
+        updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, {
+            host: newAtom.nativeNode,
+            isParent: true,
+            rootHost: context.rootHost
+        });
     };
 }
 function updateComponent(newAtom, reusedAtom, nativeRenderer, context) {
     return function (offset, needMove) {
         const component = reusedAtom.jsxNode;
         const newProps = newAtom.jsxNode.props;
-        const oldTemplate = component.template;
-        const newTemplate = component.update(newProps);
         const portalHost = component.instance.$portalHost;
         context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
         componentViewCache.set(component, Object.assign({ atom: newAtom }, context));
         newAtom.jsxNode = component;
-        if (newTemplate === oldTemplate) {
-            newAtom.child = reusedAtom.child;
-            reuseComponentView(nativeRenderer, newAtom.child, context, needMove || newAtom.index - offset !== reusedAtom.index);
-            component.rendered();
-            return;
-        }
-        if (newTemplate) {
-            newAtom.child = createChildChain(newTemplate, newAtom.isSvg);
-        }
-        if (newAtom.child) {
-            diff(nativeRenderer, component, newAtom.child, reusedAtom.child, context, needMove || newAtom.index - offset !== reusedAtom.index);
-        }
-        else if (reusedAtom.child) {
-            let atom = reusedAtom.child;
-            while (atom) {
-                cleanView(nativeRenderer, atom, true);
-                atom = atom.sibling;
+        component.update(newProps, newTemplate => {
+            if (newTemplate) {
+                newAtom.child = createChildChain(newTemplate, newAtom.isSvg);
             }
-        }
-        component.rendered();
+            if (newAtom.child) {
+                diff(nativeRenderer, component, newAtom.child, reusedAtom.child, context, needMove || newAtom.index - offset !== reusedAtom.index);
+            }
+            else if (reusedAtom.child) {
+                let atom = reusedAtom.child;
+                while (atom) {
+                    cleanView(nativeRenderer, atom, true);
+                    atom = atom.sibling;
+                }
+            }
+        }, (skipSubComponentDiff) => {
+            newAtom.child = reusedAtom.child;
+            reuseComponentView(nativeRenderer, newAtom.child, context, needMove || newAtom.index - offset !== reusedAtom.index, skipSubComponentDiff);
+        });
     };
 }
-function reuseComponentView(nativeRenderer, child, context, moveView) {
+function reuseComponentView(nativeRenderer, child, context, moveView, skipSubComponentDiff) {
     const updateContext = (atom) => {
         if (atom.jsxNode instanceof Component) {
-            let child = atom.child;
-            while (child) {
-                updateContext(child);
-                child = child.sibling;
+            if (skipSubComponentDiff || !moveView) {
+                let child = atom.child;
+                while (child) {
+                    updateContext(child);
+                    child = child.sibling;
+                }
+            }
+            else {
+                applyChanges(nativeRenderer, atom.jsxNode, atom, context, true);
             }
         }
         else {
             if (moveView) {
                 insertNode(nativeRenderer, atom, context);
             }
+            reuseElementChildrenView(nativeRenderer, atom);
             context.isParent = false;
             context.host = atom.nativeNode;
         }
@@ -1504,6 +1520,18 @@ function reuseComponentView(nativeRenderer, child, context, moveView) {
         child = child.sibling;
     }
 }
+function reuseElementChildrenView(nativeRenderer, atom, context, skipSubComponentDiff) {
+    let child = atom.child;
+    while (child) {
+        if (child.jsxNode instanceof Component) {
+            updateView(nativeRenderer, child.jsxNode, false);
+        }
+        else {
+            reuseElementChildrenView(nativeRenderer, child);
+        }
+        child = child.sibling;
+    }
+}
 function cleanElementChildren(atom, nativeRenderer) {
     let child = atom.child;
     nativeRenderer.cleanChildren(atom.nativeNode, atom.isSvg);
@@ -1536,16 +1564,16 @@ function cleanView(nativeRenderer, atom, needClean) {
     }
 }
 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;
-    componentViewCache.set(component, Object.assign({ atom: from }, context));
-    let child = from.child;
-    while (child) {
-        buildView(nativeRenderer, component, child, context);
-        child = child.sibling;
-    }
-    component.rendered();
+    component.render((template, portalHost) => {
+        from.child = createChildChain(template, from.isSvg);
+        context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
+        componentViewCache.set(component, Object.assign({ atom: from }, context));
+        let child = from.child;
+        while (child) {
+            buildView(nativeRenderer, component, child, context);
+            child = child.sibling;
+        }
+    });
 }
 function createChainByJSXNode(type, jsxNode, nodeType, prevAtom, isSvg, key) {
     const atom = {
@@ -1648,7 +1676,11 @@ function createElement(nativeRenderer, atom, parentComponent, context) {
     }
     atom.nativeNode = nativeNode;
     insertNode(nativeRenderer, atom, context);
-    buildElementChildren(atom, nativeRenderer, parentComponent, context);
+    buildElementChildren(atom, nativeRenderer, parentComponent, {
+        isParent: true,
+        host: nativeNode,
+        rootHost: context.rootHost
+    });
     context.host = nativeNode;
     context.isParent = false;
     applyRefs(bindingRefs, nativeNode, true);
@@ -1666,14 +1698,18 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
     const nativeNode = newAtom.nativeNode;
     const oldVNode = oldAtom.jsxNode;
     if (newVNode === oldVNode) {
-        updateElementChildren(newAtom, oldAtom, nativeRenderer, parentComponent, context, isSvg);
+        newAtom.child = oldAtom.child;
+        reuseElementChildrenView(nativeRenderer, newAtom);
         return;
     }
     const changes = getObjectChanges(newVNode.props, oldVNode.props);
     let unBindRefs;
     let bindRefs;
+    let updatedChildren = false;
     for (const [key, value] of changes.remove) {
         if (key === 'children') {
+            updatedChildren = true;
+            cleanElementChildren(oldAtom, nativeRenderer);
             continue;
         }
         if (key === 'class') {
@@ -1700,6 +1736,14 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
     }
     for (const [key, newValue, oldValue] of changes.replace) {
         if (key === 'children') {
+            updatedChildren = true;
+            newAtom.child = createChildChain(newValue, isSvg);
+            if (!newAtom.child) {
+                cleanElementChildren(oldAtom, nativeRenderer);
+            }
+            else {
+                diff(nativeRenderer, parentComponent, newAtom.child, oldAtom.child, context, false);
+            }
             continue;
         }
         if (key === 'class') {
@@ -1734,6 +1778,9 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
     }
     for (const [key, value] of changes.add) {
         if (key === 'children') {
+            updatedChildren = true;
+            newAtom.child = createChildChain(value, isSvg);
+            buildElementChildren(newAtom, nativeRenderer, parentComponent, context);
             continue;
         }
         if (key === 'class') {
@@ -1759,40 +1806,13 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
         }
         nativeRenderer.setProperty(nativeNode, key, value, isSvg);
     }
-    updateElementChildren(newAtom, oldAtom, nativeRenderer, parentComponent, context, isSvg);
+    if (!updatedChildren) {
+        newAtom.child = oldAtom.child;
+        reuseElementChildrenView(nativeRenderer, newAtom);
+    }
     applyRefs(unBindRefs, nativeNode, false);
     applyRefs(bindRefs, nativeNode, true);
 }
-function updateElementChildren(newAtom, oldAtom, nativeRenderer, parentComponent, context, isSvg) {
-    /**
-     * 不能仅依赖 children 是否相等的判断来确定是否要继续向下 diff
-     * 如：
-     * ```tsx
-     * <Comp>
-     *   <div>
-     *     {props.children}
-     *   </div>
-     * </Comp>
-     * ```
-     * 其中当 Comp 产生变化时，children 来自父组件，这时 children 是相等的，
-     * 但，children 内可能有子组件也发生了变化，如果不继续 diff，那么，子组件
-     * 的视图更新将不会发生
-     */
-    newAtom.child = createChildChain(newAtom.jsxNode.props.children, isSvg);
-    if (!newAtom.child) {
-        // 防止删除用户手动添加的元素
-        if (oldAtom.child) {
-            cleanElementChildren(oldAtom, nativeRenderer);
-        }
-    }
-    else {
-        diff(nativeRenderer, parentComponent, newAtom.child, oldAtom.child, {
-            host: newAtom.nativeNode,
-            isParent: true,
-            rootHost: context.rootHost
-        }, false);
-    }
-}
 function applyRefs(refs, nativeNode, binding) {
     if (refs) {
         const refList = Array.isArray(refs) ? refs : [refs];
@@ -1908,4 +1928,4 @@ function viewfly(config) {
     return app;
 }
 
-export { Component, DynamicRef, ForwardRef, Fragment, Inject, InjectFlags, Injectable, InjectionToken, Injector, JSXNodeFactory, NativeRenderer, NullInjector, Optional, Prop, ReflectiveInjector, RootComponent, Scope, Self, SkipSelf, StaticRef, THROW_IF_NOT_FOUND, Type, createDerived, createDynamicRef, createRef, createRenderer, createSignal, forwardRef, getCurrentInstance, inject, jsx, jsxs, makeError, normalizeProvider, onMounted, onPropsChanged, onUnmounted, onUpdated, viewfly, watch, withAnnotation, withMemo };
+export { Component, Context, DynamicRef, ForwardRef, Fragment, Inject, InjectFlags, Injectable, InjectionToken, Injector, JSXNodeFactory, NativeRenderer, NullInjector, Optional, Prop, ReflectiveInjector, RootComponent, Scope, Self, SkipSelf, StaticRef, THROW_IF_NOT_FOUND, Type, createDerived, createDynamicRef, createRef, createRenderer, createSignal, forwardRef, getCurrentInstance, inject, jsx, jsxs, makeError, normalizeProvider, onMounted, onPropsChanged, onUnmounted, onUpdated, viewfly, watch, withAnnotation, withMemo };

package/bundles/index.js

@@ -694,7 +694,7 @@ class Component extends ReflectiveInjector {
             this.parentComponent.markAsChanged(this);
         }
     }
-    render() {
+    render(update) {
         const self = this;
         const proxiesProps = new Proxy(this.props, {
             get(_, key) {
@@ -736,19 +736,22 @@ class Component extends ReflectiveInjector {
         this.unWatch = watch(Array.from(new Set(deps)), () => {
             this.markAsDirtied();
         });
-        this.template = template;
-        return {
-            template: template,
-            portalHost: this.instance.$portalHost
-        };
+        update(template, this.instance.$portalHost);
+        this.rendered();
     }
-    update(newProps) {
+    update(newProps, updateChildren, reuseChildren) {
         const oldProps = this.props;
         if (newProps !== oldProps) {
             const { add, remove, replace } = getObjectChanges(newProps, oldProps);
             if (add.length || remove.length || replace.length) {
                 this.invokePropsChangedHooks(newProps);
             }
+            else if (!this.dirty) {
+                this.props = newProps;
+                reuseChildren(false);
+                this.rendered();
+                return;
+            }
             const newRefs = toRefs(newProps.ref);
             if (this.refs) {
                 for (const oldRef of this.refs) {
@@ -766,39 +769,25 @@ class Component extends ReflectiveInjector {
         }
         if (typeof this.instance.$useMemo === 'function') {
             if (this.instance.$useMemo(newProps, oldProps)) {
-                return this.template;
+                reuseChildren(true);
+                this.rendered();
+                return;
             }
         }
         this.unWatch();
         signalDepsStack.push([]);
-        this.template = this.instance.$render();
+        const template = this.instance.$render();
         const deps = signalDepsStack.pop();
         this.unWatch = watch(Array.from(new Set(deps)), () => {
             this.markAsDirtied();
         });
-        return this.template;
+        updateChildren(template);
+        this.rendered();
     }
     provide(providers) {
         providers = Array.isArray(providers) ? providers : [providers];
         this.normalizedProviders.unshift(...providers.map(i => normalizeProvider(i)));
     }
-    rendered() {
-        this.changedSubComponents.clear();
-        const is = this.isFirstRendering;
-        this.isFirstRendering = false;
-        this._dirty = this._changed = false;
-        this.invokeUpdatedHooks();
-        if (is) {
-            this.invokeMountHooks();
-        }
-        if (this.changed) {
-            Promise.resolve().then(() => {
-                if (this.parentComponent instanceof Component) {
-                    this.parentComponent.markAsChanged(this);
-                }
-            });
-        }
-    }
     destroy() {
         var _a, _b, _c;
         this.unWatch();
@@ -818,6 +807,23 @@ class Component extends ReflectiveInjector {
                         this.propsChangedCallbacks =
                             this.unmountedCallbacks = null;
     }
+    rendered() {
+        this.changedSubComponents.clear();
+        const is = this.isFirstRendering;
+        this.isFirstRendering = false;
+        this._dirty = this._changed = false;
+        this.invokeUpdatedHooks();
+        if (is) {
+            this.invokeMountHooks();
+        }
+        if (this.changed) {
+            Promise.resolve().then(() => {
+                if (this.parentComponent instanceof Component) {
+                    this.parentComponent.markAsChanged(this);
+                }
+            });
+        }
+    }
     invokePropsChangedHooks(newProps) {
         const oldProps = this.props;
         this.props = newProps;
@@ -1261,6 +1267,13 @@ function Fragment(props) {
         return props.children;
     };
 }
+function Context(props) {
+    const instance = getCurrentInstance();
+    instance.provide(props.providers);
+    return () => {
+        return props.children;
+    };
+}
 function jsx(type, props, key) {
     return JSXNodeFactory.createNode(type, props, key);
 }
@@ -1306,7 +1319,7 @@ function createRenderer(component, nativeRenderer) {
             });
         }
         else {
-            updateView(nativeRenderer, component);
+            updateView(nativeRenderer, component, false);
         }
     };
 }
@@ -1325,46 +1338,43 @@ function buildView(nativeRenderer, parentComponent, atom, context) {
     }
 }
 function buildElementChildren(atom, nativeRenderer, parentComponent, context) {
-    const childContext = {
-        isParent: true,
-        host: atom.nativeNode,
-        rootHost: context.rootHost
-    };
     let child = atom.child;
     while (child) {
-        buildView(nativeRenderer, parentComponent, child, childContext);
+        buildView(nativeRenderer, parentComponent, child, context);
         child = child.sibling;
     }
 }
-function updateView(nativeRenderer, component) {
+function updateView(nativeRenderer, component, needMove) {
     if (component.dirty) {
-        applyChanges(nativeRenderer, component);
-        component.rendered();
+        const { atom, host, isParent, rootHost } = componentViewCache.get(component);
+        applyChanges(nativeRenderer, component, atom, {
+            host,
+            isParent,
+            rootHost
+        }, needMove);
     }
     else if (component.changed) {
         component.changedSubComponents.forEach(child => {
-            updateView(nativeRenderer, child);
+            updateView(nativeRenderer, child, needMove);
         });
         component.rendered();
     }
 }
-function applyChanges(nativeRenderer, component) {
-    const { atom, host, isParent, rootHost } = componentViewCache.get(component);
+function applyChanges(nativeRenderer, component, atom, context, needMove) {
     const diffAtom = atom.child;
-    const template = component.update(component.props);
-    atom.child = createChildChain(template, atom.isSvg);
-    const context = {
-        host,
-        isParent,
-        rootHost
-    };
-    diff(nativeRenderer, component, atom.child, diffAtom, context, false);
-    const next = atom.sibling;
-    if (next && next.jsxNode instanceof Component) {
-        const view = componentViewCache.get(next.jsxNode);
-        view.host = context.host;
-        view.isParent = context.isParent;
-    }
+    component.update(component.props, newTemplate => {
+        atom.child = createChildChain(newTemplate, atom.isSvg);
+        diff(nativeRenderer, component, atom.child, diffAtom, context, needMove);
+        const next = atom.sibling;
+        if (next && next.jsxNode instanceof Component) {
+            const view = componentViewCache.get(next.jsxNode);
+            view.host = context.host;
+            view.isParent = context.isParent;
+        }
+    }, () => {
+        // console.log(skipSubComponentDiff, '----')
+        //
+    });
 }
 function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context, needMove) {
     const commits = [];
@@ -1449,54 +1459,60 @@ function updateElement(newAtom, oldAtom, nativeRenderer, context, parentComponen
         }
         context.host = newAtom.nativeNode;
         context.isParent = false;
-        updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, context);
+        updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, {
+            host: newAtom.nativeNode,
+            isParent: true,
+            rootHost: context.rootHost
+        });
     };
 }
 function updateComponent(newAtom, reusedAtom, nativeRenderer, context) {
     return function (offset, needMove) {
         const component = reusedAtom.jsxNode;
         const newProps = newAtom.jsxNode.props;
-        const oldTemplate = component.template;
-        const newTemplate = component.update(newProps);
         const portalHost = component.instance.$portalHost;
         context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
         componentViewCache.set(component, Object.assign({ atom: newAtom }, context));
         newAtom.jsxNode = component;
-        if (newTemplate === oldTemplate) {
-            newAtom.child = reusedAtom.child;
-            reuseComponentView(nativeRenderer, newAtom.child, context, needMove || newAtom.index - offset !== reusedAtom.index);
-            component.rendered();
-            return;
-        }
-        if (newTemplate) {
-            newAtom.child = createChildChain(newTemplate, newAtom.isSvg);
-        }
-        if (newAtom.child) {
-            diff(nativeRenderer, component, newAtom.child, reusedAtom.child, context, needMove || newAtom.index - offset !== reusedAtom.index);
-        }
-        else if (reusedAtom.child) {
-            let atom = reusedAtom.child;
-            while (atom) {
-                cleanView(nativeRenderer, atom, true);
-                atom = atom.sibling;
+        component.update(newProps, newTemplate => {
+            if (newTemplate) {
+                newAtom.child = createChildChain(newTemplate, newAtom.isSvg);
             }
-        }
-        component.rendered();
+            if (newAtom.child) {
+                diff(nativeRenderer, component, newAtom.child, reusedAtom.child, context, needMove || newAtom.index - offset !== reusedAtom.index);
+            }
+            else if (reusedAtom.child) {
+                let atom = reusedAtom.child;
+                while (atom) {
+                    cleanView(nativeRenderer, atom, true);
+                    atom = atom.sibling;
+                }
+            }
+        }, (skipSubComponentDiff) => {
+            newAtom.child = reusedAtom.child;
+            reuseComponentView(nativeRenderer, newAtom.child, context, needMove || newAtom.index - offset !== reusedAtom.index, skipSubComponentDiff);
+        });
     };
 }
-function reuseComponentView(nativeRenderer, child, context, moveView) {
+function reuseComponentView(nativeRenderer, child, context, moveView, skipSubComponentDiff) {
     const updateContext = (atom) => {
         if (atom.jsxNode instanceof Component) {
-            let child = atom.child;
-            while (child) {
-                updateContext(child);
-                child = child.sibling;
+            if (skipSubComponentDiff || !moveView) {
+                let child = atom.child;
+                while (child) {
+                    updateContext(child);
+                    child = child.sibling;
+                }
+            }
+            else {
+                applyChanges(nativeRenderer, atom.jsxNode, atom, context, true);
             }
         }
         else {
             if (moveView) {
                 insertNode(nativeRenderer, atom, context);
             }
+            reuseElementChildrenView(nativeRenderer, atom);
             context.isParent = false;
             context.host = atom.nativeNode;
         }
@@ -1506,6 +1522,18 @@ function reuseComponentView(nativeRenderer, child, context, moveView) {
         child = child.sibling;
     }
 }
+function reuseElementChildrenView(nativeRenderer, atom, context, skipSubComponentDiff) {
+    let child = atom.child;
+    while (child) {
+        if (child.jsxNode instanceof Component) {
+            updateView(nativeRenderer, child.jsxNode, false);
+        }
+        else {
+            reuseElementChildrenView(nativeRenderer, child);
+        }
+        child = child.sibling;
+    }
+}
 function cleanElementChildren(atom, nativeRenderer) {
     let child = atom.child;
     nativeRenderer.cleanChildren(atom.nativeNode, atom.isSvg);
@@ -1538,16 +1566,16 @@ function cleanView(nativeRenderer, atom, needClean) {
     }
 }
 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;
-    componentViewCache.set(component, Object.assign({ atom: from }, context));
-    let child = from.child;
-    while (child) {
-        buildView(nativeRenderer, component, child, context);
-        child = child.sibling;
-    }
-    component.rendered();
+    component.render((template, portalHost) => {
+        from.child = createChildChain(template, from.isSvg);
+        context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
+        componentViewCache.set(component, Object.assign({ atom: from }, context));
+        let child = from.child;
+        while (child) {
+            buildView(nativeRenderer, component, child, context);
+            child = child.sibling;
+        }
+    });
 }
 function createChainByJSXNode(type, jsxNode, nodeType, prevAtom, isSvg, key) {
     const atom = {
@@ -1650,7 +1678,11 @@ function createElement(nativeRenderer, atom, parentComponent, context) {
     }
     atom.nativeNode = nativeNode;
     insertNode(nativeRenderer, atom, context);
-    buildElementChildren(atom, nativeRenderer, parentComponent, context);
+    buildElementChildren(atom, nativeRenderer, parentComponent, {
+        isParent: true,
+        host: nativeNode,
+        rootHost: context.rootHost
+    });
     context.host = nativeNode;
     context.isParent = false;
     applyRefs(bindingRefs, nativeNode, true);
@@ -1668,14 +1700,18 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
     const nativeNode = newAtom.nativeNode;
     const oldVNode = oldAtom.jsxNode;
     if (newVNode === oldVNode) {
-        updateElementChildren(newAtom, oldAtom, nativeRenderer, parentComponent, context, isSvg);
+        newAtom.child = oldAtom.child;
+        reuseElementChildrenView(nativeRenderer, newAtom);
         return;
     }
     const changes = getObjectChanges(newVNode.props, oldVNode.props);
     let unBindRefs;
     let bindRefs;
+    let updatedChildren = false;
     for (const [key, value] of changes.remove) {
         if (key === 'children') {
+            updatedChildren = true;
+            cleanElementChildren(oldAtom, nativeRenderer);
             continue;
         }
         if (key === 'class') {
@@ -1702,6 +1738,14 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
     }
     for (const [key, newValue, oldValue] of changes.replace) {
         if (key === 'children') {
+            updatedChildren = true;
+            newAtom.child = createChildChain(newValue, isSvg);
+            if (!newAtom.child) {
+                cleanElementChildren(oldAtom, nativeRenderer);
+            }
+            else {
+                diff(nativeRenderer, parentComponent, newAtom.child, oldAtom.child, context, false);
+            }
             continue;
         }
         if (key === 'class') {
@@ -1736,6 +1780,9 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
     }
     for (const [key, value] of changes.add) {
         if (key === 'children') {
+            updatedChildren = true;
+            newAtom.child = createChildChain(value, isSvg);
+            buildElementChildren(newAtom, nativeRenderer, parentComponent, context);
             continue;
         }
         if (key === 'class') {
@@ -1761,40 +1808,13 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
         }
         nativeRenderer.setProperty(nativeNode, key, value, isSvg);
     }
-    updateElementChildren(newAtom, oldAtom, nativeRenderer, parentComponent, context, isSvg);
+    if (!updatedChildren) {
+        newAtom.child = oldAtom.child;
+        reuseElementChildrenView(nativeRenderer, newAtom);
+    }
     applyRefs(unBindRefs, nativeNode, false);
     applyRefs(bindRefs, nativeNode, true);
 }
-function updateElementChildren(newAtom, oldAtom, nativeRenderer, parentComponent, context, isSvg) {
-    /**
-     * 不能仅依赖 children 是否相等的判断来确定是否要继续向下 diff
-     * 如：
-     * ```tsx
-     * <Comp>
-     *   <div>
-     *     {props.children}
-     *   </div>
-     * </Comp>
-     * ```
-     * 其中当 Comp 产生变化时，children 来自父组件，这时 children 是相等的，
-     * 但，children 内可能有子组件也发生了变化，如果不继续 diff，那么，子组件
-     * 的视图更新将不会发生
-     */
-    newAtom.child = createChildChain(newAtom.jsxNode.props.children, isSvg);
-    if (!newAtom.child) {
-        // 防止删除用户手动添加的元素
-        if (oldAtom.child) {
-            cleanElementChildren(oldAtom, nativeRenderer);
-        }
-    }
-    else {
-        diff(nativeRenderer, parentComponent, newAtom.child, oldAtom.child, {
-            host: newAtom.nativeNode,
-            isParent: true,
-            rootHost: context.rootHost
-        }, false);
-    }
-}
 function applyRefs(refs, nativeNode, binding) {
     if (refs) {
         const refList = Array.isArray(refs) ? refs : [refs];
@@ -1911,6 +1931,7 @@ function viewfly(config) {
 }
 
 exports.Component = Component;
+exports.Context = Context;
 exports.DynamicRef = DynamicRef;
 exports.ForwardRef = ForwardRef;
 exports.Fragment = Fragment;

package/jsx-runtime/index.d.ts

@@ -18,6 +18,8 @@ export declare namespace JSX {
     }
     interface ElementChildrenAttribute extends ViewflyJSX.ElementChildrenAttribute {
     }
+    interface ElementAttributesProperty extends ViewflyJSX.ElementAttributesProperty {
+    }
     interface IntrinsicClassAttributes<T> extends ViewflyJSX.IntrinsicClassAttributes<T> {
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "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": "cd1ecadfe947e44eeff2966f13b03471ab6c8790",
+  "gitHead": "272ca07c3c97c4f468369380303c41133b345228",
   "dependencies": {
     "reflect-metadata": "^0.2.2"
   }