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