@viewfly/core 1.0.0-alpha.15 → 1.0.0-alpha.17

package/bundles/index.d.ts

@@ -191,6 +191,22 @@ declare class ReflectiveInjector implements Injector {
 
 declare function makeError(name: string): (message: string) => Error;
 
+interface Props {
+    children?: JSXNode | JSXNode[];
+}
+declare function Fragment(props: Props): () => any;
+type Key = number | string;
+declare function jsx(type: string | ComponentSetup, props: Props & Record<string, any>, key?: Key): ViewFlyNode;
+declare const jsxs: typeof jsx;
+interface ViewFlyNode<T = string | ComponentSetup> {
+    type: T;
+    props: Props & Record<string, any>;
+    key?: Key;
+}
+declare const JSXNodeFactory: {
+    createNode<T = string | ComponentSetup<any>>(type: T, props: Props & Record<string, any>, key?: Key): ViewFlyNode<T>;
+};
+
 type NativeNode = Record<string, any>;
 declare abstract class NativeRenderer<ElementNode = NativeNode, TextNode = NativeNode> {
     abstract createElement(name: string, isSvg: boolean): ElementNode;
@@ -210,32 +226,52 @@ declare abstract class NativeRenderer<ElementNode = NativeNode, TextNode = Nativ
     abstract insertAfter(newNode: ElementNode | TextNode, ref: ElementNode | TextNode, isSvg: boolean): void;
 }
 
-interface Props {
-    children?: JSXInternal.ViewNode | JSXInternal.ViewNode[];
-}
-declare function Fragment(props: Props): () => any;
-type Key = number | string;
-declare function jsx(type: string | JSXInternal.ComponentSetup, props: Props & Record<string, any>, key?: Key): JSXNode;
-declare const jsxs: typeof jsx;
-interface JSXNode<T = string | JSXInternal.ComponentSetup> {
-    type: T;
-    props: Props & Record<string, any>;
-    key?: Key;
+declare namespace JSX {
+    type Element<P = any> = IntrinsicElements[string] | ComponentSetup<P>;
+    interface IntrinsicAttributes {
+        key?: Key;
+        ref?: any;
+    }
+    interface RefAttributes<T> extends IntrinsicAttributes {
+        ref?: DynamicRef<ExtractInstanceType<T>> | DynamicRef<ExtractInstanceType<T>>[];
+    }
+    interface ElementClass<P = any> extends ComponentInstance<P> {
+    }
+    interface ElementChildrenAttribute {
+    }
+    interface IntrinsicElements {
+        [name: string]: any;
+    }
+    interface IntrinsicClassAttributes<T> {
+        ref?: DynamicRef<T>;
+    }
 }
-declare const JSXNodeFactory: {
-    createNode<T = string | JSXInternal.ComponentSetup<any>>(type: T, props: Props & Record<string, any>, key?: Key): JSXNode<T>;
-};
 
+type ClassNames = string | Record<string, unknown> | false | null | undefined | ClassNames[];
+interface ComponentInstance<P> {
+    $portalHost?: NativeNode;
+    $render(): JSXNode;
+    $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;
-    readonly type: JSXInternal.ComponentSetup;
+    readonly type: ComponentSetup;
     props: Props;
     readonly key?: Key | undefined;
-    instance: JSXInternal.ComponentInstance<Props>;
-    template: JSXInternal.ViewNode;
+    instance: ComponentInstance<Props>;
+    template: JSXNode;
     changedSubComponents: Set<Component>;
     get dirty(): boolean;
     get changed(): boolean;
@@ -250,7 +286,7 @@ declare class Component extends ReflectiveInjector {
     private unWatch?;
     private isFirstRendering;
     private refs;
-    constructor(parentComponent: Injector | null, type: JSXInternal.ComponentSetup, props: Props, key?: Key | undefined);
+    constructor(parentComponent: Injector | null, type: ComponentSetup, props: Props, key?: Key | undefined);
     markAsDirtied(): void;
     markAsChanged(changedComponent?: Component): void;
     render(): {
@@ -328,9 +364,9 @@ declare function onUnmounted(callback: () => void): void;
 interface RefListener<T> {
     (current: T): void | (() => void);
 }
-type ExtractInstanceType<T, U = T extends (...args: any) => any ? ReturnType<T> : T> = U extends JSXInternal.ComponentInstance<any> ? Omit<U, keyof JSXInternal.ComponentInstance<any>> : U extends Function ? never : T;
+type ExtractInstanceType<T, U = T extends (...args: any) => any ? ReturnType<T> : T> = U extends ComponentInstance<any> ? Omit<U, keyof ComponentInstance<any>> : U extends Function ? never : T;
 interface AbstractInstanceType<T extends Record<string, any>> {
-    (): T & JSXInternal.ComponentInstance<any>;
+    (): T & ComponentInstance<any>;
 }
 declare class DynamicRef<T> {
     private callback;
@@ -457,7 +493,7 @@ declare function watch<T = any>(deps: Signal<any>[], callback: WatchCallback<T[]
  * })
  * ```
  */
-declare function withAnnotation<T extends JSXInternal.ComponentSetup>(annotation: JSXInternal.ComponentAnnotation, componentSetup: T): T;
+declare function withAnnotation<T extends ComponentSetup>(annotation: ComponentAnnotation, componentSetup: T): T;
 /**
  * 通过组件上下文获取 IoC 容器内数据的勾子方法
  */
@@ -467,7 +503,7 @@ declare function inject<T extends Type<any> | AbstractType<any> | InjectionToken
  */
 declare function getCurrentInstance(): Component;
 
-declare function withMemo<T extends Props = Props>(canUseMemo: JSXInternal.ComponentInstance<T>['$useMemo'], render: () => JSXInternal.ViewNode): JSXInternal.ComponentInstance<T>;
+declare function withMemo<T extends Props = Props>(canUseMemo: ComponentInstance<T>['$useMemo'], render: () => JSXNode): ComponentInstance<T>;
 
 declare function createRenderer(component: Component, nativeRenderer: NativeRenderer): (host: NativeNode) => void;
 
@@ -476,49 +512,10 @@ declare function createRenderer(component: Component, nativeRenderer: NativeRend
  */
 declare class RootComponent extends Component {
     private refresh;
-    constructor(parentInjector: Injector | null, factory: JSXInternal.ComponentSetup, refresh: () => void);
+    constructor(parentInjector: Injector | null, factory: ComponentSetup, refresh: () => void);
     markAsChanged(changedComponent?: Component): void;
 }
 
-type ViewNode = JSXInternal.ViewNode;
-declare global {
-    namespace JSXInternal {
-        type ClassNames = string | Record<string, unknown> | false | null | undefined | ClassNames[];
-        interface ComponentInstance<P> {
-            $portalHost?: NativeNode;
-            $render(): ViewNode;
-            $useMemo?(currentProps: P, prevProps: P): boolean;
-        }
-        type ViewNode = Element | JSXInternal.ElementClass | string | number | boolean | null | undefined | Iterable<ViewNode>;
-        interface ComponentAnnotation {
-            scope?: Scope;
-            providers?: Provider[];
-        }
-        interface ComponentSetup<P = any> {
-            (props: P): (() => ViewNode) | ComponentInstance<P>;
-            annotation?: ComponentAnnotation;
-        }
-        type Element<P = any, C extends string | ComponentSetup<P> = string | ComponentSetup<P>> = C extends string ? IntrinsicElements[C] : (() => Element) | ComponentInstance<P>;
-        interface IntrinsicAttributes {
-            key?: Key;
-            ref?: any;
-        }
-        interface RefAttributes<T> extends IntrinsicAttributes {
-            ref?: DynamicRef<ExtractInstanceType<T>> | DynamicRef<ExtractInstanceType<T>>[];
-        }
-        interface ElementClass<P = any> extends ComponentInstance<P> {
-        }
-        interface ElementChildrenAttribute {
-        }
-        interface IntrinsicElements {
-            [name: string]: any;
-        }
-        interface IntrinsicClassAttributes<T> {
-            ref?: DynamicRef<T>;
-        }
-    }
-}
-
 declare const TextAtomType: unique symbol;
 declare const ElementAtomType: unique symbol;
 declare const ComponentAtomType: unique symbol;
@@ -526,6 +523,8 @@ interface TextAtom {
     type: typeof TextAtomType;
     index: number;
     jsxNode: string;
+    nodeType: string;
+    key?: null;
     nativeNode: NativeNode | null;
     child: Atom | null;
     sibling: Atom | null;
@@ -534,7 +533,9 @@ interface TextAtom {
 interface ElementAtom {
     type: typeof ElementAtomType;
     index: number;
-    jsxNode: JSXNode<string>;
+    nodeType: string;
+    key?: Key;
+    jsxNode: ViewFlyNode<string>;
     nativeNode: NativeNode | null;
     child: Atom | null;
     sibling: Atom | null;
@@ -543,7 +544,9 @@ interface ElementAtom {
 interface ComponentAtom {
     type: typeof ComponentAtomType;
     index: number;
-    jsxNode: JSXNode<JSXInternal.ComponentSetup> | Component;
+    nodeType: ComponentSetup;
+    key?: Key;
+    jsxNode: ViewFlyNode<ComponentSetup> | Component;
     nativeNode: NativeNode | null;
     child: Atom | null;
     sibling: Atom | null;
@@ -562,7 +565,7 @@ interface ComponentView {
  */
 interface Config {
     /** 根节点 */
-    root: JSXInternal.ViewNode;
+    root: JSXNode;
     /** 平台渲染器 */
     nativeRenderer: NativeRenderer;
     /** 应用的上下文 */
@@ -584,4 +587,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 ClassProvider, Component, 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, 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 ViewNode, 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, 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

@@ -1294,6 +1294,7 @@ function createRenderer(component, nativeRenderer) {
             const atom = {
                 type: ComponentAtomType,
                 index: 0,
+                nodeType: component.type,
                 jsxNode: component,
                 sibling: null,
                 child: null,
@@ -1397,28 +1398,19 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context) {
 }
 function createChanges(newAtom, oldAtom, nativeRenderer, commits, context, parentComponent, effect) {
     const startDiffAtom = oldAtom;
-    const { jsxNode: newJsxNode, type } = newAtom;
-    const key = newJsxNode.key;
     let prev = null;
     while (oldAtom) {
-        if (type === oldAtom.type) {
+        const newAtomType = newAtom.type;
+        if (oldAtom.type === newAtomType && oldAtom.nodeType === newAtom.nodeType && oldAtom.key === newAtom.key) {
             let commit;
-            if (type === TextAtomType) {
+            if (newAtomType === TextAtomType) {
                 commit = updateText(newAtom, oldAtom, nativeRenderer, context);
             }
+            else if (newAtomType === ComponentAtomType) {
+                commit = updateComponent(newAtom, oldAtom, nativeRenderer, context);
+            }
             else {
-                const { key: diffKey, type: diffType } = oldAtom.jsxNode;
-                if (diffKey !== key || newJsxNode.type !== diffType) {
-                    prev = oldAtom;
-                    oldAtom = oldAtom.sibling;
-                    continue;
-                }
-                if (type === ComponentAtomType) {
-                    commit = updateComponent(newAtom, oldAtom, nativeRenderer, context);
-                }
-                else {
-                    commit = updateElement(newAtom, oldAtom, nativeRenderer, context, parentComponent);
-                }
+                commit = updateElement(newAtom, oldAtom, nativeRenderer, context, parentComponent);
             }
             commits.push(commit);
             const next = oldAtom.sibling;
@@ -1441,12 +1433,12 @@ function createNewView(start, nativeRenderer, context, parentComponent, effect)
     };
 }
 function updateText(newAtom, oldAtom, nativeRenderer, context) {
-    return function () {
+    return function (offset) {
         const nativeNode = oldAtom.nativeNode;
-        if (newAtom.jsxNode !== oldAtom.jsxNode) {
-            nativeRenderer.syncTextContent(nativeNode, newAtom.jsxNode, newAtom.isSvg);
-        }
         newAtom.nativeNode = nativeNode;
+        if (newAtom.index - offset !== oldAtom.index) {
+            insertNode(nativeRenderer, newAtom, context);
+        }
         context.host = nativeNode;
         context.isParent = false;
     };
@@ -1560,7 +1552,7 @@ function componentRender(nativeRenderer, component, from, context) {
     }
     component.rendered();
 }
-function createChainByJSXNode(type, jsxNode, prevAtom, isSvg) {
+function createChainByJSXNode(type, jsxNode, nodeType, prevAtom, isSvg, key) {
     const atom = {
         type,
         index: prevAtom.index + 1,
@@ -1568,7 +1560,9 @@ function createChainByJSXNode(type, jsxNode, prevAtom, isSvg) {
         sibling: null,
         child: null,
         nativeNode: null,
-        isSvg
+        isSvg,
+        nodeType,
+        key
     };
     prevAtom.sibling = atom;
     return atom;
@@ -1577,7 +1571,7 @@ function createChainByNode(jsxNode, prevAtom, isSvg) {
     const type = typeof jsxNode;
     if (jsxNode !== null && type !== 'undefined' && type !== 'boolean') {
         if (typeof jsxNode === 'string') {
-            return createChainByJSXNode(TextAtomType, jsxNode, prevAtom, isSvg);
+            return createChainByJSXNode(TextAtomType, jsxNode, jsxNode, prevAtom, isSvg);
         }
         if (Array.isArray(jsxNode)) {
             return createChainByChildren(jsxNode, prevAtom, isSvg);
@@ -1585,13 +1579,14 @@ function createChainByNode(jsxNode, prevAtom, isSvg) {
         if (type === 'object') {
             const nodeType = typeof jsxNode.type;
             if (nodeType === 'string') {
-                return createChainByJSXNode(ElementAtomType, jsxNode, prevAtom, isSvg || jsxNode.type === 'svg');
+                return createChainByJSXNode(ElementAtomType, jsxNode, jsxNode.type, prevAtom, isSvg || jsxNode.type === 'svg', jsxNode.key);
             }
             else if (nodeType === 'function') {
-                return createChainByJSXNode(ComponentAtomType, jsxNode, prevAtom, isSvg);
+                return createChainByJSXNode(ComponentAtomType, jsxNode, jsxNode.type, prevAtom, isSvg, jsxNode.key);
             }
         }
-        return createChainByJSXNode(TextAtomType, String(jsxNode), prevAtom, isSvg);
+        const text = String(jsxNode);
+        return createChainByJSXNode(TextAtomType, text, text, prevAtom, isSvg);
     }
     return prevAtom;
 }
@@ -1685,10 +1680,12 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
     let unBindRefs;
     let bindRefs;
     newAtom.child = oldAtom.child;
+    let updatedSubComponent = false;
     for (const [key, value] of changes.remove) {
         if (key === 'children') {
             cleanElementChildren(oldAtom, nativeRenderer);
             newAtom.child = null;
+            updatedSubComponent = true;
             continue;
         }
         if (key === 'class') {
@@ -1726,6 +1723,7 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
                     rootHost: context.rootHost
                 });
             }
+            updatedSubComponent = true;
             continue;
         }
         if (key === 'class') {
@@ -1762,6 +1760,7 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
         if (key === 'children') {
             newAtom.child = createChildChain(value, isSvg);
             buildElementChildren(newAtom, nativeRenderer, parentComponent, context);
+            updatedSubComponent = true;
             continue;
         }
         if (key === 'class') {
@@ -1787,6 +1786,11 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
         }
         nativeRenderer.setProperty(nativeNode, key, value, isSvg);
     }
+    if (!updatedSubComponent) {
+        parentComponent.changedSubComponents.forEach(child => {
+            updateView(nativeRenderer, child);
+        });
+    }
     applyRefs(unBindRefs, nativeNode, false);
     applyRefs(bindRefs, nativeNode, true);
 }

package/bundles/index.js

@@ -1296,6 +1296,7 @@ function createRenderer(component, nativeRenderer) {
             const atom = {
                 type: ComponentAtomType,
                 index: 0,
+                nodeType: component.type,
                 jsxNode: component,
                 sibling: null,
                 child: null,
@@ -1399,28 +1400,19 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context) {
 }
 function createChanges(newAtom, oldAtom, nativeRenderer, commits, context, parentComponent, effect) {
     const startDiffAtom = oldAtom;
-    const { jsxNode: newJsxNode, type } = newAtom;
-    const key = newJsxNode.key;
     let prev = null;
     while (oldAtom) {
-        if (type === oldAtom.type) {
+        const newAtomType = newAtom.type;
+        if (oldAtom.type === newAtomType && oldAtom.nodeType === newAtom.nodeType && oldAtom.key === newAtom.key) {
             let commit;
-            if (type === TextAtomType) {
+            if (newAtomType === TextAtomType) {
                 commit = updateText(newAtom, oldAtom, nativeRenderer, context);
             }
+            else if (newAtomType === ComponentAtomType) {
+                commit = updateComponent(newAtom, oldAtom, nativeRenderer, context);
+            }
             else {
-                const { key: diffKey, type: diffType } = oldAtom.jsxNode;
-                if (diffKey !== key || newJsxNode.type !== diffType) {
-                    prev = oldAtom;
-                    oldAtom = oldAtom.sibling;
-                    continue;
-                }
-                if (type === ComponentAtomType) {
-                    commit = updateComponent(newAtom, oldAtom, nativeRenderer, context);
-                }
-                else {
-                    commit = updateElement(newAtom, oldAtom, nativeRenderer, context, parentComponent);
-                }
+                commit = updateElement(newAtom, oldAtom, nativeRenderer, context, parentComponent);
             }
             commits.push(commit);
             const next = oldAtom.sibling;
@@ -1443,12 +1435,12 @@ function createNewView(start, nativeRenderer, context, parentComponent, effect)
     };
 }
 function updateText(newAtom, oldAtom, nativeRenderer, context) {
-    return function () {
+    return function (offset) {
         const nativeNode = oldAtom.nativeNode;
-        if (newAtom.jsxNode !== oldAtom.jsxNode) {
-            nativeRenderer.syncTextContent(nativeNode, newAtom.jsxNode, newAtom.isSvg);
-        }
         newAtom.nativeNode = nativeNode;
+        if (newAtom.index - offset !== oldAtom.index) {
+            insertNode(nativeRenderer, newAtom, context);
+        }
         context.host = nativeNode;
         context.isParent = false;
     };
@@ -1562,7 +1554,7 @@ function componentRender(nativeRenderer, component, from, context) {
     }
     component.rendered();
 }
-function createChainByJSXNode(type, jsxNode, prevAtom, isSvg) {
+function createChainByJSXNode(type, jsxNode, nodeType, prevAtom, isSvg, key) {
     const atom = {
         type,
         index: prevAtom.index + 1,
@@ -1570,7 +1562,9 @@ function createChainByJSXNode(type, jsxNode, prevAtom, isSvg) {
         sibling: null,
         child: null,
         nativeNode: null,
-        isSvg
+        isSvg,
+        nodeType,
+        key
     };
     prevAtom.sibling = atom;
     return atom;
@@ -1579,7 +1573,7 @@ function createChainByNode(jsxNode, prevAtom, isSvg) {
     const type = typeof jsxNode;
     if (jsxNode !== null && type !== 'undefined' && type !== 'boolean') {
         if (typeof jsxNode === 'string') {
-            return createChainByJSXNode(TextAtomType, jsxNode, prevAtom, isSvg);
+            return createChainByJSXNode(TextAtomType, jsxNode, jsxNode, prevAtom, isSvg);
         }
         if (Array.isArray(jsxNode)) {
             return createChainByChildren(jsxNode, prevAtom, isSvg);
@@ -1587,13 +1581,14 @@ function createChainByNode(jsxNode, prevAtom, isSvg) {
         if (type === 'object') {
             const nodeType = typeof jsxNode.type;
             if (nodeType === 'string') {
-                return createChainByJSXNode(ElementAtomType, jsxNode, prevAtom, isSvg || jsxNode.type === 'svg');
+                return createChainByJSXNode(ElementAtomType, jsxNode, jsxNode.type, prevAtom, isSvg || jsxNode.type === 'svg', jsxNode.key);
             }
             else if (nodeType === 'function') {
-                return createChainByJSXNode(ComponentAtomType, jsxNode, prevAtom, isSvg);
+                return createChainByJSXNode(ComponentAtomType, jsxNode, jsxNode.type, prevAtom, isSvg, jsxNode.key);
             }
         }
-        return createChainByJSXNode(TextAtomType, String(jsxNode), prevAtom, isSvg);
+        const text = String(jsxNode);
+        return createChainByJSXNode(TextAtomType, text, text, prevAtom, isSvg);
     }
     return prevAtom;
 }
@@ -1687,10 +1682,12 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
     let unBindRefs;
     let bindRefs;
     newAtom.child = oldAtom.child;
+    let updatedSubComponent = false;
     for (const [key, value] of changes.remove) {
         if (key === 'children') {
             cleanElementChildren(oldAtom, nativeRenderer);
             newAtom.child = null;
+            updatedSubComponent = true;
             continue;
         }
         if (key === 'class') {
@@ -1728,6 +1725,7 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
                     rootHost: context.rootHost
                 });
             }
+            updatedSubComponent = true;
             continue;
         }
         if (key === 'class') {
@@ -1764,6 +1762,7 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
         if (key === 'children') {
             newAtom.child = createChildChain(value, isSvg);
             buildElementChildren(newAtom, nativeRenderer, parentComponent, context);
+            updatedSubComponent = true;
             continue;
         }
         if (key === 'class') {
@@ -1789,6 +1788,11 @@ function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComp
         }
         nativeRenderer.setProperty(nativeNode, key, value, isSvg);
     }
+    if (!updatedSubComponent) {
+        parentComponent.changedSubComponents.forEach(child => {
+            updateView(nativeRenderer, child);
+        });
+    }
     applyRefs(unBindRefs, nativeNode, false);
     applyRefs(bindRefs, nativeNode, true);
 }

package/jsx-dev-runtime/node_modules/.bin/rimraf

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/tanbo/Documents/lib/viewfly/node_modules/.pnpm/rimraf@3.0.2/node_modules/rimraf/node_modules:/Users/tanbo/Documents/lib/viewfly/node_modules/.pnpm/rimraf@3.0.2/node_modules:/Users/tanbo/Documents/lib/viewfly/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Users/tanbo/Documents/lib/viewfly/node_modules/.pnpm/rimraf@3.0.2/node_modules/rimraf/node_modules:/Users/tanbo/Documents/lib/viewfly/node_modules/.pnpm/rimraf@3.0.2/node_modules:/Users/tanbo/Documents/lib/viewfly/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../rimraf/bin.js" "$@"
+else
+  exec node  "$basedir/../rimraf/bin.js" "$@"
+fi

package/jsx-dev-runtime/node_modules/.bin/rollup

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/tanbo/Documents/lib/viewfly/node_modules/.pnpm/rollup@3.29.4/node_modules/rollup/dist/bin/node_modules:/Users/tanbo/Documents/lib/viewfly/node_modules/.pnpm/rollup@3.29.4/node_modules/rollup/dist/node_modules:/Users/tanbo/Documents/lib/viewfly/node_modules/.pnpm/rollup@3.29.4/node_modules/rollup/node_modules:/Users/tanbo/Documents/lib/viewfly/node_modules/.pnpm/rollup@3.29.4/node_modules:/Users/tanbo/Documents/lib/viewfly/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Users/tanbo/Documents/lib/viewfly/node_modules/.pnpm/rollup@3.29.4/node_modules/rollup/dist/bin/node_modules:/Users/tanbo/Documents/lib/viewfly/node_modules/.pnpm/rollup@3.29.4/node_modules/rollup/dist/node_modules:/Users/tanbo/Documents/lib/viewfly/node_modules/.pnpm/rollup@3.29.4/node_modules/rollup/node_modules:/Users/tanbo/Documents/lib/viewfly/node_modules/.pnpm/rollup@3.29.4/node_modules:/Users/tanbo/Documents/lib/viewfly/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../rollup/dist/bin/rollup" "$@"
+else
+  exec node  "$basedir/../rollup/dist/bin/rollup" "$@"
+fi

package/jsx-dev-runtime/node_modules/.bin/tsc

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/tanbo/Documents/lib/viewfly/node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/bin/node_modules:/Users/tanbo/Documents/lib/viewfly/node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/node_modules:/Users/tanbo/Documents/lib/viewfly/node_modules/.pnpm/typescript@5.4.5/node_modules:/Users/tanbo/Documents/lib/viewfly/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Users/tanbo/Documents/lib/viewfly/node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/bin/node_modules:/Users/tanbo/Documents/lib/viewfly/node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/node_modules:/Users/tanbo/Documents/lib/viewfly/node_modules/.pnpm/typescript@5.4.5/node_modules:/Users/tanbo/Documents/lib/viewfly/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/bin/tsc" "$@"
+else
+  exec node  "$basedir/../../../../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/bin/tsc" "$@"
+fi

package/jsx-dev-runtime/node_modules/.bin/tsserver

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/tanbo/Documents/lib/viewfly/node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/bin/node_modules:/Users/tanbo/Documents/lib/viewfly/node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/node_modules:/Users/tanbo/Documents/lib/viewfly/node_modules/.pnpm/typescript@5.4.5/node_modules:/Users/tanbo/Documents/lib/viewfly/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Users/tanbo/Documents/lib/viewfly/node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/bin/node_modules:/Users/tanbo/Documents/lib/viewfly/node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/node_modules:/Users/tanbo/Documents/lib/viewfly/node_modules/.pnpm/typescript@5.4.5/node_modules:/Users/tanbo/Documents/lib/viewfly/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/bin/tsserver" "$@"
+else
+  exec node  "$basedir/../../../../../node_modules/.pnpm/typescript@5.4.5/node_modules/typescript/bin/tsserver" "$@"
+fi

package/jsx-runtime/index.d.ts

@@ -1,4 +1,4 @@
-import { jsx, jsxs, Fragment } from '@viewfly/core';
+import { jsx, jsxs, Fragment, JSX as ViewflyJSX } from '@viewfly/core';
 /**
  * JSX namespace for usage with @jsxImportsSource directive
  * when ts compilerOptions.jsx is 'react-jsx'
@@ -7,15 +7,15 @@ import { jsx, jsxs, Fragment } from '@viewfly/core';
 declare const jsxDEV: typeof jsx;
 export { jsx, jsxs, Fragment, jsxDEV };
 export declare namespace JSX {
-    type Element = JSXInternal.Element;
-    interface ElementClass extends JSXInternal.ElementClass {
+    type Element = ViewflyJSX.Element;
+    interface ElementClass extends ViewflyJSX.ElementClass {
     }
-    interface IntrinsicElements extends JSXInternal.IntrinsicElements {
+    interface IntrinsicElements extends ViewflyJSX.IntrinsicElements {
     }
-    interface IntrinsicAttributes extends JSXInternal.IntrinsicAttributes {
+    interface IntrinsicAttributes extends ViewflyJSX.IntrinsicAttributes {
     }
-    interface ElementChildrenAttribute extends JSXInternal.ElementChildrenAttribute {
+    interface ElementChildrenAttribute extends ViewflyJSX.ElementChildrenAttribute {
     }
-    interface IntrinsicClassAttributes<T> extends JSXInternal.IntrinsicClassAttributes<T> {
+    interface IntrinsicClassAttributes<T> extends ViewflyJSX.IntrinsicClassAttributes<T> {
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "1.0.0-alpha.15",
+  "version": "1.0.0-alpha.17",
   "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": "20910725ab3302fe98b04db6e6f6b44a3f5b64b5",
+  "gitHead": "4fd97b73e7808b45660f2b802f4b327a67366a7e",
   "dependencies": {
     "reflect-metadata": "^0.2.2"
   }