A solution to help consume npm packages and js/css interoperability in general #2213

Madoshakalaka · 2021-11-28T11:15:24Z

Madoshakalaka
Nov 28, 2021

A recent yew project of mine had to interoperate a lot with third-party js and CSS, while there wasn't an existing way to easily consume them. A solution was developed to have an Agent/Context insert the libraries into the <head> as <link>s, wait for load, and notify consumers. It worked beautifully and I'm currently working on extracting it for everyone to use.

I'm naming it Yewt, which means "eat", which means "to consume". Cuz it helps with the consumption of CSS and js libraries.

Here's the API I'm thinking of:

a <LinkResourceManager> is going to be a context that stores the status of the links. use_links is going to return a bool that becomes true when all dependencies are ready. declare_links! is going to be a helper macro to declare the dependencies of each library.

use yew::prelude::*;
use yewt::{declare_links, use_links};

declare_links!(
    ToastLinks
    "https://mycdn.com/toast.css"
    "https://mycdn.com/toast.js"
    SocialMediaButtonLinks
    "https://mycdn.com/social-media.js"
    ImageCropperLinks
    "https://mycdn.com/image-cropper.js"
    "https://mycdn.com/image-cropper.css"
);


#[function_component(Main)]
fn app() -> Html {
    html! {
        <LinkResourceManager>
            // ...
        </LinkResourceManager>
    }
}

#[function_component(Consumer)]
pub fn consumer() -> Html {
    let toasts_ready = use_links(ToastLinks);

    html! {
        if toasts_ready{
            {
                let onclick = |_|{
                    // display a toast here using js function from the library
                }
                <button {onclick}>{"Click here to send a toast"}</button>
            }
        }else{
            <p>"please wait..."</p>
        }
    }
}

I am in the process of extracting the crate. I imagine portals implemented by #2147 will make this more yew idiomatic with less web_sys juggling. Let me know what you think!

mc1098 · 2021-11-29T14:19:02Z

mc1098
Nov 29, 2021

Awesome idea ❤️
@Madoshakalaka did you Google that name, if no do so 😱.

2 replies

Madoshakalaka Nov 30, 2021
Author

Sorry I'm not a native speaker, and pun not intended 😨
Do you have a suggestion for the name

mc1098 Nov 30, 2021

I don't :) I thought I'd mention it because I was going to call a yew testing crate the same thing and then I realised it meant something bit risky so avoided it.

Madoshakalaka · 2021-12-22T08:00:38Z

Madoshakalaka
Dec 22, 2021
Author

I decided it should be called yew-interop. I just released v0.1, check it out!

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

A solution to help consume npm packages and js/css interoperability in general #2213

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 2 replies

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

A solution to help consume npm packages and js/css interoperability in general #2213

Madoshakalaka Nov 28, 2021

Replies: 2 comments · 2 replies

mc1098 Nov 29, 2021

Madoshakalaka Nov 30, 2021 Author

mc1098 Nov 30, 2021

Madoshakalaka Dec 22, 2021 Author

Madoshakalaka
Nov 28, 2021

Replies: 2 comments 2 replies

mc1098
Nov 29, 2021

Madoshakalaka Nov 30, 2021
Author

Madoshakalaka
Dec 22, 2021
Author