From 78e67dcaf7d0f644657d1b720b04b3ae3d851849 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 15 Dec 2022 11:49:59 +0100 Subject: [PATCH 1/3] Make tsx default parser csf-2-to-3 codemod And don't transform storybook source code with babel when running jscodeshift --- code/lib/codemod/src/index.js | 12 +++++++++++- code/lib/codemod/src/transforms/csf-2-to-3.ts | 2 ++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/code/lib/codemod/src/index.js b/code/lib/codemod/src/index.js index 5d44b44210da..14c91d924f05 100644 --- a/code/lib/codemod/src/index.js +++ b/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, diff --git a/code/lib/codemod/src/transforms/csf-2-to-3.ts b/code/lib/codemod/src/transforms/csf-2-to-3.ts index 7520b7d8582b..7d8ede84b126 100644 --- a/code/lib/codemod/src/transforms/csf-2-to-3.ts +++ b/code/lib/codemod/src/transforms/csf-2-to-3.ts @@ -181,4 +181,6 @@ function transform({ source }: { source: string }, api: any, options: { parser?: }); } +export const parser = 'tsx'; + export default transform; From baf8a03541643f9cecc3321831e864dace57e10d Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 15 Dec 2022 16:18:06 +0100 Subject: [PATCH 2/3] Infer prettier parser from filepath, and continue even when failing --- code/lib/codemod/package.json | 1 + code/lib/codemod/src/transforms/csf-2-to-3.ts | 39 +++++++++++-------- code/yarn.lock | 15 ++++++- 3 files changed, 36 insertions(+), 19 deletions(-) diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index d2c3f96617a0..868e77462d21 100644 --- a/code/lib/codemod/package.json +++ b/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" diff --git a/code/lib/codemod/src/transforms/csf-2-to-3.ts b/code/lib/codemod/src/transforms/csf-2-to-3.ts index 7d8ede84b126..8a2a5c85074b 100644 --- a/code/lib/codemod/src/transforms/csf-2-to-3.ts +++ b/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,22 +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 const parser = 'tsx'; - -export default transform; diff --git a/code/yarn.lock b/code/yarn.lock index 1cdec3301d51..2ec2fab2c9d0 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6238,6 +6238,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 @@ -8572,6 +8573,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" @@ -10878,7 +10889,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: @@ -28137,7 +28148,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: From e3172f8b9005ee59926464acb2738c4c59f8c35a Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 15 Dec 2022 17:17:18 +0100 Subject: [PATCH 3/3] Fix unit tests --- .../lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts b/code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts index 0905da1ea0a2..3bf91f5b830b 100644 --- a/code/lib/codemod/src/transforms/__tests__/csf-2-to-3.test.ts +++ b/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', () => {