[plugin:vite:vue] Tags with side effect (<script> and <style>) are ignored in client component templates. Advice :(

[lazarusA]

In general we have something that looks like:

[bonito.md]

Some text could be here as well

<div>
  <div class="bonito-fragment" id="b240e6cb-b8c0-4d12-8af1-b509dcc29e55" data-jscall-id="root">
    <div>
      <script src="bonito/js/Bonito.bundled.js" type="module"></script>
      <style></style>
      <div></div>
    </div>
    <div>
      <script type="module">Bonito.lock_loading(() => Bonito.init_session('b240e6cb-b8c0-4d12-8af1-b509dcc29e55', null, 'root'))</script>
      <span></span>
    </div>
  </div>
  <div class="bonito-fragment" id="d9c84005-2c6f-46b8-be1a-92ee56eea191" data-jscall-id="subsession-application-dom">
    <div>
      <style></style>
      <div></div>
    </div>
    <div>
      <script type="module">    Bonito.lock_loading(() => {
        return Bonito.fetch_binary('bonito/bin/c3e2dbd67f62c4fc1ead4bd004e119b63393e0ff-5683387923680860656.bin').then(msgs=> Bonito.init_session('d9c84005-2c6f-46b8-be1a-92ee56eea191', msgs, 'sub'));
    })
</script>
      <div style="width: 100%; height: 100%" data-jscall-id="1">
        <canvas style="display: block" data-jscall-id="2" tabindex="0"></canvas>
      </div>
    </div>
  </div>
</div>

A simplified version (reproducer) with source files can be found here: https://github.com/lazarusA/TemplateDocsVitePress.jl/tree/master/md_srcs

where the issue happens for the bonito.md file. Any advice or suggestions? This is suppose to be use to generate potentially many interactive plots, hence having a general approach would be nice.

Should we just parse it as raw html? does it make sense...

[SimonEast]

I just came across your post, and thought I'd offer some possible options. I can see two potential workarounds:

1. Move the <script> tags to the top level so they're not inside <div>'s.

2. Otherwise, you could replace:

   <script>...</script>

   With:

   <component is="script">...</component>

[brc-dd]

second won't work <component is="script"> might work in dev, but during SSR the inner content will be html encoded and will break the page if you've any of <,>,&,",' inside that

[SimonEast]

OK, thanks for the heads-up. 👍 I'd only tested it in dev mode so far. Good to know.