From f9a00d37bb70d386e14724ba8f37651c6684263b Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Mon, 5 Feb 2024 15:17:54 -0800 Subject: [PATCH 1/6] fix(engine-dom): support LWC v5 compiler slot format --- .github/workflows/karma.yml | 2 + .../@lwc/engine-core/src/framework/api.ts | 8 +- .../src/framework/check-version-mismatch.ts | 8 + .../@lwc/engine-core/src/framework/utils.ts | 23 ++ packages/@lwc/integration-karma/package.json | 1 + .../scripts/karma-configs/test/tags.js | 2 + .../scripts/karma-plugins/env.js | 4 +- .../scripts/karma-plugins/lwc.js | 7 +- .../scripts/shared/options.js | 3 + .../rendering/version-mismatch/index.spec.js | 276 +++++++++--------- yarn.lock | 115 +++++++- 11 files changed, 306 insertions(+), 143 deletions(-) diff --git a/.github/workflows/karma.yml b/.github/workflows/karma.yml index 3621e2ee41..aad1808cb4 100644 --- a/.github/workflows/karma.yml +++ b/.github/workflows/karma.yml @@ -100,6 +100,8 @@ jobs: - run: DISABLE_SYNTHETIC_SHADOW_SUPPORT_IN_COMPILER=1 DISABLE_SYNTHETIC=1 yarn sauce:ci - run: DISABLE_STATIC_CONTENT_OPTIMIZATION=1 yarn sauce:ci - run: DISABLE_STATIC_CONTENT_OPTIMIZATION=1 DISABLE_SYNTHETIC=1 yarn sauce:ci + - run: FORCE_LWC_V5_COMPILER_FOR_TEST=1 yarn sauce:ci + - run: FORCE_LWC_V5_COMPILER_FOR_TEST=1 DISABLE_SYNTHETIC=1 yarn sauce:ci - run: NODE_ENV_FOR_TEST=production yarn sauce:ci - run: NODE_ENV_FOR_TEST=production DISABLE_SYNTHETIC=1 yarn sauce:ci - run: yarn hydration:sauce:ci diff --git a/packages/@lwc/engine-core/src/framework/api.ts b/packages/@lwc/engine-core/src/framework/api.ts index bc83e15a6a..ae516a6bbe 100644 --- a/packages/@lwc/engine-core/src/framework/api.ts +++ b/packages/@lwc/engine-core/src/framework/api.ts @@ -29,7 +29,7 @@ import { logError } from '../shared/logger'; import { invokeEventListener } from './invoker'; import { getVMBeingRendered, setVMBeingRendered } from './template'; -import { EmptyArray } from './utils'; +import { applyTemporaryCompilerV5SlotFix, EmptyArray } from './utils'; import { isComponentConstructor } from './def'; import { RenderMode, ShadowMode, SlotSet, VM } from './vm'; import { LightningElementConstructor } from './base-lightning-element'; @@ -163,6 +163,8 @@ function h(sel: string, data: VElementData, children: VNodes = EmptyArray): VEle }); } + data = applyTemporaryCompilerV5SlotFix(data); + const { key, slotAssignment } = data; const vnode: VElement = { @@ -215,6 +217,8 @@ function s( const vmBeingRendered = getVMBeingRendered()!; const { renderMode, apiVersion } = vmBeingRendered; + data = applyTemporaryCompilerV5SlotFix(data); + if ( !isUndefined(slotset) && !isUndefined(slotset.slotAssignments) && @@ -346,6 +350,8 @@ function c( }); } } + data = applyTemporaryCompilerV5SlotFix(data); + const { key, slotAssignment } = data; let elm, aChildren, vm; const vnode: VCustomElement = { diff --git a/packages/@lwc/engine-core/src/framework/check-version-mismatch.ts b/packages/@lwc/engine-core/src/framework/check-version-mismatch.ts index 6f41b271e2..4b5a6a9dc1 100644 --- a/packages/@lwc/engine-core/src/framework/check-version-mismatch.ts +++ b/packages/@lwc/engine-core/src/framework/check-version-mismatch.ts @@ -35,6 +35,14 @@ export function checkVersionMismatch( func: Template | StylesheetFactory | LightningElementConstructor, type: 'template' | 'stylesheet' | 'component' ) { + // Only used in LWC's Karma tests + if (process.env.NODE_ENV === 'test-karma-lwc') { + // If we are explicitly testing for a compiler/engine version mismatch, then there is no need to warn + if (process.env.FORCE_LWC_V5_COMPILER_FOR_TEST) { + return; + } + } + const versionMatcher = func.toString().match(LWC_VERSION_COMMENT_REGEX); if (!isNull(versionMatcher) && !warned) { const version = versionMatcher[1]; diff --git a/packages/@lwc/engine-core/src/framework/utils.ts b/packages/@lwc/engine-core/src/framework/utils.ts index d5219ab8e8..1a05c62745 100644 --- a/packages/@lwc/engine-core/src/framework/utils.ts +++ b/packages/@lwc/engine-core/src/framework/utils.ts @@ -13,10 +13,13 @@ import { seal, isAPIFeatureEnabled, APIFeature, + isUndefined, + isNull, } from '@lwc/shared'; import { StylesheetFactory, TemplateStylesheetFactories } from './stylesheet'; import { getComponentAPIVersion } from './component'; import { LightningElementConstructor } from './base-lightning-element'; +import { VElementData } from './vnodes'; type Callback = () => void; @@ -129,3 +132,23 @@ export function assertNotProd() { throw new ReferenceError(); } } + +// Temporary fix for when the LWC v5 compiler is used in conjunction with a v6+ engine +// The old compiler format used the "slot" attribute in the `data` bag, whereas the new +// format uses the special `slotAssignment` key. +// This should be removed when the LWC v5 compiler is not used anywhere where it could be mismatched +// with another LWC engine version. +export function applyTemporaryCompilerV5SlotFix(data: VElementData) { + const { attrs } = data; + if (!isUndefined(attrs)) { + const { slot } = attrs; + if (!isUndefined(slot) && !isNull(slot)) { + return { + ...data, + attrs: cloneAndOmitKey(attrs, 'slot'), + slotAssignment: String(slot), + }; + } + } + return data; +} diff --git a/packages/@lwc/integration-karma/package.json b/packages/@lwc/integration-karma/package.json index d920e2f57a..405b1853c1 100644 --- a/packages/@lwc/integration-karma/package.json +++ b/packages/@lwc/integration-karma/package.json @@ -21,6 +21,7 @@ "@lwc/engine-dom": "6.1.0", "@lwc/engine-server": "6.1.0", "@lwc/rollup-plugin": "6.1.0", + "@lwc/rollup-plugin-v5": "npm:@lwc/rollup-plugin@5.3.0", "@lwc/synthetic-shadow": "6.1.0", "chokidar": "^3.5.3", "istanbul-lib-coverage": "^3.2.2", diff --git a/packages/@lwc/integration-karma/scripts/karma-configs/test/tags.js b/packages/@lwc/integration-karma/scripts/karma-configs/test/tags.js index 26d36cb2f1..f417460cb8 100644 --- a/packages/@lwc/integration-karma/scripts/karma-configs/test/tags.js +++ b/packages/@lwc/integration-karma/scripts/karma-configs/test/tags.js @@ -17,6 +17,7 @@ const { DISABLE_STATIC_CONTENT_OPTIMIZATION, NODE_ENV_FOR_TEST, API_VERSION, + FORCE_LWC_V5_COMPILER_FOR_TEST, } = require('../../shared/options'); // These are used to decide the directory that coverage is written to @@ -30,6 +31,7 @@ const TAGS = [ DISABLE_STATIC_CONTENT_OPTIMIZATION && 'disable-static-content-optimization', `NODE_ENV-${NODE_ENV_FOR_TEST}`, API_VERSION && `api-version-${API_VERSION}`, + FORCE_LWC_V5_COMPILER_FOR_TEST && 'force-lwc-v5-compiler', ].filter(Boolean); module.exports = TAGS; diff --git a/packages/@lwc/integration-karma/scripts/karma-plugins/env.js b/packages/@lwc/integration-karma/scripts/karma-plugins/env.js index 96d5ec63a4..2f21901cbb 100644 --- a/packages/@lwc/integration-karma/scripts/karma-plugins/env.js +++ b/packages/@lwc/integration-karma/scripts/karma-plugins/env.js @@ -22,6 +22,7 @@ const { ENABLE_SYNTHETIC_SHADOW_IN_HYDRATION, NODE_ENV_FOR_TEST, API_VERSION, + FORCE_LWC_V5_COMPILER_FOR_TEST, } = require('../shared/options'); const DIST_DIR = path.resolve(__dirname, '../../dist'); @@ -48,7 +49,8 @@ function createEnvFile() { ENABLE_ARIA_REFLECTION_GLOBAL_POLYFILL: ${ENABLE_ARIA_REFLECTION_GLOBAL_POLYFILL}, ENABLE_SYNTHETIC_SHADOW_IN_HYDRATION: ${ENABLE_SYNTHETIC_SHADOW_IN_HYDRATION}, LWC_VERSION: ${JSON.stringify(LWC_VERSION)}, - API_VERSION: ${JSON.stringify(API_VERSION)} + API_VERSION: ${JSON.stringify(API_VERSION)}, + FORCE_LWC_V5_COMPILER_FOR_TEST: ${JSON.stringify(FORCE_LWC_V5_COMPILER_FOR_TEST)} } }; ` diff --git a/packages/@lwc/integration-karma/scripts/karma-plugins/lwc.js b/packages/@lwc/integration-karma/scripts/karma-plugins/lwc.js index 6d280b2358..a45e5bf0a9 100644 --- a/packages/@lwc/integration-karma/scripts/karma-plugins/lwc.js +++ b/packages/@lwc/integration-karma/scripts/karma-plugins/lwc.js @@ -12,9 +12,8 @@ 'use strict'; const path = require('path'); - const { rollup } = require('rollup'); -const lwcRollupPlugin = require('@lwc/rollup-plugin'); +const { FORCE_LWC_V5_COMPILER_FOR_TEST } = require('../shared/options.js'); const { DISABLE_SYNTHETIC_SHADOW_SUPPORT_IN_COMPILER, @@ -50,6 +49,10 @@ function createPreprocessor(config, emitter, logger) { // TODO [#3370]: remove experimental template expression flag const experimentalComplexExpressions = suiteDir.includes('template-expressions'); + const lwcRollupPlugin = FORCE_LWC_V5_COMPILER_FOR_TEST + ? require('@lwc/rollup-plugin-v5') + : require('@lwc/rollup-plugin'); + const plugins = [ lwcRollupPlugin({ // Sourcemaps don't work with Istanbul coverage diff --git a/packages/@lwc/integration-karma/scripts/shared/options.js b/packages/@lwc/integration-karma/scripts/shared/options.js index d6f055d410..9bcd09309a 100644 --- a/packages/@lwc/integration-karma/scripts/shared/options.js +++ b/packages/@lwc/integration-karma/scripts/shared/options.js @@ -34,6 +34,8 @@ const API_VERSION = process.env.API_VERSION ? parseInt(process.env.API_VERSION, 10) : HIGHEST_API_VERSION; +const FORCE_LWC_V5_COMPILER_FOR_TEST = Boolean(process.env.FORCE_LWC_V5_COMPILER_FOR_TEST); + module.exports = { // Test configuration LEGACY_BROWSERS, @@ -44,6 +46,7 @@ module.exports = { DISABLE_STATIC_CONTENT_OPTIMIZATION, SYNTHETIC_SHADOW_ENABLED: !DISABLE_SYNTHETIC, API_VERSION, + FORCE_LWC_V5_COMPILER_FOR_TEST, ENABLE_SYNTHETIC_SHADOW_IN_HYDRATION, GREP: process.env.GREP, COVERAGE: Boolean(process.env.COVERAGE), diff --git a/packages/@lwc/integration-karma/test/rendering/version-mismatch/index.spec.js b/packages/@lwc/integration-karma/test/rendering/version-mismatch/index.spec.js index cdbf3fc38c..878c4be209 100644 --- a/packages/@lwc/integration-karma/test/rendering/version-mismatch/index.spec.js +++ b/packages/@lwc/integration-karma/test/rendering/version-mismatch/index.spec.js @@ -5,155 +5,163 @@ import Component from 'x/component'; import ComponentWithProp from 'x/componentWithProp'; import ComponentWithTemplateAndStylesheet from 'x/componentWithTemplateAndStylesheet'; -describe('compiler version mismatch', () => { - describe('stamped with version number', () => { - it('component', () => { - expect(Component.toString()).toContain(`/*LWC compiler v${process.env.LWC_VERSION}*/`); - }); - - it('component with prop', () => { - expect(ComponentWithProp.toString()).toContain( - `/*LWC compiler v${process.env.LWC_VERSION}*/` - ); - }); +// This test doesn't make sense if we are explicitly forcing a mismatch for the test +if (!process.env.FORCE_LWC_V5_COMPILER_FOR_TEST) { + describe('compiler version mismatch', () => { + describe('stamped with version number', () => { + it('component', () => { + expect(Component.toString()).toContain( + `/*LWC compiler v${process.env.LWC_VERSION}*/` + ); + }); - it('template', () => { - const elm = createElement('x-component-with-template-and-stylesheet', { - is: ComponentWithTemplateAndStylesheet, + it('component with prop', () => { + expect(ComponentWithProp.toString()).toContain( + `/*LWC compiler v${process.env.LWC_VERSION}*/` + ); }); - expect(elm.template.toString()).toContain( - `/*LWC compiler v${process.env.LWC_VERSION}*/` - ); - }); + it('template', () => { + const elm = createElement('x-component-with-template-and-stylesheet', { + is: ComponentWithTemplateAndStylesheet, + }); - it('stylesheet', () => { - const elm = createElement('x-component-with-template-and-stylesheet', { - is: ComponentWithTemplateAndStylesheet, + expect(elm.template.toString()).toContain( + `/*LWC compiler v${process.env.LWC_VERSION}*/` + ); }); - expect(elm.template.stylesheets[0].toString()).toContain( - `/*LWC compiler v${process.env.LWC_VERSION}*/` - ); - }); - }); - - describe('version mismatch warning', () => { - let dispatcher; + it('stylesheet', () => { + const elm = createElement('x-component-with-template-and-stylesheet', { + is: ComponentWithTemplateAndStylesheet, + }); - beforeEach(() => { - window.__lwcResetWarnedOnVersionMismatch(); - dispatcher = jasmine.createSpy(); - attachReportingControlDispatcher(dispatcher, 'CompilerRuntimeVersionMismatch'); + expect(elm.template.stylesheets[0].toString()).toContain( + `/*LWC compiler v${process.env.LWC_VERSION}*/` + ); + }); }); - afterEach(() => { - detachReportingControlDispatcher(); - }); + describe('version mismatch warning', () => { + let dispatcher; - it('template', () => { - function tmpl() { - return []; - /*LWC compiler v123.456.789*/ - } + beforeEach(() => { + window.__lwcResetWarnedOnVersionMismatch(); + dispatcher = jasmine.createSpy(); + attachReportingControlDispatcher(dispatcher, 'CompilerRuntimeVersionMismatch'); + }); - expect(() => { - registerTemplate(tmpl); - }).toLogErrorDev( - new RegExp( - `LWC WARNING: current engine is v${process.env.LWC_VERSION}, but template was compiled with v123.456.789` - ) - ); - if (process.env.NODE_ENV === 'production') { - expect(dispatcher).not.toHaveBeenCalled(); - } else { - expect(dispatcher.calls.allArgs()).toEqual([ - [ - 'CompilerRuntimeVersionMismatch', - { - runtimeVersion: process.env.LWC_VERSION, - compilerVersion: '123.456.789', - }, - ], - ]); - } - }); + afterEach(() => { + detachReportingControlDispatcher(); + }); - it('stylesheet', () => { - function tmpl() { - return []; - } - tmpl.stylesheetToken = 'x-component_component'; - tmpl.stylesheets = [ - function stylesheet() { - return ''; + it('template', () => { + function tmpl() { + return []; /*LWC compiler v123.456.789*/ - }, - ]; - registerTemplate(tmpl); - class CustomElement extends LightningElement {} - registerComponent(CustomElement, { tmpl }); - - const elm = createElement('x-component', { is: CustomElement }); - - expect(() => { - document.body.appendChild(elm); - }).toLogErrorDev( - new RegExp( - `LWC WARNING: current engine is v${process.env.LWC_VERSION}, but stylesheet was compiled with v123.456.789` - ) - ); - if (process.env.NODE_ENV === 'production') { - expect(dispatcher).not.toHaveBeenCalled(); - } else { - expect(dispatcher.calls.allArgs()).toEqual([ - [ - 'CompilerRuntimeVersionMismatch', - { - runtimeVersion: process.env.LWC_VERSION, - compilerVersion: '123.456.789', - }, - ], - ]); - } - }); - - it('component', () => { - // deliberately using a function rather than a class so @lwc/babel-plugin-component doesn't add a comment - function CustomElement() { - return LightningElement.apply(this, arguments); - /*LWC compiler v123.456.789*/ - } + } + + expect(() => { + registerTemplate(tmpl); + }).toLogErrorDev( + new RegExp( + `LWC WARNING: current engine is v${process.env.LWC_VERSION}, but template was compiled with v123.456.789` + ) + ); + if (process.env.NODE_ENV === 'production') { + expect(dispatcher).not.toHaveBeenCalled(); + } else { + expect(dispatcher.calls.allArgs()).toEqual([ + [ + 'CompilerRuntimeVersionMismatch', + { + runtimeVersion: process.env.LWC_VERSION, + compilerVersion: '123.456.789', + }, + ], + ]); + } + }); - Object.setPrototypeOf(CustomElement, LightningElement); + it('stylesheet', () => { + function tmpl() { + return []; + } + + tmpl.stylesheetToken = 'x-component_component'; + tmpl.stylesheets = [ + function stylesheet() { + return ''; + /*LWC compiler v123.456.789*/ + }, + ]; + registerTemplate(tmpl); - const template = function () { - return []; - }; - registerTemplate(template); + class CustomElement extends LightningElement {} + + registerComponent(CustomElement, { tmpl }); + + const elm = createElement('x-component', { is: CustomElement }); + + expect(() => { + document.body.appendChild(elm); + }).toLogErrorDev( + new RegExp( + `LWC WARNING: current engine is v${process.env.LWC_VERSION}, but stylesheet was compiled with v123.456.789` + ) + ); + if (process.env.NODE_ENV === 'production') { + expect(dispatcher).not.toHaveBeenCalled(); + } else { + expect(dispatcher.calls.allArgs()).toEqual([ + [ + 'CompilerRuntimeVersionMismatch', + { + runtimeVersion: process.env.LWC_VERSION, + compilerVersion: '123.456.789', + }, + ], + ]); + } + }); - expect(() => { - registerComponent(CustomElement, { - tmpl: template, - }); - }).toLogErrorDev( - new RegExp( - `LWC WARNING: current engine is v${process.env.LWC_VERSION}, but component CustomElement was compiled with v123.456.789` - ) - ); - if (process.env.NODE_ENV === 'production') { - expect(dispatcher).not.toHaveBeenCalled(); - } else { - expect(dispatcher.calls.allArgs()).toEqual([ - [ - 'CompilerRuntimeVersionMismatch', - { - runtimeVersion: process.env.LWC_VERSION, - compilerVersion: '123.456.789', - }, - ], - ]); - } + it('component', () => { + // deliberately using a function rather than a class so @lwc/babel-plugin-component doesn't add a comment + function CustomElement() { + return LightningElement.apply(this, arguments); + /*LWC compiler v123.456.789*/ + } + + Object.setPrototypeOf(CustomElement, LightningElement); + + const template = function () { + return []; + }; + registerTemplate(template); + + expect(() => { + registerComponent(CustomElement, { + tmpl: template, + }); + }).toLogErrorDev( + new RegExp( + `LWC WARNING: current engine is v${process.env.LWC_VERSION}, but component CustomElement was compiled with v123.456.789` + ) + ); + if (process.env.NODE_ENV === 'production') { + expect(dispatcher).not.toHaveBeenCalled(); + } else { + expect(dispatcher.calls.allArgs()).toEqual([ + [ + 'CompilerRuntimeVersionMismatch', + { + runtimeVersion: process.env.LWC_VERSION, + compilerVersion: '123.456.789', + }, + ], + ]); + } + }); }); }); -}); +} diff --git a/yarn.lock b/yarn.lock index 7109608a1a..0e969a6035 100644 --- a/yarn.lock +++ b/yarn.lock @@ -41,6 +41,27 @@ resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.23.5.tgz#ffb878728bb6bdcb6f4510aa51b1be9afb8cfd98" integrity sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw== +"@babel/core@7.23.6": + version "7.23.6" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.23.6.tgz#8be77cd77c55baadcc1eae1c33df90ab6d2151d4" + integrity sha512-FxpRyGjrMJXh7X3wGLGhNDCRiwpWEF74sKjTLDJSG5Kyvow3QZaG0Adbqzi9ZrVjTWpsX+2cxWXD71NMg93kdw== + dependencies: + "@ampproject/remapping" "^2.2.0" + "@babel/code-frame" "^7.23.5" + "@babel/generator" "^7.23.6" + "@babel/helper-compilation-targets" "^7.23.6" + "@babel/helper-module-transforms" "^7.23.3" + "@babel/helpers" "^7.23.6" + "@babel/parser" "^7.23.6" + "@babel/template" "^7.22.15" + "@babel/traverse" "^7.23.6" + "@babel/types" "^7.23.6" + convert-source-map "^2.0.0" + debug "^4.1.0" + gensync "^1.0.0-beta.2" + json5 "^2.2.3" + semver "^6.3.1" + "@babel/core@7.23.9": version "7.23.9" resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.23.9.tgz#b028820718000f267870822fec434820e9b1e4d1" @@ -307,7 +328,7 @@ "@babel/traverse" "^7.23.2" "@babel/types" "^7.23.0" -"@babel/helpers@^7.23.9": +"@babel/helpers@^7.23.6", "@babel/helpers@^7.23.9": version "7.23.9" resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.23.9.tgz#c3e20bbe7f7a7e10cb9b178384b4affdf5995c7d" integrity sha512-87ICKgU5t5SzOT7sBMfCOZQ2rHjRU+Pcb9BoILMYz600W6DkVRLFBPwQ18gwUVvggqXivaUakpnxWQGbpywbBQ== @@ -339,7 +360,7 @@ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.0.tgz#da950e622420bf96ca0d0f2909cdddac3acd8719" integrity sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw== -"@babel/parser@^7.23.9": +"@babel/parser@^7.23.6", "@babel/parser@^7.23.9": version "7.23.9" resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.9.tgz#7b903b6149b0f8fa7ad564af646c4c38a77fc44b" integrity sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA== @@ -530,7 +551,7 @@ debug "^4.1.0" globals "^11.1.0" -"@babel/traverse@^7.23.9": +"@babel/traverse@^7.23.6", "@babel/traverse@^7.23.9": version "7.23.9" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.9.tgz#2f9d6aead6b564669394c5ce0f9302bb65b9d950" integrity sha512-I/4UJ9vs90OkBtY6iiiTORVMyIhJ4kAVmsKo9KFc8UOxMeUfi2hvtIBsET5u9GizXE6/GFSuKCTNfgCswuEjRg== @@ -1279,6 +1300,38 @@ "@babel/generator" "7.21.4" match-json "1.3.5" +"@lwc/babel-plugin-component@5.3.0": + version "5.3.0" + resolved "https://registry.yarnpkg.com/@lwc/babel-plugin-component/-/babel-plugin-component-5.3.0.tgz#2594b4fdf3f047dcc497c89f7b27ef7b3d8bc9a1" + integrity sha512-BMd59cfJskTrUntWK4lgZU42eU1MWyLGTbfTYMCaiuUGtm1hcGagOKc2oVPuU2KPOxgBzomESv2OkqiZmlVNig== + dependencies: + "@babel/helper-module-imports" "7.22.15" + "@lwc/errors" "5.3.0" + "@lwc/shared" "5.3.0" + line-column "~1.0.2" + +"@lwc/compiler@5.3.0": + version "5.3.0" + resolved "https://registry.yarnpkg.com/@lwc/compiler/-/compiler-5.3.0.tgz#e49a7d5f262490b111db07944015b780645bc4fe" + integrity sha512-1CswqrORw3o0WLqS3UxVfv8V+U6Pk1U7iUHNwctjAFijt5zSzXvooL93mLi5pLOcmQtohyiCSg9ER+b+oR5ksQ== + dependencies: + "@babel/core" "7.23.6" + "@babel/plugin-proposal-async-generator-functions" "7.20.7" + "@babel/plugin-proposal-class-properties" "7.18.6" + "@babel/plugin-proposal-object-rest-spread" "7.20.7" + "@babel/plugin-transform-async-to-generator" "7.23.3" + "@locker/babel-plugin-transform-unforgeables" "0.20.0" + "@lwc/babel-plugin-component" "5.3.0" + "@lwc/errors" "5.3.0" + "@lwc/shared" "5.3.0" + "@lwc/style-compiler" "5.3.0" + "@lwc/template-compiler" "5.3.0" + +"@lwc/errors@5.3.0": + version "5.3.0" + resolved "https://registry.yarnpkg.com/@lwc/errors/-/errors-5.3.0.tgz#cbc662ba922bcfbc14daa4039ca1f174fa7bda9b" + integrity sha512-jnq5vnGWsoIkTlC6W8NxJRD2ddbefDYFBUON9qegAEg1pEJdAcBLXPcVjArWhqeyeiVl0Y6JzibiWJXmq7D/Fw== + "@lwc/eslint-plugin-lwc-internal@link:./scripts/eslint-plugin": version "0.0.0" uid "" @@ -1287,6 +1340,49 @@ version "0.0.0" uid "" +"@lwc/module-resolver@5.3.0": + version "5.3.0" + resolved "https://registry.yarnpkg.com/@lwc/module-resolver/-/module-resolver-5.3.0.tgz#3e8ef877d4c5a7ff08db7f75332335f17cdf2967" + integrity sha512-IpTolbf+GNwz9HCUG/Y6lH/bxkkdKd3jnLyg/MPPyZyDRKDbzx4CGj/2OQFBZPsqeaHq7SLcUo9JatuLVeU5Sw== + dependencies: + resolve "~1.22.6" + +"@lwc/rollup-plugin-v5@npm:@lwc/rollup-plugin@5.3.0": + version "5.3.0" + resolved "https://registry.yarnpkg.com/@lwc/rollup-plugin/-/rollup-plugin-5.3.0.tgz#80ce1ea1f7934acbc02920876a20d91f119d37ee" + integrity sha512-AQC63u1fWnt9vO+ZzCpaZuJ/c0AT/rBrxWLV1xPjkKgElLVe7ctVsfGJ84+1Rom6SEFG77LHoCXgppR9JzpSeg== + dependencies: + "@lwc/compiler" "5.3.0" + "@lwc/module-resolver" "5.3.0" + "@rollup/pluginutils" "~5.1.0" + +"@lwc/shared@5.3.0": + version "5.3.0" + resolved "https://registry.yarnpkg.com/@lwc/shared/-/shared-5.3.0.tgz#994662e803da7a2afd7dc1ae1ded6bbe79f85d75" + integrity sha512-r1GinnMUKYXH91PB8ZFfErDq6fVxDL78k72gsYdNWgzFd4MfGYUrB/iFoSvEk9Ylzc4fOdwnJ5mJ55/MDofixA== + +"@lwc/style-compiler@5.3.0": + version "5.3.0" + resolved "https://registry.yarnpkg.com/@lwc/style-compiler/-/style-compiler-5.3.0.tgz#7f5a1dc8714630c48b0a4828d1dfcaabbe05685b" + integrity sha512-pEAIsEMYX/o1VsXC6wp8k2z0UPRmDXOUG07GOzMqkMWtFLOQyynJInT80uZ6yCaQ+VGMDF0IeVCHw/c+dbSuWA== + dependencies: + "@lwc/shared" "5.3.0" + postcss "~8.4.32" + postcss-selector-parser "~6.0.13" + postcss-value-parser "~4.2.0" + +"@lwc/template-compiler@5.3.0": + version "5.3.0" + resolved "https://registry.yarnpkg.com/@lwc/template-compiler/-/template-compiler-5.3.0.tgz#7186269aabd6c1c86009db10a42dabcf6dcc3f9c" + integrity sha512-ZJc/aRpcqGiAlNHRLPnyvlSOdrOb/ohmaDmp7xjvbHCdEAju0hAaBpdfRz8RvCsaPWLZrKPl0TACjlNz3uZq+A== + dependencies: + "@lwc/errors" "5.3.0" + "@lwc/shared" "5.3.0" + acorn "~8.10.0" + astring "~1.8.6" + estree-walker "~2.0.2" + he "~1.2.0" + "@mapbox/node-pre-gyp@^1.0.0": version "1.0.11" resolved "https://registry.yarnpkg.com/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz#417db42b7f5323d79e93b34a6d7a2a12c0df43fa" @@ -2608,7 +2704,7 @@ acorn-walk@^8.0.2: resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1" integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA== -acorn@8.10.0, acorn@^8.1.0, acorn@^8.8.1, acorn@^8.8.2, acorn@^8.9.0: +acorn@8.10.0, acorn@^8.1.0, acorn@^8.8.1, acorn@^8.8.2, acorn@^8.9.0, acorn@~8.10.0: version "8.10.0" resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.10.0.tgz#8be5b3907a67221a81ab23c7889c4c5526b62ec5" integrity sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw== @@ -9401,7 +9497,7 @@ pkg-up@^3.1.0: dependencies: find-up "^3.0.0" -postcss-selector-parser@~6.0.15: +postcss-selector-parser@~6.0.13, postcss-selector-parser@~6.0.15: version "6.0.15" resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz#11cc2b21eebc0b99ea374ffb9887174855a01535" integrity sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw== @@ -9414,6 +9510,15 @@ postcss-value-parser@~4.2.0: resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== +postcss@~8.4.32: + version "8.4.34" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.34.tgz#563276e86b4ff20dfa5eed0d394d4c53853b2051" + integrity sha512-4eLTO36woPSocqZ1zIrFD2K1v6wH7pY1uBh0JIM2KKfrVtGvPFiAku6aNOP0W1Wr9qwnaCsF0Z+CrVnryB2A8Q== + dependencies: + nanoid "^3.3.7" + picocolors "^1.0.0" + source-map-js "^1.0.2" + postcss@~8.4.33: version "8.4.33" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.33.tgz#1378e859c9f69bf6f638b990a0212f43e2aaa742" From 60361255d43d3eb8dc82379b047d3ffa86b92794 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Mon, 5 Feb 2024 15:41:12 -0800 Subject: [PATCH 2/6] chore: add comments --- .../@lwc/engine-core/src/framework/check-version-mismatch.ts | 1 + packages/@lwc/engine-core/src/framework/utils.ts | 1 + packages/@lwc/integration-karma/scripts/karma-plugins/lwc.js | 1 + packages/@lwc/integration-karma/scripts/shared/options.js | 1 + .../test/rendering/version-mismatch/index.spec.js | 1 + 5 files changed, 5 insertions(+) diff --git a/packages/@lwc/engine-core/src/framework/check-version-mismatch.ts b/packages/@lwc/engine-core/src/framework/check-version-mismatch.ts index 4b5a6a9dc1..37240a8c46 100644 --- a/packages/@lwc/engine-core/src/framework/check-version-mismatch.ts +++ b/packages/@lwc/engine-core/src/framework/check-version-mismatch.ts @@ -38,6 +38,7 @@ export function checkVersionMismatch( // Only used in LWC's Karma tests if (process.env.NODE_ENV === 'test-karma-lwc') { // If we are explicitly testing for a compiler/engine version mismatch, then there is no need to warn + // TODO [#3974]: remove temporary logic to support v5 compiler + v6+ engine if (process.env.FORCE_LWC_V5_COMPILER_FOR_TEST) { return; } diff --git a/packages/@lwc/engine-core/src/framework/utils.ts b/packages/@lwc/engine-core/src/framework/utils.ts index 1a05c62745..69d0328934 100644 --- a/packages/@lwc/engine-core/src/framework/utils.ts +++ b/packages/@lwc/engine-core/src/framework/utils.ts @@ -138,6 +138,7 @@ export function assertNotProd() { // format uses the special `slotAssignment` key. // This should be removed when the LWC v5 compiler is not used anywhere where it could be mismatched // with another LWC engine version. +// TODO [#3974]: remove temporary logic to support v5 compiler + v6+ engine export function applyTemporaryCompilerV5SlotFix(data: VElementData) { const { attrs } = data; if (!isUndefined(attrs)) { diff --git a/packages/@lwc/integration-karma/scripts/karma-plugins/lwc.js b/packages/@lwc/integration-karma/scripts/karma-plugins/lwc.js index a45e5bf0a9..13eb39b4ed 100644 --- a/packages/@lwc/integration-karma/scripts/karma-plugins/lwc.js +++ b/packages/@lwc/integration-karma/scripts/karma-plugins/lwc.js @@ -49,6 +49,7 @@ function createPreprocessor(config, emitter, logger) { // TODO [#3370]: remove experimental template expression flag const experimentalComplexExpressions = suiteDir.includes('template-expressions'); + // TODO [#3974]: remove temporary logic to support v5 compiler + v6+ engine const lwcRollupPlugin = FORCE_LWC_V5_COMPILER_FOR_TEST ? require('@lwc/rollup-plugin-v5') : require('@lwc/rollup-plugin'); diff --git a/packages/@lwc/integration-karma/scripts/shared/options.js b/packages/@lwc/integration-karma/scripts/shared/options.js index 9bcd09309a..d1c9a4c23a 100644 --- a/packages/@lwc/integration-karma/scripts/shared/options.js +++ b/packages/@lwc/integration-karma/scripts/shared/options.js @@ -34,6 +34,7 @@ const API_VERSION = process.env.API_VERSION ? parseInt(process.env.API_VERSION, 10) : HIGHEST_API_VERSION; +// TODO [#3974]: remove temporary logic to support v5 compiler + v6+ engine const FORCE_LWC_V5_COMPILER_FOR_TEST = Boolean(process.env.FORCE_LWC_V5_COMPILER_FOR_TEST); module.exports = { diff --git a/packages/@lwc/integration-karma/test/rendering/version-mismatch/index.spec.js b/packages/@lwc/integration-karma/test/rendering/version-mismatch/index.spec.js index 878c4be209..b1b228afd1 100644 --- a/packages/@lwc/integration-karma/test/rendering/version-mismatch/index.spec.js +++ b/packages/@lwc/integration-karma/test/rendering/version-mismatch/index.spec.js @@ -6,6 +6,7 @@ import ComponentWithProp from 'x/componentWithProp'; import ComponentWithTemplateAndStylesheet from 'x/componentWithTemplateAndStylesheet'; // This test doesn't make sense if we are explicitly forcing a mismatch for the test +// TODO [#3974]: remove temporary logic to support v5 compiler + v6+ engine if (!process.env.FORCE_LWC_V5_COMPILER_FOR_TEST) { describe('compiler version mismatch', () => { describe('stamped with version number', () => { From 2f2b67f6f78b05cf2f94e0fb13cd4e7e0305126e Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Tue, 6 Feb 2024 11:09:48 -0800 Subject: [PATCH 3/6] fix: add flag as a kill switch --- .../@lwc/engine-core/src/framework/utils.ts | 3 ++ packages/@lwc/features/src/index.ts | 1 + packages/@lwc/features/src/types.ts | 5 +++ .../test/light-dom/slotting/index.spec.js | 37 +++++++++++++------ 4 files changed, 35 insertions(+), 11 deletions(-) diff --git a/packages/@lwc/engine-core/src/framework/utils.ts b/packages/@lwc/engine-core/src/framework/utils.ts index 69d0328934..f54c504b1d 100644 --- a/packages/@lwc/engine-core/src/framework/utils.ts +++ b/packages/@lwc/engine-core/src/framework/utils.ts @@ -140,6 +140,9 @@ export function assertNotProd() { // with another LWC engine version. // TODO [#3974]: remove temporary logic to support v5 compiler + v6+ engine export function applyTemporaryCompilerV5SlotFix(data: VElementData) { + if (lwcRuntimeFlags.DISABLE_TEMPORARY_V5_COMPILER_SUPPORT) { + return data; + } const { attrs } = data; if (!isUndefined(attrs)) { const { slot } = attrs; diff --git a/packages/@lwc/features/src/index.ts b/packages/@lwc/features/src/index.ts index 33763c198e..2d68e15d9a 100644 --- a/packages/@lwc/features/src/index.ts +++ b/packages/@lwc/features/src/index.ts @@ -18,6 +18,7 @@ const features: FeatureFlagMap = { ENABLE_FROZEN_TEMPLATE: null, ENABLE_LEGACY_SCOPE_TOKENS: null, ENABLE_FORCE_SHADOW_MIGRATE_MODE: null, + DISABLE_TEMPORARY_V5_COMPILER_SUPPORT: null, }; if (!(globalThis as any).lwcRuntimeFlags) { diff --git a/packages/@lwc/features/src/types.ts b/packages/@lwc/features/src/types.ts index 8f6a9ac74a..7d0cecc9bc 100644 --- a/packages/@lwc/features/src/types.ts +++ b/packages/@lwc/features/src/types.ts @@ -63,6 +63,11 @@ export interface FeatureFlagMap { * If true, enable experimental shadow DOM migration mode globally. */ ENABLE_FORCE_SHADOW_MIGRATE_MODE: FeatureFlagValue; + + /** + * If true, disable temporary support for the LWC v5 compiler format. + */ + DISABLE_TEMPORARY_V5_COMPILER_SUPPORT: FeatureFlagValue; } export type FeatureFlagName = keyof FeatureFlagMap; diff --git a/packages/@lwc/integration-karma/test/light-dom/slotting/index.spec.js b/packages/@lwc/integration-karma/test/light-dom/slotting/index.spec.js index 0406c4c5ac..9b5db353ed 100644 --- a/packages/@lwc/integration-karma/test/light-dom/slotting/index.spec.js +++ b/packages/@lwc/integration-karma/test/light-dom/slotting/index.spec.js @@ -1,4 +1,4 @@ -import { createElement } from 'lwc'; +import { createElement, setFeatureFlagForTest } from 'lwc'; import { extractDataIds } from 'test-utils'; import { vFragBookEndEnabled, lightDomSlotForwardingEnabled } from 'test-utils'; @@ -21,16 +21,6 @@ function createTestElement(tag, component) { } describe('Slotting', () => { - it('should render properly', () => { - const nodes = createTestElement('x-default-slot', BasicSlot); - - expect(Array.from(nodes['x-container'].children)).toEqual([ - nodes['upper-text'], - nodes['default-text'], - nodes['lower-text'], - ]); - }); - it('should render dynamic children', async () => { const nodes = createTestElement('x-dynamic-children', DynamicChildren); expect(Array.from(nodes['x-light-container'].children)).toEqual([ @@ -137,4 +127,29 @@ describe('Slotting', () => { expect(commentNodes.length).toBe(6); // 3 slots, so 3*2=6 comment nodes } }); + + // TODO [#3974]: remove temporary logic to support v5 compiler + v6+ engine + if (process.env.FORCE_LWC_V5_COMPILER_FOR_TEST) { + describe('DISABLE_TEMPORARY_V5_COMPILER_SUPPORT', () => { + beforeEach(() => { + setFeatureFlagForTest('DISABLE_TEMPORARY_V5_COMPILER_SUPPORT', true); + }); + + afterEach(() => { + setFeatureFlagForTest('DISABLE_TEMPORARY_V5_COMPILER_SUPPORT', false); + }); + + it('should not render slots properly', () => { + const nodes = createTestElement('x-default-slot', BasicSlot); + + expect(Array.from(nodes['x-container'].children)).toEqual([ + nodes['container-upper-slot-default'], + nodes['upper-text'], + nodes['default-text'], + nodes['lower-text'], + nodes['container-lower-slot-default'], + ]); + }); + }); + } }); From a8481cccbcab6aedcc55f1aa1fb385ee97d71b92 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Tue, 6 Feb 2024 11:29:37 -0800 Subject: [PATCH 4/6] chore: bump bundlesize --- scripts/bundlesize/bundlesize.config.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/bundlesize/bundlesize.config.json b/scripts/bundlesize/bundlesize.config.json index cf64dc87d7..e01e9f01e2 100644 --- a/scripts/bundlesize/bundlesize.config.json +++ b/scripts/bundlesize/bundlesize.config.json @@ -2,7 +2,7 @@ "files": [ { "path": "packages/@lwc/engine-dom/dist/index.js", - "maxSize": "22KB" + "maxSize": "24KB" }, { "path": "packages/@lwc/synthetic-shadow/dist/index.js", From 83d9c896d8708906678f568cfe3eacdde2114e03 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Tue, 6 Feb 2024 11:50:51 -0800 Subject: [PATCH 5/6] fix: add todos --- packages/@lwc/engine-core/src/framework/api.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/@lwc/engine-core/src/framework/api.ts b/packages/@lwc/engine-core/src/framework/api.ts index ae516a6bbe..bf39c8b7f2 100644 --- a/packages/@lwc/engine-core/src/framework/api.ts +++ b/packages/@lwc/engine-core/src/framework/api.ts @@ -163,6 +163,7 @@ function h(sel: string, data: VElementData, children: VNodes = EmptyArray): VEle }); } + // TODO [#3974]: remove temporary logic to support v5 compiler + v6+ engine data = applyTemporaryCompilerV5SlotFix(data); const { key, slotAssignment } = data; @@ -217,6 +218,7 @@ function s( const vmBeingRendered = getVMBeingRendered()!; const { renderMode, apiVersion } = vmBeingRendered; + // TODO [#3974]: remove temporary logic to support v5 compiler + v6+ engine data = applyTemporaryCompilerV5SlotFix(data); if ( @@ -350,6 +352,8 @@ function c( }); } } + + // TODO [#3974]: remove temporary logic to support v5 compiler + v6+ engine data = applyTemporaryCompilerV5SlotFix(data); const { key, slotAssignment } = data; From d4d984b1276966b9f5626a42a092a25fdc20163c Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Tue, 6 Feb 2024 11:55:10 -0800 Subject: [PATCH 6/6] test: move log filtering from prod code to test code --- .../src/framework/check-version-mismatch.ts | 9 --------- packages/@lwc/integration-karma/helpers/test-setup.js | 10 ++++++++++ 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/@lwc/engine-core/src/framework/check-version-mismatch.ts b/packages/@lwc/engine-core/src/framework/check-version-mismatch.ts index 37240a8c46..6f41b271e2 100644 --- a/packages/@lwc/engine-core/src/framework/check-version-mismatch.ts +++ b/packages/@lwc/engine-core/src/framework/check-version-mismatch.ts @@ -35,15 +35,6 @@ export function checkVersionMismatch( func: Template | StylesheetFactory | LightningElementConstructor, type: 'template' | 'stylesheet' | 'component' ) { - // Only used in LWC's Karma tests - if (process.env.NODE_ENV === 'test-karma-lwc') { - // If we are explicitly testing for a compiler/engine version mismatch, then there is no need to warn - // TODO [#3974]: remove temporary logic to support v5 compiler + v6+ engine - if (process.env.FORCE_LWC_V5_COMPILER_FOR_TEST) { - return; - } - } - const versionMatcher = func.toString().match(LWC_VERSION_COMMENT_REGEX); if (!isNull(versionMatcher) && !warned) { const version = versionMatcher[1]; diff --git a/packages/@lwc/integration-karma/helpers/test-setup.js b/packages/@lwc/integration-karma/helpers/test-setup.js index 82fcbde6a5..8f29f9fbfd 100644 --- a/packages/@lwc/integration-karma/helpers/test-setup.js +++ b/packages/@lwc/integration-karma/helpers/test-setup.js @@ -61,6 +61,16 @@ function patchConsole() { var originalMethod = console[method]; // eslint-disable-next-line no-console console[method] = function () { + // TODO [#3974]: remove temporary logic to support v5 compiler + v6+ engine + if ( + process.env.FORCE_LWC_V5_COMPILER_FOR_TEST && + arguments[0] && + arguments[0].includes('template was compiled with v5') + ) { + // ignore this warning; this is expected + return; + } + consoleCallCount++; return originalMethod.apply(this, arguments); };