- Goal: Easy storybook setup for sveltekit apps.
- What should make this work now? Use
vite.config.jsinstead of specifying vite config as part ofsvelte.config.js(sveltejs/kit#5184). - 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? (#3)
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/envVariables are set. Notable because they make use ofimport.meta.env. - ๐ข
$app/pathsCan be imported but these are unset. (Need to callset_pathsfn.) - ๐ด
$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 inHeader.svelte. Probably need to pursue some version of a mocking strategy. - ๐ด
$app/storesSimilar story.$app/storeswill 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.sveltefiles (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: storybookjs/storybook#14952 (comment))
Open questions:
- Vite 3 support? Is it important? Do we need to pin to vite 2 for now? (storybookjs/builder-vite#394)
- Importance of adapters? I don't think that adapters matter at all for what shows up in the
.svelte-kit/runtimedir, right? Only the contents of the.svelte-kit/builddir are affected?
To try to run storybook with the current repo:
git clone [email protected]:michaelwooley/storybook-experimental-vite.git
cd storybook-experimental-vite
npm i
npm run storybookSee below for steps taken to create repo from scratch.
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
โฏ 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 <script lang="ts">
โ ESLint
https://github.com/sveltejs/eslint-plugin-svelte3
โ Prettier
https://prettier.io/docs/en/options.html
https://github.com/sveltejs/prettier-plugin-svelte#options
โ Playwright
https://playwright.dev
Install community-maintained integrations:
https://github.com/svelte-add/svelte-adders
Next steps:
1: cd storybook-experimental-vite
2: npm install (or pnpm install, etc)
3: git init && git add -A && git commit -m "Initial commit" (optional)
4: npm run dev -- --open
To close the dev server, hit Ctrl-C
Stuck? Visit us at https://svelte.dev/chat
โฏ cd storybook-experimental-vite
โฏ npm i
> [email protected] prepare
> svelte-kit sync
added 240 packages, and audited 241 packages in 32s
33 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
โฏ git init && git add -A && git commit -m "Initial commit"
Initialized empty Git repository in /home/michael/Documents/misc/storybook-experimental-vite/.git/
[main (root-commit) be74196] Initial commit
31 files changed, 6448 insertions(+)
create mode 100644 .eslintignore
create mode 100644 .eslintrc.cjs
create mode 100644 .gitignore
create mode 100644 .npmrc
create mode 100644 .prettierignore
create mode 100644 .prettierrc
create mode 100644 README.md
create mode 100644 package-lock.json
create mode 100644 package.json
create mode 100644 playwright.config.ts
create mode 100644 src/app.css
create mode 100644 src/app.d.ts
create mode 100644 src/app.html
create mode 100644 src/hooks.ts
create mode 100644 src/lib/Counter.svelte
create mode 100644 src/lib/form.ts
create mode 100644 src/lib/header/Header.svelte
create mode 100644 src/lib/header/svelte-logo.svg
create mode 100644 src/routes/__layout.svelte
create mode 100644 src/routes/about.svelte
create mode 100644 src/routes/index.svelte
create mode 100644 src/routes/todos/_api.ts
create mode 100644 src/routes/todos/index.svelte
create mode 100644 src/routes/todos/index.ts
create mode 100644 static/favicon.png
create mode 100644 static/robots.txt
create mode 100644 static/svelte-welcome.png
create mode 100644 static/svelte-welcome.webp
create mode 100644 svelte.config.js
create mode 100644 tests/test.ts
create mode 100644 tsconfig.jsonnpx sb@next initUsing Vite 2 until: storybookjs/builder-vite#394
npm install --save vite...try it? ๐คท
date
npx envinfo --system --binaries --browsers --npmPackages "{svelte,@sveltejs/*,vite}"โฏ date
Fri Jul 1 01:25:15 PM EDT 2022
โฏ npx envinfo --system --binaries --browsers --npmPackages "{svelte,@sveltejs/*,vite,@storybook/*}"
System:
OS: Linux 5.10 Manjaro Linux
CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
Memory: 285.49 MB / 15.34 GB
Container: Yes
Shell: 5.9 - /usr/bin/zsh
Binaries:
Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
Yarn: 1.22.15 - ~/.nvm/versions/node/v16.13.0/bin/yarn
npm: 8.6.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
Browsers:
Brave Browser: 103.1.40.107
Chromium: 103.0.5060.53
Firefox: 102.0
npmPackages:
@storybook/addon-actions: ^6.5.9 => 6.5.9
@storybook/addon-essentials: ^6.5.9 => 6.5.9
@storybook/addon-interactions: ^6.5.9 => 6.5.9
@storybook/addon-links: ^6.5.9 => 6.5.9
@storybook/addon-svelte-csf: ^2.0.4 => 2.0.4
@storybook/builder-vite: ^0.1.38 => 0.1.38
@storybook/svelte: ^6.5.9 => 6.5.9
@storybook/testing-library: ^0.0.13 => 0.0.13
@sveltejs/adapter-auto: next => 1.0.0-next.53
@sveltejs/adapter-static: ^1.0.0-next.34 => 1.0.0-next.34
@sveltejs/kit: next => 1.0.0-next.357
svelte: ^3.48.0 => 3.48.0
vite: 2.9.6 => 2.9.6 
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent