Merge pull request #2097 from plotly/fix-ts-fc

Fix typescript compiler React.FC & empty props components.

@plotly/dash-generator-test-component-typescript/generator.test.ts

@@ -61,7 +61,8 @@ describe('Test Typescript component metadata generation', () => {
     describe.each([
         'TypeScriptComponent',
         'TypeScriptClassComponent',
-        'MemoTypeScriptComponent'
+        'MemoTypeScriptComponent',
+        'FCComponent',
     ])('Test prop type names', componentName => {
         const getPropTypeName = (name, data) =>
             R.path(propPath(componentName, name).concat('type', 'name'), data);
@@ -256,10 +257,16 @@ describe('Test Typescript component metadata generation', () => {
         test('Standard js component is parsed', () => {
             expect(R.path(['StandardComponent'], metadata)).toBeDefined();
         });
+        test('Mixed component prop-type & typescript', () => {
+            expect(R.path(['MixedComponent', 'props', 'prop', 'type', 'name'], metadata)).toBe('arrayOf')
+        })
     });
-    describe('Test namespace props', () => {
+    describe('Test special cases', () => {
         test('Component with picked boolean prop', () => {
             expect(R.path(['WrappedHTML', "props", "autoFocus", "type", "name"], metadata)).toBe("bool");
-        })
-    })
+        });
+        test('Empty Component', () => {
+            expect(R.path(['EmptyComponent', 'props'], metadata)).toBeDefined();
+        });
+    });
 });

@plotly/dash-generator-test-component-typescript/src/components/EmptyComponent.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const EmptyComponent = () => <div>Empty</div>;
+
+export default EmptyComponent;

@plotly/dash-generator-test-component-typescript/src/components/FCComponent.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TypescriptComponentProps } from '../props';
+
+const FCComponent: React.FC<TypescriptComponentProps> = (props) => (
+    <div>{props.children}</div>
+);
+
+export default FCComponent;

@plotly/dash-generator-test-component-typescript/src/components/MixedComponent.tsx

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+type Props = {
+    id?: string;
+    prop: string[];
+}
+
+const MixedComponent: React.FC<Props> = (props) => {
+    return (
+        <div id={props.id}>{props.children}</div>
+    )
+}
+
+MixedComponent.propTypes = {
+    prop: PropTypes.arrayOf(PropTypes.string).isRequired
+}
+
+export default MixedComponent;

@plotly/dash-generator-test-component-typescript/src/index.ts

@@ -3,11 +3,17 @@ import TypeScriptClassComponent from './components/TypeScriptClassComponent';
 import MemoTypeScriptComponent from './components/MemoTypeScriptComponent';
 import StandardComponent from './components/StandardComponent.react';
 import WrappedHTML from './components/WrappedHTML';
+import FCComponent from './components/FCComponent';
+import EmptyComponent from './components/EmptyComponent';
+import MixedComponent from './components/MixedComponent';
 
 export {
-    TypeScriptComponent,
-    TypeScriptClassComponent,
-    MemoTypeScriptComponent,
-    StandardComponent,
-    WrappedHTML,
+  TypeScriptComponent,
+  TypeScriptClassComponent,
+  MemoTypeScriptComponent,
+  StandardComponent,
+  WrappedHTML,
+  FCComponent,
+  EmptyComponent,
+  MixedComponent,
 };

CHANGELOG.md

@@ -2,6 +2,12 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
+## [UNRELEASED]
+
+### Fixed
+
+- [#2097](https://github.com/plotly/dash/pull/2097) Fix bug [#2095](https://github.com/plotly/dash/issues/2095) with TypeScript compiler and `React.FC` empty valueDeclaration error & support empty props components.
+
 ## [2.5.1] - 2022-06-13
 
 ### Fixed

dash/extract-meta.js

@@ -113,7 +113,7 @@ function checkDocstring(name, value) {
 function docstringWarning(doc) {
     checkDocstring(doc.displayName, doc.description);
 
-    Object.entries(doc.props).forEach(([name, p]) =>
+    Object.entries(doc.props || {}).forEach(([name, p]) =>
         checkDocstring(`${doc.displayName}.${name}`, p.description)
     );
 }
@@ -672,14 +672,14 @@ function gatherComponents(sources, components = {}) {
                 } else {
                     // Function components.
                     rootExp = typeSymbol;
-                    commentSource = rootExp.valueDeclaration;
+                    commentSource = rootExp.valueDeclaration || rootExp.declarations[0];
                     if (
-                        rootExp.valueDeclaration &&
-                        rootExp.valueDeclaration.parent
+                        commentSource &&
+                        commentSource.parent
                     ) {
                         // Function with export later like `const MyComponent = (props) => <></>;`
                         commentSource = getParent(
-                            rootExp.valueDeclaration.parent
+                            commentSource.parent
                         );
                     }
                 }
@@ -719,8 +719,13 @@ function gatherComponents(sources, components = {}) {
                 );
             }
 
+            if (!props) {
+                // Ensure empty components has props.
+                props = {};
+            }
+
             const fullText = source.getFullText();
-            let description;
+            let description = '';
             const commentRanges = ts.getLeadingCommentRanges(
                 fullText,
                 commentSource.getFullStart()