Add literal prop typing support

Author: T4rk1n

@plotly/dash-generator-test-component-typescript/dash_prop_typing.py

@@ -0,0 +1,14 @@
+ignore_props = ['ignored_prop']
+
+custom_imports = {
+    "*": ["import json"]
+}
+
+def generate_style(*_):
+    return "dict"
+
+custom_props = {
+    "*": {
+        "obj": generate_style
+    }
+}

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

@@ -271,6 +271,23 @@ describe('Test Typescript component metadata generation', () => {
                 );
                 expect(objectOfComponents).toBe("node");
             }
+        );
+
+        test(
+            'union and literal values', () => {
+                const propType = R.path(
+                    propPath('TypeScriptComponent', 'union_enum').concat(
+                        'type'
+                    ),
+                    metadata
+                );
+                expect(propType.name).toBe('union');
+                expect(propType.value.length).toBe(3);
+                expect(propType.value[0].name).toBe('number');
+                expect(propType.value[1].name).toBe('literal');
+                expect(propType.value[2].name).toBe('literal');
+                expect(propType.value[1].value).toBe('small');
+            }
         )
     });
 

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

@@ -47,6 +47,8 @@ export type TypescriptComponentProps = {
 
     object_of_string?: {[k: string]: string};
     object_of_components?: {[k: string]: JSX.Element};
+    ignored_prop?: {ignore: {me: string}};
+    union_enum?: number | 'small' | 'large'
 };
 
 export type WrappedHTMLProps = {

dash/development/_generate_prop_types.py

@@ -2,6 +2,7 @@
 # Generate it instead with the provided metadata.json
 # for them to be able to report invalid prop
 
+import json
 import os
 import re
 
@@ -79,6 +80,10 @@ def generate_tuple(*_):
     return "pt.array"
 
 
+def generate_literal(prop_info):
+    return f"pt.oneOf([{json.dumps(prop_info['value'])}])"
+
+
 prop_types = {
     "array": generate_type("array"),
     "arrayOf": generate_array_of,
@@ -97,6 +102,7 @@ def generate_tuple(*_):
     "enum": generate_enum,
     "objectOf": generate_object_of,
     "tuple": generate_tuple,
+    "literal": generate_literal,
 }
 
 

dash/development/_py_prop_typing.py

@@ -140,6 +140,10 @@ def generate_enum(type_info, *_):
     return f"Literal[{', '.join(values)}]"
 
 
+def generate_literal(type_info, *_):
+    return f"Literal[{json.dumps(type_info['value'])}]"
+
+
 def _get_custom_prop(custom_props, component_name, prop_name):
     customs = custom_props.get(component_name) or custom_props.get("*", {})
     return customs.get(prop_name)
@@ -193,4 +197,5 @@ def get_prop_typing(
     "enum": generate_enum,
     "objectOf": generate_object_of,
     "tuple": generate_tuple,
+    "literal": generate_literal,
 }

dash/extract-meta.js

@@ -67,7 +67,7 @@ const BANNED_TYPES = [
     'ChildNode',
     'ParentNode',
 ];
-const unionSupport = PRIMITIVES.concat('boolean', 'Element');
+const unionSupport = PRIMITIVES.concat('boolean', 'Element', 'enum');
 
 const reArray = new RegExp(`(${unionSupport.join('|')})\\[\\]`);
 
@@ -261,12 +261,16 @@ function gatherComponents(sources, components = {}) {
                         typeName = 'object';
                     }
                 }
+                if (t.value) {
+                    // A literal value
+                    return true;
+                }
                 return (
                     unionSupport.includes(typeName) ||
                     isArray(checker.typeToString(t))
                 );
             })
-            .map(t => getPropType(t, propObj, parentType));
+            .map(t => t.value ? {name: 'literal', value: t.value} : getPropType(t, propObj, parentType));
 
         if (!value.length) {
             name = 'any';