smoothly 1.0.0-alpha.63 → 1.0.0-alpha.65

package/dist/cjs/{index-8adc5c1b.js → index-43af753b.js}

@@ -96,6 +96,7 @@ function queryNonceMetaTagContent(doc) {
 // export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;
 const h = (nodeName, vnodeData, ...children) => {
     let child = null;
+    let key = null;
     let slotName = null;
     let simple = false;
     let lastSimple = false;
@@ -124,6 +125,10 @@ const h = (nodeName, vnodeData, ...children) => {
     };
     walk(children);
     if (vnodeData) {
+        // normalize class / classname attributes
+        if (vnodeData.key) {
+            key = vnodeData.key;
+        }
         if (vnodeData.name) {
             slotName = vnodeData.name;
         }
@@ -148,6 +153,9 @@ const h = (nodeName, vnodeData, ...children) => {
     if (vNodeChildren.length > 0) {
         vnode.$children$ = vNodeChildren;
     }
+    {
+        vnode.$key$ = key;
+    }
     {
         vnode.$name$ = slotName;
     }
@@ -172,6 +180,9 @@ const newVNode = (tag, text) => {
     {
         vnode.$attrs$ = null;
     }
+    {
+        vnode.$key$ = null;
+    }
     {
         vnode.$name$ = null;
     }
@@ -434,6 +445,8 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
                 }
             }
         }
+        else if (memberName === 'key')
+            ;
         else if (memberName === 'ref') {
             // minifier will clean this up
             if (newValue) {
@@ -807,6 +820,8 @@ const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
 const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
     let oldStartIdx = 0;
     let newStartIdx = 0;
+    let idxInOld = 0;
+    let i = 0;
     let oldEndIdx = oldCh.length - 1;
     let oldStartVnode = oldCh[0];
     let oldEndVnode = oldCh[oldEndIdx];
@@ -814,6 +829,7 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
     let newStartVnode = newCh[0];
     let newEndVnode = newCh[newEndIdx];
     let node;
+    let elmToMove;
     while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
         if (oldStartVnode == null) {
             // VNode might have been moved left
@@ -915,7 +931,41 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
             newStartVnode = newCh[++newStartIdx];
         }
         else {
+            // Here we do some checks to match up old and new nodes based on the
+            // `$key$` attribute, which is set by putting a `key="my-key"` attribute
+            // in the JSX for a DOM element in the implementation of a Stencil
+            // component.
+            //
+            // First we check to see if there are any nodes in the array of old
+            // children which have the same key as the first node in the new
+            // children.
+            idxInOld = -1;
             {
+                for (i = oldStartIdx; i <= oldEndIdx; ++i) {
+                    if (oldCh[i] && oldCh[i].$key$ !== null && oldCh[i].$key$ === newStartVnode.$key$) {
+                        idxInOld = i;
+                        break;
+                    }
+                }
+            }
+            if (idxInOld >= 0) {
+                // We found a node in the old children which matches up with the first
+                // node in the new children! So let's deal with that
+                elmToMove = oldCh[idxInOld];
+                if (elmToMove.$tag$ !== newStartVnode.$tag$) {
+                    // the tag doesn't match so we'll need a new DOM element
+                    node = createElm(oldCh && oldCh[newStartIdx], newVNode, idxInOld, parentElm);
+                }
+                else {
+                    patch(elmToMove, newStartVnode);
+                    // invalidate the matching old node so that we won't try to update it
+                    // again later on
+                    oldCh[idxInOld] = undefined;
+                    node = elmToMove.$elm$;
+                }
+                newStartVnode = newCh[++newStartIdx];
+            }
+            else {
                 // We either didn't find an element in the old children that matches
                 // the key of the first new child OR the build is not using `key`
                 // attributes at all. In either case we need to create a new element
@@ -967,7 +1017,10 @@ const isSameVnode = (leftVNode, rightVNode) => {
         if (leftVNode.$tag$ === 'slot') {
             return leftVNode.$name$ === rightVNode.$name$;
         }
-        return true;
+        // this will be set if components in the build have `key` attrs set on them
+        {
+            return leftVNode.$key$ === rightVNode.$key$;
+        }
     }
     return false;
 };
@@ -2046,4 +2099,4 @@ exports.promiseResolve = promiseResolve;
 exports.registerInstance = registerInstance;
 exports.setNonce = setNonce;
 
-//# sourceMappingURL=index-8adc5c1b.js.map
+//# sourceMappingURL=index-43af753b.js.map