Full support for docz story hot reloading

[mergebandit]

Currently, the Story component is pulling data from the local client store generated within the client-api.

Should you change an underlying story file, docz-plugin-storybook should hot reload your module and update the UI accordingly.

DocZ uses:

• Webpack Serve to serve up files
• Webpack Hot Client for automagically handling HMR

Current default behavior does generate a new hot-update.json file:

Viewing the storybook.<hash>.hot-update.js file does contain the updated module. However, the UI isn't updated to reflect this. Further, logging out the HMR output to the console via yarn docz:dev --debug shows the storybook/button-story.js module is being updated.

The default DocZ template, which can be seen in /examples/basic/.docz/app/root.jsx, is wrapped with the hot method from react-hot-loader. Changes to /examples/basic/components/Button.jsx or /examples/basic/components/Button.mdx do fire an HMR, and the modules themselves are updated.

I've walked through the entirety of the React Hot Loader troubleshooting guide, to no avail.

What I thought we'd be able to do is something like this, within examples/basic/.storybook:

import { configure } from '@storybook/react'

function loadStories() {
  require('../storybook/index.js')
  // You can require as many stories as you need.
}

configure(loadStories, module)

if (module.hot) {
  module.hot.accept(() => {
    configure(loadStories, module)
  })
}

module.hot is true, but module.hot.accept is never called.

[natergj]

I ran into an issue that may be similar in another project of mine, I'm not sure if this is the same thing that is causing the issue here, though. the underlying issue there was that I had two watch processes going and although each would emit events to the browser, only one was attached to the re-render process in React. I got around that by injecting a custom script via my dev server. Is there more than one watch process being run currently?