Does Creevey support the storiesOf syntax?

[bryanrideshark]

I've been trying to get this to work on our project (Storybook 6.3, Angular) and while I can run the Creevey UI, no stories are appearing.

Does Creevey work on storybook files which are defined using storiesOf, as opposed to the export default export const syntax?

We have developed our own DSL to simplify the definition of stories, and it uses storiesOf under the hood.

[wKich]

Hi. Creevey supports storiesOf API. But if it doesn't work, I think the issue in a your DSL, and Creevey doesn't understand it. Creevey transforms source code to be able load it into node js and grab stories meta from storybook api.

I'm going to implement another approach, where Creevey doesn't need to transform source files. I hope, I can make PoC in August.

[bryanrideshark]

That's good to know. As of now, I think we won't be able to use the tool, as it seems to be pretty finackey. I attempted to use it with our stories which use "out of the box" @storybook/angular, and it refused to build.

Even this simple example did not build:

import { storiesOf } from '@storybook/angular';

storiesOf('Some thing', module).add('The Story', () => {
  return {
    template: '<div>Hello world!</div>'
  };
});

We are using Angular 12 and Storybook 6.3.

If you're able to make a release which doesn't depend on building the story files, but can instead interact with Storybook independently of the source files, that would be terrific! Hot reloads (automatically removing / adding stories as you are using the tool) isn't as important as the ability to catch visual regressions.

You've done fantastic work - If there's any way a newb can help, let me know.

[bryanrideshark]

Error output from that very simple example:

[Creevey:3024] INFO => Starting Master Process
Unexpected error while loading D:\rideshark-front-end\rs-frontend\movies\carpool-2.0\cancel-passenger-reservation.movie.ts: ReferenceError: Zone is not defined       
Unexpected error while loading D:\rideshark-front-end\rs-frontend\movies\carpool-2.0\share-first-carpool.movie.ts: ReferenceError: Zone is not defined
Unexpected error while loading D:\rideshark-front-end\rs-frontend\movies\carpool-2.0\share-first-carpool.movie.ts: ReferenceError: Zone is not defined
[Creevey:26024] INFO => Starting Worker for chrome

[wKich]

@bryanrideshark, oh looks like my latest stories transformation doesn't work in angular, I'll take a look. Thanks for the report.

And if you are using webpack to build storybook, you can define 'useWebpackToExtractTests' flag in creevey config. It switch to fallback mode for extracting stories meta.