[READY] feat: add type parameters to class name

src/compiler/build/build-stats.ts

@@ -147,6 +147,7 @@ function getComponentsFileMap(config: d.Config, buildCtx: d.BuildCtx) {
       source: relativePath(config, component.sourceFilePath),
       elementRef: component.elementRef,
       componentClassName: component.componentClassName,
+      componentClassTypeParameters: component.componentClassTypeParameters,
       assetsDirs: component.assetsDirs,
       dependencies: component.dependencies,
       dependents: component.dependents,

src/compiler/transformers/static-to-meta/component.ts

@@ -60,6 +60,7 @@ export const parseStaticComponentMeta = (
     excludeFromCollection: moduleFile.excludeFromCollection,
     isCollectionDependency,
     componentClassName: cmpNode.name ? cmpNode.name.text : '',
+    componentClassTypeParameters: [],
     elementRef: parseStaticElementRef(staticMembers),
     encapsulation,
     shadowDelegatesFocus: parseStaticShadowDelegatesFocus(encapsulation, staticMembers),
@@ -134,6 +135,34 @@ export const parseStaticComponentMeta = (
     potentialCmpRefs: [],
   };
 
+  /**
+   * This code add a component class name with the type
+   * parameters. Later in the compiler execution there
+   * will this name used to named the interfaces in the
+   * component.d.ts.
+   *
+   * Addressed issue(s):
+   * - https://github.com/ionic-team/stencil/issues/2895
+   *
+   * TypeScript implementation:
+   * - https://github.com/microsoft/TypeScript/blob/7584e6aad6b21f7334562bfd9d8c3c80aafed064/src/services/services.ts#L326
+   */
+  if (
+    typeof symbol === 'object' &&
+    symbol !== null &&
+    typeof symbol.getDeclarations === 'function'
+  ) {
+    const declarations = symbol.getDeclarations();
+    if (Array.isArray(declarations) && declarations.length > 0) {
+      const declaration = declarations[0] as ts.ClassDeclaration;
+      if (Array.isArray(declaration.typeParameters)) {
+        declaration.typeParameters.forEach((typeParameter) =>
+          cmp.componentClassTypeParameters.push(typeParameter.name.text)
+        );
+      }
+    }
+  }
+
   const visitComponentChildNode = (node: ts.Node) => {
     if (ts.isCallExpression(node)) {
       parseCallExpression(cmp, node);

src/compiler/types/generate-component-types.ts

@@ -19,6 +19,12 @@ export const generateComponentTypes = (
 ): d.TypesModule => {
   const tagName = cmp.tagName.toLowerCase();
   const tagNameAsPascal = dashToPascalCase(tagName);
+  const classTypeParams =
+    cmp.componentClassTypeParameters.length > 0 ? `<${cmp.componentClassTypeParameters.join(',')}>` : '';
+  const classTypeParamsAny =
+    cmp.componentClassTypeParameters.length > 0
+      ? `<${cmp.componentClassTypeParameters.map(() => 'any').join(',')}>`
+      : '';
   const htmlElementName = `HTML${tagNameAsPascal}Element`;
 
   const propAttributes = generatePropTypes(cmp, typeImportData);
@@ -35,23 +41,26 @@ export const generateComponentTypes = (
 
   const element = [
     addDocBlock(
-      `        interface ${htmlElementName} extends Components.${tagNameAsPascal}, HTMLStencilElement {`,
+      `        interface ${htmlElementName}${classTypeParams} extends Components.${tagNameAsPascal}${classTypeParams}, HTMLStencilElement {`,
       cmp.docs,
       4
     ),
+    `                prototype: ${htmlElementName}${classTypeParams};`,
+    `                new (): ${htmlElementName}${classTypeParams};`,
     `        }`,
-    `        var ${htmlElementName}: {`,
-    `                prototype: ${htmlElementName};`,
-    `                new (): ${htmlElementName};`,
-    `        };`,
+    `        var ${htmlElementName}: ${htmlElementName}${classTypeParamsAny};`,
   ];
   return {
     isDep,
     tagName,
-    tagNameAsPascal,
-    htmlElementName,
-    component: addDocBlock(`        interface ${tagNameAsPascal} {\n${componentAttributes}        }`, cmp.docs, 4),
-    jsx: `    interface ${tagNameAsPascal} {\n${jsxAttributes}        }`,
+    tagNameAsPascal: `${tagNameAsPascal}${classTypeParamsAny}`,
+    htmlElementName: `${htmlElementName}${classTypeParamsAny}`,
+    component: addDocBlock(
+      `        interface ${tagNameAsPascal}${classTypeParams} {\n${componentAttributes}        }`,
+      cmp.docs,
+      4
+    ),
+    jsx: `    interface ${tagNameAsPascal}${classTypeParams} {\n${jsxAttributes}        }`,
     element: element.join(`\n`),
   };
 };

src/compiler/types/tests/ComponentCompilerMeta.stub.ts

@@ -12,6 +12,7 @@ export const stubComponentCompilerMeta = (
 ): d.ComponentCompilerMeta => ({
   assetsDirs: [],
   componentClassName: 'StubCmp',
+  componentClassTypeParameters: [],
   dependencies: [],
   dependents: [],
   directDependencies: [],

src/compiler/types/tests/generate-component-types.spec.ts

@@ -0,0 +1,61 @@
+import type * as d from '../../../declarations';
+import { generateComponentTypes } from '../generate-component-types';
+import { stubComponentCompilerMeta } from './ComponentCompilerMeta.stub';
+import { stubTypesImportData } from './TypesImportData.stub';
+
+describe('generate-component-types', () => {
+  describe('generateComponentTypes', () => {
+    it('default', () => {
+      // given
+      const componentCompilerMeta = stubComponentCompilerMeta();
+      const typeImportData = stubTypesImportData();
+
+      // when
+      const typesModule: d.TypesModule = generateComponentTypes(componentCompilerMeta, typeImportData, false);
+
+      // then
+      expect(typesModule).toEqual<d.TypesModule>({
+        component: `        interface StubCmp {
+        }`,
+        element: `        interface HTMLStubCmpElement extends Components.StubCmp, HTMLStencilElement {
+                prototype: HTMLStubCmpElement;
+                new (): HTMLStubCmpElement;
+        }
+        var HTMLStubCmpElement: HTMLStubCmpElement;`,
+        htmlElementName: `HTMLStubCmpElement`,
+        isDep: false,
+        jsx: `    interface StubCmp {
+        }`,
+        tagName: 'stub-cmp',
+        tagNameAsPascal: 'StubCmp',
+      });
+    });
+
+    it('with type parameters', () => {
+      // given
+      const componentCompilerMeta = stubComponentCompilerMeta();
+      const typeImportData = stubTypesImportData();
+      componentCompilerMeta.componentClassTypeParameters = ['a', 'b'];
+
+      // when
+      const typesModule: d.TypesModule = generateComponentTypes(componentCompilerMeta, typeImportData, false);
+
+      // then
+      expect(typesModule).toEqual<d.TypesModule>({
+        component: `        interface StubCmp<a,b> {
+        }`,
+        element: `        interface HTMLStubCmpElement<a,b> extends Components.StubCmp<a,b>, HTMLStencilElement {
+                prototype: HTMLStubCmpElement<a,b>;
+                new (): HTMLStubCmpElement<a,b>;
+        }
+        var HTMLStubCmpElement: HTMLStubCmpElement<any,any>;`,
+        htmlElementName: `HTMLStubCmpElement<any,any>`,
+        isDep: false,
+        jsx: `    interface StubCmp<a,b> {
+        }`,
+        tagName: 'stub-cmp',
+        tagNameAsPascal: 'StubCmp<any,any>',
+      });
+    });
+  });
+});

src/declarations/stencil-private.ts

@@ -794,6 +794,7 @@ export interface ComponentCompilerFeatures {
 export interface ComponentCompilerMeta extends ComponentCompilerFeatures {
   assetsDirs: CompilerAssetDir[];
   componentClassName: string;
+  componentClassTypeParameters: string[];
   elementRef: string;
   encapsulation: Encapsulation;
   shadowDelegatesFocus: boolean;