useProp\useEvent can't be used in nested components

[regulyarniy]

Hi there! Thanks for developing atomico!

useProp\useEvent throws TypeError: Cannot read property 'current' of undefined in nested components because it is reffering to host. some example: https://webcomponents.dev/edit/GqXXcq0uV0NqQOLUoFCE

I passed host ref to child and made custom useEvent with ref passed to workaround this issue. But im curious how components composition could be made with original hooks usage?

[UpperCod]

Hi @regulyarniy , Atomico does not support HoCk as React since version 0.10, aiming to simplify the core for better maintenance and 700b less

React HoCs

<MyCounter>     // <div>
    <Button/>   //    <button></button>
</MyCounter>    // </div>

Atomico HoCs

<host>          // <my-counter>
    <my-button/>//    <my-button></my-button>
</host>         // </my-counter>

If you want to use hooks, you must declare the component as a customElement and with this you can use hooks and maintain a life cycle independent of the parent, eg: https://webcomponents.dev/edit/zaXQCViR8OuiPMeHLK1R

Tips

The Atomico prop system allows to declare events that are emitted before the prop change

MyCounter.props = {
  count: {
    type: Number,
    reflect: true,
    value: 0,
    event: {
      type: "changeCount",
      bubbles: true
    }
  }
};

changeCount event will be emitted at each change of count, eg https://webcomponents.dev/edit/M6FXLOz5dw7j0ETNEafL

I hope that the comments are helpful and thanks for using Atomico!

[regulyarniy]

@UpperCod thanks for explanation! I think some kind of "props drilling" composition could be used without "host" definition: https://webcomponents.dev/edit/G6oYtsPQmsDFSCHizYxd I got it, simple rule - hooks can be used only inside of host-level components. It would be great if docs would explain this behaviour.

[UpperCod]

Good idea @regulyarniy, I have added to the documentation what was discussed in this issue https://atomico.gitbook.io/doc/get-started/differences-with-react