diff --git a/.storybook/main.cjs b/.storybook/main.cjs index 49256d7..3ef98d4 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)'], @@ -22,21 +23,24 @@ 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) { - 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 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, + plugins, + 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 1947ed6..3628487 100644 --- a/README.md +++ b/README.md @@ -2,9 +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: @@ -14,8 +11,8 @@ What works, what doesn't, and what hasn't been attempted: - 🟡 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 + - 🔴 `$app/navigation`. Closely linked to app state. I think it makes sense that these don't work. Nothing has been done to initialize them. Quick check uncommenting [some lines in `Header.svelte`](https://github.com/michaelwooley/storybook-experimental-vite/blob/a4abb8ca37b70f861ef5cb6e524a60811b6dc4fe/src/lib/header/Header.svelte#L5-L13). Probably need to pursue some version of a [mocking strategy](https://github.com/storybookjs/storybook/issues/14952#issuecomment-1023188255). + - 🔴 `$app/stores` Similar story. `$app/stores` will import okay but it will throw an error if you try to fetch the store values. This lack of functionality can actually help devs to be deliberate about application state. - ❓ 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 +29,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 ``` @@ -154,25 +148,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 @@ -181,10 +156,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 deleted file mode 100644 index c4bece0..0000000 --- a/docs/setup.md +++ /dev/null @@ -1,185 +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