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

[mbylstra]

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

To Reproduce
Steps to reproduce the behavior:

1. 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>
)

1. 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

[mbylstra]

I forgot to mention that there was another issue: Couldn't resolve parser "tsx". That was because the tsx flag was being passed to prettier, but there is no tsx parser option for prettier (perhaps it just needs to be ts which can handle both ts and tsx?). I simply removed the parts of the transform that ran prettier to get past this.

[mbylstra]

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.

[shilman]

Thank you @mbylstra !!! 🙏🙏🙏

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

@mbylstra any chance you can contribute that PR?

[mbylstra]

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.

[Vanuan]

The issue with parser options is that jscodeshift has this enum:

babel,babylon,flow,ts,tsx

while prettier has this:

babel,babel-flow,babel-ts,flow,typescript,css,json,mdx,...

A quick fix would be this:

parser: options.parser === 'tsx' ? 'typescript' : options.parser || 'babel',

But needs proper tranformation of a jscodeshift enum to the prettier enum.

[Vanuan]

Additional issue with prettier is that it doesn't read options from .prettierrc

[shilman]

@Vanuan can you submit a fix?

[JackHowa]

is there an update for this? I tried npx sb migrate --parser=tsx storiesof-to-csf --glob=stories/*.stories.tsx and saw errors:

 ERR stories/Icons.stories.tsx Transformation error (Couldn't resolve parser "tsx")
Error: Couldn't resolve parser "tsx"
    at resolveParser$1 (/Users/howardj/.npm/_npx/33417/lib/node_modules/sb/node_modules/prettier/index.js:9710:15)
    at normalizeOptions$1 (/Users/howardj/.npm/_npx/33417/lib/node_modules/sb/node_modules/prettier/index.js:9803:16)
    at apply (/Users/howardj/.npm/_npx/33417/lib/node_modules/sb/node_modules/prettier/index.js:13525:12)
    at formatWithCursor (/Users/howardj/.npm/_npx/33417/lib/node_modules/sb/node_modules/prettier/index.js:44207:15)
    at Object.format (/Users/howardj/.npm/_npx/33417/lib/node_modules/sb/node_modules/prettier/index.js:44226:12)
    at transformer (/Users/howardj/.npm/_npx/33417/lib/node_modules/sb/node_modules/@storybook/codemod/dist/transforms/storiesof-to-csf.js:251:28)
All done. 

[macrozone]

now with storybook 6 you have more reasons to run this migration, but is not possible because of this bug.

[shilman]

PRs welcome!

[shilman]

w00t!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.9 containing PR #12453 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Jeepers creepers!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.22 containing PR #12453 that references this issue. Upgrade today to try it out!

[cheapsteak]

Hi there!

I just tried running this on a typescript codebase via npx -p @storybook/cli@next sb migrate storiesof-to-csf

Got this error:

=> Applying storiesof-to-csf: 94 files
npx: installed 231 in 5.642s
Processing 94 files...
Spawning 15 workers...
Sending 7 files to free worker...
Sending 7 files to free worker...
Sending 7 files to free worker...
Sending 7 files to free worker...
Sending 7 files to free worker...
Sending 7 files to free worker...
Sending 7 files to free worker...
Sending 7 files to free worker...
Sending 7 files to free worker...
Sending 7 files to free worker...
Sending 7 files to free worker...
Sending 7 files to free worker...
Sending 7 files to free worker...
Sending 3 files to free worker...
/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/modules/es.array.is-array.js:13
$({
^

TypeError: $ is not a function
    at Object.<anonymous> (/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/modules/es.array.is-array.js:6:1)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Module._compile (/Users/chang/.npm/_npx/20306/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Object.newLoader [as .js] (/Users/chang/.npm/_npx/20306/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/internals/is-array.js:3:1)
/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/modules/es.array.is-array.js:13
$({
^

TypeError: $ is not a function
    at Object.<anonymous> (/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/modules/es.array.is-array.js:6:1)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Module._compile (/Users/chang/.npm/_npx/20306/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Object.newLoader [as .js] (/Users/chang/.npm/_npx/20306/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/internals/is-array.js:3:1)
/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/modules/es.array.is-array.js:13
$({
^

TypeError: $ is not a function
    at Object.<anonymous> (/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/modules/es.array.is-array.js:6:1)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Module._compile (/Users/chang/.npm/_npx/20306/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Object.newLoader [as .js] (/Users/chang/.npm/_npx/20306/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/internals/is-array.js:3:1)
/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/modules/es.array.is-array.js:13
$({
^

TypeError: $ is not a function
    at Object.<anonymous> (/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/modules/es.array.is-array.js:6:1)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Module._compile (/Users/chang/.npm/_npx/20306/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Object.newLoader [as .js] (/Users/chang/.npm/_npx/20306/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/internals/is-array.js:3:1)
/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/modules/es.array.is-array.js:13
$({
^

TypeError: $ is not a function
    at Object.<anonymous> (/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/modules/es.array.is-array.js:6:1)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Module._compile (/Users/chang/.npm/_npx/20306/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Object.newLoader [as .js] (/Users/chang/.npm/_npx/20306/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/internals/is-array.js:3:1)
/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/modules/es.array.is-array.js:13
$({
^

TypeError: $ is not a function
    at Object.<anonymous> (/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/modules/es.array.is-array.js:6:1)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Module._compile (/Users/chang/.npm/_npx/20306/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Object.newLoader [as .js] (/Users/chang/.npm/_npx/20306/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/internals/is-array.js:3:1)
/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/modules/es.array.is-array.js:13
$({
^

TypeError: $ is not a function
    at Object.<anonymous> (/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/modules/es.array.is-array.js:6:1)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Module._compile (/Users/chang/.npm/_npx/20306/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Object.newLoader [as .js] (/Users/chang/.npm/_npx/20306/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/internals/is-array.js:3:1)
/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/modules/es.array.is-array.js:13
$({
^

TypeError: $ is not a function
    at Object.<anonymous> (/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/modules/es.array.is-array.js:6:1)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Module._compile (/Users/chang/.npm/_npx/20306/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Object.newLoader [as .js] (/Users/chang/.npm/_npx/20306/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/internals/is-array.js:3:1)
/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/modules/es.array.is-array.js:13
$({
^

TypeError: $ is not a function
    at Object.<anonymous> (/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/modules/es.array.is-array.js:6:1)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Module._compile (/Users/chang/.npm/_npx/20306/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Object.newLoader [as .js] (/Users/chang/.npm/_npx/20306/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/internals/is-array.js:3:1)
/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/modules/es.array.is-array.js:13
$({
^

TypeError: $ is not a function
    at Object.<anonymous> (/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/modules/es.array.is-array.js:6:1)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Module._compile (/Users/chang/.npm/_npx/20306/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Object.newLoader [as .js] (/Users/chang/.npm/_npx/20306/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/internals/is-array.js:3:1)
/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/modules/es.array.is-array.js:13
$({
^

TypeError: $ is not a function
    at Object.<anonymous> (/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/modules/es.array.is-array.js:6:1)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Module._compile (/Users/chang/.npm/_npx/20306/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Object.newLoader [as .js] (/Users/chang/.npm/_npx/20306/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/internals/is-array.js:3:1)
/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/modules/es.array.is-array.js:13
$({
^

TypeError: $ is not a function
    at Object.<anonymous> (/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/modules/es.array.is-array.js:6:1)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Module._compile (/Users/chang/.npm/_npx/20306/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Object.newLoader [as .js] (/Users/chang/.npm/_npx/20306/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/internals/is-array.js:3:1)
/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/modules/es.array.is-array.js:13
$({
^

TypeError: $ is not a function
    at Object.<anonymous> (/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/modules/es.array.is-array.js:6:1)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Module._compile (/Users/chang/.npm/_npx/20306/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Object.newLoader [as .js] (/Users/chang/.npm/_npx/20306/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/internals/is-array.js:3:1)
/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/modules/es.array.is-array.js:13
$({
^

TypeError: $ is not a function
    at Object.<anonymous> (/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/modules/es.array.is-array.js:6:1)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Module._compile (/Users/chang/.npm/_npx/20306/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Object.newLoader [as .js] (/Users/chang/.npm/_npx/20306/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/internals/is-array.js:3:1)
/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/modules/es.array.is-array.js:13
$({
^

TypeError: $ is not a function
    at Object.<anonymous> (/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/modules/es.array.is-array.js:6:1)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Module._compile (/Users/chang/.npm/_npx/20306/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Object.newLoader [as .js] (/Users/chang/.npm/_npx/20306/lib/node_modules/jscodeshift/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (/Users/chang/.npm/_npx/20301/lib/node_modules/@storybook/cli/node_modules/core-js/internals/is-array.js:3:1)
All done.
Results:
0 errors
0 unmodified
0 skipped
0 ok
Time elapsed: 7.365seconds