🔷 [Epic] Hooks support (excludes advanced hooks)

[mpeterdev]

Support Preact hooks e.g. useEffect and useState

Tasks

Beta Give feedback

1. Import preact/hooks package in iframe #64
   +0
   
2. Demo component for hooks #82
   +0

[andy-haynes]

Support for hooks in general should be possible, though I haven't been able to sort out the issues yet. The current implementation relies on a custom Preact bundle into which a function call is injected into the render method. However this raises compatibility issues with the Preact hooks bundle, which is offered as a separate bundle.

The issue seems to revolve around a null reference on vnode._component in the core hooks functionality (TypeError: Cannot read properties of null (reading '__H')). Based on how it's referenced in the Preact code, this seems to be crucial to managing Component lifecycle. My working theory is that the hooks are somehow decoupled from the Preact Component context/scope; by introducing an inlined custom bundle the assumptions around Component lifecycles are now broken.

I did try to rebuild the custom bundle with hooks as a core dependency, but the error was the same so I am not convinced it's an issue with library interop as most reported issues would suggest. Next steps will be to debug using non-minified bundles to trace the issue and understand the larger problem. In theory there's nothing stopping us from attempting our own hooks implementation but I don't think this should be discussed until the underlying issue here is understood. 🙂

It is possible that this is the indication that inlining the Preact bundle in the iframe container is not a viable solution and requires a more sophisticated approach to intercepting (P)React renders.

[JoviDeCroock]

A prerequisite to getting hooks or any other Preact extensions (i.e. signals) to work is to have a stable reference to the options export from Preact... The most likely cause for this to error out would be by having multiple Preact instances in your bundle. Inlining Preact into an iframe can be done but the hooks implementation should use the options export from said inlined variant.

Putting this into practice, you have an inlined Preact however if you now want to add hooks it would need to use the export from that bundle. An alternative would be to use a CDN to supply you with the code or use the var l which in your inlined variant refers to options as you can see by i.e. looking for .vnode which is one of our option hook invocations.

[andy-haynes]

@JoviDeCroock thank you for taking the time to look at the code and weigh in on this! Your comments helped me figure out how to stop abusing the library and better utilize options, which ultimately led to me finding the root issue (invoking the component function directly 😅)

[andy-haynes]

useState and useEffect supported as of #83