From e37b8e66d53be8904e447197c0bd6f7207b0cd5d Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Thu, 30 Jun 2022 09:56:14 -0700 Subject: [PATCH 01/10] Ensure SvelteKit plugin is used --- .storybook/main.cjs | 27 +++++++++++++++------------ README.md | 11 ++--------- package.json | 2 +- 3 files changed, 18 insertions(+), 22 deletions(-) diff --git a/.storybook/main.cjs b/.storybook/main.cjs index 49256d7..e21e733 100644 --- a/.storybook/main.cjs +++ b/.storybook/main.cjs @@ -1,5 +1,6 @@ const preprocess = require('svelte-preprocess'); const path = require('path'); +const { loadConfigFromFile, mergeConfig } = require('vite'); module.exports = { stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'], @@ -26,17 +27,19 @@ module.exports = { experimental: { inspector: false } }, - async viteFinal(config) { - config.resolve.alias = { - ...(config.resolve.alias || {}), - ...{ - $app: path.resolve('./.svelte-kit/runtime/app'), - $lib: path.resolve('./src/lib') + async viteFinal(config, { configType }) { + const { config: userConfig } = await loadConfigFromFile( + path.resolve(__dirname, "../vite.config.js") + ); + // Remove Svelte plugins added by Storybook plugin so SvelteKit plugins don't duplicate them + config.plugins = config.plugins.flat(10).filter(p => !p.name.startsWith('vite-plugin-svelte')); + return mergeConfig(config, { + ...userConfig, + server: { + fs: { + allow: ['.storybook'] + } } - }; - config.server.fs.strict = false; - config.server.fs.allow = ['.']; - // Merge custom configuration into the default config - return config; - } + }); + } }; diff --git a/README.md b/README.md index f56cb9c..2db0b46 100644 --- a/README.md +++ b/README.md @@ -11,11 +11,7 @@ What works, what doesn't, and what hasn't been attempted: - 🟢 Basic storybook init/demo stories. (Requires minor tweaks to filenames.) - 🟢 Typescript (components and stories) -- 🟡 Aliased imports. E.g. `$app/stores`. _Once the aliases are added,_ then some of these will work. - - 🟢 `$app/env` Variables _are_ set. Notable because they make use of `import.meta.env`. - - 🟢 `$app/paths` Can be imported but these are unset. (Need to call `set_paths` fn.) - - 🔴 `$app/navigation`. Closely linked to app state. Probably need to pursue some version of a [mocking strategy](https://github.com/storybookjs/storybook/issues/14952#issuecomment-1023188255). - - 🔴 `$app/stores` Similar story +- 🟢 Aliased imports. E.g. `$app`, `$lib`, etc. - ❓ Tailwind, etc. (I don't think this should be much of a problem.) - 🟢 Stories that are `*.stories.svelte` files (via `@storybook/addon-svelte-csf`). This appears to work just fine. I did swap out these stories for less-fancy stories just to see if this package was introducing any additional complications/limitations. (Related: https://github.com/storybookjs/storybook/issues/14952#issuecomment-862043558) @@ -32,9 +28,6 @@ To try to run storybook with the current repo: git clone git@github.com:michaelwooley/storybook-experimental-vite.git cd storybook-experimental-vite npm i - -npm run build # Need to build for storybook - npm run storybook ``` @@ -230,4 +223,4 @@ Thu Jun 30 02:52:07 AM EDT 2022 - https://github.com/sveltejs/kit/issues/5184 - https://github.com/madeleineostoja/sveltekit-boilerplate - https://github.com/storybookjs/storybook/issues/14952 -- https://storybook.js.org/docs/react/builders/vite \ No newline at end of file +- https://storybook.js.org/docs/react/builders/vite diff --git a/package.json b/package.json index 45173fe..bf4f26c 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch", "lint": "prettier --check --plugin-search-dir=. . && eslint .", "format": "prettier --write --plugin-search-dir=. .", - "storybook": "npm run build && start-storybook -p 6006", + "storybook": "start-storybook -p 6006", "build-storybook": "build-storybook" }, "devDependencies": { From f4b4889c5576f2f8f24369bdf4a9ff2b7f676112 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Thu, 30 Jun 2022 10:23:30 -0700 Subject: [PATCH 02/10] only add sveltekit plugin rather than removing vite-plugin-svelte --- .storybook/main.cjs | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/.storybook/main.cjs b/.storybook/main.cjs index e21e733..e0ade2a 100644 --- a/.storybook/main.cjs +++ b/.storybook/main.cjs @@ -31,10 +31,11 @@ module.exports = { const { config: userConfig } = await loadConfigFromFile( path.resolve(__dirname, "../vite.config.js") ); - // Remove Svelte plugins added by Storybook plugin so SvelteKit plugins don't duplicate them - config.plugins = config.plugins.flat(10).filter(p => !p.name.startsWith('vite-plugin-svelte')); + const svelteKitPlugin = userConfig.plugins.flat(10).find(p => p.name === 'vite-plugin-svelte-kit') return mergeConfig(config, { ...userConfig, + // manually specify plugins to avoid duplicates + plugins: [ svelteKitPlugin ], server: { fs: { allow: ['.storybook'] From 0ebea3f34d99db651fd9d152cea26d55e49eb980 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Thu, 30 Jun 2022 10:27:05 -0700 Subject: [PATCH 03/10] better way --- .storybook/main.cjs | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/.storybook/main.cjs b/.storybook/main.cjs index e0ade2a..ccce9d5 100644 --- a/.storybook/main.cjs +++ b/.storybook/main.cjs @@ -31,11 +31,12 @@ module.exports = { const { config: userConfig } = await loadConfigFromFile( path.resolve(__dirname, "../vite.config.js") ); - const svelteKitPlugin = userConfig.plugins.flat(10).find(p => p.name === 'vite-plugin-svelte-kit') + // Remove Svelte plugins that would duplicate those added by the Storybook plugin + const plugins = userConfig.plugins.flat(1) + .filter(p => !p.name.startsWith('vite-plugin-svelte') || p.name === 'vite-plugin-svelte-kit'); return mergeConfig(config, { ...userConfig, - // manually specify plugins to avoid duplicates - plugins: [ svelteKitPlugin ], + plugins, server: { fs: { allow: ['.storybook'] From be05642929f80a34b125826aa61da89bca4caff6 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Wed, 6 Jul 2022 08:11:28 -0700 Subject: [PATCH 04/10] upgrade dependencies --- package-lock.json | 93 ++++++++++------------------------------------- package.json | 10 ++--- vite.config.js | 2 +- 3 files changed, 26 insertions(+), 79 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7d5495f..b4e8302 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,7 +24,7 @@ "@storybook/testing-library": "^0.0.13", "@sveltejs/adapter-auto": "next", "@sveltejs/adapter-static": "^1.0.0-next.34", - "@sveltejs/kit": "next", + "@sveltejs/kit": "^1.0.0-next.360", "@types/cookie": "^0.5.1", "@typescript-eslint/eslint-plugin": "^5.27.0", "@typescript-eslint/parser": "^5.27.0", @@ -41,7 +41,7 @@ "svelte-preprocess": "^4.10.6", "tslib": "^2.3.1", "typescript": "^4.7.2", - "vite": "2.9.6" + "vite": "^2.9.13" } }, "node_modules/@ampproject/remapping": { @@ -4887,15 +4887,14 @@ } }, "node_modules/@sveltejs/kit": { - "version": "1.0.0-next.357", - "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.357.tgz", - "integrity": "sha512-nCAehVybIEpQNnPu61V/EFVdfDb1nBSiQUfW9EcSSDEUbyAMCVBOKZZuzQ0qQDp3xniqRkyDzpBA4wN+ADxHBw==", + "version": "1.0.0-next.360", + "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.360.tgz", + "integrity": "sha512-z1W6oYSmDzYcjlXANkbsb0N0IS/0aDl0huzDGRZWXobis4VmzoqzOyxsczyvxwH6FWxQBXls5wNrtm6drzsr6A==", "dev": true, "dependencies": { "@sveltejs/vite-plugin-svelte": "^1.0.0-next.48", "chokidar": "^3.5.3", - "sade": "^1.8.1", - "vite": "^2.9.10" + "sade": "^1.8.1" }, "bin": { "svelte-kit": "svelte-kit.js" @@ -4904,44 +4903,8 @@ "node": ">=16.7" }, "peerDependencies": { - "svelte": "^3.44.0" - } - }, - "node_modules/@sveltejs/kit/node_modules/vite": { - "version": "2.9.13", - "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.13.tgz", - "integrity": "sha512-AsOBAaT0AD7Mhe8DuK+/kE4aWYFMx/i0ZNi98hJclxb4e0OhQcZYUrvLjIaQ8e59Ui7txcvKMiJC1yftqpQoDw==", - "dev": true, - "dependencies": { - "esbuild": "^0.14.27", - "postcss": "^8.4.13", - "resolve": "^1.22.0", - "rollup": "^2.59.0" - }, - "bin": { - "vite": "bin/vite.js" - }, - "engines": { - "node": ">=12.2.0" - }, - "optionalDependencies": { - "fsevents": "~2.3.2" - }, - "peerDependencies": { - "less": "*", - "sass": "*", - "stylus": "*" - }, - "peerDependenciesMeta": { - "less": { - "optional": true - }, - "sass": { - "optional": true - }, - "stylus": { - "optional": true - } + "svelte": "^3.44.0", + "vite": "^2.9.10" } }, "node_modules/@sveltejs/vite-plugin-svelte": { @@ -19450,13 +19413,13 @@ } }, "node_modules/vite": { - "version": "2.9.6", - "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.6.tgz", - "integrity": "sha512-3IffdrByHW95Yjv0a13TQOQfJs7L5dVlSPuTt432XLbRMriWbThqJN2k/IS6kXn5WY4xBLhK9XoaWay1B8VzUw==", + "version": "2.9.13", + "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.13.tgz", + "integrity": "sha512-AsOBAaT0AD7Mhe8DuK+/kE4aWYFMx/i0ZNi98hJclxb4e0OhQcZYUrvLjIaQ8e59Ui7txcvKMiJC1yftqpQoDw==", "dev": true, "dependencies": { "esbuild": "^0.14.27", - "postcss": "^8.4.12", + "postcss": "^8.4.13", "resolve": "^1.22.0", "rollup": "^2.59.0" }, @@ -24076,30 +24039,14 @@ } }, "@sveltejs/kit": { - "version": "1.0.0-next.357", - "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.357.tgz", - "integrity": "sha512-nCAehVybIEpQNnPu61V/EFVdfDb1nBSiQUfW9EcSSDEUbyAMCVBOKZZuzQ0qQDp3xniqRkyDzpBA4wN+ADxHBw==", + "version": "1.0.0-next.360", + "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.0.0-next.360.tgz", + "integrity": "sha512-z1W6oYSmDzYcjlXANkbsb0N0IS/0aDl0huzDGRZWXobis4VmzoqzOyxsczyvxwH6FWxQBXls5wNrtm6drzsr6A==", "dev": true, "requires": { "@sveltejs/vite-plugin-svelte": "^1.0.0-next.48", "chokidar": "^3.5.3", - "sade": "^1.8.1", - "vite": "^2.9.10" - }, - "dependencies": { - "vite": { - "version": "2.9.13", - "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.13.tgz", - "integrity": "sha512-AsOBAaT0AD7Mhe8DuK+/kE4aWYFMx/i0ZNi98hJclxb4e0OhQcZYUrvLjIaQ8e59Ui7txcvKMiJC1yftqpQoDw==", - "dev": true, - "requires": { - "esbuild": "^0.14.27", - "fsevents": "~2.3.2", - "postcss": "^8.4.13", - "resolve": "^1.22.0", - "rollup": "^2.59.0" - } - } + "sade": "^1.8.1" } }, "@sveltejs/vite-plugin-svelte": { @@ -35396,14 +35343,14 @@ } }, "vite": { - "version": "2.9.6", - "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.6.tgz", - "integrity": "sha512-3IffdrByHW95Yjv0a13TQOQfJs7L5dVlSPuTt432XLbRMriWbThqJN2k/IS6kXn5WY4xBLhK9XoaWay1B8VzUw==", + "version": "2.9.13", + "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.13.tgz", + "integrity": "sha512-AsOBAaT0AD7Mhe8DuK+/kE4aWYFMx/i0ZNi98hJclxb4e0OhQcZYUrvLjIaQ8e59Ui7txcvKMiJC1yftqpQoDw==", "dev": true, "requires": { "esbuild": "^0.14.27", "fsevents": "~2.3.2", - "postcss": "^8.4.12", + "postcss": "^8.4.13", "resolve": "^1.22.0", "rollup": "^2.59.0" } diff --git a/package.json b/package.json index bf4f26c..66d84ac 100644 --- a/package.json +++ b/package.json @@ -2,10 +2,10 @@ "name": "storybook-experimental-vite", "version": "0.0.1", "scripts": { - "dev": "svelte-kit dev", - "build": "svelte-kit build", + "dev": "vite dev", + "build": "vite build", "package": "svelte-kit package", - "preview": "svelte-kit preview", + "preview": "vite preview", "prepare": "svelte-kit sync", "test": "playwright test", "check": "svelte-check --tsconfig ./tsconfig.json", @@ -28,7 +28,7 @@ "@storybook/testing-library": "^0.0.13", "@sveltejs/adapter-auto": "next", "@sveltejs/adapter-static": "^1.0.0-next.34", - "@sveltejs/kit": "next", + "@sveltejs/kit": "^1.0.0-next.360", "@types/cookie": "^0.5.1", "@typescript-eslint/eslint-plugin": "^5.27.0", "@typescript-eslint/parser": "^5.27.0", @@ -45,7 +45,7 @@ "svelte-preprocess": "^4.10.6", "tslib": "^2.3.1", "typescript": "^4.7.2", - "vite": "2.9.6" + "vite": "^2.9.13" }, "type": "module", "dependencies": { diff --git a/vite.config.js b/vite.config.js index dbdb281..1cb0df4 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,4 +1,4 @@ -import { sveltekit } from '@sveltejs/kit/experimental/vite'; +import { sveltekit } from '@sveltejs/kit/vite'; /** @type {import('vite').UserConfig} */ export default { From 8f451f61b8e092f257acbe72ece6dac68341a1d5 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Wed, 6 Jul 2022 08:13:10 -0700 Subject: [PATCH 05/10] remove deuplicate config line --- .storybook/main.cjs | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.storybook/main.cjs b/.storybook/main.cjs index ccce9d5..3ef98d4 100644 --- a/.storybook/main.cjs +++ b/.storybook/main.cjs @@ -23,8 +23,7 @@ module.exports = { storyStoreV7: false }, svelteOptions: { - preprocess: preprocess(), // necessary to work currently. But does that mean that other stuff is ignored? - experimental: { inspector: false } + preprocess: preprocess() // necessary to work currently, but that means that vite-plugin-svelte config is ignored }, async viteFinal(config, { configType }) { From 2102b4c24e6497757a064752ed2512a1cdc327b1 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Wed, 6 Jul 2022 08:17:14 -0700 Subject: [PATCH 06/10] revert port back to default --- README.md | 23 ++--------------------- docs/setup.md | 23 ++--------------------- vite.config.js | 6 +----- 3 files changed, 5 insertions(+), 47 deletions(-) diff --git a/README.md b/README.md index 2db0b46..b3882fe 100644 --- a/README.md +++ b/README.md @@ -147,25 +147,6 @@ Initialized empty Git repository in /home/michael/Documents/misc/storybook-exper create mode 100644 tsconfig.json ``` -## Substitute `vite.config.js` for `svelte.config.js` - -```bash -cat << EOF > vite.config.js -import { sveltekit } from '@sveltejs/kit/experimental/vite'; - -/** @type {import('vite').UserConfig} */ -export default { - plugins: [sveltekit()], - - server: { - port: 5000 // For demo purposes only - } -}; -EOF -``` - -**Notice** that the default port has been changed to 5000 in order to see if the normal `svelte-kit dev` command picks up on the separate vite config file. - ## Add storybook ```bash @@ -174,10 +155,10 @@ npx sb@next init ## Vite 3? -Pinning vite version to 2.9.6 due to: https://github.com/storybookjs/builder-vite/pull/394 +Using Vite 2 until: https://github.com/storybookjs/builder-vite/pull/394 ```bash -npm i vite@2.9.6 +npm install --save vite ``` ## Adapter static? diff --git a/docs/setup.md b/docs/setup.md index c4bece0..86e3cb3 100644 --- a/docs/setup.md +++ b/docs/setup.md @@ -113,25 +113,6 @@ Initialized empty Git repository in /home/michael/Documents/misc/storybook-exper create mode 100644 tsconfig.json ``` -## Substitute `vite.config.js` for `svelte.config.js` - -```bash -cat << EOF > vite.config.js -import { sveltekit } from '@sveltejs/kit/experimental/vite'; - -/** @type {import('vite').UserConfig} */ -export default { - plugins: [sveltekit()], - - server: { - port: 5000 // For demo purposes only - } -}; -EOF -``` - -**Notice** that the default port has been changed to 5000 in order to see if the normal `svelte-kit dev` command picks up on the separate vite config file. - ## Add storybook ```bash @@ -140,10 +121,10 @@ npx sb@next init ## Vite 3? -Pinning vite version to 2.9.6 due to: https://github.com/storybookjs/builder-vite/pull/394 +Using Vite 2 until: https://github.com/storybookjs/builder-vite/pull/394 ```bash -npm i vite@2.9.6 +npm install --save vite ``` ## Adapter static? diff --git a/vite.config.js b/vite.config.js index 1cb0df4..be6f7d4 100644 --- a/vite.config.js +++ b/vite.config.js @@ -2,9 +2,5 @@ import { sveltekit } from '@sveltejs/kit/vite'; /** @type {import('vite').UserConfig} */ export default { - plugins: [sveltekit()], - - server: { - port: 5000 // For demo purposes only - } + plugins: [sveltekit()] }; From ca7717130a5f71774d682de6d467ff4dfe45d0ad Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Wed, 6 Jul 2022 08:57:27 -0700 Subject: [PATCH 07/10] remove outdated info from README --- README.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/README.md b/README.md index b3882fe..0467337 100644 --- a/README.md +++ b/README.md @@ -2,10 +2,6 @@ - **Goal:** Easy storybook setup for sveltekit apps. - **What should make this work now?** Use `vite.config.js` instead of specifying vite config as part of `svelte.config.js` (https://github.com/sveltejs/kit/issues/5184). -- **Present state.** - - A lot of stuff works... - - ...But it seems like I'm missing something: It reads like the introduction of a standalone `vite.config.js` should make things much simpler. But I'm still doing a lot of tinkering. That makes me think that I'm over-complicating this in some way. -- **Next steps.** Work out a mocking strategy for aliased imports. Could be relatively rich. Can work out reasonable substitutes for use in `.svelte-kit/runtime/client/start.js#start`? (https://github.com/michaelwooley/storybook-experimental-vite/issues/3) What works, what doesn't, and what hasn't been attempted: From 3bf6268b9154c35b6f99a977ee5a1b5f6bcbb924 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Wed, 6 Jul 2022 09:56:36 -0700 Subject: [PATCH 08/10] remove docs/setup.md --- docs/setup.md | 166 -------------------------------------------------- 1 file changed, 166 deletions(-) delete mode 100644 docs/setup.md diff --git a/docs/setup.md b/docs/setup.md deleted file mode 100644 index 86e3cb3..0000000 --- a/docs/setup.md +++ /dev/null @@ -1,166 +0,0 @@ -# Setup details - -# Init steps - -## Project init - -```bash -npm create svelte@latest storybook-experimental-vite -cd storybook-experimental-vite -npm i -git init && git add -A && git commit -m "Initial commit" -``` - -Creation option choices: - -- _Which Svelte app template?_ › SvelteKit demo app -- _Add type checking with TypeScript?_ Yes, using TypeScript syntax -- _Add ESLint for code linting?_ … Yes -- _Add Prettier for code formatting?_ … Yes -- _Add Playwright for browser testing?_ … Yes - -```bash -❯ npm create svelte@latest storybook-experimental-vite -Need to install the following packages: - create-svelte@latest -Ok to proceed? (y) y - -create-svelte version 2.0.0-next.144 - -Welcome to SvelteKit! - -This is beta software; expect bugs and missing features. - -Problems? Open an issue on https://github.com/sveltejs/kit/issues if none exists already. - -✔ Which Svelte app template? › SvelteKit demo app -✔ Add type checking with TypeScript? › Yes, using TypeScript syntax -✔ Add ESLint for code linting? … No / Yes -✔ Add Prettier for code formatting? … No / Yes -✔ Add Playwright for browser testing? … No / Yes - -Your project is ready! -✔ Typescript - Inside Svelte components, use