mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-08 11:11:53 +08:00
Remove Webpack Support for Svelte 5
This commit is contained in:
parent
9f0ea04a04
commit
33a0b7bfd1
@ -44,7 +44,6 @@
|
||||
# /code/frameworks/react-vite/ @valentinpalkovic @kasperpeulen
|
||||
# /code/frameworks/react-webpack5/ @valentinpalkovic @kasperpeulen
|
||||
# /code/frameworks/svelte-vite/ @kasperpeulen @JReinhold
|
||||
# /code/frameworks/svelte-webpack5/ @kasperpeulen @JReinhold
|
||||
# /code/frameworks/sveltekit/ @kasperpeulen @JReinhold
|
||||
# /code/frameworks/vue3-vite/ @kasperpeulen @yannbf @JReinhold
|
||||
# /code/frameworks/vue3-webpack5/ @kasperpeulen @yannbf @JReinhold
|
||||
|
@ -2156,7 +2156,6 @@ The current list of frameworks include:
|
||||
- `@storybook/nextjs`
|
||||
- `@storybook/server-webpack5`
|
||||
- `@storybook/svelte-vite`
|
||||
- `@storybook/svelte-webpack5`
|
||||
- `@storybook/sveltekit`
|
||||
- `@storybook/vue-vite`
|
||||
- `@storybook/vue-webpack5`
|
||||
|
@ -165,7 +165,6 @@ export const frameworkToDefaultBuilder: Record<
|
||||
'server-webpack5': CoreBuilder.Webpack5,
|
||||
solid: CoreBuilder.Vite,
|
||||
'svelte-vite': CoreBuilder.Vite,
|
||||
'svelte-webpack5': CoreBuilder.Webpack5,
|
||||
sveltekit: CoreBuilder.Vite,
|
||||
'vue3-vite': CoreBuilder.Vite,
|
||||
'vue3-webpack5': CoreBuilder.Webpack5,
|
||||
|
@ -20,7 +20,6 @@ export const frameworkToRenderer: Record<
|
||||
'server-webpack5': 'server',
|
||||
solid: 'solid',
|
||||
'svelte-vite': 'svelte',
|
||||
'svelte-webpack5': 'svelte',
|
||||
sveltekit: 'svelte',
|
||||
'vue3-vite': 'vue3',
|
||||
'vue3-webpack5': 'vue3',
|
||||
|
@ -38,7 +38,6 @@ export const frameworkPackages: Record<string, SupportedFrameworks> = {
|
||||
'@storybook/react-webpack5': 'react-webpack5',
|
||||
'@storybook/server-webpack5': 'server-webpack5',
|
||||
'@storybook/svelte-vite': 'svelte-vite',
|
||||
'@storybook/svelte-webpack5': 'svelte-webpack5',
|
||||
'@storybook/sveltekit': 'sveltekit',
|
||||
'@storybook/vue3-vite': 'vue3-vite',
|
||||
'@storybook/experimental-nextjs-vite': 'experimental-nextjs-vite',
|
||||
|
@ -53,7 +53,6 @@ export default {
|
||||
'@storybook/react-webpack5': '9.0.0-alpha.0',
|
||||
'@storybook/server-webpack5': '9.0.0-alpha.0',
|
||||
'@storybook/svelte-vite': '9.0.0-alpha.0',
|
||||
'@storybook/svelte-webpack5': '9.0.0-alpha.0',
|
||||
'@storybook/sveltekit': '9.0.0-alpha.0',
|
||||
'@storybook/vue3-vite': '9.0.0-alpha.0',
|
||||
'@storybook/vue3-webpack5': '9.0.0-alpha.0',
|
||||
|
@ -40,7 +40,6 @@ export enum Category {
|
||||
FRAMEWORK_REACT_WEBPACK5 = 'FRAMEWORK_REACT-WEBPACK5',
|
||||
FRAMEWORK_SERVER_WEBPACK5 = 'FRAMEWORK_SERVER-WEBPACK5',
|
||||
FRAMEWORK_SVELTE_VITE = 'FRAMEWORK_SVELTE-VITE',
|
||||
FRAMEWORK_SVELTE_WEBPACK5 = 'FRAMEWORK_SVELTE-WEBPACK5',
|
||||
FRAMEWORK_SVELTEKIT = 'FRAMEWORK_SVELTEKIT',
|
||||
FRAMEWORK_VUE_VITE = 'FRAMEWORK_VUE-VITE',
|
||||
FRAMEWORK_VUE_WEBPACK5 = 'FRAMEWORK_VUE-WEBPACK5',
|
||||
|
@ -13,7 +13,6 @@ export type SupportedFrameworks =
|
||||
| 'react-webpack5'
|
||||
| 'server-webpack5'
|
||||
| 'svelte-vite'
|
||||
| 'svelte-webpack5'
|
||||
| 'sveltekit'
|
||||
| 'vue3-vite'
|
||||
| 'vue3-webpack5'
|
||||
|
@ -1,3 +0,0 @@
|
||||
# Storybook for Svelte & Webpack
|
||||
|
||||
See [documentation](https://storybook.js.org/docs/get-started/frameworks/svelte-webpack5?renderer=svelte) for installation instructions, usage examples, APIs, and more.
|
@ -1,85 +0,0 @@
|
||||
{
|
||||
"name": "@storybook/svelte-webpack5",
|
||||
"version": "9.0.0-alpha.0",
|
||||
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
|
||||
"keywords": [
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/svelte-webpack5",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "code/frameworks/svelte-webpack5"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/storybook"
|
||||
},
|
||||
"license": "MIT",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"node": "./dist/index.js",
|
||||
"import": "./dist/index.mjs",
|
||||
"require": "./dist/index.js"
|
||||
},
|
||||
"./preset": {
|
||||
"types": "./dist/preset.d.ts",
|
||||
"require": "./dist/preset.js"
|
||||
},
|
||||
"./node": {
|
||||
"types": "./dist/node/index.d.ts",
|
||||
"node": "./dist/node/index.js",
|
||||
"import": "./dist/node/index.mjs",
|
||||
"require": "./dist/node/index.js"
|
||||
},
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.mjs",
|
||||
"types": "dist/index.d.ts",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts",
|
||||
"!src/**/*"
|
||||
],
|
||||
"scripts": {
|
||||
"check": "jiti ../../../scripts/prepare/check.ts",
|
||||
"prep": "jiti ../../../scripts/prepare/bundle.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/builder-webpack5": "workspace:*",
|
||||
"@storybook/preset-svelte-webpack": "workspace:*",
|
||||
"@storybook/svelte": "workspace:*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"svelte": "^5.0.5",
|
||||
"svelte-loader": "^3.2.4",
|
||||
"typescript": "^5.7.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"storybook": "workspace:^",
|
||||
"svelte": "^5.0.0",
|
||||
"svelte-loader": "*"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"bundler": {
|
||||
"entries": [
|
||||
"./src/index.ts",
|
||||
"./src/preset.ts",
|
||||
"./src/node/index.ts"
|
||||
],
|
||||
"platform": "node"
|
||||
},
|
||||
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
|
||||
}
|
@ -1 +0,0 @@
|
||||
module.exports = require('./dist/preset');
|
@ -1,8 +0,0 @@
|
||||
{
|
||||
"name": "svelte-webpack5",
|
||||
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
||||
"projectType": "library",
|
||||
"targets": {
|
||||
"build": {}
|
||||
}
|
||||
}
|
@ -1 +0,0 @@
|
||||
export * from './types';
|
@ -1,5 +0,0 @@
|
||||
import type { StorybookConfig } from '../types';
|
||||
|
||||
export function defineMain(config: StorybookConfig) {
|
||||
return config;
|
||||
}
|
@ -1,23 +0,0 @@
|
||||
import { dirname, join } from 'node: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 addons: PresetProperty<'addons'> = [
|
||||
getAbsolutePath('@storybook/preset-svelte-webpack'),
|
||||
];
|
||||
|
||||
export const core: PresetProperty<'core'> = async (config, options) => {
|
||||
const framework = await options.presets.apply('framework');
|
||||
|
||||
return {
|
||||
...config,
|
||||
builder: {
|
||||
name: getAbsolutePath('@storybook/builder-webpack5'),
|
||||
options: typeof framework === 'string' ? {} : framework.options.builder || {},
|
||||
},
|
||||
renderer: getAbsolutePath('@storybook/svelte'),
|
||||
};
|
||||
};
|
@ -1,46 +0,0 @@
|
||||
import type { CompatibleString } from 'storybook/internal/types';
|
||||
|
||||
import type {
|
||||
BuilderOptions,
|
||||
StorybookConfigWebpack,
|
||||
TypescriptOptions as TypescriptOptionsBuilder,
|
||||
} from '@storybook/builder-webpack5';
|
||||
import type {
|
||||
StorybookConfig as StorybookConfigBase,
|
||||
SvelteOptions,
|
||||
TypescriptOptions as TypescriptOptionsReact,
|
||||
} from '@storybook/preset-svelte-webpack';
|
||||
|
||||
type FrameworkName = CompatibleString<'@storybook/svelte-webpack5'>;
|
||||
type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
|
||||
|
||||
export type FrameworkOptions = SvelteOptions & {
|
||||
builder?: BuilderOptions;
|
||||
};
|
||||
|
||||
type StorybookConfigFramework = {
|
||||
framework:
|
||||
| FrameworkName
|
||||
| {
|
||||
name: FrameworkName;
|
||||
options: FrameworkOptions;
|
||||
};
|
||||
core?: StorybookConfigBase['core'] & {
|
||||
builder?:
|
||||
| BuilderName
|
||||
| {
|
||||
name: BuilderName;
|
||||
options: BuilderOptions;
|
||||
};
|
||||
};
|
||||
typescript?: Partial<TypescriptOptionsBuilder & TypescriptOptionsReact> &
|
||||
StorybookConfigBase['typescript'];
|
||||
};
|
||||
|
||||
/** The interface for Storybook configuration in `main.ts` files. */
|
||||
export type StorybookConfig = Omit<
|
||||
StorybookConfigBase,
|
||||
keyof StorybookConfigWebpack | keyof StorybookConfigFramework
|
||||
> &
|
||||
StorybookConfigWebpack &
|
||||
StorybookConfigFramework;
|
@ -1,2 +0,0 @@
|
||||
declare module '@storybook/svelte/internal/SlotDecorator.svelte';
|
||||
declare module '@storybook/svelte/internal/PreviewRender.svelte';
|
@ -1,7 +0,0 @@
|
||||
<script>
|
||||
export let storyFn;
|
||||
|
||||
let { Component: component, props } = storyFn();
|
||||
</script>
|
||||
|
||||
<svelte:component this={component} {...props}/>
|
@ -1,31 +0,0 @@
|
||||
<script>
|
||||
import SlotDecorator from './SlotDecorator.svelte';
|
||||
import { dedent } from 'ts-dedent';
|
||||
|
||||
const { name, kind, storyFn, showError } = $props();
|
||||
|
||||
const {
|
||||
/** @type {SvelteComponent} */
|
||||
Component,
|
||||
/** @type {any} */
|
||||
props: componentProps = {},
|
||||
Wrapper,
|
||||
WrapperData = {},
|
||||
} = storyFn();
|
||||
|
||||
if (!Component) {
|
||||
showError({
|
||||
title: `Expecting a Svelte component from the story: "${name}" of "${kind}".`,
|
||||
description: dedent`
|
||||
Did you forget to return the Svelte component configuration from the story?
|
||||
Use "() => ({ Component: YourComponent, data: {} })"
|
||||
when defining the story.
|
||||
`,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<SlotDecorator
|
||||
decorator={Wrapper}
|
||||
decoratorProps={WrapperData}
|
||||
component={Component}
|
||||
props={componentProps} />
|
@ -1,15 +0,0 @@
|
||||
<script>
|
||||
export let decorator;
|
||||
export let decoratorProps = {};
|
||||
export let component;
|
||||
export let props = {};
|
||||
let instance;
|
||||
let decoratorInstance;
|
||||
</script>
|
||||
{#if decorator}
|
||||
<svelte:component this={decorator} {...decoratorProps} bind:this={decoratorInstance}>
|
||||
<svelte:component this={component} {...props} bind:this={instance}/>
|
||||
</svelte:component>
|
||||
{:else}
|
||||
<svelte:component this={component} {...props} bind:this={instance}/>
|
||||
{/if}
|
@ -1,5 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {},
|
||||
"include": ["src/**/*"]
|
||||
}
|
@ -1,10 +0,0 @@
|
||||
import { defineConfig, mergeConfig } from 'vitest/config';
|
||||
|
||||
import { vitestCommonConfig } from '../../vitest.workspace';
|
||||
|
||||
export default mergeConfig(
|
||||
vitestCommonConfig,
|
||||
defineConfig({
|
||||
// Add custom config here
|
||||
})
|
||||
);
|
@ -685,31 +685,5 @@ describe('new-frameworks fix', () => {
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
it('should migrate to @storybook/svelte-webpack5 in SvelteKit project that uses Webpack5 builder', async () => {
|
||||
const packageManager = getPackageManager({
|
||||
'@storybook/svelte': '7.0.0-alpha.0',
|
||||
'@storybook/builder-webpack5': '7.0.0-alpha.0',
|
||||
'@sveltejs/kit': '1.0.0',
|
||||
});
|
||||
|
||||
await expect(
|
||||
checkNewFrameworks({
|
||||
packageManager,
|
||||
main: {
|
||||
core: {
|
||||
builder: '@storybook/builder-webpack5',
|
||||
},
|
||||
},
|
||||
})
|
||||
).resolves.toEqual(
|
||||
expect.objectContaining({
|
||||
addonsToRemove: [],
|
||||
dependenciesToAdd: ['@storybook/svelte-webpack5'],
|
||||
dependenciesToRemove: ['@storybook/builder-webpack5'],
|
||||
frameworkPackage: '@storybook/svelte-webpack5',
|
||||
})
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@ -378,39 +378,19 @@ export const newFrameworks: Fix<NewFrameworkRunOptions> = {
|
||||
}
|
||||
|
||||
if (metaFramework === 'sveltekit') {
|
||||
if (frameworkPackage === '@storybook/svelte-webpack5') {
|
||||
disclaimer = dedent`\n\n
|
||||
${picocolors.bold(
|
||||
'Important'
|
||||
)}: We've detected you are using Storybook in a SvelteKit project.
|
||||
|
||||
This migration is set to update your project to use the ${picocolors.magenta(
|
||||
'@storybook/svelte-webpack5'
|
||||
)} framework, but Storybook provides a framework package specifically for SvelteKit projects: ${picocolors.magenta(
|
||||
'@storybook/sveltekit'
|
||||
)}.
|
||||
|
||||
This package provides a better experience for SvelteKit users, however it is only compatible with the Vite builder, so we can't automigrate for you, as you are using the Webpack builder.
|
||||
|
||||
If you are interested in using this package, see: ${picocolors.yellow(
|
||||
'https://github.com/storybookjs/storybook/blob/next/code/frameworks/sveltekit/README.md'
|
||||
)}
|
||||
`;
|
||||
} else {
|
||||
migrationSteps += `- Remove the ${picocolors.yellow(
|
||||
`${renderer}Options`
|
||||
)} field from ${picocolors.blue(mainConfigPath)}.
|
||||
migrationSteps += `- Remove the ${picocolors.yellow(
|
||||
`${renderer}Options`
|
||||
)} field from ${picocolors.blue(mainConfigPath)}.
|
||||
More info: ${picocolors.yellow(
|
||||
'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#vite-builder-uses-vite-config-automatically'
|
||||
)}\n`;
|
||||
disclaimer = dedent`\n\n
|
||||
disclaimer = dedent`\n\n
|
||||
The ${picocolors.magenta(
|
||||
'@storybook/sveltekit'
|
||||
)} package provides great user experience for SvelteKit users, and we highly recommend you to read more about it at ${picocolors.yellow(
|
||||
'https://github.com/storybookjs/storybook/blob/next/code/frameworks/sveltekit/README.md'
|
||||
)}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
return dedent`
|
||||
|
@ -31,7 +31,6 @@ export const packagesMap: Record<string, { webpack5?: string; vite?: string }> =
|
||||
vite: '@storybook/vue3-vite',
|
||||
},
|
||||
'@storybook/svelte': {
|
||||
webpack5: '@storybook/svelte-webpack5',
|
||||
vite: '@storybook/svelte-vite',
|
||||
},
|
||||
'@storybook/web-components': {
|
||||
|
@ -19,7 +19,6 @@ export const supportedFrameworks = [
|
||||
'server-webpack5',
|
||||
'solid',
|
||||
'svelte-vite',
|
||||
'svelte-webpack5',
|
||||
'sveltekit',
|
||||
'vue3-rsbuild',
|
||||
'vue3-vite',
|
||||
@ -40,7 +39,6 @@ export const supportedFrameworksPackages = {
|
||||
'react-webpack5': '@storybook/react-webpack5',
|
||||
'server-webpack5': '@storybook/server-webpack5',
|
||||
'svelte-vite': '@storybook/svelte-vite',
|
||||
'svelte-webpack5': '@storybook/svelte-webpack5',
|
||||
'vue3-rsbuild': 'storybook-vue3-rsbuild',
|
||||
'vue3-vite': '@storybook/vue3-vite',
|
||||
'vue3-webpack5': '@storybook/vue3-webpack5',
|
||||
@ -70,7 +68,6 @@ export const supportedFrameworksNames = {
|
||||
'react-webpack5': 'React with Webpack 5',
|
||||
'server-webpack5': 'Server with Webpack 5',
|
||||
'svelte-vite': 'Svelte with Vite',
|
||||
'svelte-webpack5': 'Svelte with Webpack 5',
|
||||
'vue3-rsbuild': 'Vue 3 with Rsbuild',
|
||||
'vue3-vite': 'Vue 3 with Vite',
|
||||
'vue3-webpack5': 'Vue 3 with Webpack 5',
|
||||
|
@ -154,7 +154,6 @@
|
||||
"@storybook/server-webpack5": "workspace:*",
|
||||
"@storybook/source-loader": "workspace:*",
|
||||
"@storybook/svelte": "workspace:*",
|
||||
"@storybook/svelte-webpack5": "workspace:*",
|
||||
"@storybook/test": "workspace:*",
|
||||
"@storybook/testing-library": "next",
|
||||
"@storybook/theming": "workspace:*",
|
||||
|
@ -7474,7 +7474,6 @@ __metadata:
|
||||
"@storybook/server-webpack5": "workspace:*"
|
||||
"@storybook/source-loader": "workspace:*"
|
||||
"@storybook/svelte": "workspace:*"
|
||||
"@storybook/svelte-webpack5": "workspace:*"
|
||||
"@storybook/test": "workspace:*"
|
||||
"@storybook/testing-library": "npm:next"
|
||||
"@storybook/theming": "workspace:*"
|
||||
@ -7646,23 +7645,6 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@storybook/svelte-webpack5@workspace:*, @storybook/svelte-webpack5@workspace:frameworks/svelte-webpack5":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@storybook/svelte-webpack5@workspace:frameworks/svelte-webpack5"
|
||||
dependencies:
|
||||
"@storybook/builder-webpack5": "workspace:*"
|
||||
"@storybook/preset-svelte-webpack": "workspace:*"
|
||||
"@storybook/svelte": "workspace:*"
|
||||
svelte: "npm:^5.0.5"
|
||||
svelte-loader: "npm:^3.2.4"
|
||||
typescript: "npm:^5.7.3"
|
||||
peerDependencies:
|
||||
storybook: "workspace:^"
|
||||
svelte: ^5.0.0
|
||||
svelte-loader: "*"
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@storybook/svelte@workspace:*, @storybook/svelte@workspace:renderers/svelte":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@storybook/svelte@workspace:renderers/svelte"
|
||||
|
@ -1,27 +0,0 @@
|
||||
```js filename=".storybook/main.js" renderer="svelte" language="js"
|
||||
export default {
|
||||
// ...
|
||||
framework: {
|
||||
name: '@storybook/svelte-webpack5',
|
||||
options: {
|
||||
// ...
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
```ts filename=".storybook/main.ts" renderer="svelte" language="ts"
|
||||
import { StorybookConfig } from '@storybook/svelte-webpack5';
|
||||
|
||||
const config: StorybookConfig = {
|
||||
// ...
|
||||
framework: {
|
||||
name: '@storybook/svelte-webpack5',
|
||||
options: {
|
||||
// ...
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
```
|
@ -1,17 +0,0 @@
|
||||
```js filename=".storybook/main.js" renderer="svelte" language="js"
|
||||
export default {
|
||||
// ...
|
||||
framework: '@storybook/svelte-webpack5', // 👈 Add this
|
||||
};
|
||||
```
|
||||
|
||||
```ts filename=".storybook/main.ts" renderer="svelte" language="ts"
|
||||
import { StorybookConfig } from '@storybook/svelte-webpack5';
|
||||
|
||||
const config: StorybookConfig = {
|
||||
// ...
|
||||
framework: '@storybook/svelte-webpack5', // 👈 Add this
|
||||
};
|
||||
|
||||
export default config;
|
||||
```
|
@ -1,11 +0,0 @@
|
||||
```shell renderer="svelte" language="js" packageManager="npm"
|
||||
npm install --save-dev @storybook/svelte-webpack5
|
||||
```
|
||||
|
||||
```shell renderer="svelte" language="js" packageManager="pnpm"
|
||||
pnpm add --save-dev @storybook/svelte-webpack5
|
||||
```
|
||||
|
||||
```shell renderer="svelte" language="js" packageManager="yarn"
|
||||
yarn add --dev @storybook/svelte-webpack5
|
||||
```
|
@ -1,105 +0,0 @@
|
||||
---
|
||||
title: Storybook for Svelte & Webpack
|
||||
hideRendererSelector: true
|
||||
sidebar:
|
||||
order: 9
|
||||
title: Svelte & Webpack
|
||||
---
|
||||
|
||||
Storybook for Svelte & Webpack is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for applications using [Svelte](https://svelte.dev/) built with [Webpack](https://webpack.js.org/).
|
||||
|
||||
## Requirements
|
||||
|
||||
* Svelte ≥ 4.0
|
||||
* Webpack ≥ 5.0
|
||||
* Storybook ≥ 8.0
|
||||
|
||||
## Getting started
|
||||
|
||||
### In a project without Storybook
|
||||
|
||||
Follow the prompts after running this command in your Svelte project's root directory:
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
<CodeSnippets path="create-command.md" />
|
||||
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
[More on getting started with Storybook.](../install.mdx)
|
||||
|
||||
### In a project with Storybook
|
||||
|
||||
This framework is designed to work with Storybook 7+. If you’re not already using v7, upgrade with this command:
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
<CodeSnippets path="storybook-upgrade.md" />
|
||||
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
#### Automatic migration
|
||||
|
||||
When running the `upgrade` command above, you should get a prompt asking you to migrate to `@storybook/svelte-webpack5`, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below.
|
||||
|
||||
#### Manual migration
|
||||
|
||||
First, install the framework:
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
<CodeSnippets path="svelte-webpack5-install.md" />
|
||||
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
Next, install and register your appropriate compiler addon, depending on whether you're using SWC (recommended) or Babel:
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
<CodeSnippets path="storybook-addon-compiler-swc-auto-install.md" />
|
||||
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
or
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
<CodeSnippets path="storybook-addon-compiler-babel-auto-install.md" />
|
||||
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
More details can be found in the [Webpack builder docs](../../builders/webpack.mdx#compiler-support).
|
||||
|
||||
Finally, update your `.storybook/main.js|ts` to change the framework property:
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
<CodeSnippets path="svelte-webpack5-add-framework.md" />
|
||||
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
## API
|
||||
|
||||
### Options
|
||||
|
||||
You can pass an options object for additional configuration if needed:
|
||||
|
||||
{/* prettier-ignore-start */ }
|
||||
|
||||
<CodeSnippets path="svelte-webpack-framework-options.md" />
|
||||
|
||||
{/* prettier-ignore-end */}
|
||||
|
||||
The available options are:
|
||||
|
||||
#### `builder`
|
||||
|
||||
Type: `Record<string, any>`
|
||||
|
||||
Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For this framework, available options can be found in the [Webpack builder docs](../../builders/webpack.mdx).
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Svelte CSF addon compatibility
|
||||
|
||||
In version 5 of the Svelte CSF [addon](https://storybook.js.org/addons/@storybook/addon-svelte-csf), support for Webpack was removed to align with Svelte's ecosystem. If you're using this framework and you want to write stories using Svelte's native templating syntax with the Svelte CSF addon, we encourage you to downgrade to version 4 of the addon.
|
@ -67,7 +67,6 @@ Then, update your `.storybook/main.js|ts` to change the framework property:
|
||||
Finally, these packages are now either obsolete or part of `@storybook/sveltekit`, so you no longer need to depend on them directly. You can remove them (`npm uninstall`, `yarn remove`, `pnpm remove`) from your project:
|
||||
|
||||
* `@storybook/svelte-vite`
|
||||
* `@storybook/svelte-webpack5`
|
||||
* `storybook-builder-vite`
|
||||
* `@storybook/builder-vite`
|
||||
|
||||
|
@ -252,7 +252,6 @@ There are some noteworthy items here:
|
||||
<IfRenderer renderer="svelte">
|
||||
* Storybook's SvelteKit [framework documentation](./frameworks/sveltekit.mdx) for more information on how to set up Storybook in your SvelteKit project.
|
||||
* Storybook's Svelte Vite [framework documentation](./frameworks/svelte-vite.mdx) for more information on how to set up Storybook in your Svelte project with Vite.
|
||||
* Storybook's Svelte Webpack [framework documentation](./frameworks/svelte-webpack5.mdx) for more information on how to set up Storybook in your Svelte project with Webpack 5.
|
||||
* [Storybook's help documentation](https://storybook.js.org/community#support) to contact the community and ask for help.
|
||||
</IfRenderer>
|
||||
|
||||
|
@ -65,7 +65,6 @@
|
||||
"@storybook/source-loader": "file:../../code/lib/source-loader",
|
||||
"@storybook/svelte": "file:../../code/renderers/svelte",
|
||||
"@storybook/svelte-vite": "file:../../code/frameworks/svelte-vite",
|
||||
"@storybook/svelte-webpack5": "file:../../code/frameworks/svelte-webpack5",
|
||||
"@storybook/sveltekit": "file:../../code/frameworks/sveltekit",
|
||||
"@storybook/test": "file:../../code/lib/test",
|
||||
"@storybook/theming": "file:../../code/deprecated/theming",
|
||||
|
@ -65,7 +65,6 @@
|
||||
"@storybook/source-loader": "file:../../code/lib/source-loader",
|
||||
"@storybook/svelte": "file:../../code/renderers/svelte",
|
||||
"@storybook/svelte-vite": "file:../../code/frameworks/svelte-vite",
|
||||
"@storybook/svelte-webpack5": "file:../../code/frameworks/svelte-webpack5",
|
||||
"@storybook/sveltekit": "file:../../code/frameworks/sveltekit",
|
||||
"@storybook/test": "file:../../code/lib/test",
|
||||
"@storybook/theming": "file:../../code/deprecated/theming",
|
||||
|
@ -66,7 +66,6 @@
|
||||
"@storybook/source-loader": "file:../../../code/lib/source-loader",
|
||||
"@storybook/svelte": "file:../../../code/renderers/svelte",
|
||||
"@storybook/svelte-vite": "file:../../../code/frameworks/svelte-vite",
|
||||
"@storybook/svelte-webpack5": "file:../../../code/frameworks/svelte-webpack5",
|
||||
"@storybook/sveltekit": "file:../../../code/frameworks/sveltekit",
|
||||
"@storybook/test": "file:../../../code/lib/test",
|
||||
"@storybook/theming": "file:../../../code/deprecated/theming",
|
||||
|
@ -70,7 +70,6 @@
|
||||
"@storybook/source-loader": "file:../../../code/lib/source-loader",
|
||||
"@storybook/svelte": "file:../../../code/renderers/svelte",
|
||||
"@storybook/svelte-vite": "file:../../../code/frameworks/svelte-vite",
|
||||
"@storybook/svelte-webpack5": "file:../../../code/frameworks/svelte-webpack5",
|
||||
"@storybook/sveltekit": "file:../../../code/frameworks/sveltekit",
|
||||
"@storybook/test": "file:../../../code/lib/test",
|
||||
"@storybook/theming": "file:../../../code/deprecated/theming",
|
||||
|
@ -67,7 +67,6 @@
|
||||
"@storybook/source-loader": "portal:../../../code/lib/source-loader",
|
||||
"@storybook/svelte": "portal:../../../code/renderers/svelte",
|
||||
"@storybook/svelte-vite": "portal:../../../code/frameworks/svelte-vite",
|
||||
"@storybook/svelte-webpack5": "portal:../../../code/frameworks/svelte-webpack5",
|
||||
"@storybook/sveltekit": "portal:../../../code/frameworks/sveltekit",
|
||||
"@storybook/test": "portal:../../../code/lib/test",
|
||||
"@storybook/theming": "file:../../../code/deprecated/theming",
|
||||
|
@ -68,7 +68,6 @@
|
||||
"@storybook/source-loader": "file:../../../code/lib/source-loader",
|
||||
"@storybook/svelte": "file:../../../code/renderers/svelte",
|
||||
"@storybook/svelte-vite": "file:../../../code/frameworks/svelte-vite",
|
||||
"@storybook/svelte-webpack5": "file:../../../code/frameworks/svelte-webpack5",
|
||||
"@storybook/sveltekit": "file:../../../code/frameworks/sveltekit",
|
||||
"@storybook/test": "file:../../../code/lib/test",
|
||||
"@storybook/theming": "file:../../../code/deprecated/theming",
|
||||
|
@ -68,7 +68,6 @@
|
||||
"@storybook/source-loader": "file:../../code/lib/source-loader",
|
||||
"@storybook/svelte": "file:../../code/renderers/svelte",
|
||||
"@storybook/svelte-vite": "file:../../code/frameworks/svelte-vite",
|
||||
"@storybook/svelte-webpack5": "file:../../code/frameworks/svelte-webpack5",
|
||||
"@storybook/sveltekit": "file:../../code/frameworks/sveltekit",
|
||||
"@storybook/test": "file:../../code/lib/test",
|
||||
"@storybook/theming": "file:../../code/deprecated/theming",
|
||||
|
@ -61,7 +61,6 @@
|
||||
"@storybook/source-loader": "file:../../code/lib/source-loader",
|
||||
"@storybook/svelte": "file:../../code/renderers/svelte",
|
||||
"@storybook/svelte-vite": "file:../../code/frameworks/svelte-vite",
|
||||
"@storybook/svelte-webpack5": "file:../../code/frameworks/svelte-webpack5",
|
||||
"@storybook/sveltekit": "file:../../code/frameworks/sveltekit",
|
||||
"@storybook/test": "file:../../code/lib/test",
|
||||
"@storybook/theming": "file:../../../code/deprecated/theming",
|
||||
|
Loading…
x
Reference in New Issue
Block a user