@viewfly/core 1.0.0-alpha.11 → 1.0.0-alpha.12

package/bundles/index.esm.js

@@ -1284,7 +1284,7 @@ function withMemo(canUseMemo, render) {
 }
 
 const componentViewCache = new WeakMap();
-const listenerReg = /^on(?=[A-Z])/;
+const listenerReg = /^on[A-Z]/;
 function createRenderer(component, nativeRenderer) {
     let isInit = true;
     return function render(host) {
@@ -1317,36 +1317,23 @@ function buildView(nativeRenderer, parentComponent, atom, context) {
         atom.jsxNode = component;
         componentRender(nativeRenderer, component, atom, context);
     }
+    else if (type === 'element') {
+        createElement(nativeRenderer, atom, parentComponent, context);
+    }
     else {
-        let nativeNode;
-        let applyRefs = null;
-        if (type === 'element') {
-            const { nativeNode: n, applyRefs: a } = createElement(nativeRenderer, jsxNode, atom.isSvg);
-            nativeNode = n;
-            applyRefs = a;
-        }
-        else {
-            nativeNode = createTextNode(nativeRenderer, jsxNode, atom.isSvg);
-        }
-        atom.nativeNode = nativeNode;
-        insertNode(nativeRenderer, atom, context);
-        if (type === 'element') {
-            const childContext = {
-                isParent: true,
-                host: nativeNode,
-                rootHost: context.rootHost
-            };
-            let child = atom.child;
-            while (child) {
-                buildView(nativeRenderer, parentComponent, child, childContext);
-                child = child.sibling;
-            }
-        }
-        context.host = nativeNode;
-        context.isParent = false;
-        if (applyRefs) {
-            applyRefs();
-        }
+        createTextNode(nativeRenderer, atom, context);
+    }
+}
+function buildElementChildren(atom, nativeRenderer, parentComponent, context) {
+    const childContext = {
+        isParent: true,
+        host: atom.nativeNode,
+        rootHost: context.rootHost
+    };
+    let child = atom.child;
+    while (child) {
+        buildView(nativeRenderer, parentComponent, child, childContext);
+        child = child.sibling;
     }
 }
 function updateView(nativeRenderer, component) {
@@ -1472,23 +1459,7 @@ function updateElement(newAtom, oldAtom, expectIndex, oldIndex, nativeRenderer,
         }
         context.host = newAtom.nativeNode;
         context.isParent = false;
-        const applyRefs = updateNativeNodeProperties(nativeRenderer, newAtom.jsxNode, oldAtom.jsxNode, newAtom.nativeNode, newAtom.isSvg);
-        if (newAtom.child) {
-            diff(nativeRenderer, parentComponent, newAtom.child, oldAtom.child, {
-                host: newAtom.nativeNode,
-                isParent: true,
-                rootHost: context.rootHost
-            });
-        }
-        else if (oldAtom.child) {
-            let atom = oldAtom.child;
-            nativeRenderer.cleanChildren(oldAtom.nativeNode, oldAtom.isSvg);
-            while (atom) {
-                cleanView(nativeRenderer, atom, false);
-                atom = atom.sibling;
-            }
-        }
-        applyRefs();
+        updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, context);
     };
 }
 function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRenderer, context) {
@@ -1546,6 +1517,14 @@ function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveVi
         child = child.sibling;
     }
 }
+function cleanElementChildren(atom, nativeRenderer) {
+    let child = atom.child;
+    nativeRenderer.cleanChildren(atom.nativeNode, atom.isSvg);
+    while (child) {
+        cleanView(nativeRenderer, child, false);
+        child = child.sibling;
+    }
+}
 function cleanView(nativeRenderer, atom, needClean) {
     if (atom.nativeNode) {
         if (needClean) {
@@ -1619,7 +1598,6 @@ function createChainByJSXElement(element, prevAtom, isSvg) {
         isSvg
     };
     prevAtom.sibling = atom;
-    atom.child = createChildChain(element.props.children, isSvg);
     return atom;
 }
 function createChainByNode(jsxNode, prevAtom, isSvg) {
@@ -1668,12 +1646,14 @@ function insertNode(nativeRenderer, atom, context) {
         nativeRenderer.insertAfter(atom.nativeNode, context.host, atom.isSvg);
     }
 }
-function createElement(nativeRenderer, vNode, isSvg) {
-    const nativeNode = nativeRenderer.createElement(vNode.type, isSvg);
-    const props = vNode.props;
+function createElement(nativeRenderer, atom, parentComponent, context) {
+    const { isSvg, jsxNode } = atom;
+    const nativeNode = nativeRenderer.createElement(jsxNode.type, isSvg);
+    const props = jsxNode.props;
     let bindingRefs;
     for (const key in props) {
         if (key === 'children') {
+            atom.child = createChildChain(jsxNode.props.children, isSvg);
             continue;
         }
         if (key === 'class') {
@@ -1693,7 +1673,7 @@ function createElement(nativeRenderer, vNode, isSvg) {
         if (listenerReg.test(key)) {
             const listener = props[key];
             if (typeof listener === 'function') {
-                bindEvent(nativeRenderer, vNode, key, nativeNode, listener, isSvg);
+                bindEvent(nativeRenderer, jsxNode, key, nativeNode, listener, isSvg);
             }
             continue;
         }
@@ -1703,28 +1683,40 @@ function createElement(nativeRenderer, vNode, isSvg) {
         }
         nativeRenderer.setProperty(nativeNode, key, props[key], isSvg);
     }
-    return {
-        nativeNode,
-        applyRefs: () => {
-            applyRefs(bindingRefs, nativeNode, true);
-        }
-    };
-}
-function createTextNode(nativeRenderer, text, isSvg) {
-    return nativeRenderer.createTextNode(text, isSvg);
-}
-function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNode, isSvg) {
+    atom.nativeNode = nativeNode;
+    insertNode(nativeRenderer, atom, context);
+    buildElementChildren(atom, nativeRenderer, parentComponent, context);
+    context.host = nativeNode;
+    context.isParent = false;
+    applyRefs(bindingRefs, nativeNode, true);
+}
+function createTextNode(nativeRenderer, atom, context) {
+    const nativeNode = nativeRenderer.createTextNode(atom.jsxNode, atom.isSvg);
+    atom.nativeNode = nativeNode;
+    insertNode(nativeRenderer, atom, context);
+    context.host = nativeNode;
+    context.isParent = false;
+}
+function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, context) {
+    const newVNode = newAtom.jsxNode;
+    const isSvg = newAtom.isSvg;
+    const nativeNode = newAtom.nativeNode;
+    const oldVNode = oldAtom.jsxNode;
     if (newVNode === oldVNode) {
-        return () => {
-            //
-        };
+        parentComponent.changedSubComponents.forEach(child => {
+            updateView(nativeRenderer, child);
+        });
+        return;
     }
     const changes = getObjectChanges(newVNode.props, oldVNode.props);
     let unBindRefs;
     let bindRefs;
     newVNode.on = oldVNode.on;
+    newAtom.child = oldAtom.child;
     for (const [key, value] of changes.remove) {
         if (key === 'children') {
+            cleanElementChildren(oldAtom, nativeRenderer);
+            newAtom.child = null;
             continue;
         }
         if (key === 'class') {
@@ -1739,10 +1731,9 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
         }
         if (listenerReg.test(key)) {
             if (typeof value === 'function') {
-                const type = key.replace(listenerReg, '').toLowerCase();
                 const oldOn = oldVNode.on;
-                nativeRenderer.unListen(nativeNode, type, oldOn[type].delegate, isSvg);
-                Reflect.deleteProperty(oldOn, type);
+                nativeRenderer.unListen(nativeNode, key, oldOn[key].delegate, isSvg);
+                Reflect.deleteProperty(oldOn, key);
             }
             continue;
         }
@@ -1754,6 +1745,17 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
     }
     for (const [key, newValue, oldValue] of changes.replace) {
         if (key === 'children') {
+            newAtom.child = createChildChain(newValue, isSvg);
+            if (!newAtom.child) {
+                cleanElementChildren(oldAtom, nativeRenderer);
+            }
+            else {
+                diff(nativeRenderer, parentComponent, newAtom.child, oldAtom.child, {
+                    host: newAtom.nativeNode,
+                    isParent: true,
+                    rootHost: context.rootHost
+                });
+            }
             continue;
         }
         if (key === 'class') {
@@ -1775,8 +1777,7 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
             continue;
         }
         if (listenerReg.test(key)) {
-            const listenType = key.replace(listenerReg, '').toLowerCase();
-            newVNode.on[listenType].listenFn = newValue;
+            newVNode.on[key].listenFn = newValue;
             continue;
         }
         if (key === refKey) {
@@ -1788,6 +1789,8 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
     }
     for (const [key, value] of changes.add) {
         if (key === 'children') {
+            newAtom.child = createChildChain(value, isSvg);
+            buildElementChildren(newAtom, nativeRenderer, parentComponent, context);
             continue;
         }
         if (key === 'class') {
@@ -1813,10 +1816,8 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
         }
         nativeRenderer.setProperty(nativeNode, key, value, isSvg);
     }
-    return () => {
-        applyRefs(unBindRefs, nativeNode, false);
-        applyRefs(bindRefs, nativeNode, true);
-    };
+    applyRefs(unBindRefs, nativeNode, false);
+    applyRefs(bindRefs, nativeNode, true);
 }
 function applyRefs(refs, nativeNode, binding) {
     if (refs) {
@@ -1833,15 +1834,14 @@ function bindEvent(nativeRenderer, vNode, key, nativeNode, listenFn, isSvg) {
     if (!on) {
         vNode.on = on = {};
     }
-    const type = key.replace(listenerReg, '').toLowerCase();
     const delegateObj = {
         delegate(...args) {
             return delegateObj.listenFn.apply(this, args);
         },
         listenFn
     };
-    on[type] = delegateObj;
-    nativeRenderer.listen(nativeNode, type, delegateObj.delegate, isSvg);
+    on[key] = delegateObj;
+    nativeRenderer.listen(nativeNode, key, delegateObj.delegate, isSvg);
 }
 
 /**

package/bundles/index.js

@@ -1286,7 +1286,7 @@ function withMemo(canUseMemo, render) {
 }
 
 const componentViewCache = new WeakMap();
-const listenerReg = /^on(?=[A-Z])/;
+const listenerReg = /^on[A-Z]/;
 function createRenderer(component, nativeRenderer) {
     let isInit = true;
     return function render(host) {
@@ -1319,36 +1319,23 @@ function buildView(nativeRenderer, parentComponent, atom, context) {
         atom.jsxNode = component;
         componentRender(nativeRenderer, component, atom, context);
     }
+    else if (type === 'element') {
+        createElement(nativeRenderer, atom, parentComponent, context);
+    }
     else {
-        let nativeNode;
-        let applyRefs = null;
-        if (type === 'element') {
-            const { nativeNode: n, applyRefs: a } = createElement(nativeRenderer, jsxNode, atom.isSvg);
-            nativeNode = n;
-            applyRefs = a;
-        }
-        else {
-            nativeNode = createTextNode(nativeRenderer, jsxNode, atom.isSvg);
-        }
-        atom.nativeNode = nativeNode;
-        insertNode(nativeRenderer, atom, context);
-        if (type === 'element') {
-            const childContext = {
-                isParent: true,
-                host: nativeNode,
-                rootHost: context.rootHost
-            };
-            let child = atom.child;
-            while (child) {
-                buildView(nativeRenderer, parentComponent, child, childContext);
-                child = child.sibling;
-            }
-        }
-        context.host = nativeNode;
-        context.isParent = false;
-        if (applyRefs) {
-            applyRefs();
-        }
+        createTextNode(nativeRenderer, atom, context);
+    }
+}
+function buildElementChildren(atom, nativeRenderer, parentComponent, context) {
+    const childContext = {
+        isParent: true,
+        host: atom.nativeNode,
+        rootHost: context.rootHost
+    };
+    let child = atom.child;
+    while (child) {
+        buildView(nativeRenderer, parentComponent, child, childContext);
+        child = child.sibling;
     }
 }
 function updateView(nativeRenderer, component) {
@@ -1474,23 +1461,7 @@ function updateElement(newAtom, oldAtom, expectIndex, oldIndex, nativeRenderer,
         }
         context.host = newAtom.nativeNode;
         context.isParent = false;
-        const applyRefs = updateNativeNodeProperties(nativeRenderer, newAtom.jsxNode, oldAtom.jsxNode, newAtom.nativeNode, newAtom.isSvg);
-        if (newAtom.child) {
-            diff(nativeRenderer, parentComponent, newAtom.child, oldAtom.child, {
-                host: newAtom.nativeNode,
-                isParent: true,
-                rootHost: context.rootHost
-            });
-        }
-        else if (oldAtom.child) {
-            let atom = oldAtom.child;
-            nativeRenderer.cleanChildren(oldAtom.nativeNode, oldAtom.isSvg);
-            while (atom) {
-                cleanView(nativeRenderer, atom, false);
-                atom = atom.sibling;
-            }
-        }
-        applyRefs();
+        updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, context);
     };
 }
 function updateComponent(newAtom, reusedAtom, expectIndex, oldIndex, nativeRenderer, context) {
@@ -1548,6 +1519,14 @@ function reuseComponentView(nativeRenderer, newAtom, reusedAtom, context, moveVi
         child = child.sibling;
     }
 }
+function cleanElementChildren(atom, nativeRenderer) {
+    let child = atom.child;
+    nativeRenderer.cleanChildren(atom.nativeNode, atom.isSvg);
+    while (child) {
+        cleanView(nativeRenderer, child, false);
+        child = child.sibling;
+    }
+}
 function cleanView(nativeRenderer, atom, needClean) {
     if (atom.nativeNode) {
         if (needClean) {
@@ -1621,7 +1600,6 @@ function createChainByJSXElement(element, prevAtom, isSvg) {
         isSvg
     };
     prevAtom.sibling = atom;
-    atom.child = createChildChain(element.props.children, isSvg);
     return atom;
 }
 function createChainByNode(jsxNode, prevAtom, isSvg) {
@@ -1670,12 +1648,14 @@ function insertNode(nativeRenderer, atom, context) {
         nativeRenderer.insertAfter(atom.nativeNode, context.host, atom.isSvg);
     }
 }
-function createElement(nativeRenderer, vNode, isSvg) {
-    const nativeNode = nativeRenderer.createElement(vNode.type, isSvg);
-    const props = vNode.props;
+function createElement(nativeRenderer, atom, parentComponent, context) {
+    const { isSvg, jsxNode } = atom;
+    const nativeNode = nativeRenderer.createElement(jsxNode.type, isSvg);
+    const props = jsxNode.props;
     let bindingRefs;
     for (const key in props) {
         if (key === 'children') {
+            atom.child = createChildChain(jsxNode.props.children, isSvg);
             continue;
         }
         if (key === 'class') {
@@ -1695,7 +1675,7 @@ function createElement(nativeRenderer, vNode, isSvg) {
         if (listenerReg.test(key)) {
             const listener = props[key];
             if (typeof listener === 'function') {
-                bindEvent(nativeRenderer, vNode, key, nativeNode, listener, isSvg);
+                bindEvent(nativeRenderer, jsxNode, key, nativeNode, listener, isSvg);
             }
             continue;
         }
@@ -1705,28 +1685,40 @@ function createElement(nativeRenderer, vNode, isSvg) {
         }
         nativeRenderer.setProperty(nativeNode, key, props[key], isSvg);
     }
-    return {
-        nativeNode,
-        applyRefs: () => {
-            applyRefs(bindingRefs, nativeNode, true);
-        }
-    };
-}
-function createTextNode(nativeRenderer, text, isSvg) {
-    return nativeRenderer.createTextNode(text, isSvg);
-}
-function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNode, isSvg) {
+    atom.nativeNode = nativeNode;
+    insertNode(nativeRenderer, atom, context);
+    buildElementChildren(atom, nativeRenderer, parentComponent, context);
+    context.host = nativeNode;
+    context.isParent = false;
+    applyRefs(bindingRefs, nativeNode, true);
+}
+function createTextNode(nativeRenderer, atom, context) {
+    const nativeNode = nativeRenderer.createTextNode(atom.jsxNode, atom.isSvg);
+    atom.nativeNode = nativeNode;
+    insertNode(nativeRenderer, atom, context);
+    context.host = nativeNode;
+    context.isParent = false;
+}
+function updateNativeNodeProperties(nativeRenderer, newAtom, oldAtom, parentComponent, context) {
+    const newVNode = newAtom.jsxNode;
+    const isSvg = newAtom.isSvg;
+    const nativeNode = newAtom.nativeNode;
+    const oldVNode = oldAtom.jsxNode;
     if (newVNode === oldVNode) {
-        return () => {
-            //
-        };
+        parentComponent.changedSubComponents.forEach(child => {
+            updateView(nativeRenderer, child);
+        });
+        return;
     }
     const changes = getObjectChanges(newVNode.props, oldVNode.props);
     let unBindRefs;
     let bindRefs;
     newVNode.on = oldVNode.on;
+    newAtom.child = oldAtom.child;
     for (const [key, value] of changes.remove) {
         if (key === 'children') {
+            cleanElementChildren(oldAtom, nativeRenderer);
+            newAtom.child = null;
             continue;
         }
         if (key === 'class') {
@@ -1741,10 +1733,9 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
         }
         if (listenerReg.test(key)) {
             if (typeof value === 'function') {
-                const type = key.replace(listenerReg, '').toLowerCase();
                 const oldOn = oldVNode.on;
-                nativeRenderer.unListen(nativeNode, type, oldOn[type].delegate, isSvg);
-                Reflect.deleteProperty(oldOn, type);
+                nativeRenderer.unListen(nativeNode, key, oldOn[key].delegate, isSvg);
+                Reflect.deleteProperty(oldOn, key);
             }
             continue;
         }
@@ -1756,6 +1747,17 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
     }
     for (const [key, newValue, oldValue] of changes.replace) {
         if (key === 'children') {
+            newAtom.child = createChildChain(newValue, isSvg);
+            if (!newAtom.child) {
+                cleanElementChildren(oldAtom, nativeRenderer);
+            }
+            else {
+                diff(nativeRenderer, parentComponent, newAtom.child, oldAtom.child, {
+                    host: newAtom.nativeNode,
+                    isParent: true,
+                    rootHost: context.rootHost
+                });
+            }
             continue;
         }
         if (key === 'class') {
@@ -1777,8 +1779,7 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
             continue;
         }
         if (listenerReg.test(key)) {
-            const listenType = key.replace(listenerReg, '').toLowerCase();
-            newVNode.on[listenType].listenFn = newValue;
+            newVNode.on[key].listenFn = newValue;
             continue;
         }
         if (key === refKey) {
@@ -1790,6 +1791,8 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
     }
     for (const [key, value] of changes.add) {
         if (key === 'children') {
+            newAtom.child = createChildChain(value, isSvg);
+            buildElementChildren(newAtom, nativeRenderer, parentComponent, context);
             continue;
         }
         if (key === 'class') {
@@ -1815,10 +1818,8 @@ function updateNativeNodeProperties(nativeRenderer, newVNode, oldVNode, nativeNo
         }
         nativeRenderer.setProperty(nativeNode, key, value, isSvg);
     }
-    return () => {
-        applyRefs(unBindRefs, nativeNode, false);
-        applyRefs(bindRefs, nativeNode, true);
-    };
+    applyRefs(unBindRefs, nativeNode, false);
+    applyRefs(bindRefs, nativeNode, true);
 }
 function applyRefs(refs, nativeNode, binding) {
     if (refs) {
@@ -1835,15 +1836,14 @@ function bindEvent(nativeRenderer, vNode, key, nativeNode, listenFn, isSvg) {
     if (!on) {
         vNode.on = on = {};
     }
-    const type = key.replace(listenerReg, '').toLowerCase();
     const delegateObj = {
         delegate(...args) {
             return delegateObj.listenFn.apply(this, args);
         },
         listenFn
     };
-    on[type] = delegateObj;
-    nativeRenderer.listen(nativeNode, type, delegateObj.delegate, isSvg);
+    on[key] = delegateObj;
+    nativeRenderer.listen(nativeNode, key, delegateObj.delegate, isSvg);
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "1.0.0-alpha.11",
+  "version": "1.0.0-alpha.12",
   "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": "723da75a9e8e13e8addbe4646358667f476e06f3",
+  "gitHead": "9e55375068bc3657f348f4b0be498111b61eee3c",
   "dependencies": {
     "reflect-metadata": "^0.2.2"
   }