Need a good way to load javascript or css dynamically

[piaoger]

I am trying to append a script node into HEAD node for a child router. I tried to 2 methods but each one has its own shortcomings.

Blow are my tests:

1. It can works as desired but seems not very simple by using raw web_sys apis and DomNode

   I skipped the helpers to get head element and use head() in my code snippt.

AppRoutes::Edit => {

    let script = DomNode::element_from_tag("script");
    script.set_attribute(
        "src",
        "https://abc.com/d.js",
    );
    script.set_attribute("type", "text/javascript");
    let head = DomNode::from_web_sys(head().into());
    head.append_child(&script);
    script.event(cx, "load", |_| web_sys::console::log_1(&"javascript loaded...".into()));

    view! {cx,
        components::editor::edit()
    }
}

2. A script element is just appended to parent element(DIV in my case) though it works.

AppRoutes::Edit=> {
    view! {cx,
        script(src="https://abc.com/d.js")
        components::editor::edit()
    }
}

[lukechu10]

Yeah it would be nice to have something like use_script and a use_stylesheet hook although I think it should be in something like https://github.com/lukechu10/sycamore-hooks instead of the main sycamore repo.

[piaoger]

Yes. sycamore-hook can be good place for it. I tried use_websocket before though did not including it in my in house tool :)