Running functions conditionally based on the story displayed.

[joscha]

I am currently trying to integrate https://github.com/mrdoob/stats.js in order to add a addMonitored method that would allow specifying a performance monitored story like this:

storiesOf('something', module)
  .addMonitored('a component with monitored performance', () => (
    <Component />
  ), () => Math.random());

I tried like this:

setAddon({
  addMonitored(storyName, storyFn, rafFn) {
    this.add(storyName, (context) => {
      const stats = new Stats();
      stats.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3+: custom
      document.getElementById('root').appendChild(stats.dom);
      function animate() {
        stats.begin();
        rafFn();
        stats.end();
        requestAnimationFrame(animate);
      }
      requestAnimationFrame(animate);
      return storyFn(context);
    });
  }
});

It kinda works:

however there are some flaws in that - the function passed to this.add gets called immediately and not only when that particular story is shown, hence the stats window is always visible. Also, the requestAnimationFrame is kicked off immediately. Potentially this could be done by wrapping storyFn(context) with a component that starts the stats on mount, but I am not sure how to achieve this. Any pointers?

[arunoda]

Yes you are correct, this.add called immediately. Here's you need to provide a React element. Inside that, render the perfTool, when the component mounted.

[arunoda]

Here's an example: https://github.com/kadirahq/react-storybook-addon-info/blob/master/src/index.js

[joscha]

Thank you for your help @arunoda - I successfully created an example here: https://gist.github.com/joscha/9e1d4eea6fddd50df25012d704180aa1

[arunoda]

Okay. We are good here right :)
Publish this into NPM and send me a PR to here - https://github.com/kadirahq/react-storybook/blob/master/docs/extensions.md#available-extensions

[ndelangen]

Did this ever make it into Storybook @joscha ?
Doesn't look like an open issue to me, if it's been open for over a year.

[joscha]

@ndelangen the linked example was sufficient, so closing it is fine! 👍