Clear decorators on module dispose

The `config.js` file acts as the main entrypoint for users storybook
code. Stories, decorators etc. are added from here. When webpack HMR
replaces this module global decorators get applied repeatedly. This
happens because although the config.js file gets replaced the storybook
module remains unchanged along with all global decorators we may have
added before the replacement.

It is okay to remove all decorators when config.js module gets replaced
because we can be sure that they'll be added again when config.js file
gets executed.

dist/client/preview/client_api.js

@@ -52,6 +52,11 @@ var ClientApi = function () {
     value: function addDecorator(decorator) {
       this._globalDecorators.push(decorator);
     }
+  }, {
+    key: 'clearDecorators',
+    value: function clearDecorators() {
+      this._globalDecorators = [];
+    }
   }, {
     key: 'storiesOf',
     value: function storiesOf(kind, m) {

dist/client/preview/config_api.js

@@ -14,6 +14,8 @@ var _createClass3 = _interopRequireDefault(_createClass2);
 
 var _actions = require('./actions');
 
+var _ = require('./');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var ConfigApi = function () {
@@ -67,6 +69,9 @@ var ConfigApi = function () {
         module.hot.accept(function () {
           setTimeout(render);
         });
+        module.hot.dispose(function () {
+          (0, _.clearDecorators)();
+        });
       }
 
       render();

dist/client/preview/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.configure = exports.addDecorator = exports.setAddon = exports.linkTo = exports.action = exports.storiesOf = undefined;
+exports.configure = exports.clearDecorators = exports.addDecorator = exports.setAddon = exports.linkTo = exports.action = exports.storiesOf = undefined;
 
 require('es6-shim');
 
@@ -62,6 +62,7 @@ var action = exports.action = clientApi.action.bind(clientApi);
 var linkTo = exports.linkTo = clientApi.linkTo.bind(clientApi);
 var setAddon = exports.setAddon = clientApi.setAddon.bind(clientApi);
 var addDecorator = exports.addDecorator = clientApi.addDecorator.bind(clientApi);
+var clearDecorators = exports.clearDecorators = clientApi.clearDecorators.bind(clientApi);
 var configure = exports.configure = configApi.configure.bind(configApi);
 
 // initialize the UI

src/client/preview/client_api.js

@@ -19,6 +19,10 @@ export default class ClientApi {
     this._globalDecorators.push(decorator);
   }
 
+  clearDecorators() {
+    this._globalDecorators = [];
+  }
+
   storiesOf(kind, m) {
     if (m && m.hot) {
       m.hot.dispose(() => {

src/client/preview/config_api.js

@@ -4,6 +4,8 @@ import {
   clearError,
 } from './actions';
 
+import { clearDecorators } from './';
+
 export default class ConfigApi {
   constructor({ pageBus, storyStore, reduxStore }) {
     this._pageBus = pageBus;
@@ -42,6 +44,9 @@ export default class ConfigApi {
       module.hot.accept(() => {
         setTimeout(render);
       });
+      module.hot.dispose(() => {
+        clearDecorators();
+      });
     }
 
     render();

src/client/preview/index.js

@@ -29,6 +29,7 @@ export const action = clientApi.action.bind(clientApi);
 export const linkTo = clientApi.linkTo.bind(clientApi);
 export const setAddon = clientApi.setAddon.bind(clientApi);
 export const addDecorator = clientApi.addDecorator.bind(clientApi);
+export const clearDecorators = clientApi.clearDecorators.bind(clientApi);
 export const configure = configApi.configure.bind(configApi);
 
 // initialize the UI