lwc 2.5.6 → 2.5.10-alpha1

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 (54) hide show
  1. package/dist/engine/esm/es2017/engine.js +7981 -0
  2. package/dist/engine/iife/es2017/engine.js +8013 -0
  3. package/dist/engine/iife/es2017/engine.min.js +9 -0
  4. package/dist/engine/iife/es2017/engine_debug.js +6541 -0
  5. package/dist/engine/iife/es5/engine.js +6060 -0
  6. package/dist/engine/iife/es5/engine.min.js +23 -0
  7. package/dist/engine/iife/es5/engine_debug.js +4856 -0
  8. package/dist/engine/umd/es2017/engine.js +8014 -0
  9. package/dist/engine/umd/es2017/engine.min.js +9 -0
  10. package/dist/engine/umd/es2017/engine_debug.js +6542 -0
  11. package/dist/engine/umd/es5/engine.js +6061 -0
  12. package/dist/engine/umd/es5/engine.min.js +23 -0
  13. package/dist/engine/umd/es5/engine_debug.js +4857 -0
  14. package/dist/engine-dom/esm/es2017/engine-dom.js +521 -122
  15. package/dist/engine-dom/iife/es2017/engine-dom.js +522 -123
  16. package/dist/engine-dom/iife/es2017/engine-dom.min.js +2 -2
  17. package/dist/engine-dom/iife/es2017/engine-dom_debug.js +337 -112
  18. package/dist/engine-dom/iife/es5/engine-dom.js +596 -185
  19. package/dist/engine-dom/iife/es5/engine-dom.min.js +2 -2
  20. package/dist/engine-dom/iife/es5/engine-dom_debug.js +392 -165
  21. package/dist/engine-dom/umd/es2017/engine-dom.js +523 -124
  22. package/dist/engine-dom/umd/es2017/engine-dom.min.js +2 -2
  23. package/dist/engine-dom/umd/es2017/engine-dom_debug.js +338 -113
  24. package/dist/engine-dom/umd/es5/engine-dom.js +597 -186
  25. package/dist/engine-dom/umd/es5/engine-dom.min.js +2 -2
  26. package/dist/engine-dom/umd/es5/engine-dom_debug.js +393 -166
  27. package/dist/engine-server/commonjs/es2017/engine-server.js +400 -74
  28. package/dist/engine-server/commonjs/es2017/engine-server.min.js +2 -2
  29. package/dist/engine-server/esm/es2017/engine-server.js +401 -74
  30. package/dist/synthetic-shadow/esm/es2017/synthetic-shadow.js +3 -3
  31. package/dist/synthetic-shadow/iife/es2017/synthetic-shadow.js +4 -4
  32. package/dist/synthetic-shadow/iife/es2017/synthetic-shadow.min.js +2 -2
  33. package/dist/synthetic-shadow/iife/es2017/synthetic-shadow_debug.js +4 -4
  34. package/dist/synthetic-shadow/iife/es5/synthetic-shadow.js +4 -4
  35. package/dist/synthetic-shadow/iife/es5/synthetic-shadow.min.js +2 -2
  36. package/dist/synthetic-shadow/iife/es5/synthetic-shadow_debug.js +4 -4
  37. package/dist/synthetic-shadow/umd/es2017/synthetic-shadow.js +5 -5
  38. package/dist/synthetic-shadow/umd/es2017/synthetic-shadow.min.js +2 -2
  39. package/dist/synthetic-shadow/umd/es2017/synthetic-shadow_debug.js +5 -5
  40. package/dist/synthetic-shadow/umd/es5/synthetic-shadow.js +5 -5
  41. package/dist/synthetic-shadow/umd/es5/synthetic-shadow.min.js +2 -2
  42. package/dist/synthetic-shadow/umd/es5/synthetic-shadow_debug.js +5 -5
  43. package/dist/wire-service/esm/es2017/wire-service.js +2 -2
  44. package/dist/wire-service/iife/es2017/wire-service.js +3 -3
  45. package/dist/wire-service/iife/es2017/wire-service_debug.js +3 -3
  46. package/dist/wire-service/iife/es5/wire-service.js +3 -3
  47. package/dist/wire-service/iife/es5/wire-service.min.js +1 -1
  48. package/dist/wire-service/iife/es5/wire-service_debug.js +3 -3
  49. package/dist/wire-service/umd/es2017/wire-service.js +4 -4
  50. package/dist/wire-service/umd/es2017/wire-service_debug.js +4 -4
  51. package/dist/wire-service/umd/es5/wire-service.js +4 -4
  52. package/dist/wire-service/umd/es5/wire-service.min.js +1 -1
  53. package/dist/wire-service/umd/es5/wire-service_debug.js +4 -4
  54. package/package.json +8 -8
@@ -302,7 +302,7 @@ var LWC = (function (exports) {
302
302
  CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
303
303
  return attributeName;
304
304
  }
305
- /** version: 2.5.6 */
305
+ /** version: 2.5.10-alpha1 */
306
306
 
307
307
  /*
308
308
  * Copyright (c) 2018, salesforce.com, inc.
@@ -482,7 +482,7 @@ var LWC = (function (exports) {
482
482
  setFeatureFlag(name, value);
483
483
  }
484
484
  }
485
- /** version: 2.5.6 */
485
+ /** version: 2.5.10-alpha1 */
486
486
 
487
487
  /* proxy-compat-disable */
488
488
 
@@ -534,6 +534,28 @@ var LWC = (function (exports) {
534
534
  }
535
535
 
536
536
  return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
537
+ } // Borrowed from Vue template compiler.
538
+ // https://github.com/vuejs/vue/blob/531371b818b0e31a989a06df43789728f23dc4e8/src/platforms/web/util/style.js#L5-L16
539
+
540
+
541
+ const DECLARATION_DELIMITER = /;(?![^(]*\))/g;
542
+ const PROPERTY_DELIMITER = /:(.+)/;
543
+
544
+ function parseStyleText(cssText) {
545
+ const styleMap = {};
546
+ const declarations = cssText.split(DECLARATION_DELIMITER);
547
+
548
+ for (const declaration of declarations) {
549
+ if (declaration) {
550
+ const [prop, value] = declaration.split(PROPERTY_DELIMITER);
551
+
552
+ if (prop !== undefined && value !== undefined) {
553
+ styleMap[prop.trim()] = value.trim();
554
+ }
555
+ }
556
+ }
557
+
558
+ return styleMap;
537
559
  }
538
560
  /*
539
561
  * Copyright (c) 2019, salesforce.com, inc.
@@ -715,8 +737,8 @@ var LWC = (function (exports) {
715
737
  */
716
738
 
717
739
 
718
- function logError(message, vm) {
719
- let msg = `[LWC error]: ${message}`;
740
+ function log(method, message, vm) {
741
+ let msg = `[LWC ${method}]: ${message}`;
720
742
 
721
743
  if (!isUndefined$1(vm)) {
722
744
  msg = `${msg}\n${getComponentStack(vm)}`;
@@ -724,7 +746,7 @@ var LWC = (function (exports) {
724
746
 
725
747
  if (process.env.NODE_ENV === 'test') {
726
748
  /* eslint-disable-next-line no-console */
727
- console.error(msg);
749
+ console[method](msg);
728
750
  return;
729
751
  }
730
752
 
@@ -732,9 +754,17 @@ var LWC = (function (exports) {
732
754
  throw new Error(msg);
733
755
  } catch (e) {
734
756
  /* eslint-disable-next-line no-console */
735
- console.error(e);
757
+ console[method](e);
736
758
  }
737
759
  }
760
+
761
+ function logError(message, vm) {
762
+ log('error', message, vm);
763
+ }
764
+
765
+ function logWarn(message, vm) {
766
+ log('warn', message, vm);
767
+ }
738
768
  /*
739
769
  * Copyright (c) 2018, salesforce.com, inc.
740
770
  * All rights reserved.
@@ -3098,8 +3128,10 @@ var LWC = (function (exports) {
3098
3128
  }
3099
3129
 
3100
3130
  return renderer[rendererMethod](elm);
3101
- }
3131
+ },
3102
3132
 
3133
+ configurable: true,
3134
+ enumerable: true
3103
3135
  };
3104
3136
  }
3105
3137
 
@@ -3119,8 +3151,11 @@ var LWC = (function (exports) {
3119
3151
  }
3120
3152
 
3121
3153
  return renderer[queryMethod](elm, arg);
3122
- }
3154
+ },
3123
3155
 
3156
+ configurable: true,
3157
+ enumerable: true,
3158
+ writable: true
3124
3159
  };
3125
3160
  }
3126
3161
 
@@ -4278,7 +4313,7 @@ var LWC = (function (exports) {
4278
4313
  if (!isUndefined$1(ctorShadowSupportMode)) {
4279
4314
  assert.invariant(ctorShadowSupportMode === "any"
4280
4315
  /* Any */
4281
- || ctorShadowSupportMode === "default"
4316
+ || ctorShadowSupportMode === "reset"
4282
4317
  /* Default */
4283
4318
  , `Invalid value for static property shadowSupportMode: '${ctorShadowSupportMode}'`);
4284
4319
  }
@@ -4440,7 +4475,7 @@ var LWC = (function (exports) {
4440
4475
  renderMode: 1
4441
4476
  /* Shadow */
4442
4477
  ,
4443
- shadowSupportMode: "default"
4478
+ shadowSupportMode: "reset"
4444
4479
  /* Default */
4445
4480
  ,
4446
4481
  wire: EmptyObject,
@@ -4589,6 +4624,17 @@ var LWC = (function (exports) {
4589
4624
  modComputedStyle.create(vnode);
4590
4625
  }
4591
4626
 
4627
+ function hydrateElmHook(vnode) {
4628
+ modEvents.create(vnode); // Attrs are already on the element.
4629
+ // modAttrs.create(vnode);
4630
+
4631
+ modProps.create(vnode); // Already set.
4632
+ // modStaticClassName.create(vnode);
4633
+ // modStaticStyle.create(vnode);
4634
+ // modComputedClassName.create(vnode);
4635
+ // modComputedStyle.create(vnode);
4636
+ }
4637
+
4592
4638
  function fallbackElmHook(elm, vnode) {
4593
4639
  const {
4594
4640
  owner
@@ -4760,6 +4806,179 @@ var LWC = (function (exports) {
4760
4806
  }
4761
4807
  }
4762
4808
 
4809
+ function isElementNode(node) {
4810
+ // eslint-disable-next-line lwc-internal/no-global-node
4811
+ return node.nodeType === Node.ELEMENT_NODE;
4812
+ }
4813
+
4814
+ function vnodesAndElementHaveCompatibleAttrs(vnode, elm) {
4815
+ const {
4816
+ data: {
4817
+ attrs = {}
4818
+ },
4819
+ owner: {
4820
+ renderer
4821
+ }
4822
+ } = vnode;
4823
+ let nodesAreCompatible = true; // Validate attributes, though we could always recovery from those by running the update mods.
4824
+ // Note: intentionally ONLY matching vnodes.attrs to elm.attrs, in case SSR is adding extra attributes.
4825
+
4826
+ for (const [attrName, attrValue] of Object.entries(attrs)) {
4827
+ const elmAttrValue = renderer.getAttribute(elm, attrName);
4828
+
4829
+ if (String(attrValue) !== elmAttrValue) {
4830
+ logError(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found "${elmAttrValue}"`, vnode.owner);
4831
+ nodesAreCompatible = false;
4832
+ }
4833
+ }
4834
+
4835
+ return nodesAreCompatible;
4836
+ }
4837
+
4838
+ function vnodesAndElementHaveCompatibleClass(vnode, elm) {
4839
+ const {
4840
+ data: {
4841
+ className,
4842
+ classMap
4843
+ },
4844
+ owner: {
4845
+ renderer
4846
+ }
4847
+ } = vnode;
4848
+ let nodesAreCompatible = true;
4849
+ let vnodeClassName;
4850
+
4851
+ if (!isUndefined$1(className) && String(className) !== elm.className) {
4852
+ // className is used when class is bound to an expr.
4853
+ nodesAreCompatible = false;
4854
+ vnodeClassName = className;
4855
+ } else if (!isUndefined$1(classMap)) {
4856
+ // classMap is used when class is set to static value.
4857
+ const classList = renderer.getClassList(elm);
4858
+ let computedClassName = ''; // all classes from the vnode should be in the element.classList
4859
+
4860
+ for (const name in classMap) {
4861
+ computedClassName += ' ' + name;
4862
+
4863
+ if (!classList.contains(name)) {
4864
+ nodesAreCompatible = false;
4865
+ }
4866
+ }
4867
+
4868
+ vnodeClassName = computedClassName.trim();
4869
+
4870
+ if (classList.length > keys(classMap).length) {
4871
+ nodesAreCompatible = false;
4872
+ }
4873
+ }
4874
+
4875
+ if (!nodesAreCompatible) {
4876
+ logError(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: attribute "class" has different values, expected "${vnodeClassName}" but found "${elm.className}"`, vnode.owner);
4877
+ }
4878
+
4879
+ return nodesAreCompatible;
4880
+ }
4881
+
4882
+ function vnodesAndElementHaveCompatibleStyle(vnode, elm) {
4883
+ const {
4884
+ data: {
4885
+ style,
4886
+ styleDecls
4887
+ },
4888
+ owner: {
4889
+ renderer
4890
+ }
4891
+ } = vnode;
4892
+ const elmStyle = renderer.getAttribute(elm, 'style') || '';
4893
+ let vnodeStyle;
4894
+ let nodesAreCompatible = true;
4895
+
4896
+ if (!isUndefined$1(style) && style !== elmStyle) {
4897
+ nodesAreCompatible = false;
4898
+ vnodeStyle = style;
4899
+ } else if (!isUndefined$1(styleDecls)) {
4900
+ const parsedVnodeStyle = parseStyleText(elmStyle);
4901
+ const expectedStyle = []; // styleMap is used when style is set to static value.
4902
+
4903
+ for (let i = 0, n = styleDecls.length; i < n; i++) {
4904
+ const [prop, value, important] = styleDecls[i];
4905
+ expectedStyle.push(`${prop}: ${value + (important ? ' important!' : '')}`);
4906
+ const parsedPropValue = parsedVnodeStyle[prop];
4907
+
4908
+ if (isUndefined$1(parsedPropValue)) {
4909
+ nodesAreCompatible = false;
4910
+ } else if (!parsedPropValue.startsWith(value)) {
4911
+ nodesAreCompatible = false;
4912
+ } else if (important && !parsedPropValue.endsWith('!important')) {
4913
+ nodesAreCompatible = false;
4914
+ }
4915
+ }
4916
+
4917
+ if (keys(parsedVnodeStyle).length > styleDecls.length) {
4918
+ nodesAreCompatible = false;
4919
+ }
4920
+
4921
+ vnodeStyle = ArrayJoin.call(expectedStyle, ';');
4922
+ }
4923
+
4924
+ if (!nodesAreCompatible) {
4925
+ // style is used when class is bound to an expr.
4926
+ logError(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: attribute "style" has different values, expected "${vnodeStyle}" but found "${elmStyle}".`, vnode.owner);
4927
+ }
4928
+
4929
+ return nodesAreCompatible;
4930
+ }
4931
+
4932
+ function throwHydrationError() {
4933
+ assert.fail('Server rendered elements do not match client side generated elements');
4934
+ }
4935
+
4936
+ function hydrateChildrenHook(elmChildren, children, vm) {
4937
+ var _a, _b;
4938
+
4939
+ if (process.env.NODE_ENV !== 'production') {
4940
+ const filteredVNodes = ArrayFilter.call(children, vnode => !!vnode);
4941
+
4942
+ if (elmChildren.length !== filteredVNodes.length) {
4943
+ logError(`Hydration mismatch: incorrect number of rendered nodes, expected ${filteredVNodes.length} but found ${elmChildren.length}.`, vm);
4944
+ throwHydrationError();
4945
+ }
4946
+ }
4947
+
4948
+ let elmCurrentChildIdx = 0;
4949
+
4950
+ for (let j = 0, n = children.length; j < n; j++) {
4951
+ const ch = children[j];
4952
+
4953
+ if (ch != null) {
4954
+ const childNode = elmChildren[elmCurrentChildIdx];
4955
+
4956
+ if (process.env.NODE_ENV !== 'production') {
4957
+ // VComments and VTexts validation is handled in their hooks
4958
+ if (isElementNode(childNode)) {
4959
+ if (((_a = ch.sel) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== childNode.tagName.toLowerCase()) {
4960
+ logError(`Hydration mismatch: expecting element with tag "${(_b = ch.sel) === null || _b === void 0 ? void 0 : _b.toLowerCase()}" but found "${childNode.tagName.toLowerCase()}".`, vm);
4961
+ throwHydrationError();
4962
+ } // Note: props are not yet set
4963
+
4964
+
4965
+ const hasIncompatibleAttrs = vnodesAndElementHaveCompatibleAttrs(ch, childNode);
4966
+ const hasIncompatibleClass = vnodesAndElementHaveCompatibleClass(ch, childNode);
4967
+ const hasIncompatibleStyle = vnodesAndElementHaveCompatibleStyle(ch, childNode);
4968
+ const isVNodeAndElementCompatible = hasIncompatibleAttrs && hasIncompatibleClass && hasIncompatibleStyle;
4969
+
4970
+ if (!isVNodeAndElementCompatible) {
4971
+ throwHydrationError();
4972
+ }
4973
+ }
4974
+ }
4975
+
4976
+ ch.hook.hydrate(ch, childNode);
4977
+ elmCurrentChildIdx++;
4978
+ }
4979
+ }
4980
+ }
4981
+
4763
4982
  function updateCustomElmHook(oldVnode, vnode) {
4764
4983
  // Attrs need to be applied to element before props
4765
4984
  // IE11 will wipe out value on radio inputs if value
@@ -4843,38 +5062,6 @@ var LWC = (function (exports) {
4843
5062
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
4844
5063
  */
4845
5064
 
4846
- /**
4847
- * EXPERIMENTAL: This function acts like a hook for Lightning Locker Service and other similar
4848
- * libraries to sanitize HTML content. This hook process the content passed via the template to
4849
- * lwc:inner-html directive.
4850
- * It is meant to be overridden with setSanitizeHtmlContentHook
4851
- */
4852
-
4853
-
4854
- let sanitizeHtmlContentHook = () => {
4855
- // locker-service patches this function during runtime to sanitize HTML content.
4856
- throw new Error('sanitizeHtmlContent hook must be implemented.');
4857
- };
4858
- /**
4859
- * Sets the sanitizeHtmlContentHook.
4860
- *
4861
- * @param newHookImpl
4862
- * @returns oldHookImplementation.
4863
- */
4864
-
4865
-
4866
- function setSanitizeHtmlContentHook(newHookImpl) {
4867
- const currentHook = sanitizeHtmlContentHook;
4868
- sanitizeHtmlContentHook = newHookImpl;
4869
- return currentHook;
4870
- }
4871
- /*
4872
- * Copyright (c) 2018, salesforce.com, inc.
4873
- * All rights reserved.
4874
- * SPDX-License-Identifier: MIT
4875
- * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
4876
- */
4877
-
4878
5065
 
4879
5066
  const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
4880
5067
  const SymbolIterator = Symbol.iterator;
@@ -4893,7 +5080,26 @@ var LWC = (function (exports) {
4893
5080
  update: updateNodeHook,
4894
5081
  insert: insertNodeHook,
4895
5082
  move: insertNodeHook,
4896
- remove: removeNodeHook
5083
+ remove: removeNodeHook,
5084
+ hydrate: (vNode, node) => {
5085
+ var _a;
5086
+
5087
+ if (process.env.NODE_ENV !== 'production') {
5088
+ // eslint-disable-next-line lwc-internal/no-global-node
5089
+ if (node.nodeType !== Node.TEXT_NODE) {
5090
+ logError('Hydration mismatch: incorrect node type received', vNode.owner);
5091
+ assert.fail('Hydration mismatch: incorrect node type received.');
5092
+ }
5093
+
5094
+ if (node.nodeValue !== vNode.text) {
5095
+ logWarn('Hydration mismatch: text values do not match, will recover from the difference', vNode.owner);
5096
+ }
5097
+ } // always set the text value to the one from the vnode.
5098
+
5099
+
5100
+ node.nodeValue = (_a = vNode.text) !== null && _a !== void 0 ? _a : null;
5101
+ vNode.elm = node;
5102
+ }
4897
5103
  };
4898
5104
  const CommentHook = {
4899
5105
  create: vnode => {
@@ -4911,7 +5117,26 @@ var LWC = (function (exports) {
4911
5117
  update: updateNodeHook,
4912
5118
  insert: insertNodeHook,
4913
5119
  move: insertNodeHook,
4914
- remove: removeNodeHook
5120
+ remove: removeNodeHook,
5121
+ hydrate: (vNode, node) => {
5122
+ var _a;
5123
+
5124
+ if (process.env.NODE_ENV !== 'production') {
5125
+ // eslint-disable-next-line lwc-internal/no-global-node
5126
+ if (node.nodeType !== Node.COMMENT_NODE) {
5127
+ logError('Hydration mismatch: incorrect node type received', vNode.owner);
5128
+ assert.fail('Hydration mismatch: incorrect node type received.');
5129
+ }
5130
+
5131
+ if (node.nodeValue !== vNode.text) {
5132
+ logWarn('Hydration mismatch: comment values do not match, will recover from the difference', vNode.owner);
5133
+ }
5134
+ } // always set the text value to the one from the vnode.
5135
+
5136
+
5137
+ node.nodeValue = (_a = vNode.text) !== null && _a !== void 0 ? _a : null;
5138
+ vNode.elm = node;
5139
+ }
4915
5140
  }; // insert is called after update, which is used somewhere else (via a module)
4916
5141
  // to mark the vm as inserted, that means we cannot use update as the main channel
4917
5142
  // to rehydrate when dirty, because sometimes the element is not inserted just yet,
@@ -4951,6 +5176,38 @@ var LWC = (function (exports) {
4951
5176
  remove: (vnode, parentNode) => {
4952
5177
  removeNodeHook(vnode, parentNode);
4953
5178
  removeElmHook(vnode);
5179
+ },
5180
+ hydrate: (vnode, node) => {
5181
+ const elm = node;
5182
+ vnode.elm = elm;
5183
+ const {
5184
+ context
5185
+ } = vnode.data;
5186
+ const isDomManual = Boolean(!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual"
5187
+ /* manual */
5188
+ );
5189
+
5190
+ if (isDomManual) {
5191
+ // it may be that this element has lwc:inner-html, we need to diff and in case are the same,
5192
+ // remove the innerHTML from props so it reuses the existing dom elements.
5193
+ const {
5194
+ props
5195
+ } = vnode.data;
5196
+
5197
+ if (!isUndefined$1(props) && !isUndefined$1(props.innerHTML)) {
5198
+ if (elm.innerHTML === props.innerHTML) {
5199
+ delete props.innerHTML;
5200
+ } else {
5201
+ logWarn(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: innerHTML values do not match for element, will recover from the difference`, vnode.owner);
5202
+ }
5203
+ }
5204
+ }
5205
+
5206
+ hydrateElmHook(vnode);
5207
+
5208
+ if (!isDomManual) {
5209
+ hydrateChildrenHook(vnode.elm.childNodes, vnode.children, vnode.owner);
5210
+ }
4954
5211
  }
4955
5212
  };
4956
5213
  const CustomElementHook = {
@@ -5042,6 +5299,44 @@ var LWC = (function (exports) {
5042
5299
  // will take care of disconnecting any child VM attached to its shadow as well.
5043
5300
  removeVM(vm);
5044
5301
  }
5302
+ },
5303
+ hydrate: (vnode, elm) => {
5304
+ // the element is created, but the vm is not
5305
+ const {
5306
+ sel,
5307
+ mode,
5308
+ ctor,
5309
+ owner
5310
+ } = vnode;
5311
+ const def = getComponentInternalDef(ctor);
5312
+ createVM(elm, def, {
5313
+ mode,
5314
+ owner,
5315
+ tagName: sel,
5316
+ renderer: owner.renderer
5317
+ });
5318
+ vnode.elm = elm;
5319
+ const vm = getAssociatedVM(elm);
5320
+ allocateChildrenHook(vnode, vm);
5321
+ hydrateElmHook(vnode); // Insert hook section:
5322
+
5323
+ if (process.env.NODE_ENV !== 'production') {
5324
+ assert.isTrue(vm.state === 0
5325
+ /* created */
5326
+ , `${vm} cannot be recycled.`);
5327
+ }
5328
+
5329
+ runConnectedCallback(vm);
5330
+
5331
+ if (vm.renderMode !== 0
5332
+ /* Light */
5333
+ ) {
5334
+ // VM is not rendering in Light DOM, we can proceed and hydrate the slotted content.
5335
+ // Note: for Light DOM, this is handled while hydrating the VM
5336
+ hydrateChildrenHook(vnode.elm.childNodes, vnode.children, vm);
5337
+ }
5338
+
5339
+ hydrateVM(vm);
5045
5340
  }
5046
5341
  };
5047
5342
 
@@ -5354,7 +5649,7 @@ var LWC = (function (exports) {
5354
5649
 
5355
5650
 
5356
5651
  function d(value) {
5357
- return value == null ? '' : value;
5652
+ return value == null ? '' : String(value);
5358
5653
  } // [b]ind function
5359
5654
 
5360
5655
 
@@ -5516,6 +5811,26 @@ var LWC = (function (exports) {
5516
5811
 
5517
5812
  markAsDynamicChildren(vnodes);
5518
5813
  return vnodes;
5814
+ }
5815
+ /**
5816
+ * EXPERIMENTAL: This function acts like a hook for Lightning Locker Service and other similar
5817
+ * libraries to sanitize HTML content. This hook process the content passed via the template to
5818
+ * lwc:inner-html directive.
5819
+ * It is meant to be overridden with setSanitizeHtmlContentHook, it throws an error by default.
5820
+ */
5821
+
5822
+
5823
+ let sanitizeHtmlContentHook = () => {
5824
+ // locker-service patches this function during runtime to sanitize HTML content.
5825
+ throw new Error('sanitizeHtmlContent hook must be implemented.');
5826
+ };
5827
+ /**
5828
+ * Sets the sanitizeHtmlContentHook.
5829
+ */
5830
+
5831
+
5832
+ function setSanitizeHtmlContentHook(newHookImpl) {
5833
+ sanitizeHtmlContentHook = newHookImpl;
5519
5834
  } // [s]anitize [h]tml [c]ontent
5520
5835
 
5521
5836
 
@@ -5710,7 +6025,10 @@ var LWC = (function (exports) {
5710
6025
  for (let i = 0; i < stylesheets.length; i++) {
5711
6026
  renderer.insertGlobalStylesheet(stylesheets[i]);
5712
6027
  }
5713
- } else if (renderer.ssr) {
6028
+ } else if (renderer.ssr || renderer.isHydrating()) {
6029
+ // Note: We need to ensure that during hydration, the stylesheets method is the same as those in ssr.
6030
+ // This works in the client, because the stylesheets are created, and cached in the VM
6031
+ // the first time the VM renders.
5714
6032
  // native shadow or light DOM, SSR
5715
6033
  const combinedStylesheetContent = ArrayJoin.call(stylesheets, '\n');
5716
6034
  return createInlineStyleVNode(combinedStylesheetContent);
@@ -6335,6 +6653,12 @@ var LWC = (function (exports) {
6335
6653
  , vm);
6336
6654
  }
6337
6655
 
6656
+ function hydrateRootElement(elm) {
6657
+ const vm = getAssociatedVM(elm);
6658
+ runConnectedCallback(vm);
6659
+ hydrateVM(vm);
6660
+ }
6661
+
6338
6662
  function disconnectRootElement(elm) {
6339
6663
  const vm = getAssociatedVM(elm);
6340
6664
  resetComponentStateWhenRemoved(vm);
@@ -6342,6 +6666,10 @@ var LWC = (function (exports) {
6342
6666
 
6343
6667
  function appendVM(vm) {
6344
6668
  rehydrate(vm);
6669
+ }
6670
+
6671
+ function hydrateVM(vm) {
6672
+ hydrate(vm);
6345
6673
  } // just in case the component comes back, with this we guarantee re-rendering it
6346
6674
  // while preventing any attempt to rehydration until after reinsertion.
6347
6675
 
@@ -6575,6 +6903,22 @@ var LWC = (function (exports) {
6575
6903
  }
6576
6904
  }
6577
6905
 
6906
+ function hydrate(vm) {
6907
+ if (isTrue(vm.isDirty)) {
6908
+ // manually diffing/patching here.
6909
+ // This routine is:
6910
+ // patchShadowRoot(vm, children);
6911
+ // -> addVnodes.
6912
+ const children = renderComponent(vm);
6913
+ vm.children = children;
6914
+ const vmChildren = vm.renderMode === 0
6915
+ /* Light */
6916
+ ? vm.elm.childNodes : vm.elm.shadowRoot.childNodes;
6917
+ hydrateChildrenHook(vmChildren, children, vm);
6918
+ runRenderedCallback(vm);
6919
+ }
6920
+ }
6921
+
6578
6922
  function patchShadowRoot(vm, newCh) {
6579
6923
  const {
6580
6924
  children: oldCh
@@ -7401,28 +7745,12 @@ var LWC = (function (exports) {
7401
7745
 
7402
7746
  let hooksAreSet = false;
7403
7747
 
7404
- function overrideHooks(hooks) {
7405
- const oldHooks = {};
7406
-
7407
- if (!isUndefined$1(hooks.sanitizeHtmlContent)) {
7408
- oldHooks.sanitizeHtmlContent = setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
7409
- }
7410
-
7411
- return oldHooks;
7412
- }
7413
-
7414
7748
  function setHooks(hooks) {
7415
7749
  assert.isFalse(hooksAreSet, 'Hooks are already overridden, only one definition is allowed.');
7416
- overrideHooks(hooks);
7417
7750
  hooksAreSet = true;
7751
+ setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
7418
7752
  }
7419
-
7420
- function setHooksForTest(hooks) {
7421
- if (process.env.NODE_ENV !== 'production') {
7422
- return overrideHooks(hooks);
7423
- }
7424
- }
7425
- /* version: 2.5.6 */
7753
+ /* version: 2.5.10-alpha1 */
7426
7754
 
7427
7755
  /*
7428
7756
  * Copyright (c) 2018, salesforce.com, inc.
@@ -7566,8 +7894,19 @@ var LWC = (function (exports) {
7566
7894
  HTMLElementConstructor.prototype = HTMLElement.prototype;
7567
7895
  }
7568
7896
 
7897
+ let isHydrating = false;
7898
+
7899
+ function setIsHydrating(v) {
7900
+ isHydrating = v;
7901
+ }
7902
+
7569
7903
  const renderer = {
7570
7904
  ssr: false,
7905
+
7906
+ isHydrating() {
7907
+ return isHydrating;
7908
+ },
7909
+
7571
7910
  isNativeShadowDefined: _globalThis[KEY__IS_NATIVE_SHADOW_ROOT_DEFINED],
7572
7911
  isSyntheticShadowDefined: hasOwnProperty$1.call(Element.prototype, KEY__SHADOW_TOKEN),
7573
7912
 
@@ -7596,6 +7935,10 @@ var LWC = (function (exports) {
7596
7935
  },
7597
7936
 
7598
7937
  attachShadow(element, options) {
7938
+ if (isHydrating) {
7939
+ return element.shadowRoot;
7940
+ }
7941
+
7599
7942
  return element.attachShadow(options);
7600
7943
  },
7601
7944
 
@@ -7733,61 +8076,6 @@ var LWC = (function (exports) {
7733
8076
  getCustomElement,
7734
8077
  HTMLElement: HTMLElementConstructor
7735
8078
  };
7736
- /*
7737
- * Copyright (c) 2018, salesforce.com, inc.
7738
- * All rights reserved.
7739
- * SPDX-License-Identifier: MIT
7740
- * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
7741
- */
7742
-
7743
- /**
7744
- * This function builds a Web Component class from a LWC constructor so it can be
7745
- * registered as a new element via customElements.define() at any given time.
7746
- *
7747
- * @deprecated since version 1.3.11
7748
- *
7749
- * @example
7750
- * ```
7751
- * import { buildCustomElementConstructor } from 'lwc';
7752
- * import Foo from 'ns/foo';
7753
- * const WC = buildCustomElementConstructor(Foo);
7754
- * customElements.define('x-foo', WC);
7755
- * const elm = document.createElement('x-foo');
7756
- * ```
7757
- */
7758
-
7759
- function deprecatedBuildCustomElementConstructor(Ctor) {
7760
- if (process.env.NODE_ENV !== 'production') {
7761
- /* eslint-disable-next-line no-console */
7762
- 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.`);
7763
- }
7764
-
7765
- return Ctor.CustomElementConstructor;
7766
- }
7767
-
7768
- function buildCustomElementConstructor(Ctor) {
7769
- const def = getComponentInternalDef(Ctor);
7770
- return class extends def.bridge {
7771
- constructor() {
7772
- super();
7773
- createVM(this, def, {
7774
- mode: 'open',
7775
- owner: null,
7776
- tagName: this.tagName,
7777
- renderer
7778
- });
7779
- }
7780
-
7781
- connectedCallback() {
7782
- connectRootElement(this);
7783
- }
7784
-
7785
- disconnectedCallback() {
7786
- disconnectRootElement(this);
7787
- }
7788
-
7789
- };
7790
- }
7791
8079
  /*
7792
8080
  * Copyright (c) 2018, salesforce.com, inc.
7793
8081
  * All rights reserved.
@@ -7797,7 +8085,6 @@ var LWC = (function (exports) {
7797
8085
  // TODO [#2472]: Remove this workaround when appropriate.
7798
8086
  // eslint-disable-next-line lwc-internal/no-global-node
7799
8087
 
7800
-
7801
8088
  const _Node$1 = Node;
7802
8089
  const ConnectingSlot = new WeakMap();
7803
8090
  const DisconnectingSlot = new WeakMap();
@@ -7908,6 +8195,118 @@ var LWC = (function (exports) {
7908
8195
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
7909
8196
  */
7910
8197
 
8198
+
8199
+ function hydrateComponent(element, Ctor, props = {}) {
8200
+ if (!isFunction$1(Ctor)) {
8201
+ throw new TypeError(`"hydrateComponent" expects a valid component constructor as the second parameter but instead received ${Ctor}.`);
8202
+ }
8203
+
8204
+ if (!isObject(props) || isNull(props)) {
8205
+ throw new TypeError(`"hydrateComponent" expects an object as the third parameter but instead received ${props}.`);
8206
+ }
8207
+
8208
+ const def = getComponentInternalDef(Ctor);
8209
+
8210
+ try {
8211
+ // Let the renderer know we are hydrating, so it does not replace the existing shadowRoot
8212
+ // and uses the same algo to create the stylesheets as in SSR.
8213
+ setIsHydrating(true);
8214
+ createVM(element, def, {
8215
+ mode: 'open',
8216
+ owner: null,
8217
+ renderer,
8218
+ tagName: element.tagName.toLowerCase()
8219
+ });
8220
+
8221
+ for (const [key, value] of Object.entries(props)) {
8222
+ element[key] = value;
8223
+ }
8224
+
8225
+ hydrateRootElement(element); // set it back since now we finished hydration.
8226
+
8227
+ setIsHydrating(false);
8228
+ } catch (e) {
8229
+ // Fallback: In case there's an error while hydrating, let's log the error, and replace the element with
8230
+ // the client generated DOM.
8231
+
8232
+ /* eslint-disable-next-line no-console */
8233
+ console.error('Recovering from error while hydrating: ', e);
8234
+ setIsHydrating(false);
8235
+ const newElem = createElement(element.tagName, {
8236
+ is: Ctor,
8237
+ mode: 'open'
8238
+ });
8239
+
8240
+ for (const [key, value] of Object.entries(props)) {
8241
+ newElem[key] = value;
8242
+ }
8243
+
8244
+ element.parentNode.replaceChild(newElem, element);
8245
+ }
8246
+ }
8247
+ /*
8248
+ * Copyright (c) 2018, salesforce.com, inc.
8249
+ * All rights reserved.
8250
+ * SPDX-License-Identifier: MIT
8251
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
8252
+ */
8253
+
8254
+ /**
8255
+ * This function builds a Web Component class from a LWC constructor so it can be
8256
+ * registered as a new element via customElements.define() at any given time.
8257
+ *
8258
+ * @deprecated since version 1.3.11
8259
+ *
8260
+ * @example
8261
+ * ```
8262
+ * import { buildCustomElementConstructor } from 'lwc';
8263
+ * import Foo from 'ns/foo';
8264
+ * const WC = buildCustomElementConstructor(Foo);
8265
+ * customElements.define('x-foo', WC);
8266
+ * const elm = document.createElement('x-foo');
8267
+ * ```
8268
+ */
8269
+
8270
+
8271
+ function deprecatedBuildCustomElementConstructor(Ctor) {
8272
+ if (process.env.NODE_ENV !== 'production') {
8273
+ /* eslint-disable-next-line no-console */
8274
+ 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.`);
8275
+ }
8276
+
8277
+ return Ctor.CustomElementConstructor;
8278
+ }
8279
+
8280
+ function buildCustomElementConstructor(Ctor) {
8281
+ const def = getComponentInternalDef(Ctor);
8282
+ return class extends def.bridge {
8283
+ constructor() {
8284
+ super();
8285
+ createVM(this, def, {
8286
+ mode: 'open',
8287
+ owner: null,
8288
+ tagName: this.tagName,
8289
+ renderer
8290
+ });
8291
+ }
8292
+
8293
+ connectedCallback() {
8294
+ connectRootElement(this);
8295
+ }
8296
+
8297
+ disconnectedCallback() {
8298
+ disconnectRootElement(this);
8299
+ }
8300
+
8301
+ };
8302
+ }
8303
+ /*
8304
+ * Copyright (c) 2018, salesforce.com, inc.
8305
+ * All rights reserved.
8306
+ * SPDX-License-Identifier: MIT
8307
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
8308
+ */
8309
+
7911
8310
  /**
7912
8311
  * EXPERIMENTAL: This function provides access to the component constructor, given an HTMLElement.
7913
8312
  * This API is subject to change or being removed.
@@ -8007,7 +8406,7 @@ var LWC = (function (exports) {
8007
8406
  });
8008
8407
  freeze(LightningElement);
8009
8408
  seal(LightningElement.prototype);
8010
- /* version: 2.5.6 */
8409
+ /* version: 2.5.10-alpha1 */
8011
8410
 
8012
8411
  exports.LightningElement = LightningElement;
8013
8412
  exports.__unstable__ProfilerControl = profilerControl;
@@ -8017,6 +8416,7 @@ var LWC = (function (exports) {
8017
8416
  exports.createElement = createElement;
8018
8417
  exports.getComponentConstructor = getComponentConstructor;
8019
8418
  exports.getComponentDef = getComponentDef;
8419
+ exports.hydrateComponent = hydrateComponent;
8020
8420
  exports.isComponentConstructor = isComponentConstructor;
8021
8421
  exports.isNodeFromTemplate = isNodeFromTemplate;
8022
8422
  exports.readonly = readonly;
@@ -8028,7 +8428,6 @@ var LWC = (function (exports) {
8028
8428
  exports.setFeatureFlag = setFeatureFlag;
8029
8429
  exports.setFeatureFlagForTest = setFeatureFlagForTest;
8030
8430
  exports.setHooks = setHooks;
8031
- exports.setHooksForTest = setHooksForTest;
8032
8431
  exports.swapComponent = swapComponent;
8033
8432
  exports.swapStyle = swapStyle;
8034
8433
  exports.swapTemplate = swapTemplate;
@@ -8040,4 +8439,4 @@ var LWC = (function (exports) {
8040
8439
 
8041
8440
  return exports;
8042
8441
 
8043
- })({});
8442
+ }({}));