@viewfly/core 0.0.4 → 0.0.5

package/bundles/foundation/renderer.d.ts

@@ -16,6 +16,7 @@ export declare class Renderer {
     private reconcileElement;
     private applyChanges;
     private diff;
+    private reuseComponentView;
     private createChanges;
     private cleanView;
     private buildView;

package/bundles/index.esm.js

@@ -43,6 +43,80 @@ function __metadata(metadataKey, metadataValue) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
 }
 
+const refKey = 'ref';
+function getObjectChanges(newProps, oldProps) {
+    const changes = {
+        remove: [],
+        add: [],
+        replace: []
+    };
+    Object.keys(newProps).forEach(key => {
+        const leftValue = newProps[key];
+        const rightValue = oldProps[key];
+        if (Reflect.has(oldProps, key)) {
+            if (leftValue !== rightValue) {
+                changes.replace.push([key, leftValue, rightValue]);
+            }
+            return;
+        }
+        changes.add.push([key, leftValue]);
+    });
+    Object.keys(oldProps).forEach(key => {
+        if (!Reflect.has(newProps, key)) {
+            changes.remove.push([key, oldProps[key]]);
+        }
+    });
+    return changes;
+}
+function classToString(config) {
+    if (!config) {
+        return '';
+    }
+    if (typeof config === 'string') {
+        return config;
+    }
+    else if (Array.isArray(config)) {
+        return config.map(i => {
+            return classToString(i);
+        }).join(' ');
+    }
+    else if (typeof config === 'object') {
+        if (config.toString !== Object.prototype.toString && !config.toString.toString().includes('[native code]')) {
+            return config.toString();
+        }
+        const classes = [];
+        for (const key in config) {
+            if ({}.hasOwnProperty.call(config, key) && config[key]) {
+                classes.push(key);
+            }
+        }
+        return classes.join(' ');
+    }
+}
+function styleToObject(style) {
+    if (typeof style !== 'string') {
+        return style;
+    }
+    const obj = {};
+    style.split(';').map(s => s.split(':')).forEach(v => {
+        if (!v[0] || !v[1]) {
+            return;
+        }
+        obj[v[0].trim()] = v[1].trim();
+    });
+    return obj;
+}
+
+class Memo {
+    constructor(shouldUpdate, render) {
+        this.shouldUpdate = shouldUpdate;
+        this.render = render;
+    }
+}
+function withMemo(shouldUpdate, render) {
+    return new Memo(shouldUpdate, render);
+}
+
 const componentSetupStack = [];
 const signalDepsStack = [];
 const componentErrorFn = makeError('component');
@@ -122,17 +196,29 @@ class Component extends ReflectiveInjector {
         isSetup = false;
         componentSetupStack.pop();
         signalDepsStack.push([]);
-        const template = render();
+        const templateRender = render instanceof Memo ? render.render : render;
+        let template = templateRender();
         const deps = signalDepsStack.pop();
         this.unWatch = useEffect(deps, () => {
             this.markAsDirtied();
         });
         return {
             template,
-            render: () => {
+            render: (newProps, oldProps) => {
+                if (newProps !== oldProps) {
+                    const { add, remove, replace } = getObjectChanges(newProps, oldProps);
+                    if (add.length || remove.length || replace.length) {
+                        this.invokePropsChangedHooks(newProps);
+                    }
+                }
+                if (render instanceof Memo) {
+                    if (!render.shouldUpdate(newProps, oldProps)) {
+                        return template;
+                    }
+                }
                 this.unWatch();
                 signalDepsStack.push([]);
-                const template = render();
+                template = templateRender();
                 const deps = signalDepsStack.pop();
                 this.unWatch = useEffect(deps, () => {
                     this.markAsDirtied();
@@ -164,20 +250,6 @@ class Component extends ReflectiveInjector {
             this.invokeUpdatedHooks();
         }
     }
-    invokePropsChangedHooks(newProps) {
-        const oldProps = this.props;
-        this.props = newProps;
-        this.propsChangedDestroyCallbacks.forEach(fn => {
-            fn();
-        });
-        this.propsChangedDestroyCallbacks = [];
-        for (const fn of this.propsChangedCallbacks) {
-            const destroyFn = fn(newProps, oldProps);
-            if (typeof destroyFn === 'function') {
-                this.propsChangedDestroyCallbacks.push(destroyFn);
-            }
-        }
-    }
     destroy() {
         this.unWatch();
         this.updatedDestroyCallbacks.forEach(fn => {
@@ -195,6 +267,20 @@ class Component extends ReflectiveInjector {
         this.mountCallbacks = [];
         this.updatedCallbacks = [];
     }
+    invokePropsChangedHooks(newProps) {
+        const oldProps = this.props;
+        this.props = newProps;
+        this.propsChangedDestroyCallbacks.forEach(fn => {
+            fn();
+        });
+        this.propsChangedDestroyCallbacks = [];
+        for (const fn of this.propsChangedCallbacks) {
+            const destroyFn = fn(newProps, oldProps);
+            if (typeof destroyFn === 'function') {
+                this.propsChangedDestroyCallbacks.push(destroyFn);
+            }
+        }
+    }
     invokeMountHooks() {
         for (const fn of this.mountCallbacks) {
             const destroyFn = fn();
@@ -554,70 +640,6 @@ class RootComponent extends Component {
     }
 }
 
-const refKey = 'ref';
-function getObjectChanges(newProps, oldProps) {
-    const changes = {
-        remove: [],
-        add: [],
-        replace: []
-    };
-    Object.keys(newProps).forEach(key => {
-        const leftValue = newProps[key];
-        const rightValue = oldProps[key];
-        if (Reflect.has(oldProps, key)) {
-            if (leftValue !== rightValue) {
-                changes.replace.push([key, leftValue, rightValue]);
-            }
-            return;
-        }
-        changes.add.push([key, leftValue]);
-    });
-    Object.keys(oldProps).forEach(key => {
-        if (!Reflect.has(newProps, key)) {
-            changes.remove.push([key, oldProps[key]]);
-        }
-    });
-    return changes;
-}
-function classToString(config) {
-    if (!config) {
-        return '';
-    }
-    if (typeof config === 'string') {
-        return config;
-    }
-    else if (Array.isArray(config)) {
-        return config.map(i => {
-            return classToString(i);
-        }).join(' ');
-    }
-    else if (typeof config === 'object') {
-        if (config.toString !== Object.prototype.toString && !config.toString.toString().includes('[native code]')) {
-            return config.toString();
-        }
-        const classes = [];
-        for (const key in config) {
-            if ({}.hasOwnProperty.call(config, key) && config[key]) {
-                classes.push(key);
-            }
-        }
-        return classes.join(' ');
-    }
-}
-function styleToObject(style) {
-    if (typeof style !== 'string') {
-        return style;
-    }
-    const obj = {};
-    style.split(';').map(s => s.split(':')).forEach(v => {
-        if (!v[0] || !v[1]) {
-            return;
-        }
-        obj[v[0].trim()] = v[1].trim();
-    });
-    return obj;
-}
-
 class RootComponentRef {
 }
 class Atom {
@@ -713,7 +735,7 @@ let Renderer = class Renderer {
     applyChanges(component, context) {
         const { atom, render } = this.componentAtomCaches.get(component);
         const diffAtom = atom.child;
-        const template = render();
+        const template = render(component.props, component.props);
         if (template) {
             this.linkTemplate(template, component, atom);
         }
@@ -734,26 +756,28 @@ let Renderer = class Renderer {
         }
         const commits = [];
         const changeCommits = {
-            reuseComponent: (start, reusedAtom, expectIndex, diffIndex) => {
-                commits.push(() => {
-                    const { add, remove, replace } = getObjectChanges(start.jsxNode.props, reusedAtom.jsxNode.props);
-                    if (add.length || remove.length || replace.length) {
-                        reusedAtom.jsxNode.invokePropsChangedHooks(start.jsxNode.props);
-                    }
-                    const newProps = start.jsxNode.props;
-                    start.jsxNode = reusedAtom.jsxNode;
-                    start.jsxNode.props = newProps;
-                    const { render } = this.componentAtomCaches.get(start.jsxNode);
-                    const template = render();
-                    if (template) {
-                        this.linkTemplate(template, start.jsxNode, start);
-                    }
-                    this.componentAtomCaches.set(start.jsxNode, {
+            updateComponent: (newAtom, reusedAtom, expectIndex, diffIndex) => {
+                commits.push((offset) => {
+                    const newProps = newAtom.jsxNode.props;
+                    const oldProps = reusedAtom.jsxNode.props;
+                    newAtom.jsxNode = reusedAtom.jsxNode;
+                    const { render, template } = this.componentAtomCaches.get(newAtom.jsxNode);
+                    const newTemplate = render(newProps, oldProps);
+                    this.componentAtomCaches.set(newAtom.jsxNode, {
                         render,
-                        atom: start
+                        template,
+                        atom: newAtom
                     });
-                    if (start.child) {
-                        this.diff(start.child, reusedAtom.child, context, expectIndex, diffIndex);
+                    if (newTemplate === template) {
+                        this.reuseComponentView(newAtom, reusedAtom, context, expectIndex !== diffIndex - offset);
+                        // (newAtom.jsxNode as Component).rendered()
+                        return;
+                    }
+                    if (newTemplate) {
+                        this.linkTemplate(newTemplate, newAtom.jsxNode, newAtom);
+                    }
+                    if (newAtom.child) {
+                        this.diff(newAtom.child, reusedAtom.child, context, expectIndex, diffIndex);
                     }
                     else if (reusedAtom.child) {
                         let atom = reusedAtom.child;
@@ -762,10 +786,10 @@ let Renderer = class Renderer {
                             atom = atom.sibling;
                         }
                     }
-                    start.jsxNode.rendered();
+                    newAtom.jsxNode.rendered();
                 });
             },
-            reuseElement: (newAtom, oldAtom, expectIndex, oldIndex) => {
+            updateElement: (newAtom, oldAtom, expectIndex, oldIndex) => {
                 commits.push((offset) => {
                     newAtom.nativeNode = oldAtom.nativeNode;
                     const host = context.host;
@@ -796,7 +820,7 @@ let Renderer = class Renderer {
                     applyRefs();
                 });
             },
-            reuseText: (newAtom, oldAtom) => {
+            updateText: (newAtom, oldAtom) => {
                 commits.push(() => {
                     const nativeNode = oldAtom.nativeNode;
                     if (newAtom.jsxNode.text !== oldAtom.jsxNode.text) {
@@ -838,6 +862,40 @@ let Renderer = class Renderer {
             commit(offset);
         }
     }
+    reuseComponentView(newAtom, reusedAtom, context, moveView) {
+        let child = reusedAtom.child;
+        newAtom.child = child;
+        const children = [];
+        while (child) {
+            children.push(child);
+            child.parent = newAtom;
+            child = child.sibling;
+        }
+        const updateContext = (atom) => {
+            if (atom.jsxNode instanceof Component) {
+                let child = atom.child;
+                while (child) {
+                    updateContext(child);
+                    child = child.sibling;
+                }
+            }
+            else {
+                if (moveView) {
+                    if (context.isParent) {
+                        this.nativeRenderer.prependChild(context.host, atom.nativeNode);
+                    }
+                    else {
+                        this.nativeRenderer.insertAfter(atom.nativeNode, context.host);
+                    }
+                }
+                context.isParent = false;
+                context.host = atom.nativeNode;
+            }
+        };
+        for (const atom of children) {
+            updateContext(atom);
+        }
+    }
     createChanges(newAtom, expectIndex, oldChildren, changeCommits) {
         for (let i = 0; i < oldChildren.length; i++) {
             const { atom: diffAtom, index: diffIndex } = oldChildren[i];
@@ -850,13 +908,13 @@ let Renderer = class Renderer {
             }
             if (newAtom.jsxNode.is(diffAtom.jsxNode)) {
                 if (newAtom.jsxNode instanceof JSXElement) {
-                    changeCommits.reuseElement(newAtom, diffAtom, expectIndex, diffIndex);
+                    changeCommits.updateElement(newAtom, diffAtom, expectIndex, diffIndex);
                 }
                 else if (newAtom.jsxNode instanceof JSXText) {
-                    changeCommits.reuseText(newAtom, diffAtom);
+                    changeCommits.updateText(newAtom, diffAtom);
                 }
                 else {
-                    changeCommits.reuseComponent(newAtom, diffAtom, expectIndex, diffIndex);
+                    changeCommits.updateComponent(newAtom, diffAtom, expectIndex, diffIndex);
                 }
                 oldChildren.splice(i, 1);
                 return;
@@ -937,6 +995,7 @@ let Renderer = class Renderer {
         }
         this.componentAtomCaches.set(component, {
             render,
+            template,
             atom: from
         });
         return from;
@@ -949,7 +1008,7 @@ let Renderer = class Renderer {
         const atom = new Atom(element, parent);
         if (Reflect.has(element.props, 'children')) {
             const jsxChildren = element.props.children;
-            const children = this.createChainByChildren(context, Array.isArray(jsxChildren) ? jsxChildren : [jsxChildren], atom);
+            const children = this.createChainByChildren(context, Array.isArray(jsxChildren) ? jsxChildren : [jsxChildren], atom, []);
             this.link(atom, children);
         }
         return atom;
@@ -957,8 +1016,7 @@ let Renderer = class Renderer {
     createChainByJSXText(node, parent) {
         return new Atom(node, parent);
     }
-    createChainByChildren(context, children, parent) {
-        const atoms = [];
+    createChainByChildren(context, children, parent, atoms) {
         for (const item of children) {
             if (item instanceof JSXElement) {
                 atoms.push(this.createChainByJSXElement(context, item, parent));
@@ -974,7 +1032,7 @@ let Renderer = class Renderer {
                 continue;
             }
             if (Array.isArray(item)) {
-                atoms.push(...this.createChainByChildren(context, item, parent));
+                this.createChainByChildren(context, item, parent, atoms);
                 continue;
             }
             if (item !== null && typeof item !== 'undefined') {
@@ -985,7 +1043,7 @@ let Renderer = class Renderer {
     }
     linkTemplate(template, component, parent) {
         const children = Array.isArray(template) ? template : [template];
-        this.link(parent, this.createChainByChildren(component, children, parent));
+        this.link(parent, this.createChainByChildren(component, children, parent, []));
     }
     link(parent, children) {
         for (let i = 1; i < children.length; i++) {
@@ -1235,4 +1293,4 @@ class Viewfly extends ReflectiveInjector {
     }
 }
 
-export { Component, Fragment, JSXComponent, JSXElement, JSXText, NativeRenderer, Ref, Renderer, RootComponent, RootComponentRef, Viewfly, inject, jsx, jsxs, makeError, onDestroy, onMounted, onPropsChanged, onUpdated, provide, useDerived, useEffect, useRef, useSignal };
+export { Component, Fragment, JSXComponent, JSXElement, JSXText, Memo, NativeRenderer, Ref, Renderer, RootComponent, RootComponentRef, Viewfly, inject, jsx, jsxs, makeError, onDestroy, onMounted, onPropsChanged, onUpdated, provide, useDerived, useEffect, useRef, useSignal, withMemo };

package/bundles/index.js

@@ -44,6 +44,80 @@ function __metadata(metadataKey, metadataValue) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
 }
 
+const refKey = 'ref';
+function getObjectChanges(newProps, oldProps) {
+    const changes = {
+        remove: [],
+        add: [],
+        replace: []
+    };
+    Object.keys(newProps).forEach(key => {
+        const leftValue = newProps[key];
+        const rightValue = oldProps[key];
+        if (Reflect.has(oldProps, key)) {
+            if (leftValue !== rightValue) {
+                changes.replace.push([key, leftValue, rightValue]);
+            }
+            return;
+        }
+        changes.add.push([key, leftValue]);
+    });
+    Object.keys(oldProps).forEach(key => {
+        if (!Reflect.has(newProps, key)) {
+            changes.remove.push([key, oldProps[key]]);
+        }
+    });
+    return changes;
+}
+function classToString(config) {
+    if (!config) {
+        return '';
+    }
+    if (typeof config === 'string') {
+        return config;
+    }
+    else if (Array.isArray(config)) {
+        return config.map(i => {
+            return classToString(i);
+        }).join(' ');
+    }
+    else if (typeof config === 'object') {
+        if (config.toString !== Object.prototype.toString && !config.toString.toString().includes('[native code]')) {
+            return config.toString();
+        }
+        const classes = [];
+        for (const key in config) {
+            if ({}.hasOwnProperty.call(config, key) && config[key]) {
+                classes.push(key);
+            }
+        }
+        return classes.join(' ');
+    }
+}
+function styleToObject(style) {
+    if (typeof style !== 'string') {
+        return style;
+    }
+    const obj = {};
+    style.split(';').map(s => s.split(':')).forEach(v => {
+        if (!v[0] || !v[1]) {
+            return;
+        }
+        obj[v[0].trim()] = v[1].trim();
+    });
+    return obj;
+}
+
+class Memo {
+    constructor(shouldUpdate, render) {
+        this.shouldUpdate = shouldUpdate;
+        this.render = render;
+    }
+}
+function withMemo(shouldUpdate, render) {
+    return new Memo(shouldUpdate, render);
+}
+
 const componentSetupStack = [];
 const signalDepsStack = [];
 const componentErrorFn = makeError('component');
@@ -123,17 +197,29 @@ class Component extends di.ReflectiveInjector {
         isSetup = false;
         componentSetupStack.pop();
         signalDepsStack.push([]);
-        const template = render();
+        const templateRender = render instanceof Memo ? render.render : render;
+        let template = templateRender();
         const deps = signalDepsStack.pop();
         this.unWatch = useEffect(deps, () => {
             this.markAsDirtied();
         });
         return {
             template,
-            render: () => {
+            render: (newProps, oldProps) => {
+                if (newProps !== oldProps) {
+                    const { add, remove, replace } = getObjectChanges(newProps, oldProps);
+                    if (add.length || remove.length || replace.length) {
+                        this.invokePropsChangedHooks(newProps);
+                    }
+                }
+                if (render instanceof Memo) {
+                    if (!render.shouldUpdate(newProps, oldProps)) {
+                        return template;
+                    }
+                }
                 this.unWatch();
                 signalDepsStack.push([]);
-                const template = render();
+                template = templateRender();
                 const deps = signalDepsStack.pop();
                 this.unWatch = useEffect(deps, () => {
                     this.markAsDirtied();
@@ -165,20 +251,6 @@ class Component extends di.ReflectiveInjector {
             this.invokeUpdatedHooks();
         }
     }
-    invokePropsChangedHooks(newProps) {
-        const oldProps = this.props;
-        this.props = newProps;
-        this.propsChangedDestroyCallbacks.forEach(fn => {
-            fn();
-        });
-        this.propsChangedDestroyCallbacks = [];
-        for (const fn of this.propsChangedCallbacks) {
-            const destroyFn = fn(newProps, oldProps);
-            if (typeof destroyFn === 'function') {
-                this.propsChangedDestroyCallbacks.push(destroyFn);
-            }
-        }
-    }
     destroy() {
         this.unWatch();
         this.updatedDestroyCallbacks.forEach(fn => {
@@ -196,6 +268,20 @@ class Component extends di.ReflectiveInjector {
         this.mountCallbacks = [];
         this.updatedCallbacks = [];
     }
+    invokePropsChangedHooks(newProps) {
+        const oldProps = this.props;
+        this.props = newProps;
+        this.propsChangedDestroyCallbacks.forEach(fn => {
+            fn();
+        });
+        this.propsChangedDestroyCallbacks = [];
+        for (const fn of this.propsChangedCallbacks) {
+            const destroyFn = fn(newProps, oldProps);
+            if (typeof destroyFn === 'function') {
+                this.propsChangedDestroyCallbacks.push(destroyFn);
+            }
+        }
+    }
     invokeMountHooks() {
         for (const fn of this.mountCallbacks) {
             const destroyFn = fn();
@@ -555,70 +641,6 @@ class RootComponent extends Component {
     }
 }
 
-const refKey = 'ref';
-function getObjectChanges(newProps, oldProps) {
-    const changes = {
-        remove: [],
-        add: [],
-        replace: []
-    };
-    Object.keys(newProps).forEach(key => {
-        const leftValue = newProps[key];
-        const rightValue = oldProps[key];
-        if (Reflect.has(oldProps, key)) {
-            if (leftValue !== rightValue) {
-                changes.replace.push([key, leftValue, rightValue]);
-            }
-            return;
-        }
-        changes.add.push([key, leftValue]);
-    });
-    Object.keys(oldProps).forEach(key => {
-        if (!Reflect.has(newProps, key)) {
-            changes.remove.push([key, oldProps[key]]);
-        }
-    });
-    return changes;
-}
-function classToString(config) {
-    if (!config) {
-        return '';
-    }
-    if (typeof config === 'string') {
-        return config;
-    }
-    else if (Array.isArray(config)) {
-        return config.map(i => {
-            return classToString(i);
-        }).join(' ');
-    }
-    else if (typeof config === 'object') {
-        if (config.toString !== Object.prototype.toString && !config.toString.toString().includes('[native code]')) {
-            return config.toString();
-        }
-        const classes = [];
-        for (const key in config) {
-            if ({}.hasOwnProperty.call(config, key) && config[key]) {
-                classes.push(key);
-            }
-        }
-        return classes.join(' ');
-    }
-}
-function styleToObject(style) {
-    if (typeof style !== 'string') {
-        return style;
-    }
-    const obj = {};
-    style.split(';').map(s => s.split(':')).forEach(v => {
-        if (!v[0] || !v[1]) {
-            return;
-        }
-        obj[v[0].trim()] = v[1].trim();
-    });
-    return obj;
-}
-
 class RootComponentRef {
 }
 class Atom {
@@ -714,7 +736,7 @@ exports.Renderer = class Renderer {
     applyChanges(component, context) {
         const { atom, render } = this.componentAtomCaches.get(component);
         const diffAtom = atom.child;
-        const template = render();
+        const template = render(component.props, component.props);
         if (template) {
             this.linkTemplate(template, component, atom);
         }
@@ -735,26 +757,28 @@ exports.Renderer = class Renderer {
         }
         const commits = [];
         const changeCommits = {
-            reuseComponent: (start, reusedAtom, expectIndex, diffIndex) => {
-                commits.push(() => {
-                    const { add, remove, replace } = getObjectChanges(start.jsxNode.props, reusedAtom.jsxNode.props);
-                    if (add.length || remove.length || replace.length) {
-                        reusedAtom.jsxNode.invokePropsChangedHooks(start.jsxNode.props);
-                    }
-                    const newProps = start.jsxNode.props;
-                    start.jsxNode = reusedAtom.jsxNode;
-                    start.jsxNode.props = newProps;
-                    const { render } = this.componentAtomCaches.get(start.jsxNode);
-                    const template = render();
-                    if (template) {
-                        this.linkTemplate(template, start.jsxNode, start);
-                    }
-                    this.componentAtomCaches.set(start.jsxNode, {
+            updateComponent: (newAtom, reusedAtom, expectIndex, diffIndex) => {
+                commits.push((offset) => {
+                    const newProps = newAtom.jsxNode.props;
+                    const oldProps = reusedAtom.jsxNode.props;
+                    newAtom.jsxNode = reusedAtom.jsxNode;
+                    const { render, template } = this.componentAtomCaches.get(newAtom.jsxNode);
+                    const newTemplate = render(newProps, oldProps);
+                    this.componentAtomCaches.set(newAtom.jsxNode, {
                         render,
-                        atom: start
+                        template,
+                        atom: newAtom
                     });
-                    if (start.child) {
-                        this.diff(start.child, reusedAtom.child, context, expectIndex, diffIndex);
+                    if (newTemplate === template) {
+                        this.reuseComponentView(newAtom, reusedAtom, context, expectIndex !== diffIndex - offset);
+                        // (newAtom.jsxNode as Component).rendered()
+                        return;
+                    }
+                    if (newTemplate) {
+                        this.linkTemplate(newTemplate, newAtom.jsxNode, newAtom);
+                    }
+                    if (newAtom.child) {
+                        this.diff(newAtom.child, reusedAtom.child, context, expectIndex, diffIndex);
                     }
                     else if (reusedAtom.child) {
                         let atom = reusedAtom.child;
@@ -763,10 +787,10 @@ exports.Renderer = class Renderer {
                             atom = atom.sibling;
                         }
                     }
-                    start.jsxNode.rendered();
+                    newAtom.jsxNode.rendered();
                 });
             },
-            reuseElement: (newAtom, oldAtom, expectIndex, oldIndex) => {
+            updateElement: (newAtom, oldAtom, expectIndex, oldIndex) => {
                 commits.push((offset) => {
                     newAtom.nativeNode = oldAtom.nativeNode;
                     const host = context.host;
@@ -797,7 +821,7 @@ exports.Renderer = class Renderer {
                     applyRefs();
                 });
             },
-            reuseText: (newAtom, oldAtom) => {
+            updateText: (newAtom, oldAtom) => {
                 commits.push(() => {
                     const nativeNode = oldAtom.nativeNode;
                     if (newAtom.jsxNode.text !== oldAtom.jsxNode.text) {
@@ -839,6 +863,40 @@ exports.Renderer = class Renderer {
             commit(offset);
         }
     }
+    reuseComponentView(newAtom, reusedAtom, context, moveView) {
+        let child = reusedAtom.child;
+        newAtom.child = child;
+        const children = [];
+        while (child) {
+            children.push(child);
+            child.parent = newAtom;
+            child = child.sibling;
+        }
+        const updateContext = (atom) => {
+            if (atom.jsxNode instanceof Component) {
+                let child = atom.child;
+                while (child) {
+                    updateContext(child);
+                    child = child.sibling;
+                }
+            }
+            else {
+                if (moveView) {
+                    if (context.isParent) {
+                        this.nativeRenderer.prependChild(context.host, atom.nativeNode);
+                    }
+                    else {
+                        this.nativeRenderer.insertAfter(atom.nativeNode, context.host);
+                    }
+                }
+                context.isParent = false;
+                context.host = atom.nativeNode;
+            }
+        };
+        for (const atom of children) {
+            updateContext(atom);
+        }
+    }
     createChanges(newAtom, expectIndex, oldChildren, changeCommits) {
         for (let i = 0; i < oldChildren.length; i++) {
             const { atom: diffAtom, index: diffIndex } = oldChildren[i];
@@ -851,13 +909,13 @@ exports.Renderer = class Renderer {
             }
             if (newAtom.jsxNode.is(diffAtom.jsxNode)) {
                 if (newAtom.jsxNode instanceof JSXElement) {
-                    changeCommits.reuseElement(newAtom, diffAtom, expectIndex, diffIndex);
+                    changeCommits.updateElement(newAtom, diffAtom, expectIndex, diffIndex);
                 }
                 else if (newAtom.jsxNode instanceof JSXText) {
-                    changeCommits.reuseText(newAtom, diffAtom);
+                    changeCommits.updateText(newAtom, diffAtom);
                 }
                 else {
-                    changeCommits.reuseComponent(newAtom, diffAtom, expectIndex, diffIndex);
+                    changeCommits.updateComponent(newAtom, diffAtom, expectIndex, diffIndex);
                 }
                 oldChildren.splice(i, 1);
                 return;
@@ -938,6 +996,7 @@ exports.Renderer = class Renderer {
         }
         this.componentAtomCaches.set(component, {
             render,
+            template,
             atom: from
         });
         return from;
@@ -950,7 +1009,7 @@ exports.Renderer = class Renderer {
         const atom = new Atom(element, parent);
         if (Reflect.has(element.props, 'children')) {
             const jsxChildren = element.props.children;
-            const children = this.createChainByChildren(context, Array.isArray(jsxChildren) ? jsxChildren : [jsxChildren], atom);
+            const children = this.createChainByChildren(context, Array.isArray(jsxChildren) ? jsxChildren : [jsxChildren], atom, []);
             this.link(atom, children);
         }
         return atom;
@@ -958,8 +1017,7 @@ exports.Renderer = class Renderer {
     createChainByJSXText(node, parent) {
         return new Atom(node, parent);
     }
-    createChainByChildren(context, children, parent) {
-        const atoms = [];
+    createChainByChildren(context, children, parent, atoms) {
         for (const item of children) {
             if (item instanceof JSXElement) {
                 atoms.push(this.createChainByJSXElement(context, item, parent));
@@ -975,7 +1033,7 @@ exports.Renderer = class Renderer {
                 continue;
             }
             if (Array.isArray(item)) {
-                atoms.push(...this.createChainByChildren(context, item, parent));
+                this.createChainByChildren(context, item, parent, atoms);
                 continue;
             }
             if (item !== null && typeof item !== 'undefined') {
@@ -986,7 +1044,7 @@ exports.Renderer = class Renderer {
     }
     linkTemplate(template, component, parent) {
         const children = Array.isArray(template) ? template : [template];
-        this.link(parent, this.createChainByChildren(component, children, parent));
+        this.link(parent, this.createChainByChildren(component, children, parent, []));
     }
     link(parent, children) {
         for (let i = 1; i < children.length; i++) {
@@ -1241,6 +1299,7 @@ exports.Fragment = Fragment;
 exports.JSXComponent = JSXComponent;
 exports.JSXElement = JSXElement;
 exports.JSXText = JSXText;
+exports.Memo = Memo;
 exports.NativeRenderer = NativeRenderer;
 exports.Ref = Ref;
 exports.RootComponent = RootComponent;
@@ -1259,6 +1318,7 @@ exports.useDerived = useDerived;
 exports.useEffect = useEffect;
 exports.useRef = useRef;
 exports.useSignal = useSignal;
+exports.withMemo = withMemo;
 Object.keys(di).forEach(function (k) {
     if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
         enumerable: true,

package/bundles/model/_api.d.ts

@@ -1,3 +1,4 @@
 export * from './component';
 export * from './jsx-element';
+export * from './memo';
 export * from './root.component';

package/bundles/model/component.d.ts

@@ -1,5 +1,6 @@
 import { Provider, ReflectiveInjector, AbstractType, Type, InjectionToken, InjectFlags, Injector } from '@tanbo/di';
 import { Props, Key, JSXTypeof, JSXChildNode } from './jsx-element';
+import { Memo } from './memo';
 export declare class JSXComponent {
     props: Props;
     private factory;
@@ -7,7 +8,7 @@ export declare class JSXComponent {
     createInstance(injector: Component): Component;
 }
 export interface ComponentSetup<T extends Props<any> = Props<any>> {
-    (props?: T): () => JSXChildNode;
+    (props?: T): (() => JSXChildNode) | Memo<T>;
 }
 /**
  * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
@@ -35,13 +36,13 @@ export declare class Component extends ReflectiveInjector implements JSXTypeof {
     addProvide<T>(providers: Provider<T> | Provider<T>[]): void;
     init(): {
         template: JSXChildNode;
-        render: () => JSXChildNode;
+        render: (newProps: Props, oldProps: Props) => JSXChildNode;
     };
     markAsDirtied(): void;
     markAsChanged(): void;
     rendered(): void;
-    invokePropsChangedHooks(newProps: Props<any>): void;
     destroy(): void;
+    private invokePropsChangedHooks;
     private invokeMountHooks;
     private invokeUpdatedHooks;
 }

package/bundles/model/memo.d.ts

@@ -0,0 +1,10 @@
+import { JSXChildNode, Props } from './jsx-element';
+export interface ShouldUpdate<T extends Props> {
+    (currentProps: T, prevProps: T): unknown;
+}
+export declare class Memo<T extends Props> {
+    shouldUpdate: ShouldUpdate<T>;
+    render: () => JSXChildNode;
+    constructor(shouldUpdate: ShouldUpdate<T>, render: () => JSXChildNode);
+}
+export declare function withMemo<T extends Props = Props>(shouldUpdate: ShouldUpdate<T>, render: () => JSXChildNode): Memo<T>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "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",
@@ -34,5 +34,5 @@
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
   },
-  "gitHead": "fed5b3e328a9f70873bb1c33ea3789c099ad3ebe"
+  "gitHead": "f3cb35e8a4c24063ea8431de7d001d801925e9d9"
 }