From 812e4a8618ff81ed0a25bc12f8e50ec1a9f92107 Mon Sep 17 00:00:00 2001 From: Will Harney Date: Wed, 5 Jun 2024 11:50:51 -0400 Subject: [PATCH 1/3] fix(rollup-plugin): allow any implicit HTML import from any kind of script file Fixes #4233 --- .../inherited-templates/lwc.config.json | 5 ++++ .../fixtures/inherited-templates/package.json | 5 ++++ .../inherited-templates/src/javascript.js | 1 + .../src/modules/x/base/base.html | 3 ++ .../src/modules/x/base/base.js | 3 ++ .../src/modules/x/ext-js/ext-js.js | 3 ++ .../src/modules/x/ext-ts/ext-ts.ts | 3 ++ .../inherited-templates/src/typescript.ts | 1 + .../src/__tests__/resolver/resolver.spec.ts | 28 +++++++++++++++++++ packages/@lwc/rollup-plugin/src/index.ts | 14 +++++++--- 10 files changed, 62 insertions(+), 4 deletions(-) create mode 100644 packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/lwc.config.json create mode 100644 packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/package.json create mode 100644 packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/src/javascript.js create mode 100644 packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/src/modules/x/base/base.html create mode 100644 packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/src/modules/x/base/base.js create mode 100644 packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/src/modules/x/ext-js/ext-js.js create mode 100644 packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/src/modules/x/ext-ts/ext-ts.ts create mode 100644 packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/src/typescript.ts diff --git a/packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/lwc.config.json b/packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/lwc.config.json new file mode 100644 index 0000000000..ae0e1fa09d --- /dev/null +++ b/packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/lwc.config.json @@ -0,0 +1,5 @@ +{ + "modules": [ + { "dir" : "src/modules" } + ] +} \ No newline at end of file diff --git a/packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/package.json b/packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/package.json new file mode 100644 index 0000000000..0d57611419 --- /dev/null +++ b/packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/package.json @@ -0,0 +1,5 @@ +{ + "name": "inherited-template-tests", + "private": true, + "version": "0.0.1" +} diff --git a/packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/src/javascript.js b/packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/src/javascript.js new file mode 100644 index 0000000000..103ddb62d0 --- /dev/null +++ b/packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/src/javascript.js @@ -0,0 +1 @@ +import Extension from 'x/ext-js' \ No newline at end of file diff --git a/packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/src/modules/x/base/base.html b/packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/src/modules/x/base/base.html new file mode 100644 index 0000000000..3e59dae0b0 --- /dev/null +++ b/packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/src/modules/x/base/base.html @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/src/modules/x/base/base.js b/packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/src/modules/x/base/base.js new file mode 100644 index 0000000000..ca8dce94e0 --- /dev/null +++ b/packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/src/modules/x/base/base.js @@ -0,0 +1,3 @@ +import { LightningElement } from 'lwc'; + +export default class extends LightningElement {} diff --git a/packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/src/modules/x/ext-js/ext-js.js b/packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/src/modules/x/ext-js/ext-js.js new file mode 100644 index 0000000000..3a93b0bd35 --- /dev/null +++ b/packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/src/modules/x/ext-js/ext-js.js @@ -0,0 +1,3 @@ +import Base from "x/base"; + +export default class extends Base {} \ No newline at end of file diff --git a/packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/src/modules/x/ext-ts/ext-ts.ts b/packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/src/modules/x/ext-ts/ext-ts.ts new file mode 100644 index 0000000000..3a93b0bd35 --- /dev/null +++ b/packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/src/modules/x/ext-ts/ext-ts.ts @@ -0,0 +1,3 @@ +import Base from "x/base"; + +export default class extends Base {} \ No newline at end of file diff --git a/packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/src/typescript.ts b/packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/src/typescript.ts new file mode 100644 index 0000000000..683cfa423f --- /dev/null +++ b/packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/src/typescript.ts @@ -0,0 +1 @@ +import Extension from 'x/ext-ts' \ No newline at end of file diff --git a/packages/@lwc/rollup-plugin/src/__tests__/resolver/resolver.spec.ts b/packages/@lwc/rollup-plugin/src/__tests__/resolver/resolver.spec.ts index ffaf2ad339..8ce834e4c5 100644 --- a/packages/@lwc/rollup-plugin/src/__tests__/resolver/resolver.spec.ts +++ b/packages/@lwc/rollup-plugin/src/__tests__/resolver/resolver.spec.ts @@ -231,4 +231,32 @@ describe('resolver', () => { // Alias name expect(code).not.toContain(`sel: "foo-bar"`); }); + + it('should resolve inherited template for JavaScript component [#4233]', async () => { + const bundle = await rollup({ + input: path.resolve(__dirname, 'fixtures/inherited-templates/src/javascript.js'), + plugins: [lwc()], + }); + + const result = await bundle.generate({ + format: 'esm', + }); + const { code } = result.output[0]; + + expect(code).toContain('all your base'); + }); + + it('should resolve inherited template for TypeScript component [#4233]', async () => { + const bundle = await rollup({ + input: path.resolve(__dirname, 'fixtures/inherited-templates/src/typescript.ts'), + plugins: [lwc()], + }); + + const result = await bundle.generate({ + format: 'esm', + }); + const { code } = result.output[0]; + + expect(code).toContain('all your base'); + }); }); diff --git a/packages/@lwc/rollup-plugin/src/index.ts b/packages/@lwc/rollup-plugin/src/index.ts index 8bbdada66e..bf1c4ed6e9 100644 --- a/packages/@lwc/rollup-plugin/src/index.ts +++ b/packages/@lwc/rollup-plugin/src/index.ts @@ -65,13 +65,15 @@ const IMPLICIT_DEFAULT_HTML_PATH = '@lwc/resources/empty_html.js'; const EMPTY_IMPLICIT_HTML_CONTENT = 'export default void 0'; const IMPLICIT_DEFAULT_CSS_PATH = '@lwc/resources/empty_css.css'; const EMPTY_IMPLICIT_CSS_CONTENT = ''; +/** Matches all permutations of CJS/ESM, JS/TS, JS/JSX. */ +const SCRIPT_FILE_EXTENSION_REGEX = /^\.[cm]?[jt]sx?$/i; -function isImplicitHTMLImport(importee: string, importer: string): boolean { +function isImplicitHTMLImport(importee: string, importer: string, importerExt: string): boolean { return ( - path.extname(importer) === '.js' && + SCRIPT_FILE_EXTENSION_REGEX.test(importerExt) && path.extname(importee) === '.html' && path.dirname(importer) === path.dirname(importee) && - path.basename(importer, '.js') === path.basename(importee, '.html') + path.basename(importer, importerExt) === path.basename(importee, '.html') ); } @@ -227,7 +229,11 @@ export default function lwc(pluginOptions: RollupLwcOptions = {}): Plugin { parseDescriptorFromFilePath(importeeAbsPath); if ( - isImplicitHTMLImport(importeeNormalizedFilename, importerFilename) && + isImplicitHTMLImport( + importeeNormalizedFilename, + importerFilename, + importerExt + ) && !fs.existsSync(importeeNormalizedFilename) ) { return IMPLICIT_DEFAULT_HTML_PATH; From 901aad121e217bea10ad1cf9f40d8a66e8ed79f5 Mon Sep 17 00:00:00 2001 From: Will Harney Date: Fri, 7 Jun 2024 16:44:09 -0400 Subject: [PATCH 2/3] refactor(rollup-plugin): use list of file extensions instead of regex --- packages/@lwc/rollup-plugin/src/index.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/@lwc/rollup-plugin/src/index.ts b/packages/@lwc/rollup-plugin/src/index.ts index bf1c4ed6e9..c0f8bfc284 100644 --- a/packages/@lwc/rollup-plugin/src/index.ts +++ b/packages/@lwc/rollup-plugin/src/index.ts @@ -65,12 +65,11 @@ const IMPLICIT_DEFAULT_HTML_PATH = '@lwc/resources/empty_html.js'; const EMPTY_IMPLICIT_HTML_CONTENT = 'export default void 0'; const IMPLICIT_DEFAULT_CSS_PATH = '@lwc/resources/empty_css.css'; const EMPTY_IMPLICIT_CSS_CONTENT = ''; -/** Matches all permutations of CJS/ESM, JS/TS, JS/JSX. */ -const SCRIPT_FILE_EXTENSION_REGEX = /^\.[cm]?[jt]sx?$/i; +const SCRIPT_FILE_EXTENSIONS = ['.js', '.mjs', '.jsx', '.ts', '.mts', '.tsx']; function isImplicitHTMLImport(importee: string, importer: string, importerExt: string): boolean { return ( - SCRIPT_FILE_EXTENSION_REGEX.test(importerExt) && + SCRIPT_FILE_EXTENSIONS.includes(importerExt) && path.extname(importee) === '.html' && path.dirname(importer) === path.dirname(importee) && path.basename(importer, importerExt) === path.basename(importee, '.html') From d8fb8277e6ef67579edecb6aab644693d4621029 Mon Sep 17 00:00:00 2001 From: Will Harney Date: Fri, 7 Jun 2024 16:47:12 -0400 Subject: [PATCH 3/3] feat(transformer): allow .mts and .mjs file extensions --- packages/@lwc/compiler/src/transformers/transformer.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/@lwc/compiler/src/transformers/transformer.ts b/packages/@lwc/compiler/src/transformers/transformer.ts index e0132c4e14..717dfbdbd7 100755 --- a/packages/@lwc/compiler/src/transformers/transformer.ts +++ b/packages/@lwc/compiler/src/transformers/transformer.ts @@ -126,6 +126,8 @@ function transformFile( case '.jsx': case '.ts': case '.js': + case '.mts': + case '.mjs': transformer = options.targetSSR ? compileComponentForSSR : scriptTransformer; break;