Clear decorators on module dispose

[thani-sh]

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.

[thani-sh]

Fixes #284

[arunoda]

Looks great to me.

[francoismajor]

FYI after updating to latest version of Storybook, this bug seems to have been re-introduced. I use a global wrapper and every hot reload adds one (or many) more wrappers.

For now, I've imported and added clearDecorators(); in my config.js, which solves the issue but seems this should still be implemented like it was before (haven't had this issue in the past year, using the same setup, only since v 6.0.27)

Cheers

(my file now looks like this, but without clear I get the issue.)

import { configure, addDecorator, addParameters } from '@storybook/vue';
import { withA11y } from '@storybook/addon-a11y';
import Vue from 'vue';
import Vuex from 'vuex';
import UUID from 'vue-uuid';
import i18n from '../src/plugins/i18n';
import '../src/directives/click-outside';
import {VClosePopover, VPopover, VTooltip} from 'v-tooltip'
import '@/assets/styles/global.scss';
import Toast from '@/plugins/toast';
import {clearDecorators} from "@storybook/vue/dist/client/preview";

Vue.use(UUID);
Vue.use(Vuex);
Vue.use(Toast);
Vue.directive('tooltip', VTooltip);
Vue.directive('close-popover', VClosePopover);
Vue.component('v-popover', VPopover);

addParameters({
  backgrounds: [
    { name: 'white', value: '#fff',  default: true },
    { name: 'gray', value: '#f6f7f8' },
  ],
});

const backgroundWrappers = () => ({
  data: () => ({
    wrapper: {
      margin: "0 32px 32px",
      border: "thin solid transparent",
      boxShadow: "0 6px 8px 0 rgba(37, 55, 101, 0.2)",
      borderRadius: "3px",
      padding: "32px"
    },
    light: {
      backgroundColor: "#ffffff"
    },
    grey: {
      backgroundColor: "#f6f7f8",
    },
    heading: {
      fontSize: "14px",
      margin: "0",
      padding: "16px 32px",
      color: "#253765",
      textTransform: "uppercase"
    }
  }),
  template: `
    <div>
      <div :style="heading">Sur fond blanc</div>
      <div :style="[wrapper, light]"><story/></div>
      <div :style="heading">Sur fond gris</div>
      <div :style="[wrapper, grey]"><story/></div>
    </div>
    `
});

export { backgroundWrappers };

clearDecorators();

addDecorator(backgroundWrappers);

addDecorator(withA11y);

addDecorator(() => ({
  template: '<story/>',
  i18n,
}));

// automatically import all files ending in *.stories.js
configure(require.context('../stories', true, /\.stories\.js$/), module);

I use CSF

import ChartMiniBar from '@/components/chart/ChartMiniBar';

export default {
  component: ChartMiniBar,
  title: 'Components/Chart/Chart Mini Bar',
};

export const chartMiniBar = () => ({
  components: { ChartMiniBar },
  data() {
    return {
      series: [
        {
          data: [30, 40, 45, 50, 49, 60, 70, 81, 25, 65, 13, 65],
        },
      ],
    };
  },
  template: '<ChartMiniBar :series="series" />',
});

export const chartMiniBarBlue = () => ({
  components: { ChartMiniBar },
  data() {
    return {
      series: [
        {
          data: [30, 40, 45, 50, 49, 60, 70, 81, 25, 65, 13, 65],
        },
      ],
    };
  },
  template: '<ChartMiniBar :series="series" on-blue-background />',
});

[shilman]

cc @tmeasday

[tmeasday]

What happened in 6.0.27 @shilman?

@francoismajor -- I think the issue would be solved if you used main.js to require your stories rather than the require.context() -- is there a reason you can't do that?

[francoismajor]

@tmeasday No reason, I followed some tutorial for setup and that's the way it was done ;)

I see the docs do it differently now. main.js, and preview.js for decorators. I figured something might have changed in the way to setup everything but couldn't spot what.

I'll give this a try and see if that solves it.

[tmeasday]

@francoismajor it shouldn't be necessary but I think it'll workaround the issue anyway.

Do you have an exact version where the issue started to appear? i.e. did it work in 6.0.26 but not in 6.0.27?

[francoismajor]

@tmeasday no, we went from "@storybook/vue": "^5.3.9", to "@storybook/vue": "^6.0.27", using update latest, so it could be anything in between...

[tmeasday]

Hmm, ok thanks.

[francoismajor]

Okkkk. This is the guide I didn't read when I updated 🤦 There's lots of things in there that apply to my current setup...

https://medium.com/storybookjs/storybook-6-migration-guide-200346241bb5

So, just forget I mentioned anything 😅 , I'll go through and do a proper update and I'm pretty sure everything'll be great. Thanks for the quick replies.

[tmeasday]

I guess so although I think there may still be a bug here. I guess we'll see if anyone else runs into it. Good luck!

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 6674abc. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx run-many -t build --parallel=3

---

Sent with 💌 from NxCloud.