https://github.com/hobofan/reacty_yew

Generate Yew components from React components via Typescript type definitions
https://github.com/hobofan/reacty_yew

jsx proc-macro react typescript yew

Last synced: 25 days ago
JSON representation

Generate Yew components from React components via Typescript type definitions

• Host: GitHub
• URL: https://github.com/hobofan/reacty_yew
• Owner: hobofan
• License: apache-2.0
• Created: 2020-11-11T18:35:48.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2020-11-16T20:39:23.000Z (almost 4 years ago)
• Last Synced: 2024-04-19T19:26:06.843Z (7 months ago)
• Topics: jsx, proc-macro, react, typescript, yew
• Language: JavaScript
• Homepage:
• Size: 1.79 MB
• Stars: 53
• Watchers: 6
• Forks: 1
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE-APACHE

Awesome Lists containing this project

• awesome-yew - reacty_yew - Generate Yew components from React components via Typescript type definitions. (Crates / Utils)

README

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

This is a proof of concept for automatically generating [Yew](https://yew.rs/) 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](https://www.hobofan.com/blog/2020-11-10-reacty_yew/)

## Showcase

For the full example see [./examples/bad_button](./examples/bad_button).

Given a React component:

```tsx

import * as React from "react";

interface BadButtonProps {

  color?: string,

  text: string,

}

const BadButton = (props: BadButtonProps): JSX.Element => {

  return (

     window.alert("Click!")}

    >

      {props.text}

    

  );

};

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:

```rust

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:

```rust

use yew::prelude::*;

use crate::bad_button::BadButton;

// ...

fn view(&self) -> Html {

    html! {

        


            

        

    }

}

// ...

```