lwc 2.5.4 → 2.5.8

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

@@ -301,7 +301,7 @@
     CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
     return attributeName;
   }
-  /** version: 2.5.4 */
+  /** version: 2.5.8 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -473,7 +473,7 @@
 
   function setFeatureFlagForTest(name, value) {
   }
-  /** version: 2.5.4 */
+  /** version: 2.5.8 */
 
   /* proxy-compat-disable */
 
@@ -515,7 +515,7 @@
     }
 
     return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
-  }
+  } // Borrowed from Vue template compiler.
   /*
    * Copyright (c) 2019, salesforce.com, inc.
    * All rights reserved.
@@ -663,6 +663,20 @@
     return `<${StringToLowerCase.call(vm.tagName)}>`;
   } // TODO [#1695]: Unify getComponentStack and getErrorComponentStack
 
+
+  function getComponentStack(vm) {
+    const stack = [];
+    let prefix = '';
+
+    while (!isNull(vm.owner)) {
+      ArrayPush$1.call(stack, prefix + getComponentTag(vm));
+      vm = vm.owner;
+      prefix += '\t';
+    }
+
+    return ArrayJoin.call(stack, '\n');
+  }
+
   function getErrorComponentStack(vm) {
     const wcStack = [];
     let currentVm = vm;
@@ -682,6 +696,32 @@
    */
 
 
+  function log(method, message, vm) {
+    let msg = `[LWC ${method}]: ${message}`;
+
+    if (!isUndefined$1(vm)) {
+      msg = `${msg}\n${getComponentStack(vm)}`;
+    }
+
+    try {
+      throw new Error(msg);
+    } catch (e) {
+      /* eslint-disable-next-line no-console */
+      console[method](e);
+    }
+  }
+
+  function logWarn(message, vm) {
+    log('warn', message, vm);
+  }
+  /*
+   * Copyright (c) 2018, salesforce.com, inc.
+   * All rights reserved.
+   * SPDX-License-Identifier: MIT
+   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+   */
+
+
   function handleEvent(event, vnode) {
     const {
       type
@@ -2434,8 +2474,10 @@
         } = vm;
 
         return renderer[rendererMethod](elm);
-      }
+      },
 
+      configurable: true,
+      enumerable: true
     };
   }
 
@@ -2451,8 +2493,11 @@
         } = vm;
 
         return renderer[queryMethod](elm, arg);
-      }
+      },
 
+      configurable: true,
+      enumerable: true,
+      writable: true
     };
   }
 
@@ -2884,15 +2929,14 @@
     return tpl;
   }
   /**
-   * EXPERIMENTAL: This function acts like a hook for Lightning Locker
-   * Service and other similar libraries to sanitize vulnerable attributes.
-   * This API is subject to change or being removed.
+   * EXPERIMENTAL: This function acts like a hook for Lightning Locker Service and other similar
+   * libraries to sanitize vulnerable attributes.
    */
 
 
   function sanitizeAttribute(tagName, namespaceUri, attrName, attrValue) {
-    // locker-service patches this function during runtime to sanitize vulnerable attributes.
-    // when ran off-core this function becomes a noop and returns the user authored value.
+    // locker-service patches this function during runtime to sanitize vulnerable attributes. When
+    // ran off-core this function becomes a noop and returns the user authored value.
     return attrValue;
   }
   /*
@@ -3304,7 +3348,7 @@
     renderMode: 1
     /* Shadow */
     ,
-    shadowSupportMode: "default"
+    shadowSupportMode: "reset"
     /* Default */
     ,
     wire: EmptyObject,
@@ -3430,6 +3474,17 @@
     modComputedStyle.create(vnode);
   }
 
+  function hydrateElmHook(vnode) {
+    modEvents.create(vnode); // Attrs are already on the element.
+    // modAttrs.create(vnode);
+
+    modProps.create(vnode); // Already set.
+    // modStaticClassName.create(vnode);
+    // modStaticStyle.create(vnode);
+    // modComputedClassName.create(vnode);
+    // modComputedStyle.create(vnode);
+  }
+
   function fallbackElmHook(elm, vnode) {
     const {
       owner
@@ -3579,6 +3634,22 @@
     }
   }
 
+  function hydrateChildrenHook(elmChildren, children, vm) {
+
+    let elmCurrentChildIdx = 0;
+
+    for (let j = 0, n = children.length; j < n; j++) {
+      const ch = children[j];
+
+      if (ch != null) {
+        const childNode = elmChildren[elmCurrentChildIdx];
+
+        ch.hook.hydrate(ch, childNode);
+        elmCurrentChildIdx++;
+      }
+    }
+  }
+
   function updateCustomElmHook(oldVnode, vnode) {
     // Attrs need to be applied to element before props
     // IE11 will wipe out value on radio inputs if value
@@ -3680,7 +3751,14 @@
     update: updateNodeHook,
     insert: insertNodeHook,
     move: insertNodeHook,
-    remove: removeNodeHook
+    remove: removeNodeHook,
+    hydrate: (vNode, node) => {
+      var _a;
+
+
+      node.nodeValue = (_a = vNode.text) !== null && _a !== void 0 ? _a : null;
+      vNode.elm = node;
+    }
   };
   const CommentHook = {
     create: vnode => {
@@ -3698,7 +3776,14 @@
     update: updateNodeHook,
     insert: insertNodeHook,
     move: insertNodeHook,
-    remove: removeNodeHook
+    remove: removeNodeHook,
+    hydrate: (vNode, node) => {
+      var _a;
+
+
+      node.nodeValue = (_a = vNode.text) !== null && _a !== void 0 ? _a : null;
+      vNode.elm = node;
+    }
   }; // insert is called after update, which is used somewhere else (via a module)
   // to mark the vm as inserted, that means we cannot use update as the main channel
   // to rehydrate when dirty, because sometimes the element is not inserted just yet,
@@ -3738,6 +3823,38 @@
     remove: (vnode, parentNode) => {
       removeNodeHook(vnode, parentNode);
       removeElmHook(vnode);
+    },
+    hydrate: (vnode, node) => {
+      const elm = node;
+      vnode.elm = elm;
+      const {
+        context
+      } = vnode.data;
+      const isDomManual = Boolean(!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual"
+      /* manual */
+      );
+
+      if (isDomManual) {
+        // it may be that this element has lwc:inner-html, we need to diff and in case are the same,
+        // remove the innerHTML from props so it reuses the existing dom elements.
+        const {
+          props
+        } = vnode.data;
+
+        if (!isUndefined$1(props) && !isUndefined$1(props.innerHTML)) {
+          if (elm.innerHTML === props.innerHTML) {
+            delete props.innerHTML;
+          } else {
+            logWarn(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: innerHTML values do not match for element, will recover from the difference`, vnode.owner);
+          }
+        }
+      }
+
+      hydrateElmHook(vnode);
+
+      if (!isDomManual) {
+        hydrateChildrenHook(vnode.elm.childNodes, vnode.children, vnode.owner);
+      }
     }
   };
   const CustomElementHook = {
@@ -3821,6 +3938,38 @@
         // will take care of disconnecting any child VM attached to its shadow as well.
         removeVM(vm);
       }
+    },
+    hydrate: (vnode, elm) => {
+      // the element is created, but the vm is not
+      const {
+        sel,
+        mode,
+        ctor,
+        owner
+      } = vnode;
+      const def = getComponentInternalDef(ctor);
+      createVM(elm, def, {
+        mode,
+        owner,
+        tagName: sel,
+        renderer: owner.renderer
+      });
+      vnode.elm = elm;
+      const vm = getAssociatedVM(elm);
+      allocateChildrenHook(vnode, vm);
+      hydrateElmHook(vnode); // Insert hook section:
+
+      runConnectedCallback(vm);
+
+      if (vm.renderMode !== 0
+      /* Light */
+      ) {
+        // VM is not rendering in Light DOM, we can proceed and hydrate the slotted content.
+        // Note: for Light DOM, this is handled while hydrating the VM
+        hydrateChildrenHook(vnode.elm.childNodes, vnode.children);
+      }
+
+      hydrateVM(vm);
     }
   };
 
@@ -3956,7 +4105,7 @@
       next = iterator.next();
       last = next.done; // template factory logic based on the previous collected value
 
-      const vnode = factory(value, j, j === 0, last);
+      const vnode = factory(value, j, j === 0, last === true);
 
       if (isArray$1(vnode)) {
         ArrayPush$1.apply(list, vnode);
@@ -4172,24 +4321,48 @@
     markAsDynamicChildren(vnodes);
     return vnodes;
   }
+  /**
+   * EXPERIMENTAL: This function acts like a hook for Lightning Locker Service and other similar
+   * libraries to sanitize HTML content. This hook process the content passed via the template to
+   * lwc:inner-html directive.
+   * It is meant to be overridden with setSanitizeHtmlContentHook, it throws an error by default.
+   */
 
-  var api = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    h: h,
-    ti: ti,
-    s: s,
-    c: c,
-    i: i,
-    f: f,
-    t: t,
-    co: co,
-    d: d,
-    b: b,
-    k: k,
-    gid: gid,
-    fid: fid,
-    dc: dc,
-    sc: sc
+
+  let sanitizeHtmlContentHook = () => {
+    // locker-service patches this function during runtime to sanitize HTML content.
+    throw new Error('sanitizeHtmlContent hook must be implemented.');
+  };
+  /**
+   * Sets the sanitizeHtmlContentHook.
+   */
+
+
+  function setSanitizeHtmlContentHook(newHookImpl) {
+    sanitizeHtmlContentHook = newHookImpl;
+  } // [s]anitize [h]tml [c]ontent
+
+
+  function shc(content) {
+    return sanitizeHtmlContentHook(content);
+  }
+
+  const api = freeze({
+    s,
+    h,
+    c,
+    i,
+    f,
+    t,
+    d,
+    b,
+    k,
+    co,
+    dc,
+    ti,
+    gid,
+    fid,
+    shc
   });
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -4203,12 +4376,12 @@
   }
 
   function createInlineStyleVNode(content) {
-    return h('style', {
+    return api.h('style', {
       key: 'style',
       attrs: {
         type: 'text/css'
       }
-    }, [t(content)]);
+    }, [api.t(content)]);
   }
 
   function updateStylesheetToken(vm, template) {
@@ -4355,7 +4528,10 @@
       for (let i = 0; i < stylesheets.length; i++) {
         renderer.insertGlobalStylesheet(stylesheets[i]);
       }
-    } else if (renderer.ssr) {
+    } else if (renderer.ssr || renderer.isHydrating) {
+      // Note: We need to ensure that during hydration, the stylesheets method is the same as those in ssr.
+      //       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);
@@ -4854,6 +5030,12 @@
     , vm);
   }
 
+  function hydrateRootElement(elm) {
+    const vm = getAssociatedVM(elm);
+    runConnectedCallback(vm);
+    hydrateVM(vm);
+  }
+
   function disconnectRootElement(elm) {
     const vm = getAssociatedVM(elm);
     resetComponentStateWhenRemoved(vm);
@@ -4861,6 +5043,10 @@
 
   function appendVM(vm) {
     rehydrate(vm);
+  }
+
+  function hydrateVM(vm) {
+    hydrate(vm);
   } // just in case the component comes back, with this we guarantee re-rendering it
   // while preventing any attempt to rehydration until after reinsertion.
 
@@ -5055,6 +5241,22 @@
     }
   }
 
+  function hydrate(vm) {
+    if (isTrue(vm.isDirty)) {
+      // manually diffing/patching here.
+      // This routine is:
+      // patchShadowRoot(vm, children);
+      //  -> addVnodes.
+      const children = renderComponent(vm);
+      vm.children = children;
+      const vmChildren = vm.renderMode === 0
+      /* Light */
+      ? vm.elm.childNodes : vm.elm.shadowRoot.childNodes;
+      hydrateChildrenHook(vmChildren, children);
+      runRenderedCallback(vm);
+    }
+  }
+
   function patchShadowRoot(vm, newCh) {
     const {
       children: oldCh
@@ -5834,7 +6036,22 @@
 
     return reactiveMembrane.getReadOnlyProxy(obj);
   }
-  /* version: 2.5.4 */
+  /*
+   * Copyright (c) 2018, salesforce.com, inc.
+   * All rights reserved.
+   * SPDX-License-Identifier: MIT
+   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+   */
+
+
+  let hooksAreSet = false;
+
+  function setHooks(hooks) {
+    assert.isFalse(hooksAreSet, 'Hooks are already overridden, only one definition is allowed.');
+    hooksAreSet = true;
+    setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
+  }
+  /* version: 2.5.8 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -5846,8 +6063,11 @@
 
   const globalStylesheets = create(null);
 
-  const globalStylesheetsParentElement = document.head || document.body || document;
-  const supportsConstructableStyleSheets = isFunction$1(CSSStyleSheet.prototype.replaceSync);
+  const globalStylesheetsParentElement = document.head || document.body || document; // This check for constructable stylesheets is similar to Fast's:
+  // https://github.com/microsoft/fast/blob/d49d1ec/packages/web-components/fast-element/src/dom.ts#L51-L53
+  // See also: https://github.com/whatwg/webidl/issues/1027#issuecomment-934510070
+
+  const supportsConstructableStyleSheets = isFunction$1(CSSStyleSheet.prototype.replaceSync) && isArray$1(document.adoptedStyleSheets);
   const styleElements = create(null);
   const styleSheets = create(null);
   const nodesToStyleSheets = new WeakMap();
@@ -5966,8 +6186,19 @@
     HTMLElementConstructor.prototype = HTMLElement.prototype;
   }
 
+  let isHydrating = false;
+
+  function setIsHydrating(v) {
+    isHydrating = v;
+  }
+
   const renderer = {
     ssr: false,
+
+    get isHydrating() {
+      return isHydrating;
+    },
+
     isNativeShadowDefined: _globalThis[KEY__IS_NATIVE_SHADOW_ROOT_DEFINED],
     isSyntheticShadowDefined: hasOwnProperty$1.call(Element.prototype, KEY__SHADOW_TOKEN),
 
@@ -5996,6 +6227,10 @@
     },
 
     attachShadow(element, options) {
+      if (isHydrating) {
+        return element.shadowRoot;
+      }
+
       return element.attachShadow(options);
     },
 
@@ -6127,57 +6362,6 @@
     getCustomElement,
     HTMLElement: HTMLElementConstructor
   };
-  /*
-   * Copyright (c) 2018, salesforce.com, inc.
-   * All rights reserved.
-   * SPDX-License-Identifier: MIT
-   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
-   */
-
-  /**
-   * This function builds a Web Component class from a LWC constructor so it can be
-   * registered as a new element via customElements.define() at any given time.
-   *
-   * @deprecated since version 1.3.11
-   *
-   * @example
-   * ```
-   * import { buildCustomElementConstructor } from 'lwc';
-   * import Foo from 'ns/foo';
-   * const WC = buildCustomElementConstructor(Foo);
-   * customElements.define('x-foo', WC);
-   * const elm = document.createElement('x-foo');
-   * ```
-   */
-
-  function deprecatedBuildCustomElementConstructor(Ctor) {
-
-    return Ctor.CustomElementConstructor;
-  }
-
-  function buildCustomElementConstructor(Ctor) {
-    const def = getComponentInternalDef(Ctor);
-    return class extends def.bridge {
-      constructor() {
-        super();
-        createVM(this, def, {
-          mode: 'open',
-          owner: null,
-          tagName: this.tagName,
-          renderer
-        });
-      }
-
-      connectedCallback() {
-        connectRootElement(this);
-      }
-
-      disconnectedCallback() {
-        disconnectRootElement(this);
-      }
-
-    };
-  }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
    * All rights reserved.
@@ -6187,7 +6371,6 @@
   // TODO [#2472]: Remove this workaround when appropriate.
   // eslint-disable-next-line lwc-internal/no-global-node
 
-
   const _Node$1 = Node;
   const ConnectingSlot = new WeakMap();
   const DisconnectingSlot = new WeakMap();
@@ -6295,6 +6478,114 @@
    * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
    */
 
+
+  function hydrateComponent(element, Ctor, props = {}) {
+    if (!isFunction$1(Ctor)) {
+      throw new TypeError(`"hydrateComponent" expects a valid component constructor as the second parameter but instead received ${Ctor}.`);
+    }
+
+    if (!isObject(props) || isNull(props)) {
+      throw new TypeError(`"hydrateComponent" expects an object as the third parameter but instead received ${props}.`);
+    }
+
+    const def = getComponentInternalDef(Ctor);
+
+    try {
+      // Let the renderer know we are hydrating, so it does not replace the existing shadowRoot
+      // and uses the same algo to create the stylesheets as in SSR.
+      setIsHydrating(true);
+      createVM(element, def, {
+        mode: 'open',
+        owner: null,
+        renderer,
+        tagName: element.tagName.toLowerCase()
+      });
+
+      for (const [key, value] of Object.entries(props)) {
+        element[key] = value;
+      }
+
+      hydrateRootElement(element); // set it back since now we finished hydration.
+
+      setIsHydrating(false);
+    } catch (e) {
+      // Fallback: In case there's an error while hydrating, let's log the error, and replace the element with
+      //           the client generated DOM.
+
+      /* eslint-disable-next-line no-console */
+      console.error('Recovering from error while hydrating: ', e);
+      setIsHydrating(false);
+      const newElem = createElement(element.tagName, {
+        is: Ctor,
+        mode: 'open'
+      });
+
+      for (const [key, value] of Object.entries(props)) {
+        newElem[key] = value;
+      }
+
+      element.parentNode.replaceChild(newElem, element);
+    }
+  }
+  /*
+   * Copyright (c) 2018, salesforce.com, inc.
+   * All rights reserved.
+   * SPDX-License-Identifier: MIT
+   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+   */
+
+  /**
+   * This function builds a Web Component class from a LWC constructor so it can be
+   * registered as a new element via customElements.define() at any given time.
+   *
+   * @deprecated since version 1.3.11
+   *
+   * @example
+   * ```
+   * import { buildCustomElementConstructor } from 'lwc';
+   * import Foo from 'ns/foo';
+   * const WC = buildCustomElementConstructor(Foo);
+   * customElements.define('x-foo', WC);
+   * const elm = document.createElement('x-foo');
+   * ```
+   */
+
+
+  function deprecatedBuildCustomElementConstructor(Ctor) {
+
+    return Ctor.CustomElementConstructor;
+  }
+
+  function buildCustomElementConstructor(Ctor) {
+    const def = getComponentInternalDef(Ctor);
+    return class extends def.bridge {
+      constructor() {
+        super();
+        createVM(this, def, {
+          mode: 'open',
+          owner: null,
+          tagName: this.tagName,
+          renderer
+        });
+      }
+
+      connectedCallback() {
+        connectRootElement(this);
+      }
+
+      disconnectedCallback() {
+        disconnectRootElement(this);
+      }
+
+    };
+  }
+  /*
+   * Copyright (c) 2018, salesforce.com, inc.
+   * All rights reserved.
+   * SPDX-License-Identifier: MIT
+   * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+   */
+
   /**
    * EXPERIMENTAL: This function provides access to the component constructor, given an HTMLElement.
    * This API is subject to change or being removed.
@@ -6394,7 +6685,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.5.4 */
+  /* version: 2.5.8 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;
@@ -6404,6 +6695,7 @@
   exports.createElement = createElement;
   exports.getComponentConstructor = getComponentConstructor;
   exports.getComponentDef = getComponentDef;
+  exports.hydrateComponent = hydrateComponent;
   exports.isComponentConstructor = isComponentConstructor;
   exports.isNodeFromTemplate = isNodeFromTemplate;
   exports.readonly = readonly;
@@ -6414,6 +6706,7 @@
   exports.sanitizeAttribute = sanitizeAttribute;
   exports.setFeatureFlag = setFeatureFlag;
   exports.setFeatureFlagForTest = setFeatureFlagForTest;
+  exports.setHooks = setHooks;
   exports.swapComponent = swapComponent;
   exports.swapStyle = swapStyle;
   exports.swapTemplate = swapTemplate;