feat(runtime): allow class extending

package.json

@@ -121,7 +121,7 @@
     "test.dist": "npm run ts scripts/index.ts -- --validate-build",
     "test.end-to-end": "cd test/end-to-end && npm ci && npm test && npm run test.dist",
     "test.jest": "node --experimental-vm-modules ./node_modules/jest/bin/jest.js",
-    "test.type-tests": "cd ./test/wdio && npm install && npm run build.main && cd ../../ && tsc -p test/type-tests/tsconfig.json",
+    "test.type-tests": "cd ./test/wdio && npm install && npm run build.test-sibling && npm run build.main && cd ../../ && tsc -p test/type-tests/tsconfig.json",
     "test.wdio": "cd test/wdio && npm ci && npm run test",
     "test.wdio.testOnly": "cd test/wdio && npm ci && npm run wdio",
     "test.prod": "npm run test.dist && npm run test.end-to-end && npm run test.jest && npm run test.wdio && npm run test.testing && npm run test.analysis",

src/client/client-host-ref.ts

@@ -25,6 +25,7 @@ export const getHostRef = (ref: d.RuntimeRef): d.HostRef | undefined => {
  * @param hostRef that instances `HostRef` object
  */
 export const registerInstance = (lazyInstance: any, hostRef: d.HostRef) => {
+  if (!hostRef) return;
   lazyInstance.__stencil__getHostRef = () => hostRef;
   hostRef.$lazyInstance$ = lazyInstance;
 

src/compiler/build/compiler-ctx.ts

@@ -88,6 +88,8 @@ export const getModuleLegacy = (compilerCtx: d.CompilerCtx, sourceFilePath: stri
       sourceFilePath: sourceFilePath,
       jsFilePath: jsFilePath,
       cmps: [],
+      isExtended: false,
+      isMixin: false,
       coreRuntimeApis: [],
       outputTargetCoreRuntimeApis: {},
       collectionName: null,

src/compiler/bundle/typescript-plugin.ts

@@ -57,7 +57,7 @@ export const typescriptPlugin = (
       if (isAbsolute(id)) {
         const fsFilePath = normalizeFsPath(id);
         const mod = getModule(compilerCtx, fsFilePath);
-        if (mod && mod.cmps.length > 0) {
+        if (mod?.cmps) {
           const tsResult = ts.transpileModule(mod.staticSourceFileText, {
             compilerOptions: config.tsCompilerOptions,
             fileName: mod.sourceFilePath,

src/compiler/output-targets/dist-lazy/generate-cjs.ts

@@ -4,6 +4,7 @@ import type { OutputOptions, RollupBuild } from 'rollup';
 import type * as d from '../../../declarations';
 import { generateRollupOutput } from '../../app-core/bundle-app-core';
 import { generateLazyModules } from './generate-lazy-module';
+import { lazyBundleIdPlugin } from './lazy-bundleid-plugin';
 
 export const generateCjs = async (
   config: d.ValidatedConfig,
@@ -22,6 +23,7 @@ export const generateCjs = async (
       entryFileNames: '[name].cjs.js',
       assetFileNames: '[name]-[hash][extname]',
       sourcemap: config.sourceMap,
+      plugins: [lazyBundleIdPlugin(buildCtx, config, false, '.cjs')],
     };
 
     if (!!config.extras.experimentalImportInjection || !!config.extras.enableImportInjection) {
@@ -44,7 +46,6 @@ export const generateCjs = async (
         results,
         'es2017',
         false,
-        '.cjs',
       );
 
       await generateShortcuts(compilerCtx, results, cjsOutputs);

src/compiler/output-targets/dist-lazy/generate-esm-browser.ts

@@ -4,6 +4,7 @@ import type { OutputOptions, RollupBuild } from 'rollup';
 import type * as d from '../../../declarations';
 import { generateRollupOutput } from '../../app-core/bundle-app-core';
 import { generateLazyModules } from './generate-lazy-module';
+import { lazyBundleIdPlugin } from './lazy-bundleid-plugin';
 
 export const generateEsmBrowser = async (
   config: d.ValidatedConfig,
@@ -22,6 +23,7 @@ export const generateEsmBrowser = async (
       chunkFileNames: config.hashFileNames ? 'p-[hash].js' : '[name]-[hash].js',
       assetFileNames: config.hashFileNames ? 'p-[hash][extname]' : '[name]-[hash][extname]',
       sourcemap: config.sourceMap,
+      plugins: [lazyBundleIdPlugin(buildCtx, config, config.hashFileNames, '')],
     };
 
     const output = await generateRollupOutput(rollupBuild, esmOpts, config, buildCtx.entryModules);
@@ -39,7 +41,6 @@ export const generateEsmBrowser = async (
         output,
         'es2017',
         true,
-        '',
       );
     }
   }

src/compiler/output-targets/dist-lazy/generate-esm.ts

@@ -5,6 +5,7 @@ import type * as d from '../../../declarations';
 import type { RollupResult } from '../../../declarations';
 import { generateRollupOutput } from '../../app-core/bundle-app-core';
 import { generateLazyModules } from './generate-lazy-module';
+import { lazyBundleIdPlugin } from './lazy-bundleid-plugin';
 
 export const generateEsm = async (
   config: d.ValidatedConfig,
@@ -22,6 +23,7 @@ export const generateEsm = async (
       entryFileNames: '[name].js',
       assetFileNames: '[name]-[hash][extname]',
       sourcemap: config.sourceMap,
+      plugins: [lazyBundleIdPlugin(buildCtx, config, false, '')],
     };
     const outputTargetType = esmOutputs[0].type;
     const output = await generateRollupOutput(rollupBuild, esmOpts, config, buildCtx.entryModules);
@@ -39,7 +41,6 @@ export const generateEsm = async (
         output,
         'es2017',
         false,
-        '',
       );
 
       const es5destinations = esmEs5Outputs
@@ -54,7 +55,6 @@ export const generateEsm = async (
         output,
         'es5',
         false,
-        '',
       );
 
       if (config.buildEs5) {

src/compiler/output-targets/dist-lazy/generate-lazy-module.ts

@@ -21,7 +21,6 @@ export const generateLazyModules = async (
   results: d.RollupResult[],
   sourceTarget: d.SourceTarget,
   isBrowserBuild: boolean,
-  sufix: string,
 ): Promise<d.BundleModule[]> => {
   if (!Array.isArray(destinations) || destinations.length === 0) {
     return [];
@@ -43,7 +42,6 @@ export const generateLazyModules = async (
         sourceTarget,
         shouldMinify,
         isBrowserBuild,
-        sufix,
       );
     }),
   );
@@ -190,10 +188,8 @@ const generateLazyEntryModule = async (
   sourceTarget: d.SourceTarget,
   shouldMinify: boolean,
   isBrowserBuild: boolean,
-  sufix: string,
 ): Promise<d.BundleModule> => {
   const entryModule = buildCtx.entryModules.find((entryModule) => entryModule.entryKey === rollupResult.entryKey);
-  const shouldHash = config.hashFileNames && isBrowserBuild;
 
   const { code, sourceMap } = await convertChunk(
     config,
@@ -207,17 +203,7 @@ const generateLazyEntryModule = async (
     rollupResult.map,
   );
 
-  const output = await writeLazyModule(
-    config,
-    compilerCtx,
-    outputTargetType,
-    destinations,
-    entryModule,
-    shouldHash,
-    code,
-    sourceMap,
-    sufix,
-  );
+  const output = await writeLazyModule(compilerCtx, outputTargetType, destinations, code, sourceMap, rollupResult);
 
   return {
     rollupResult,

src/compiler/output-targets/dist-lazy/generate-system.ts

@@ -5,6 +5,7 @@ import type * as d from '../../../declarations';
 import { getAppBrowserCorePolyfills } from '../../app-core/app-polyfills';
 import { generateRollupOutput } from '../../app-core/bundle-app-core';
 import { generateLazyModules } from './generate-lazy-module';
+import { lazyBundleIdPlugin } from './lazy-bundleid-plugin';
 
 export const generateSystem = async (
   config: d.ValidatedConfig,
@@ -23,6 +24,7 @@ export const generateSystem = async (
       chunkFileNames: config.hashFileNames ? 'p-[hash].system.js' : '[name]-[hash].system.js',
       assetFileNames: config.hashFileNames ? 'p-[hash][extname]' : '[name]-[hash][extname]',
       sourcemap: config.sourceMap,
+      plugins: [lazyBundleIdPlugin(buildCtx, config, config.hashFileNames, '.system')],
     };
     const results = await generateRollupOutput(rollupBuild, esmOpts, config, buildCtx.entryModules);
     if (results != null) {
@@ -38,7 +40,6 @@ export const generateSystem = async (
         results,
         'es5',
         true,
-        '.system',
       );
 
       await generateSystemLoaders(config, compilerCtx, results, systemOutputs);

src/compiler/output-targets/dist-lazy/lazy-bundleid-plugin.ts

@@ -0,0 +1,75 @@
+import MagicString from 'magic-string';
+
+import type { OutputChunk, Plugin } from 'rollup';
+import type * as d from '../../../declarations';
+
+/**
+ * A Rollup plugin to generate unique bundle IDs for lazy-loaded modules.
+ * @param buildCtx The build context
+ * @param config The validated configuration
+ * @param shouldHash Whether to hash the bundle ID
+ * @param suffix The suffix to append to the bundle ID
+ * @returns A Rollup plugin
+ */
+export const lazyBundleIdPlugin = (
+  buildCtx: d.BuildCtx,
+  config: d.ValidatedConfig,
+  shouldHash: boolean,
+  suffix: string,
+): Plugin => {
+  const getBundleId = async (entryKey: string, code: string, suffix: string): Promise<string> => {
+    if (shouldHash && config.sys?.generateContentHash) {
+      const hash = await config.sys.generateContentHash(code, config.hashedFileNameLength);
+      return `p-${hash}${suffix}`;
+    }
+
+    const components = entryKey.split('.');
+    let bundleId = components[0];
+    if (components.length > 2) {
+      bundleId = `${bundleId}_${components.length - 1}`;
+    }
+
+    return bundleId + suffix;
+  };
+
+  return {
+    name: 'lazyBundleIdPlugin',
+    async generateBundle(_, bundle) {
+      const files = Object.entries<OutputChunk>(bundle as any);
+      const map = new Map<string, string>();
+
+      for (const [_key, file] of files) {
+        if (!file.isEntry) continue;
+
+        const entryModule = buildCtx.entryModules.find((em) => em.entryKey === file.name);
+        if (!entryModule) continue;
+
+        map.set(file.fileName, (await getBundleId(file.name, file.code, suffix)) + '.entry.js');
+      }
+
+      if (!map.size) return;
+
+      for (const [_key, file] of files) {
+        if (!file.isEntry) continue;
+
+        file.facadeModuleId = map.get(file.fileName) || file.facadeModuleId;
+        file.fileName = map.get(file.fileName) || file.fileName;
+
+        const magicString = new MagicString(file.code);
+
+        file.imports.forEach((imported: string, i) => {
+          const replaced = map.get(imported);
+          if (replaced) {
+            magicString.replaceAll(imported, replaced);
+            file.imports[i] = replaced;
+          }
+        });
+        file.code = magicString.toString();
+
+        if (config.sourceMap) {
+          file.map = magicString.generateMap();
+        }
+      }
+    },
+  };
+};

src/compiler/output-targets/dist-lazy/write-lazy-entry-module.ts

@@ -3,20 +3,17 @@ import { getSourceMappingUrlForEndOfFile, join } from '@utils';
 import type * as d from '../../../declarations';
 
 export const writeLazyModule = async (
-  config: d.ValidatedConfig,
   compilerCtx: d.CompilerCtx,
   outputTargetType: string,
   destinations: string[],
-  entryModule: d.EntryModule,
-  shouldHash: boolean,
   code: string,
   sourceMap: d.SourceMap,
-  sufix: string,
+  rollupResult?: d.RollupChunkResult,
 ): Promise<d.BundleModuleOutput> => {
   // code = replaceStylePlaceholders(entryModule.cmps, modeName, code);
 
-  const bundleId = await getBundleId(config, entryModule.entryKey, shouldHash, code, sufix);
-  const fileName = `${bundleId}.entry.js`;
+  const fileName = rollupResult.fileName;
+  const bundleId = fileName.replace('.entry.js', '');
 
   if (sourceMap) {
     code = code + getSourceMappingUrlForEndOfFile(fileName);
@@ -37,24 +34,3 @@ export const writeLazyModule = async (
     code,
   };
 };
-
-const getBundleId = async (
-  config: d.ValidatedConfig,
-  entryKey: string,
-  shouldHash: boolean,
-  code: string,
-  sufix: string,
-): Promise<string> => {
-  if (shouldHash) {
-    const hash = await config.sys.generateContentHash(code, config.hashedFileNameLength);
-    return `p-${hash}${sufix}`;
-  }
-
-  const components = entryKey.split('.');
-  let bundleId = components[0];
-  if (components.length > 2) {
-    bundleId = `${bundleId}_${components.length - 1}`;
-  }
-
-  return bundleId + sufix;
-};

src/compiler/transformers/component-hydrate/tranform-to-hydrate-component.ts

@@ -4,7 +4,7 @@ import type * as d from '../../../declarations';
 import { addImports } from '../add-imports';
 import { addLegacyApis } from '../core-runtime-apis';
 import { updateStyleImports } from '../style-imports';
-import { getComponentMeta, getModuleFromSourceFile } from '../transform-utils';
+import { getComponentMeta, getModuleFromSourceFile, updateMixin } from '../transform-utils';
 import { updateHydrateComponentClass } from './hydrate-component';
 
 export const hydrateComponentTransform = (
@@ -20,6 +20,8 @@ export const hydrateComponentTransform = (
           const cmp = getComponentMeta(compilerCtx, tsSourceFile, node);
           if (cmp != null) {
             return updateHydrateComponentClass(node, moduleFile, cmp);
+          } else if (compilerCtx.moduleMap.get(tsSourceFile.fileName)?.isMixin) {
+            return updateMixin(node, moduleFile, cmp, transformOpts);
           }
         }
 

src/compiler/transformers/component-lazy/attach-internals.ts

@@ -42,6 +42,9 @@ import { HOST_REF_ARG } from './constants';
  * @returns a list of expression statements
  */
 export function createLazyAttachInternalsBinding(cmp: d.ComponentCompilerMeta): ts.Statement[] {
+  if (!cmp?.attachInternalsMemberName) {
+    return [];
+  }
   if (cmp.attachInternalsMemberName) {
     return [
       ts.factory.createIfStatement(

src/compiler/transformers/component-lazy/lazy-constructor.ts

@@ -46,7 +46,7 @@ export const updateLazyComponentConstructor = (
  * @param moduleFile information about a module containing a Stencil component
  * @returns an expression statement for a call to the `registerInstance` helper
  */
-const registerInstanceStatement = (moduleFile: d.Module): ts.ExpressionStatement => {
+const registerInstanceStatement = (moduleFile: d.Module) => {
   addCoreRuntimeApi(moduleFile, RUNTIME_APIS.registerInstance);
 
   return ts.factory.createExpressionStatement(

src/compiler/transformers/component-lazy/transform-lazy-component.ts

@@ -4,7 +4,7 @@ import type * as d from '../../../declarations';
 import { addImports } from '../add-imports';
 import { addLegacyApis } from '../core-runtime-apis';
 import { updateStyleImports } from '../style-imports';
-import { getComponentMeta, getModuleFromSourceFile } from '../transform-utils';
+import { getComponentMeta, getModuleFromSourceFile, updateMixin } from '../transform-utils';
 import { updateLazyComponentClass } from './lazy-component';
 
 /**
@@ -32,8 +32,12 @@ export const lazyComponentTransform = (
       const visitNode = (node: ts.Node): any => {
         if (ts.isClassDeclaration(node)) {
           const cmp = getComponentMeta(compilerCtx, tsSourceFile, node);
+          const module = compilerCtx.moduleMap.get(tsSourceFile.fileName);
+
           if (cmp != null) {
             return updateLazyComponentClass(transformOpts, styleStatements, node, moduleFile, cmp);
+          } else if (module?.isMixin) {
+            return updateMixin(node, moduleFile, cmp, transformOpts);
           }
         }
         return ts.visitEachChild(node, visitNode, transformCtx);