TypeScript and Preprocessors support #4
Comments
|
I didn't think TypeScript/Preprocessor supports is important for stories, but I'll try to add it soon 😄 It will reuse the configuration of storybook, inside |
|
A problem with the lack of typescript support is that it also won't automatically detect props/events/slots/etc on typescript components, not just that the stories themselves can't be written in TS I think it would be a great addition to this addon |
|
I second mpeg's observation. As soon as you add a single TypeScript definition, props/slots etc. aren't automatically detected. |
|
I am waiting for Storybook v6.2 before adding this feature. That's said, vscode check/autocompletion is not related to this issue. the vscode svelte plugin supports typescript checking without explicitly configuring a preprocessor. |
|
Was just searching for TS support in svelte native format but ending up here. But now I also learned why some events/slots don't show up in SB 😄 |
|
@j3rem1e any news on this one? Don't want to be pushy, but as ts-support is maturing in svelte, I would like to argue that this missing feature breaks the promise of "native" stories in storybook for svelte in a way. And (as in my case) it would be very convenient, to be able to write ts through the whole codebase and don't have to think about the context :) Thanks for your efforts! |
|
Storybook is great and Svelte+Storybook+Typescript could be a very potent combination. I'm using this workaround in .storybook/main.js to use Typescript components while the issue is being fixed: module.exports = {
webpackFinal: async (config) => {
const svelteLoader = config.module.rules.find( (r) => r.loader && r.loader.includes('svelte-loader'))
svelteLoader.options.preprocess = require('svelte-preprocess')()
return config
},
...
}; |
Was anyone able to make it work with vite aswell? |
I'm still working on it; but this runs OK (so far: I only have a skeleton project with no vendor imports): ./storybook/main.js module.exports = {
stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-svelte-csf'],
framework: '@storybook/svelte',
core: { builder: 'storybook-builder-vite' },
async viteFinal(config, { configType }) {
config.preprocess = preprocess({
scss: {
prependData: "@import './static/style.scss';"
}
});
return config;
}
};I've seen examples where you handle preprocess like this: ...but I couldn't get that to work; so I'm currently duplicating the config :/ I also had issues related to module imports. To get around that I added ./storybook/package.json: Storybook seems to run fine with my TS components and my scss is processed correctly; but at the moment the Docs > code view sometimes shows |
Are you also able to use TypeScript inside of your |
I hadn't tried; but no: I also get errors when I try typing something in one of those files :/ |
|
I'm not sure how the various repos fit together, but I sent a fix for this in |
Partially reverts #382 The reason given there was that: > which may not be what storybook users want / expect, since their production config may be different from the storybook config (same reason we don't automatically merge vite.config.js) However, I think that users would expect their `svelte.config.js` to be taken into account. E.g. right now the user's preprocessing configuration is ignored. The user can still pass custom `svelteOptions` in `.storybook/main.cjs` if they need to override their normal options for some reason (although I can't think of a reason off the top of my head why this would be necessary) You can see a number of people complaining preprocessing doesn't work here: storybookjs/addon-svelte-csf#4
|
I set up a fresh-install repo with a simple TypeScript component. I hope it can be useful to test this issue out. The only two issues are currently:
Is there anything else we can do to help with this? More than happy to help. |
|
Any planned fixes for the two issues @carusog brought up? |
|
As a temporary workaround, I've set up my const sveltePreprocess = require('svelte-preprocess');
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-interactions',
'@storybook/addon-svelte-csf'
],
framework: '@storybook/svelte',
core: {
builder: '@storybook/builder-vite'
},
svelteOptions: {
preprocess: [
sveltePreprocess({
postcss: true // (1)
})
]
},
features: {
storyStoreV7: false
},
async viteFinal(config, { configType }) { // (2)
/** @type {import('vite').UserConfig} */
return {
...config,
resolve: {
alias: [
{
find: '$lib',
replacement: path.resolve(__dirname, '../src/lib')
},
]
},
};
}
};Notice that I am:
I am far away to be an expert, but I suspect this may be an issue with Vite interoperability features between CommonJS files and ES6 Modules files. FYI @AcePetrucci |
|
In the end I had to give up on Svelte and SvelteKit for now since there's still so many issues trying to make them work with type definitions, storybook and exporting the components as WebComponents. Truly a shame since like Svelte as library so much. But before that I also got it working too, somewhat similar to how you did: const path = require('path');
const { loadConfigFromFile, mergeConfig } = require('vite');
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'@storybook/addon-svelte-csf'
],
framework: '@storybook/svelte',
core: {
builder: '@storybook/builder-vite'
},
svelteOptions: {
preprocess: import('../svelte.config.js').then((module) => {
return module.preprocess;
})
},
features: {
storyStoreV7: false
},
async viteFinal(config, { configType }) {
const { config: userConfig } = await loadConfigFromFile(
path.resolve(__dirname, '../vite.config.js')
);
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
});
}
};I hope that can help anyone on the same boat |
|
Thanks, @AcePetrucci, it looks like a more elegant solution. I'll give it a try later this week. 🙏 |
|
Using typescript does not work in |
|
@JReinhold yes the same issue |
|
I started a fresh repo and I don't have any issues with typescript inside the .stories.svelte using the default configuration. |
|
You might be right @Tyneor, I'll close this. If anyone is still experiencing this with the latest versions of packages, feel free to write again with a link to a reproduction. |
Describe the bug
Trying to use TypeScript in the stories.svelte caused error:
ParseError: Unexpected tokenExpected behavior
TypeScript should work using svelte preprocessor: https://svelte.dev/docs#svelte_preprocess
Screenshots and/or logs
Environment
The text was updated successfully, but these errors were encountered: