lwc 2.20.2 → 2.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/engine-dom/esm/es2017/engine-dom.js +203 -171
  2. package/dist/engine-dom/iife/es2017/engine-dom.js +203 -171
  3. package/dist/engine-dom/iife/es2017/engine-dom.min.js +1 -1
  4. package/dist/engine-dom/iife/es2017/engine-dom_debug.js +193 -161
  5. package/dist/engine-dom/iife/es5/engine-dom.js +288 -254
  6. package/dist/engine-dom/iife/es5/engine-dom.min.js +1 -1
  7. package/dist/engine-dom/iife/es5/engine-dom_debug.js +278 -243
  8. package/dist/engine-dom/umd/es2017/engine-dom.js +203 -171
  9. package/dist/engine-dom/umd/es2017/engine-dom.min.js +1 -1
  10. package/dist/engine-dom/umd/es2017/engine-dom_debug.js +193 -161
  11. package/dist/engine-dom/umd/es5/engine-dom.js +288 -254
  12. package/dist/engine-dom/umd/es5/engine-dom.min.js +1 -1
  13. package/dist/engine-dom/umd/es5/engine-dom_debug.js +278 -243
  14. package/dist/engine-server/commonjs/es2017/engine-server.js +280 -258
  15. package/dist/engine-server/commonjs/es2017/engine-server.min.js +1 -1
  16. package/dist/engine-server/esm/es2017/engine-server.js +280 -258
  17. package/dist/synthetic-shadow/esm/es2017/synthetic-shadow.js +3 -3
  18. package/dist/synthetic-shadow/iife/es2017/synthetic-shadow.js +3 -3
  19. package/dist/synthetic-shadow/iife/es2017/synthetic-shadow_debug.js +3 -3
  20. package/dist/synthetic-shadow/iife/es5/synthetic-shadow.js +3 -3
  21. package/dist/synthetic-shadow/iife/es5/synthetic-shadow_debug.js +3 -3
  22. package/dist/synthetic-shadow/umd/es2017/synthetic-shadow.js +3 -3
  23. package/dist/synthetic-shadow/umd/es2017/synthetic-shadow_debug.js +3 -3
  24. package/dist/synthetic-shadow/umd/es5/synthetic-shadow.js +3 -3
  25. package/dist/synthetic-shadow/umd/es5/synthetic-shadow_debug.js +3 -3
  26. package/dist/wire-service/esm/es2017/wire-service.js +2 -2
  27. package/dist/wire-service/iife/es2017/wire-service.js +2 -2
  28. package/dist/wire-service/iife/es2017/wire-service_debug.js +2 -2
  29. package/dist/wire-service/iife/es5/wire-service.js +2 -2
  30. package/dist/wire-service/iife/es5/wire-service_debug.js +2 -2
  31. package/dist/wire-service/umd/es2017/wire-service.js +2 -2
  32. package/dist/wire-service/umd/es2017/wire-service_debug.js +2 -2
  33. package/dist/wire-service/umd/es5/wire-service.js +2 -2
  34. package/dist/wire-service/umd/es5/wire-service_debug.js +2 -2
  35. package/package.json +7 -7
@@ -365,9 +365,9 @@ var LWC = (function (exports) {
365
365
  // Increment whenever the LWC template compiler changes
366
366
 
367
367
 
368
- var LWC_VERSION = "2.20.2";
368
+ var LWC_VERSION = "2.21.0";
369
369
  var LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
370
- /** version: 2.20.2 */
370
+ /** version: 2.21.0 */
371
371
 
372
372
  /*
373
373
  * Copyright (c) 2018, salesforce.com, inc.
@@ -546,7 +546,7 @@ var LWC = (function (exports) {
546
546
  setFeatureFlag(name, value);
547
547
  }
548
548
  }
549
- /** version: 2.20.2 */
549
+ /** version: 2.21.0 */
550
550
 
551
551
  /*
552
552
  * Copyright (c) 2018, salesforce.com, inc.
@@ -4116,6 +4116,241 @@ var LWC = (function (exports) {
4116
4116
  methods: publicMethods
4117
4117
  };
4118
4118
  }
4119
+ /*
4120
+ * Copyright (c) 2018, salesforce.com, inc.
4121
+ * All rights reserved.
4122
+ * SPDX-License-Identifier: MIT
4123
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
4124
+ */
4125
+
4126
+
4127
+ function makeHostToken(token) {
4128
+ return "".concat(token, "-host");
4129
+ }
4130
+
4131
+ function createInlineStyleVNode(content) {
4132
+ return api.h('style', {
4133
+ key: 'style',
4134
+ attrs: {
4135
+ type: 'text/css'
4136
+ }
4137
+ }, [api.t(content)]);
4138
+ }
4139
+
4140
+ function updateStylesheetToken(vm, template) {
4141
+ var elm = vm.elm,
4142
+ context = vm.context,
4143
+ renderMode = vm.renderMode,
4144
+ shadowMode = vm.shadowMode,
4145
+ _vm$renderer = vm.renderer,
4146
+ getClassList = _vm$renderer.getClassList,
4147
+ removeAttribute = _vm$renderer.removeAttribute,
4148
+ setAttribute = _vm$renderer.setAttribute;
4149
+ var newStylesheets = template.stylesheets,
4150
+ newStylesheetToken = template.stylesheetToken;
4151
+ var isSyntheticShadow = renderMode === 1
4152
+ /* RenderMode.Shadow */
4153
+ && shadowMode === 1
4154
+ /* ShadowMode.Synthetic */
4155
+ ;
4156
+ var hasScopedStyles = context.hasScopedStyles;
4157
+ var newToken;
4158
+ var newHasTokenInClass;
4159
+ var newHasTokenInAttribute; // Reset the styling token applied to the host element.
4160
+
4161
+ var oldToken = context.stylesheetToken,
4162
+ oldHasTokenInClass = context.hasTokenInClass,
4163
+ oldHasTokenInAttribute = context.hasTokenInAttribute;
4164
+
4165
+ if (!isUndefined$1(oldToken)) {
4166
+ if (oldHasTokenInClass) {
4167
+ getClassList(elm).remove(makeHostToken(oldToken));
4168
+ }
4169
+
4170
+ if (oldHasTokenInAttribute) {
4171
+ removeAttribute(elm, makeHostToken(oldToken));
4172
+ }
4173
+ } // Apply the new template styling token to the host element, if the new template has any
4174
+ // associated stylesheets. In the case of light DOM, also ensure there is at least one scoped stylesheet.
4175
+
4176
+
4177
+ if (!isUndefined$1(newStylesheets) && newStylesheets.length !== 0) {
4178
+ newToken = newStylesheetToken;
4179
+ } // Set the new styling token on the host element
4180
+
4181
+
4182
+ if (!isUndefined$1(newToken)) {
4183
+ if (hasScopedStyles) {
4184
+ getClassList(elm).add(makeHostToken(newToken));
4185
+ newHasTokenInClass = true;
4186
+ }
4187
+
4188
+ if (isSyntheticShadow) {
4189
+ setAttribute(elm, makeHostToken(newToken), '');
4190
+ newHasTokenInAttribute = true;
4191
+ }
4192
+ } // Update the styling tokens present on the context object.
4193
+
4194
+
4195
+ context.stylesheetToken = newToken;
4196
+ context.hasTokenInClass = newHasTokenInClass;
4197
+ context.hasTokenInAttribute = newHasTokenInAttribute;
4198
+ }
4199
+
4200
+ function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
4201
+ var content = [];
4202
+ var root;
4203
+
4204
+ for (var _i11 = 0; _i11 < stylesheets.length; _i11++) {
4205
+ var stylesheet = stylesheets[_i11];
4206
+
4207
+ if (isArray$1(stylesheet)) {
4208
+ ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
4209
+ } else {
4210
+ if (process.env.NODE_ENV !== 'production') {
4211
+ // Check for compiler version mismatch in dev mode only
4212
+ checkVersionMismatch(stylesheet, 'stylesheet'); // in dev-mode, we support hot swapping of stylesheet, which means that
4213
+ // the component instance might be attempting to use an old version of
4214
+ // the stylesheet, while internally, we have a replacement for it.
4215
+
4216
+ stylesheet = getStyleOrSwappedStyle(stylesheet);
4217
+ }
4218
+
4219
+ var isScopedCss = stylesheet[KEY__SCOPED_CSS]; // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
4220
+
4221
+ var scopeToken = isScopedCss || vm.shadowMode === 1
4222
+ /* ShadowMode.Synthetic */
4223
+ && vm.renderMode === 1
4224
+ /* RenderMode.Shadow */
4225
+ ? stylesheetToken : undefined; // Use the actual `:host` selector if we're rendering global CSS for light DOM, or if we're rendering
4226
+ // native shadow DOM. Synthetic shadow DOM never uses `:host`.
4227
+
4228
+ var useActualHostSelector = vm.renderMode === 0
4229
+ /* RenderMode.Light */
4230
+ ? !isScopedCss : vm.shadowMode === 0
4231
+ /* ShadowMode.Native */
4232
+ ; // Use the native :dir() pseudoclass only in native shadow DOM. Otherwise, in synthetic shadow,
4233
+ // we use an attribute selector on the host to simulate :dir().
4234
+
4235
+ var useNativeDirPseudoclass = void 0;
4236
+
4237
+ if (vm.renderMode === 1
4238
+ /* RenderMode.Shadow */
4239
+ ) {
4240
+ useNativeDirPseudoclass = vm.shadowMode === 0
4241
+ /* ShadowMode.Native */
4242
+ ;
4243
+ } else {
4244
+ // Light DOM components should only render `[dir]` if they're inside of a synthetic shadow root.
4245
+ // At the top level (root is null) or inside of a native shadow root, they should use `:dir()`.
4246
+ if (isUndefined$1(root)) {
4247
+ // Only calculate the root once as necessary
4248
+ root = getNearestShadowComponent(vm);
4249
+ }
4250
+
4251
+ useNativeDirPseudoclass = isNull(root) || root.shadowMode === 0
4252
+ /* ShadowMode.Native */
4253
+ ;
4254
+ }
4255
+
4256
+ ArrayPush$1.call(content, stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass));
4257
+ }
4258
+ }
4259
+
4260
+ return content;
4261
+ }
4262
+
4263
+ function getStylesheetsContent(vm, template) {
4264
+ var stylesheets = template.stylesheets,
4265
+ stylesheetToken = template.stylesheetToken;
4266
+ var content = [];
4267
+
4268
+ if (!isUndefined$1(stylesheets) && stylesheets.length !== 0) {
4269
+ content = evaluateStylesheetsContent(stylesheets, stylesheetToken, vm);
4270
+ }
4271
+
4272
+ return content;
4273
+ } // It might be worth caching this to avoid doing the lookup repeatedly, but
4274
+ // perf testing has not shown it to be a huge improvement yet:
4275
+ // https://github.com/salesforce/lwc/pull/2460#discussion_r691208892
4276
+
4277
+
4278
+ function getNearestShadowComponent(vm) {
4279
+ var owner = vm;
4280
+
4281
+ while (!isNull(owner)) {
4282
+ if (owner.renderMode === 1
4283
+ /* RenderMode.Shadow */
4284
+ ) {
4285
+ return owner;
4286
+ }
4287
+
4288
+ owner = owner.owner;
4289
+ }
4290
+
4291
+ return owner;
4292
+ }
4293
+ /**
4294
+ * If the component that is currently being rendered uses scoped styles,
4295
+ * this returns the unique token for that scoped stylesheet. Otherwise
4296
+ * it returns null.
4297
+ */
4298
+
4299
+
4300
+ function getScopeTokenClass(owner) {
4301
+ var cmpTemplate = owner.cmpTemplate,
4302
+ context = owner.context;
4303
+ return context.hasScopedStyles && (cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken) || null;
4304
+ }
4305
+
4306
+ function getNearestNativeShadowComponent(vm) {
4307
+ var owner = getNearestShadowComponent(vm);
4308
+
4309
+ if (!isNull(owner) && owner.shadowMode === 1
4310
+ /* ShadowMode.Synthetic */
4311
+ ) {
4312
+ // Synthetic-within-native is impossible. So if the nearest shadow component is
4313
+ // synthetic, we know we won't find a native component if we go any further.
4314
+ return null;
4315
+ }
4316
+
4317
+ return owner;
4318
+ }
4319
+
4320
+ function createStylesheet(vm, stylesheets) {
4321
+ var renderMode = vm.renderMode,
4322
+ shadowMode = vm.shadowMode,
4323
+ _vm$renderer2 = vm.renderer,
4324
+ ssr = _vm$renderer2.ssr,
4325
+ insertStylesheet = _vm$renderer2.insertStylesheet;
4326
+
4327
+ if (renderMode === 1
4328
+ /* RenderMode.Shadow */
4329
+ && shadowMode === 1
4330
+ /* ShadowMode.Synthetic */
4331
+ ) {
4332
+ for (var _i12 = 0; _i12 < stylesheets.length; _i12++) {
4333
+ insertStylesheet(stylesheets[_i12]);
4334
+ }
4335
+ } else if (ssr || vm.hydrated) {
4336
+ // Note: We need to ensure that during hydration, the stylesheets method is the same as those in ssr.
4337
+ // This works in the client, because the stylesheets are created, and cached in the VM
4338
+ // the first time the VM renders.
4339
+ // native shadow or light DOM, SSR
4340
+ return ArrayMap.call(stylesheets, createInlineStyleVNode);
4341
+ } else {
4342
+ // native shadow or light DOM, DOM renderer
4343
+ var root = getNearestNativeShadowComponent(vm); // null root means a global style
4344
+
4345
+ var target = isNull(root) ? undefined : root.shadowRoot;
4346
+
4347
+ for (var _i13 = 0; _i13 < stylesheets.length; _i13++) {
4348
+ insertStylesheet(stylesheets[_i13], target);
4349
+ }
4350
+ }
4351
+
4352
+ return null;
4353
+ }
4119
4354
  /*
4120
4355
  * Copyright (c) 2020, salesforce.com, inc.
4121
4356
  * All rights reserved.
@@ -4458,8 +4693,8 @@ var LWC = (function (exports) {
4458
4693
 
4459
4694
  var setCSSStyleProperty = renderer.setCSSStyleProperty;
4460
4695
 
4461
- for (var _i11 = 0; _i11 < styleDecls.length; _i11++) {
4462
- var _styleDecls$_i = _slicedToArray(styleDecls[_i11], 3),
4696
+ for (var _i14 = 0; _i14 < styleDecls.length; _i14++) {
4697
+ var _styleDecls$_i = _slicedToArray(styleDecls[_i14], 3),
4463
4698
  prop = _styleDecls$_i[0],
4464
4699
  value = _styleDecls$_i[1],
4465
4700
  important = _styleDecls$_i[2];
@@ -4815,15 +5050,13 @@ var LWC = (function (exports) {
4815
5050
 
4816
5051
 
4817
5052
  function setScopeTokenClassIfNecessary(elm, owner, renderer) {
4818
- var cmpTemplate = owner.cmpTemplate,
4819
- context = owner.context;
4820
- var getClassList = renderer.getClassList;
4821
- var token = cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken;
5053
+ var token = getScopeTokenClass(owner);
4822
5054
 
4823
- if (!isUndefined$1(token) && context.hasScopedStyles) {
4824
- // TODO [#2762]: this dot notation with add is probably problematic
5055
+ if (!isNull(token)) {
5056
+ var _getClassList = renderer.getClassList; // TODO [#2762]: this dot notation with add is probably problematic
4825
5057
  // probably we should have a renderer api for just the add operation
4826
- getClassList(elm).add(token);
5058
+
5059
+ _getClassList(elm).add(token);
4827
5060
  }
4828
5061
  }
4829
5062
 
@@ -5013,8 +5246,8 @@ var LWC = (function (exports) {
5013
5246
  var oldSlots = vm.cmpSlots;
5014
5247
  var cmpSlots = vm.cmpSlots = create(null);
5015
5248
 
5016
- for (var _i12 = 0, len = children.length; _i12 < len; _i12 += 1) {
5017
- var vnode = children[_i12];
5249
+ for (var _i15 = 0, len = children.length; _i15 < len; _i15 += 1) {
5250
+ var vnode = children[_i15];
5018
5251
 
5019
5252
  if (isNull(vnode)) {
5020
5253
  continue;
@@ -5040,8 +5273,8 @@ var LWC = (function (exports) {
5040
5273
  return;
5041
5274
  }
5042
5275
 
5043
- for (var _i13 = 0, _len4 = oldKeys.length; _i13 < _len4; _i13 += 1) {
5044
- var key = oldKeys[_i13];
5276
+ for (var _i16 = 0, _len4 = oldKeys.length; _i16 < _len4; _i16 += 1) {
5277
+ var key = oldKeys[_i16];
5045
5278
 
5046
5279
  if (isUndefined$1(cmpSlots[key]) || oldSlots[key].length !== cmpSlots[key].length) {
5047
5280
  markComponentAsDirty(vm);
@@ -5181,12 +5414,12 @@ var LWC = (function (exports) {
5181
5414
  if (oldStartIdx > oldEndIdx) {
5182
5415
  // There's some cases in which the sub array of vnodes to be inserted is followed by null(s) and an
5183
5416
  // already processed vnode, in such cases the vnodes to be inserted should be before that processed vnode.
5184
- var _i14 = newEndIdx;
5417
+ var _i17 = newEndIdx;
5185
5418
  var n;
5186
5419
 
5187
5420
  do {
5188
- n = newCh[++_i14];
5189
- } while (!isVNode(n) && _i14 < newChEnd);
5421
+ n = newCh[++_i17];
5422
+ } while (!isVNode(n) && _i17 < newChEnd);
5190
5423
 
5191
5424
  before = isVNode(n) ? n.elm : null;
5192
5425
  mountVNodes(newCh, parent, renderer, before, newStartIdx, newEndIdx + 1);
@@ -5217,9 +5450,9 @@ var LWC = (function (exports) {
5217
5450
 
5218
5451
  var anchor = null;
5219
5452
 
5220
- for (var _i15 = c2Length - 1; _i15 >= 0; _i15 -= 1) {
5221
- var n1 = c1[_i15];
5222
- var n2 = c2[_i15];
5453
+ for (var _i18 = c2Length - 1; _i18 >= 0; _i18 -= 1) {
5454
+ var n1 = c1[_i18];
5455
+ var n2 = c2[_i18];
5223
5456
 
5224
5457
  if (n2 !== n1) {
5225
5458
  if (isVNode(n1)) {
@@ -5765,229 +5998,6 @@ var LWC = (function (exports) {
5765
5998
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
5766
5999
  */
5767
6000
 
5768
- function makeHostToken(token) {
5769
- return "".concat(token, "-host");
5770
- }
5771
-
5772
- function createInlineStyleVNode(content) {
5773
- return api.h('style', {
5774
- key: 'style',
5775
- attrs: {
5776
- type: 'text/css'
5777
- }
5778
- }, [api.t(content)]);
5779
- }
5780
-
5781
- function updateStylesheetToken(vm, template) {
5782
- var elm = vm.elm,
5783
- context = vm.context,
5784
- renderMode = vm.renderMode,
5785
- shadowMode = vm.shadowMode,
5786
- _vm$renderer = vm.renderer,
5787
- getClassList = _vm$renderer.getClassList,
5788
- removeAttribute = _vm$renderer.removeAttribute,
5789
- setAttribute = _vm$renderer.setAttribute;
5790
- var newStylesheets = template.stylesheets,
5791
- newStylesheetToken = template.stylesheetToken;
5792
- var isSyntheticShadow = renderMode === 1
5793
- /* RenderMode.Shadow */
5794
- && shadowMode === 1
5795
- /* ShadowMode.Synthetic */
5796
- ;
5797
- var hasScopedStyles = context.hasScopedStyles;
5798
- var newToken;
5799
- var newHasTokenInClass;
5800
- var newHasTokenInAttribute; // Reset the styling token applied to the host element.
5801
-
5802
- var oldToken = context.stylesheetToken,
5803
- oldHasTokenInClass = context.hasTokenInClass,
5804
- oldHasTokenInAttribute = context.hasTokenInAttribute;
5805
-
5806
- if (!isUndefined$1(oldToken)) {
5807
- if (oldHasTokenInClass) {
5808
- getClassList(elm).remove(makeHostToken(oldToken));
5809
- }
5810
-
5811
- if (oldHasTokenInAttribute) {
5812
- removeAttribute(elm, makeHostToken(oldToken));
5813
- }
5814
- } // Apply the new template styling token to the host element, if the new template has any
5815
- // associated stylesheets. In the case of light DOM, also ensure there is at least one scoped stylesheet.
5816
-
5817
-
5818
- if (!isUndefined$1(newStylesheets) && newStylesheets.length !== 0) {
5819
- newToken = newStylesheetToken;
5820
- } // Set the new styling token on the host element
5821
-
5822
-
5823
- if (!isUndefined$1(newToken)) {
5824
- if (hasScopedStyles) {
5825
- getClassList(elm).add(makeHostToken(newToken));
5826
- newHasTokenInClass = true;
5827
- }
5828
-
5829
- if (isSyntheticShadow) {
5830
- setAttribute(elm, makeHostToken(newToken), '');
5831
- newHasTokenInAttribute = true;
5832
- }
5833
- } // Update the styling tokens present on the context object.
5834
-
5835
-
5836
- context.stylesheetToken = newToken;
5837
- context.hasTokenInClass = newHasTokenInClass;
5838
- context.hasTokenInAttribute = newHasTokenInAttribute;
5839
- }
5840
-
5841
- function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
5842
- var content = [];
5843
- var root;
5844
-
5845
- for (var _i16 = 0; _i16 < stylesheets.length; _i16++) {
5846
- var stylesheet = stylesheets[_i16];
5847
-
5848
- if (isArray$1(stylesheet)) {
5849
- ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
5850
- } else {
5851
- if (process.env.NODE_ENV !== 'production') {
5852
- // Check for compiler version mismatch in dev mode only
5853
- checkVersionMismatch(stylesheet, 'stylesheet'); // in dev-mode, we support hot swapping of stylesheet, which means that
5854
- // the component instance might be attempting to use an old version of
5855
- // the stylesheet, while internally, we have a replacement for it.
5856
-
5857
- stylesheet = getStyleOrSwappedStyle(stylesheet);
5858
- }
5859
-
5860
- var isScopedCss = stylesheet[KEY__SCOPED_CSS]; // Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
5861
-
5862
- var scopeToken = isScopedCss || vm.shadowMode === 1
5863
- /* ShadowMode.Synthetic */
5864
- && vm.renderMode === 1
5865
- /* RenderMode.Shadow */
5866
- ? stylesheetToken : undefined; // Use the actual `:host` selector if we're rendering global CSS for light DOM, or if we're rendering
5867
- // native shadow DOM. Synthetic shadow DOM never uses `:host`.
5868
-
5869
- var useActualHostSelector = vm.renderMode === 0
5870
- /* RenderMode.Light */
5871
- ? !isScopedCss : vm.shadowMode === 0
5872
- /* ShadowMode.Native */
5873
- ; // Use the native :dir() pseudoclass only in native shadow DOM. Otherwise, in synthetic shadow,
5874
- // we use an attribute selector on the host to simulate :dir().
5875
-
5876
- var useNativeDirPseudoclass = void 0;
5877
-
5878
- if (vm.renderMode === 1
5879
- /* RenderMode.Shadow */
5880
- ) {
5881
- useNativeDirPseudoclass = vm.shadowMode === 0
5882
- /* ShadowMode.Native */
5883
- ;
5884
- } else {
5885
- // Light DOM components should only render `[dir]` if they're inside of a synthetic shadow root.
5886
- // At the top level (root is null) or inside of a native shadow root, they should use `:dir()`.
5887
- if (isUndefined$1(root)) {
5888
- // Only calculate the root once as necessary
5889
- root = getNearestShadowComponent(vm);
5890
- }
5891
-
5892
- useNativeDirPseudoclass = isNull(root) || root.shadowMode === 0
5893
- /* ShadowMode.Native */
5894
- ;
5895
- }
5896
-
5897
- ArrayPush$1.call(content, stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass));
5898
- }
5899
- }
5900
-
5901
- return content;
5902
- }
5903
-
5904
- function getStylesheetsContent(vm, template) {
5905
- var stylesheets = template.stylesheets,
5906
- stylesheetToken = template.stylesheetToken;
5907
- var content = [];
5908
-
5909
- if (!isUndefined$1(stylesheets) && stylesheets.length !== 0) {
5910
- content = evaluateStylesheetsContent(stylesheets, stylesheetToken, vm);
5911
- }
5912
-
5913
- return content;
5914
- } // It might be worth caching this to avoid doing the lookup repeatedly, but
5915
- // perf testing has not shown it to be a huge improvement yet:
5916
- // https://github.com/salesforce/lwc/pull/2460#discussion_r691208892
5917
-
5918
-
5919
- function getNearestShadowComponent(vm) {
5920
- var owner = vm;
5921
-
5922
- while (!isNull(owner)) {
5923
- if (owner.renderMode === 1
5924
- /* RenderMode.Shadow */
5925
- ) {
5926
- return owner;
5927
- }
5928
-
5929
- owner = owner.owner;
5930
- }
5931
-
5932
- return owner;
5933
- }
5934
-
5935
- function getNearestNativeShadowComponent(vm) {
5936
- var owner = getNearestShadowComponent(vm);
5937
-
5938
- if (!isNull(owner) && owner.shadowMode === 1
5939
- /* ShadowMode.Synthetic */
5940
- ) {
5941
- // Synthetic-within-native is impossible. So if the nearest shadow component is
5942
- // synthetic, we know we won't find a native component if we go any further.
5943
- return null;
5944
- }
5945
-
5946
- return owner;
5947
- }
5948
-
5949
- function createStylesheet(vm, stylesheets) {
5950
- var renderMode = vm.renderMode,
5951
- shadowMode = vm.shadowMode,
5952
- _vm$renderer2 = vm.renderer,
5953
- ssr = _vm$renderer2.ssr,
5954
- insertStylesheet = _vm$renderer2.insertStylesheet;
5955
-
5956
- if (renderMode === 1
5957
- /* RenderMode.Shadow */
5958
- && shadowMode === 1
5959
- /* ShadowMode.Synthetic */
5960
- ) {
5961
- for (var _i17 = 0; _i17 < stylesheets.length; _i17++) {
5962
- insertStylesheet(stylesheets[_i17]);
5963
- }
5964
- } else if (ssr || vm.hydrated) {
5965
- // Note: We need to ensure that during hydration, the stylesheets method is the same as those in ssr.
5966
- // This works in the client, because the stylesheets are created, and cached in the VM
5967
- // the first time the VM renders.
5968
- // native shadow or light DOM, SSR
5969
- return ArrayMap.call(stylesheets, createInlineStyleVNode);
5970
- } else {
5971
- // native shadow or light DOM, DOM renderer
5972
- var root = getNearestNativeShadowComponent(vm); // null root means a global style
5973
-
5974
- var target = isNull(root) ? undefined : root.shadowRoot;
5975
-
5976
- for (var _i18 = 0; _i18 < stylesheets.length; _i18++) {
5977
- insertStylesheet(stylesheets[_i18], target);
5978
- }
5979
- }
5980
-
5981
- return null;
5982
- }
5983
- /*
5984
- * Copyright (c) 2018, salesforce.com, inc.
5985
- * All rights reserved.
5986
- * SPDX-License-Identifier: MIT
5987
- * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
5988
- */
5989
-
5990
-
5991
6001
  var operationIdNameMapping = ['constructor', 'render', 'patch', 'connectedCallback', 'renderedCallback', 'disconnectedCallback', 'errorCallback', 'lwc-hydrate', 'lwc-rehydrate']; // Even if all the browser the engine supports implements the UserTiming API, we need to guard the measure APIs.
5992
6002
  // JSDom (used in Jest) for example doesn't implement the UserTiming APIs.
5993
6003
 
@@ -7951,11 +7961,27 @@ var LWC = (function (exports) {
7951
7961
  }
7952
7962
 
7953
7963
  function validateClassAttr(vnode, elm, renderer) {
7954
- var _vnode$data = vnode.data,
7955
- className = _vnode$data.className,
7956
- classMap = _vnode$data.classMap;
7964
+ var data = vnode.data,
7965
+ owner = vnode.owner;
7966
+ var className = data.className,
7967
+ classMap = data.classMap;
7957
7968
  var getProperty = renderer.getProperty,
7958
7969
  getClassList = renderer.getClassList;
7970
+ var scopedToken = getScopeTokenClass(owner); // Classnames for scoped CSS are added directly to the DOM during rendering,
7971
+ // or to the VDOM on the server in the case of SSR. As such, these classnames
7972
+ // are never present in VDOM nodes in the browser.
7973
+ //
7974
+ // Consequently, hydration mismatches will occur if scoped CSS token classnames
7975
+ // are rendered during SSR. This needs to be accounted for when validating.
7976
+
7977
+ if (scopedToken) {
7978
+ if (!isUndefined$1(className)) {
7979
+ className = "".concat(scopedToken, " ").concat(className);
7980
+ } else if (!isUndefined$1(classMap)) {
7981
+ classMap = Object.assign(Object.assign({}, classMap), _defineProperty({}, scopedToken, true));
7982
+ }
7983
+ }
7984
+
7959
7985
  var nodesAreCompatible = true;
7960
7986
  var vnodeClassName;
7961
7987
 
@@ -7993,9 +8019,9 @@ var LWC = (function (exports) {
7993
8019
  }
7994
8020
 
7995
8021
  function validateStyleAttr(vnode, elm, renderer) {
7996
- var _vnode$data2 = vnode.data,
7997
- style = _vnode$data2.style,
7998
- styleDecls = _vnode$data2.styleDecls;
8022
+ var _vnode$data = vnode.data,
8023
+ style = _vnode$data.style,
8024
+ styleDecls = _vnode$data.styleDecls;
7999
8025
  var getAttribute = renderer.getAttribute;
8000
8026
  var elmStyle = getAttribute(elm, 'style') || '';
8001
8027
  var vnodeStyle;
@@ -8268,7 +8294,7 @@ var LWC = (function (exports) {
8268
8294
 
8269
8295
  return ctor;
8270
8296
  }
8271
- /* version: 2.20.2 */
8297
+ /* version: 2.21.0 */
8272
8298
 
8273
8299
  /*
8274
8300
  * Copyright (c) 2018, salesforce.com, inc.
@@ -8565,7 +8591,15 @@ var LWC = (function (exports) {
8565
8591
  }
8566
8592
 
8567
8593
  function attachShadow(element, options) {
8568
- if (hydrating) {
8594
+ // `hydrating` will be true in two cases:
8595
+ // 1. upon initial load with an SSR-generated DOM, while in Shadow render mode
8596
+ // 2. when a webapp author places <c-app> in their static HTML and mounts their
8597
+ // root component with customeElement.define('c-app', Ctor)
8598
+ //
8599
+ // The second case can be treated as a failed hydration with nominal impact
8600
+ // to performance. However, because <c-app> won't have a <template shadowroot>
8601
+ // declarative child, `element.shadowRoot` is `null`.
8602
+ if (hydrating && element.shadowRoot) {
8569
8603
  return element.shadowRoot;
8570
8604
  }
8571
8605
 
@@ -9089,7 +9123,7 @@ var LWC = (function (exports) {
9089
9123
  });
9090
9124
  freeze(LightningElement);
9091
9125
  seal(LightningElement.prototype);
9092
- /* version: 2.20.2 */
9126
+ /* version: 2.21.0 */
9093
9127
 
9094
9128
  exports.LightningElement = LightningElement;
9095
9129
  exports.__unstable__ProfilerControl = profilerControl;