Merge pull request #20290 from storybookjs/kasper/sb-1119-sb20265-bug…

…-sb-migrate-csf-2-to-3-doesnt

CLI: sb migrate csf-2-to-3 doesn't work glob that uses multiple file extension

code/lib/codemod/package.json

@@ -60,6 +60,7 @@
     "util": "^0.12.4"
   },
   "devDependencies": {
+    "@types/jscodeshift": "^0.11.6",
     "jest": "^29.3.1",
     "jest-specific-snapshot": "^7.0.0",
     "typescript": "~4.9.3"

code/lib/codemod/src/index.js

@@ -59,7 +59,17 @@ export async function runCodemod(codemod, { glob, logger, dryRun, rename, parser
     const parserArgs = inferredParser ? ['--parser', inferredParser] : [];
     spawnSync(
       'npx',
-      ['jscodeshift', '-t', `${TRANSFORM_DIR}/${codemod}.js`, ...parserArgs, ...files],
+      [
+        'jscodeshift',
+        // this makes sure codeshift doesn't transform our own source code with babel
+        // which is faster, and also makes sure the user won't see babel messages such as:
+        // [BABEL] Note: The code generator has deoptimised the styling of repo/node_modules/prettier/index.js as it exceeds the max of 500KB.
+        '--no-babel',
+        '-t',
+        `${TRANSFORM_DIR}/${codemod}.js`,
+        ...parserArgs,
+        ...files,
+      ],
       {
         stdio: 'inherit',
         shell: true,

code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts

@@ -7,8 +7,10 @@ expect.addSnapshotSerializer({
   test: () => true,
 });
 
-const jsTransform = (source: string) => _transform({ source }, null, {}).trim();
-const tsTransform = (source: string) => _transform({ source }, null, { parser: 'tsx' }).trim();
+const jsTransform = (source: string) =>
+  _transform({ source, path: 'Component.stories.js' }, null, {}).trim();
+const tsTransform = (source: string) =>
+  _transform({ source, path: 'Component.stories.ts' }, null, { parser: 'tsx' }).trim();
 
 describe('csf-2-to-3', () => {
   describe('javascript', () => {

code/lib/codemod/src/transforms/csf-2-to-3.ts

@@ -3,7 +3,7 @@ import prettier from 'prettier';
 import * as t from '@babel/types';
 import type { CsfFile } from '@storybook/csf-tools';
 import { formatCsf, loadCsf } from '@storybook/csf-tools';
-import { jscodeshiftToPrettierParser } from '../lib/utils';
+import type { API, FileInfo, Options } from 'jscodeshift';
 
 const logger = console;
 
@@ -89,7 +89,7 @@ const isReactGlobalRenderFn = (csf: CsfFile, storyFn: t.Expression) => {
 const isSimpleCSFStory = (init: t.Expression, annotations: t.ObjectProperty[]) =>
   annotations.length === 0 && t.isArrowFunctionExpression(init) && init.params.length === 0;
 
-function transform({ source }: { source: string }, api: any, options: { parser?: string }) {
+export default function transform({ source, path }: FileInfo, api: API, options: Options) {
   const makeTitle = (userTitle?: string) => {
     return userTitle || 'FIXME';
   };
@@ -165,20 +165,27 @@ function transform({ source }: { source: string }, api: any, options: { parser?:
     return acc;
   }, []);
   csf._ast.program.body = updatedBody;
-  const output = formatCsf(csf);
-
-  const prettierConfig = prettier.resolveConfig.sync('.', { editorconfig: true }) || {
-    printWidth: 100,
-    tabWidth: 2,
-    bracketSpacing: true,
-    trailingComma: 'es5',
-    singleQuote: true,
-  };
+  let output = formatCsf(csf);
 
-  return prettier.format(output, {
-    ...prettierConfig,
-    parser: jscodeshiftToPrettierParser(options?.parser),
-  });
+  try {
+    const prettierConfig = prettier.resolveConfig.sync('.', { editorconfig: true }) || {
+      printWidth: 100,
+      tabWidth: 2,
+      bracketSpacing: true,
+      trailingComma: 'es5',
+      singleQuote: true,
+    };
+
+    output = prettier.format(output, {
+      ...prettierConfig,
+      // This will infer the parser from the filename.
+      filepath: path,
+    });
+  } catch (e) {
+    logger.log(`Failed applying prettier to ${path}.`);
+  }
+
+  return output;
 }
 
-export default transform;
+export const parser = 'tsx';

code/yarn.lock

@@ -6211,6 +6211,7 @@ __metadata:
     "@storybook/csf-tools": 7.0.0-beta.12
     "@storybook/node-logger": 7.0.0-beta.12
     "@storybook/types": 7.0.0-beta.12
+    "@types/jscodeshift": ^0.11.6
     cross-spawn: ^7.0.3
     globby: ^11.0.2
     jest: ^29.3.1
@@ -8522,6 +8523,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/jscodeshift@npm:^0.11.6":
+  version: 0.11.6
+  resolution: "@types/jscodeshift@npm:0.11.6"
+  dependencies:
+    ast-types: ^0.14.1
+    recast: ^0.20.3
+  checksum: 1d204a4c3d9f52669e315dfbc1e65434ec55ee884574306d35048b89ef83b625c64d510228b6aabbd4248af566e02e0ce9de0aa8ccdfff696c69fbaced7007e7
+  languageName: node
+  linkType: hard
+
 "@types/jsdom@npm:^16.2.4":
   version: 16.2.15
   resolution: "@types/jsdom@npm:16.2.15"
@@ -10818,7 +10829,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ast-types@npm:0.14.2, ast-types@npm:^0.14.2":
+"ast-types@npm:0.14.2, ast-types@npm:^0.14.1, ast-types@npm:^0.14.2":
   version: 0.14.2
   resolution: "ast-types@npm:0.14.2"
   dependencies:
@@ -27798,7 +27809,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"recast@npm:^0.20.4":
+"recast@npm:^0.20.3, recast@npm:^0.20.4":
   version: 0.20.5
   resolution: "recast@npm:0.20.5"
   dependencies: