Phoenix LiveView & React integration #2988
Draft
+9,648
−3,396
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Thanks to `@total-typescript/ts-reset`. See https://www.totaltypescript.com/ts-reset for more information.
- `jsonpath` - `dagrejs`
Thanks largely to `@types/phoenix` & `@types/phoenix_live_view`, but also by defining some module augmentations and improving the home-grown `PhoenixHook` type.
Just the low-hanging fruit.
zeorin
changed the title
Associates a JSX file with a component. Such files will become entrypoints for ESBuild, but common code is code-split by ESBuild into separate chunks.
zeorin
force-pushed
the
2850-migrate-workflow-edit-to-react
branch
from
63e4327 to
add6549
Compare
zeorin
force-pushed
the
2850-migrate-workflow-edit-to-react
branch
from
add6549 to
aeab027
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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. React components that are indirect descendants of another React component will be mounted in the DOM according to Phoenix LiveView's hierarchy, but will form part of their closest React ancestor's React component tree, thanks to portals.
phx-*events Just Work™ because Phoenix LiveView uses event delegation to listen to them.There's a
jsxmacro 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("components/Foo.tsx"), you can then use<.Foo>in an Heex template. You can also annotate the macro call withattrandslotlike a regular component. The:inner_blockslot is automatically translated to thechildrenprop.React components included in this way will be transpiled separately by ESBuild, each will be their own entrypoint, but code that they share dependencies on will be code-split into separate chunks.
This lays the some of the groundwork for #2850.
I have also reconfigured up TypeScript to be much stricter, and I added types for Phoenix LiveView's JS. I added an ESLint configuration that will help avoid common issues in React/JS/TS code. This config is also rather strict. The idea is that you can get rid of the rules you don't like.
Still to be done:
Validation steps
Check out the branch, update deps, and start dev server. Navigate to
http://localhost:4000/dev/reactto see some demo componentsAdditional notes for the reviewer
There are still a bunch of
TODOcomments in the code that need review.This work has taken inspiration from:
live_reactAI Usage
Please disclose how you've used AI in this work (it's cool, we just want to know!):
You can read more details in our Responsible AI Policy
Pre-submission checklist
:owner,:admin,:editor,:viewer)