@storybook/sveltekit 7.0.0-beta.2 → 7.0.0-beta.20

package/README.md

@@ -1 +1,116 @@
-# Storybook for SvelteKit
+# Storybook for SvelteKit <!-- omit in toc -->
+
+Our goal is to help you use the tools you love together with Storybook. That’s why Storybook has zero-config support for SvelteKit with the `@storybook/sveltekit` package.
+
+Check out our [Frameworks API](https://storybook.js.org/blog/framework-api/) announcement for what this all means for you and our continued efforts to make Storybook a seamless integration for any project.
+
+## Table of Contents <!-- omit in toc -->
+
+- [Supported features](#supported-features)
+- [Requirements](#requirements)
+- [Getting Started](#getting-started)
+  - [In a project without Storybook](#in-a-project-without-storybook)
+  - [In a project with Storybook](#in-a-project-with-storybook)
+    - [Automatic migration](#automatic-migration)
+    - [Manual migration](#manual-migration)
+- [Troubleshooting](#troubleshooting)
+  - [Error: `ERR! SyntaxError: Identifier '__esbuild_register_import_meta_url__' has already been declared` when starting Storybook](#error-err-syntaxerror-identifier-__esbuild_register_import_meta_url__-has-already-been-declared-when-starting-storybook)
+- [Acknowledgements](#acknowledgements)
+
+## Supported features
+
+All Svelte language features are supported out of the box, as Storybook uses the Svelte compiler underneath.
+However SvelteKit has some [Kit-specific modules](https://kit.svelte.dev/docs/modules) that currently aren't supported. It's on our roadmap to support most of them soon:
+
+| **Module**                                                                         | **Status**                                                                                                             |
+| ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| [`$app/environment`](https://kit.svelte.dev/docs/modules#$app-environment)         | 🔜 Coming in 7.0                                                                                                       |
+| [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms)                     | ⏳ Planned for 7.1                                                                                                     |
+| [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation)           | ⏳ Planned for 7.1. With mocks so the Actions addon will display when the hooks are being called.                      |
+| [`$app/paths`](https://kit.svelte.dev/docs/modules#$app-paths)                     | ⏳ Planned for 7.1                                                                                                     |
+| [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores)                   | 🔜 Coming in 7.0. Mocks are planned for 7.1 so you can set different store values per story.                           |
+| [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private) | ⛔ Not supported. They are meant to only be available server-side, and Storybook renders all components on the client. |
+| [`$env/dynamic/public`](https://kit.svelte.dev/docs/modules#$env-dynamic-public)   | 🔜 Coming in 7.0                                                                                                       |
+| [`$env/static/private`](https://kit.svelte.dev/docs/modules#$env-static-private)   | ⛔ Not supported. They are meant to only be available server-side, and Storybook renders all components on the client. |
+| [`$env/static/public`](https://kit.svelte.dev/docs/modules#$env-static-public)     | 🔜 Coming in 7.0                                                                                                       |
+| [`$lib`](https://kit.svelte.dev/docs/modules#$lib)                                 | 🔜 Coming in 7.0                                                                                                       |
+| [`$service-worker`](https://kit.svelte.dev/docs/modules#$service-worker)           | ⛔ Not supported. They are only meant to be used in service workers                                                    |
+| [`@sveltejs/kit/*`](https://kit.svelte.dev/docs/modules#sveltejs-kit)              | ✅ Supported                                                                                                           |
+
+This is just the beginning. We're close to adding basic support for many of the SvelteKit features. Longer term we're planning on making it an even better experience to [build](https://storybook.js.org/docs/7.0/react/writing-stories/introduction), [test](https://storybook.js.org/docs/7.0/react/writing-tests/introduction) and [document](https://storybook.js.org/docs/7.0/react/writing-docs/introduction) all the SvelteKit goodies like [pages](https://kit.svelte.dev/docs/routing), [forms](https://kit.svelte.dev/docs/form-actions) and [layouts](https://kit.svelte.dev/docs/routing#layout) in Storybook, while still integrating with all the addons and workflows you know and love.
+
+## Requirements
+
+- [SvelteKit](https://kit.svelte.dev/) >= 1.0.0 (not including beta versions)
+- [Storybook](https://storybook.js.org/) >= 7.x
+
+## Getting Started
+
+### In a project without Storybook
+
+Run the following command in your SvelteKit project's root directory, and follow the prompts:
+
+```bash
+npx storybook@next init
+```
+
+[More on getting started with Storybook](https://storybook.js.org/docs/7.0/svelte/get-started/install)
+
+### 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:
+
+```bash
+npx storybook@next upgrade --prerelease
+```
+
+#### 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 some cases it can't migrate for you, eg. if your existing Storybook setup is based on Webpack. In such cases, refer to the manual migration below.
+
+Storybook 7.0 automatically loads your Vite config, and by extension your Svelte config. If you had a `svelteOptions` property in `.storybook/main.cjs` the automigration will have removed it, as it is no longer supported.
+
+#### Manual migration
+
+Install the framework:
+
+```bash
+yarn add -D @storybook/sveltekit@next
+```
+
+Update your `main.cjs` to change the framework property:
+
+```js
+// .storybook/main.cjs
+module.exports = {
+  ...
+  framework: '@storybook/sveltekit',
+};
+```
+
+Storybook 7.0 automatically loads your Vite config, and by extension your Svelte config. If you have a `svelteOptions` property in `.storybook/main.cjs` you need to remove that. See [Troubleshooting](#error-about-__esbuild_register_import_meta_url__-when-starting-storybook) below.
+
+Remove any redundant dependencies, if you have them:
+
+```bash
+yarn remove @storybook/svelte-vite
+yarn remove @storybook/svelte-webpack5
+yarn remove storybook-builder-vite
+yarn remove @storybook/builder-vite
+```
+
+## Troubleshooting
+
+### Error: `ERR! SyntaxError: Identifier '__esbuild_register_import_meta_url__' has already been declared` when starting Storybook
+
+> When starting Storybook after upgrading to v7.0, it breaks with the following error:
+>
+> ```
+> ERR! SyntaxError: Identifier '__esbuild_register_import_meta_url__' has already been declared
+> ```
+
+You'll get this error when manually upgrading from 6.5 to 7.0. You need to remove the `svelteOptions` property in `.storybook/main.cjs`, as that is not supported by Storybook 7.0 + SvelteKit. The property is also not necessary anymore because the Vite and Svelte configurations are loaded automatically in Storybook 7.0.
+
+## Acknowledgements
+
+Integrating with SvelteKit would not have been possible if it weren't for the fantastic efforts by the Svelte core team - especially [Ben McCann](https://twitter.com/benjaminmccann) - to make integrations with the wider ecosystem possible.

package/dist/index.js

@@ -1 +1 @@
-var a=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var p=(r,o,f,x)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of c(o))!d.call(r,e)&&e!==f&&a(r,e,{get:()=>o[e],enumerable:!(x=b(o,e))||x.enumerable});return r},t=(r,o,f)=>(p(r,o,"default"),f&&p(f,o,"default"));var g=r=>p(a({},"__esModule",{value:!0}),r);var m={};module.exports=g(m);t(m,require("@storybook/svelte-vite"),module.exports);
+var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to},__reExport=(target,mod,secondTarget)=>(__copyProps(target,mod,"default"),secondTarget&&__copyProps(secondTarget,mod,"default"));var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};module.exports=__toCommonJS(src_exports);__reExport(src_exports,require("@storybook/svelte-vite"),module.exports);

package/dist/preset.js

@@ -1 +1 @@
-var n=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var u=(t,o)=>{for(var e in o)n(t,e,{get:o[e],enumerable:!0})},v=(t,o,e,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of b(o))!p.call(t,r)&&r!==e&&n(t,r,{get:()=>o[r],enumerable:!(i=a(o,r))||i.enumerable});return t};var f=t=>v(n({},"__esModule",{value:!0}),t);var c={};u(c,{core:()=>g,viteFinal:()=>y});module.exports=f(c);var l=require("@storybook/svelte-vite/preset"),s=require("@storybook/builder-vite"),g={builder:"@storybook/builder-vite",renderer:"@storybook/svelte"},y=async(t,o)=>{let e=await(0,l.viteFinal)(t,o),{plugins:i=[]}=e;return i=(0,s.withoutVitePlugins)(i,["vite-plugin-svelte-kit"]),{...e,plugins:i}};0&&(module.exports={core,viteFinal});
+var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var preset_exports={};__export(preset_exports,{core:()=>core,viteFinal:()=>viteFinal});module.exports=__toCommonJS(preset_exports);var import_preset=require("@storybook/svelte-vite/preset"),import_builder_vite=require("@storybook/builder-vite"),core={builder:"@storybook/builder-vite",renderer:"@storybook/svelte"},viteFinal=async(config,options)=>{let baseConfig=await(0,import_preset.viteFinal)(config,options),{plugins=[]}=baseConfig;return plugins=await(0,import_builder_vite.withoutVitePlugins)(plugins,["vite-plugin-svelte-kit","vite-plugin-sveltekit-setup","vite-plugin-sveltekit-compile"]),{...baseConfig,plugins}};0&&(module.exports={core,viteFinal});

package/dist/preset.mjs

@@ -1 +1 @@
-import{viteFinal as svelteViteFinal}from"@storybook/svelte-vite/preset";import{withoutVitePlugins}from"@storybook/builder-vite";var core={builder:"@storybook/builder-vite",renderer:"@storybook/svelte"},viteFinal=async(config,options)=>{let baseConfig=await svelteViteFinal(config,options),{plugins=[]}=baseConfig;return plugins=withoutVitePlugins(plugins,["vite-plugin-svelte-kit"]),{...baseConfig,plugins}};export{core,viteFinal};
+import{viteFinal as svelteViteFinal}from"@storybook/svelte-vite/preset";import{withoutVitePlugins}from"@storybook/builder-vite";var core={builder:"@storybook/builder-vite",renderer:"@storybook/svelte"},viteFinal=async(config,options)=>{let baseConfig=await svelteViteFinal(config,options),{plugins=[]}=baseConfig;return plugins=await withoutVitePlugins(plugins,["vite-plugin-svelte-kit","vite-plugin-sveltekit-setup","vite-plugin-sveltekit-compile"]),{...baseConfig,plugins}};export{core,viteFinal};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/sveltekit",
-  "version": "7.0.0-beta.2",
+  "version": "7.0.0-beta.20",
   "description": "Storybook for SvelteKit",
   "keywords": [
     "storybook",
@@ -24,6 +24,7 @@
   "license": "MIT",
   "exports": {
     ".": {
+      "node": "./dist/index.js",
       "require": "./dist/index.js",
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
@@ -41,7 +42,6 @@
   "files": [
     "dist/**/*",
     "template/**/*",
-    "types/**/*",
     "README.md",
     "*.js",
     "*.d.ts"
@@ -51,20 +51,17 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/builder-vite": "7.0.0-beta.2",
-    "@storybook/svelte-vite": "7.0.0-beta.2"
+    "@storybook/builder-vite": "7.0.0-beta.20",
+    "@storybook/svelte": "7.0.0-beta.20",
+    "@storybook/svelte-vite": "7.0.0-beta.20"
   },
   "devDependencies": {
     "@types/node": "^16.0.0",
-    "typescript": "^4.9.3"
+    "typescript": "^4.9.3",
+    "vite": "^4.0.0"
   },
   "peerDependencies": {
-    "@storybook/addon-svelte-csf": "^2.0.0"
-  },
-  "peerDependenciesMeta": {
-    "@storybook/addon-svelte-csf": {
-      "optional": true
-    }
+    "vite": "^4.0.0"
   },
   "engines": {
     "node": "^14.18 || >=16"
@@ -79,5 +76,5 @@
     ],
     "platform": "node"
   },
-  "gitHead": "66a0d588184add900c48d49f3a62743fa9cc5185"
+  "gitHead": "22701aedf564e467511887eb041f32ae0c96bcde"
 }

package/template/cli/Button.stories.js

@@ -1,39 +0,0 @@
-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',
-  },
-};

package/template/cli/Button.svelte

@@ -1,34 +0,0 @@
-<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>