Merge pull request #2257 from plotly/ts-tuple

Fix typescript tuple type.

Author: T4rk1n

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

@@ -9,7 +9,7 @@ function getMetadata() {
             [
                 path.resolve(__dirname, '..', '..', 'dash', 'extract-meta.js'),
                 '""', // ignore pattern
-                '""', // reserved keywords
+                '^_.*$', // reserved keywords
                 path.join(__dirname, 'src', 'components')
             ],
             {
@@ -103,6 +103,10 @@ describe('Test Typescript component metadata generation', () => {
             `${componentName} setProps func`,
             testTypeFactory('setProps', 'func')
         );
+        test(
+            `${componentName} tuple tuple`,
+            testTypeFactory('a_tuple', 'tuple')
+        )
     });
 
     describe('Test prop attributes', () => {
@@ -230,6 +234,24 @@ describe('Test Typescript component metadata generation', () => {
                         'name'
                     ], metadata)).toBe('any')
             }
+        );
+
+        test(
+            'Tuple elements', () => {
+                const tuplePath: (string|number)[] = [
+                    'TypeScriptComponent',
+                    'props',
+                    'a_tuple',
+                    'type',
+                    'elements'
+                ]
+                expect(
+                    R.path(tuplePath.concat(0, 'name'), metadata)
+                ).toBe('number');
+                expect(
+                    R.path(tuplePath.concat(1, 'name'), metadata)
+                ).toBe('string');
+            }
         )
     });
 

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

@@ -40,8 +40,9 @@ export type TypescriptComponentProps = {
     setProps?: (props: Record<string, any>) => void;
     className?: string;
     style?: any;
-
     nested?: Nested;
+
+    a_tuple?: [number, string];
 };
 
 export type WrappedHTMLProps = {

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
+
+- [#2257](https://github.com/plotly/dash/pull/2257) Fix tuple types in the TypeScript component generator.
+
 ## [2.6.2] - 2022-09-23
 
 ### Fixed

dash/development/_py_components_generation.py

@@ -570,6 +570,10 @@ def array_of():
             )
         return "list"
 
+    def tuple_of():
+        elements = [js_to_py_type(element) for element in type_object["elements"]]
+        return f"list of {len(elements)} elements: [{', '.join(elements)}]"
+
     return dict(
         array=lambda: "list",
         bool=lambda: "boolean",
@@ -601,6 +605,7 @@ def array_of():
         shape=shape_or_exact,
         # React's PropTypes.exact
         exact=shape_or_exact,
+        tuple=tuple_of,
     )
 
 

dash/extract-meta.js

@@ -293,7 +293,7 @@ function gatherComponents(sources, components = {}) {
     const getPropType = (propType, propObj, parentType = null) => {
         // Types can get namespace prefixes or not.
         let name = checker.typeToString(propType).replace(/^React\./, '');
-        let value;
+        let value, elements;
         const raw = name;
 
         const newParentType = (parentType || []).concat(raw)
@@ -311,13 +311,13 @@ function gatherComponents(sources, components = {}) {
         // Shapes & array support.
         if (!PRIMITIVES.concat('enum', 'func', 'union').includes(name)) {
             if (
-                name.includes('[]') ||
-                name.includes('Array') ||
-                name === 'tuple'
+                // Excluding object with arrays in the raw.
+                (name.includes('[]') && name.endsWith("]")) ||
+                name.includes('Array')
             ) {
                 name = 'arrayOf';
                 const replaced = raw.replace('[]', '');
-                if (unionSupport.includes('replaced')) {
+                if (unionSupport.includes(replaced)) {
                     // Simple types are easier.
                     value = {
                         name: getPropTypeName(replaced),
@@ -336,6 +336,14 @@ function gatherComponents(sources, components = {}) {
                         name = 'array';
                     }
                 }
+            } else if (
+                name === 'tuple' ||
+                (name.startsWith('[') && name.endsWith(']'))
+            ) {
+                name = 'tuple';
+                elements = propType.resolvedTypeArguments.map(
+                    t => getPropType(t, propObj, newParentType)
+                );
             } else if (
                 BANNED_TYPES.includes(name) ||
                 (parentType && parentType.includes(name))
@@ -369,6 +377,7 @@ function gatherComponents(sources, components = {}) {
         return {
             name,
             value,
+            elements,
             raw
         };
     };