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"