search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
83.89k stars 9.2k forks source link

SvelteKit setup only works on TypeScript projects #20595

Closed benmccann closed 1 year ago

benmccann commented 1 year ago

Describe the bug

npx sb@next init always generates src/stories/Button.svelte as a TypeScript component. This won't work for projects that don't have TypeScript setup

To Reproduce

Just choose the defaults from the SvelteKit wizard and then `npx sb@next init` will generate a broken project

npm create svelte@latest myapp
cd myapp
npx sb@next init
npm run build-storybook

System

npmPackages:
    @storybook/addon-essentials: ^7.0.0-beta.25 => 7.0.0-beta.25 
    @storybook/addon-interactions: ^7.0.0-beta.25 => 7.0.0-beta.25 
    @storybook/addon-links: ^7.0.0-beta.25 => 7.0.0-beta.25 
    @storybook/blocks: ^7.0.0-beta.25 => 7.0.0-beta.25 
    @storybook/svelte: ^7.0.0-beta.25 => 7.0.0-beta.25 
    @storybook/sveltekit: ^7.0.0-beta.25 => 7.0.0-beta.25 
    @storybook/testing-library: ^0.0.13 => 0.0.13

Additional context

I believe the SvelteKit wizard runs TypeScript files through the TypeScript compiler and outputs JavaScript versions of those files for JS projects, which may be an option to consider if you don't want to maintain two versions of the files. It might not be worth the setup if this is the only file you need both a JS and TS version of though

JReinhold commented 1 year ago

Yeah so the issue is that we detect TS Vs JS by seeing if typescript is a dependency of the project, but in SvelteKit that is always the case, presumably because it is used to check JSDocs. The detection determines if the default stories are written in TS or JS

So there are two possible fixes here:

  1. Make a special TS detection for Svelte projects that looks at the Svelte config and determines if it is setup to transpile TS. I think this will be a bit hard.
  2. Don't have TS versions of the default stories, always use JSDoc versions.

I'm okay with 2, but I really don't want to remove TS files from our sandbox/ci templates, as it's a good way for us to catch any Storybook+SvelteKit+TypeScript regressions. So I'm hoping we can remove it from the CLI init, but keep them for sandboxes, where we control the SvelteKit setup anyway.

benmccann commented 1 year ago

We use tsconfig.json for TypeScript projects and jsconfig.json for JS projects. Maybe you could just use the JS version of the story when jsconfig.json is found?

benmccann commented 1 year ago

I found where this lives:

https://github.com/storybookjs/storybook/blob/28e34ace810681f46555fdfc5de5845aeb22240a/code/lib/cli/src/detect.ts#L151

shilman commented 1 year ago

Whoopee!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.44 containing PR #20944 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease