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
|
@@ -335,7 +335,7 @@ function htmlPropertyToAttribute(propName) {
|
|
|
335
335
|
CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
|
|
336
336
|
return attributeName;
|
|
337
337
|
}
|
|
338
|
-
/** version: 2.5.
|
|
338
|
+
/** version: 2.5.8 */
|
|
339
339
|
|
|
340
340
|
/*
|
|
341
341
|
* Copyright (c) 2020, salesforce.com, inc.
|
|
@@ -456,7 +456,7 @@ function setFeatureFlagForTest(name, value) {
|
|
|
456
456
|
setFeatureFlag(name, value);
|
|
457
457
|
}
|
|
458
458
|
}
|
|
459
|
-
/** version: 2.5.
|
|
459
|
+
/** version: 2.5.8 */
|
|
460
460
|
|
|
461
461
|
/* proxy-compat-disable */
|
|
462
462
|
|
|
@@ -508,6 +508,28 @@ function guid() {
|
|
|
508
508
|
}
|
|
509
509
|
|
|
510
510
|
return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
|
|
511
|
+
} // Borrowed from Vue template compiler.
|
|
512
|
+
// https://github.com/vuejs/vue/blob/531371b818b0e31a989a06df43789728f23dc4e8/src/platforms/web/util/style.js#L5-L16
|
|
513
|
+
|
|
514
|
+
|
|
515
|
+
const DECLARATION_DELIMITER = /;(?![^(]*\))/g;
|
|
516
|
+
const PROPERTY_DELIMITER = /:(.+)/;
|
|
517
|
+
|
|
518
|
+
function parseStyleText(cssText) {
|
|
519
|
+
const styleMap = {};
|
|
520
|
+
const declarations = cssText.split(DECLARATION_DELIMITER);
|
|
521
|
+
|
|
522
|
+
for (const declaration of declarations) {
|
|
523
|
+
if (declaration) {
|
|
524
|
+
const [prop, value] = declaration.split(PROPERTY_DELIMITER);
|
|
525
|
+
|
|
526
|
+
if (prop !== undefined && value !== undefined) {
|
|
527
|
+
styleMap[prop.trim()] = value.trim();
|
|
528
|
+
}
|
|
529
|
+
}
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
return styleMap;
|
|
511
533
|
}
|
|
512
534
|
/*
|
|
513
535
|
* Copyright (c) 2019, salesforce.com, inc.
|
|
@@ -689,8 +711,8 @@ function getErrorComponentStack(vm) {
|
|
|
689
711
|
*/
|
|
690
712
|
|
|
691
713
|
|
|
692
|
-
function
|
|
693
|
-
let msg = `[LWC
|
|
714
|
+
function log(method, message, vm) {
|
|
715
|
+
let msg = `[LWC ${method}]: ${message}`;
|
|
694
716
|
|
|
695
717
|
if (!isUndefined$1(vm)) {
|
|
696
718
|
msg = `${msg}\n${getComponentStack(vm)}`;
|
|
@@ -698,7 +720,7 @@ function logError(message, vm) {
|
|
|
698
720
|
|
|
699
721
|
if (process.env.NODE_ENV === 'test') {
|
|
700
722
|
/* eslint-disable-next-line no-console */
|
|
701
|
-
console
|
|
723
|
+
console[method](msg);
|
|
702
724
|
return;
|
|
703
725
|
}
|
|
704
726
|
|
|
@@ -706,9 +728,17 @@ function logError(message, vm) {
|
|
|
706
728
|
throw new Error(msg);
|
|
707
729
|
} catch (e) {
|
|
708
730
|
/* eslint-disable-next-line no-console */
|
|
709
|
-
console
|
|
731
|
+
console[method](e);
|
|
710
732
|
}
|
|
711
733
|
}
|
|
734
|
+
|
|
735
|
+
function logError(message, vm) {
|
|
736
|
+
log('error', message, vm);
|
|
737
|
+
}
|
|
738
|
+
|
|
739
|
+
function logWarn(message, vm) {
|
|
740
|
+
log('warn', message, vm);
|
|
741
|
+
}
|
|
712
742
|
/*
|
|
713
743
|
* Copyright (c) 2018, salesforce.com, inc.
|
|
714
744
|
* All rights reserved.
|
|
@@ -3072,8 +3102,10 @@ for (const [elementProp, rendererMethod] of childGetters) {
|
|
|
3072
3102
|
}
|
|
3073
3103
|
|
|
3074
3104
|
return renderer[rendererMethod](elm);
|
|
3075
|
-
}
|
|
3105
|
+
},
|
|
3076
3106
|
|
|
3107
|
+
configurable: true,
|
|
3108
|
+
enumerable: true
|
|
3077
3109
|
};
|
|
3078
3110
|
}
|
|
3079
3111
|
|
|
@@ -3093,8 +3125,11 @@ for (const queryMethod of queryMethods) {
|
|
|
3093
3125
|
}
|
|
3094
3126
|
|
|
3095
3127
|
return renderer[queryMethod](elm, arg);
|
|
3096
|
-
}
|
|
3128
|
+
},
|
|
3097
3129
|
|
|
3130
|
+
configurable: true,
|
|
3131
|
+
enumerable: true,
|
|
3132
|
+
writable: true
|
|
3098
3133
|
};
|
|
3099
3134
|
}
|
|
3100
3135
|
|
|
@@ -3689,15 +3724,14 @@ function registerTemplate(tpl) {
|
|
|
3689
3724
|
return tpl;
|
|
3690
3725
|
}
|
|
3691
3726
|
/**
|
|
3692
|
-
* EXPERIMENTAL: This function acts like a hook for Lightning Locker
|
|
3693
|
-
*
|
|
3694
|
-
* This API is subject to change or being removed.
|
|
3727
|
+
* EXPERIMENTAL: This function acts like a hook for Lightning Locker Service and other similar
|
|
3728
|
+
* libraries to sanitize vulnerable attributes.
|
|
3695
3729
|
*/
|
|
3696
3730
|
|
|
3697
3731
|
|
|
3698
3732
|
function sanitizeAttribute(tagName, namespaceUri, attrName, attrValue) {
|
|
3699
|
-
// locker-service patches this function during runtime to sanitize vulnerable attributes.
|
|
3700
|
-
//
|
|
3733
|
+
// locker-service patches this function during runtime to sanitize vulnerable attributes. When
|
|
3734
|
+
// ran off-core this function becomes a noop and returns the user authored value.
|
|
3701
3735
|
return attrValue;
|
|
3702
3736
|
}
|
|
3703
3737
|
/*
|
|
@@ -4133,7 +4167,7 @@ function createComponentDef(Ctor) {
|
|
|
4133
4167
|
if (!isUndefined$1(ctorShadowSupportMode)) {
|
|
4134
4168
|
assert.invariant(ctorShadowSupportMode === "any"
|
|
4135
4169
|
/* Any */
|
|
4136
|
-
|| ctorShadowSupportMode === "
|
|
4170
|
+
|| ctorShadowSupportMode === "reset"
|
|
4137
4171
|
/* Default */
|
|
4138
4172
|
, `Invalid value for static property shadowSupportMode: '${ctorShadowSupportMode}'`);
|
|
4139
4173
|
}
|
|
@@ -4295,7 +4329,7 @@ const lightingElementDef = {
|
|
|
4295
4329
|
renderMode: 1
|
|
4296
4330
|
/* Shadow */
|
|
4297
4331
|
,
|
|
4298
|
-
shadowSupportMode: "
|
|
4332
|
+
shadowSupportMode: "reset"
|
|
4299
4333
|
/* Default */
|
|
4300
4334
|
,
|
|
4301
4335
|
wire: EmptyObject,
|
|
@@ -4444,6 +4478,17 @@ function createElmHook(vnode) {
|
|
|
4444
4478
|
modComputedStyle.create(vnode);
|
|
4445
4479
|
}
|
|
4446
4480
|
|
|
4481
|
+
function hydrateElmHook(vnode) {
|
|
4482
|
+
modEvents.create(vnode); // Attrs are already on the element.
|
|
4483
|
+
// modAttrs.create(vnode);
|
|
4484
|
+
|
|
4485
|
+
modProps.create(vnode); // Already set.
|
|
4486
|
+
// modStaticClassName.create(vnode);
|
|
4487
|
+
// modStaticStyle.create(vnode);
|
|
4488
|
+
// modComputedClassName.create(vnode);
|
|
4489
|
+
// modComputedStyle.create(vnode);
|
|
4490
|
+
}
|
|
4491
|
+
|
|
4447
4492
|
function fallbackElmHook(elm, vnode) {
|
|
4448
4493
|
const {
|
|
4449
4494
|
owner
|
|
@@ -4615,6 +4660,179 @@ function createChildrenHook(vnode) {
|
|
|
4615
4660
|
}
|
|
4616
4661
|
}
|
|
4617
4662
|
|
|
4663
|
+
function isElementNode(node) {
|
|
4664
|
+
// eslint-disable-next-line lwc-internal/no-global-node
|
|
4665
|
+
return node.nodeType === Node.ELEMENT_NODE;
|
|
4666
|
+
}
|
|
4667
|
+
|
|
4668
|
+
function vnodesAndElementHaveCompatibleAttrs(vnode, elm) {
|
|
4669
|
+
const {
|
|
4670
|
+
data: {
|
|
4671
|
+
attrs = {}
|
|
4672
|
+
},
|
|
4673
|
+
owner: {
|
|
4674
|
+
renderer
|
|
4675
|
+
}
|
|
4676
|
+
} = vnode;
|
|
4677
|
+
let nodesAreCompatible = true; // Validate attributes, though we could always recovery from those by running the update mods.
|
|
4678
|
+
// Note: intentionally ONLY matching vnodes.attrs to elm.attrs, in case SSR is adding extra attributes.
|
|
4679
|
+
|
|
4680
|
+
for (const [attrName, attrValue] of Object.entries(attrs)) {
|
|
4681
|
+
const elmAttrValue = renderer.getAttribute(elm, attrName);
|
|
4682
|
+
|
|
4683
|
+
if (attrValue !== elmAttrValue) {
|
|
4684
|
+
logError(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: attribute "${attrName}" has different values, expected "${attrValue}" but found "${elmAttrValue}"`, vnode.owner);
|
|
4685
|
+
nodesAreCompatible = false;
|
|
4686
|
+
}
|
|
4687
|
+
}
|
|
4688
|
+
|
|
4689
|
+
return nodesAreCompatible;
|
|
4690
|
+
}
|
|
4691
|
+
|
|
4692
|
+
function vnodesAndElementHaveCompatibleClass(vnode, elm) {
|
|
4693
|
+
const {
|
|
4694
|
+
data: {
|
|
4695
|
+
className,
|
|
4696
|
+
classMap
|
|
4697
|
+
},
|
|
4698
|
+
owner: {
|
|
4699
|
+
renderer
|
|
4700
|
+
}
|
|
4701
|
+
} = vnode;
|
|
4702
|
+
let nodesAreCompatible = true;
|
|
4703
|
+
let vnodeClassName;
|
|
4704
|
+
|
|
4705
|
+
if (!isUndefined$1(className) && className !== elm.className) {
|
|
4706
|
+
// className is used when class is bound to an expr.
|
|
4707
|
+
nodesAreCompatible = false;
|
|
4708
|
+
vnodeClassName = className;
|
|
4709
|
+
} else if (!isUndefined$1(classMap)) {
|
|
4710
|
+
// classMap is used when class is set to static value.
|
|
4711
|
+
const classList = renderer.getClassList(elm);
|
|
4712
|
+
let computedClassName = ''; // all classes from the vnode should be in the element.classList
|
|
4713
|
+
|
|
4714
|
+
for (const name in classMap) {
|
|
4715
|
+
computedClassName += ' ' + name;
|
|
4716
|
+
|
|
4717
|
+
if (!classList.contains(name)) {
|
|
4718
|
+
nodesAreCompatible = false;
|
|
4719
|
+
}
|
|
4720
|
+
}
|
|
4721
|
+
|
|
4722
|
+
vnodeClassName = computedClassName.trim();
|
|
4723
|
+
|
|
4724
|
+
if (classList.length > keys(classMap).length) {
|
|
4725
|
+
nodesAreCompatible = false;
|
|
4726
|
+
}
|
|
4727
|
+
}
|
|
4728
|
+
|
|
4729
|
+
if (!nodesAreCompatible) {
|
|
4730
|
+
logError(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: attribute "class" has different values, expected "${vnodeClassName}" but found "${elm.className}"`, vnode.owner);
|
|
4731
|
+
}
|
|
4732
|
+
|
|
4733
|
+
return nodesAreCompatible;
|
|
4734
|
+
}
|
|
4735
|
+
|
|
4736
|
+
function vnodesAndElementHaveCompatibleStyle(vnode, elm) {
|
|
4737
|
+
const {
|
|
4738
|
+
data: {
|
|
4739
|
+
style,
|
|
4740
|
+
styleDecls
|
|
4741
|
+
},
|
|
4742
|
+
owner: {
|
|
4743
|
+
renderer
|
|
4744
|
+
}
|
|
4745
|
+
} = vnode;
|
|
4746
|
+
const elmStyle = renderer.getAttribute(elm, 'style') || '';
|
|
4747
|
+
let vnodeStyle;
|
|
4748
|
+
let nodesAreCompatible = true;
|
|
4749
|
+
|
|
4750
|
+
if (!isUndefined$1(style) && style !== elmStyle) {
|
|
4751
|
+
nodesAreCompatible = false;
|
|
4752
|
+
vnodeStyle = style;
|
|
4753
|
+
} else if (!isUndefined$1(styleDecls)) {
|
|
4754
|
+
const parsedVnodeStyle = parseStyleText(elmStyle);
|
|
4755
|
+
const expectedStyle = []; // styleMap is used when style is set to static value.
|
|
4756
|
+
|
|
4757
|
+
for (let i = 0, n = styleDecls.length; i < n; i++) {
|
|
4758
|
+
const [prop, value, important] = styleDecls[i];
|
|
4759
|
+
expectedStyle.push(`${prop}: ${value + (important ? ' important!' : '')}`);
|
|
4760
|
+
const parsedPropValue = parsedVnodeStyle[prop];
|
|
4761
|
+
|
|
4762
|
+
if (isUndefined$1(parsedPropValue)) {
|
|
4763
|
+
nodesAreCompatible = false;
|
|
4764
|
+
} else if (!parsedPropValue.startsWith(value)) {
|
|
4765
|
+
nodesAreCompatible = false;
|
|
4766
|
+
} else if (important && !parsedPropValue.endsWith('!important')) {
|
|
4767
|
+
nodesAreCompatible = false;
|
|
4768
|
+
}
|
|
4769
|
+
}
|
|
4770
|
+
|
|
4771
|
+
if (keys(parsedVnodeStyle).length > styleDecls.length) {
|
|
4772
|
+
nodesAreCompatible = false;
|
|
4773
|
+
}
|
|
4774
|
+
|
|
4775
|
+
vnodeStyle = ArrayJoin.call(expectedStyle, ';');
|
|
4776
|
+
}
|
|
4777
|
+
|
|
4778
|
+
if (!nodesAreCompatible) {
|
|
4779
|
+
// style is used when class is bound to an expr.
|
|
4780
|
+
logError(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: attribute "style" has different values, expected "${vnodeStyle}" but found "${elmStyle}".`, vnode.owner);
|
|
4781
|
+
}
|
|
4782
|
+
|
|
4783
|
+
return nodesAreCompatible;
|
|
4784
|
+
}
|
|
4785
|
+
|
|
4786
|
+
function throwHydrationError() {
|
|
4787
|
+
assert.fail('Server rendered elements do not match client side generated elements');
|
|
4788
|
+
}
|
|
4789
|
+
|
|
4790
|
+
function hydrateChildrenHook(elmChildren, children, vm) {
|
|
4791
|
+
var _a, _b;
|
|
4792
|
+
|
|
4793
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
4794
|
+
const filteredVNodes = ArrayFilter.call(children, vnode => !!vnode);
|
|
4795
|
+
|
|
4796
|
+
if (elmChildren.length !== filteredVNodes.length) {
|
|
4797
|
+
logError(`Hydration mismatch: incorrect number of rendered nodes, expected ${filteredVNodes.length} but found ${elmChildren.length}.`, vm);
|
|
4798
|
+
throwHydrationError();
|
|
4799
|
+
}
|
|
4800
|
+
}
|
|
4801
|
+
|
|
4802
|
+
let elmCurrentChildIdx = 0;
|
|
4803
|
+
|
|
4804
|
+
for (let j = 0, n = children.length; j < n; j++) {
|
|
4805
|
+
const ch = children[j];
|
|
4806
|
+
|
|
4807
|
+
if (ch != null) {
|
|
4808
|
+
const childNode = elmChildren[elmCurrentChildIdx];
|
|
4809
|
+
|
|
4810
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
4811
|
+
// VComments and VTexts validation is handled in their hooks
|
|
4812
|
+
if (isElementNode(childNode)) {
|
|
4813
|
+
if (((_a = ch.sel) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== childNode.tagName.toLowerCase()) {
|
|
4814
|
+
logError(`Hydration mismatch: expecting element with tag "${(_b = ch.sel) === null || _b === void 0 ? void 0 : _b.toLowerCase()}" but found "${childNode.tagName.toLowerCase()}".`, vm);
|
|
4815
|
+
throwHydrationError();
|
|
4816
|
+
} // Note: props are not yet set
|
|
4817
|
+
|
|
4818
|
+
|
|
4819
|
+
const hasIncompatibleAttrs = vnodesAndElementHaveCompatibleAttrs(ch, childNode);
|
|
4820
|
+
const hasIncompatibleClass = vnodesAndElementHaveCompatibleClass(ch, childNode);
|
|
4821
|
+
const hasIncompatibleStyle = vnodesAndElementHaveCompatibleStyle(ch, childNode);
|
|
4822
|
+
const isVNodeAndElementCompatible = hasIncompatibleAttrs && hasIncompatibleClass && hasIncompatibleStyle;
|
|
4823
|
+
|
|
4824
|
+
if (!isVNodeAndElementCompatible) {
|
|
4825
|
+
throwHydrationError();
|
|
4826
|
+
}
|
|
4827
|
+
}
|
|
4828
|
+
}
|
|
4829
|
+
|
|
4830
|
+
ch.hook.hydrate(ch, childNode);
|
|
4831
|
+
elmCurrentChildIdx++;
|
|
4832
|
+
}
|
|
4833
|
+
}
|
|
4834
|
+
}
|
|
4835
|
+
|
|
4618
4836
|
function updateCustomElmHook(oldVnode, vnode) {
|
|
4619
4837
|
// Attrs need to be applied to element before props
|
|
4620
4838
|
// IE11 will wipe out value on radio inputs if value
|
|
@@ -4716,7 +4934,26 @@ const TextHook = {
|
|
|
4716
4934
|
update: updateNodeHook,
|
|
4717
4935
|
insert: insertNodeHook,
|
|
4718
4936
|
move: insertNodeHook,
|
|
4719
|
-
remove: removeNodeHook
|
|
4937
|
+
remove: removeNodeHook,
|
|
4938
|
+
hydrate: (vNode, node) => {
|
|
4939
|
+
var _a;
|
|
4940
|
+
|
|
4941
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
4942
|
+
// eslint-disable-next-line lwc-internal/no-global-node
|
|
4943
|
+
if (node.nodeType !== Node.TEXT_NODE) {
|
|
4944
|
+
logError('Hydration mismatch: incorrect node type received', vNode.owner);
|
|
4945
|
+
assert.fail('Hydration mismatch: incorrect node type received.');
|
|
4946
|
+
}
|
|
4947
|
+
|
|
4948
|
+
if (node.nodeValue !== vNode.text) {
|
|
4949
|
+
logWarn('Hydration mismatch: text values do not match, will recover from the difference', vNode.owner);
|
|
4950
|
+
}
|
|
4951
|
+
} // always set the text value to the one from the vnode.
|
|
4952
|
+
|
|
4953
|
+
|
|
4954
|
+
node.nodeValue = (_a = vNode.text) !== null && _a !== void 0 ? _a : null;
|
|
4955
|
+
vNode.elm = node;
|
|
4956
|
+
}
|
|
4720
4957
|
};
|
|
4721
4958
|
const CommentHook = {
|
|
4722
4959
|
create: vnode => {
|
|
@@ -4734,7 +4971,26 @@ const CommentHook = {
|
|
|
4734
4971
|
update: updateNodeHook,
|
|
4735
4972
|
insert: insertNodeHook,
|
|
4736
4973
|
move: insertNodeHook,
|
|
4737
|
-
remove: removeNodeHook
|
|
4974
|
+
remove: removeNodeHook,
|
|
4975
|
+
hydrate: (vNode, node) => {
|
|
4976
|
+
var _a;
|
|
4977
|
+
|
|
4978
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
4979
|
+
// eslint-disable-next-line lwc-internal/no-global-node
|
|
4980
|
+
if (node.nodeType !== Node.COMMENT_NODE) {
|
|
4981
|
+
logError('Hydration mismatch: incorrect node type received', vNode.owner);
|
|
4982
|
+
assert.fail('Hydration mismatch: incorrect node type received.');
|
|
4983
|
+
}
|
|
4984
|
+
|
|
4985
|
+
if (node.nodeValue !== vNode.text) {
|
|
4986
|
+
logWarn('Hydration mismatch: comment values do not match, will recover from the difference', vNode.owner);
|
|
4987
|
+
}
|
|
4988
|
+
} // always set the text value to the one from the vnode.
|
|
4989
|
+
|
|
4990
|
+
|
|
4991
|
+
node.nodeValue = (_a = vNode.text) !== null && _a !== void 0 ? _a : null;
|
|
4992
|
+
vNode.elm = node;
|
|
4993
|
+
}
|
|
4738
4994
|
}; // insert is called after update, which is used somewhere else (via a module)
|
|
4739
4995
|
// to mark the vm as inserted, that means we cannot use update as the main channel
|
|
4740
4996
|
// to rehydrate when dirty, because sometimes the element is not inserted just yet,
|
|
@@ -4774,6 +5030,38 @@ const ElementHook = {
|
|
|
4774
5030
|
remove: (vnode, parentNode) => {
|
|
4775
5031
|
removeNodeHook(vnode, parentNode);
|
|
4776
5032
|
removeElmHook(vnode);
|
|
5033
|
+
},
|
|
5034
|
+
hydrate: (vnode, node) => {
|
|
5035
|
+
const elm = node;
|
|
5036
|
+
vnode.elm = elm;
|
|
5037
|
+
const {
|
|
5038
|
+
context
|
|
5039
|
+
} = vnode.data;
|
|
5040
|
+
const isDomManual = Boolean(!isUndefined$1(context) && !isUndefined$1(context.lwc) && context.lwc.dom === "manual"
|
|
5041
|
+
/* manual */
|
|
5042
|
+
);
|
|
5043
|
+
|
|
5044
|
+
if (isDomManual) {
|
|
5045
|
+
// it may be that this element has lwc:inner-html, we need to diff and in case are the same,
|
|
5046
|
+
// remove the innerHTML from props so it reuses the existing dom elements.
|
|
5047
|
+
const {
|
|
5048
|
+
props
|
|
5049
|
+
} = vnode.data;
|
|
5050
|
+
|
|
5051
|
+
if (!isUndefined$1(props) && !isUndefined$1(props.innerHTML)) {
|
|
5052
|
+
if (elm.innerHTML === props.innerHTML) {
|
|
5053
|
+
delete props.innerHTML;
|
|
5054
|
+
} else {
|
|
5055
|
+
logWarn(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: innerHTML values do not match for element, will recover from the difference`, vnode.owner);
|
|
5056
|
+
}
|
|
5057
|
+
}
|
|
5058
|
+
}
|
|
5059
|
+
|
|
5060
|
+
hydrateElmHook(vnode);
|
|
5061
|
+
|
|
5062
|
+
if (!isDomManual) {
|
|
5063
|
+
hydrateChildrenHook(vnode.elm.childNodes, vnode.children, vnode.owner);
|
|
5064
|
+
}
|
|
4777
5065
|
}
|
|
4778
5066
|
};
|
|
4779
5067
|
const CustomElementHook = {
|
|
@@ -4865,6 +5153,44 @@ const CustomElementHook = {
|
|
|
4865
5153
|
// will take care of disconnecting any child VM attached to its shadow as well.
|
|
4866
5154
|
removeVM(vm);
|
|
4867
5155
|
}
|
|
5156
|
+
},
|
|
5157
|
+
hydrate: (vnode, elm) => {
|
|
5158
|
+
// the element is created, but the vm is not
|
|
5159
|
+
const {
|
|
5160
|
+
sel,
|
|
5161
|
+
mode,
|
|
5162
|
+
ctor,
|
|
5163
|
+
owner
|
|
5164
|
+
} = vnode;
|
|
5165
|
+
const def = getComponentInternalDef(ctor);
|
|
5166
|
+
createVM(elm, def, {
|
|
5167
|
+
mode,
|
|
5168
|
+
owner,
|
|
5169
|
+
tagName: sel,
|
|
5170
|
+
renderer: owner.renderer
|
|
5171
|
+
});
|
|
5172
|
+
vnode.elm = elm;
|
|
5173
|
+
const vm = getAssociatedVM(elm);
|
|
5174
|
+
allocateChildrenHook(vnode, vm);
|
|
5175
|
+
hydrateElmHook(vnode); // Insert hook section:
|
|
5176
|
+
|
|
5177
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
5178
|
+
assert.isTrue(vm.state === 0
|
|
5179
|
+
/* created */
|
|
5180
|
+
, `${vm} cannot be recycled.`);
|
|
5181
|
+
}
|
|
5182
|
+
|
|
5183
|
+
runConnectedCallback(vm);
|
|
5184
|
+
|
|
5185
|
+
if (vm.renderMode !== 0
|
|
5186
|
+
/* Light */
|
|
5187
|
+
) {
|
|
5188
|
+
// VM is not rendering in Light DOM, we can proceed and hydrate the slotted content.
|
|
5189
|
+
// Note: for Light DOM, this is handled while hydrating the VM
|
|
5190
|
+
hydrateChildrenHook(vnode.elm.childNodes, vnode.children, vm);
|
|
5191
|
+
}
|
|
5192
|
+
|
|
5193
|
+
hydrateVM(vm);
|
|
4868
5194
|
}
|
|
4869
5195
|
};
|
|
4870
5196
|
|
|
@@ -5073,7 +5399,7 @@ function i(iterable, factory) {
|
|
|
5073
5399
|
next = iterator.next();
|
|
5074
5400
|
last = next.done; // template factory logic based on the previous collected value
|
|
5075
5401
|
|
|
5076
|
-
const vnode = factory(value, j, j === 0, last);
|
|
5402
|
+
const vnode = factory(value, j, j === 0, last === true);
|
|
5077
5403
|
|
|
5078
5404
|
if (isArray$1(vnode)) {
|
|
5079
5405
|
ArrayPush$1.apply(list, vnode);
|
|
@@ -5340,24 +5666,48 @@ function sc(vnodes) {
|
|
|
5340
5666
|
markAsDynamicChildren(vnodes);
|
|
5341
5667
|
return vnodes;
|
|
5342
5668
|
}
|
|
5669
|
+
/**
|
|
5670
|
+
* EXPERIMENTAL: This function acts like a hook for Lightning Locker Service and other similar
|
|
5671
|
+
* libraries to sanitize HTML content. This hook process the content passed via the template to
|
|
5672
|
+
* lwc:inner-html directive.
|
|
5673
|
+
* It is meant to be overridden with setSanitizeHtmlContentHook, it throws an error by default.
|
|
5674
|
+
*/
|
|
5343
5675
|
|
|
5344
|
-
|
|
5345
|
-
|
|
5346
|
-
|
|
5347
|
-
|
|
5348
|
-
|
|
5349
|
-
|
|
5350
|
-
|
|
5351
|
-
|
|
5352
|
-
|
|
5353
|
-
|
|
5354
|
-
|
|
5355
|
-
|
|
5356
|
-
|
|
5357
|
-
|
|
5358
|
-
|
|
5359
|
-
|
|
5360
|
-
|
|
5676
|
+
|
|
5677
|
+
let sanitizeHtmlContentHook = () => {
|
|
5678
|
+
// locker-service patches this function during runtime to sanitize HTML content.
|
|
5679
|
+
throw new Error('sanitizeHtmlContent hook must be implemented.');
|
|
5680
|
+
};
|
|
5681
|
+
/**
|
|
5682
|
+
* Sets the sanitizeHtmlContentHook.
|
|
5683
|
+
*/
|
|
5684
|
+
|
|
5685
|
+
|
|
5686
|
+
function setSanitizeHtmlContentHook(newHookImpl) {
|
|
5687
|
+
sanitizeHtmlContentHook = newHookImpl;
|
|
5688
|
+
} // [s]anitize [h]tml [c]ontent
|
|
5689
|
+
|
|
5690
|
+
|
|
5691
|
+
function shc(content) {
|
|
5692
|
+
return sanitizeHtmlContentHook(content);
|
|
5693
|
+
}
|
|
5694
|
+
|
|
5695
|
+
const api = freeze({
|
|
5696
|
+
s,
|
|
5697
|
+
h,
|
|
5698
|
+
c,
|
|
5699
|
+
i,
|
|
5700
|
+
f,
|
|
5701
|
+
t,
|
|
5702
|
+
d,
|
|
5703
|
+
b,
|
|
5704
|
+
k,
|
|
5705
|
+
co,
|
|
5706
|
+
dc,
|
|
5707
|
+
ti,
|
|
5708
|
+
gid,
|
|
5709
|
+
fid,
|
|
5710
|
+
shc
|
|
5361
5711
|
});
|
|
5362
5712
|
/*
|
|
5363
5713
|
* Copyright (c) 2018, salesforce.com, inc.
|
|
@@ -5371,12 +5721,12 @@ function makeHostToken(token) {
|
|
|
5371
5721
|
}
|
|
5372
5722
|
|
|
5373
5723
|
function createInlineStyleVNode(content) {
|
|
5374
|
-
return h('style', {
|
|
5724
|
+
return api.h('style', {
|
|
5375
5725
|
key: 'style',
|
|
5376
5726
|
attrs: {
|
|
5377
5727
|
type: 'text/css'
|
|
5378
5728
|
}
|
|
5379
|
-
}, [t(content)]);
|
|
5729
|
+
}, [api.t(content)]);
|
|
5380
5730
|
}
|
|
5381
5731
|
|
|
5382
5732
|
function updateStylesheetToken(vm, template) {
|
|
@@ -5529,7 +5879,10 @@ function createStylesheet(vm, stylesheets) {
|
|
|
5529
5879
|
for (let i = 0; i < stylesheets.length; i++) {
|
|
5530
5880
|
renderer.insertGlobalStylesheet(stylesheets[i]);
|
|
5531
5881
|
}
|
|
5532
|
-
} else if (renderer.ssr) {
|
|
5882
|
+
} else if (renderer.ssr || renderer.isHydrating) {
|
|
5883
|
+
// Note: We need to ensure that during hydration, the stylesheets method is the same as those in ssr.
|
|
5884
|
+
// This works in the client, because the stylesheets are created, and cached in the VM
|
|
5885
|
+
// the first time the VM renders.
|
|
5533
5886
|
// native shadow or light DOM, SSR
|
|
5534
5887
|
const combinedStylesheetContent = ArrayJoin.call(stylesheets, '\n');
|
|
5535
5888
|
return createInlineStyleVNode(combinedStylesheetContent);
|
|
@@ -6109,6 +6462,10 @@ function disconnectRootElement(elm) {
|
|
|
6109
6462
|
|
|
6110
6463
|
function appendVM(vm) {
|
|
6111
6464
|
rehydrate(vm);
|
|
6465
|
+
}
|
|
6466
|
+
|
|
6467
|
+
function hydrateVM(vm) {
|
|
6468
|
+
hydrate(vm);
|
|
6112
6469
|
} // just in case the component comes back, with this we guarantee re-rendering it
|
|
6113
6470
|
// while preventing any attempt to rehydration until after reinsertion.
|
|
6114
6471
|
|
|
@@ -6342,6 +6699,22 @@ function rehydrate(vm) {
|
|
|
6342
6699
|
}
|
|
6343
6700
|
}
|
|
6344
6701
|
|
|
6702
|
+
function hydrate(vm) {
|
|
6703
|
+
if (isTrue(vm.isDirty)) {
|
|
6704
|
+
// manually diffing/patching here.
|
|
6705
|
+
// This routine is:
|
|
6706
|
+
// patchShadowRoot(vm, children);
|
|
6707
|
+
// -> addVnodes.
|
|
6708
|
+
const children = renderComponent$1(vm);
|
|
6709
|
+
vm.children = children;
|
|
6710
|
+
const vmChildren = vm.renderMode === 0
|
|
6711
|
+
/* Light */
|
|
6712
|
+
? vm.elm.childNodes : vm.elm.shadowRoot.childNodes;
|
|
6713
|
+
hydrateChildrenHook(vmChildren, children, vm);
|
|
6714
|
+
runRenderedCallback(vm);
|
|
6715
|
+
}
|
|
6716
|
+
}
|
|
6717
|
+
|
|
6345
6718
|
function patchShadowRoot(vm, newCh) {
|
|
6346
6719
|
const {
|
|
6347
6720
|
children: oldCh
|
|
@@ -7140,7 +7513,22 @@ function readonly(obj) {
|
|
|
7140
7513
|
|
|
7141
7514
|
return reactiveMembrane.getReadOnlyProxy(obj);
|
|
7142
7515
|
}
|
|
7143
|
-
/*
|
|
7516
|
+
/*
|
|
7517
|
+
* Copyright (c) 2018, salesforce.com, inc.
|
|
7518
|
+
* All rights reserved.
|
|
7519
|
+
* SPDX-License-Identifier: MIT
|
|
7520
|
+
* For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
|
|
7521
|
+
*/
|
|
7522
|
+
|
|
7523
|
+
|
|
7524
|
+
let hooksAreSet = false;
|
|
7525
|
+
|
|
7526
|
+
function setHooks(hooks) {
|
|
7527
|
+
assert.isFalse(hooksAreSet, 'Hooks are already overridden, only one definition is allowed.');
|
|
7528
|
+
hooksAreSet = true;
|
|
7529
|
+
setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
|
|
7530
|
+
}
|
|
7531
|
+
/* version: 2.5.8 */
|
|
7144
7532
|
|
|
7145
7533
|
/*
|
|
7146
7534
|
* Copyright (c) 2020, salesforce.com, inc.
|
|
@@ -7155,6 +7543,7 @@ var HostNodeType;
|
|
|
7155
7543
|
(function (HostNodeType) {
|
|
7156
7544
|
HostNodeType["Text"] = "text";
|
|
7157
7545
|
HostNodeType["Comment"] = "comment";
|
|
7546
|
+
HostNodeType["Raw"] = "raw";
|
|
7158
7547
|
HostNodeType["Element"] = "element";
|
|
7159
7548
|
HostNodeType["ShadowRoot"] = "shadow-root";
|
|
7160
7549
|
})(HostNodeType || (HostNodeType = {}));
|
|
@@ -7169,7 +7558,7 @@ var HostNodeType;
|
|
|
7169
7558
|
const CLASSNAMES_SEPARATOR = /\s+/g;
|
|
7170
7559
|
|
|
7171
7560
|
function classNameToTokenList(value) {
|
|
7172
|
-
return new Set(value.
|
|
7561
|
+
return new Set(value.split(CLASSNAMES_SEPARATOR).filter(str => str.length));
|
|
7173
7562
|
}
|
|
7174
7563
|
|
|
7175
7564
|
function tokenListToClassName(values) {
|
|
@@ -7231,6 +7620,11 @@ class HTMLElement$1 {
|
|
|
7231
7620
|
|
|
7232
7621
|
const renderer = {
|
|
7233
7622
|
ssr: true,
|
|
7623
|
+
|
|
7624
|
+
get isHydrating() {
|
|
7625
|
+
return false;
|
|
7626
|
+
},
|
|
7627
|
+
|
|
7234
7628
|
isNativeShadowDefined: false,
|
|
7235
7629
|
isSyntheticShadowDefined: false,
|
|
7236
7630
|
|
|
@@ -7334,7 +7728,17 @@ const renderer = {
|
|
|
7334
7728
|
}
|
|
7335
7729
|
|
|
7336
7730
|
if (node.type === HostNodeType.Element) {
|
|
7337
|
-
const attrName = htmlPropertyToAttribute(key);
|
|
7731
|
+
const attrName = htmlPropertyToAttribute(key);
|
|
7732
|
+
|
|
7733
|
+
if (key === 'innerHTML') {
|
|
7734
|
+
node.children = [{
|
|
7735
|
+
type: HostNodeType.Raw,
|
|
7736
|
+
parent: node,
|
|
7737
|
+
value
|
|
7738
|
+
}];
|
|
7739
|
+
return;
|
|
7740
|
+
} // Handle all the boolean properties.
|
|
7741
|
+
|
|
7338
7742
|
|
|
7339
7743
|
if (isBooleanAttribute(attrName, node.name)) {
|
|
7340
7744
|
return value === true ? this.setAttribute(node, attrName, '') : this.removeAttribute(node, attrName);
|
|
@@ -7428,18 +7832,18 @@ const renderer = {
|
|
|
7428
7832
|
},
|
|
7429
7833
|
|
|
7430
7834
|
setCSSStyleProperty(element, name, value, important) {
|
|
7431
|
-
|
|
7835
|
+
const styleAttribute = element.attributes.find(attr => attr.name === 'style' && isNull(attr.namespace));
|
|
7836
|
+
const serializedProperty = `${name}: ${value}${important ? ' !important' : ''}`;
|
|
7432
7837
|
|
|
7433
7838
|
if (isUndefined$1(styleAttribute)) {
|
|
7434
|
-
|
|
7839
|
+
element.attributes.push({
|
|
7435
7840
|
name: 'style',
|
|
7436
7841
|
namespace: null,
|
|
7437
|
-
value:
|
|
7438
|
-
};
|
|
7439
|
-
|
|
7842
|
+
value: serializedProperty
|
|
7843
|
+
});
|
|
7844
|
+
} else {
|
|
7845
|
+
styleAttribute.value += `; ${serializedProperty}`;
|
|
7440
7846
|
}
|
|
7441
|
-
|
|
7442
|
-
styleAttribute.value = `${styleAttribute.value}; ${name}: ${value}${important ? ' !important' : ''}`;
|
|
7443
7847
|
},
|
|
7444
7848
|
|
|
7445
7849
|
isConnected(node) {
|
|
@@ -7522,6 +7926,9 @@ function serializeChildNodes(children) {
|
|
|
7522
7926
|
case HostNodeType.Comment:
|
|
7523
7927
|
return `<!--${htmlEscape(child.value)}-->`;
|
|
7524
7928
|
|
|
7929
|
+
case HostNodeType.Raw:
|
|
7930
|
+
return child.value;
|
|
7931
|
+
|
|
7525
7932
|
case HostNodeType.Element:
|
|
7526
7933
|
return serializeElement(child);
|
|
7527
7934
|
}
|
|
@@ -7617,6 +8024,6 @@ function renderComponent(tagName, Ctor, props = {}) {
|
|
|
7617
8024
|
|
|
7618
8025
|
freeze(LightningElement);
|
|
7619
8026
|
seal(LightningElement.prototype);
|
|
7620
|
-
/* version: 2.5.
|
|
8027
|
+
/* version: 2.5.8 */
|
|
7621
8028
|
|
|
7622
|
-
export { LightningElement, api$1 as api, createContextProvider, getComponentDef, isComponentConstructor, readonly, register, registerComponent, registerDecorators, registerTemplate, renderComponent, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, track, unwrap, wire };
|
|
8029
|
+
export { LightningElement, api$1 as api, createContextProvider, getComponentDef, isComponentConstructor, readonly, register, registerComponent, registerDecorators, registerTemplate, renderComponent, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, track, unwrap, wire };
|