Repository files navigation

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

Announcement blog post with a bit more information

For the full example see./examples/bad_button.

Given a React component:

import*asReactfrom"react";interfaceBadButtonProps{color?:string,text:string,}constBadButton=(props:BadButtonProps):JSX.Element=>{return(<buttonstyle={{backgroundColor:props.color}}onClick={()=>window.alert("Click!")}>{props.text}</button>);};export{BadButton};

An invocation of thereact_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 componentBadButton in a Yew component:

use yew::prelude::*;usecrate::bad_button::BadButton;// ...fnview(&self) ->Html{html!{        <div>            <BadButton text="Actual props" />        </div>}}// ...