@viewfly/core 0.0.25 → 0.0.26

package/bundles/foundation/_utils.d.ts

@@ -22,5 +22,7 @@ export interface Atom {
 export interface ComponentView {
     atom: Atom;
     template: JSXInternal.JSXNode;
+    host: NativeNode;
+    isParent: boolean;
     render(newProps: Props, oldProps: Props): JSXInternal.JSXNode;
 }

package/bundles/foundation/component.d.ts

@@ -21,6 +21,7 @@ export declare class Component extends ReflectiveInjector implements JSXTypeof {
     mountCallbacks: LifeCycleCallback[];
     propsChangedCallbacks: PropsChangedCallback<any>[];
     updatedCallbacks: LifeCycleCallback[];
+    changedSubComponents: Set<Component>;
     get dirty(): boolean;
     get changed(): boolean;
     protected _dirty: boolean;
@@ -38,7 +39,7 @@ export declare class Component extends ReflectiveInjector implements JSXTypeof {
         render: (newProps: Props, oldProps: Props) => any;
     };
     markAsDirtied(): void;
-    markAsChanged(): void;
+    markAsChanged(changedComponent?: Component): void;
     rendered(): void;
     destroy(): void;
     private invokePropsChangedHooks;

package/bundles/foundation/renderer.d.ts

@@ -13,9 +13,7 @@ export declare class Renderer {
     private isInit;
     constructor(nativeRenderer: NativeRenderer, rootComponentRef: RootComponentRef, hostRef: HostRef);
     render(): void;
-    private reconcile;
-    private getPrevSibling;
-    private reconcileElement;
+    private updateView;
     private applyChanges;
     private diff;
     private reuseComponentView;

package/bundles/foundation/root.component.d.ts

@@ -7,5 +7,5 @@ import { Injector } from '../di/_api';
 export declare class RootComponent extends Component {
     onChange: (() => void) | null;
     constructor(factory: JSXInternal.ComponentConstructor, parentInjector: Injector);
-    markAsChanged(): void;
+    markAsChanged(changedComponent?: Component): void;
 }

package/bundles/index.esm.js

@@ -660,6 +660,7 @@ class Component extends ReflectiveInjector {
         this.mountCallbacks = [];
         this.propsChangedCallbacks = [];
         this.updatedCallbacks = [];
+        this.changedSubComponents = new Set();
         this._dirty = true;
         this._changed = true;
         this.updatedDestroyCallbacks = [];
@@ -755,14 +756,18 @@ class Component extends ReflectiveInjector {
         this._dirty = true;
         this.markAsChanged();
     }
-    markAsChanged() {
+    markAsChanged(changedComponent) {
+        if (changedComponent) {
+            this.changedSubComponents.add(changedComponent);
+        }
         if (this._changed) {
             return;
         }
         this._changed = true;
-        this.parentComponent.markAsChanged();
+        this.parentComponent.markAsChanged(this);
     }
     rendered() {
+        this.changedSubComponents.clear();
         const is = this.isFirstRending;
         this.isFirstRending = false;
         this._dirty = this._changed = false;
@@ -1163,9 +1168,12 @@ class RootComponent extends Component {
         super(parentInjector, factory, {});
         this.onChange = null;
     }
-    markAsChanged() {
+    markAsChanged(changedComponent) {
         var _a;
         this._changed = true;
+        if (changedComponent) {
+            this.changedSubComponents.add(changedComponent);
+        }
         (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this);
     }
 }
@@ -1234,75 +1242,24 @@ let Renderer = class Renderer {
             });
         }
         else {
-            this.reconcile(component, {
-                host,
-                isParent: true
-            });
+            this.updateView(component);
         }
         this.isInit = false;
     }
-    reconcile(component, context) {
+    updateView(component) {
         if (component.dirty) {
-            this.applyChanges(component, context);
+            this.applyChanges(component);
             component.rendered();
         }
         else if (component.changed) {
-            const atom = component.$$view.atom.child;
-            this.reconcileElement(atom, context);
+            component.changedSubComponents.forEach(child => {
+                this.updateView(child);
+            });
             component.rendered();
         }
-        else {
-            const prevSibling = this.getPrevSibling(component);
-            if (prevSibling) {
-                context.isParent = false;
-                context.host = prevSibling;
-            }
-        }
-    }
-    getPrevSibling(component) {
-        let atom = component.$$view.atom.child;
-        const childAtoms = [];
-        while (atom) {
-            childAtoms.push(atom);
-            atom = atom.sibling;
-        }
-        const components = [];
-        while (childAtoms.length) {
-            const last = childAtoms.pop();
-            if (last.jsxNode instanceof Component) {
-                components.push(last.jsxNode);
-                continue;
-            }
-            return last.nativeNode;
-        }
-        for (const component of components) {
-            const nativeNode = this.getPrevSibling(component);
-            if (nativeNode) {
-                return nativeNode;
-            }
-        }
-        return null;
-    }
-    reconcileElement(atom, context) {
-        while (atom) {
-            if (atom.jsxNode instanceof Component) {
-                this.reconcile(atom.jsxNode, context);
-                atom = atom.sibling;
-                continue;
-            }
-            if (atom.jsxNode instanceof JSXElement) {
-                this.reconcileElement(atom.child, {
-                    host: atom.nativeNode,
-                    isParent: true
-                });
-                context.host = atom.nativeNode;
-                context.isParent = false;
-            }
-            atom = atom.sibling;
-        }
     }
-    applyChanges(component, context) {
-        const { atom, render } = component.$$view;
+    applyChanges(component) {
+        const { atom, render, host, isParent } = component.$$view;
         const diffAtom = atom.child;
         const template = render(component.props, component.props);
         if (template) {
@@ -1311,7 +1268,10 @@ let Renderer = class Renderer {
         else {
             atom.child = null;
         }
-        this.diff(atom.child, diffAtom, context, 0, 0);
+        this.diff(atom.child, diffAtom, {
+            host,
+            isParent
+        }, 0, 0);
     }
     diff(newAtom, oldAtom, context, expectIndex, index) {
         const oldChildren = [];
@@ -1332,11 +1292,7 @@ let Renderer = class Renderer {
                     const oldProps = reusedAtom.jsxNode.props;
                     newAtom.jsxNode = reusedAtom.jsxNode;
                     const newTemplate = render(newProps, oldProps);
-                    newAtom.jsxNode.$$view = {
-                        render,
-                        template: newTemplate,
-                        atom: newAtom
-                    };
+                    newAtom.jsxNode.$$view = Object.assign({ render, template: newTemplate, atom: newAtom }, context);
                     if (newTemplate === template) {
                         this.reuseComponentView(newAtom, reusedAtom, context, expectIndex !== diffIndex - offset);
                         return;
@@ -1512,7 +1468,7 @@ let Renderer = class Renderer {
     }
     buildView(atom, context) {
         if (atom.jsxNode instanceof Component) {
-            this.componentRender(atom.jsxNode, atom);
+            this.componentRender(atom.jsxNode, atom, context);
             let child = atom.child;
             while (child) {
                 this.buildView(child, context);
@@ -1556,16 +1512,13 @@ let Renderer = class Renderer {
             }
         }
     }
-    componentRender(component, from) {
+    componentRender(component, from, context) {
         const { template, render } = component.setup();
         if (template) {
             this.linkTemplate(template, component, from);
         }
-        component.$$view = {
-            render,
-            template,
-            atom: from
-        };
+        component.$$view = Object.assign({ render,
+            template, atom: from }, context);
         return from;
     }
     createChainByComponentFactory(context, factory, parent) {

package/bundles/index.js

@@ -662,6 +662,7 @@ class Component extends ReflectiveInjector {
         this.mountCallbacks = [];
         this.propsChangedCallbacks = [];
         this.updatedCallbacks = [];
+        this.changedSubComponents = new Set();
         this._dirty = true;
         this._changed = true;
         this.updatedDestroyCallbacks = [];
@@ -757,14 +758,18 @@ class Component extends ReflectiveInjector {
         this._dirty = true;
         this.markAsChanged();
     }
-    markAsChanged() {
+    markAsChanged(changedComponent) {
+        if (changedComponent) {
+            this.changedSubComponents.add(changedComponent);
+        }
         if (this._changed) {
             return;
         }
         this._changed = true;
-        this.parentComponent.markAsChanged();
+        this.parentComponent.markAsChanged(this);
     }
     rendered() {
+        this.changedSubComponents.clear();
         const is = this.isFirstRending;
         this.isFirstRending = false;
         this._dirty = this._changed = false;
@@ -1165,9 +1170,12 @@ class RootComponent extends Component {
         super(parentInjector, factory, {});
         this.onChange = null;
     }
-    markAsChanged() {
+    markAsChanged(changedComponent) {
         var _a;
         this._changed = true;
+        if (changedComponent) {
+            this.changedSubComponents.add(changedComponent);
+        }
         (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this);
     }
 }
@@ -1236,75 +1244,24 @@ exports.Renderer = class Renderer {
             });
         }
         else {
-            this.reconcile(component, {
-                host,
-                isParent: true
-            });
+            this.updateView(component);
         }
         this.isInit = false;
     }
-    reconcile(component, context) {
+    updateView(component) {
         if (component.dirty) {
-            this.applyChanges(component, context);
+            this.applyChanges(component);
             component.rendered();
         }
         else if (component.changed) {
-            const atom = component.$$view.atom.child;
-            this.reconcileElement(atom, context);
+            component.changedSubComponents.forEach(child => {
+                this.updateView(child);
+            });
             component.rendered();
         }
-        else {
-            const prevSibling = this.getPrevSibling(component);
-            if (prevSibling) {
-                context.isParent = false;
-                context.host = prevSibling;
-            }
-        }
-    }
-    getPrevSibling(component) {
-        let atom = component.$$view.atom.child;
-        const childAtoms = [];
-        while (atom) {
-            childAtoms.push(atom);
-            atom = atom.sibling;
-        }
-        const components = [];
-        while (childAtoms.length) {
-            const last = childAtoms.pop();
-            if (last.jsxNode instanceof Component) {
-                components.push(last.jsxNode);
-                continue;
-            }
-            return last.nativeNode;
-        }
-        for (const component of components) {
-            const nativeNode = this.getPrevSibling(component);
-            if (nativeNode) {
-                return nativeNode;
-            }
-        }
-        return null;
-    }
-    reconcileElement(atom, context) {
-        while (atom) {
-            if (atom.jsxNode instanceof Component) {
-                this.reconcile(atom.jsxNode, context);
-                atom = atom.sibling;
-                continue;
-            }
-            if (atom.jsxNode instanceof JSXElement) {
-                this.reconcileElement(atom.child, {
-                    host: atom.nativeNode,
-                    isParent: true
-                });
-                context.host = atom.nativeNode;
-                context.isParent = false;
-            }
-            atom = atom.sibling;
-        }
     }
-    applyChanges(component, context) {
-        const { atom, render } = component.$$view;
+    applyChanges(component) {
+        const { atom, render, host, isParent } = component.$$view;
         const diffAtom = atom.child;
         const template = render(component.props, component.props);
         if (template) {
@@ -1313,7 +1270,10 @@ exports.Renderer = class Renderer {
         else {
             atom.child = null;
         }
-        this.diff(atom.child, diffAtom, context, 0, 0);
+        this.diff(atom.child, diffAtom, {
+            host,
+            isParent
+        }, 0, 0);
     }
     diff(newAtom, oldAtom, context, expectIndex, index) {
         const oldChildren = [];
@@ -1334,11 +1294,7 @@ exports.Renderer = class Renderer {
                     const oldProps = reusedAtom.jsxNode.props;
                     newAtom.jsxNode = reusedAtom.jsxNode;
                     const newTemplate = render(newProps, oldProps);
-                    newAtom.jsxNode.$$view = {
-                        render,
-                        template: newTemplate,
-                        atom: newAtom
-                    };
+                    newAtom.jsxNode.$$view = Object.assign({ render, template: newTemplate, atom: newAtom }, context);
                     if (newTemplate === template) {
                         this.reuseComponentView(newAtom, reusedAtom, context, expectIndex !== diffIndex - offset);
                         return;
@@ -1514,7 +1470,7 @@ exports.Renderer = class Renderer {
     }
     buildView(atom, context) {
         if (atom.jsxNode instanceof Component) {
-            this.componentRender(atom.jsxNode, atom);
+            this.componentRender(atom.jsxNode, atom, context);
             let child = atom.child;
             while (child) {
                 this.buildView(child, context);
@@ -1558,16 +1514,13 @@ exports.Renderer = class Renderer {
             }
         }
     }
-    componentRender(component, from) {
+    componentRender(component, from, context) {
         const { template, render } = component.setup();
         if (template) {
             this.linkTemplate(template, component, from);
         }
-        component.$$view = {
-            render,
-            template,
-            atom: from
-        };
+        component.$$view = Object.assign({ render,
+            template, atom: from }, context);
         return from;
     }
     createChainByComponentFactory(context, factory, parent) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "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",
@@ -49,5 +49,5 @@
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
   },
-  "gitHead": "0d39c19943b47221b99a6471e2614f55716c6659"
+  "gitHead": "2c80fa3f23c647a918d542c0b626384d22766cb8"
 }