Storybook: General enhancement: Make more Meteor-friendly

[ffxsam]

Just leaving this here for anyone who knows webpack and has the time..

Out of the box, Storybook is not very Meteor-friendly, for a handful of reasons:

• No support for absolute/root path imports (import X from '/root/folder/X')
• No support for ES2015 stage 2 (which includes object spread operator for objects)
• Errors out when importing a React component that imports a Meteor package

I would do a PR myself, but I don't have any webpack experience, and I don't currently have the time/knowledge to fix this. If that changes, I'll come back to this and see what I can do, though!

[gsabran]

+1

[zvictor]

I think the two first points you can cover just by having a .babelrc next to the config file. You are right, it is not out of the box support, but would it be something we want?

It seems that what we are missing are guides for different setups, or pre made presets, so in the future we are not stuck to a specific technology like Meteor or whatever else.

The third point is indeed a big problem for Meteor support. Any ideas on how to cover that?

[ffxsam]

You are right, it is not out of the box support, but would it be something we want?

I don't see why it wouldn't hurt. If I built a new tool and were to advertise it to the Meteor community in some capacity, I'd at least make sure that there was an easy step-by-step guide to get it to work with Meteor.

[arunoda]

Thanks for making this. I know it's kind a pain. I think this is almost fixed and we need some find tunes and so and guides. (May be an extended project).

Root Import

We could use this or fix it if needed.

Stage 2 Support

Latest version of storybook comes with stage-0. So we are all covered.

Meteor Imports Webpack Plugin

See: https://github.com/luisherranz/meteor-imports-webpack-plugin
This is a great gem from @luisherranz. I didn't try this but I assume we could use this with a custom webpack config file.
This is simply solves, meteor import issue.

Container Mocking

We also need to mock the container functionality to overcome data related issues. For that, react-komposer has this. We may need to do something similar for meteor's container tools.

@ffxsam It would be great if you can work on this area by testing these and making a step by step guide and a sample repo if needed.

[alexofob]

@arunoda. I tried the Meteor Imports Webpack Plugin to fix the issue of meteor imports in storybook. It doesn't work.

I get the below error when I run storybook:

_... node_modules/meteor-imports-webpack-plugin/index.js:45
throw Error('Run Meteor at least once.'_

Also when I run meteor I get the below error:

_Unable to resolve some modules:

"meteor-imports" in
..._

So we may need to explore another way to solve this issue.

Thanks.

[arunoda]

I'm moving this thread to here since we are focusing the effort on here: https://github.com/kadirahq/getstorybook/issues/1

[zvictor]

@arunoda in a comment you suggest using Meteor Imports Webpack Plugin. However, it requires to change the _client entry point_, which belongs to storybook and I don't see how it could be modified.

Would it be possible to modify storybook's entry point anyhow to include meteor-imports?

[zvictor]

@alexofob this is an issue of the plugin itself, not the storybook. You have to set meteorFolder properly in order for it to find meteor. If you need help, I recommend posting at the plugin's page.

[arunoda]

@zvictor check our full control mode: https://getstorybook.io/docs/configurations/custom-webpack-config#full-control-mode

[abecks]

@ffxam Were you ever able to find a way to use Meteor's absolute/root import paths with Storybook? I've tried both the webpack config override and .babelrc with zero luck.