Storybook: Enforce reloading iframe when switching stories

Created on 7 Oct 2018 · 14Comments · Source: storybookjs/storybook

There are times where it would be handy to have the whole iframe reloaded (hard reload) instead of just the window.root being hydrated / re-rendered.

Is there such an option?

Also, while I am here, is there a way to have, say, storiesOf _react_ AND storiesOf _html_ in the same storybook?

Thank you.

core good first issue question / support

Source

phaistonian

👍9

Most helpful comment

For anyone needing a very ugly hack, I did this and it works. It reloads all my javascripts scripts.
I have one file per global variable, so I use an object to reference every global var and it's script. Adapt this part for your needs.

./storybook/preview-head.html

<script>
  window.reloadLib = function () {
    return new Promise(resolve => {

      // not global function or var to avoid overrides
      const loadScript = function (scriptSrc) {
        return new Promise(resolve => {
          // load script
          const script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = scriptSrc;

          if (script.readyState) {  // IE
            script.onreadystatechange = () => {
              if (script.readyState === 'loaded' || script.readyState === 'complete') {
                resolve();
              }
            };
          } else {  // Others
            script.onload = () => {
              resolve();
            };
          }

          document.getElementsByTagName('head')[0].appendChild(script);
        });
      };

      const scripts = {
        myLib: '/base/myLib.js',
        myLib2: '/base/myLibFile.js',
      };

      const promises = [];

      Object.keys(scripts)
        .forEach(key => {
          delete window[key];
          promises.push(loadScript(scripts[key]));
        });

      Promise.all(promises)
        .then(() => resolve());
    });
  };
</script>

````

**./stories/mystory.js**

```javascript
export const myStory= () => {
    // setTimeout to execute inside code after the returned HTML is loaded in DOM
    // I need this, maybe you don't ;)
    setTimeout(() => {
        window.reloadLib().then(() => {
            // all scripts are loaded and ready
        });
    });

    return 'my html';
};

mgohin on 18 May 2020

🚀2

All 14 comments

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!

stale[bot] on 30 Oct 2018

Resurfacing this, I had a case where I need the preview to be hard reloaded for a piece of code in our component that relies on using a variable declared in window on instantiation. Thinking of creating an addon that allows you to change the window piggybacked variables, but I believe I'll need this exposed in the preview API.

If this is alright I should be able to contribute to this.

diagramatics on 29 Nov 2018

What would an ideal API look like? @diagramatics @phaistonian

hipstersmoothie on 29 Nov 2018

Perhaps

.add('story', callback, true)

.add(story, callback, { reload: true }

Or you could have it for all subs like this:

storiesOf(myStory, module, { reload: true })

phaistonian on 29 Nov 2018

I don't have an opinion for a reload-on-story-switch, but I expect an API under preview will be needed for it?

diagramatics on 29 Nov 2018

storiesOf(myStory, module, { reload: true })

this makes more sense to me since we can have an addon that will use this "reload" prop

igor-dv on 1 Dec 2018

@igor-dv or even storiesOf(myStory, { module, reload: true })

phaistonian on 2 Dec 2018

See #4945 as well

ozzyogkush on 6 Dec 2018

I'm running into this as well around loading external scripts that then stay around between navigation

chrisdrackett on 21 Jun 2019

Same here. This also relates to another ancient issue #729 where styles from different stories get piled up. With a clean slate option should be able to address these issues.

crimx on 12 Jul 2019

In my case, I'm using react-helmet to load certain external scripts. Some of those scripts may be loaders that inject more scripts into <head> and these don't seem to get cleaned up after switching stories AND after HMR.

Zodiase on 22 Apr 2020

Same case for me, I'd be sad to remove Storybook for this reason :(

mgohin on 14 May 2020

./storybook/preview-head.html

<script>
  window.reloadLib = function () {
    return new Promise(resolve => {

      // not global function or var to avoid overrides
      const loadScript = function (scriptSrc) {
        return new Promise(resolve => {
          // load script
          const script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = scriptSrc;

          if (script.readyState) {  // IE
            script.onreadystatechange = () => {
              if (script.readyState === 'loaded' || script.readyState === 'complete') {
                resolve();
              }
            };
          } else {  // Others
            script.onload = () => {
              resolve();
            };
          }

          document.getElementsByTagName('head')[0].appendChild(script);
        });
      };

      const scripts = {
        myLib: '/base/myLib.js',
        myLib2: '/base/myLibFile.js',
      };

      const promises = [];

      Object.keys(scripts)
        .forEach(key => {
          delete window[key];
          promises.push(loadScript(scripts[key]));
        });

      Promise.all(promises)
        .then(() => resolve());
    });
  };
</script>

````

**./stories/mystory.js**

```javascript
export const myStory= () => {
    // setTimeout to execute inside code after the returned HTML is loaded in DOM
    // I need this, maybe you don't ;)
    setTimeout(() => {
        window.reloadLib().then(() => {
            // all scripts are loaded and ready
        });
    });

    return 'my html';
};

mgohin on 18 May 2020

🚀2

Anything updates on this? External JavaScript such as https://van11y.net/accessible-tab-panel/ will not work properly when moving from story to story or even on the same story in different tabs.

Was going to move my Pattern Library over to Storybook but now I'm thinking I will not be able to without this feature.

Also, the above workaround for reloading the javascript doesn't fix van11y because it changes the attributes on elements and since the HTML is not refreshed either it doesn't work.