How to completely remove anything related to Storybook in release builds?

[svbutko]

Hello, I'm using Storybook in my applications and it does its job well for what I'm really thankful!

My question is though, is there any way to complete get rid of anything related to Storybook in release/production builds?
I mean is there any already existing build in ways to do it?

What I mean:

At the start we have to configure Storybook and feed it stories like so:

import {configure} from "@storybook/react-native";
import "./storybook.config";

configure(() => {
  require("./storybook/stories.ts");
}, module);

And I can't simply use conditional imports without adding a babel plugin to do so.

Also in addition to configuration I have stories which are getting bundled too.

Is it getting handled under the hood or not?
How do you take care of this case?

[dannyhw]

Using require inline is away of doing conditional imports that already works without babel. It would be best to do some testing but if you do the require in line after some condition it should be possible.

If(__DEV__) {
   const {configure} = require("@storybook/react-native");
   require("./storybook.config");
   configure(() => {
     require("./storybook/stories.ts");
   }, module);
}

Something like this could probably work. This is because requires aren't hoisted in the same way as imports (as far as I know)

[svbutko]

Came up with it a couple of hours ago too, it works.

There's still an issue with stories though and so far I'm thinking about getting rid of them using metro or babel.

[svbutko]

But there's no way to handle this using Storybook itself?
I mean wasn't this an issue before?

I understand that bundle size not increasing drastically but still.

[dannyhw]

But there's no way to handle this using Storybook itself?
I mean wasn't this an issue before?

I understand that bundle size not increasing drastically but still.

Well for me personally I have the storybook as a separate package in a mono repo so it's not actually part of my bundle, only the components are imported.

I believe that you should be able to resolve this just by using inline requires, the reason that this isn't "handled by storybook" is that with react native storybook we just provide a component and you can use it how you want. This is different to the web where its a bit like a separate runtime on it's own (it has its own webpack and babel config).

You could also achieve this by having two app entry points which are determined by 2 different metro config files then in the yarn start command you can pass a parameter to determine which metro config is used and therefore changing what the app loads. I haven't experimented with this much but I do believe it's possible.

[svbutko]

I'll try to do it, thank you!