Allow injection of "global" heex into stories or even all of storybook

[sodapopcan]

Hey Christian,

For our icons, we use a sprite sheet with <symbol>/<use>. This means we need to render this once before using any icons in any story that needs them. The template function isn't cutting it because it renders once per story and since each symbol has an id, the JS console gets flooded with Multiple ID warnings.

Do you have any thoughts on a solution? Adding a global_template callback for Story would suffice. It would be even better if there was a way to inject HEEx into Storybook's layout. In general, it would be great to be able to inject into the topbar, though I understand if you wary of doing that in case you need the space in the future.

What do you think? I'm happy to do the work here.

Thanks!

[cblavier]

I don't know what you mean by <symbol> / <use>
Can you show me an example of the HEEX you'd like to inject?

[sodapopcan]

Certainly! (Do I sound like an LLM? 🙃)

So you can make SVG "sprite sheets" like so:

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <symbol id="icon-3d-select-edge" viewBox="0 0 32 32">
      <path ... />
    </symbol>
    <symbol id="icon-arrow-left" viewBox="0 0 32 32">
      <path ... />
    </symbol>
    <symbol id="icon-arrow-separate-vertical" viewBox="0 0 32 32">
      <path ... />
    </symbol>
  </defs>
</svg>

That bit needs to be rendered once in the DOM.

Then you can render a specific icon like so:

<svg>
  <use href="icon-arrow-left" />
</svg>

The href attribute refers to an id. The only way we can figure out how to render the defs in component stories is to include it in the template callback. Of course, this renders once per variation group which causes the multiple IDs warning. It isn't the end of the world since it's not a public site, but we use Storybook for dev often and it's super noisy and not a great experience.

[cblavier]

You definitely sound like an LLM 😆

I'm still unsure how we should tackle this issue:

• the global template thing should be rendered once for all story variations when they're rendered within <div/> containers
• the global template thing should be rendered in every variation when they're rendered within an <iframe/>

I don't know either if this is a templating feature or just a custom script injection.

[sodapopcan]

Custom script injection is really more what we're looking for, but of course it would have to be able to render into the DOM, I'm not sure what the best thing to do is here. My thinking was just have something you can render at the top of stories, which could be used for other things too. Of course even #519 would solve out issue.

I feel like iframes are an edge case. iframe is actually a solution for us here but not super ideal since it renders the stories very tall making pages with more components huge.

Outside of changing Storybook, we could also solve this by introducing an optional prefix assign for icon defs component. It's a bit weird having something purely for working around Storybook but it's not really that big a deal. Clearly not too many people run into this.