lwc 2.5.7 → 2.5.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/engine-dom/esm/es2017/engine-dom.js +490 -68
  2. package/dist/engine-dom/iife/es2017/engine-dom.js +490 -67
  3. package/dist/engine-dom/iife/es2017/engine-dom.min.js +2 -2
  4. package/dist/engine-dom/iife/es2017/engine-dom_debug.js +306 -60
  5. package/dist/engine-dom/iife/es5/engine-dom.js +566 -129
  6. package/dist/engine-dom/iife/es5/engine-dom.min.js +2 -2
  7. package/dist/engine-dom/iife/es5/engine-dom_debug.js +363 -113
  8. package/dist/engine-dom/umd/es2017/engine-dom.js +490 -67
  9. package/dist/engine-dom/umd/es2017/engine-dom.min.js +2 -2
  10. package/dist/engine-dom/umd/es2017/engine-dom_debug.js +306 -60
  11. package/dist/engine-dom/umd/es5/engine-dom.js +566 -129
  12. package/dist/engine-dom/umd/es5/engine-dom.min.js +2 -2
  13. package/dist/engine-dom/umd/es5/engine-dom_debug.js +363 -113
  14. package/dist/engine-server/commonjs/es2017/engine-server.js +361 -11
  15. package/dist/engine-server/commonjs/es2017/engine-server.min.js +2 -2
  16. package/dist/engine-server/esm/es2017/engine-server.js +361 -11
  17. package/dist/synthetic-shadow/esm/es2017/synthetic-shadow.js +3 -3
  18. package/dist/synthetic-shadow/iife/es2017/synthetic-shadow.js +3 -3
  19. package/dist/synthetic-shadow/iife/es2017/synthetic-shadow_debug.js +3 -3
  20. package/dist/synthetic-shadow/iife/es5/synthetic-shadow.js +3 -3
  21. package/dist/synthetic-shadow/iife/es5/synthetic-shadow_debug.js +3 -3
  22. package/dist/synthetic-shadow/umd/es2017/synthetic-shadow.js +3 -3
  23. package/dist/synthetic-shadow/umd/es2017/synthetic-shadow_debug.js +3 -3
  24. package/dist/synthetic-shadow/umd/es5/synthetic-shadow.js +3 -3
  25. package/dist/synthetic-shadow/umd/es5/synthetic-shadow_debug.js +3 -3
  26. package/dist/wire-service/esm/es2017/wire-service.js +2 -2
  27. package/dist/wire-service/iife/es2017/wire-service.js +2 -2
  28. package/dist/wire-service/iife/es2017/wire-service_debug.js +2 -2
  29. package/dist/wire-service/iife/es5/wire-service.js +2 -2
  30. package/dist/wire-service/iife/es5/wire-service_debug.js +2 -2
  31. package/dist/wire-service/umd/es2017/wire-service.js +2 -2
  32. package/dist/wire-service/umd/es2017/wire-service_debug.js +2 -2
  33. package/dist/wire-service/umd/es5/wire-service.js +2 -2
  34. package/dist/wire-service/umd/es5/wire-service_debug.js +2 -2
  35. package/package.json +8 -8
@@ -299,7 +299,7 @@ function htmlPropertyToAttribute(propName) {
299
299
  CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
300
300
  return attributeName;
301
301
  }
302
- /** version: 2.5.7 */
302
+ /** version: 2.5.8 */
303
303
 
304
304
  /*
305
305
  * Copyright (c) 2018, salesforce.com, inc.
@@ -479,7 +479,7 @@ function setFeatureFlagForTest(name, value) {
479
479
  setFeatureFlag(name, value);
480
480
  }
481
481
  }
482
- /** version: 2.5.7 */
482
+ /** version: 2.5.8 */
483
483
 
484
484
  /* proxy-compat-disable */
485
485
 
@@ -531,6 +531,28 @@ function guid() {
531
531
  }
532
532
 
533
533
  return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
534
+ } // Borrowed from Vue template compiler.
535
+ // https://github.com/vuejs/vue/blob/531371b818b0e31a989a06df43789728f23dc4e8/src/platforms/web/util/style.js#L5-L16
536
+
537
+
538
+ const DECLARATION_DELIMITER = /;(?![^(]*\))/g;
539
+ const PROPERTY_DELIMITER = /:(.+)/;
540
+
541
+ function parseStyleText(cssText) {
542
+ const styleMap = {};
543
+ const declarations = cssText.split(DECLARATION_DELIMITER);
544
+
545
+ for (const declaration of declarations) {
546
+ if (declaration) {
547
+ const [prop, value] = declaration.split(PROPERTY_DELIMITER);
548
+
549
+ if (prop !== undefined && value !== undefined) {
550
+ styleMap[prop.trim()] = value.trim();
551
+ }
552
+ }
553
+ }
554
+
555
+ return styleMap;
534
556
  }
535
557
  /*
536
558
  * Copyright (c) 2019, salesforce.com, inc.
@@ -712,8 +734,8 @@ function getErrorComponentStack(vm) {
712
734
  */
713
735
 
714
736
 
715
- function logError(message, vm) {
716
- let msg = `[LWC error]: ${message}`;
737
+ function log(method, message, vm) {
738
+ let msg = `[LWC ${method}]: ${message}`;
717
739
 
718
740
  if (!isUndefined$1(vm)) {
719
741
  msg = `${msg}\n${getComponentStack(vm)}`;
@@ -721,7 +743,7 @@ function logError(message, vm) {
721
743
 
722
744
  if (process.env.NODE_ENV === 'test') {
723
745
  /* eslint-disable-next-line no-console */
724
- console.error(msg);
746
+ console[method](msg);
725
747
  return;
726
748
  }
727
749
 
@@ -729,9 +751,17 @@ function logError(message, vm) {
729
751
  throw new Error(msg);
730
752
  } catch (e) {
731
753
  /* eslint-disable-next-line no-console */
732
- console.error(e);
754
+ console[method](e);
733
755
  }
734
756
  }
757
+
758
+ function logError(message, vm) {
759
+ log('error', message, vm);
760
+ }
761
+
762
+ function logWarn(message, vm) {
763
+ log('warn', message, vm);
764
+ }
735
765
  /*
736
766
  * Copyright (c) 2018, salesforce.com, inc.
737
767
  * All rights reserved.
@@ -4591,6 +4621,17 @@ function createElmHook(vnode) {
4591
4621
  modComputedStyle.create(vnode);
4592
4622
  }
4593
4623
 
4624
+ function hydrateElmHook(vnode) {
4625
+ modEvents.create(vnode); // Attrs are already on the element.
4626
+ // modAttrs.create(vnode);
4627
+
4628
+ modProps.create(vnode); // Already set.
4629
+ // modStaticClassName.create(vnode);
4630
+ // modStaticStyle.create(vnode);
4631
+ // modComputedClassName.create(vnode);
4632
+ // modComputedStyle.create(vnode);
4633
+ }
4634
+
4594
4635
  function fallbackElmHook(elm, vnode) {
4595
4636
  const {
4596
4637
  owner
@@ -4762,6 +4803,179 @@ function createChildrenHook(vnode) {
4762
4803
  }
4763
4804
  }
4764
4805
 
4806
+ function isElementNode(node) {
4807
+ // eslint-disable-next-line lwc-internal/no-global-node
4808
+ return node.nodeType === Node.ELEMENT_NODE;
4809
+ }
4810
+
4811
+ function vnodesAndElementHaveCompatibleAttrs(vnode, elm) {
4812
+ const {
4813
+ data: {
4814
+ attrs = {}
4815
+ },
4816
+ owner: {
4817
+ renderer
4818
+ }
4819
+ } = vnode;
4820
+ let nodesAreCompatible = true; // Validate attributes, though we could always recovery from those by running the update mods.
4821
+ // Note: intentionally ONLY matching vnodes.attrs to elm.attrs, in case SSR is adding extra attributes.
4822
+
4823
+ for (const [attrName, attrValue] of Object.entries(attrs)) {
4824
+ const elmAttrValue = renderer.getAttribute(elm, attrName);
4825
+
4826
+ if (attrValue !== elmAttrValue) {
4827
+ logError(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found "${elmAttrValue}"`, vnode.owner);
4828
+ nodesAreCompatible = false;
4829
+ }
4830
+ }
4831
+
4832
+ return nodesAreCompatible;
4833
+ }
4834
+
4835
+ function vnodesAndElementHaveCompatibleClass(vnode, elm) {
4836
+ const {
4837
+ data: {
4838
+ className,
4839
+ classMap
4840
+ },
4841
+ owner: {
4842
+ renderer
4843
+ }
4844
+ } = vnode;
4845
+ let nodesAreCompatible = true;
4846
+ let vnodeClassName;
4847
+
4848
+ if (!isUndefined$1(className) && className !== elm.className) {
4849
+ // className is used when class is bound to an expr.
4850
+ nodesAreCompatible = false;
4851
+ vnodeClassName = className;
4852
+ } else if (!isUndefined$1(classMap)) {
4853
+ // classMap is used when class is set to static value.
4854
+ const classList = renderer.getClassList(elm);
4855
+ let computedClassName = ''; // all classes from the vnode should be in the element.classList
4856
+
4857
+ for (const name in classMap) {
4858
+ computedClassName += ' ' + name;
4859
+
4860
+ if (!classList.contains(name)) {
4861
+ nodesAreCompatible = false;
4862
+ }
4863
+ }
4864
+
4865
+ vnodeClassName = computedClassName.trim();
4866
+
4867
+ if (classList.length > keys(classMap).length) {
4868
+ nodesAreCompatible = false;
4869
+ }
4870
+ }
4871
+
4872
+ if (!nodesAreCompatible) {
4873
+ logError(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: attribute "class" has different values, expected "${vnodeClassName}" but found "${elm.className}"`, vnode.owner);
4874
+ }
4875
+
4876
+ return nodesAreCompatible;
4877
+ }
4878
+
4879
+ function vnodesAndElementHaveCompatibleStyle(vnode, elm) {
4880
+ const {
4881
+ data: {
4882
+ style,
4883
+ styleDecls
4884
+ },
4885
+ owner: {
4886
+ renderer
4887
+ }
4888
+ } = vnode;
4889
+ const elmStyle = renderer.getAttribute(elm, 'style') || '';
4890
+ let vnodeStyle;
4891
+ let nodesAreCompatible = true;
4892
+
4893
+ if (!isUndefined$1(style) && style !== elmStyle) {
4894
+ nodesAreCompatible = false;
4895
+ vnodeStyle = style;
4896
+ } else if (!isUndefined$1(styleDecls)) {
4897
+ const parsedVnodeStyle = parseStyleText(elmStyle);
4898
+ const expectedStyle = []; // styleMap is used when style is set to static value.
4899
+
4900
+ for (let i = 0, n = styleDecls.length; i < n; i++) {
4901
+ const [prop, value, important] = styleDecls[i];
4902
+ expectedStyle.push(`${prop}: ${value + (important ? ' important!' : '')}`);
4903
+ const parsedPropValue = parsedVnodeStyle[prop];
4904
+
4905
+ if (isUndefined$1(parsedPropValue)) {
4906
+ nodesAreCompatible = false;
4907
+ } else if (!parsedPropValue.startsWith(value)) {
4908
+ nodesAreCompatible = false;
4909
+ } else if (important && !parsedPropValue.endsWith('!important')) {
4910
+ nodesAreCompatible = false;
4911
+ }
4912
+ }
4913
+
4914
+ if (keys(parsedVnodeStyle).length > styleDecls.length) {
4915
+ nodesAreCompatible = false;
4916
+ }
4917
+
4918
+ vnodeStyle = ArrayJoin.call(expectedStyle, ';');
4919
+ }
4920
+
4921
+ if (!nodesAreCompatible) {
4922
+ // style is used when class is bound to an expr.
4923
+ logError(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: attribute "style" has different values, expected "${vnodeStyle}" but found "${elmStyle}".`, vnode.owner);
4924
+ }
4925
+
4926
+ return nodesAreCompatible;
4927
+ }
4928
+
4929
+ function throwHydrationError() {
4930
+ assert.fail('Server rendered elements do not match client side generated elements');
4931
+ }
4932
+
4933
+ function hydrateChildrenHook(elmChildren, children, vm) {
4934
+ var _a, _b;
4935
+
4936
+ if (process.env.NODE_ENV !== 'production') {
4937
+ const filteredVNodes = ArrayFilter.call(children, vnode => !!vnode);
4938
+
4939
+ if (elmChildren.length !== filteredVNodes.length) {
4940
+ logError(`Hydration mismatch: incorrect number of rendered nodes, expected ${filteredVNodes.length} but found ${elmChildren.length}.`, vm);
4941
+ throwHydrationError();
4942
+ }
4943
+ }
4944
+
4945
+ let elmCurrentChildIdx = 0;
4946
+
4947
+ for (let j = 0, n = children.length; j < n; j++) {
4948
+ const ch = children[j];
4949
+
4950
+ if (ch != null) {
4951
+ const childNode = elmChildren[elmCurrentChildIdx];
4952
+
4953
+ if (process.env.NODE_ENV !== 'production') {
4954
+ // VComments and VTexts validation is handled in their hooks
4955
+ if (isElementNode(childNode)) {
4956
+ if (((_a = ch.sel) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== childNode.tagName.toLowerCase()) {
4957
+ logError(`Hydration mismatch: expecting element with tag "${(_b = ch.sel) === null || _b === void 0 ? void 0 : _b.toLowerCase()}" but found "${childNode.tagName.toLowerCase()}".`, vm);
4958
+ throwHydrationError();
4959
+ } // Note: props are not yet set
4960
+
4961
+
4962
+ const hasIncompatibleAttrs = vnodesAndElementHaveCompatibleAttrs(ch, childNode);
4963
+ const hasIncompatibleClass = vnodesAndElementHaveCompatibleClass(ch, childNode);
4964
+ const hasIncompatibleStyle = vnodesAndElementHaveCompatibleStyle(ch, childNode);
4965
+ const isVNodeAndElementCompatible = hasIncompatibleAttrs && hasIncompatibleClass && hasIncompatibleStyle;
4966
+
4967
+ if (!isVNodeAndElementCompatible) {
4968
+ throwHydrationError();
4969
+ }
4970
+ }
4971
+ }
4972
+
4973
+ ch.hook.hydrate(ch, childNode);
4974
+ elmCurrentChildIdx++;
4975
+ }
4976
+ }
4977
+ }
4978
+
4765
4979
  function updateCustomElmHook(oldVnode, vnode) {
4766
4980
  // Attrs need to be applied to element before props
4767
4981
  // IE11 will wipe out value on radio inputs if value
@@ -4863,7 +5077,26 @@ const TextHook = {
4863
5077
  update: updateNodeHook,
4864
5078
  insert: insertNodeHook,
4865
5079
  move: insertNodeHook,
4866
- remove: removeNodeHook
5080
+ remove: removeNodeHook,
5081
+ hydrate: (vNode, node) => {
5082
+ var _a;
5083
+
5084
+ if (process.env.NODE_ENV !== 'production') {
5085
+ // eslint-disable-next-line lwc-internal/no-global-node
5086
+ if (node.nodeType !== Node.TEXT_NODE) {
5087
+ logError('Hydration mismatch: incorrect node type received', vNode.owner);
5088
+ assert.fail('Hydration mismatch: incorrect node type received.');
5089
+ }
5090
+
5091
+ if (node.nodeValue !== vNode.text) {
5092
+ logWarn('Hydration mismatch: text values do not match, will recover from the difference', vNode.owner);
5093
+ }
5094
+ } // always set the text value to the one from the vnode.
5095
+
5096
+
5097
+ node.nodeValue = (_a = vNode.text) !== null && _a !== void 0 ? _a : null;
5098
+ vNode.elm = node;
5099
+ }
4867
5100
  };
4868
5101
  const CommentHook = {
4869
5102
  create: vnode => {
@@ -4881,7 +5114,26 @@ const CommentHook = {
4881
5114
  update: updateNodeHook,
4882
5115
  insert: insertNodeHook,
4883
5116
  move: insertNodeHook,
4884
- remove: removeNodeHook
5117
+ remove: removeNodeHook,
5118
+ hydrate: (vNode, node) => {
5119
+ var _a;
5120
+
5121
+ if (process.env.NODE_ENV !== 'production') {
5122
+ // eslint-disable-next-line lwc-internal/no-global-node
5123
+ if (node.nodeType !== Node.COMMENT_NODE) {
5124
+ logError('Hydration mismatch: incorrect node type received', vNode.owner);
5125
+ assert.fail('Hydration mismatch: incorrect node type received.');
5126
+ }
5127
+
5128
+ if (node.nodeValue !== vNode.text) {
5129
+ logWarn('Hydration mismatch: comment values do not match, will recover from the difference', vNode.owner);
5130
+ }
5131
+ } // always set the text value to the one from the vnode.
5132
+
5133
+
5134
+ node.nodeValue = (_a = vNode.text) !== null && _a !== void 0 ? _a : null;
5135
+ vNode.elm = node;
5136
+ }
4885
5137
  }; // insert is called after update, which is used somewhere else (via a module)
4886
5138
  // to mark the vm as inserted, that means we cannot use update as the main channel
4887
5139
  // to rehydrate when dirty, because sometimes the element is not inserted just yet,
@@ -4921,6 +5173,38 @@ const ElementHook = {
4921
5173
  remove: (vnode, parentNode) => {
4922
5174
  removeNodeHook(vnode, parentNode);
4923
5175
  removeElmHook(vnode);
5176
+ },
5177
+ hydrate: (vnode, node) => {
5178
+ const elm = node;
5179
+ vnode.elm = elm;
5180
+ const {
5181
+ context
5182
+ } = vnode.data;
5183
+ const isDomManual = Boolean(!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual"
5184
+ /* manual */
5185
+ );
5186
+
5187
+ if (isDomManual) {
5188
+ // it may be that this element has lwc:inner-html, we need to diff and in case are the same,
5189
+ // remove the innerHTML from props so it reuses the existing dom elements.
5190
+ const {
5191
+ props
5192
+ } = vnode.data;
5193
+
5194
+ if (!isUndefined$1(props) && !isUndefined$1(props.innerHTML)) {
5195
+ if (elm.innerHTML === props.innerHTML) {
5196
+ delete props.innerHTML;
5197
+ } else {
5198
+ logWarn(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: innerHTML values do not match for element, will recover from the difference`, vnode.owner);
5199
+ }
5200
+ }
5201
+ }
5202
+
5203
+ hydrateElmHook(vnode);
5204
+
5205
+ if (!isDomManual) {
5206
+ hydrateChildrenHook(vnode.elm.childNodes, vnode.children, vnode.owner);
5207
+ }
4924
5208
  }
4925
5209
  };
4926
5210
  const CustomElementHook = {
@@ -5012,6 +5296,44 @@ const CustomElementHook = {
5012
5296
  // will take care of disconnecting any child VM attached to its shadow as well.
5013
5297
  removeVM(vm);
5014
5298
  }
5299
+ },
5300
+ hydrate: (vnode, elm) => {
5301
+ // the element is created, but the vm is not
5302
+ const {
5303
+ sel,
5304
+ mode,
5305
+ ctor,
5306
+ owner
5307
+ } = vnode;
5308
+ const def = getComponentInternalDef(ctor);
5309
+ createVM(elm, def, {
5310
+ mode,
5311
+ owner,
5312
+ tagName: sel,
5313
+ renderer: owner.renderer
5314
+ });
5315
+ vnode.elm = elm;
5316
+ const vm = getAssociatedVM(elm);
5317
+ allocateChildrenHook(vnode, vm);
5318
+ hydrateElmHook(vnode); // Insert hook section:
5319
+
5320
+ if (process.env.NODE_ENV !== 'production') {
5321
+ assert.isTrue(vm.state === 0
5322
+ /* created */
5323
+ , `${vm} cannot be recycled.`);
5324
+ }
5325
+
5326
+ runConnectedCallback(vm);
5327
+
5328
+ if (vm.renderMode !== 0
5329
+ /* Light */
5330
+ ) {
5331
+ // VM is not rendering in Light DOM, we can proceed and hydrate the slotted content.
5332
+ // Note: for Light DOM, this is handled while hydrating the VM
5333
+ hydrateChildrenHook(vnode.elm.childNodes, vnode.children, vm);
5334
+ }
5335
+
5336
+ hydrateVM(vm);
5015
5337
  }
5016
5338
  };
5017
5339
 
@@ -5700,7 +6022,10 @@ function createStylesheet(vm, stylesheets) {
5700
6022
  for (let i = 0; i < stylesheets.length; i++) {
5701
6023
  renderer.insertGlobalStylesheet(stylesheets[i]);
5702
6024
  }
5703
- } else if (renderer.ssr) {
6025
+ } else if (renderer.ssr || renderer.isHydrating) {
6026
+ // Note: We need to ensure that during hydration, the stylesheets method is the same as those in ssr.
6027
+ // This works in the client, because the stylesheets are created, and cached in the VM
6028
+ // the first time the VM renders.
5704
6029
  // native shadow or light DOM, SSR
5705
6030
  const combinedStylesheetContent = ArrayJoin.call(stylesheets, '\n');
5706
6031
  return createInlineStyleVNode(combinedStylesheetContent);
@@ -6325,6 +6650,12 @@ function connectRootElement(elm) {
6325
6650
  , vm);
6326
6651
  }
6327
6652
 
6653
+ function hydrateRootElement(elm) {
6654
+ const vm = getAssociatedVM(elm);
6655
+ runConnectedCallback(vm);
6656
+ hydrateVM(vm);
6657
+ }
6658
+
6328
6659
  function disconnectRootElement(elm) {
6329
6660
  const vm = getAssociatedVM(elm);
6330
6661
  resetComponentStateWhenRemoved(vm);
@@ -6332,6 +6663,10 @@ function disconnectRootElement(elm) {
6332
6663
 
6333
6664
  function appendVM(vm) {
6334
6665
  rehydrate(vm);
6666
+ }
6667
+
6668
+ function hydrateVM(vm) {
6669
+ hydrate(vm);
6335
6670
  } // just in case the component comes back, with this we guarantee re-rendering it
6336
6671
  // while preventing any attempt to rehydration until after reinsertion.
6337
6672
 
@@ -6565,6 +6900,22 @@ function rehydrate(vm) {
6565
6900
  }
6566
6901
  }
6567
6902
 
6903
+ function hydrate(vm) {
6904
+ if (isTrue(vm.isDirty)) {
6905
+ // manually diffing/patching here.
6906
+ // This routine is:
6907
+ // patchShadowRoot(vm, children);
6908
+ // -> addVnodes.
6909
+ const children = renderComponent(vm);
6910
+ vm.children = children;
6911
+ const vmChildren = vm.renderMode === 0
6912
+ /* Light */
6913
+ ? vm.elm.childNodes : vm.elm.shadowRoot.childNodes;
6914
+ hydrateChildrenHook(vmChildren, children, vm);
6915
+ runRenderedCallback(vm);
6916
+ }
6917
+ }
6918
+
6568
6919
  function patchShadowRoot(vm, newCh) {
6569
6920
  const {
6570
6921
  children: oldCh
@@ -7396,7 +7747,7 @@ function setHooks(hooks) {
7396
7747
  hooksAreSet = true;
7397
7748
  setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
7398
7749
  }
7399
- /* version: 2.5.7 */
7750
+ /* version: 2.5.8 */
7400
7751
 
7401
7752
  /*
7402
7753
  * Copyright (c) 2018, salesforce.com, inc.
@@ -7540,8 +7891,19 @@ if (isCustomElementRegistryAvailable()) {
7540
7891
  HTMLElementConstructor.prototype = HTMLElement.prototype;
7541
7892
  }
7542
7893
 
7894
+ let isHydrating = false;
7895
+
7896
+ function setIsHydrating(v) {
7897
+ isHydrating = v;
7898
+ }
7899
+
7543
7900
  const renderer = {
7544
7901
  ssr: false,
7902
+
7903
+ get isHydrating() {
7904
+ return isHydrating;
7905
+ },
7906
+
7545
7907
  isNativeShadowDefined: _globalThis[KEY__IS_NATIVE_SHADOW_ROOT_DEFINED],
7546
7908
  isSyntheticShadowDefined: hasOwnProperty$1.call(Element.prototype, KEY__SHADOW_TOKEN),
7547
7909
 
@@ -7570,6 +7932,10 @@ const renderer = {
7570
7932
  },
7571
7933
 
7572
7934
  attachShadow(element, options) {
7935
+ if (isHydrating) {
7936
+ return element.shadowRoot;
7937
+ }
7938
+
7573
7939
  return element.attachShadow(options);
7574
7940
  },
7575
7941
 
@@ -7707,61 +8073,6 @@ const renderer = {
7707
8073
  getCustomElement,
7708
8074
  HTMLElement: HTMLElementConstructor
7709
8075
  };
7710
- /*
7711
- * Copyright (c) 2018, salesforce.com, inc.
7712
- * All rights reserved.
7713
- * SPDX-License-Identifier: MIT
7714
- * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
7715
- */
7716
-
7717
- /**
7718
- * This function builds a Web Component class from a LWC constructor so it can be
7719
- * registered as a new element via customElements.define() at any given time.
7720
- *
7721
- * @deprecated since version 1.3.11
7722
- *
7723
- * @example
7724
- * ```
7725
- * import { buildCustomElementConstructor } from 'lwc';
7726
- * import Foo from 'ns/foo';
7727
- * const WC = buildCustomElementConstructor(Foo);
7728
- * customElements.define('x-foo', WC);
7729
- * const elm = document.createElement('x-foo');
7730
- * ```
7731
- */
7732
-
7733
- function deprecatedBuildCustomElementConstructor(Ctor) {
7734
- if (process.env.NODE_ENV !== 'production') {
7735
- /* eslint-disable-next-line no-console */
7736
- console.warn('Deprecated function called: "buildCustomElementConstructor" function is deprecated and it will be removed.' + `Use "${Ctor.name}.CustomElementConstructor" static property of the component constructor to access the corresponding custom element constructor instead.`);
7737
- }
7738
-
7739
- return Ctor.CustomElementConstructor;
7740
- }
7741
-
7742
- function buildCustomElementConstructor(Ctor) {
7743
- const def = getComponentInternalDef(Ctor);
7744
- return class extends def.bridge {
7745
- constructor() {
7746
- super();
7747
- createVM(this, def, {
7748
- mode: 'open',
7749
- owner: null,
7750
- tagName: this.tagName,
7751
- renderer
7752
- });
7753
- }
7754
-
7755
- connectedCallback() {
7756
- connectRootElement(this);
7757
- }
7758
-
7759
- disconnectedCallback() {
7760
- disconnectRootElement(this);
7761
- }
7762
-
7763
- };
7764
- }
7765
8076
  /*
7766
8077
  * Copyright (c) 2018, salesforce.com, inc.
7767
8078
  * All rights reserved.
@@ -7771,7 +8082,6 @@ function buildCustomElementConstructor(Ctor) {
7771
8082
  // TODO [#2472]: Remove this workaround when appropriate.
7772
8083
  // eslint-disable-next-line lwc-internal/no-global-node
7773
8084
 
7774
-
7775
8085
  const _Node$1 = Node;
7776
8086
  const ConnectingSlot = new WeakMap();
7777
8087
  const DisconnectingSlot = new WeakMap();
@@ -7882,6 +8192,118 @@ function createElement(sel, options) {
7882
8192
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
7883
8193
  */
7884
8194
 
8195
+
8196
+ function hydrateComponent(element, Ctor, props = {}) {
8197
+ if (!isFunction$1(Ctor)) {
8198
+ throw new TypeError(`"hydrateComponent" expects a valid component constructor as the second parameter but instead received ${Ctor}.`);
8199
+ }
8200
+
8201
+ if (!isObject(props) || isNull(props)) {
8202
+ throw new TypeError(`"hydrateComponent" expects an object as the third parameter but instead received ${props}.`);
8203
+ }
8204
+
8205
+ const def = getComponentInternalDef(Ctor);
8206
+
8207
+ try {
8208
+ // Let the renderer know we are hydrating, so it does not replace the existing shadowRoot
8209
+ // and uses the same algo to create the stylesheets as in SSR.
8210
+ setIsHydrating(true);
8211
+ createVM(element, def, {
8212
+ mode: 'open',
8213
+ owner: null,
8214
+ renderer,
8215
+ tagName: element.tagName.toLowerCase()
8216
+ });
8217
+
8218
+ for (const [key, value] of Object.entries(props)) {
8219
+ element[key] = value;
8220
+ }
8221
+
8222
+ hydrateRootElement(element); // set it back since now we finished hydration.
8223
+
8224
+ setIsHydrating(false);
8225
+ } catch (e) {
8226
+ // Fallback: In case there's an error while hydrating, let's log the error, and replace the element with
8227
+ // the client generated DOM.
8228
+
8229
+ /* eslint-disable-next-line no-console */
8230
+ console.error('Recovering from error while hydrating: ', e);
8231
+ setIsHydrating(false);
8232
+ const newElem = createElement(element.tagName, {
8233
+ is: Ctor,
8234
+ mode: 'open'
8235
+ });
8236
+
8237
+ for (const [key, value] of Object.entries(props)) {
8238
+ newElem[key] = value;
8239
+ }
8240
+
8241
+ element.parentNode.replaceChild(newElem, element);
8242
+ }
8243
+ }
8244
+ /*
8245
+ * Copyright (c) 2018, salesforce.com, inc.
8246
+ * All rights reserved.
8247
+ * SPDX-License-Identifier: MIT
8248
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
8249
+ */
8250
+
8251
+ /**
8252
+ * This function builds a Web Component class from a LWC constructor so it can be
8253
+ * registered as a new element via customElements.define() at any given time.
8254
+ *
8255
+ * @deprecated since version 1.3.11
8256
+ *
8257
+ * @example
8258
+ * ```
8259
+ * import { buildCustomElementConstructor } from 'lwc';
8260
+ * import Foo from 'ns/foo';
8261
+ * const WC = buildCustomElementConstructor(Foo);
8262
+ * customElements.define('x-foo', WC);
8263
+ * const elm = document.createElement('x-foo');
8264
+ * ```
8265
+ */
8266
+
8267
+
8268
+ function deprecatedBuildCustomElementConstructor(Ctor) {
8269
+ if (process.env.NODE_ENV !== 'production') {
8270
+ /* eslint-disable-next-line no-console */
8271
+ console.warn('Deprecated function called: "buildCustomElementConstructor" function is deprecated and it will be removed.' + `Use "${Ctor.name}.CustomElementConstructor" static property of the component constructor to access the corresponding custom element constructor instead.`);
8272
+ }
8273
+
8274
+ return Ctor.CustomElementConstructor;
8275
+ }
8276
+
8277
+ function buildCustomElementConstructor(Ctor) {
8278
+ const def = getComponentInternalDef(Ctor);
8279
+ return class extends def.bridge {
8280
+ constructor() {
8281
+ super();
8282
+ createVM(this, def, {
8283
+ mode: 'open',
8284
+ owner: null,
8285
+ tagName: this.tagName,
8286
+ renderer
8287
+ });
8288
+ }
8289
+
8290
+ connectedCallback() {
8291
+ connectRootElement(this);
8292
+ }
8293
+
8294
+ disconnectedCallback() {
8295
+ disconnectRootElement(this);
8296
+ }
8297
+
8298
+ };
8299
+ }
8300
+ /*
8301
+ * Copyright (c) 2018, salesforce.com, inc.
8302
+ * All rights reserved.
8303
+ * SPDX-License-Identifier: MIT
8304
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
8305
+ */
8306
+
7885
8307
  /**
7886
8308
  * EXPERIMENTAL: This function provides access to the component constructor, given an HTMLElement.
7887
8309
  * This API is subject to change or being removed.
@@ -7981,6 +8403,6 @@ defineProperty(LightningElement, 'CustomElementConstructor', {
7981
8403
  });
7982
8404
  freeze(LightningElement);
7983
8405
  seal(LightningElement.prototype);
7984
- /* version: 2.5.7 */
8406
+ /* version: 2.5.8 */
7985
8407
 
7986
- export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, deprecatedBuildCustomElementConstructor as buildCustomElementConstructor, createContextProvider, createElement, getComponentConstructor, getComponentDef, isComponentConstructor, isNodeFromTemplate, readonly, register, registerComponent, registerDecorators, registerTemplate, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
8408
+ export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, deprecatedBuildCustomElementConstructor as buildCustomElementConstructor, createContextProvider, createElement, getComponentConstructor, getComponentDef, hydrateComponent, isComponentConstructor, isNodeFromTemplate, readonly, register, registerComponent, registerDecorators, registerTemplate, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };