happo dev command not supported with some plugins

[trotzig]

Currently, none of the happo-plugin-storybook and happo-plugin-gatsby plugins work when running happo dev. The dev command mostly makes sense when you have your own -happo.js files, so it might not make sense to fix support -- we might just have to bail with some useful error message.

[monokrome]

I think the dev command seems like it'd be useful for storybook still. Aren't stories in storybook essentially analogous to -happo.js files in the end?

[trotzig]

@monokrome They definitely are. Getting happo dev to work for storybook integrations is a little more tricky though because of how the integration is set up. Basically happo delegates preparing a static package to storybook (i.e. build-storybook) and then that package is sent to happo.io for screenshots. In a regular Happo examples integration we are in control of the build process, which means we can single out -happo files and make smaller packages, which makes the dev experience better as we're getting screenshots back quicker.

I've been thinking about a slightly different dev experience for Storybook projects with happo where we would have a button in the Storybook UI to quickly check what this components look like in different browsers, and then you can incrementally make changes to the component and get diffs along the way. Do you think this would be interesting? If so, maybe we can outline/sketch out the feature here?

[trotzig]

I've had an initial look at the outlined dev experience (button in the Storybook UI) and these are some thoughts and challenges:

• In Storybook dev mode (start-storybook), there's no ready-made package we can send to happo.io. I'm not 100% sure how the dev storybook server works, but I believe it might be generating bundles on the fly -- I couldn't find the files referenced from the storybook web app in the filesystem.
• Instead of sending a package (which is what the plugin normally does) we could send html+css payloads to happo.io. But that would make it behave different from what a full CI run.
• Perhaps we could use something like ngrok to set up a tunnel to the local development server 🤔? Then we would be able to talk to the local dev server from happo.

[trotzig]

By the way, this is what I had in mind for the Storybook UI (in its simplest form):

If you hit that button, we would show one or more screenshots in that box. If you hit it again, we would compare the new screenshots with the previous ones.

There are of course other features we could consider down the road. Here are some ideas:

• Directly comparing the screenshot(s) to what's already on the main branch.
• Allowing you to edit the browser targets.