lwc 2.5.4 → 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 (39) hide show
  1. package/dist/engine-dom/esm/es2017/engine-dom.js +567 -99
  2. package/dist/engine-dom/iife/es2017/engine-dom.js +568 -98
  3. package/dist/engine-dom/iife/es2017/engine-dom.min.js +2 -2
  4. package/dist/engine-dom/iife/es2017/engine-dom_debug.js +383 -90
  5. package/dist/engine-dom/iife/es5/engine-dom.js +634 -150
  6. package/dist/engine-dom/iife/es5/engine-dom.min.js +2 -2
  7. package/dist/engine-dom/iife/es5/engine-dom_debug.js +430 -133
  8. package/dist/engine-dom/umd/es2017/engine-dom.js +568 -98
  9. package/dist/engine-dom/umd/es2017/engine-dom.min.js +2 -2
  10. package/dist/engine-dom/umd/es2017/engine-dom_debug.js +383 -90
  11. package/dist/engine-dom/umd/es5/engine-dom.js +634 -150
  12. package/dist/engine-dom/umd/es5/engine-dom.min.js +2 -2
  13. package/dist/engine-dom/umd/es5/engine-dom_debug.js +430 -133
  14. package/dist/engine-server/commonjs/es2017/engine-server.js +457 -49
  15. package/dist/engine-server/commonjs/es2017/engine-server.min.js +2 -2
  16. package/dist/engine-server/esm/es2017/engine-server.js +457 -50
  17. package/dist/synthetic-shadow/esm/es2017/synthetic-shadow.js +9 -39
  18. package/dist/synthetic-shadow/iife/es2017/synthetic-shadow.js +9 -39
  19. package/dist/synthetic-shadow/iife/es2017/synthetic-shadow.min.js +2 -2
  20. package/dist/synthetic-shadow/iife/es2017/synthetic-shadow_debug.js +9 -39
  21. package/dist/synthetic-shadow/iife/es5/synthetic-shadow.js +9 -39
  22. package/dist/synthetic-shadow/iife/es5/synthetic-shadow.min.js +2 -2
  23. package/dist/synthetic-shadow/iife/es5/synthetic-shadow_debug.js +9 -39
  24. package/dist/synthetic-shadow/umd/es2017/synthetic-shadow.js +9 -39
  25. package/dist/synthetic-shadow/umd/es2017/synthetic-shadow.min.js +2 -2
  26. package/dist/synthetic-shadow/umd/es2017/synthetic-shadow_debug.js +9 -39
  27. package/dist/synthetic-shadow/umd/es5/synthetic-shadow.js +9 -39
  28. package/dist/synthetic-shadow/umd/es5/synthetic-shadow.min.js +2 -2
  29. package/dist/synthetic-shadow/umd/es5/synthetic-shadow_debug.js +9 -39
  30. package/dist/wire-service/esm/es2017/wire-service.js +2 -2
  31. package/dist/wire-service/iife/es2017/wire-service.js +2 -2
  32. package/dist/wire-service/iife/es2017/wire-service_debug.js +2 -2
  33. package/dist/wire-service/iife/es5/wire-service.js +2 -2
  34. package/dist/wire-service/iife/es5/wire-service_debug.js +2 -2
  35. package/dist/wire-service/umd/es2017/wire-service.js +2 -2
  36. package/dist/wire-service/umd/es2017/wire-service_debug.js +2 -2
  37. package/dist/wire-service/umd/es5/wire-service.js +2 -2
  38. package/dist/wire-service/umd/es5/wire-service_debug.js +2 -2
  39. package/package.json +8 -8
@@ -339,7 +339,7 @@ function htmlPropertyToAttribute(propName) {
339
339
  CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
340
340
  return attributeName;
341
341
  }
342
- /** version: 2.5.4 */
342
+ /** version: 2.5.8 */
343
343
 
344
344
  /*
345
345
  * Copyright (c) 2020, salesforce.com, inc.
@@ -460,7 +460,7 @@ function setFeatureFlagForTest(name, value) {
460
460
  setFeatureFlag(name, value);
461
461
  }
462
462
  }
463
- /** version: 2.5.4 */
463
+ /** version: 2.5.8 */
464
464
 
465
465
  /* proxy-compat-disable */
466
466
 
@@ -512,6 +512,28 @@ function guid() {
512
512
  }
513
513
 
514
514
  return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
515
+ } // Borrowed from Vue template compiler.
516
+ // https://github.com/vuejs/vue/blob/531371b818b0e31a989a06df43789728f23dc4e8/src/platforms/web/util/style.js#L5-L16
517
+
518
+
519
+ const DECLARATION_DELIMITER = /;(?![^(]*\))/g;
520
+ const PROPERTY_DELIMITER = /:(.+)/;
521
+
522
+ function parseStyleText(cssText) {
523
+ const styleMap = {};
524
+ const declarations = cssText.split(DECLARATION_DELIMITER);
525
+
526
+ for (const declaration of declarations) {
527
+ if (declaration) {
528
+ const [prop, value] = declaration.split(PROPERTY_DELIMITER);
529
+
530
+ if (prop !== undefined && value !== undefined) {
531
+ styleMap[prop.trim()] = value.trim();
532
+ }
533
+ }
534
+ }
535
+
536
+ return styleMap;
515
537
  }
516
538
  /*
517
539
  * Copyright (c) 2019, salesforce.com, inc.
@@ -693,8 +715,8 @@ function getErrorComponentStack(vm) {
693
715
  */
694
716
 
695
717
 
696
- function logError(message, vm) {
697
- let msg = `[LWC error]: ${message}`;
718
+ function log(method, message, vm) {
719
+ let msg = `[LWC ${method}]: ${message}`;
698
720
 
699
721
  if (!isUndefined$1(vm)) {
700
722
  msg = `${msg}\n${getComponentStack(vm)}`;
@@ -702,7 +724,7 @@ function logError(message, vm) {
702
724
 
703
725
  if (process.env.NODE_ENV === 'test') {
704
726
  /* eslint-disable-next-line no-console */
705
- console.error(msg);
727
+ console[method](msg);
706
728
  return;
707
729
  }
708
730
 
@@ -710,9 +732,17 @@ function logError(message, vm) {
710
732
  throw new Error(msg);
711
733
  } catch (e) {
712
734
  /* eslint-disable-next-line no-console */
713
- console.error(e);
735
+ console[method](e);
714
736
  }
715
737
  }
738
+
739
+ function logError(message, vm) {
740
+ log('error', message, vm);
741
+ }
742
+
743
+ function logWarn(message, vm) {
744
+ log('warn', message, vm);
745
+ }
716
746
  /*
717
747
  * Copyright (c) 2018, salesforce.com, inc.
718
748
  * All rights reserved.
@@ -3076,8 +3106,10 @@ for (const [elementProp, rendererMethod] of childGetters) {
3076
3106
  }
3077
3107
 
3078
3108
  return renderer[rendererMethod](elm);
3079
- }
3109
+ },
3080
3110
 
3111
+ configurable: true,
3112
+ enumerable: true
3081
3113
  };
3082
3114
  }
3083
3115
 
@@ -3097,8 +3129,11 @@ for (const queryMethod of queryMethods) {
3097
3129
  }
3098
3130
 
3099
3131
  return renderer[queryMethod](elm, arg);
3100
- }
3132
+ },
3101
3133
 
3134
+ configurable: true,
3135
+ enumerable: true,
3136
+ writable: true
3102
3137
  };
3103
3138
  }
3104
3139
 
@@ -3693,15 +3728,14 @@ function registerTemplate(tpl) {
3693
3728
  return tpl;
3694
3729
  }
3695
3730
  /**
3696
- * EXPERIMENTAL: This function acts like a hook for Lightning Locker
3697
- * Service and other similar libraries to sanitize vulnerable attributes.
3698
- * This API is subject to change or being removed.
3731
+ * EXPERIMENTAL: This function acts like a hook for Lightning Locker Service and other similar
3732
+ * libraries to sanitize vulnerable attributes.
3699
3733
  */
3700
3734
 
3701
3735
 
3702
3736
  function sanitizeAttribute(tagName, namespaceUri, attrName, attrValue) {
3703
- // locker-service patches this function during runtime to sanitize vulnerable attributes.
3704
- // when ran off-core this function becomes a noop and returns the user authored value.
3737
+ // locker-service patches this function during runtime to sanitize vulnerable attributes. When
3738
+ // ran off-core this function becomes a noop and returns the user authored value.
3705
3739
  return attrValue;
3706
3740
  }
3707
3741
  /*
@@ -4137,7 +4171,7 @@ function createComponentDef(Ctor) {
4137
4171
  if (!isUndefined$1(ctorShadowSupportMode)) {
4138
4172
  assert.invariant(ctorShadowSupportMode === "any"
4139
4173
  /* Any */
4140
- || ctorShadowSupportMode === "default"
4174
+ || ctorShadowSupportMode === "reset"
4141
4175
  /* Default */
4142
4176
  , `Invalid value for static property shadowSupportMode: '${ctorShadowSupportMode}'`);
4143
4177
  }
@@ -4299,7 +4333,7 @@ const lightingElementDef = {
4299
4333
  renderMode: 1
4300
4334
  /* Shadow */
4301
4335
  ,
4302
- shadowSupportMode: "default"
4336
+ shadowSupportMode: "reset"
4303
4337
  /* Default */
4304
4338
  ,
4305
4339
  wire: EmptyObject,
@@ -4448,6 +4482,17 @@ function createElmHook(vnode) {
4448
4482
  modComputedStyle.create(vnode);
4449
4483
  }
4450
4484
 
4485
+ function hydrateElmHook(vnode) {
4486
+ modEvents.create(vnode); // Attrs are already on the element.
4487
+ // modAttrs.create(vnode);
4488
+
4489
+ modProps.create(vnode); // Already set.
4490
+ // modStaticClassName.create(vnode);
4491
+ // modStaticStyle.create(vnode);
4492
+ // modComputedClassName.create(vnode);
4493
+ // modComputedStyle.create(vnode);
4494
+ }
4495
+
4451
4496
  function fallbackElmHook(elm, vnode) {
4452
4497
  const {
4453
4498
  owner
@@ -4619,6 +4664,179 @@ function createChildrenHook(vnode) {
4619
4664
  }
4620
4665
  }
4621
4666
 
4667
+ function isElementNode(node) {
4668
+ // eslint-disable-next-line lwc-internal/no-global-node
4669
+ return node.nodeType === Node.ELEMENT_NODE;
4670
+ }
4671
+
4672
+ function vnodesAndElementHaveCompatibleAttrs(vnode, elm) {
4673
+ const {
4674
+ data: {
4675
+ attrs = {}
4676
+ },
4677
+ owner: {
4678
+ renderer
4679
+ }
4680
+ } = vnode;
4681
+ let nodesAreCompatible = true; // Validate attributes, though we could always recovery from those by running the update mods.
4682
+ // Note: intentionally ONLY matching vnodes.attrs to elm.attrs, in case SSR is adding extra attributes.
4683
+
4684
+ for (const [attrName, attrValue] of Object.entries(attrs)) {
4685
+ const elmAttrValue = renderer.getAttribute(elm, attrName);
4686
+
4687
+ if (attrValue !== elmAttrValue) {
4688
+ logError(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found "${elmAttrValue}"`, vnode.owner);
4689
+ nodesAreCompatible = false;
4690
+ }
4691
+ }
4692
+
4693
+ return nodesAreCompatible;
4694
+ }
4695
+
4696
+ function vnodesAndElementHaveCompatibleClass(vnode, elm) {
4697
+ const {
4698
+ data: {
4699
+ className,
4700
+ classMap
4701
+ },
4702
+ owner: {
4703
+ renderer
4704
+ }
4705
+ } = vnode;
4706
+ let nodesAreCompatible = true;
4707
+ let vnodeClassName;
4708
+
4709
+ if (!isUndefined$1(className) && className !== elm.className) {
4710
+ // className is used when class is bound to an expr.
4711
+ nodesAreCompatible = false;
4712
+ vnodeClassName = className;
4713
+ } else if (!isUndefined$1(classMap)) {
4714
+ // classMap is used when class is set to static value.
4715
+ const classList = renderer.getClassList(elm);
4716
+ let computedClassName = ''; // all classes from the vnode should be in the element.classList
4717
+
4718
+ for (const name in classMap) {
4719
+ computedClassName += ' ' + name;
4720
+
4721
+ if (!classList.contains(name)) {
4722
+ nodesAreCompatible = false;
4723
+ }
4724
+ }
4725
+
4726
+ vnodeClassName = computedClassName.trim();
4727
+
4728
+ if (classList.length > keys(classMap).length) {
4729
+ nodesAreCompatible = false;
4730
+ }
4731
+ }
4732
+
4733
+ if (!nodesAreCompatible) {
4734
+ logError(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: attribute "class" has different values, expected "${vnodeClassName}" but found "${elm.className}"`, vnode.owner);
4735
+ }
4736
+
4737
+ return nodesAreCompatible;
4738
+ }
4739
+
4740
+ function vnodesAndElementHaveCompatibleStyle(vnode, elm) {
4741
+ const {
4742
+ data: {
4743
+ style,
4744
+ styleDecls
4745
+ },
4746
+ owner: {
4747
+ renderer
4748
+ }
4749
+ } = vnode;
4750
+ const elmStyle = renderer.getAttribute(elm, 'style') || '';
4751
+ let vnodeStyle;
4752
+ let nodesAreCompatible = true;
4753
+
4754
+ if (!isUndefined$1(style) && style !== elmStyle) {
4755
+ nodesAreCompatible = false;
4756
+ vnodeStyle = style;
4757
+ } else if (!isUndefined$1(styleDecls)) {
4758
+ const parsedVnodeStyle = parseStyleText(elmStyle);
4759
+ const expectedStyle = []; // styleMap is used when style is set to static value.
4760
+
4761
+ for (let i = 0, n = styleDecls.length; i < n; i++) {
4762
+ const [prop, value, important] = styleDecls[i];
4763
+ expectedStyle.push(`${prop}: ${value + (important ? ' important!' : '')}`);
4764
+ const parsedPropValue = parsedVnodeStyle[prop];
4765
+
4766
+ if (isUndefined$1(parsedPropValue)) {
4767
+ nodesAreCompatible = false;
4768
+ } else if (!parsedPropValue.startsWith(value)) {
4769
+ nodesAreCompatible = false;
4770
+ } else if (important && !parsedPropValue.endsWith('!important')) {
4771
+ nodesAreCompatible = false;
4772
+ }
4773
+ }
4774
+
4775
+ if (keys(parsedVnodeStyle).length > styleDecls.length) {
4776
+ nodesAreCompatible = false;
4777
+ }
4778
+
4779
+ vnodeStyle = ArrayJoin.call(expectedStyle, ';');
4780
+ }
4781
+
4782
+ if (!nodesAreCompatible) {
4783
+ // style is used when class is bound to an expr.
4784
+ logError(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: attribute "style" has different values, expected "${vnodeStyle}" but found "${elmStyle}".`, vnode.owner);
4785
+ }
4786
+
4787
+ return nodesAreCompatible;
4788
+ }
4789
+
4790
+ function throwHydrationError() {
4791
+ assert.fail('Server rendered elements do not match client side generated elements');
4792
+ }
4793
+
4794
+ function hydrateChildrenHook(elmChildren, children, vm) {
4795
+ var _a, _b;
4796
+
4797
+ if (process.env.NODE_ENV !== 'production') {
4798
+ const filteredVNodes = ArrayFilter.call(children, vnode => !!vnode);
4799
+
4800
+ if (elmChildren.length !== filteredVNodes.length) {
4801
+ logError(`Hydration mismatch: incorrect number of rendered nodes, expected ${filteredVNodes.length} but found ${elmChildren.length}.`, vm);
4802
+ throwHydrationError();
4803
+ }
4804
+ }
4805
+
4806
+ let elmCurrentChildIdx = 0;
4807
+
4808
+ for (let j = 0, n = children.length; j < n; j++) {
4809
+ const ch = children[j];
4810
+
4811
+ if (ch != null) {
4812
+ const childNode = elmChildren[elmCurrentChildIdx];
4813
+
4814
+ if (process.env.NODE_ENV !== 'production') {
4815
+ // VComments and VTexts validation is handled in their hooks
4816
+ if (isElementNode(childNode)) {
4817
+ if (((_a = ch.sel) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== childNode.tagName.toLowerCase()) {
4818
+ logError(`Hydration mismatch: expecting element with tag "${(_b = ch.sel) === null || _b === void 0 ? void 0 : _b.toLowerCase()}" but found "${childNode.tagName.toLowerCase()}".`, vm);
4819
+ throwHydrationError();
4820
+ } // Note: props are not yet set
4821
+
4822
+
4823
+ const hasIncompatibleAttrs = vnodesAndElementHaveCompatibleAttrs(ch, childNode);
4824
+ const hasIncompatibleClass = vnodesAndElementHaveCompatibleClass(ch, childNode);
4825
+ const hasIncompatibleStyle = vnodesAndElementHaveCompatibleStyle(ch, childNode);
4826
+ const isVNodeAndElementCompatible = hasIncompatibleAttrs && hasIncompatibleClass && hasIncompatibleStyle;
4827
+
4828
+ if (!isVNodeAndElementCompatible) {
4829
+ throwHydrationError();
4830
+ }
4831
+ }
4832
+ }
4833
+
4834
+ ch.hook.hydrate(ch, childNode);
4835
+ elmCurrentChildIdx++;
4836
+ }
4837
+ }
4838
+ }
4839
+
4622
4840
  function updateCustomElmHook(oldVnode, vnode) {
4623
4841
  // Attrs need to be applied to element before props
4624
4842
  // IE11 will wipe out value on radio inputs if value
@@ -4720,7 +4938,26 @@ const TextHook = {
4720
4938
  update: updateNodeHook,
4721
4939
  insert: insertNodeHook,
4722
4940
  move: insertNodeHook,
4723
- remove: removeNodeHook
4941
+ remove: removeNodeHook,
4942
+ hydrate: (vNode, node) => {
4943
+ var _a;
4944
+
4945
+ if (process.env.NODE_ENV !== 'production') {
4946
+ // eslint-disable-next-line lwc-internal/no-global-node
4947
+ if (node.nodeType !== Node.TEXT_NODE) {
4948
+ logError('Hydration mismatch: incorrect node type received', vNode.owner);
4949
+ assert.fail('Hydration mismatch: incorrect node type received.');
4950
+ }
4951
+
4952
+ if (node.nodeValue !== vNode.text) {
4953
+ logWarn('Hydration mismatch: text values do not match, will recover from the difference', vNode.owner);
4954
+ }
4955
+ } // always set the text value to the one from the vnode.
4956
+
4957
+
4958
+ node.nodeValue = (_a = vNode.text) !== null && _a !== void 0 ? _a : null;
4959
+ vNode.elm = node;
4960
+ }
4724
4961
  };
4725
4962
  const CommentHook = {
4726
4963
  create: vnode => {
@@ -4738,7 +4975,26 @@ const CommentHook = {
4738
4975
  update: updateNodeHook,
4739
4976
  insert: insertNodeHook,
4740
4977
  move: insertNodeHook,
4741
- remove: removeNodeHook
4978
+ remove: removeNodeHook,
4979
+ hydrate: (vNode, node) => {
4980
+ var _a;
4981
+
4982
+ if (process.env.NODE_ENV !== 'production') {
4983
+ // eslint-disable-next-line lwc-internal/no-global-node
4984
+ if (node.nodeType !== Node.COMMENT_NODE) {
4985
+ logError('Hydration mismatch: incorrect node type received', vNode.owner);
4986
+ assert.fail('Hydration mismatch: incorrect node type received.');
4987
+ }
4988
+
4989
+ if (node.nodeValue !== vNode.text) {
4990
+ logWarn('Hydration mismatch: comment values do not match, will recover from the difference', vNode.owner);
4991
+ }
4992
+ } // always set the text value to the one from the vnode.
4993
+
4994
+
4995
+ node.nodeValue = (_a = vNode.text) !== null && _a !== void 0 ? _a : null;
4996
+ vNode.elm = node;
4997
+ }
4742
4998
  }; // insert is called after update, which is used somewhere else (via a module)
4743
4999
  // to mark the vm as inserted, that means we cannot use update as the main channel
4744
5000
  // to rehydrate when dirty, because sometimes the element is not inserted just yet,
@@ -4778,6 +5034,38 @@ const ElementHook = {
4778
5034
  remove: (vnode, parentNode) => {
4779
5035
  removeNodeHook(vnode, parentNode);
4780
5036
  removeElmHook(vnode);
5037
+ },
5038
+ hydrate: (vnode, node) => {
5039
+ const elm = node;
5040
+ vnode.elm = elm;
5041
+ const {
5042
+ context
5043
+ } = vnode.data;
5044
+ const isDomManual = Boolean(!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual"
5045
+ /* manual */
5046
+ );
5047
+
5048
+ if (isDomManual) {
5049
+ // it may be that this element has lwc:inner-html, we need to diff and in case are the same,
5050
+ // remove the innerHTML from props so it reuses the existing dom elements.
5051
+ const {
5052
+ props
5053
+ } = vnode.data;
5054
+
5055
+ if (!isUndefined$1(props) && !isUndefined$1(props.innerHTML)) {
5056
+ if (elm.innerHTML === props.innerHTML) {
5057
+ delete props.innerHTML;
5058
+ } else {
5059
+ logWarn(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: innerHTML values do not match for element, will recover from the difference`, vnode.owner);
5060
+ }
5061
+ }
5062
+ }
5063
+
5064
+ hydrateElmHook(vnode);
5065
+
5066
+ if (!isDomManual) {
5067
+ hydrateChildrenHook(vnode.elm.childNodes, vnode.children, vnode.owner);
5068
+ }
4781
5069
  }
4782
5070
  };
4783
5071
  const CustomElementHook = {
@@ -4869,6 +5157,44 @@ const CustomElementHook = {
4869
5157
  // will take care of disconnecting any child VM attached to its shadow as well.
4870
5158
  removeVM(vm);
4871
5159
  }
5160
+ },
5161
+ hydrate: (vnode, elm) => {
5162
+ // the element is created, but the vm is not
5163
+ const {
5164
+ sel,
5165
+ mode,
5166
+ ctor,
5167
+ owner
5168
+ } = vnode;
5169
+ const def = getComponentInternalDef(ctor);
5170
+ createVM(elm, def, {
5171
+ mode,
5172
+ owner,
5173
+ tagName: sel,
5174
+ renderer: owner.renderer
5175
+ });
5176
+ vnode.elm = elm;
5177
+ const vm = getAssociatedVM(elm);
5178
+ allocateChildrenHook(vnode, vm);
5179
+ hydrateElmHook(vnode); // Insert hook section:
5180
+
5181
+ if (process.env.NODE_ENV !== 'production') {
5182
+ assert.isTrue(vm.state === 0
5183
+ /* created */
5184
+ , `${vm} cannot be recycled.`);
5185
+ }
5186
+
5187
+ runConnectedCallback(vm);
5188
+
5189
+ if (vm.renderMode !== 0
5190
+ /* Light */
5191
+ ) {
5192
+ // VM is not rendering in Light DOM, we can proceed and hydrate the slotted content.
5193
+ // Note: for Light DOM, this is handled while hydrating the VM
5194
+ hydrateChildrenHook(vnode.elm.childNodes, vnode.children, vm);
5195
+ }
5196
+
5197
+ hydrateVM(vm);
4872
5198
  }
4873
5199
  };
4874
5200
 
@@ -5077,7 +5403,7 @@ function i(iterable, factory) {
5077
5403
  next = iterator.next();
5078
5404
  last = next.done; // template factory logic based on the previous collected value
5079
5405
 
5080
- const vnode = factory(value, j, j === 0, last);
5406
+ const vnode = factory(value, j, j === 0, last === true);
5081
5407
 
5082
5408
  if (isArray$1(vnode)) {
5083
5409
  ArrayPush$1.apply(list, vnode);
@@ -5344,24 +5670,48 @@ function sc(vnodes) {
5344
5670
  markAsDynamicChildren(vnodes);
5345
5671
  return vnodes;
5346
5672
  }
5673
+ /**
5674
+ * EXPERIMENTAL: This function acts like a hook for Lightning Locker Service and other similar
5675
+ * libraries to sanitize HTML content. This hook process the content passed via the template to
5676
+ * lwc:inner-html directive.
5677
+ * It is meant to be overridden with setSanitizeHtmlContentHook, it throws an error by default.
5678
+ */
5347
5679
 
5348
- var api = /*#__PURE__*/Object.freeze({
5349
- __proto__: null,
5350
- h: h,
5351
- ti: ti,
5352
- s: s,
5353
- c: c,
5354
- i: i,
5355
- f: f,
5356
- t: t,
5357
- co: co,
5358
- d: d,
5359
- b: b,
5360
- k: k,
5361
- gid: gid,
5362
- fid: fid,
5363
- dc: dc,
5364
- sc: sc
5680
+
5681
+ let sanitizeHtmlContentHook = () => {
5682
+ // locker-service patches this function during runtime to sanitize HTML content.
5683
+ throw new Error('sanitizeHtmlContent hook must be implemented.');
5684
+ };
5685
+ /**
5686
+ * Sets the sanitizeHtmlContentHook.
5687
+ */
5688
+
5689
+
5690
+ function setSanitizeHtmlContentHook(newHookImpl) {
5691
+ sanitizeHtmlContentHook = newHookImpl;
5692
+ } // [s]anitize [h]tml [c]ontent
5693
+
5694
+
5695
+ function shc(content) {
5696
+ return sanitizeHtmlContentHook(content);
5697
+ }
5698
+
5699
+ const api = freeze({
5700
+ s,
5701
+ h,
5702
+ c,
5703
+ i,
5704
+ f,
5705
+ t,
5706
+ d,
5707
+ b,
5708
+ k,
5709
+ co,
5710
+ dc,
5711
+ ti,
5712
+ gid,
5713
+ fid,
5714
+ shc
5365
5715
  });
5366
5716
  /*
5367
5717
  * Copyright (c) 2018, salesforce.com, inc.
@@ -5375,12 +5725,12 @@ function makeHostToken(token) {
5375
5725
  }
5376
5726
 
5377
5727
  function createInlineStyleVNode(content) {
5378
- return h('style', {
5728
+ return api.h('style', {
5379
5729
  key: 'style',
5380
5730
  attrs: {
5381
5731
  type: 'text/css'
5382
5732
  }
5383
- }, [t(content)]);
5733
+ }, [api.t(content)]);
5384
5734
  }
5385
5735
 
5386
5736
  function updateStylesheetToken(vm, template) {
@@ -5533,7 +5883,10 @@ function createStylesheet(vm, stylesheets) {
5533
5883
  for (let i = 0; i < stylesheets.length; i++) {
5534
5884
  renderer.insertGlobalStylesheet(stylesheets[i]);
5535
5885
  }
5536
- } else if (renderer.ssr) {
5886
+ } else if (renderer.ssr || renderer.isHydrating) {
5887
+ // Note: We need to ensure that during hydration, the stylesheets method is the same as those in ssr.
5888
+ // This works in the client, because the stylesheets are created, and cached in the VM
5889
+ // the first time the VM renders.
5537
5890
  // native shadow or light DOM, SSR
5538
5891
  const combinedStylesheetContent = ArrayJoin.call(stylesheets, '\n');
5539
5892
  return createInlineStyleVNode(combinedStylesheetContent);
@@ -6113,6 +6466,10 @@ function disconnectRootElement(elm) {
6113
6466
 
6114
6467
  function appendVM(vm) {
6115
6468
  rehydrate(vm);
6469
+ }
6470
+
6471
+ function hydrateVM(vm) {
6472
+ hydrate(vm);
6116
6473
  } // just in case the component comes back, with this we guarantee re-rendering it
6117
6474
  // while preventing any attempt to rehydration until after reinsertion.
6118
6475
 
@@ -6346,6 +6703,22 @@ function rehydrate(vm) {
6346
6703
  }
6347
6704
  }
6348
6705
 
6706
+ function hydrate(vm) {
6707
+ if (isTrue(vm.isDirty)) {
6708
+ // manually diffing/patching here.
6709
+ // This routine is:
6710
+ // patchShadowRoot(vm, children);
6711
+ // -> addVnodes.
6712
+ const children = renderComponent$1(vm);
6713
+ vm.children = children;
6714
+ const vmChildren = vm.renderMode === 0
6715
+ /* Light */
6716
+ ? vm.elm.childNodes : vm.elm.shadowRoot.childNodes;
6717
+ hydrateChildrenHook(vmChildren, children, vm);
6718
+ runRenderedCallback(vm);
6719
+ }
6720
+ }
6721
+
6349
6722
  function patchShadowRoot(vm, newCh) {
6350
6723
  const {
6351
6724
  children: oldCh
@@ -7144,7 +7517,22 @@ function readonly(obj) {
7144
7517
 
7145
7518
  return reactiveMembrane.getReadOnlyProxy(obj);
7146
7519
  }
7147
- /* version: 2.5.4 */
7520
+ /*
7521
+ * Copyright (c) 2018, salesforce.com, inc.
7522
+ * All rights reserved.
7523
+ * SPDX-License-Identifier: MIT
7524
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
7525
+ */
7526
+
7527
+
7528
+ let hooksAreSet = false;
7529
+
7530
+ function setHooks(hooks) {
7531
+ assert.isFalse(hooksAreSet, 'Hooks are already overridden, only one definition is allowed.');
7532
+ hooksAreSet = true;
7533
+ setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
7534
+ }
7535
+ /* version: 2.5.8 */
7148
7536
 
7149
7537
  /*
7150
7538
  * Copyright (c) 2020, salesforce.com, inc.
@@ -7159,6 +7547,7 @@ var HostNodeType;
7159
7547
  (function (HostNodeType) {
7160
7548
  HostNodeType["Text"] = "text";
7161
7549
  HostNodeType["Comment"] = "comment";
7550
+ HostNodeType["Raw"] = "raw";
7162
7551
  HostNodeType["Element"] = "element";
7163
7552
  HostNodeType["ShadowRoot"] = "shadow-root";
7164
7553
  })(HostNodeType || (HostNodeType = {}));
@@ -7173,7 +7562,7 @@ var HostNodeType;
7173
7562
  const CLASSNAMES_SEPARATOR = /\s+/g;
7174
7563
 
7175
7564
  function classNameToTokenList(value) {
7176
- return new Set(value.trim().split(CLASSNAMES_SEPARATOR));
7565
+ return new Set(value.split(CLASSNAMES_SEPARATOR).filter(str => str.length));
7177
7566
  }
7178
7567
 
7179
7568
  function tokenListToClassName(values) {
@@ -7235,6 +7624,11 @@ class HTMLElement$1 {
7235
7624
 
7236
7625
  const renderer = {
7237
7626
  ssr: true,
7627
+
7628
+ get isHydrating() {
7629
+ return false;
7630
+ },
7631
+
7238
7632
  isNativeShadowDefined: false,
7239
7633
  isSyntheticShadowDefined: false,
7240
7634
 
@@ -7338,7 +7732,17 @@ const renderer = {
7338
7732
  }
7339
7733
 
7340
7734
  if (node.type === HostNodeType.Element) {
7341
- const attrName = htmlPropertyToAttribute(key); // Handle all the boolean properties.
7735
+ const attrName = htmlPropertyToAttribute(key);
7736
+
7737
+ if (key === 'innerHTML') {
7738
+ node.children = [{
7739
+ type: HostNodeType.Raw,
7740
+ parent: node,
7741
+ value
7742
+ }];
7743
+ return;
7744
+ } // Handle all the boolean properties.
7745
+
7342
7746
 
7343
7747
  if (isBooleanAttribute(attrName, node.name)) {
7344
7748
  return value === true ? this.setAttribute(node, attrName, '') : this.removeAttribute(node, attrName);
@@ -7432,18 +7836,18 @@ const renderer = {
7432
7836
  },
7433
7837
 
7434
7838
  setCSSStyleProperty(element, name, value, important) {
7435
- let styleAttribute = element.attributes.find(attr => attr.name === 'style' && isNull(attr.namespace));
7839
+ const styleAttribute = element.attributes.find(attr => attr.name === 'style' && isNull(attr.namespace));
7840
+ const serializedProperty = `${name}: ${value}${important ? ' !important' : ''}`;
7436
7841
 
7437
7842
  if (isUndefined$1(styleAttribute)) {
7438
- styleAttribute = {
7843
+ element.attributes.push({
7439
7844
  name: 'style',
7440
7845
  namespace: null,
7441
- value: ''
7442
- };
7443
- element.attributes.push(styleAttribute);
7846
+ value: serializedProperty
7847
+ });
7848
+ } else {
7849
+ styleAttribute.value += `; ${serializedProperty}`;
7444
7850
  }
7445
-
7446
- styleAttribute.value = `${styleAttribute.value}; ${name}: ${value}${important ? ' !important' : ''}`;
7447
7851
  },
7448
7852
 
7449
7853
  isConnected(node) {
@@ -7526,6 +7930,9 @@ function serializeChildNodes(children) {
7526
7930
  case HostNodeType.Comment:
7527
7931
  return `<!--${htmlEscape(child.value)}-->`;
7528
7932
 
7933
+ case HostNodeType.Raw:
7934
+ return child.value;
7935
+
7529
7936
  case HostNodeType.Element:
7530
7937
  return serializeElement(child);
7531
7938
  }
@@ -7621,7 +8028,7 @@ function renderComponent(tagName, Ctor, props = {}) {
7621
8028
 
7622
8029
  freeze(LightningElement);
7623
8030
  seal(LightningElement.prototype);
7624
- /* version: 2.5.4 */
8031
+ /* version: 2.5.8 */
7625
8032
 
7626
8033
  exports.LightningElement = LightningElement;
7627
8034
  exports.api = api$1;
@@ -7637,6 +8044,7 @@ exports.renderComponent = renderComponent;
7637
8044
  exports.sanitizeAttribute = sanitizeAttribute;
7638
8045
  exports.setFeatureFlag = setFeatureFlag;
7639
8046
  exports.setFeatureFlagForTest = setFeatureFlagForTest;
8047
+ exports.setHooks = setHooks;
7640
8048
  exports.track = track;
7641
8049
  exports.unwrap = unwrap;
7642
8050
  exports.wire = wire;