Phoenix LiveView & React integration

[zeorin]

Description

This PR adds more idiomatic integration between Phoenix LiveView and React.

Phoenix LiveView and React Components can be interleaved arbitrarily, and they will still participate in their respective lifecycles, however every component that is a child of a React component (even indirectly) will not have diffs sent over the channel on changes. Rendering is still done using patches, but the actual update payload is not diffed. (Note that I think it is possible to solve this but that would be more effort than using targeted portals, as below.)

React components can be mount as a portal in another React component. This way you can have a React Component tree that does not necessarily have to match the DOM tree. This is handy for sharing e.g. context with multiple React components (and also means that you can avoid interleaving Phoenix LiveView and React Components if you are concerned about the over-the-wire perf impact of doing so). Ids are used to associate portals and their targets. These can be nested arbitrarily deeply.

phx-* events Just Work™ because Phoenix LiveView uses event delegation to listen to them.

There's a jsx macro that you can use to create a Phoenix functional component. It will create a functional component with the name of the file, so if you use e.g. jsx("assets/js/react/components/Foo.tsx"), you can then use <.Foo> in an Heex template. You can also annotate the macro call with attr and slot like a regular component. The :inner_block slot is automatically translated to the children prop.

React components included in this way will be included as their own entrypoint by ESBuild, but code that they share dependencies on with the rest of the app will be code-split into separate chunks.

This lays the some of the groundwork for #2850.

Still to be done:

• Set up TanStack Query, specifically in a way that takes advantage of websockets.

Validation steps

Check out the branch, update deps, and start dev server. Navigate to http://localhost:4000/dev/react to see some demo components

Additional notes for the reviewer

There are still a bunch of TODO comments in the code that need review.

This work has taken inspiration from:

• live_react
• Surface UI

AI Usage

Please disclose how you've used AI in this work (it's cool, we just want to know!):

• Code generation (copilot but not intellisense)
• Learning or fact checking
• Strategy / design
• Optimisation / refactoring
• Translation / spellchecking / doc gen
• Other
• I have not used AI

You can read more details in our Responsible AI Policy

Pre-submission checklist

• I have performed a self-review of my code.
• I have implemented and tested all related authorization policies. (e.g., :owner, :admin, :editor, :viewer)
• I have updated the changelog.
• I have ticked a box in "AI usage" in this PR