#How to include typescript in stories for Storybook 7.0 with svelte

22 messages · Page 1 of 1 (latest)

dreamy cipher
#

Hello, I'm trying to migrate from Storybook 6.5 to 7.0 and am not sure how to have typescript work in stories. I tried following what I found in the docs but I think it's react specific?

main.cjs

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|ts|svelte)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-svelte-csf', '@storybook/addon-a11y', '@storybook/addon-interactions', {
    name: '@storybook/addon-postcss',
    // awaiting discord response for potential issue
    options: {
      postcssLoaderOptions: {
        implementation: require('postcss')
      }
    }
  }],
  framework: '@storybook/sveltekit',
  staticDirs: ['../static'],
  features: {
    interactionsDebugger: true,
  },
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
};

At any rate I don't think it's correct as I have Extraction errors and Unexpected tokens everywhere a type is mentioned.

lime flint
#

Do you have a svelte.config.js file and/or vite.config.js? In the root of your project?

dreamy cipher
#

I have a vite-config.

import { sveltekit } from '@sveltejs/kit/vite';
import path from 'path';

/** @type {import('vite').UserConfig} */
const config = {
  plugins: [sveltekit()],
  resolve: {
    alias: {
      $src: path.resolve('src'),
      $lib: path.resolve('src/lib'),
      $stories: path.resolve('src/stories'),
      $utils: path.resolve('src/utils'),
      $decorators: path.resolve('src/decorators'),
      $helpers: path.resolve('src/lib/helpers'),
      $assets: path.resolve('src/lib/assets'),
      $types: path.resolve('src/types.ts'),
    },
  },
};

export default config;
lime flint
#

Doesn't svelte also need a svelte.config.js to configure it to work with typescript?

dreamy cipher
#

and a svelte.config

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  preprocess: [
    preprocess({
      script: 'typescript',
      style: 'postcss',
      postcss: true,
      preserve: ['json'],
    }),
  ],
  kit: {
    adapter: adapter(),
  },
};

export default config;
lime flint
#

Those should be getting pulled in to storybook automatically. Is this a public project that we could take a look at?

#

Can you run npx sb@next info and share the results?

dreamy cipher
#

looks like the errors are coming from the csf add-on

I add can a story with typescript to the repo I made earlier in another branche

lime flint
#

What version of the csf addon are you using?

dreamy cipher
# 
Environment Info:

  System:
    OS: macOS 13.1
    CPU: (10) arm64 Apple M1 Max
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.16.0/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Safari: 16.2
  npmPackages:
    @storybook/addon-a11y: ^7.0.0-beta.21 => 7.0.0-beta.21 
    @storybook/addon-actions: ^7.0.0-beta.21 => 7.0.0-beta.21 
    @storybook/addon-essentials: ^7.0.0-beta.21 => 7.0.0-beta.21 
    @storybook/addon-interactions: ^7.0.0-beta.21 => 7.0.0-beta.21 
    @storybook/addon-links: ^7.0.0-beta.21 => 7.0.0-beta.21 
    @storybook/addon-postcss: ^2.0.0 => 2.0.0 
    @storybook/addon-svelte-csf: ^3.0.0-next.3 => 3.0.0-next.3 
    @storybook/builder-vite: ^7.0.0-beta.21 => 7.0.0-beta.21 
    @storybook/client-logger: ^7.0.0-beta.21 => 7.0.0-beta.21 
    @storybook/svelte: ^7.0.0-beta.21 => 7.0.0-beta.21 
    @storybook/sveltekit: ^7.0.0-beta.21 => 7.0.0-beta.21 
    @storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1
#

3.0.0-next.3

lime flint
#

ok, that is correct, then. You may need to either update or remove addon-postcss (I don't think you need it). but that won't impact this.

#

Sorry, I need to step away for a bit, but maybe @teal fox might be able to help if he's around.

dreamy cipher
teal fox
#

Someone reported something similar in the addon's repo last week, it might be that TS is currently broken in the addon.
Is this only a problem for stories.svelte files, or does it still work if you have JS in .stories.svelte but TS in any of your components?
https://github.com/storybookjs/addon-svelte-csf/issues/4#issuecomment-1374488604

GitHub
TypeScript and Preprocessors support · Issue #4 · storybookjs/addon...

Describe the bug Trying to use TypeScript in the stories.svelte caused error: ParseError: Unexpected token <script lang="ts"> import type { IRoute } from './...

dreamy cipher
#

I think it still works in the svelte files but I'l just commenting out the ts in the stories to check

dreamy cipher
#

Yes, I can confirm that typescript is working fine in the component files just not in the stories.

teal fox
#

Alright. Do you mind filing an issue in the addon repo, so we can track it? this is definitely a bug we want to fix during the beta.

dreamy cipher
teal fox
#

yeah that looks fine.

dreamy cipher
teal fox
#

Thanks for this!