Updated React Component Type detection

Author: SebastianWendorf

typescript/src/react/post-processors/react-component.post-processor.ts

@@ -16,7 +16,7 @@ export class ReactComponentPostProcessor extends PostProcessor {
             // Function Components (standard functions)
             const allFunctions: LCEFunctionDeclaration[] = (concepts.get(LCEFunctionDeclaration.conceptId) ?? []) as LCEFunctionDeclaration[];
             for (const func of allFunctions) {
-                if (isComponentReturnType(func.returnType)) {
+                if (this.isComponentReturnType(func.returnType)) {
                     const component = new LCEReactComponent(func.fqn, func.functionName, []);
                     if (func.metadata.has(JSXDependencyContextProcessor.JSX_DEPENDENCY_METADATA)) {
                         component.renderedElements.push(...func.metadata.get(JSXDependencyContextProcessor.JSX_DEPENDENCY_METADATA));
@@ -29,9 +29,8 @@ export class ReactComponentPostProcessor extends PostProcessor {
             const allVariables: LCEVariableDeclaration[] = (concepts.get(LCEVariableDeclaration.conceptId) ?? []) as LCEVariableDeclaration[];
             for (const variable of allVariables) {
                 if (
-                    (variable.type instanceof LCETypeFunction &&
-                        isComponentReturnType(variable.type.returnType)) ||
-                    (variable.type instanceof LCETypeDeclared && isReactFunctionComponentType(variable.type.fqn.globalFqn))
+                    (variable.type instanceof LCETypeFunction && this.isComponentReturnType(variable.type.returnType)) ||
+                    (variable.type instanceof LCETypeDeclared && this.isReactFunctionComponentType(variable.type.fqn.globalFqn))
                 ) {
                     const component = new LCEReactComponent(variable.fqn, variable.variableName, []);
                     if (variable.metadata.has(JSXDependencyContextProcessor.JSX_DEPENDENCY_METADATA)) {
@@ -56,32 +55,38 @@ export class ReactComponentPostProcessor extends PostProcessor {
             concepts.set(LCEReactComponent.conceptId, [...reactComponents.values()]);
         }
     }
-}
 
-/**
- * returns whether the provided fqn is a return type that indicates that a function is a React component
- */
-function isComponentReturnType(type: LCEType): boolean {
-    const validTypeFqns = ['"react".React.ReactNode', '"react".React.JSX.Element', '"react".JSX.Element'];
+    /**
+     * returns whether the provided fqn is a return type that indicates that a function is a React component
+     */
+    isComponentReturnType(type: LCEType): boolean {
+        const validTypeFqns = [
+            '"react".React.ReactNode',
+            '"react".React.ReactElement',
+            '"react".React.ReactPortal',
+            '"react".React.JSX.Element',
+            '"react".JSX.Element',
+        ];
 
-    if (type instanceof LCETypeDeclared) {
-        return validTypeFqns.includes(type.fqn.globalFqn);
-    } else if (type instanceof LCETypeUnion) {
-        return !!type.types.find((t) => t instanceof LCETypeDeclared && validTypeFqns.includes(t.fqn.globalFqn));
-    } else {
-        return false;
+        if (type instanceof LCETypeDeclared) {
+            return validTypeFqns.includes(type.fqn.globalFqn);
+        } else if (type instanceof LCETypeUnion) {
+            return !!type.types.find((t) => t instanceof LCETypeDeclared && validTypeFqns.includes(t.fqn.globalFqn));
+        } else {
+            return false;
+        }
     }
-}
 
-/**
- * returns whether the provided fqn belongs to an interface/type describing a React function component
- */
-function isReactFunctionComponentType(globalFqn: string): boolean {
-    return [
-        '"react".React.FC',
-        '"react".React.ExoticComponent',
-        '"react".React.NamedExoticComponent',
-        '"react".React.ForwardRefExoticComponent',
-        '"react".React.MemoExoticComponent',
-    ].includes(globalFqn);
+    /**
+     * returns whether the provided fqn belongs to an interface/type describing a React function component
+     */
+    isReactFunctionComponentType(globalFqn: string): boolean {
+        return [
+            '"react".React.FC',
+            '"react".React.ExoticComponent',
+            '"react".React.NamedExoticComponent',
+            '"react".React.ForwardRefExoticComponent',
+            '"react".React.MemoExoticComponent',
+        ].includes(globalFqn);
+    }
 }