Integrate React Component with FormPlayground

Developers
1

We are evaluating BPMN forms. and in that we are using FormPayground. So in the BPMN form we want to add custom components. We found some reference and implemented one custom component i.e., TextField. And add that in additionModules in FormPayground configuration.

Please check this link for sample code: React Component with FormPlayground

But the TextField component is not a react component. The component ‘MTextFieldRendrer’ is just exports function and it returns Preact Virtual DOM using the html function of preact. And it is working as expected.

Now we are removing input and rendering our react TextFieldComp. But it gives error when we drag component to ‘Form Definition’ section


image

Can you please suggest how can I integrate React component with FormPlaygroud?

2

+1, rt, x2, I have the same issue, this topic has been solved?

3

Hey folks, let me try to figure this one out.

The problem

So, firstly preact and react virtual DOMs are not interoperable, every transition from one framework to the other requires wrapping of some sort.

So, speaking to the project structure in this case. We’ve got a modified react starter project, with react bundling configurations, embedding the playground which is a preact component (through helper functions that do the wrapping for you).

TextfieldComp is written in JSX, so whether that gets transformed into react or preact code is entirely based on the bundling configuration (in this case it’ll bundle to React).

So what we end up with, is a react virtual DOM (the full app), embedding a Preact VDOM (the playground), trying to render a React component in the Preact VDOM, which cannot be done.

What could be some solutions

So from your end, without us adding anything, I see a few approaches that could be taken:

  • use htm imported from diagram-js, as it doesn’t require JSX compilation and will just evaluate to preact virtual dom. This is if you don’t care about react and just want something that works right away, no configuration needed.
  • bundle the JSX within your custom component to preact, and write preact code. You can still use react in the rest of the application, but for that you need to selectively compile your JSX (react everywhere, except in the custom components). I can expand on how this can be achieved, but it boils down to specifying the JSX bindings by folder/file. You still won’t be able to embed any React dependencies in the custom components themselves that way. To get around this you can alias those react dependencies to preact, and at this point I’d just create a separate repository for the extension so that you can configure this all in one place, and never have to worry about it again once it’s set up.
  • embed a react tree, using the render functions, but then you need to handle bridging the data between the two render trees, which might not be the best

On our end, there are a few things we could do to improve the experience:

  • provide a simple bridge as part of our API to abstract away the binding between react and preact
  • provide a react version of the form libraries, ending up with a full react environment, hence not having to think about bindings, though I am not sure how feasible that is and how much work it would be to maintain

Would like to hear your thoughts, experience, if any of these are acceptable solutions or if we should think more :smiley:. Hopefully something in there can be helpful.

1 Like