Merge pull request #26358 from storybookjs/framework-doc-svelte-vite

Docs: Add `svelte-vite` framework doc

code/frameworks/svelte-vite/README.md

@@ -1 +1,3 @@
-# Storybook for Svelte
+# Storybook for Svelte & Vite
+
+See [documentation](https://storybook.js.org/docs/8.0/get-started/svelte-vite?renderer=svelte) for installation instructions, usage examples, APIs, and more.

docs/get-started/svelte-vite.md

@@ -0,0 +1,153 @@
+---
+title: Storybook for Svelte & Vite
+---
+
+export const SUPPORTED_RENDERER = 'svelte';
+
+Storybook for Svelte & Vite is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for applications using [Svelte](https://svelte.dev/) built with [Vite](https://vitejs.dev/).
+
+<If notRenderer={SUPPORTED_RENDERER}>
+
+<Callout variant="info">
+
+Storybook for Svelte & Vite is only supported in [Svelte](?renderer=svelte) projects.
+
+</Callout>
+
+<!-- End non-supported renderers -->
+
+</If>
+
+<If renderer={SUPPORTED_RENDERER}>
+
+## Requirements
+
+- Svelte ≥ 4.0
+- Vite ≥ 4.0
+- Storybook ≥ 8.0
+
+## Getting started
+
+### In a project without Storybook
+
+Follow the prompts after running this command in your Sveltekit project's root directory:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+   'common/init-command.npx.js.mdx',
+   'common/init-command.yarn.js.mdx',
+   'common/init-command.pnpm.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+[More on getting started with Storybook.](./install.md)
+
+### 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
+  paths={[
+    'common/storybook-upgrade.npm.js.mdx',
+    'common/storybook-upgrade.pnpm.js.mdx',
+    'common/storybook-upgrade.yarn.js.mdx'
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+#### Automatic migration
+
+When running the `upgrade` command above, you should get a prompt asking you to migrate to `@storybook/sveltekit`, 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
+  paths={[
+    'svelte/svelte-vite-install.npm.js.mdx',
+    'svelte/svelte-vite-install.pnpm.js.mdx',
+    'svelte/svelte-vite-install.yarn.js.mdx'
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+Then, update your `.storybook/main.js|ts` to change the framework property:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'svelte/svelte-vite-add-framework.js.mdx',
+    'svelte/svelte-vite-add-framework.ts.mdx'
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+## Writing native Svelte stories
+
+Storybook provides a Svelte addon maintained by the community, enabling you to write stories for your Svelte components using the template syntax. You'll need to take some additional steps to enable this feature.
+
+Run the following command to install the addon.
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+   'svelte/svelte-csf-addon-install.yarn.js.mdx',
+   'svelte/svelte-csf-addon-install.npm.js.mdx',
+   'svelte/svelte-csf-addon-install.pnpm.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+<Callout variant="info">
+
+The community actively maintains the Svelte CSF addon but still lacks some features currently available in the official Storybook Svelte framework support. For more information, see [addon's documentation](https://github.com/storybookjs/addon-svelte-csf).
+
+</Callout>
+
+## API
+
+### Options
+
+You can pass an options object for additional configuration if needed:
+
+```js
+// .storybook/main.js
+import * as path from 'path';
+
+export default {
+  // ...
+  framework: {
+    name: '@storybook/svelte-vite',
+    options: {
+      // ...
+    },
+  },
+};
+```
+
+The available options are:
+
+#### `builder`
+
+Type: `Record<string, any>`
+
+Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For this framework, available options can be found in the [Vite builder docs](../builders/vite.md).
+
+<!-- End supported renderers -->
+
+</If>

docs/snippets/svelte/svelte-csf-addon-install.npm.js.mdx

@@ -1,3 +1,3 @@
 ```shell
-npm install @storybook/addon-svelte-csf --save-dev
+npx storybook@latest add @storybook/addon-svelte-csf
 ```

docs/snippets/svelte/svelte-csf-addon-install.pnpm.js.mdx

@@ -1,3 +1,3 @@
 ```shell
-pnpm add --save-dev @storybook/addon-svelte-csf
+pnpm dlx storybook@latest add @storybook/addon-svelte-csf
 ```

docs/snippets/svelte/svelte-csf-addon-install.yarn.js.mdx

@@ -1,3 +1,3 @@
 ```shell
-yarn add --dev @storybook/addon-svelte-csf
+yarn storybook@latest add @storybook/addon-svelte-csf
 ```

docs/snippets/svelte/svelte-vite-add-framework.js.mdx

@@ -0,0 +1,7 @@
+```js
+// .storybook/main.js
+export default {
+  // ...
+  framework: '@storybook/svelte-vite', // 👈 Add this
+};
+```

docs/snippets/svelte/svelte-vite-add-framework.ts.mdx

@@ -0,0 +1,11 @@
+```ts
+// .storybook/main.ts
+import { StorybookConfig } from '@storybook/svelte-vite';
+
+const config: StorybookConfig = {
+  // ...
+  framework: '@storybook/svelte-vite', // 👈 Add this
+};
+
+export default config;
+```

docs/snippets/svelte/svelte-vite-install.npm.js.mdx

@@ -0,0 +1,3 @@
+```shell
+npm install --save-dev @storybook/svelte-vite
+```

docs/snippets/svelte/svelte-vite-install.pnpm.js.mdx

@@ -0,0 +1,3 @@
+```shell
+pnpm install --save-dev @storybook/svelte-vite
+```

docs/snippets/svelte/svelte-vite-install.yarn.js.mdx

@@ -0,0 +1,3 @@
+```shell
+yarn add --dev @storybook/svelte-vite
+```

docs/toc.js

@@ -43,6 +43,11 @@ module.exports = {
               title: 'React & Webpack',
               type: 'link',
             },
+            {
+              pathSegment: 'svelte-vite',
+              title: 'Svelte & Vite',
+              type: 'link',
+            },
             {
               pathSegment: 'vue3-vite',
               title: 'Vue & Vite',