From 0e987fe15080c333fba0af92fbab6a53f62e62b0 Mon Sep 17 00:00:00 2001
From: Martin Oppitz <github@martinoppitz.com>
Date: Tue, 26 Jul 2022 22:57:24 +0200
Subject: [PATCH 1/2] feat: add type parameter handling to react output plugin

---
 packages/react-output-target/package.json        | 2 +-
 packages/react-output-target/src/output-react.ts | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react-output-target/package.json b/packages/react-output-target/package.json
index 27d63c94..7911d277 100644
--- a/packages/react-output-target/package.json
+++ b/packages/react-output-target/package.json
@@ -33,7 +33,7 @@
     "url": "https://github.com/ionic-team/stencil-ds-output-targets/issues"
   },
   "peerDependencies": {
-    "@stencil/core": "^2.9.0"
+    "@stencil/core": "^2.17.2"
   },
   "devDependencies": {
     "@types/react": "^16.7.0",
diff --git a/packages/react-output-target/src/output-react.ts b/packages/react-output-target/src/output-react.ts
index 55ef67c5..64a1c77e 100644
--- a/packages/react-output-target/src/output-react.ts
+++ b/packages/react-output-target/src/output-react.ts
@@ -133,7 +133,9 @@ import { createReactComponent } from './react-component-lib';\n`;
  */
 export function createComponentDefinition(cmpMeta: ComponentCompilerMeta, includeCustomElement: boolean = false): ReadonlyArray<string> {
   const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
-  let template = `export const ${tagNameAsPascal} = /*@__PURE__*/createReactComponent<${IMPORT_TYPES}.${tagNameAsPascal}, HTML${tagNameAsPascal}Element>('${cmpMeta.tagName}'`;
+  const classTypeParams =
+  cmpMeta.componentClassTypeParameters.length > 0 ? `<${cmpMeta.componentClassTypeParameters.join(',')}>` : '';
+  let template = `export const ${tagNameAsPascal}${classTypeParams} = /*@__PURE__*/createReactComponent<${IMPORT_TYPES}.${tagNameAsPascal}${classTypeParams}, HTML${tagNameAsPascal}Element>('${cmpMeta.tagName}'`;
 
   if (includeCustomElement) {
     template += `, undefined, undefined, define${tagNameAsPascal}`;

From 04a2fcb2dd92463307e7f87fd634e0cb84c188eb Mon Sep 17 00:00:00 2001
From: Martin Oppitz <github@martinoppitz.com>
Date: Wed, 27 Jul 2022 01:11:49 +0200
Subject: [PATCH 2/2] feat: add type parameter handling to react output plugin

---
 packages/react-output-target/src/output-react.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-output-target/src/output-react.ts b/packages/react-output-target/src/output-react.ts
index 64a1c77e..567dcb46 100644
--- a/packages/react-output-target/src/output-react.ts
+++ b/packages/react-output-target/src/output-react.ts
@@ -135,7 +135,7 @@ export function createComponentDefinition(cmpMeta: ComponentCompilerMeta, includ
   const tagNameAsPascal = dashToPascalCase(cmpMeta.tagName);
   const classTypeParams =
   cmpMeta.componentClassTypeParameters.length > 0 ? `<${cmpMeta.componentClassTypeParameters.join(',')}>` : '';
-  let template = `export const ${tagNameAsPascal}${classTypeParams} = /*@__PURE__*/createReactComponent<${IMPORT_TYPES}.${tagNameAsPascal}${classTypeParams}, HTML${tagNameAsPascal}Element>('${cmpMeta.tagName}'`;
+  let template = `export const ${tagNameAsPascal}${classTypeParams} = /*@__PURE__*/createReactComponent<${IMPORT_TYPES}.${tagNameAsPascal}${classTypeParams}, HTML${tagNameAsPascal}Element${classTypeParams}>('${cmpMeta.tagName}'`;
 
   if (includeCustomElement) {
     template += `, undefined, undefined, define${tagNameAsPascal}`;