Introduce UX React component #329
Conversation
src/React/README.md
Outdated
| // By putting only controller components in `react/controllers`, you ensure that | ||
| // internal components won't be automatically included in your JS built file if | ||
| // they are not necessary. | ||
| registerReactControllerComponents(require.context('./react/controllers', true, /\.(j|t)sx?$/)); |
There was a problem hiding this comment.
We MAY soon get the ability to do simple "patches" in Flex. If so, this could be added to a recipe.
tgalopin
force-pushed
the
ux-react
branch
3 times, most recently
from
023437f to
c52e713
Compare
|
Updated after reviews. I dropped support for React 17 and less (not worth it indeed). The PR is ready I think! |
|
Thank you Titouan! |
| 'use strict'; | ||
|
|
||
| import React, { ReactElement } from 'react'; | ||
| import { createRoot } from 'react-dom/client'; |
There was a problem hiding this comment.
Hmm, actually this is proving problematic. I merged, thinking the yarn build failure was something unrelated, but it's not. yarn build fails here with:
Error: 'createRoot' is not exported by node_modules/react-dom/client.js, imported by src/React/Resources/assets/src/render_controller.ts
That is not correct... as createRoot IS an export of that file. I'm not sure if we may need commonjs for rollup (https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module... also ref similar issue: JedWatson/react-select#3956 (comment)
There was a problem hiding this comment.
Looks like I fixed it over here: #330
There was a problem hiding this comment.
Great! I was going to have a look :)
This PR was squashed before being merged into the 2.x branch. Discussion ---------- [Vue] Introduce Vue UX component | Q | A | ------------- | --- | Bug fix? | no | New feature? | yes <!-- please update src/**/CHANGELOG.md files --> | Tickets | N/A <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead --> | License | MIT <!-- Replace this notice by a short README for your feature/bugfix. This will help people understand your PR and can be used as a start for the documentation. Additionally (see https://symfony.com/releases): - Always add tests and ensure they pass. - Never break backward compatibility (see https://symfony.com/bc). - Features and deprecations must be submitted against branch main. --> This PR introduces a UX Vue component which allows to render Vue.js components inside Twig templates, with the ability to pass down props to Vue components from Twig. It is implemented in the same way as the UX React component for coherence. 1. Call `registerVueControllerComponents` in `app.js` to register Vue components ```js import { registerVueControllerComponents } from "`@symfony`/ux-vue"; registerVueControllerComponents(require.context('./vue/controllers', true, /\.vue$/)); ``` 2. Create Vue "controller components" (eg. `Hello.vue`) inside the folder specified above (here `assets/vue/controllers`) ```vue // assets/vue/controllers/Hello.vue <template> <h1>Hello {{ name }}</h1> </template> ``` 3. All those components can now be used inside Twig using the helper function provided by the bundle, the second parameter are props that will be provided to the component ```twig <div {{ vue_component('Hello', { name: 'Thibault' }) }}></div> ``` The implementation was **heavily** inspired by the work from `@tgalopin` in #329 (that's why I left him as author everywhere). I'll gladly write docs and ux.symfony.com samples if accepted and once we agree on the API. NB: Only Vue.js v3 is supported Commits ------- ff95c1a [Vue] Introduce Vue UX component
|
is there a way to pass children to a react component? for example like this: // assets/react/controllers/MyComponent.jsx
import React from 'react';
export default function (props) {
return (
<div>
<h1>heading</h1>
{props.children}
</div>
);
}{# templates/home.html.twig #}
<div {{ react_component('MyComponent', { 'fullName': app.user.fullName }) }}>
<p>content to be displayed inside the react component}</p>
</div>or, if not, is there a workaround to achieve this functionality? |
|
Could you open a separate issue? We COULD do this - in the Stimulus controller, we could read the |
|
How can Symfony forms be used with this component? |
|
What exactly would you want to accomplish? |
|
The idea is to click on a button, it opens a modal with the form in react. |
This PR introduces a new component called UX React. This UX component creates a bridge between Symfony and React by allowing Twig developers to render React components, passing data smoothly between the two.
After installing this component, it is possible to use the
react_componentTwig function to render a React component in a specific HTML container:This behavior works by allowing UX React users to register React components in a global key-value store that is then used by a generic Stimulus controller (
Resources/assets/src/render_controller.tsx) to do that the actual rendering. I propose to introduce aassets/react/controllersdirectory to automatically register all components inside this directory, to ease usage. You can read the README for more details.This component supports Symfony 4.4+ (super simple bundle, no reason not to be IMO) and React 16+ (released in 2017).