atomicojs / atomico

Atomico a micro-library for creating webcomponents using only functions, hooks and virtual-dom.
https://atomicojs.dev
MIT License
1.15k stars 43 forks source link

Error "The value defined for prop 'value' must be of type 'Date'" #112

Closed efoken closed 3 weeks ago

efoken commented 11 months ago

Describe the bug I'm getting error The value defined for prop 'value' must be of type 'Date' when passing a string to a prop of type Date. Shouldn't it be parsed the Date object when a string is given since 1.73.0?

I tried this within Storybook.

Here's my simplified DatePicker component:

function datePicker() {
  const [value, setValue] = useProp<Date>('value');
  return <host shadowDom />;
}

datePicker.props = {
  value: Date,
};

Browser (please complete the following information):

To Reproduce Steps to reproduce the behavior:

  1. Create a component using a value prop of type Date
  2. Pass a string to value in HTML like <my-date-picker value="2023-09-22">
  3. See error in console

Expected behavior String value should be parsed to a Date.

efoken commented 11 months ago

Just used this as a workaround for now, seems to work:

datePicker.props = {
  value: createType((value) => (value instanceof Date ? value : new Date(value))),
}
UpperCod commented 10 months ago

Hi @efoken , sorry for not responding earlier. Atomico has improved the types by allowing transformations by instance if it is not covered by Atomico, but this only covers inputs as attributes.

To force Atomico to allow input via attributes, you can use the "$" prefix, for example:

<my-component $date="2023-03-11"/>

... Now I think it would be useful in the future to add logic that allows working together with props that have both string and non-string inputs. For example, if the type is declared as Number and it receives "0", the output would be 0. What do you think about what was mentioned?