Feat/add type parameters to class name

feat: add type parameters to class name

Author: deleonio

src/compiler/build/build-stats.ts

@@ -146,6 +146,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

@@ -45,6 +45,7 @@ export const parseStaticComponentMeta = (
     excludeFromCollection: moduleFile.excludeFromCollection,
     isCollectionDependency,
     componentClassName: cmpNode.name ? cmpNode.name.text : '',
+    componentClassTypeParameters: [],
     elementRef: parseStaticElementRef(staticMembers),
     encapsulation,
     shadowDelegatesFocus: parseStaticShadowDelegatesFocus(encapsulation, staticMembers),
@@ -119,6 +120,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

@@ -18,6 +18,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);
@@ -33,20 +39,19 @@ export const generateComponentTypes = (
   const jsxAttributes = attributesToMultiLineString([...propAttributes, ...eventAttributes], true, areTypesInternal);
 
   const element = [
-    `        interface ${htmlElementName} extends Components.${tagNameAsPascal}, HTMLStencilElement {`,
+    `        interface ${htmlElementName}${classTypeParams} extends Components.${tagNameAsPascal}${classTypeParams}, HTMLStencilElement {`,
+    `                prototype: ${htmlElementName}${classTypeParams};`,
+    `                new (): ${htmlElementName}${classTypeParams};`,
     `        }`,
-    `        var ${htmlElementName}: {`,
-    `                prototype: ${htmlElementName};`,
-    `                new (): ${htmlElementName};`,
-    `        };`,
+    `        var ${htmlElementName}: ${htmlElementName}${classTypeParamsAny};`,
   ];
   return {
     isDep,
     tagName,
-    tagNameAsPascal,
-    htmlElementName,
-    component: `        interface ${tagNameAsPascal} {\n${componentAttributes}        }`,
-    jsx: `    interface ${tagNameAsPascal} {\n${jsxAttributes}        }`,
+    tagNameAsPascal: `${tagNameAsPascal}${classTypeParamsAny}`,
+    htmlElementName: `${htmlElementName}${classTypeParamsAny}`,
+    component: `        interface ${tagNameAsPascal}${classTypeParams} {\n${componentAttributes}        }`,
+    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/declarations/stencil-private.ts

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