Replies: 2 comments
-
Specifically for react components, there is no work under way, but if you export your react component as a web component, you can use it in Dioxus. See this example. We could use web components to easily create a UI library for Dioxus. For example we could use materail-ui web components as long as the web components have no listeners (for example this could be used for icons, and images).
I think this is partially true. A library to support using React components in Dioxus would be amazing, but I don't see using React components as a solution to building an ecosystem around Dioxus. There are three main reasons for this:
Performance is one of the areas Dioxus currently shines. If we adopted React libraries as the official solution for many of the libraries Dioxus needs, the performance advantage of Dioxus would go away.
Another focus of Dioxus is ergonomics. To make Dioxus easier to work with, we break from the react model in several places. because of this the APIs of React and Dioxus are not fully compatible. Dioxus handles suspense, hooks, web events, and diffing completely differently from react. These APIs are not cleanly compatible and we shouldn't sacrifice the native rust experience to make react bindings easier
In addition to components, react and dioxus libraries need to export and pass around hooks and listeners. For the web renderer, we can support some version of this through wasm-bindgen and use JSON for other renderers. Creating APIs for every type in a react library that work with wasm-bindgen is a significant amount of work, making those types nice to work with in rust is even more difficult.
Transpiring from untyped javascript to rust with the extra restrictions lifetimes add seems extremely difficult/impossible. Typescript/assembly script would be somewhat easier, but still a monumental task. Transpiling from jsx to rsx would be somewhat easier, but each component would need some manual work.
I think some version of bindings from react or web-components to Dioxus could be supported. Having a library to make creating bindings would be great! We support the simplest version of foreign components with web components today. We could add support for listeners to web components in Dioxus and add a helper to allow you to use some React components in Dioxus. I don't see this ever fully replacing an ecosystem around Dioxus, but some limited version of bindings could supplement it in some places. |
Beta Was this translation helpful? Give feedback.
-
Thank you for this detailed reply! You've given me much more clarity about these things. I also now understand how impossible it would be to transpile JSX/TSX to Dioxus/Rust, especially since the API's are similar to React, but certainly breaking changes. |
Beta Was this translation helpful? Give feedback.
-
Aside
Hello, I am new to Dioxus, new to Rust, and new to React as well so forgive me if I'm bringing up something that is already answered/in the works, or if this question makes no sense.
Dioxus seems like a great solution to JavaScript's performance, poor performance, and abysmal tooling situation.
TypeScript was supposed to provide static typing, but it's also spawned other problems (such as this massive issue).
Background
Many useful component libraries are written in JavaScript/TypeScript/JSX/TSX and will continue to be for a long time 😢
As far as I can tell, there does not seem to be a documented/formal way to utilize existing React component libraries in Dioxus.
This results in the following types of efforts:
I find these efforts to be redundant and/or painful, but not performing one of these efforts means that Dioxus developers cannot use the wealth of existing component libraries.
The Question(s)
Are there plans to provide ways for developers to utilize existing React component libraries (such as Material UI, Next UI, etc.)?
If plans are in place and/or development is underway, could someone point me in the direction to help contribute to the effort?
Does utilizing existing React component libraries go against the entire philosophy of Dioxus?
I find enabling easy usage of existing React component libraries to be a good idea considering the massive number of component libraries already exist.
Additionally, I am led to believe this is possible because "Dioxus shares React's DNA".
Brainstorming Some Possible Solutions:
Beta Was this translation helpful? Give feedback.
All reactions