hobofan / reacty_yew

Generate Yew components from React components via Typescript type definitions

reacty_yew - Generate Yew components from React component via Typescript type definitions

This is a proof of concept for automatically generating Yew components from React components that have Typescript type definitions. Many parts are missing and this likely shouldn't be used in production!

Announcement blog post with a bit more information

Showcase

For the full example see ./examples/bad_button.

Given a React component:

import * as React from "react";

interface BadButtonProps {
  color?: string,
  text: string,
}

const BadButton = (props: BadButtonProps): JSX.Element => {
  return (
    <button
      style={{ backgroundColor: props.color }}
      onClick={() => window.alert("Click!")}
    >
      {props.text}
    </button>
  );

};

export { BadButton };

An invocation of the react_component_mod! macro (takes as input the name of the module to generate, path to the type declarations and the JS global (UMD) that holds the React components) generates a module:

react_component_mod!(
    bad_button;
    types = "../js_package/dist/index.d.ts",
    global = "BadButtonLib"
);

You can directly use the generated component BadButton in a Yew component:

use yew::prelude::*;
use crate::bad_button::BadButton;

// ...
fn view(&self) -> Html {
    html! {
        <div>
            <BadButton text="Actual props" />
        </div>
    }
}
// ...

reacty_yew's Issues

Detect classlike components

Support other frameworks than React

Not a high priority, but I guess a pretty similar mechanism could be used to to support Vue as well?

A easier intermediate target would be to also support React compatible framework (like Preact), though there might not be much benefit to that, as they should work as well with the React integration 😅 (might help in reducing dependencies for such projects though).

Make material-ui build

There already is a example directory setup for material-ui, but it's still a long way from building.

Provide better error when "types" file is not found

Build up a showcase of supported libraries

It would be great to have a showcase of React libraries that are known to be supported.

Would love to hear your suggestions!

Support passing child components to React component

Needs a proof of concept first on how to accomplish this in a manual fashion.