[Enhancement] Configure Webpack to include stubs instead of composers

[a-magdy]

Hi,

We are working on a project with Meteor and React, and we are using React Storybook for react components, and so far it is amazing.

But we have this issue, where in containers, we might need dependencies that cannot be available in react storybook, like Meteor (if we are calling a Meteor method).

We tried to come up with a solution using react-komposer's setComposerStub, but it attaches a stub to the original container, demanding its dependencies to be loaded in first place. Therefore, setComposerStub is not helping us at leaving Meteor's dependencies out of Storybook.

We thought about the problem and we came up with an idea that could be more effective than calling setComposerStub. What if we could create files with a .stub suffix that would be loaded only in storybook, replacing the original file? This way no dependencies from the original composer would need to be loaded.

Do you think it is possible, and would that be a good approach ?

[arunoda]

I hope setComposerStub should work properly. You need to call following in your storybook config file:

import { setStubbingMode } from 'react-komposer';
setStubbingMode(true);

Also make sure to not to write any Meteor specific imports in the composer file.
You can use Mantra or inject Meteor related deps.

---

You can also use React Stubber. Which is the same thing.

What you said is doable with a custom webpack config. But I think there are some easy ways to do it.

[a-magdy]

Thanks Arunoda,

We couldn't avoid importing Meteor specifics in the composer file.
And actually we went with "react-simple-di" solution for a while, but it takes a lot of time and effort.

We went with customising webpack config, and we came up with this solution: react-stubs, it would be great if you could take a look at it, and give us your thoughts.

[arunoda]

@a-magdy This is too application specific and we can't land this on storybook by default.
But you could do this by writing a custom webpack config or edit our default config.
Check docs: https://getstorybook.io/docs/configurations/custom-webpack-config

[a-magdy]

@arunoda We went with customizing webpack config, and it worked.
Thank you :)