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.
- package/dist/engine-dom/esm/es2017/engine-dom.js +567 -99
- package/dist/engine-dom/iife/es2017/engine-dom.js +568 -98
- package/dist/engine-dom/iife/es2017/engine-dom.min.js +2 -2
- package/dist/engine-dom/iife/es2017/engine-dom_debug.js +383 -90
- package/dist/engine-dom/iife/es5/engine-dom.js +634 -150
- package/dist/engine-dom/iife/es5/engine-dom.min.js +2 -2
- package/dist/engine-dom/iife/es5/engine-dom_debug.js +430 -133
- package/dist/engine-dom/umd/es2017/engine-dom.js +568 -98
- package/dist/engine-dom/umd/es2017/engine-dom.min.js +2 -2
- package/dist/engine-dom/umd/es2017/engine-dom_debug.js +383 -90
- package/dist/engine-dom/umd/es5/engine-dom.js +634 -150
- package/dist/engine-dom/umd/es5/engine-dom.min.js +2 -2
- package/dist/engine-dom/umd/es5/engine-dom_debug.js +430 -133
- package/dist/engine-server/commonjs/es2017/engine-server.js +457 -49
- package/dist/engine-server/commonjs/es2017/engine-server.min.js +2 -2
- package/dist/engine-server/esm/es2017/engine-server.js +457 -50
- package/dist/synthetic-shadow/esm/es2017/synthetic-shadow.js +9 -39
- package/dist/synthetic-shadow/iife/es2017/synthetic-shadow.js +9 -39
- package/dist/synthetic-shadow/iife/es2017/synthetic-shadow.min.js +2 -2
- package/dist/synthetic-shadow/iife/es2017/synthetic-shadow_debug.js +9 -39
- package/dist/synthetic-shadow/iife/es5/synthetic-shadow.js +9 -39
- package/dist/synthetic-shadow/iife/es5/synthetic-shadow.min.js +2 -2
- package/dist/synthetic-shadow/iife/es5/synthetic-shadow_debug.js +9 -39
- package/dist/synthetic-shadow/umd/es2017/synthetic-shadow.js +9 -39
- package/dist/synthetic-shadow/umd/es2017/synthetic-shadow.min.js +2 -2
- package/dist/synthetic-shadow/umd/es2017/synthetic-shadow_debug.js +9 -39
- package/dist/synthetic-shadow/umd/es5/synthetic-shadow.js +9 -39
- package/dist/synthetic-shadow/umd/es5/synthetic-shadow.min.js +2 -2
- package/dist/synthetic-shadow/umd/es5/synthetic-shadow_debug.js +9 -39
- package/dist/wire-service/esm/es2017/wire-service.js +2 -2
- package/dist/wire-service/iife/es2017/wire-service.js +2 -2
- package/dist/wire-service/iife/es2017/wire-service_debug.js +2 -2
- package/dist/wire-service/iife/es5/wire-service.js +2 -2
- package/dist/wire-service/iife/es5/wire-service_debug.js +2 -2
- package/dist/wire-service/umd/es2017/wire-service.js +2 -2
- package/dist/wire-service/umd/es2017/wire-service_debug.js +2 -2
- package/dist/wire-service/umd/es5/wire-service.js +2 -2
- package/dist/wire-service/umd/es5/wire-service_debug.js +2 -2
- 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.
|
|
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.
|
|
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
|
|
697
|
-
let msg = `[LWC
|
|
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
|
|
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
|
|
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
|
-
*
|
|
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
|
-
//
|
|
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 === "
|
|
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: "
|
|
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
|
-
|
|
5349
|
-
|
|
5350
|
-
|
|
5351
|
-
|
|
5352
|
-
|
|
5353
|
-
|
|
5354
|
-
|
|
5355
|
-
|
|
5356
|
-
|
|
5357
|
-
|
|
5358
|
-
|
|
5359
|
-
|
|
5360
|
-
|
|
5361
|
-
|
|
5362
|
-
|
|
5363
|
-
|
|
5364
|
-
|
|
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
|
-
/*
|
|
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.
|
|
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);
|
|
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
|
-
|
|
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
|
-
|
|
7843
|
+
element.attributes.push({
|
|
7439
7844
|
name: 'style',
|
|
7440
7845
|
namespace: null,
|
|
7441
|
-
value:
|
|
7442
|
-
};
|
|
7443
|
-
|
|
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.
|
|
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;
|