create a html element which is const or thread local. | Yew | Page 1

idle phoenix Feb 20, 2023, 2:44 PM

#

i have some svg asset which are const which i want to generate from file and add when required.
is it possible to store them in the const ?

low cypress Feb 21, 2023, 7:43 AM

#

whats the point the svg is const?

idle phoenix Feb 21, 2023, 7:44 AM

#

i reuse svg

#

based on property of elment elment embded one of the svgs

low cypress Feb 21, 2023, 7:45 AM

#

you can include svg as bytes as static, using include_bytes! macro

#

or you can create a shared state, and read svg once you need it and store it there, and access that shared state when you need it

#

using include bytes, the svg will be compiled into the source code, that may increase your wasm size

idle phoenix Feb 21, 2023, 7:55 AM

#

i have done it partially ref: https://github.com/sak96/chain_reaction/blob/e2cc40a664e3de9d76155bdf0a71a1c5d8c01857/src/bin/web/cells.rs#L41
but i have to convert that constant into html element using following:

    let parsed_html = Html::from_html_unchecked(AttrValue::from(content));

it always logs: Unexpected value 2rem parsing height attribute.
which is clogging the console.

#

the issue is not with reuse.
instead i want to avoid logs.
width in rem was not working.

#

i tried lazy_static and thread_locals but
some issue with borrow checker with embedding the value in html! macro.

idle phoenix Feb 21, 2023, 10:56 AM

#

use yew::prelude::*;

const ONE: &str = r#"
<svg viewBox="0 0 100 100" width="2rem" height="2rem">
  <circle class="cell" cx="45" cy="45" r="25" />
</svg>
"#;
const TWO: &str = r#"
<svg viewBox="0 0 100 100" width="2rem" height="2rem">
  <circle class="cell" cx="25" cy="45" r="25" />
  <circle class="cell" cx="75" cy="45" r="25" />
</svg>
"#;

#[function_component(App)]
pub fn app() -> Html {
    let x = use_state(|| false);
    let parsed_html = Html::from_html_unchecked(AttrValue::from(if *x { ONE } else { TWO }));
    html! {
        <button onclick={
            let x = x.clone();
            Callback::from(move |_| {
                x.set(!*x)
            })
        }>
        {parsed_html}
        </button>
    }
}

fn main() {
    yew::Renderer::<App>::new().render();
}

example to tamper with.
check browser console log when you click on button,

#

low cypress Feb 23, 2023, 9:03 AM

#

i have no idea. so somehow you should be able to create a html node from string, and insert it to the dom tree

#

have you found any solution for this?

#

ok so it works

#

let svg_raw: &str = r#"
  <svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    Sorry, your browser does not support inline SVG.  
  </svg> 
  "#;

  let svg = Html::from_html_unchecked(svg_raw.into());

html! {
  <>
    {svg}
  </>
}

idle phoenix Feb 23, 2023, 9:12 AM

#

yeah it works. but the node needs to be created everything

#

if ther was a way to reuse it would have been nice

low cypress Feb 23, 2023, 9:20 AM

#

hm

#

does it have real performance down side?

idle phoenix Feb 23, 2023, 9:26 AM

#

good question may be not.

idle phoenix Feb 23, 2023, 11:22 AM

#

oh yeah the issue was with logs

#

i was use rem units for width and height.

#

seems like those are not treated as valid units by the parser.

#create a html element which is const or thread local.