Open vanessayuenn opened 1 month ago
Disclaimer This information might be inaccurate, due to it being generated automatically To implement a Vite plugin for Next.js, follow these steps:
Create a new preset file: Create a new file similar to /code/frameworks/react-vite/src/preset.ts
.
Define core properties: Set the builder
and renderer
properties to the appropriate Vite and Next.js packages.
import { dirname, join } from 'path';
import type { PresetProperty } from 'storybook/internal/types';
const getAbsolutePath = <I extends string>(input: I): I =>
dirname(require.resolve(join(input, 'package.json'))) as any;
export const core: PresetProperty<'core'> = {
builder: getAbsolutePath('@storybook/builder-vite'),
renderer: getAbsolutePath('@storybook/nextjs'),
};
viteFinal
function.import type { StorybookConfig } from './types';
export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (config, options) => {
const { plugins = [] } = config;
// Add Next.js specific Vite plugins
plugins.push(require('@vitejs/plugin-react'));
return {
...config,
plugins,
};
};
Refer to the existing presets for React, Svelte, and Vue3 for more details.
/code/lib/cli/src/automigrate/fixes/vite-config-file.ts /code/frameworks/react-vite/src/preset.ts /code/frameworks/svelte-vite/src/preset.ts /code/frameworks/sveltekit/src/preset.ts /code/frameworks/vue3-vite/src/preset.ts /code/lib/csf-plugin/src/index.ts
RFC
https://github.com/storybookjs/storybook/discussions/28428
Milestones
Use this space to document how the project will be split up. At project kickoff, at minimum we should have all the milestones split up, and emphasize which is must-have and which is nice-to-have. As we dig in, flesh out the detailed implementational tasks in each milestone.
Nice to Have
Decision Records
Record here all the architectural decisions that we make along the way.