Storybook 3.3 support

[joscha]

Storybook 3.3 was released over the holidays (see https://medium.com/storybookjs/announcing-storybook-3-3-9972c4bc87ac).

It seems as if percy-storybook has a few problems dealing with it. I haven't dug into it in detail, but it seems as if some regex or else is matching a but too much, e.g. the error looks like this:

$ percy-storybook --build_dir=`pwd`/target/storybook --rtl
--
  | Error:  { Error: ENAMETOOLONG: name too long, open '/var/lib/web/target/storybook/static/a5749e56cdf59d53b59ac39ef3aca1fd74c9d384.js"></script><script type="text/javascript" src="static/ddc047c4b3c87e61f5efc8f72dc115faf0962981.js"></script><script type="text/javascript" src="static/7cf257be7700c804818d9250c775ff118f55d07c.js"></script><script type="text/javascript" src="static/f5c2f909e8b148cfa9e903ce06c844d6c5506c02.js"></script><script type="text/javascript" src="static/d3bccc904713e0edfb330c94f3e9be8d14df8f90.js"></script><script type="text/javascript" src="static/2109d3737ebe63ba3f6eb6603c124c1db55a9d29.js"></script><script type="text/javascript" src="static/6b036a201776c589843993ca8f2d8e89992bb2c9.js"></script><script type="text/javascript" src="static/ea694fe8e9114af3e2e93924e9dd04f4fab8f06c.js"></script><script type="text/javascript" src="static/e64674b9558dd7949d18fc992220a33e893a7808.js"></script><script type="text/javascript" src="static/b7999ad60deeba88907c2b0a3335fc4338c892fb.js"></script><script type="text/javascript" src="static/851d64bb0fc6eb74c1aa95abd3d4c7ef5a414a20.js"></script><script type="text/javascript" src="static/fd41ea6560a6dcf4113c747d16f578619492a53c.js"></script><script type="text/javascript"
[...]

where [...] are all additional JS resources.

I will try to reproduce the issue in this repo and open a PR if I can.

[joscha]

seems to be this guy: https://github.com/percy/percy-storybook/blob/dffc03efa773cdd5af726fc072fea1cdcfb85826/packages/percy-storybook/src/getStaticAssets.js#L76-L79

[joscha]

~assets are now under static/$SHA.js instead of the preview part~ (edit: that was incorrect, the preview is still there, just the order different, see below) - what is the reason we read them from iframe.html instead of using the output dir as the truth @timhaines ?

[timhaines]

Hi @joscha. Thanks for mentioning this.

I've just tried updating our integration tests to 3.3.3 this morning, and still get a file called preview.144ff5a30b19d92931f3.bundle.js. Could you send me a gist (privately if you prefer) of your iframe.html please?

I think something in your config may be cause the $SHA.js file name variation. Do you know what that may be?

I'm on vacation on Friday, so may be a bit slow to respond.

[joscha]

Dug a bit more. The difference is the order. Pre 3.3. orders preview.$SHA.bundle.js and then the other chunks. Post 3.3. orders other chunks, then preview.$SHA.bundle.js, meaning that the regex needs to match non-greedy from the end and it will work.

[joscha]

gist is here: https://gist.github.com/joscha/9b1b9a716d46dc5509d586c962a97b85 (also note the missing newlines are part of the change, scroll to the very end to see the preview bundle)

[timhaines]

Thanks @joscha - we'll get a fix out for this in the next few hours.

[fotinakis]

Should do it: <script [^>]*src\s*=\s*["']([^"']*static\/preview[^"']*)["'][^>]*>

[fotinakis]

Have checked that regex against your gist @joscha, both pre and post 3.3, and it should work. Going to push a PR now.

[timhaines]

@joscha I've published v1.3.2 with a fix for this. Thanks for triaging what was going on!