lwc 2.14.2 → 2.15.0

package/dist/engine-dom/umd/es5/engine-dom_debug.js

@@ -295,6 +295,7 @@
 
   var KEY__IS_NATIVE_SHADOW_ROOT_DEFINED = '$isNativeShadowRootDefined$';
   var KEY__SHADOW_RESOLVER = '$shadowResolver$';
+  var KEY__SHADOW_STATIC = '$shadowStaticNode$';
   var KEY__SHADOW_TOKEN = '$shadowToken$';
   var KEY__SYNTHETIC_MODE = '$$lwc-synthetic-mode';
   var KEY__SCOPED_CSS = '$scoped$';
@@ -350,7 +351,7 @@
   var XML_NAMESPACE = 'http://www.w3.org/XML/1998/namespace';
   var SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
   var XLINK_NAMESPACE = 'http://www.w3.org/1999/xlink';
-  /** version: 2.14.2 */
+  /** version: 2.15.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -3298,6 +3299,12 @@
         patchComment(n1, n2, renderer);
         break;
 
+      case 4
+      /* Static */
+      :
+        n2.elm = n1.elm;
+        break;
+
       case 2
       /* Element */
       :
@@ -3330,6 +3337,13 @@
         mountComment(node, parent, anchor, renderer);
         break;
 
+      case 4
+      /* Static */
+      :
+        // VStatic cannot have a custom renderer associated to them, using owner's renderer
+        mountStatic(node, parent, anchor, renderer);
+        break;
+
       case 2
       /* Element */
       :
@@ -3400,6 +3414,29 @@
     patchChildren(n1.children, n2.children, elm, renderer);
   }
 
+  function mountStatic(vnode, parent, anchor, renderer) {
+    var owner = vnode.owner;
+    var cloneNode = renderer.cloneNode,
+        isSyntheticShadowDefined = renderer.isSyntheticShadowDefined;
+    var elm = vnode.elm = cloneNode(vnode.fragment, true);
+    linkNodeToShadow(elm, owner, renderer); // Marks this node as Static to propagate the shadow resolver. must happen after elm is assigned to the proper shadow
+
+    var renderMode = owner.renderMode,
+        shadowMode = owner.shadowMode;
+
+    if (isSyntheticShadowDefined) {
+      if (shadowMode === 1
+      /* Synthetic */
+      || renderMode === 0
+      /* Light */
+      ) {
+        elm[KEY__SHADOW_STATIC] = true;
+      }
+    }
+
+    insertNode(elm, parent, anchor, renderer);
+  }
+
   function mountCustomElement(vnode, parent, anchor, renderer) {
     var sel = vnode.sel,
         owner = vnode.owner;
@@ -3940,6 +3977,20 @@
 
   function addVNodeToChildLWC(vnode) {
     ArrayPush$1.call(getVMBeingRendered().velements, vnode);
+  } // [st]atic node
+
+
+  function st(fragment, key) {
+    return {
+      type: 4
+      /* Static */
+      ,
+      sel: undefined,
+      key: key,
+      elm: undefined,
+      fragment: fragment,
+      owner: getVMBeingRendered()
+    };
   } // [h]tml node
 
 
@@ -4306,6 +4357,7 @@
     co: co,
     dc: dc,
     ti: ti,
+    st: st,
     gid: gid,
     fid: fid,
     shc: shc
@@ -4510,8 +4562,7 @@
       //       This works in the client, because the stylesheets are created, and cached in the VM
       //       the first time the VM renders.
       // native shadow or light DOM, SSR
-      var combinedStylesheetContent = ArrayJoin.call(stylesheets, '\n');
-      return createInlineStyleVNode(combinedStylesheetContent);
+      return ArrayMap.call(stylesheets, createInlineStyleVNode);
     } else {
       // native shadow or light DOM, DOM renderer
       var root = getNearestNativeShadowComponent(vm); // null root means a global style
@@ -4623,6 +4674,91 @@
     }
   }
 
+  function buildParseFragmentFn(createFragmentFn) {
+    return function (strings) {
+      for (var _len5 = arguments.length, keys = new Array(_len5 > 1 ? _len5 - 1 : 0), _key3 = 1; _key3 < _len5; _key3++) {
+        keys[_key3 - 1] = arguments[_key3];
+      }
+
+      var cache = create(null);
+      return function () {
+        var _getVMBeingRendered = getVMBeingRendered(),
+            _getVMBeingRendered$c = _getVMBeingRendered.context,
+            hasScopedStyles = _getVMBeingRendered$c.hasScopedStyles,
+            stylesheetToken = _getVMBeingRendered$c.stylesheetToken,
+            shadowMode = _getVMBeingRendered.shadowMode,
+            renderer = _getVMBeingRendered.renderer;
+
+        var hasStyleToken = !isUndefined$1(stylesheetToken);
+        var isSyntheticShadow = shadowMode === 1
+        /* Synthetic */
+        ;
+        var cacheKey = 0;
+
+        if (hasStyleToken && hasScopedStyles) {
+          cacheKey |= 1
+          /* HAS_SCOPED_STYLE */
+          ;
+        }
+
+        if (hasStyleToken && isSyntheticShadow) {
+          cacheKey |= 2
+          /* SHADOW_MODE_SYNTHETIC */
+          ;
+        }
+
+        if (!isUndefined$1(cache[cacheKey])) {
+          return cache[cacheKey];
+        }
+
+        var classToken = hasScopedStyles && hasStyleToken ? ' ' + stylesheetToken : '';
+        var classAttrToken = hasScopedStyles && hasStyleToken ? " class=\"".concat(stylesheetToken, "\"") : '';
+        var attrToken = hasStyleToken && isSyntheticShadow ? ' ' + stylesheetToken : '';
+        var htmlFragment = '';
+
+        for (var _i19 = 0, n = keys.length; _i19 < n; _i19++) {
+          switch (keys[_i19]) {
+            case 0:
+              // styleToken in existing class attr
+              htmlFragment += strings[_i19] + classToken;
+              break;
+
+            case 1:
+              // styleToken for added class attr
+              htmlFragment += strings[_i19] + classAttrToken;
+              break;
+
+            case 2:
+              // styleToken as attr
+              htmlFragment += strings[_i19] + attrToken;
+              break;
+
+            case 3:
+              // ${1}${2}
+              htmlFragment += strings[_i19] + classAttrToken + attrToken;
+              break;
+          }
+        }
+
+        htmlFragment += strings[strings.length - 1];
+        cache[cacheKey] = createFragmentFn(htmlFragment, renderer);
+        return cache[cacheKey];
+      };
+    };
+  } // Note: at the moment this code executes, we don't have a renderer yet.
+
+
+  var parseFragment = buildParseFragmentFn(function (html, renderer) {
+    var createFragment = renderer.createFragment;
+    return createFragment(html);
+  });
+  var parseSVGFragment = buildParseFragmentFn(function (html, renderer) {
+    var createFragment = renderer.createFragment,
+        getFirstChild = renderer.getFirstChild;
+    var fragment = createFragment('<svg>' + html + '</svg>');
+    return getFirstChild(fragment);
+  });
+
   function evaluateTemplate(vm, html) {
 
     var isUpdatingTemplateInception = isUpdatingTemplate;
@@ -4670,7 +4806,7 @@
           // re-rendering.
 
           var stylesheetsContent = getStylesheetsContent(vm, html);
-          context.styleVNode = stylesheetsContent.length === 0 ? null : createStylesheet(vm, stylesheetsContent);
+          context.styleVNodes = stylesheetsContent.length === 0 ? null : createStylesheet(vm, stylesheetsContent);
         }
 
         if ("production" !== 'production') ; // right before producing the vnodes, we clear up all internal references
@@ -4681,10 +4817,10 @@
 
         isUpdatingTemplate = true;
         vnodes = html.call(undefined, api, component, cmpSlots, context.tplCache);
-        var styleVNode = context.styleVNode;
+        var styleVNodes = context.styleVNodes;
 
-        if (!isNull(styleVNode)) {
-          ArrayUnshift.call(vnodes, styleVNode);
+        if (!isNull(styleVNodes)) {
+          ArrayUnshift.apply(vnodes, styleVNodes);
         }
       });
     }, function () {
@@ -4703,8 +4839,8 @@
     var stylesheets = template.stylesheets;
 
     if (!isUndefined$1(stylesheets)) {
-      for (var _i19 = 0; _i19 < stylesheets.length; _i19++) {
-        if (isTrue(stylesheets[_i19][KEY__SCOPED_CSS])) {
+      for (var _i20 = 0; _i20 < stylesheets.length; _i20++) {
+        if (isTrue(stylesheets[_i20][KEY__SCOPED_CSS])) {
           return true;
         }
       }
@@ -4893,8 +5029,8 @@
 
   function register(service) {
 
-    for (var _i20 = 0; _i20 < hooks.length; ++_i20) {
-      var hookName = hooks[_i20];
+    for (var _i21 = 0; _i21 < hooks.length; ++_i21) {
+      var hookName = hooks[_i21];
 
       if (hookName in service) {
         var l = Services[hookName];
@@ -4914,8 +5050,8 @@
         def = vm.def,
         context = vm.context;
 
-    for (var _i21 = 0, len = cbs.length; _i21 < len; ++_i21) {
-      cbs[_i21].call(undefined, component, {}, def, context);
+    for (var _i22 = 0, len = cbs.length; _i22 < len; ++_i22) {
+      cbs[_i22].call(undefined, component, {}, def, context);
     }
   }
   /*
@@ -5053,7 +5189,7 @@
         hasTokenInClass: undefined,
         hasTokenInAttribute: undefined,
         hasScopedStyles: undefined,
-        styleVNode: null,
+        styleVNodes: null,
         tplCache: EmptyObject,
         wiredConnecting: EmptyArray,
         wiredDisconnecting: EmptyArray
@@ -5247,19 +5383,19 @@
     });
     rehydrateQueue = []; // reset to a new queue
 
-    for (var _i22 = 0, len = vms.length; _i22 < len; _i22 += 1) {
-      var vm = vms[_i22];
+    for (var _i23 = 0, len = vms.length; _i23 < len; _i23 += 1) {
+      var vm = vms[_i23];
 
       try {
         rehydrate(vm);
       } catch (error) {
-        if (_i22 + 1 < len) {
+        if (_i23 + 1 < len) {
           // pieces of the queue are still pending to be rehydrated, those should have priority
           if (rehydrateQueue.length === 0) {
             addCallbackToNextTick(flushRehydrationQueue);
           }
 
-          ArrayUnshift.apply(rehydrateQueue, ArraySlice.call(vms, _i22 + 1));
+          ArrayUnshift.apply(rehydrateQueue, ArraySlice.call(vms, _i23 + 1));
         } // we need to end the measure before throwing.
 
 
@@ -5358,8 +5494,8 @@
     var vCustomElementCollection = vm.velements; // Reporting disconnection for every child in inverse order since they are
     // inserted in reserved order.
 
-    for (var _i23 = vCustomElementCollection.length - 1; _i23 >= 0; _i23 -= 1) {
-      var elm = vCustomElementCollection[_i23].elm; // There are two cases where the element could be undefined:
+    for (var _i24 = vCustomElementCollection.length - 1; _i24 >= 0; _i24 -= 1) {
+      var elm = vCustomElementCollection[_i24].elm; // There are two cases where the element could be undefined:
       // * when there is an error during the construction phase, and an error
       //   boundary picks it, there is a possibility that the VCustomElement
       //   is not properly initialized, and therefore is should be ignored.
@@ -5393,8 +5529,8 @@
 
 
   function recursivelyDisconnectChildren(vnodes) {
-    for (var _i24 = 0, len = vnodes.length; _i24 < len; _i24 += 1) {
-      var vnode = vnodes[_i24];
+    for (var _i25 = 0, len = vnodes.length; _i25 < len; _i25 += 1) {
+      var vnode = vnodes[_i25];
 
       if (!isNull(vnode) && !isUndefined$1(vnode.elm)) {
         switch (vnode.type) {
@@ -5426,8 +5562,8 @@
         renderRoot = vm.renderRoot,
         remove = vm.renderer.remove;
 
-    for (var _i25 = 0, len = children.length; _i25 < len; _i25++) {
-      var child = children[_i25];
+    for (var _i26 = 0, len = children.length; _i26 < len; _i26++) {
+      var child = children[_i26];
 
       if (!isNull(child) && !isUndefined$1(child.elm)) {
         remove(child.elm, renderRoot);
@@ -5780,8 +5916,8 @@
   function connectWireAdapters(vm) {
     var wiredConnecting = vm.context.wiredConnecting;
 
-    for (var _i26 = 0, len = wiredConnecting.length; _i26 < len; _i26 += 1) {
-      wiredConnecting[_i26]();
+    for (var _i27 = 0, len = wiredConnecting.length; _i27 < len; _i27 += 1) {
+      wiredConnecting[_i27]();
     }
   }
 
@@ -5789,8 +5925,8 @@
     var wiredDisconnecting = vm.context.wiredDisconnecting;
     runWithBoundaryProtection(vm, vm, noop, function () {
       // job
-      for (var _i27 = 0, len = wiredDisconnecting.length; _i27 < len; _i27 += 1) {
-        wiredDisconnecting[_i27]();
+      for (var _i28 = 0, len = wiredDisconnecting.length; _i28 < len; _i28 += 1) {
+        wiredDisconnecting[_i28]();
       }
     }, noop);
   }
@@ -5910,6 +6046,13 @@
         hydratedNode = hydrateComment(node, vnode, renderer);
         break;
 
+      case 4
+      /* Static */
+      :
+        // VStatic are cacheable and cannot have custom renderer associated to them
+        hydratedNode = hydrateStaticElement(node, vnode, renderer);
+        break;
+
       case 2
       /* Element */
       :
@@ -5956,6 +6099,15 @@
     return node;
   }
 
+  function hydrateStaticElement(elm, vnode, renderer) {
+    if (!areCompatibleNodes(vnode.fragment, elm, vnode, renderer)) {
+      return handleMismatch(elm, vnode, renderer);
+    }
+
+    vnode.elm = elm;
+    return elm;
+  }
+
   function hydrateElement(elm, vnode, renderer) {
     if (!hasCorrectNodeType(vnode, elm, 1
     /* ELEMENT */
@@ -6038,8 +6190,8 @@
     var anchor = null;
     var renderer = owner.renderer;
 
-    for (var _i28 = 0; _i28 < children.length; _i28++) {
-      var childVnode = children[_i28];
+    for (var _i29 = 0; _i29 < children.length; _i29++) {
+      var childVnode = children[_i29];
 
       if (!isNull(childVnode)) {
         if (nextNode) {
@@ -6116,8 +6268,8 @@
     var nodesAreCompatible = true; // Validate attributes, though we could always recovery from those by running the update mods.
     // Note: intentionally ONLY matching vnodes.attrs to elm.attrs, in case SSR is adding extra attributes.
 
-    for (var _i29 = 0, _Object$entries = Object.entries(attrs); _i29 < _Object$entries.length; _i29++) {
-      var _Object$entries$_i = _slicedToArray(_Object$entries[_i29], 2),
+    for (var _i30 = 0, _Object$entries = Object.entries(attrs); _i30 < _Object$entries.length; _i30++) {
+      var _Object$entries$_i = _slicedToArray(_Object$entries[_i30], 2),
           attrName = _Object$entries$_i[0],
           attrValue = _Object$entries$_i[1];
 
@@ -6183,8 +6335,8 @@
       var parsedVnodeStyle = parseStyleText(elmStyle);
       var expectedStyle = []; // styleMap is used when style is set to static value.
 
-      for (var _i30 = 0, n = styleDecls.length; _i30 < n; _i30++) {
-        var _styleDecls$_i2 = _slicedToArray(styleDecls[_i30], 3),
+      for (var _i31 = 0, n = styleDecls.length; _i31 < n; _i31++) {
+        var _styleDecls$_i2 = _slicedToArray(styleDecls[_i31], 3),
             prop = _styleDecls$_i2[0],
             value = _styleDecls$_i2[1],
             important = _styleDecls$_i2[2];
@@ -6210,6 +6362,57 @@
 
     return nodesAreCompatible;
   }
+
+  function areCompatibleNodes(client, ssr, vnode, renderer) {
+    var getProperty = renderer.getProperty,
+        getAttribute = renderer.getAttribute;
+
+    if (getProperty(client, 'nodeType') === 3
+    /* TEXT */
+    ) {
+      if (!hasCorrectNodeType(vnode, ssr, 3
+      /* TEXT */
+      , renderer)) {
+        return false;
+      }
+
+      return getProperty(client, 'nodeValue') === getProperty(ssr, 'nodeValue');
+    }
+
+    if (getProperty(client, 'nodeType') === 8
+    /* COMMENT */
+    ) {
+      if (!hasCorrectNodeType(vnode, ssr, 8
+      /* COMMENT */
+      , renderer)) {
+        return false;
+      }
+
+      return getProperty(client, 'nodeValue') === getProperty(ssr, 'nodeValue');
+    }
+
+    if (!hasCorrectNodeType(vnode, ssr, 1
+    /* ELEMENT */
+    , renderer)) {
+      return false;
+    }
+
+    var isCompatibleElements = true;
+
+    if (getProperty(client, 'tagName') !== getProperty(ssr, 'tagName')) {
+
+      return false;
+    }
+
+    var clientAttrsNames = getProperty(client, 'getAttributeNames').call(client);
+    clientAttrsNames.forEach(function (attrName) {
+      if (getAttribute(client, attrName) !== getAttribute(ssr, attrName)) {
+        logError("Mismatch hydrating element <".concat(getProperty(client, 'tagName').toLowerCase(), ">: attribute \"").concat(attrName, "\" has different values, expected \"").concat(getAttribute(client, attrName), "\" but found \"").concat(getAttribute(ssr, attrName), "\""), vnode.owner);
+        isCompatibleElements = false;
+      }
+    });
+    return isCompatibleElements;
+  }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -6257,7 +6460,7 @@
 
     return ctor;
   }
-  /* version: 2.14.2 */
+  /* version: 2.15.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -6511,6 +6714,14 @@
   var isNativeShadowDefined = _globalThis[KEY__IS_NATIVE_SHADOW_ROOT_DEFINED];
   var isSyntheticShadowDefined = hasOwnProperty$1.call(Element.prototype, KEY__SHADOW_TOKEN);
 
+  function cloneNode(node, deep) {
+    return node.cloneNode(deep);
+  }
+
+  function createFragment(html) {
+    return document.createRange().createContextualFragment(html).firstChild;
+  }
+
   function createElement$1(tagName, namespace) {
     return isUndefined$1(namespace) ? document.createElement(tagName) : document.createElementNS(namespace, tagName);
   }
@@ -6655,6 +6866,8 @@
     isHydrating: isHydrating,
     insert: insert,
     remove: remove,
+    cloneNode: cloneNode,
+    createFragment: createFragment,
     createElement: createElement$1,
     createText: createText,
     createComment: createComment,
@@ -6719,8 +6932,8 @@
       hydrated: true
     });
 
-    for (var _i31 = 0, _Object$entries2 = Object.entries(props); _i31 < _Object$entries2.length; _i31++) {
-      var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i31], 2),
+    for (var _i32 = 0, _Object$entries2 = Object.entries(props); _i32 < _Object$entries2.length; _i32++) {
+      var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i32], 2),
           key = _Object$entries2$_i[0],
           value = _Object$entries2$_i[1];
 
@@ -7045,7 +7258,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.14.2 */
+  /* version: 2.15.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;
@@ -7059,6 +7272,8 @@
   exports.hydrateComponent = hydrateComponent;
   exports.isComponentConstructor = isComponentConstructor;
   exports.isNodeFromTemplate = isNodeShadowed;
+  exports.parseFragment = parseFragment;
+  exports.parseSVGFragment = parseSVGFragment;
   exports.readonly = readonly;
   exports.register = register;
   exports.registerComponent = registerComponent;