Closed unknownterritory closed 1 year ago
What about Sveltekit aliased imports, like $app/env
etc? They don't seem to work for me in storybook, and I'm not sure what I need to do to get Webpack to respect them
Curiously, the latest version appears to change the name of app.css
to app.postcss
. I found I needed to change the name back to app.css
to get things working.
What about Sveltekit aliased imports, like
$app/env
etc? They don't seem to work for me in storybook, and I'm not sure what I need to do to get Webpack to respect them
I got it compile/bundle with this main.csj:
const path = require('path');
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx|svelte)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-svelte-csf"
],
"svelteOptions": {
// https://github.com/storybookjs/storybook/issues/11587
// "preprocess": require("../svelte.config.js").preprocess
},
webpackFinal: async (config) => {
config.resolve = {
alias: {
'$app': path.resolve(__dirname, '../node_modules/@sveltejs/kit/assets/runtime/app'),
},
};
const svelteLoader = config.module.rules.find(
(r) => r.loader && r.loader.includes("svelte-loader"),
);
svelteLoader.options.preprocess = require("svelte-preprocess")({});
return config;
}
}
storybook starts, but when I open the story of my component I get a TypeError: Cannot read property 'page' of undefined
triggered by import { page } from '$app/stores';
.
It's not big deal for me though, I'll try to separate pure UI components from components/wrappers that actually depends on svelte kit
Just FYI Sveltekit runtime modules are fixed if you use the Vite storybook builder, they won't work with webpack
Not sure if this is related but I found a solution to getting Tailwind JIT work with Storybook hot reload (dev mode), posted here: https://github.com/tailwindlabs/tailwindcss/discussions/6570#discussioncomment-2569691
@sveltejs/kit/experimental/vite
has been released in @sveltejs/kit
version 1.0.0-next.353
in part to provide improved Storybook support. Feedback welcome in https://github.com/sveltejs/kit/issues/5184
If anyone has had a chance to test @sveltejs/kit/experimental/vite
, I'd really love to know in https://github.com/sveltejs/kit/issues/5184 if it works. We'd like someone to confirm it works with Storybook as we consider bringing it out of experimental
Storybook 7 and Tailwind for SvelteKit can be setup with a single command each:
npx storybook@next init
npx svelte-add@latest tailwindcss
Please note SvelteKit support exists only in Storybook 7 beta
Is your feature request related to a problem? Please describe A lot has improved about the way Storybook recognizes the context in which it is being installed and then installs itself. However, not only a new version of Svelte is out (with which Storybook doesn't work out of the box) but integrating Tailwind keeps being cumbersome and needing a lot of research and trial and error.
According to The State of CSS 2019 and 2010, Tailwind is the most used CSS framework. Components that are styled with Tailwind need consequently to be shown in Storybook with the same styles. Having documentation that enabled integrating these three technologies without too much trouble would be extremely appreciated.
Describe the solution you'd like I would like to see:
Are you able to assist to bring the feature to reality? Possibly, with documentation. In Additional context I report on the solution I've implemented so far, just as a temporary workaround.
Additional context Currently, the following seem to be the necessary steps to get these three technologies to play well together:
npm init svelte@next
followed bynpm i
✔ Which Svelte app template? › SvelteKit demo app ✔ Use TypeScript? … No ✔ Add ESLint for code linting? … Yes ✔ Add Prettier for code formatting? › Yesnpx sb@next init
.npx sb init
yelds similar results.npm run storybook
. This fails with ESM errors..storybook/main.js
and.storybook/preview.js
to.cjs
."preprocess": require("../svelte.config.js").preprocess
withinsvelteOptions
. This and the previous step are documented as a workaround in Storybook cannot be built on packages using "type": "module" #11587.npx svelte-add postcss
followed bynpm i
.npx svelte-add tailwindcss
followed bynpm i
. JIT is still misbehaving so I would recommend avoiding using it while developing.to
src/app.css
. There's a fix in progress for it, discussion at issue #42.storybook/preview.cjs
:Also change
.storybook/main.js
according to the following example: