@percy/bundler-plugin-smartsnap

Vite/Rollup and Webpack plugins that emit an enriched-stats.json file alongside your build.

What it is: a snapshot of your codebase's dependencies — which files and packages each of your source files uses, and what each file exports.

Why use it: the file is designed to be consumed downstream to build a code graph of your codebase, so you can analyze where each dependency is used, trace import/export relationships, and reason about your code at the project level.

Install

npm install --save-dev @percy/bundler-plugin-smartsnap

The package has no runtime dependencies. rollup, vite, and webpack are optional peer dependencies — install whichever one your project uses.

Storybook integration

Vite (@storybook/*-vite)

Add vitePlugin() to the Vite plugin list inside viteFinal:

// .storybook/main.ts
import type { StorybookConfig } from '@storybook/react-vite';
import { vitePlugin } from '@percy/bundler-plugin-smartsnap';

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  framework: { name: '@storybook/react-vite', options: {} },
  viteFinal: async (config) => {
    config.plugins = [...(config.plugins ?? []), vitePlugin()];
    return config;
  },
};

export default config;

Webpack (@storybook/builder-webpack5)

Push webpackPlugin() onto config.plugins inside webpackFinal:

// .storybook/main.ts
import { webpackPlugin } from '@percy/bundler-plugin-smartsnap';

module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  framework: '@storybook/react',
  core: { builder: '@storybook/builder-webpack5' },
  webpackFinal: async (config: any) => {
    config.plugins.push(webpackPlugin());
    return config;
  },
};

Options

Both plugins accept the same shape:

vitePlugin({ outFile: 'enriched-stats.json' });
webpackPlugin({ outFile: 'enriched-stats.json' });

• outFile (optional, default 'enriched-stats.json') — filename of the emitted asset, relative to the bundle output directory.