Share JSX code with a React codebase?
I'm trying to port my React form library to Solid. When I started the process, I realized the JSX for each component was identical to its React counterpart.
For most of my components, the only React-specific code in the entire file is the
import * as React from 'react' and a React.memo wrapper. The logic for each component is encapsulated in its own bespoke hook, which I can refactor as a Solid hook fairly easily. The code in the component function itself is no different.
To avoid copy/pasting the code, is there a way to share JSX between a React codebase and a Solid codebase? Seems like if the actual text of the source file can be the same, there should be some way to do it.4 Replies
Unless the JSX is completely static (no state or framework specific stuff), there are some differences that would get in the way of sharing the JSX
Also, given you're following React patterns like destructuring props, this would cause an issue in Solid so you'd have to refactor your component anyway.
I can refactor the destructured stuff, so that's not an issue. I don't have anything in the JSX itself that is specific to React or any other framework, so the actual file content would be identical. I realize Solid will treat it differently, and of course TypeScript will probably have a fit. I just don't want to maintain a bunch of identical files.
thanks, btw
The more I think about it, I do realize smoothing over some of the differences would be awkward at best. The component files don't change much, anyway. The custom hooks are really the meat of the library. Oh well. Thanks again!
mb mitosis can help here? (never used it myself)
My first thought was even just
class vs className would make it difficult to share 😅