Embedding yew components in an existing page #3593

Timmmm · 2024-01-26T11:38:42Z

Timmmm
Jan 26, 2024

I've written a document with asciidoc, which allows you to embed raw HTML. I'd like to write some little interactive widgets in the page using Yew and then embed them, but have the "main" document still be asciidoc. Something like this:

++++
include::wasm_bundle_from_yew.html[]
++++

# An explanation of stuff.

Blah blah blah, as you can see in this interactive diagram

++++
include::instantiate_component_one.html[]
++++

Also we can see the same from this similar diagram

++++
include::instantiate_component_two.html[]
++++

So that the big WASM bundle is only included once, and then the components are instantiated in different places. Is something like that possible?

Answered by Timmmm

Jan 26, 2024

I got this to work. Basically do this:

In the Asciidoc add divs for where you want to insert the components:

++++
<div id="embed_0"></div>
++++

...

++++
<div id="embed_1"></div>
++++

Make a Trunk.toml to run Asciidoc:

[[hooks]]
stage = "pre_build"
command = "asciidoctor"
command_arguments = ["src/index.adoc", "--out-file", "target/index_adoc.html"]

In Trunk's index.html add the HTML inline:

<!DOCTYPE html>
<html lang="en">
    <head>
        <link href="/src/style.css" rel="css" data-trunk/>
    </head>
    <body>
        <link href="/target/index_adoc.html" rel="inline" data-trunk/>
    </body>
</html>

In your fn main():

fn main() {
    wasm_logger::init(wasm_logger::Config:…

View full answer

Timmmm · 2024-01-26T17:48:21Z

Timmmm
Jan 26, 2024
Author

I got this to work. Basically do this:

In the Asciidoc add divs for where you want to insert the components:

++++
<div id="embed_0"></div>
++++

...

++++
<div id="embed_1"></div>
++++

Make a Trunk.toml to run Asciidoc:

[[hooks]]
stage = "pre_build"
command = "asciidoctor"
command_arguments = ["src/index.adoc", "--out-file", "target/index_adoc.html"]

In Trunk's index.html add the HTML inline:

<!DOCTYPE html>
<html lang="en">
    <head>
        <link href="/src/style.css" rel="css" data-trunk/>
    </head>
    <body>
        <link href="/target/index_adoc.html" rel="inline" data-trunk/>
    </body>
</html>

In your fn main():

fn main() {
    wasm_logger::init(wasm_logger::Config::default());

    let embed_0 = gloo::utils::document().get_element_by_id("embed_0").unwrap();
    let embed_1 = gloo::utils::document().get_element_by_id("embed_1").unwrap();

    yew::Renderer::<YourComponent>::with_root_and_props(embed_0, YourProps { ...  }).render();
    yew::Renderer::<YourComponent>::with_root_and_props(embed_1, YourProps { ...  }).render();
}

Run trunk serve. It will magically rerun asciidoctor and do live reloading and everything.

When Trunk inlines the asciidoc HTML it helpfully strips the <html> tag etc. It does leave behind a <meta charset=... tag which Chrome complains about in the console, but it's a minor issue.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Embedding yew components in an existing page #3593

{{title}}

Replies: 1 comment

{{title}}

Select a reply

Embedding yew components in an existing page #3593

Timmmm Jan 26, 2024

Replies: 1 comment

Timmmm Jan 26, 2024 Author

Timmmm
Jan 26, 2024

Timmmm
Jan 26, 2024
Author