Yew Function Component Support

futursolo commented 3 years ago

This issue aims to experiment with hooks API that will be adopted with the upcoming function component for Yew 0.19.

futursolo commented 3 years ago

There're two sets of APIs that will be introduced:

use_style and use_style! API. The function flavour of this hook will accept the same argument as Style::new and the macro flavour will accept the same argument as the upcoming procedural macro.
styled_component(MyComponent) + css!

This API will introduce a styled_component attribute which will be equivalent to the original function_component from yew but also injects a manager instance with use_context at the beginning of the function component.

Purposed Syntax:

use stylist::yew::styled_component;

#[styled_component(MyComponent)]
fn my_component() -> Html {
    html! {
        <div class=css!(r#"color: red;"#)>
            {"Styled Text!"}
        </div>
    }
}

(The syntax for the css! API is tentative as procedural macro is not landed on master yet.)

Both APIs will be context aware.

WorldSEnder commented 2 years ago

I'm currently experimenting with having a branch that tracks yew@next until the release of 0.19. This could then host the hooks implementation. Current show stopper is yewdux not being updated to https://github.com/yewstack/yew/pull/1961 yet. Guess it has to wait a bit.

WorldSEnder commented 2 years ago

The working parts live on the yew-next branch now

futursolo commented 2 years ago

I do plan to cut at least one more release before introducing hooks (switching to track yew master) so I am fine with it lives on a different branch for now.

futursolo commented 2 years ago

As per https://github.com/yewstack/yew/issues/2052, I think the Yew 0.19 release is imminent.

I have updated the master branch to track master branch of Yew and implemented the styled_component API.

So as soon as Yew 0.19 is released we can release a version with function component support.

futursolo commented 2 years ago

The Yewdux and yewtil::store example have been replaced with Context API Example.

futursolo / stylist-rs

Yew Function Component Support #23