Storybook: Async fetch html in @storybook/html

[skk2142]

Describe the bug
I want to fetch html from the server and then return it to the storybook renderer. It seems like there are solutions for async fetch for storybook React but is there a way to do so in @storybook/html?

Code snippets

import { storiesOf } from '@storybook/html';

async function getHtml(url) {
  const result = await window.fetch(url, {
    method: 'GET',
    mode: 'cors',
    headers: {
      'Content-Type': 'text/html; charset=utf-8',
    },
  });
  const html = await result.text();
  console.log(html);
  return html;
}

storiesOf('Email Templates', module)
  .add('Welcome email', () => getHtml('http://localhost:32773/welcome'));

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[Hypnosphi]

You have to return something synchronously. One possible approach:

storiesOf('Email Templates', module)
  .add('Welcome email', () => {
    const element = document.createElement('div')
    element.textContent = 'Loading...'
    getHtml('http://localhost:32773/welcome').then(html => {
      element.innerHTML = html
    }
    return element
  })

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!