Storybook embed util

storybook-embed.js

window.addEventListener("message", (message) => {
  try {
    const data = JSON.parse(message.data)
    if (!data || data.context !== "iframe.resize") return
    const url = new URL(data.src)
    for (const key of [...url.searchParams.keys()]) {
      if (!["path", "id", "args"].includes(key)) url.searchParams.delete(key)
    }
    for (const el of document.querySelectorAll(`iframe[src^="${url.href}"]`)) {
      el.style.height = `${data.height}px`
    }
  } catch (e) {}
}, false)

document.addEventListener("DOMContentLoaded", () => {
  for (const el of document.querySelectorAll("[storybook-embed]")) {
    const storyUrl = new URL(el.getAttribute("storybook-embed"))
    const oembedUrl = new URL(
      `/oembed?url=${encodeURIComponent(storyUrl)}&format=json`,
      `https://${storyUrl.host.replace(/^[^.]+/, "www")}`
    )
    fetch(oembedUrl)
      .then((res) => res.json())
      .then((data) => {
        el.setAttribute('title', data.title)
        el.style.height = `${data.height}px`
        el.innerHTML = data.html
      })
  }
})