@viewfly/core 1.0.0-alpha.6 → 1.0.0-alpha.8

package/bundles/foundation/component.d.ts

@@ -1,6 +1,5 @@
 import { AbstractType, ExtractValueType, InjectFlags, InjectionToken, Injector, Provider, ReflectiveInjector, Type } from '../di/_api';
 import { Key, Props } from './jsx-element';
-import { ComponentView } from './_utils';
 /**
  * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
  */
@@ -14,7 +13,6 @@ export declare class Component extends ReflectiveInjector {
     changedSubComponents: Set<Component>;
     get dirty(): boolean;
     get changed(): boolean;
-    $$view: ComponentView;
     unmountedCallbacks?: LifeCycleCallback[] | null;
     mountCallbacks?: LifeCycleCallback[] | null;
     propsChangedCallbacks?: PropsChangedCallback<any>[] | null;

package/bundles/index.esm.js

@@ -591,13 +591,13 @@ function getArrayChanges(left, right) {
     return changes;
 }
 function classToString(config) {
-    if (!config) {
-        return '';
-    }
     if (typeof config === 'string') {
         return config;
     }
-    else if (Array.isArray(config)) {
+    if (!config) {
+        return '';
+    }
+    if (Array.isArray(config)) {
         const classes = [];
         for (const i of config) {
             const v = classToString(i);
@@ -607,7 +607,7 @@ function classToString(config) {
         }
         return classes.join(' ');
     }
-    else if (typeof config === 'object') {
+    if (typeof config === 'object') {
         if (config.toString !== Object.prototype.toString && !config.toString.toString().includes('[native code]')) {
             return config.toString();
         }
@@ -741,30 +741,32 @@ class Component extends ReflectiveInjector {
         };
     }
     update(newProps, forceUpdate = false) {
-        const oldProps = this.props;
-        const { add, remove, replace } = getObjectChanges(newProps, this.props);
-        if (add.length || remove.length || replace.length) {
-            this.invokePropsChangedHooks(newProps);
-        }
-        else if (!this.dirty) {
-            return this.template;
-        }
-        const newRefs = toRefs(newProps.ref);
-        if (this.refs) {
-            for (const oldRef of this.refs) {
-                if (!newRefs.includes(oldRef)) {
-                    oldRef.unBind(this.instance);
+        if (!forceUpdate) {
+            const { add, remove, replace } = getObjectChanges(newProps, this.props);
+            if (add.length || remove.length || replace.length) {
+                this.invokePropsChangedHooks(newProps);
+            }
+            else if (!this.dirty) {
+                this.props = newProps;
+                return this.template;
+            }
+            const newRefs = toRefs(newProps.ref);
+            if (this.refs) {
+                for (const oldRef of this.refs) {
+                    if (!newRefs.includes(oldRef)) {
+                        oldRef.unBind(this.instance);
+                    }
                 }
             }
+            for (const newRef of newRefs) {
+                newRef.bind(this.instance);
+            }
+            if (newRefs.length) {
+                this.refs = newRefs;
+            }
         }
-        for (const newRef of newRefs) {
-            newRef.bind(this.instance);
-        }
-        if (newRefs.length) {
-            this.refs = newRefs;
-        }
-        if (!forceUpdate && typeof this.instance.$useMemo === 'function') {
-            if (this.instance.$useMemo(newProps, oldProps)) {
+        if (typeof this.instance.$useMemo === 'function') {
+            if (this.instance.$useMemo(newProps, this.props)) {
                 return this.template;
             }
         }
@@ -1281,6 +1283,7 @@ function withMemo(canUseMemo, render) {
     };
 }
 
+const componentViewCache = new WeakMap();
 const listenerReg = /^on(?=[A-Z])/;
 function createRenderer(component, nativeRenderer) {
     let isInit = true;
@@ -1359,7 +1362,7 @@ function updateView(nativeRenderer, component) {
     }
 }
 function applyChanges(nativeRenderer, component) {
-    const { atom, host, isParent, rootHost } = component.$$view;
+    const { atom, host, isParent, rootHost } = componentViewCache.get(component);
     const diffAtom = atom.child;
     const template = component.update(component.props, true);
     atom.child = createChildChain(template, atom.isSvg);
@@ -1371,8 +1374,9 @@ function applyChanges(nativeRenderer, component) {
     diff(nativeRenderer, component, atom.child, diffAtom, context);
     const next = atom.sibling;
     if (next && next.jsxNode instanceof Component) {
-        next.jsxNode.$$view.host = context.host;
-        next.jsxNode.$$view.isParent = context.isParent;
+        const view = componentViewCache.get(next.jsxNode);
+        view.host = context.host;
+        view.isParent = context.isParent;
     }
 }
 function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context) {
@@ -1386,7 +1390,7 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context) {
     }
     let dirtyDiffAtom = oldAtom;
     while (dirtyDiffAtom) {
-        cleanView(nativeRenderer, dirtyDiffAtom, false);
+        cleanView(nativeRenderer, dirtyDiffAtom, true);
         dirtyDiffAtom = dirtyDiffAtom.sibling;
     }
     let offset = 0;
@@ -1480,7 +1484,7 @@ function updateElement(newAtom, oldAtom, expectIndex, oldIndex, nativeRenderer,
             let atom = oldAtom.child;
             nativeRenderer.cleanChildren(oldAtom.nativeNode, oldAtom.isSvg);
             while (atom) {
-                cleanView(nativeRenderer, atom, true);
+                cleanView(nativeRenderer, atom, false);
                 atom = atom.sibling;
             }
         }
@@ -1495,7 +1499,7 @@ function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRende
         const newTemplate = component.update(newProps);
         const portalHost = component.instance.$portalHost;
         context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
-        component.$$view = Object.assign({ atom: newAtom }, context);
+        componentViewCache.set(component, Object.assign({ atom: newAtom }, context));
         newAtom.jsxNode = component;
         if (newTemplate === oldTemplate) {
             reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, expectIndex - offset !== oldIndex);
@@ -1511,7 +1515,7 @@ function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRende
         else if (reusedAtom.child) {
             let atom = reusedAtom.child;
             while (atom) {
-                cleanView(nativeRenderer, atom, false);
+                cleanView(nativeRenderer, atom, true);
                 atom = atom.sibling;
             }
         }
@@ -1544,9 +1548,9 @@ function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveVi
 }
 function cleanView(nativeRenderer, atom, needClean) {
     if (atom.nativeNode) {
-        if (!needClean) {
+        if (needClean) {
             nativeRenderer.remove(atom.nativeNode, atom.isSvg);
-            needClean = true;
+            needClean = false;
         }
         if (atom.type === 'element') {
             const ref = atom.jsxNode.props[refKey];
@@ -1556,7 +1560,7 @@ function cleanView(nativeRenderer, atom, needClean) {
     let child = atom.child;
     while (child) {
         if (child.jsxNode instanceof Component && child.jsxNode.instance.$portalHost) {
-            needClean = false;
+            needClean = true;
         }
         cleanView(nativeRenderer, child, needClean);
         child = child.sibling;
@@ -1569,7 +1573,7 @@ function componentRender(nativeRenderer, component, from, context) {
     const { template, portalHost } = component.render();
     from.child = createChildChain(template, from.isSvg);
     context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
-    component.$$view = Object.assign({ atom: from }, context);
+    componentViewCache.set(component, Object.assign({ atom: from }, context));
     let child = from.child;
     while (child) {
         buildView(nativeRenderer, component, child, context);

package/bundles/index.js

@@ -593,13 +593,13 @@ function getArrayChanges(left, right) {
     return changes;
 }
 function classToString(config) {
-    if (!config) {
-        return '';
-    }
     if (typeof config === 'string') {
         return config;
     }
-    else if (Array.isArray(config)) {
+    if (!config) {
+        return '';
+    }
+    if (Array.isArray(config)) {
         const classes = [];
         for (const i of config) {
             const v = classToString(i);
@@ -609,7 +609,7 @@ function classToString(config) {
         }
         return classes.join(' ');
     }
-    else if (typeof config === 'object') {
+    if (typeof config === 'object') {
         if (config.toString !== Object.prototype.toString && !config.toString.toString().includes('[native code]')) {
             return config.toString();
         }
@@ -743,30 +743,32 @@ class Component extends ReflectiveInjector {
         };
     }
     update(newProps, forceUpdate = false) {
-        const oldProps = this.props;
-        const { add, remove, replace } = getObjectChanges(newProps, this.props);
-        if (add.length || remove.length || replace.length) {
-            this.invokePropsChangedHooks(newProps);
-        }
-        else if (!this.dirty) {
-            return this.template;
-        }
-        const newRefs = toRefs(newProps.ref);
-        if (this.refs) {
-            for (const oldRef of this.refs) {
-                if (!newRefs.includes(oldRef)) {
-                    oldRef.unBind(this.instance);
+        if (!forceUpdate) {
+            const { add, remove, replace } = getObjectChanges(newProps, this.props);
+            if (add.length || remove.length || replace.length) {
+                this.invokePropsChangedHooks(newProps);
+            }
+            else if (!this.dirty) {
+                this.props = newProps;
+                return this.template;
+            }
+            const newRefs = toRefs(newProps.ref);
+            if (this.refs) {
+                for (const oldRef of this.refs) {
+                    if (!newRefs.includes(oldRef)) {
+                        oldRef.unBind(this.instance);
+                    }
                 }
             }
+            for (const newRef of newRefs) {
+                newRef.bind(this.instance);
+            }
+            if (newRefs.length) {
+                this.refs = newRefs;
+            }
         }
-        for (const newRef of newRefs) {
-            newRef.bind(this.instance);
-        }
-        if (newRefs.length) {
-            this.refs = newRefs;
-        }
-        if (!forceUpdate && typeof this.instance.$useMemo === 'function') {
-            if (this.instance.$useMemo(newProps, oldProps)) {
+        if (typeof this.instance.$useMemo === 'function') {
+            if (this.instance.$useMemo(newProps, this.props)) {
                 return this.template;
             }
         }
@@ -1283,6 +1285,7 @@ function withMemo(canUseMemo, render) {
     };
 }
 
+const componentViewCache = new WeakMap();
 const listenerReg = /^on(?=[A-Z])/;
 function createRenderer(component, nativeRenderer) {
     let isInit = true;
@@ -1361,7 +1364,7 @@ function updateView(nativeRenderer, component) {
     }
 }
 function applyChanges(nativeRenderer, component) {
-    const { atom, host, isParent, rootHost } = component.$$view;
+    const { atom, host, isParent, rootHost } = componentViewCache.get(component);
     const diffAtom = atom.child;
     const template = component.update(component.props, true);
     atom.child = createChildChain(template, atom.isSvg);
@@ -1373,8 +1376,9 @@ function applyChanges(nativeRenderer, component) {
     diff(nativeRenderer, component, atom.child, diffAtom, context);
     const next = atom.sibling;
     if (next && next.jsxNode instanceof Component) {
-        next.jsxNode.$$view.host = context.host;
-        next.jsxNode.$$view.isParent = context.isParent;
+        const view = componentViewCache.get(next.jsxNode);
+        view.host = context.host;
+        view.isParent = context.isParent;
     }
 }
 function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context) {
@@ -1388,7 +1392,7 @@ function diff(nativeRenderer, parentComponent, newAtom, oldAtom, context) {
     }
     let dirtyDiffAtom = oldAtom;
     while (dirtyDiffAtom) {
-        cleanView(nativeRenderer, dirtyDiffAtom, false);
+        cleanView(nativeRenderer, dirtyDiffAtom, true);
         dirtyDiffAtom = dirtyDiffAtom.sibling;
     }
     let offset = 0;
@@ -1482,7 +1486,7 @@ function updateElement(newAtom, oldAtom, expectIndex, oldIndex, nativeRenderer,
             let atom = oldAtom.child;
             nativeRenderer.cleanChildren(oldAtom.nativeNode, oldAtom.isSvg);
             while (atom) {
-                cleanView(nativeRenderer, atom, true);
+                cleanView(nativeRenderer, atom, false);
                 atom = atom.sibling;
             }
         }
@@ -1497,7 +1501,7 @@ function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRende
         const newTemplate = component.update(newProps);
         const portalHost = component.instance.$portalHost;
         context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
-        component.$$view = Object.assign({ atom: newAtom }, context);
+        componentViewCache.set(component, Object.assign({ atom: newAtom }, context));
         newAtom.jsxNode = component;
         if (newTemplate === oldTemplate) {
             reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, expectIndex - offset !== oldIndex);
@@ -1513,7 +1517,7 @@ function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRende
         else if (reusedAtom.child) {
             let atom = reusedAtom.child;
             while (atom) {
-                cleanView(nativeRenderer, atom, false);
+                cleanView(nativeRenderer, atom, true);
                 atom = atom.sibling;
             }
         }
@@ -1546,9 +1550,9 @@ function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveVi
 }
 function cleanView(nativeRenderer, atom, needClean) {
     if (atom.nativeNode) {
-        if (!needClean) {
+        if (needClean) {
             nativeRenderer.remove(atom.nativeNode, atom.isSvg);
-            needClean = true;
+            needClean = false;
         }
         if (atom.type === 'element') {
             const ref = atom.jsxNode.props[refKey];
@@ -1558,7 +1562,7 @@ function cleanView(nativeRenderer, atom, needClean) {
     let child = atom.child;
     while (child) {
         if (child.jsxNode instanceof Component && child.jsxNode.instance.$portalHost) {
-            needClean = false;
+            needClean = true;
         }
         cleanView(nativeRenderer, child, needClean);
         child = child.sibling;
@@ -1571,7 +1575,7 @@ function componentRender(nativeRenderer, component, from, context) {
     const { template, portalHost } = component.render();
     from.child = createChildChain(template, from.isSvg);
     context = portalHost ? { isParent: true, host: portalHost, rootHost: portalHost } : context;
-    component.$$view = Object.assign({ atom: from }, context);
+    componentViewCache.set(component, Object.assign({ atom: from }, context));
     let child = from.child;
     while (child) {
         buildView(nativeRenderer, component, child, context);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.8",
   "description": "Viewfly is a simple and easy-to-use JavaScript framework with an intuitive development experience.",
   "main": "./bundles/index.js",
   "module": "./bundles/index.esm.js",
@@ -47,7 +47,7 @@
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
   },
-  "gitHead": "f92d3c923b1b9f115b928bc57f4d8adf1f8100c9",
+  "gitHead": "95538a571b0d2e8a96dbfdc940959605ea06c252",
   "dependencies": {
     "reflect-metadata": "^0.2.2"
   }