Feature request: Turbosnap for non-webpack builders

[IanVS]

Hi, I help to maintain storybook-builder-vite, a non-webpack builder for storybook. At work, we've hit our chromatic snapshot limit, and I was looking into using turbosnap, but it requires a webpack stats file, unfortunately. I'm poking around to see if I can build a rollup plugin that can generate such a file, but even if I do, I think there are other assumptions baked into the code that the project is a webpack project (e.g. it expects a generated-stories-entry.js entrypoint, which storybook-builder-vite does not create, although we could consider doing so if necessary). We'll see how far I can get with this, but I wanted to create an issue to at least raise the request and help track any work that might be going on in this area.

Thanks!

[tmeasday]

Hey @IanVS -- definitely. We've talked about figuring out a "dependencies" file format that is independent of webpack that we can generate from each builder to support TurboSnap and other SB-native features around how components depend on each other.

[IanVS]

@ghengeveld I'm getting close to having this working with vite, but I'm a bit confused what's happening. Turbosnap is correctly determining that one story has changed, but snapshots are not actually being taken. Here are some logs:

ℹ Traced 1 changed file to 1 affected story file:

— src/components/atoms/buttons/Button.module.css [changed]
  ∟ src/components/atoms/buttons/Button.tsx
    ∟ [story index]

Retrieved story files affected by recent changes
    → Found 1 story file affected by recent changes

...

Starting partial build
    → Snapshots will be limited to 1 story files affected by recent changes
✔ TurboSnap enabled
Capturing 0 snapshots and skipping 1 snapshot.
Started build 1393
    → View build details at https://www.chromatic.com/build?appId=608c375314b897003905b363&number=1393
Running 0 tests affected by recent changes (skipping 1 test)
    → This may take a few minutes
ℹ Speed up Continuous Integration
Your project is linked to GitHub so Chromatic will report results there.
This means you can pass the --exit-once-uploaded flag to skip waiting for build results.
Read more here: https://www.chromatic.com/docs/cli#chromatic-options
✖ Found 1 visual change: Review the changes at https://www.chromatic.com/build?appId=608c375314b897003905b363&number=1393

ℹ For CI/CD use cases, this command failed with exit code 1
Pass --exit-zero-on-changes to succeed this command regardless of changes.
Pass --auto-accept-changes to succeed and automatically accept any changes.
Build 1393 completed
    → Tested 1 story across 1 component; captured 0 snapshots in 0 seconds

The snapshot that is shown in chromatic is from an old build, and not the one which was uploaded most recently. Can you think of anything that would cause chromatic not to take snapshots even though turbosnap found snapshots to take?

Here's the contents of turbosnap that is sent to chromatic in the graphql:

{
  turboSnap: {
    rootPath: '/Users/ianvs/code/defined/webclient',
    baseDir: '',
    storybookDir: '.storybook',
    staticDirs: [],
    globs: [
      '.storybook/preview.tsx',
      'src/components/atoms/buttons/Button.stories.tsx'
    ],
    modules: [
      'src/global/styles/base-styles.ts',
      'test-setup/LightAndDark.module.css',
      'src/components/atoms/buttons/button.css',
      'src/components/atoms/buttons/Button.module.css',
      'test-setup/LightAndDark.tsx',
      'src/components/atoms/buttons/Button.tsx',
      '.storybook/preview.tsx',
      'src/components/atoms/buttons/Button.stories.tsx',
      'iframe.html',
      '/virtual:/@storybook/builder-vite/vite-app.js',
      '/virtual:/@storybook/builder-vite/generated-stories-entry.js',
      '__vite-browser-external',
      'src/global/styles/layout.css'
    ],
    tracedFiles: [ 'src/components/atoms/buttons/Button.module.css' ],
    tracedPaths: Set(1) {
      'src/components/atoms/buttons/Button.module.css\n' +
        'src/components/atoms/buttons/Button.tsx'
    },
    affectedModuleIds: Set(1) { '/Users/ianvs/code/defined/webclient/src/components/atoms/buttons/Button.tsx' },
    bailReason: undefined
  }
}

Where Button.module.css is the file I changed, which is imported by Button.tsx, which is shown in Button.stories.tsx.

Is there anything else that might be helpful? I'm also available on discord if you have some time to chat there.

[ghengeveld]

Hey Ian, let's look into this together sometime. I'm not available right now but if you email me at gert @ chromatic then we can schedule a meeting.

In the meantime, you can use --diagnostics to get turbosnap metadata.

[IanVS]

Thanks! I may have figured this out, after noticing that onlyStoryFiles is being populated with a component that is not a story. If I get that sorted out and still have troubles, I'll hit you up. Thanks for the offer and for the diagnostics tip.

[IanVS]

Vite support has been released in 6.5.0.

[chinanderm]

Turbosnap is correctly determining that one story has changed, but snapshots are not actually being taken.

@IanVS Did you figure out what was causing this? I'm running into the exact same problem.