Styles are leaking

[JerryI]

Great job!
One drawback, that makes me sad - it injects global styles for SVG, which basically corrupts other SVGs on a page.

[fabiospampinato]

I'm just calling SVG Bob, so you should probably reporting this bug to them.

[fabiospampinato]

Maybe that could be namespaced on our end though 🤔 I haven't thought about that, I should try to do that.

[JerryI]

Thanks for considering that!
Even just string.replace with regexp should work by adding some prefix.

PS: sorry, I did not know, I thought you generated the styles table separately from your JS

[JerryI]

I was also thinking, is it possible to block the style injection from wasm container? It somehow goes in uncontrollable way when the renderer function is called.

In principle I could define my own css manually for all rectangles, paths... and then apply for all of them certain classes using regexp or virtual DOM ;D

PS: I opened an issue in the original repo, however, the last commit was ~1y ago, I guess, this guy is busy with sauron project.

[fabiospampinato]

I was also thinking, is it possible to block the style injection from wasm container? It somehow goes in uncontrollable way when the renderer function is called.

I'm not sure what you mean exactly 🤔 I guess the output string could be transformed somewhat.

[JerryI]

I was also thinking, is it possible to block the style injection from wasm container? It somehow goes in uncontrollable way when the renderer function is called.

I'm not sure what you mean exactly 🤔 I guess the output string could be transformed somewhat.

Yeah. You are right. I did not notice, that the string it produces includes all CSSs.

<div><svg xmlns="http:https://www.w3.org/2000/svg" width="72" height="64">
    <style>
        line, path, circle, rect, polygon{stroke:black;stroke-width:2;stroke-opacity:1;fill-opacity:1;stroke-linecap:round;stroke-linejoin:miter;}text{font-family:Iosevka Fixed, monospace;font-size:14px;}rect.backdrop{stroke:none;fill:transparent;}.broken{stroke-dasharray:8;}.filled{fill:black;}.bg_filled{fill:transparent;}.nofill{fill:transparent;}.end_marked_arrow{marker-end:url(#arrow);}.start_marked_arrow{marker-start:url(#arrow);}.end_marked_diamond{marker-end:url(#diamond);}.start_marked_diamond{marker-start:url(#diamond);}.end_marked_circle{marker-end:url(#circle);}.start_marked_circle{marker-start:url(#circle);}.end_marked_open_circle{marker-end:url(#open_circle);}.start_marked_open_circle{marker-start:url(#open_circle);}.end_marked_big_open_circle{marker-end:url(#big_open_circle);}.start_marked_big_open_circle{marker-start:url(#big_open_circle);}
        <!--separator-->
        
    </style>
    <defs>
        <marker id="arrow" viewBox="-2 -2 8 8" refX="4" refY="2" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
            <polygon points="0,0 0,4 4,2 0,0"></polygon>
        </marker>
        <marker id="diamond" viewBox="-2 -2 8 8" refX="4" refY="2" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
            <polygon points="0,2 2,0 4,2 2,4 0,2"></polygon>
        </marker>
        <marker id="circle" viewBox="0 0 8 8" refX="4" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
            <circle cx="4" cy="4" r="2" class="filled"></circle>
        </marker>
        <marker id="open_circle" viewBox="0 0 8 8" refX="4" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
            <circle cx="4" cy="4" r="2" class="bg_filled"></circle>
        </marker>
        <marker id="big_open_circle" viewBox="0 0 8 8" refX="4" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
            <circle cx="4" cy="4" r="3" class="bg_filled"></circle>
        </marker>
    </defs>
    <rect class="backdrop" x="0" y="0" width="72" height="64"></rect>
    <g>
        <path d="M 16,24 A 8,8 0,0,0 10,28" class="nofill"></path>
        <line x1="10" y1="28" x2="0" y2="48" class="solid"></line>
        <line x1="16" y1="24" x2="64" y2="24" class="solid"></line>
    </g>
</svg></div>

[JerryI]

solved

bob.render ( data ).replace('line, path, circle, rect, polygon', '.frontend-object line, .frontend-object path, .frontend-object circle, .frontend-object rect, .frontend-object polygon');

[JerryI]

Yo. The maintainer did fix this issue in 0.7 release