Merge pull request #20039 from storybookjs/jeppe/sveltekit-framework

SvelteKit: Create framework

.circleci/config.yml

@@ -536,23 +536,23 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 9
+          parallelism: 8
           requires:
             - build
       - build-sandboxes:
-          parallelism: 9
+          parallelism: 8
           requires:
             - create-sandboxes
       - test-runner-sandboxes:
-          parallelism: 9
+          parallelism: 8
           requires:
             - build-sandboxes
       - chromatic-sandboxes:
-          parallelism: 9
+          parallelism: 8
           requires:
             - build-sandboxes
       - e2e-sandboxes:
-          parallelism: 9
+          parallelism: 8
           requires:
             - build-sandboxes
   merged:
@@ -586,23 +586,23 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 15
+          parallelism: 14
           requires:
             - build
       - build-sandboxes:
-          parallelism: 15
+          parallelism: 14
           requires:
             - create-sandboxes
       - test-runner-sandboxes:
-          parallelism: 15
+          parallelism: 14
           requires:
             - build-sandboxes
       - chromatic-sandboxes:
-          parallelism: 15
+          parallelism: 14
           requires:
             - build-sandboxes
       - e2e-sandboxes:
-          parallelism: 15
+          parallelism: 14
           requires:
             - build-sandboxes
   daily:
@@ -611,25 +611,25 @@ workflows:
     jobs:
       - build
       - create-sandboxes:
-          parallelism: 25
+          parallelism: 23
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 25
+          parallelism: 23
           requires:
             - create-sandboxes
       - test-runner-sandboxes:
-          parallelism: 25
+          parallelism: 23
           requires:
             - build-sandboxes
       - chromatic-sandboxes:
-          parallelism: 25
+          parallelism: 23
           requires:
             - build-sandboxes
       - e2e-sandboxes:
-          parallelism: 25
+          parallelism: 23
           requires:
             - build-sandboxes

MIGRATION.md

@@ -23,6 +23,7 @@
     - [CLI option `--use-npm` deprecated](#cli-option---use-npm-deprecated)
     - [Vite builder uses vite config automatically](#vite-builder-uses-vite-config-automatically)
     - [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
+    - [SvelteKit needs the `@storybook/sveltekit` framework](#sveltekit-needs-the-storybooksveltekit-framework)
     - [Removed docs.getContainer and getPage parameters](#removed-docsgetcontainer-and-getpage-parameters)
     - [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global)
     - [Icons API changed](#icons-api-changed)
@@ -477,6 +478,7 @@ In 7.0, frameworks also specify the builder to be used. For example, The current
 - `@storybook/server-webpack5`
 - `@storybook/svelte-webpack5`
 - `@storybook/svelte-vite`
+- `@storybook/sveltekit`
 - `@storybook/vue-webpack5`
 - `@storybook/vue-vite`
 - `@storybook/vue3-webpack5`
@@ -576,6 +578,17 @@ If you were using `viteFinal` in 6.5 to simply merge in your project's standard
 
 Previously, Storybook's Vite builder placed cache files in node_modules/.vite-storybook. However, it's more common for tools to place cached files into `node_modules/.cache`, and putting them there makes it quick and easy to clear the cache for multiple tools at once. We don't expect this change will cause any problems, but it's something that users of Storybook Vite projects should know about. It can be configured by setting `cacheDir` in `viteFinal` within `.storybook/main.js` [Storybook Vite configuration docs](https://storybook.js.org/docs/react/builders/vite#configuration)).
 
+#### SvelteKit needs the `@storybook/sveltekit` framework
+
+SvelteKit projects need to use the `@storybook/sveltekit` framework in the `main.js` file. Previously it was enough to just setup Storybook with Svelte+Vite, but that is no longer the case.
+
+```js
+// .storybook/main.js
+export default {
+  framework: '@storybook/sveltekit',
+};
+```
+
 #### Removed docs.getContainer and getPage parameters
 
 It is no longer possible to set `parameters.docs.getContainer()` and `getPage()`. Instead use `parameters.docs.container` or `parameters.docs.page` directly.

code/frameworks/svelte-vite/src/preset.ts

@@ -1,13 +1,13 @@
-import { type StorybookConfig, withoutVitePlugins } from '@storybook/builder-vite';
-import { hasPlugin } from './utils';
+import { type StorybookConfig } from '@storybook/builder-vite';
+import { handleSvelteKit, hasPlugin } from './utils';
 import { svelteDocgen } from './plugins/svelte-docgen';
 
 export const core: StorybookConfig['core'] = {
   builder: '@storybook/builder-vite',
   renderer: '@storybook/svelte',
 };
 
-export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) => {
+export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (config, options) => {
   let { plugins = [] } = config;
   const { svelte, loadSvelteConfig } = await import('@sveltejs/vite-plugin-svelte');
   const svelteOptions: Record<string, any> = await options.presets.apply(
@@ -25,9 +25,8 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) =
   // Add docgen plugin
   plugins.push(svelteDocgen(svelteConfig));
 
-  // Remove vite-plugin-svelte-kit from plugins if using SvelteKit
-  // see https://github.com/storybookjs/storybook/issues/19280#issuecomment-1281204341
-  plugins = withoutVitePlugins(plugins, ['vite-plugin-svelte-kit']);
+  // temporarily support SvelteKit
+  plugins = await handleSvelteKit(plugins, options);
 
   // TODO: temporary until/unless https://github.com/storybookjs/addon-svelte-csf/issues/64 is fixed
   // Wrapping in try-catch in case `@storybook/addon-svelte-csf is not installed

code/frameworks/svelte-vite/src/utils.ts

@@ -1,4 +1,7 @@
 import type { PluginOption } from 'vite';
+import { deprecate } from '@storybook/node-logger';
+import { withoutVitePlugins } from '@storybook/builder-vite';
+import type { Options } from '@storybook/types';
 
 function checkName(plugin: PluginOption, name: string) {
   return typeof plugin === 'object' && 'name' in plugin && plugin.name === name;
@@ -14,3 +17,38 @@ export function hasPlugin(plugins: PluginOption[], name: string) {
     })
   );
 }
+
+/**
+ * A migration step that ensures the svelte-vite framework still supports SvelteKit,
+ * but warns the user that they should use the sveltekit framework instead.
+ * Should be removed when we decide to remove support completely for SvelteKit in svelte-vite
+ */
+export async function handleSvelteKit(
+  plugins: PluginOption[],
+  options: Options
+): Promise<PluginOption[]> {
+  if (!hasPlugin(plugins, 'vite-plugin-svelte-kit')) {
+    // this is not a SvelteKit project ✅
+    return plugins;
+  }
+
+  /*
+  the sveltekit framework uses this svelte-vite framework under the hood
+  so we have to take extra care of only warning when the user is actually using
+  svelte-vite directly and not just through sveltekit
+  */
+
+  const frameworkPreset = await options.presets.apply('framework', {}, options);
+  const framework = typeof frameworkPreset === 'string' ? frameworkPreset : frameworkPreset.name;
+
+  if (framework === '@storybook/sveltekit') {
+    // this uses @storybook/sveltekit, so everything is fine ✅
+    return plugins;
+  }
+
+  // this is a SvelteKit project but doesn't use @storybook/sveltekit, warn user about this and remove vite-plugin-svelte-kit ❌
+  deprecate(
+    'SvelteKit support in @storybook/svelte-vite is deprecated in Storybook 7.0, use @storybook/sveltekit instead.'
+  );
+  return withoutVitePlugins(plugins, ['vite-plugin-svelte-kit']);
+}

code/frameworks/sveltekit/README.md

@@ -0,0 +1 @@
+# Storybook for SvelteKit

code/frameworks/sveltekit/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/frameworks/sveltekit/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@storybook/sveltekit",
+  "version": "7.0.0-alpha.57",
+  "description": "Storybook for SvelteKit",
+  "keywords": [
+    "storybook",
+    "svelte",
+    "sveltekit",
+    "svelte-kit"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/sveltekit",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "code/frameworks/sveltekit"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./preset": {
+      "require": "./dist/preset.js",
+      "import": "./dist/preset.mjs",
+      "types": "./dist/preset.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "template/**/*",
+    "types/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "check": "tsc --noEmit",
+    "prep": "../../../scripts/prepare/bundle.ts"
+  },
+  "dependencies": {
+    "@storybook/builder-vite": "7.0.0-alpha.57",
+    "@storybook/svelte-vite": "7.0.0-alpha.57"
+  },
+  "devDependencies": {
+    "@types/node": "^16.0.0",
+    "typescript": "^4.9.3",
+    "vite": "^3.1.3"
+  },
+  "peerDependencies": {
+    "@storybook/addon-svelte-csf": "^2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@storybook/addon-svelte-csf": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": "^14.18 || >=16"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/preset.ts"
+    ],
+    "platform": "node"
+  },
+  "gitHead": "91177d4e27daec556a24ae6223c3cbe17a998d9b"
+}

code/frameworks/sveltekit/preset.js

@@ -0,0 +1 @@
+module.exports = require('./dist/preset');

code/frameworks/sveltekit/src/index.ts

@@ -0,0 +1 @@
+export * from '@storybook/svelte-vite';

code/frameworks/sveltekit/src/preset.ts

@@ -0,0 +1,21 @@
+import { type StorybookConfig } from '@storybook/svelte-vite';
+// @ts-expect-error -- TS picks up the type from preset.js instead of dist/preset.d.ts
+import { viteFinal as svelteViteFinal } from '@storybook/svelte-vite/preset';
+import { withoutVitePlugins } from '@storybook/builder-vite';
+
+export const core: StorybookConfig['core'] = {
+  builder: '@storybook/builder-vite',
+  renderer: '@storybook/svelte',
+};
+
+export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (config, options) => {
+  const baseConfig = await svelteViteFinal(config, options);
+
+  let { plugins = [] } = baseConfig;
+
+  // Remove vite-plugin-svelte-kit from plugins if using SvelteKit
+  // see https://github.com/storybookjs/storybook/issues/19280#issuecomment-1281204341
+  plugins = withoutVitePlugins(plugins, ['vite-plugin-svelte-kit']);
+
+  return { ...baseConfig, plugins };
+};

code/frameworks/sveltekit/template/cli/Button.stories.js

@@ -0,0 +1,39 @@
+import Button from './Button.svelte';
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
+export default {
+  title: 'Example/Button',
+  component: Button,
+  tags: ['docsPage'],
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/svelte/writing-stories/args
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

code/frameworks/sveltekit/template/cli/Button.svelte

@@ -0,0 +1,34 @@
+<script>
+  import './button.css';
+
+  /**
+   * Is this the principal call to action on the page?
+   */
+  export let primary = false;
+
+  /**
+   * What background color to use
+   */
+  export let backgroundColor = undefined;
+  /**
+   * How large should the button be?
+   */
+  export let size = 'medium';
+  /**
+   * Button contents
+   */
+  export let label;
+
+  $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+
+  $: style = backgroundColor ? `background-color: ${backgroundColor}` : '';
+</script>
+
+<button
+  type="button"
+  class={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
+  {style}
+  on:click
+>
+  {label}
+</button>