lwc 2.14.2 → 2.17.0

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

@@ -233,6 +233,7 @@
    */
   const KEY__IS_NATIVE_SHADOW_ROOT_DEFINED = '$isNativeShadowRootDefined$';
   const KEY__SHADOW_RESOLVER = '$shadowResolver$';
+  const KEY__SHADOW_STATIC = '$shadowStaticNode$';
   const KEY__SHADOW_TOKEN = '$shadowToken$';
   const KEY__SYNTHETIC_MODE = '$$lwc-synthetic-mode';
   const KEY__SCOPED_CSS = '$scoped$';
@@ -293,7 +294,7 @@
   const XML_NAMESPACE = 'http://www.w3.org/XML/1998/namespace';
   const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
   const XLINK_NAMESPACE = 'http://www.w3.org/1999/xlink';
-  /** version: 2.14.2 */
+  /** version: 2.17.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -2584,6 +2585,9 @@
               // VComment has no special capability, fallback to the owner's renderer
               patchComment(n1, n2, renderer);
               break;
+          case 4 /* Static */:
+              n2.elm = n1.elm;
+              break;
           case 2 /* Element */:
               patchElement(n1, n2, (_a = n2.data.renderer) !== null && _a !== void 0 ? _a : renderer);
               break;
@@ -2603,6 +2607,10 @@
               // VComment has no special capability, fallback to the owner's renderer
               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 */:
               // If the vnode data has a renderer override use it, else fallback to owner's renderer
               mountElement(node, parent, anchor, (_a = node.data.renderer) !== null && _a !== void 0 ? _a : renderer);
@@ -2658,6 +2666,20 @@
       patchElementPropsAndAttrs$1(n1, n2, renderer);
       patchChildren(n1.children, n2.children, elm, renderer);
   }
+  function mountStatic(vnode, parent, anchor, renderer) {
+      const { owner } = vnode;
+      const { cloneNode, isSyntheticShadowDefined } = renderer;
+      const 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
+      const { renderMode, shadowMode } = owner;
+      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) {
       const { sel, owner } = vnode;
       const UpgradableConstructor = getUpgradableConstructor(sel, renderer);
@@ -3094,6 +3116,17 @@
   function addVNodeToChildLWC(vnode) {
       ArrayPush$1.call(getVMBeingRendered().velements, vnode);
   }
+  // [st]atic node
+  function st(fragment, key) {
+      return {
+          type: 4 /* Static */,
+          sel: undefined,
+          key,
+          elm: undefined,
+          fragment,
+          owner: getVMBeingRendered(),
+      };
+  }
   // [h]tml node
   function h(sel, data, children = EmptyArray) {
       const vmBeingRendered = getVMBeingRendered();
@@ -3370,6 +3403,7 @@
       co,
       dc,
       ti,
+      st,
       gid,
       fid,
       shc,
@@ -3513,8 +3547,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
-          const combinedStylesheetContent = ArrayJoin.call(stylesheets, '\n');
-          return createInlineStyleVNode(combinedStylesheetContent);
+          return ArrayMap.call(stylesheets, createInlineStyleVNode);
       }
       else {
           // native shadow or light DOM, DOM renderer
@@ -3600,6 +3633,59 @@
           assert.isTrue(isUndefined$1(template.renderMode), `Shadow DOM components template can't render light DOM templates. Either remove the 'lwc:render-mode' directive from ${getComponentTag(vm)} or set it to 'lwc:render-mode="shadow"`);
       }
   }
+  function buildParseFragmentFn(createFragmentFn) {
+      return (strings, ...keys) => {
+          const cache = create(null);
+          return function () {
+              const { context: { hasScopedStyles, stylesheetToken }, shadowMode, renderer, } = getVMBeingRendered();
+              const hasStyleToken = !isUndefined$1(stylesheetToken);
+              const isSyntheticShadow = shadowMode === 1 /* Synthetic */;
+              let 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];
+              }
+              const classToken = hasScopedStyles && hasStyleToken ? ' ' + stylesheetToken : '';
+              const classAttrToken = hasScopedStyles && hasStyleToken ? ` class="${stylesheetToken}"` : '';
+              const attrToken = hasStyleToken && isSyntheticShadow ? ' ' + stylesheetToken : '';
+              let htmlFragment = '';
+              for (let i = 0, n = keys.length; i < n; i++) {
+                  switch (keys[i]) {
+                      case 0: // styleToken in existing class attr
+                          htmlFragment += strings[i] + classToken;
+                          break;
+                      case 1: // styleToken for added class attr
+                          htmlFragment += strings[i] + classAttrToken;
+                          break;
+                      case 2: // styleToken as attr
+                          htmlFragment += strings[i] + attrToken;
+                          break;
+                      case 3: // ${1}${2}
+                          htmlFragment += strings[i] + 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.
+  const parseFragment = buildParseFragmentFn((html, renderer) => {
+      const { createFragment } = renderer;
+      return createFragment(html);
+  });
+  const parseSVGFragment = buildParseFragmentFn((html, renderer) => {
+      const { createFragment, getFirstChild } = renderer;
+      const fragment = createFragment('<svg>' + html + '</svg>');
+      return getFirstChild(fragment);
+  });
   function evaluateTemplate(vm, html) {
       const isUpdatingTemplateInception = isUpdatingTemplate;
       const vmOfTemplateBeingUpdatedInception = vmBeingRendered;
@@ -3637,7 +3723,7 @@
                   // Evaluate, create stylesheet and cache the produced VNode for future
                   // re-rendering.
                   const stylesheetsContent = getStylesheetsContent(vm, html);
-                  context.styleVNode =
+                  context.styleVNodes =
                       stylesheetsContent.length === 0
                           ? null
                           : createStylesheet(vm, stylesheetsContent);
@@ -3649,9 +3735,9 @@
               // Set the global flag that template is being updated
               isUpdatingTemplate = true;
               vnodes = html.call(undefined, api, component, cmpSlots, context.tplCache);
-              const { styleVNode } = context;
-              if (!isNull(styleVNode)) {
-                  ArrayUnshift.call(vnodes, styleVNode);
+              const { styleVNodes } = context;
+              if (!isNull(styleVNodes)) {
+                  ArrayUnshift.apply(vnodes, styleVNodes);
               }
           });
       }, () => {
@@ -3969,7 +4055,7 @@
         hasTokenInClass: undefined,
         hasTokenInAttribute: undefined,
         hasScopedStyles: undefined,
-        styleVNode: null,
+        styleVNodes: null,
         tplCache: EmptyObject,
         wiredConnecting: EmptyArray,
         wiredDisconnecting: EmptyArray
@@ -4829,6 +4915,10 @@
               // VComment has no special capability, fallback to the owner's renderer
               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 */:
               hydratedNode = hydrateElement(node, vnode, (_a = vnode.data.renderer) !== null && _a !== void 0 ? _a : renderer);
               break;
@@ -4858,6 +4948,13 @@
       vnode.elm = node;
       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 */, renderer) ||
           !isMatchingElement(vnode, elm, renderer)) {
@@ -5046,6 +5143,36 @@
       }
       return nodesAreCompatible;
   }
+  function areCompatibleNodes(client, ssr, vnode, renderer) {
+      const { getProperty, getAttribute } = renderer;
+      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;
+      }
+      let isCompatibleElements = true;
+      if (getProperty(client, 'tagName') !== getProperty(ssr, 'tagName')) {
+          return false;
+      }
+      const clientAttrsNames = getProperty(client, 'getAttributeNames').call(client);
+      clientAttrsNames.forEach((attrName) => {
+          if (getAttribute(client, attrName) !== getAttribute(ssr, attrName)) {
+              logError(`Mismatch hydrating element <${getProperty(client, 'tagName').toLowerCase()}>: attribute "${attrName}" has different values, expected "${getAttribute(client, attrName)}" but found "${getAttribute(ssr, attrName)}"`, vnode.owner);
+              isCompatibleElements = false;
+          }
+      });
+      return isCompatibleElements;
+  }
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -5086,7 +5213,7 @@
       }
       return ctor;
   }
-  /* version: 2.14.2 */
+  /* version: 2.17.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -5295,6 +5422,12 @@
   }
   const isNativeShadowDefined = _globalThis[KEY__IS_NATIVE_SHADOW_ROOT_DEFINED];
   const 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)
@@ -5413,6 +5546,8 @@
       isHydrating,
       insert,
       remove,
+      cloneNode,
+      createFragment,
       createElement: createElement$1,
       createText,
       createComment,
@@ -5734,7 +5869,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.14.2 */
+  /* version: 2.17.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;
@@ -5748,6 +5883,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;