storybook: `storiesof-to-csf.js` codemod does not support Typescript (tsx in particular)

Describe the bug storiesof-to-csf.js does not support Typescript (tsx in particular)

To Reproduce Steps to reproduce the behavior:

Create following example file:

Test.stories.tsx

import { storiesOf } from "@storybook/react"
import * as React from "react"

storiesOf("Test Component", module).add(
  "Story 1",
  () => <div>hello</div>
)

Run ./node_modules/.bin/jscodeshift --parser=tsx -t ./node_modules/@storybook/codemod/dist/transforms/storiesof-to-csf.js Test.stories.tsx

The script should run without errors, but you should see that the file Test.stories.tsx has not been upgraded. However, you should see that the line import { storiesOf } from "@storybook/react" has been removed from the file, so the transform is doing something, but nothing more than that.

Note: I haven’t tried this is with .ts files, only .tsx so I don’t know if the problem is specific to .tsx or .ts and .tsx

Expected behavior The test file should be completely upgraded to CSF format

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 6
Comments: 20 (11 by maintainers)

Most upvoted comments

I started a branch but it was very unfinished and I haven’t had a chance to revisit. The hard part was making the test suite (and refactoring it to run tests for Typescript as well as JS). The fix itself is just:

replace “Literal” to “StringLiteral”
remove the prettier code (it’s unecessary and does not work in Typescript)

But then it will only work in Typescript, not JS, so it needs a conditional.

I’m hoping I can prepare a proper PR in my next “cooldown” period at work, which will be in a couple of weeks.

mbylstra on Mar 2, 2020

After a lot of debugging, I found a simple fix: change "Literal" to "StringLiteral". It worked on our 20+ stories. It appears that a string literal token is named “Literal” in the JS AST and “StringLiteral” in the ts/tsx AST. This was causing all of the add methods to be filtered out as it wasn’t finding the string literal "add" for the method name. I’ll try to prepare a PR with tests (and make it both JS and TS/X compatible) this weekend. If I don’t get to it, this is the simple fix if anyone else wants to upgrade their ts/tx stories, or if someone else wants to prepare a PR.

mbylstra on Jan 30, 2020

update: this seems to have been because I was specifying some core-js settings in my babel.config.js file that was causing issues. Temporarily removing that config let the transform complete.

Before:

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {},
        useBuiltIns: 'usage', // include polyfills only on found usages of es6 in our code
        corejs: { version: 3 }, // use core-js@3 for polyfills
      },
    ],
    '@babel/preset-react',
    '@babel/preset-typescript',
  ],
};

After

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        // targets: {},
        // useBuiltIns: 'usage', // include polyfills only on found usages of es6 in our code
        // corejs: { version: 3 }, // use core-js@3 for polyfills
      },
    ],
    '@babel/preset-react',
    '@babel/preset-typescript',
  ],
};

walkerdb on Feb 1, 2022

@Vanuan can you submit a fix?

shilman on Apr 1, 2020