Macro yew_interop::declare_resources

declare_resources!() { /* proc-macro */ }

Declare your libraries as whitespace separated groups of identifier and one or more urls

Example 1

declare_resources!(my_library "https://cdn.com/my_library.js");

Example 2

declare_resources!(
library_one
"https://cdn.com/a.js"
"https://cdn.com/b.css"
"https://cdn.com/c.css"
library_two
"https://cdn.com/b.css"
);

Explicitly Specify the Url Type

the macro needs to know whether the url is JavaScript or CSS. When you provide a string literal as the examples above, the macro derives the information from the suffix (either .js or .css). When the string literal doesn’t end with .js or .css, or when you provide other expressions like a macro call or a identifier, you need to manually specify the URL type by prepending the custom keyword js/css before the url.

const MY_CSS_URL: &str = "https://my_static.com/some.css";

/// production/dev aware static url
fn static_url(rel: &'static str) -> String{
    if cfg!(debug_assertions){
        rel.to_string()
    }else{
        format!("https://static.my-cdn.com/{}", rel)
    }
}
declare_resources!(
my_library
css MY_CSS_URL
js static_url("my_other_library")
);

The macro expect the return type of the expression to implement Into<Cow<'static, str>>, &'static str, String and Cow<'static, str> are all valid types for example.

Side Effect Scripts

To declare a side effect script, just prepend the identifier with an exclamation mark (!), note the script has to be in JavaScript, so no type should be explicitly specified.

declare_resources!(
my_library
"https://cdn.com/lib.js"
! my_effect
"https://cdn.com/effect.js"
);

Consumption

The macro expands into a <ResourceProvider/> component and hook functions for each of your resources. The names of the hook functions are use_<resource_identifier>. Example 2 above will expand into two hook functions pub fn use_library_one() and pub fn use_library_two()

You should wrap the root component of your app in the <ResourceProvider/> like this:

html!{
    <ResourceProvider>
        <App/>
    </ResourceProvider>
};

The hooks are to be used in the consuming components.