fix(rollup-plugin): allow any implicit HTML import from any kind of script file @W-15941938

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;
 

packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/lwc.config.json

@@ -0,0 +1,5 @@
+{
+    "modules": [
+        { "dir" : "src/modules" }
+    ]
+}

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"
+}

packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/src/javascript.js

@@ -0,0 +1 @@
+import Extension from 'x/ext-js'

packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/src/modules/x/base/base.html

@@ -0,0 +1,3 @@
+<template>
+  all your base
+</template>

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 {}

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 {}

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 {}

packages/@lwc/rollup-plugin/src/__tests__/resolver/fixtures/inherited-templates/src/typescript.ts

@@ -0,0 +1 @@
+import Extension from 'x/ext-ts'

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');
+    });
 });

packages/@lwc/rollup-plugin/src/index.ts

@@ -65,13 +65,14 @@ 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 = '';
+const SCRIPT_FILE_EXTENSIONS = ['.js', '.mjs', '.jsx', '.ts', '.mts', '.tsx'];
 
-function isImplicitHTMLImport(importee: string, importer: string): boolean {
+function isImplicitHTMLImport(importee: string, importer: string, importerExt: string): boolean {
     return (
-        path.extname(importer) === '.js' &&
+        SCRIPT_FILE_EXTENSIONS.includes(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 +228,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;