Merge pull request #2053 from plotly/fix-ts-namespaces

Fix namespace props not resolving in ts components.

Author: T4rk1n

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

@@ -12,11 +12,8 @@ function getMetadata() {
                 '""', // reserved keywords
                 path.join(__dirname, 'src', 'components')
             ],
-            // To debug `meta-ts.js` using pycharm debugger:
-            //  comment `env` and add `MODULES_PATH=./node_modules`
-            //  in the run config environment variables.
             {
-                env: {MODULES_PATH: path.resolve(__dirname, './node_modules')},
+                env: {MODULES_PATH: path.resolve(__dirname, './node_modules'), ...process.env},
                 cwd: __dirname
             }
         );
@@ -245,4 +242,9 @@ describe('Test Typescript component metadata generation', () => {
             expect(R.path(['StandardComponent'], metadata)).toBeDefined();
         });
     });
+    describe('Test namespace props', () => {
+        test('Component with picked boolean prop', () => {
+            expect(R.path(['WrappedHTML', "props", "autoFocus", "type", "name"], metadata)).toBe("bool");
+        })
+    })
 });

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import {WrappedHTMLProps} from '../props';
+
+/**
+ * Component docstring
+ */
+const WrappedHTML = (props: WrappedHTMLProps) => {
+    return null;
+};
+
+export default WrappedHTML;

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

@@ -2,10 +2,12 @@ import TypeScriptComponent from './components/TypeScriptComponent';
 import TypeScriptClassComponent from './components/TypeScriptClassComponent';
 import MemoTypeScriptComponent from './components/MemoTypeScriptComponent';
 import StandardComponent from './components/StandardComponent.react';
+import WrappedHTML from './components/WrappedHTML';
 
 export {
     TypeScriptComponent,
     TypeScriptClassComponent,
     MemoTypeScriptComponent,
-    StandardComponent
+    StandardComponent,
+    WrappedHTML,
 };

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

@@ -36,3 +36,8 @@ export type TypescriptComponentProps = {
     className?: string;
     style?: any;
 };
+
+export type WrappedHTMLProps = {
+    children?: React.ReactNode;
+    id?: string;
+} & Pick<React.ButtonHTMLAttributes<any>, 'autoFocus'>

dash/extract-meta.js

@@ -37,7 +37,7 @@ if (!src.length) {
 }
 
 if (fs.existsSync('tsconfig.json')) {
-    tsconfig = JSON.parse(fs.readFileSync('tsconfig.json'));
+    tsconfig = JSON.parse(fs.readFileSync('tsconfig.json')).compilerOptions;
 }
 
 let failedBuild = false;
@@ -180,7 +180,7 @@ function gatherComponents(sources, components = {}) {
         return components;
     }
 
-    const program = ts.createProgram(filepaths, tsconfig);
+    const program = ts.createProgram(filepaths, {...tsconfig, esModuleInterop: true});
     const checker = program.getTypeChecker();
 
     const coerceValue = t => {