Merge pull request #14445 from brion-fuller/fuller/web-components-hmr

Web-components: Add full reload listening to server-side-events

app/web-components/README.md

@@ -24,31 +24,9 @@ For more information visit: [storybook.js.org](https://storybook.js.org)
 Storybook also comes with a lot of [addons](https://storybook.js.org/docs/web-components/configure/storybook-addons) and a great API to customize as you wish.
 You can also build a [static version](https://storybook.js.org/docs/web-components/workflows/publish-storybook) of your storybook and deploy it anywhere you want.
 
-# Setup page reload via HMR
+# Hot Module Reloading (HMR)
 
-As web components register on a global registry which only accepts a certain name/class once it can lead to errors when using classical HMR.
-There are ideas on how to archive HMR with a static registry but there is no proven solution yet.
-
-Therefore the best approach for now is to do full page reloads.
-If you keep your stories to specific states of components (which we would recommend anyways) this usually means it is fast.
-To activate full page reload
-
-```js
-// ==> REPLACE
-configure(require.context('../stories', true, /\.stories\.(js|mdx)$/), module);
-
-// ==> WITH
-// force full reload to not reregister web components
-const req = require.context('../stories', true, /\.stories\.(js|mdx)$/);
-configure(req, module);
-if (module.hot) {
-  module.hot.accept(req.id, () => {
-    const currentLocationHref = window.location.href;
-    window.history.pushState(null, null, currentLocationHref);
-    window.location.reload();
-  });
-}
-```
+As web components register on a global registry which only accepts a certain name/class once it can lead to errors when using classical HMR. There are ideas on how to archive HMR with a static registry but there is no proven solution yet. Therefore the best approach for now is to do full page reloads. If you keep your stories to specific states of components (which we would recommend anyways) this usually means it is fast.
 
 # Setup es6/7 dependencies
 
@@ -59,11 +37,11 @@ For example if you have a library called `my-library` which is in ES2017 then yo
 ```js
 // .storybook/main.js
 
-module.exports = { 
-  webpackFinal: async config => {
+module.exports = {
+  webpackFinal: async (config) => {
     // find web-components rule for extra transpilation
     const webComponentsRule = config.module.rules.find(
-      rule => rule.use && rule.use.options && rule.use.options.babelrc === false
+      (rule) => rule.use && rule.use.options && rule.use.options.babelrc === false
     );
     // add your own `my-library`
     webComponentsRule.test.push(new RegExp(`node_modules(\\/|\\\\)my-library(.*)\\.js$`));

app/web-components/src/client/index.ts

@@ -1,3 +1,5 @@
+import { window, EventSource } from 'global';
+
 export {
   storiesOf,
   setAddon,
@@ -21,4 +23,18 @@ export * from './preview/types-6-0';
 // TODO: disable HMR and do full page loads because of customElements.define
 if (module && module.hot && module.hot.decline) {
   module.hot.decline();
+
+  // forcing full reloads for customElements as elements can only be defined once per page
+  const hmr = new EventSource('__webpack_hmr');
+  hmr.addEventListener('message', function fullPageReload(event: { data: string }) {
+    try {
+      // Only care for built events.  Heartbeats are not parsable so we ignore those
+      const { action } = JSON.parse(event.data);
+      if (action === 'built') {
+        window.location.reload();
+      }
+    } catch (error) {
+      // Most part we only get here from the data in the server-sent event not being parsable which is ok
+    }
+  });
 }

examples/web-components-kitchen-sink/.storybook/main.js

@@ -1,5 +1,6 @@
 module.exports = {
   logLevel: 'debug',
+  stories: ['../stories/**/*.stories.js', '../stories/**/*.stories.mdx'],
   addons: [
     '@storybook/addon-docs',
     '@storybook/addon-controls',

examples/web-components-kitchen-sink/.storybook/preview.js

@@ -1,6 +1,6 @@
 /* global window */
 
-import { configure, addParameters, setCustomElements } from '@storybook/web-components';
+import { addParameters, setCustomElements } from '@storybook/web-components';
 
 import customElements from '../custom-elements.json';
 
@@ -18,18 +18,3 @@ addParameters({
     iframeHeight: '200px',
   },
 });
-
-// configure(require.context('../stories', true, /\.stories\.(js|mdx)$/), module);
-
-// force full reload to not re-register web components
-const req = require.context('../stories', true, /\.stories\.(js|mdx)$/);
-
-configure(req, module);
-
-if (module.hot) {
-  module.hot.accept(req.id, () => {
-    const currentLocationHref = window.location.href;
-    window.history.pushState(null, null, currentLocationHref);
-    window.location.reload();
-  });
-}

lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev

@@ -17,6 +17,7 @@ Object {
     "ROOT/addons/knobs/dist/esm/preset/addDecorator.js-generated-other-entry.js",
     "ROOT/addons/links/dist/esm/preset/addDecorator.js-generated-other-entry.js",
     "ROOT/examples/web-components-kitchen-sink/.storybook/preview.js-generated-config-entry.js",
+    "ROOT/examples/web-components-kitchen-sink/.storybook/generated-stories-entry.js",
     "NODE_MODULES/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined",
   ],
   "keys": Array [

lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod

@@ -17,6 +17,7 @@ Object {
     "ROOT/addons/knobs/dist/esm/preset/addDecorator.js-generated-other-entry.js",
     "ROOT/addons/links/dist/esm/preset/addDecorator.js-generated-other-entry.js",
     "ROOT/examples/web-components-kitchen-sink/.storybook/preview.js-generated-config-entry.js",
+    "ROOT/examples/web-components-kitchen-sink/.storybook/generated-stories-entry.js",
   ],
   "keys": Array [
     "name",