@lwc/engine-core 6.5.2 → 6.6.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.
- package/dist/framework/renderer.d.ts +1 -1
- package/dist/framework/stylesheet.d.ts +1 -0
- package/dist/index.cjs.js +341 -252
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.js +342 -253
- package/dist/index.js.map +1 -1
- package/package.json +5 -5
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Copyright (c) 2024 Salesforce, Inc.
|
|
3
3
|
*/
|
|
4
|
-
import { noop, StringToLowerCase, isNull, ArrayPush as ArrayPush$1, ArrayJoin, isFrozen, isUndefined as isUndefined$1, defineProperty, ArrayIndexOf, ArrayPop, create, isFalse, isFunction as isFunction$1, isObject, seal, isAPIFeatureEnabled, isArray as isArray$1, keys, hasOwnProperty as hasOwnProperty$1, entries, AriaPropNameToAttrNameMap, getPropertyDescriptor, forEach, defineProperties, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, assign, freeze, KEY__SYNTHETIC_MODE, assert, toString as toString$1, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, getOwnPropertyNames as getOwnPropertyNames$1, getOwnPropertyDescriptors, htmlPropertyToAttribute, ArraySlice,
|
|
4
|
+
import { noop, StringToLowerCase, isNull, ArrayPush as ArrayPush$1, ArrayJoin, isFrozen, isUndefined as isUndefined$1, defineProperty, ArrayIndexOf, ArrayPop, create, isFalse, isFunction as isFunction$1, isObject, seal, isAPIFeatureEnabled, isArray as isArray$1, keys, hasOwnProperty as hasOwnProperty$1, entries, AriaPropNameToAttrNameMap, getPropertyDescriptor, forEach, defineProperties, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, assign, freeze, KEY__SYNTHETIC_MODE, assert, toString as toString$1, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, getOwnPropertyNames as getOwnPropertyNames$1, getOwnPropertyDescriptors, htmlPropertyToAttribute, ArraySlice, ArrayMap, KEY__SCOPED_CSS, ArraySplice, kebabCaseToCamelCase, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, isString, StringSlice, ArrayShift, ArrayUnshift, isTrue, SVG_NAMESPACE, KEY__SHADOW_STATIC, KEY__SHADOW_RESOLVER, ArraySome, isNumber, StringReplace, htmlEscape, StringCharAt, LOWEST_API_VERSION, KEY__NATIVE_GET_ELEMENT_BY_ID, KEY__NATIVE_QUERY_SELECTOR_ALL, ID_REFERENCING_ATTRIBUTES_SET, KEY__SHADOW_TOKEN, ArrayFilter, StringSplit, arrayEvery, ArrayIncludes, ArrayCopyWithin, ArrayFill, ArraySort, ArrayReverse } from '@lwc/shared';
|
|
5
5
|
export { setFeatureFlag, setFeatureFlagForTest } from '@lwc/features';
|
|
6
6
|
|
|
7
7
|
/*
|
|
@@ -2908,6 +2908,296 @@ const BaseBridgeElement = HTMLBridgeElementFactory(HTMLElementConstructor, baseP
|
|
|
2908
2908
|
freeze(BaseBridgeElement);
|
|
2909
2909
|
seal(BaseBridgeElement.prototype);
|
|
2910
2910
|
|
|
2911
|
+
/*
|
|
2912
|
+
* Copyright (c) 2018, salesforce.com, inc.
|
|
2913
|
+
* All rights reserved.
|
|
2914
|
+
* SPDX-License-Identifier: MIT
|
|
2915
|
+
* For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
|
|
2916
|
+
*/
|
|
2917
|
+
// These are only used for HMR in dev mode
|
|
2918
|
+
// The "pure" annotations are so that Rollup knows for sure it can remove these from prod mode
|
|
2919
|
+
let stylesheetsToCssContent = /*@__PURE__@*/ new WeakMap();
|
|
2920
|
+
let cssContentToAbortControllers = /*@__PURE__@*/ new Map();
|
|
2921
|
+
// Only used in LWC's Karma tests
|
|
2922
|
+
if (process.env.NODE_ENV === 'test-karma-lwc') {
|
|
2923
|
+
// Used to reset the global state between test runs
|
|
2924
|
+
window.__lwcResetStylesheetCache = () => {
|
|
2925
|
+
stylesheetsToCssContent = new WeakMap();
|
|
2926
|
+
cssContentToAbortControllers = new Map();
|
|
2927
|
+
};
|
|
2928
|
+
}
|
|
2929
|
+
function linkStylesheetToCssContentInDevMode(stylesheet, cssContent) {
|
|
2930
|
+
// Should never leak to prod; only used for HMR
|
|
2931
|
+
assertNotProd();
|
|
2932
|
+
let cssContents = stylesheetsToCssContent.get(stylesheet);
|
|
2933
|
+
if (isUndefined$1(cssContents)) {
|
|
2934
|
+
cssContents = new Set();
|
|
2935
|
+
stylesheetsToCssContent.set(stylesheet, cssContents);
|
|
2936
|
+
}
|
|
2937
|
+
cssContents.add(cssContent);
|
|
2938
|
+
}
|
|
2939
|
+
function getOrCreateAbortControllerInDevMode(cssContent) {
|
|
2940
|
+
// Should never leak to prod; only used for HMR
|
|
2941
|
+
assertNotProd();
|
|
2942
|
+
let abortController = cssContentToAbortControllers.get(cssContent);
|
|
2943
|
+
if (isUndefined$1(abortController)) {
|
|
2944
|
+
abortController = new AbortController();
|
|
2945
|
+
cssContentToAbortControllers.set(cssContent, abortController);
|
|
2946
|
+
}
|
|
2947
|
+
return abortController;
|
|
2948
|
+
}
|
|
2949
|
+
function getOrCreateAbortSignal(cssContent) {
|
|
2950
|
+
// abort controller/signal is only used for HMR in development
|
|
2951
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
2952
|
+
return getOrCreateAbortControllerInDevMode(cssContent).signal;
|
|
2953
|
+
}
|
|
2954
|
+
return undefined;
|
|
2955
|
+
}
|
|
2956
|
+
function makeHostToken(token) {
|
|
2957
|
+
// Note: if this ever changes, update the `cssScopeTokens` returned by `@lwc/compiler`
|
|
2958
|
+
return `${token}-host`;
|
|
2959
|
+
}
|
|
2960
|
+
function createInlineStyleVNode(content) {
|
|
2961
|
+
return api.h('style', {
|
|
2962
|
+
key: 'style', // special key
|
|
2963
|
+
attrs: {
|
|
2964
|
+
type: 'text/css',
|
|
2965
|
+
},
|
|
2966
|
+
}, [api.t(content)]);
|
|
2967
|
+
}
|
|
2968
|
+
// TODO [#3733]: remove support for legacy scope tokens
|
|
2969
|
+
function updateStylesheetToken(vm, template, legacy) {
|
|
2970
|
+
const { elm, context, renderMode, shadowMode, renderer: { getClassList, removeAttribute, setAttribute }, } = vm;
|
|
2971
|
+
const { stylesheets: newStylesheets } = template;
|
|
2972
|
+
const newStylesheetToken = legacy ? template.legacyStylesheetToken : template.stylesheetToken;
|
|
2973
|
+
const { stylesheets: newVmStylesheets } = vm;
|
|
2974
|
+
const isSyntheticShadow = renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */;
|
|
2975
|
+
const { hasScopedStyles } = context;
|
|
2976
|
+
let newToken;
|
|
2977
|
+
let newHasTokenInClass;
|
|
2978
|
+
let newHasTokenInAttribute;
|
|
2979
|
+
// Reset the styling token applied to the host element.
|
|
2980
|
+
let oldToken;
|
|
2981
|
+
let oldHasTokenInClass;
|
|
2982
|
+
let oldHasTokenInAttribute;
|
|
2983
|
+
if (legacy) {
|
|
2984
|
+
oldToken = context.legacyStylesheetToken;
|
|
2985
|
+
oldHasTokenInClass = context.hasLegacyTokenInClass;
|
|
2986
|
+
oldHasTokenInAttribute = context.hasLegacyTokenInAttribute;
|
|
2987
|
+
}
|
|
2988
|
+
else {
|
|
2989
|
+
oldToken = context.stylesheetToken;
|
|
2990
|
+
oldHasTokenInClass = context.hasTokenInClass;
|
|
2991
|
+
oldHasTokenInAttribute = context.hasTokenInAttribute;
|
|
2992
|
+
}
|
|
2993
|
+
if (!isUndefined$1(oldToken)) {
|
|
2994
|
+
if (oldHasTokenInClass) {
|
|
2995
|
+
getClassList(elm).remove(makeHostToken(oldToken));
|
|
2996
|
+
}
|
|
2997
|
+
if (oldHasTokenInAttribute) {
|
|
2998
|
+
removeAttribute(elm, makeHostToken(oldToken));
|
|
2999
|
+
}
|
|
3000
|
+
}
|
|
3001
|
+
// Apply the new template styling token to the host element, if the new template has any
|
|
3002
|
+
// associated stylesheets. In the case of light DOM, also ensure there is at least one scoped stylesheet.
|
|
3003
|
+
const hasNewStylesheets = hasStyles(newStylesheets);
|
|
3004
|
+
const hasNewVmStylesheets = hasStyles(newVmStylesheets);
|
|
3005
|
+
if (hasNewStylesheets || hasNewVmStylesheets) {
|
|
3006
|
+
newToken = newStylesheetToken;
|
|
3007
|
+
}
|
|
3008
|
+
// Set the new styling token on the host element
|
|
3009
|
+
if (!isUndefined$1(newToken)) {
|
|
3010
|
+
if (hasScopedStyles) {
|
|
3011
|
+
getClassList(elm).add(makeHostToken(newToken));
|
|
3012
|
+
newHasTokenInClass = true;
|
|
3013
|
+
}
|
|
3014
|
+
if (isSyntheticShadow) {
|
|
3015
|
+
setAttribute(elm, makeHostToken(newToken), '');
|
|
3016
|
+
newHasTokenInAttribute = true;
|
|
3017
|
+
}
|
|
3018
|
+
}
|
|
3019
|
+
// Update the styling tokens present on the context object.
|
|
3020
|
+
if (legacy) {
|
|
3021
|
+
context.legacyStylesheetToken = newToken;
|
|
3022
|
+
context.hasLegacyTokenInClass = newHasTokenInClass;
|
|
3023
|
+
context.hasLegacyTokenInAttribute = newHasTokenInAttribute;
|
|
3024
|
+
}
|
|
3025
|
+
else {
|
|
3026
|
+
context.stylesheetToken = newToken;
|
|
3027
|
+
context.hasTokenInClass = newHasTokenInClass;
|
|
3028
|
+
context.hasTokenInAttribute = newHasTokenInAttribute;
|
|
3029
|
+
}
|
|
3030
|
+
}
|
|
3031
|
+
function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
|
|
3032
|
+
const content = [];
|
|
3033
|
+
let root;
|
|
3034
|
+
for (let i = 0; i < stylesheets.length; i++) {
|
|
3035
|
+
let stylesheet = stylesheets[i];
|
|
3036
|
+
if (isArray$1(stylesheet)) {
|
|
3037
|
+
ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
|
|
3038
|
+
}
|
|
3039
|
+
else {
|
|
3040
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
3041
|
+
// Check for compiler version mismatch in dev mode only
|
|
3042
|
+
checkVersionMismatch(stylesheet, 'stylesheet');
|
|
3043
|
+
// in dev-mode, we support hot swapping of stylesheet, which means that
|
|
3044
|
+
// the component instance might be attempting to use an old version of
|
|
3045
|
+
// the stylesheet, while internally, we have a replacement for it.
|
|
3046
|
+
stylesheet = getStyleOrSwappedStyle(stylesheet);
|
|
3047
|
+
}
|
|
3048
|
+
const isScopedCss = stylesheet[KEY__SCOPED_CSS];
|
|
3049
|
+
if (lwcRuntimeFlags.DISABLE_LIGHT_DOM_UNSCOPED_CSS &&
|
|
3050
|
+
!isScopedCss &&
|
|
3051
|
+
vm.renderMode === 0 /* RenderMode.Light */) {
|
|
3052
|
+
logError('Unscoped CSS is not supported in Light DOM in this environment. Please use scoped CSS ' +
|
|
3053
|
+
'(*.scoped.css) instead of unscoped CSS (*.css). See also: https://sfdc.co/scoped-styles-light-dom');
|
|
3054
|
+
continue;
|
|
3055
|
+
}
|
|
3056
|
+
// Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
|
|
3057
|
+
const scopeToken = isScopedCss ||
|
|
3058
|
+
(vm.shadowMode === 1 /* ShadowMode.Synthetic */ && vm.renderMode === 1 /* RenderMode.Shadow */)
|
|
3059
|
+
? stylesheetToken
|
|
3060
|
+
: undefined;
|
|
3061
|
+
// Use the actual `:host` selector if we're rendering global CSS for light DOM, or if we're rendering
|
|
3062
|
+
// native shadow DOM. Synthetic shadow DOM never uses `:host`.
|
|
3063
|
+
const useActualHostSelector = vm.renderMode === 0 /* RenderMode.Light */
|
|
3064
|
+
? !isScopedCss
|
|
3065
|
+
: vm.shadowMode === 0 /* ShadowMode.Native */;
|
|
3066
|
+
// Use the native :dir() pseudoclass only in native shadow DOM. Otherwise, in synthetic shadow,
|
|
3067
|
+
// we use an attribute selector on the host to simulate :dir().
|
|
3068
|
+
let useNativeDirPseudoclass;
|
|
3069
|
+
if (vm.renderMode === 1 /* RenderMode.Shadow */) {
|
|
3070
|
+
useNativeDirPseudoclass = vm.shadowMode === 0 /* ShadowMode.Native */;
|
|
3071
|
+
}
|
|
3072
|
+
else {
|
|
3073
|
+
// Light DOM components should only render `[dir]` if they're inside of a synthetic shadow root.
|
|
3074
|
+
// At the top level (root is null) or inside of a native shadow root, they should use `:dir()`.
|
|
3075
|
+
if (isUndefined$1(root)) {
|
|
3076
|
+
// Only calculate the root once as necessary
|
|
3077
|
+
root = getNearestShadowComponent(vm);
|
|
3078
|
+
}
|
|
3079
|
+
useNativeDirPseudoclass = isNull(root) || root.shadowMode === 0 /* ShadowMode.Native */;
|
|
3080
|
+
}
|
|
3081
|
+
const cssContent = stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass);
|
|
3082
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
3083
|
+
linkStylesheetToCssContentInDevMode(stylesheet, cssContent);
|
|
3084
|
+
}
|
|
3085
|
+
ArrayPush$1.call(content, cssContent);
|
|
3086
|
+
}
|
|
3087
|
+
}
|
|
3088
|
+
return content;
|
|
3089
|
+
}
|
|
3090
|
+
function getStylesheetsContent(vm, template) {
|
|
3091
|
+
const { stylesheets, stylesheetToken } = template;
|
|
3092
|
+
const { stylesheets: vmStylesheets } = vm;
|
|
3093
|
+
let content = [];
|
|
3094
|
+
if (hasStyles(stylesheets)) {
|
|
3095
|
+
content = evaluateStylesheetsContent(stylesheets, stylesheetToken, vm);
|
|
3096
|
+
}
|
|
3097
|
+
// VM (component) stylesheets apply after template stylesheets
|
|
3098
|
+
if (hasStyles(vmStylesheets)) {
|
|
3099
|
+
ArrayPush$1.apply(content, evaluateStylesheetsContent(vmStylesheets, stylesheetToken, vm));
|
|
3100
|
+
}
|
|
3101
|
+
return content;
|
|
3102
|
+
}
|
|
3103
|
+
// It might be worth caching this to avoid doing the lookup repeatedly, but
|
|
3104
|
+
// perf testing has not shown it to be a huge improvement yet:
|
|
3105
|
+
// https://github.com/salesforce/lwc/pull/2460#discussion_r691208892
|
|
3106
|
+
function getNearestShadowComponent(vm) {
|
|
3107
|
+
let owner = vm;
|
|
3108
|
+
while (!isNull(owner)) {
|
|
3109
|
+
if (owner.renderMode === 1 /* RenderMode.Shadow */) {
|
|
3110
|
+
return owner;
|
|
3111
|
+
}
|
|
3112
|
+
owner = owner.owner;
|
|
3113
|
+
}
|
|
3114
|
+
return owner;
|
|
3115
|
+
}
|
|
3116
|
+
/**
|
|
3117
|
+
* If the component that is currently being rendered uses scoped styles,
|
|
3118
|
+
* this returns the unique token for that scoped stylesheet. Otherwise
|
|
3119
|
+
* it returns null.
|
|
3120
|
+
* @param owner
|
|
3121
|
+
* @param legacy
|
|
3122
|
+
*/
|
|
3123
|
+
// TODO [#3733]: remove support for legacy scope tokens
|
|
3124
|
+
function getScopeTokenClass(owner, legacy) {
|
|
3125
|
+
const { cmpTemplate, context } = owner;
|
|
3126
|
+
return ((context.hasScopedStyles &&
|
|
3127
|
+
(legacy ? cmpTemplate?.legacyStylesheetToken : cmpTemplate?.stylesheetToken)) ||
|
|
3128
|
+
null);
|
|
3129
|
+
}
|
|
3130
|
+
/**
|
|
3131
|
+
* This function returns the host style token for a custom element if it
|
|
3132
|
+
* exists. Otherwise it returns null.
|
|
3133
|
+
*
|
|
3134
|
+
* A host style token is applied to the component if scoped styles are used.
|
|
3135
|
+
* @param vnode
|
|
3136
|
+
*/
|
|
3137
|
+
function getStylesheetTokenHost(vnode) {
|
|
3138
|
+
const { template } = getComponentInternalDef(vnode.ctor);
|
|
3139
|
+
const { vm } = vnode;
|
|
3140
|
+
const { stylesheetToken } = template;
|
|
3141
|
+
return !isUndefined$1(stylesheetToken) && computeHasScopedStyles(template, vm)
|
|
3142
|
+
? makeHostToken(stylesheetToken)
|
|
3143
|
+
: null;
|
|
3144
|
+
}
|
|
3145
|
+
function getNearestNativeShadowComponent(vm) {
|
|
3146
|
+
const owner = getNearestShadowComponent(vm);
|
|
3147
|
+
if (!isNull(owner) && owner.shadowMode === 1 /* ShadowMode.Synthetic */) {
|
|
3148
|
+
// Synthetic-within-native is impossible. So if the nearest shadow component is
|
|
3149
|
+
// synthetic, we know we won't find a native component if we go any further.
|
|
3150
|
+
return null;
|
|
3151
|
+
}
|
|
3152
|
+
return owner;
|
|
3153
|
+
}
|
|
3154
|
+
function createStylesheet(vm, stylesheets) {
|
|
3155
|
+
const { renderMode, shadowMode, renderer: { insertStylesheet }, } = vm;
|
|
3156
|
+
if (renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */) {
|
|
3157
|
+
for (let i = 0; i < stylesheets.length; i++) {
|
|
3158
|
+
const stylesheet = stylesheets[i];
|
|
3159
|
+
insertStylesheet(stylesheet, undefined, getOrCreateAbortSignal(stylesheet));
|
|
3160
|
+
}
|
|
3161
|
+
}
|
|
3162
|
+
else if (!process.env.IS_BROWSER || vm.hydrated) {
|
|
3163
|
+
// Note: We need to ensure that during hydration, the stylesheets method is the same as those in ssr.
|
|
3164
|
+
// This works in the client, because the stylesheets are created, and cached in the VM
|
|
3165
|
+
// the first time the VM renders.
|
|
3166
|
+
// native shadow or light DOM, SSR
|
|
3167
|
+
return ArrayMap.call(stylesheets, createInlineStyleVNode);
|
|
3168
|
+
}
|
|
3169
|
+
else {
|
|
3170
|
+
// native shadow or light DOM, DOM renderer
|
|
3171
|
+
const root = getNearestNativeShadowComponent(vm);
|
|
3172
|
+
// null root means a global style
|
|
3173
|
+
const target = isNull(root) ? undefined : root.shadowRoot;
|
|
3174
|
+
for (let i = 0; i < stylesheets.length; i++) {
|
|
3175
|
+
const stylesheet = stylesheets[i];
|
|
3176
|
+
insertStylesheet(stylesheet, target, getOrCreateAbortSignal(stylesheet));
|
|
3177
|
+
}
|
|
3178
|
+
}
|
|
3179
|
+
return null;
|
|
3180
|
+
}
|
|
3181
|
+
function unrenderStylesheet(stylesheet) {
|
|
3182
|
+
// should never leak to prod; only used for HMR
|
|
3183
|
+
assertNotProd();
|
|
3184
|
+
const cssContents = stylesheetsToCssContent.get(stylesheet);
|
|
3185
|
+
/* istanbul ignore if */
|
|
3186
|
+
if (isUndefined$1(cssContents)) {
|
|
3187
|
+
throw new Error('Cannot unrender stylesheet which was never rendered');
|
|
3188
|
+
}
|
|
3189
|
+
for (const cssContent of cssContents) {
|
|
3190
|
+
const abortController = cssContentToAbortControllers.get(cssContent);
|
|
3191
|
+
/* istanbul ignore if */
|
|
3192
|
+
if (isUndefined$1(abortController)) {
|
|
3193
|
+
throw new Error('Cannot find AbortController for CSS content');
|
|
3194
|
+
}
|
|
3195
|
+
abortController.abort();
|
|
3196
|
+
// remove association with AbortController in case stylesheet is rendered again
|
|
3197
|
+
cssContentToAbortControllers.delete(cssContent);
|
|
3198
|
+
}
|
|
3199
|
+
}
|
|
3200
|
+
|
|
2911
3201
|
/*
|
|
2912
3202
|
* Copyright (c) 2023, salesforce.com, inc.
|
|
2913
3203
|
* All rights reserved.
|
|
@@ -3001,16 +3291,31 @@ const WeakMultiMap = supportsWeakRefs ? ModernWeakMultiMap : LegacyWeakMultiMap;
|
|
|
3001
3291
|
* SPDX-License-Identifier: MIT
|
|
3002
3292
|
* For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
|
|
3003
3293
|
*/
|
|
3004
|
-
|
|
3005
|
-
|
|
3006
|
-
|
|
3294
|
+
let swappedTemplateMap = /*@__PURE__@*/ new WeakMap();
|
|
3295
|
+
let swappedComponentMap =
|
|
3296
|
+
/*@__PURE__@*/ new WeakMap();
|
|
3297
|
+
let swappedStyleMap = /*@__PURE__@*/ new WeakMap();
|
|
3007
3298
|
// The important thing here is the weak values – VMs are transient (one per component instance) and should be GC'ed,
|
|
3008
3299
|
// so we don't want to create strong references to them.
|
|
3009
3300
|
// The weak keys are kind of useless, because Templates, LightningElementConstructors, and StylesheetFactories are
|
|
3010
3301
|
// never GC'ed. But maybe they will be someday, so we may as well use weak keys too.
|
|
3011
|
-
|
|
3012
|
-
|
|
3013
|
-
|
|
3302
|
+
// The "pure" annotations are so that Rollup knows for sure it can remove these from prod mode
|
|
3303
|
+
let activeTemplates = /*@__PURE__@*/ new WeakMultiMap();
|
|
3304
|
+
let activeComponents =
|
|
3305
|
+
/*@__PURE__@*/ new WeakMultiMap();
|
|
3306
|
+
let activeStyles = /*@__PURE__@*/ new WeakMultiMap();
|
|
3307
|
+
// Only used in LWC's Karma tests
|
|
3308
|
+
if (process.env.NODE_ENV === 'test-karma-lwc') {
|
|
3309
|
+
// Used to reset the global state between test runs
|
|
3310
|
+
window.__lwcResetHotSwaps = () => {
|
|
3311
|
+
swappedTemplateMap = new WeakMap();
|
|
3312
|
+
swappedComponentMap = new WeakMap();
|
|
3313
|
+
swappedStyleMap = new WeakMap();
|
|
3314
|
+
activeTemplates = new WeakMultiMap();
|
|
3315
|
+
activeComponents = new WeakMultiMap();
|
|
3316
|
+
activeStyles = new WeakMultiMap();
|
|
3317
|
+
};
|
|
3318
|
+
}
|
|
3014
3319
|
function rehydrateHotTemplate(tpl) {
|
|
3015
3320
|
const list = activeTemplates.get(tpl);
|
|
3016
3321
|
for (const vm of list) {
|
|
@@ -3026,8 +3331,9 @@ function rehydrateHotTemplate(tpl) {
|
|
|
3026
3331
|
return true;
|
|
3027
3332
|
}
|
|
3028
3333
|
function rehydrateHotStyle(style) {
|
|
3029
|
-
const
|
|
3030
|
-
|
|
3334
|
+
const activeVMs = activeStyles.get(style);
|
|
3335
|
+
unrenderStylesheet(style);
|
|
3336
|
+
for (const vm of activeVMs) {
|
|
3031
3337
|
// if a style definition is swapped, we must reset
|
|
3032
3338
|
// vm's template content in the next micro-task:
|
|
3033
3339
|
forceRehydration(vm);
|
|
@@ -3064,6 +3370,7 @@ function rehydrateHotComponent(Ctor) {
|
|
|
3064
3370
|
}
|
|
3065
3371
|
function getTemplateOrSwappedTemplate(tpl) {
|
|
3066
3372
|
assertNotProd(); // this method should never leak to prod
|
|
3373
|
+
// TODO [#4154]: shows stale content when swapping content back and forth multiple times
|
|
3067
3374
|
const visited = new Set();
|
|
3068
3375
|
while (swappedTemplateMap.has(tpl) && !visited.has(tpl)) {
|
|
3069
3376
|
visited.add(tpl);
|
|
@@ -3073,6 +3380,7 @@ function getTemplateOrSwappedTemplate(tpl) {
|
|
|
3073
3380
|
}
|
|
3074
3381
|
function getComponentOrSwappedComponent(Ctor) {
|
|
3075
3382
|
assertNotProd(); // this method should never leak to prod
|
|
3383
|
+
// TODO [#4154]: shows stale content when swapping content back and forth multiple times
|
|
3076
3384
|
const visited = new Set();
|
|
3077
3385
|
while (swappedComponentMap.has(Ctor) && !visited.has(Ctor)) {
|
|
3078
3386
|
visited.add(Ctor);
|
|
@@ -3082,6 +3390,7 @@ function getComponentOrSwappedComponent(Ctor) {
|
|
|
3082
3390
|
}
|
|
3083
3391
|
function getStyleOrSwappedStyle(style) {
|
|
3084
3392
|
assertNotProd(); // this method should never leak to prod
|
|
3393
|
+
// TODO [#4154]: shows stale content when swapping content back and forth multiple times
|
|
3085
3394
|
const visited = new Set();
|
|
3086
3395
|
while (swappedStyleMap.has(style) && !visited.has(style)) {
|
|
3087
3396
|
visited.add(style);
|
|
@@ -3089,6 +3398,22 @@ function getStyleOrSwappedStyle(style) {
|
|
|
3089
3398
|
}
|
|
3090
3399
|
return style;
|
|
3091
3400
|
}
|
|
3401
|
+
function addActiveStylesheets(stylesheets, vm) {
|
|
3402
|
+
if (isUndefined$1(stylesheets) || isNull(stylesheets)) {
|
|
3403
|
+
// Ignore non-existent stylesheets
|
|
3404
|
+
return;
|
|
3405
|
+
}
|
|
3406
|
+
for (const stylesheet of flattenStylesheets(stylesheets)) {
|
|
3407
|
+
// this is necessary because we don't hold the list of styles
|
|
3408
|
+
// in the vm, we only hold the selected (already swapped template)
|
|
3409
|
+
// but the styles attached to the template might not be the actual
|
|
3410
|
+
// active ones, but the swapped versions of those.
|
|
3411
|
+
const swappedStylesheet = getStyleOrSwappedStyle(stylesheet);
|
|
3412
|
+
// this will allow us to keep track of the stylesheet that are
|
|
3413
|
+
// being used by a hot component
|
|
3414
|
+
activeStyles.add(swappedStylesheet, vm);
|
|
3415
|
+
}
|
|
3416
|
+
}
|
|
3092
3417
|
function setActiveVM(vm) {
|
|
3093
3418
|
assertNotProd(); // this method should never leak to prod
|
|
3094
3419
|
// tracking active component
|
|
@@ -3096,25 +3421,15 @@ function setActiveVM(vm) {
|
|
|
3096
3421
|
// this will allow us to keep track of the hot components
|
|
3097
3422
|
activeComponents.add(Ctor, vm);
|
|
3098
3423
|
// tracking active template
|
|
3099
|
-
const
|
|
3100
|
-
if (
|
|
3424
|
+
const template = vm.cmpTemplate;
|
|
3425
|
+
if (!isNull(template)) {
|
|
3101
3426
|
// this will allow us to keep track of the templates that are
|
|
3102
3427
|
// being used by a hot component
|
|
3103
|
-
activeTemplates.add(
|
|
3104
|
-
//
|
|
3105
|
-
|
|
3106
|
-
|
|
3107
|
-
|
|
3108
|
-
// this is necessary because we don't hold the list of styles
|
|
3109
|
-
// in the vm, we only hold the selected (already swapped template)
|
|
3110
|
-
// but the styles attached to the template might not be the actual
|
|
3111
|
-
// active ones, but the swapped versions of those.
|
|
3112
|
-
const swappedStylesheet = getStyleOrSwappedStyle(stylesheet);
|
|
3113
|
-
// this will allow us to keep track of the stylesheet that are
|
|
3114
|
-
// being used by a hot component
|
|
3115
|
-
activeStyles.add(swappedStylesheet, vm);
|
|
3116
|
-
}
|
|
3117
|
-
}
|
|
3428
|
+
activeTemplates.add(template, vm);
|
|
3429
|
+
// Tracking active styles from the template or the VM. `template.stylesheets` are implicitly associated
|
|
3430
|
+
// (e.g. `foo.css` associated with `foo.html`), whereas `vm.stylesheets` are from `static stylesheets`.
|
|
3431
|
+
addActiveStylesheets(template.stylesheets, vm);
|
|
3432
|
+
addActiveStylesheets(vm.stylesheets, vm);
|
|
3118
3433
|
}
|
|
3119
3434
|
}
|
|
3120
3435
|
function swapTemplate(oldTpl, newTpl) {
|
|
@@ -3396,232 +3711,6 @@ function getComponentDef(Ctor) {
|
|
|
3396
3711
|
};
|
|
3397
3712
|
}
|
|
3398
3713
|
|
|
3399
|
-
/*
|
|
3400
|
-
* Copyright (c) 2018, salesforce.com, inc.
|
|
3401
|
-
* All rights reserved.
|
|
3402
|
-
* SPDX-License-Identifier: MIT
|
|
3403
|
-
* For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
|
|
3404
|
-
*/
|
|
3405
|
-
function makeHostToken(token) {
|
|
3406
|
-
// Note: if this ever changes, update the `cssScopeTokens` returned by `@lwc/compiler`
|
|
3407
|
-
return `${token}-host`;
|
|
3408
|
-
}
|
|
3409
|
-
function createInlineStyleVNode(content) {
|
|
3410
|
-
return api.h('style', {
|
|
3411
|
-
key: 'style', // special key
|
|
3412
|
-
attrs: {
|
|
3413
|
-
type: 'text/css',
|
|
3414
|
-
},
|
|
3415
|
-
}, [api.t(content)]);
|
|
3416
|
-
}
|
|
3417
|
-
// TODO [#3733]: remove support for legacy scope tokens
|
|
3418
|
-
function updateStylesheetToken(vm, template, legacy) {
|
|
3419
|
-
const { elm, context, renderMode, shadowMode, renderer: { getClassList, removeAttribute, setAttribute }, } = vm;
|
|
3420
|
-
const { stylesheets: newStylesheets } = template;
|
|
3421
|
-
const newStylesheetToken = legacy ? template.legacyStylesheetToken : template.stylesheetToken;
|
|
3422
|
-
const { stylesheets: newVmStylesheets } = vm;
|
|
3423
|
-
const isSyntheticShadow = renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */;
|
|
3424
|
-
const { hasScopedStyles } = context;
|
|
3425
|
-
let newToken;
|
|
3426
|
-
let newHasTokenInClass;
|
|
3427
|
-
let newHasTokenInAttribute;
|
|
3428
|
-
// Reset the styling token applied to the host element.
|
|
3429
|
-
let oldToken;
|
|
3430
|
-
let oldHasTokenInClass;
|
|
3431
|
-
let oldHasTokenInAttribute;
|
|
3432
|
-
if (legacy) {
|
|
3433
|
-
oldToken = context.legacyStylesheetToken;
|
|
3434
|
-
oldHasTokenInClass = context.hasLegacyTokenInClass;
|
|
3435
|
-
oldHasTokenInAttribute = context.hasLegacyTokenInAttribute;
|
|
3436
|
-
}
|
|
3437
|
-
else {
|
|
3438
|
-
oldToken = context.stylesheetToken;
|
|
3439
|
-
oldHasTokenInClass = context.hasTokenInClass;
|
|
3440
|
-
oldHasTokenInAttribute = context.hasTokenInAttribute;
|
|
3441
|
-
}
|
|
3442
|
-
if (!isUndefined$1(oldToken)) {
|
|
3443
|
-
if (oldHasTokenInClass) {
|
|
3444
|
-
getClassList(elm).remove(makeHostToken(oldToken));
|
|
3445
|
-
}
|
|
3446
|
-
if (oldHasTokenInAttribute) {
|
|
3447
|
-
removeAttribute(elm, makeHostToken(oldToken));
|
|
3448
|
-
}
|
|
3449
|
-
}
|
|
3450
|
-
// Apply the new template styling token to the host element, if the new template has any
|
|
3451
|
-
// associated stylesheets. In the case of light DOM, also ensure there is at least one scoped stylesheet.
|
|
3452
|
-
const hasNewStylesheets = hasStyles(newStylesheets);
|
|
3453
|
-
const hasNewVmStylesheets = hasStyles(newVmStylesheets);
|
|
3454
|
-
if (hasNewStylesheets || hasNewVmStylesheets) {
|
|
3455
|
-
newToken = newStylesheetToken;
|
|
3456
|
-
}
|
|
3457
|
-
// Set the new styling token on the host element
|
|
3458
|
-
if (!isUndefined$1(newToken)) {
|
|
3459
|
-
if (hasScopedStyles) {
|
|
3460
|
-
getClassList(elm).add(makeHostToken(newToken));
|
|
3461
|
-
newHasTokenInClass = true;
|
|
3462
|
-
}
|
|
3463
|
-
if (isSyntheticShadow) {
|
|
3464
|
-
setAttribute(elm, makeHostToken(newToken), '');
|
|
3465
|
-
newHasTokenInAttribute = true;
|
|
3466
|
-
}
|
|
3467
|
-
}
|
|
3468
|
-
// Update the styling tokens present on the context object.
|
|
3469
|
-
if (legacy) {
|
|
3470
|
-
context.legacyStylesheetToken = newToken;
|
|
3471
|
-
context.hasLegacyTokenInClass = newHasTokenInClass;
|
|
3472
|
-
context.hasLegacyTokenInAttribute = newHasTokenInAttribute;
|
|
3473
|
-
}
|
|
3474
|
-
else {
|
|
3475
|
-
context.stylesheetToken = newToken;
|
|
3476
|
-
context.hasTokenInClass = newHasTokenInClass;
|
|
3477
|
-
context.hasTokenInAttribute = newHasTokenInAttribute;
|
|
3478
|
-
}
|
|
3479
|
-
}
|
|
3480
|
-
function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
|
|
3481
|
-
const content = [];
|
|
3482
|
-
let root;
|
|
3483
|
-
for (let i = 0; i < stylesheets.length; i++) {
|
|
3484
|
-
let stylesheet = stylesheets[i];
|
|
3485
|
-
if (isArray$1(stylesheet)) {
|
|
3486
|
-
ArrayPush$1.apply(content, evaluateStylesheetsContent(stylesheet, stylesheetToken, vm));
|
|
3487
|
-
}
|
|
3488
|
-
else {
|
|
3489
|
-
if (process.env.NODE_ENV !== 'production') {
|
|
3490
|
-
// Check for compiler version mismatch in dev mode only
|
|
3491
|
-
checkVersionMismatch(stylesheet, 'stylesheet');
|
|
3492
|
-
// in dev-mode, we support hot swapping of stylesheet, which means that
|
|
3493
|
-
// the component instance might be attempting to use an old version of
|
|
3494
|
-
// the stylesheet, while internally, we have a replacement for it.
|
|
3495
|
-
stylesheet = getStyleOrSwappedStyle(stylesheet);
|
|
3496
|
-
}
|
|
3497
|
-
const isScopedCss = stylesheet[KEY__SCOPED_CSS];
|
|
3498
|
-
if (lwcRuntimeFlags.DISABLE_LIGHT_DOM_UNSCOPED_CSS &&
|
|
3499
|
-
!isScopedCss &&
|
|
3500
|
-
vm.renderMode === 0 /* RenderMode.Light */) {
|
|
3501
|
-
logError('Unscoped CSS is not supported in Light DOM in this environment. Please use scoped CSS ' +
|
|
3502
|
-
'(*.scoped.css) instead of unscoped CSS (*.css). See also: https://sfdc.co/scoped-styles-light-dom');
|
|
3503
|
-
continue;
|
|
3504
|
-
}
|
|
3505
|
-
// Apply the scope token only if the stylesheet itself is scoped, or if we're rendering synthetic shadow.
|
|
3506
|
-
const scopeToken = isScopedCss ||
|
|
3507
|
-
(vm.shadowMode === 1 /* ShadowMode.Synthetic */ && vm.renderMode === 1 /* RenderMode.Shadow */)
|
|
3508
|
-
? stylesheetToken
|
|
3509
|
-
: undefined;
|
|
3510
|
-
// Use the actual `:host` selector if we're rendering global CSS for light DOM, or if we're rendering
|
|
3511
|
-
// native shadow DOM. Synthetic shadow DOM never uses `:host`.
|
|
3512
|
-
const useActualHostSelector = vm.renderMode === 0 /* RenderMode.Light */
|
|
3513
|
-
? !isScopedCss
|
|
3514
|
-
: vm.shadowMode === 0 /* ShadowMode.Native */;
|
|
3515
|
-
// Use the native :dir() pseudoclass only in native shadow DOM. Otherwise, in synthetic shadow,
|
|
3516
|
-
// we use an attribute selector on the host to simulate :dir().
|
|
3517
|
-
let useNativeDirPseudoclass;
|
|
3518
|
-
if (vm.renderMode === 1 /* RenderMode.Shadow */) {
|
|
3519
|
-
useNativeDirPseudoclass = vm.shadowMode === 0 /* ShadowMode.Native */;
|
|
3520
|
-
}
|
|
3521
|
-
else {
|
|
3522
|
-
// Light DOM components should only render `[dir]` if they're inside of a synthetic shadow root.
|
|
3523
|
-
// At the top level (root is null) or inside of a native shadow root, they should use `:dir()`.
|
|
3524
|
-
if (isUndefined$1(root)) {
|
|
3525
|
-
// Only calculate the root once as necessary
|
|
3526
|
-
root = getNearestShadowComponent(vm);
|
|
3527
|
-
}
|
|
3528
|
-
useNativeDirPseudoclass = isNull(root) || root.shadowMode === 0 /* ShadowMode.Native */;
|
|
3529
|
-
}
|
|
3530
|
-
ArrayPush$1.call(content, stylesheet(scopeToken, useActualHostSelector, useNativeDirPseudoclass));
|
|
3531
|
-
}
|
|
3532
|
-
}
|
|
3533
|
-
return content;
|
|
3534
|
-
}
|
|
3535
|
-
function getStylesheetsContent(vm, template) {
|
|
3536
|
-
const { stylesheets, stylesheetToken } = template;
|
|
3537
|
-
const { stylesheets: vmStylesheets } = vm;
|
|
3538
|
-
let content = [];
|
|
3539
|
-
if (hasStyles(stylesheets)) {
|
|
3540
|
-
content = evaluateStylesheetsContent(stylesheets, stylesheetToken, vm);
|
|
3541
|
-
}
|
|
3542
|
-
// VM (component) stylesheets apply after template stylesheets
|
|
3543
|
-
if (hasStyles(vmStylesheets)) {
|
|
3544
|
-
ArrayPush$1.apply(content, evaluateStylesheetsContent(vmStylesheets, stylesheetToken, vm));
|
|
3545
|
-
}
|
|
3546
|
-
return content;
|
|
3547
|
-
}
|
|
3548
|
-
// It might be worth caching this to avoid doing the lookup repeatedly, but
|
|
3549
|
-
// perf testing has not shown it to be a huge improvement yet:
|
|
3550
|
-
// https://github.com/salesforce/lwc/pull/2460#discussion_r691208892
|
|
3551
|
-
function getNearestShadowComponent(vm) {
|
|
3552
|
-
let owner = vm;
|
|
3553
|
-
while (!isNull(owner)) {
|
|
3554
|
-
if (owner.renderMode === 1 /* RenderMode.Shadow */) {
|
|
3555
|
-
return owner;
|
|
3556
|
-
}
|
|
3557
|
-
owner = owner.owner;
|
|
3558
|
-
}
|
|
3559
|
-
return owner;
|
|
3560
|
-
}
|
|
3561
|
-
/**
|
|
3562
|
-
* If the component that is currently being rendered uses scoped styles,
|
|
3563
|
-
* this returns the unique token for that scoped stylesheet. Otherwise
|
|
3564
|
-
* it returns null.
|
|
3565
|
-
* @param owner
|
|
3566
|
-
* @param legacy
|
|
3567
|
-
*/
|
|
3568
|
-
// TODO [#3733]: remove support for legacy scope tokens
|
|
3569
|
-
function getScopeTokenClass(owner, legacy) {
|
|
3570
|
-
const { cmpTemplate, context } = owner;
|
|
3571
|
-
return ((context.hasScopedStyles &&
|
|
3572
|
-
(legacy ? cmpTemplate?.legacyStylesheetToken : cmpTemplate?.stylesheetToken)) ||
|
|
3573
|
-
null);
|
|
3574
|
-
}
|
|
3575
|
-
/**
|
|
3576
|
-
* This function returns the host style token for a custom element if it
|
|
3577
|
-
* exists. Otherwise it returns null.
|
|
3578
|
-
*
|
|
3579
|
-
* A host style token is applied to the component if scoped styles are used.
|
|
3580
|
-
* @param vnode
|
|
3581
|
-
*/
|
|
3582
|
-
function getStylesheetTokenHost(vnode) {
|
|
3583
|
-
const { template } = getComponentInternalDef(vnode.ctor);
|
|
3584
|
-
const { vm } = vnode;
|
|
3585
|
-
const { stylesheetToken } = template;
|
|
3586
|
-
return !isUndefined$1(stylesheetToken) && computeHasScopedStyles(template, vm)
|
|
3587
|
-
? makeHostToken(stylesheetToken)
|
|
3588
|
-
: null;
|
|
3589
|
-
}
|
|
3590
|
-
function getNearestNativeShadowComponent(vm) {
|
|
3591
|
-
const owner = getNearestShadowComponent(vm);
|
|
3592
|
-
if (!isNull(owner) && owner.shadowMode === 1 /* ShadowMode.Synthetic */) {
|
|
3593
|
-
// Synthetic-within-native is impossible. So if the nearest shadow component is
|
|
3594
|
-
// synthetic, we know we won't find a native component if we go any further.
|
|
3595
|
-
return null;
|
|
3596
|
-
}
|
|
3597
|
-
return owner;
|
|
3598
|
-
}
|
|
3599
|
-
function createStylesheet(vm, stylesheets) {
|
|
3600
|
-
const { renderMode, shadowMode, renderer: { insertStylesheet }, } = vm;
|
|
3601
|
-
if (renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */) {
|
|
3602
|
-
for (let i = 0; i < stylesheets.length; i++) {
|
|
3603
|
-
insertStylesheet(stylesheets[i]);
|
|
3604
|
-
}
|
|
3605
|
-
}
|
|
3606
|
-
else if (!process.env.IS_BROWSER || vm.hydrated) {
|
|
3607
|
-
// Note: We need to ensure that during hydration, the stylesheets method is the same as those in ssr.
|
|
3608
|
-
// This works in the client, because the stylesheets are created, and cached in the VM
|
|
3609
|
-
// the first time the VM renders.
|
|
3610
|
-
// native shadow or light DOM, SSR
|
|
3611
|
-
return ArrayMap.call(stylesheets, createInlineStyleVNode);
|
|
3612
|
-
}
|
|
3613
|
-
else {
|
|
3614
|
-
// native shadow or light DOM, DOM renderer
|
|
3615
|
-
const root = getNearestNativeShadowComponent(vm);
|
|
3616
|
-
// null root means a global style
|
|
3617
|
-
const target = isNull(root) ? undefined : root.shadowRoot;
|
|
3618
|
-
for (let i = 0; i < stylesheets.length; i++) {
|
|
3619
|
-
insertStylesheet(stylesheets[i], target);
|
|
3620
|
-
}
|
|
3621
|
-
}
|
|
3622
|
-
return null;
|
|
3623
|
-
}
|
|
3624
|
-
|
|
3625
3714
|
/*
|
|
3626
3715
|
* Copyright (c) 2024, Salesforce, Inc.
|
|
3627
3716
|
* All rights reserved.
|
|
@@ -7804,5 +7893,5 @@ function readonly(obj) {
|
|
|
7804
7893
|
}
|
|
7805
7894
|
|
|
7806
7895
|
export { LightningElement, profilerControl as __unstable__ProfilerControl, reportingControl as __unstable__ReportingControl, api$1 as api, computeShadowAndRenderMode, connectRootElement, createContextProviderWithRegister, createVM, disconnectRootElement, freezeTemplate, getAssociatedVMIfPresent, getComponentAPIVersion, getComponentConstructor, getComponentDef, getComponentHtmlPrototype, hydrateRoot, isComponentConstructor, parseFragment, parseSVGFragment, readonly, registerComponent, registerDecorators, registerTemplate, runFormAssociatedCallback, runFormDisabledCallback, runFormResetCallback, runFormStateRestoreCallback, sanitizeAttribute, setHooks, shouldBeFormAssociated, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
|
|
7807
|
-
/** version: 6.
|
|
7896
|
+
/** version: 6.6.0 */
|
|
7808
7897
|
//# sourceMappingURL=index.js.map
|