Fix typing generation bugs #3017 #3266

Author: KoolADE85

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

@@ -289,6 +289,40 @@ describe('Test Typescript component metadata generation', () => {
                 expect(propType.value[1].value).toBe('small');
             }
         )
+
+        test(
+            'union of boolean and literal values', () => {
+                const propType = R.path(
+                    propPath('TypeScriptComponent', 'boolean_enum').concat(
+                        'type'
+                    ),
+                    metadata
+                );
+                expect(propType.name).toBe('union');
+                expect(propType.value.length).toBe(3);
+                expect(propType.value[0].name).toBe('bool');
+                expect(propType.value[1].name).toBe('literal');
+                expect(propType.value[2].name).toBe('literal');
+                expect(propType.value[0].value).toBe(undefined);
+                expect(propType.value[1].value).toBe('small');
+                expect(propType.value[2].value).toBe('large');
+            }
+        )
+
+        test(
+            'union of duplicated types', () => {
+                const propType = R.path(
+                    propPath('TypeScriptComponent', 'duplicated_enum').concat(
+                        'type'
+                    ),
+                    metadata
+                );
+                expect(propType.name).toBe('union');
+                expect(propType.value.length).toBe(2);
+                expect(propType.value[0].name).toBe('number');
+                expect(propType.value[1].name).toBe('bool');
+            }
+        )
     });
 
     describe('Test component comments', () => {

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

@@ -48,7 +48,9 @@ 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'
+    union_enum?: number | 'small' | 'large';
+    boolean_enum?: boolean | 'small' | 'large';
+    duplicated_enum?: boolean | number | number;
 };
 
 export type WrappedHTMLProps = {

components/dash-core-components/dash_core_components_base/__init__.py

@@ -122,6 +122,11 @@
             "namespace": "dash",
             "dynamic": True,
         },
+        {
+            "dev_package_path": "dcc/proptypes.js",
+            "dev_only": True,
+            "namespace": "dash",
+        }
     ]
 )
 

components/dash-core-components/src/components/Input.tsx

@@ -18,6 +18,29 @@ const convert = (val: unknown) => (isNumeric(val) ? +val : NaN);
 const isEquivalent = (v1: number, v2: number) =>
     v1 === v2 || (isNaN(v1) && isNaN(v2));
 
+enum PersistenceTypes {
+    'local' = 'local',
+    'session' = 'session',
+    'memory' = 'memory',
+}
+
+enum PersistedProps {
+    'value' = 'value',
+}
+
+enum HTMLInputTypes {
+    // Only allowing the input types with wide browser compatibility
+    'text' = 'text',
+    'number' = 'number',
+    'password' = 'password',
+    'email' = 'email',
+    'range' = 'range',
+    'search' = 'search',
+    'tel' = 'tel',
+    'url' = 'url',
+    'hidden' = 'hidden',
+}
+
 type InputProps = {
     /**
      * The value of the input
@@ -222,28 +245,19 @@ type InputProps = {
      * component or the page. Since only `value` is allowed this prop can
      * normally be ignored.
      */
-    persisted_props?: ['value'];
+    persisted_props?: PersistedProps[];
     /**
      * Where persisted user changes will be stored:
      * memory: only kept in memory, reset on page refresh.
      * local: window.localStorage, data is kept after the browser quit.
      * session: window.sessionStorage, data is cleared once the browser quit.
      */
-    persistence_type?: 'local' | 'session' | 'memory';
+    persistence_type?: PersistenceTypes;
 
     /**
      * The type of control to render.
      */
-    type?: // Only allowing the input types with wide browser compatibility
-    | 'text'
-        | 'number'
-        | 'password'
-        | 'email'
-        | 'range'
-        | 'search'
-        | 'tel'
-        | 'url'
-        | 'hidden';
+    type?: HTMLInputTypes;
 };
 
 const inputProps: (keyof InputProps)[] = [
@@ -268,15 +282,16 @@ const inputProps: (keyof InputProps)[] = [
 ];
 
 const defaultProps: Partial<InputProps> = {
-    type: 'text',
+    type: HTMLInputTypes.text,
+    inputMode: 'verbatim',
     n_blur: 0,
     n_blur_timestamp: -1,
     n_submit: 0,
     n_submit_timestamp: -1,
     debounce: false,
     step: 'any',
-    persisted_props: ['value'],
-    persistence_type: 'local',
+    persisted_props: [PersistedProps.value],
+    persistence_type: PersistenceTypes.local,
 };
 
 /**
@@ -286,14 +301,39 @@ const defaultProps: Partial<InputProps> = {
  * the Checklist and RadioItems component. Dates, times, and file uploads
  * are also supported through separate components.
  */
-function Input(props: InputProps) {
-    props = {...defaultProps, ...props};
+function Input({
+    type = defaultProps.type,
+    inputMode = defaultProps.inputMode,
+    n_blur = defaultProps.n_blur,
+    n_blur_timestamp = defaultProps.n_blur_timestamp,
+    n_submit = defaultProps.n_submit,
+    n_submit_timestamp = defaultProps.n_submit_timestamp,
+    debounce = defaultProps.debounce,
+    step = defaultProps.step,
+    persisted_props = defaultProps.persisted_props,
+    persistence_type = defaultProps.persistence_type,
+    ...rest
+}: InputProps) {
+    const props = {
+        type,
+        inputMode,
+        n_blur,
+        n_blur_timestamp,
+        n_submit,
+        n_submit_timestamp,
+        debounce,
+        step,
+        persisted_props,
+        persistence_type,
+        ...rest,
+    };
     const input = useRef(document.createElement('input'));
     const [value, setValue] = useState<InputProps['value']>(props.value);
     const [pendingEvent, setPendingEvent] = useState<number>();
     const inputId = useId();
 
-    const valprops = props.type === 'number' ? {} : {value: value ?? ''};
+    const valprops =
+        props.type === HTMLInputTypes.number ? {} : {value: value ?? ''};
     let {className} = props;
     className = 'dash-input' + (className ? ` ${className}` : '');
 
@@ -314,7 +354,7 @@ function Input(props: InputProps) {
         const {value: inputValue} = input.current;
         const {setProps} = props;
         const valueAsNumber = convert(inputValue);
-        if (props.type === 'number') {
+        if (props.type === HTMLInputTypes.number) {
             setPropValue(props.value, valueAsNumber ?? value);
         } else {
             const propValue =
@@ -420,7 +460,7 @@ function Input(props: InputProps) {
         }
         const valueAsNumber = convert(value);
         setInputValue(valueAsNumber ?? value, props.value);
-        if (props.type !== 'number') {
+        if (props.type !== HTMLInputTypes.number) {
             setValue(props.value);
         }
     }, [props.value, props.type, pendingEvent]);
@@ -437,7 +477,7 @@ function Input(props: InputProps) {
             if (typeof debounce === 'number' && Number.isFinite(debounce)) {
                 debounceEvent(debounce);
             }
-            if (type !== 'number') {
+            if (type !== HTMLInputTypes.number) {
                 setTimeout(() => {
                     input.current.setSelectionRange(
                         cursorPosition,
@@ -452,7 +492,7 @@ function Input(props: InputProps) {
 
     const pickedInputs = pick(inputProps, props);
 
-    const isNumberInput = props.type === 'number';
+    const isNumberInput = props.type === HTMLInputTypes.number;
     const currentNumericValue = convert(input.current.value || '0');
     const minValue = convert(props.min);
     const maxValue = convert(props.max);
@@ -467,7 +507,9 @@ function Input(props: InputProps) {
             {loadingProps => (
                 <div
                     className={`dash-input-container ${className}${
-                        props.type === 'hidden' ? ' dash-input-hidden' : ''
+                        props.type === HTMLInputTypes.hidden
+                            ? ' dash-input-hidden'
+                            : ''
                     }`.trim()}
                     style={props.style}
                 >

components/dash-core-components/src/index.ts

@@ -40,8 +40,8 @@ export {
     Dropdown,
     Geolocation,
     Graph,
-    Input,
     Interval,
+    Input,
     Link,
     Loading,
     Location,

dash/development/_generate_prop_types.py

@@ -68,8 +68,9 @@ def generate_any(*_):
 
 
 def generate_enum(prop_info):
-    values = str([v.get("value") for v in prop_info["value"]])
-    return f"pt.oneOf({values})"
+    values = [v["value"] for v in prop_info["value"] if v.get("value") is not None]
+    csv = ",".join(str(v) for v in values)
+    return f"pt.oneOf([{csv}])"
 
 
 def generate_object_of(prop_info):

dash/extract-meta.js

@@ -67,7 +67,7 @@ const BANNED_TYPES = [
     'ChildNode',
     'ParentNode',
 ];
-const unionSupport = PRIMITIVES.concat('boolean', 'Element', 'enum');
+const unionSupport = PRIMITIVES.concat('true', 'false', 'Element', 'enum');
 
 const reArray = new RegExp(`(${unionSupport.join('|')})\\[\\]`);
 
@@ -269,8 +269,18 @@ function gatherComponents(sources, components = {}) {
                     unionSupport.includes(typeName) ||
                     isArray(checker.typeToString(t))
                 );
-            })
-            .map(t => t.value ? {name: 'literal', value: t.value} : getPropType(t, propObj, parentType));
+            });
+        value = value.map(t => t.value ? {name: 'literal', value: t.value} : getPropType(t, propObj, parentType));
+
+        // de-dupe any types in this union
+        value = value.reduce((acc, t) => {
+            const key = `${t.name}:${t.value}`;
+            if (!acc.seen.has(key)) {
+                acc.seen.add(key);
+                acc.result.push(t);
+            }
+            return acc;
+        }, { seen: new Set(), result: [] }).result;
 
         if (!value.length) {
             name = 'any';
@@ -285,7 +295,7 @@ function gatherComponents(sources, components = {}) {
     const getPropTypeName = propName => {
         if (propName.includes('=>') || propName === 'Function') {
             return 'func';
-        } else if (propName === 'boolean') {
+        } else if (['boolean', 'false', 'true'].includes(propName)) {
             return 'bool';
         } else if (propName === '[]') {
             return 'array';

tests/integration/callbacks/test_basic_callback.py

@@ -99,6 +99,7 @@ def update_input(value):
     pad_input, pad_div = dash_duo.dash_innerhtml_dom.select_one(
         "#output > div"
     ).contents
+    pad_input = pad_input.next  # get the input element, not the wrapper
 
     assert (
         pad_input.attrs["value"] == "sub input initial value"