@html does not update on hydration

[hobbes7878]

Inventory of the components using @html tags that will need to be updated to get around this issue:

• BodyText
• EndNotes
• GraphicBlock
• Headline
• InfoBox
• PhotoPack
• Scroller
• SimpleTimeline
• Table

---

There's a few longstanding issues on the Svelte repo about this, amazingly.

A workaround is to set innerHtml with an action, which is what I guess we'll have to do before we can have live updating previews from RNGS.io working..

<script>
function setInnerHTML(node, html) {
    node.innerHTML = html;
    return {
      destroy() {
        node.innerHTML = '';
      },
    };
  }
</script>

<div use:setInnerHTML="{marked.parse(text)}"></div>

<style>
  div {
    display: contents;
  }
</style>

Honestly, amazed this hasn't come up for me before...

Will likely need to scrub all our components for this, but for sure BodyText is first up.

[hobbes7878]

This is tricky b/c this text is not prerendered using an innerHTML action...

Can do this to get it back, but I need to test if this is gonna lead to flashes on prod stuff.

<script>
  import { building } from '$app/environment';

  function setInnerHTML(node, html) {
    node.innerHTML = html;
    return {
      destroy() {
        node.innerHTML = '';
      },
    };
  }
</script>

{#if building}
  <div>
    {@html marked.parse(text)}
  </div>
{:else}
  <div use:setInnerHTML="{marked.parse(text)}"></div>
{/if}

<style>
  div {
    display: contents;
  }
</style>

[hobbes7878]

OK, it looks like the above workaround doesn't lead to flashes that I can see and still prerenders. It's extra processing time on load, but I don't know have many better ideas at this point.

Idea would be to make a standalone component for markdown text, I suppose, and replace all the @html refs with it.

Trouble is building state can't rely on SvelteKit variables, which causes trouble in SREP land where we use Vite alone. Possible solutions, all bad:

• Make a store that we set in SvelteKit projects to mirror building..
  • There is no equivalent in SREP Vite-only projects, so we'd need to set a default that would always be true for SREPs. If that's using @html then we've locked SREPs out of live endpoint updates.
• Actively check for Node v. Browser context by checking window or something??
  • Really hacky...
• Look at alternative solutions that actively parse markdown into Svelte text components like svelte-markdown
  • ... but that's a monstrous dependency, not super actively maintained.

Sucks, all of these, really..

[hobbes7878]

Noting the main issue tracking this in the Svelte repo: sveltejs/svelte#8213
And a PR worth watching: sveltejs/svelte#9063