From 102693522b192f597fb48fbe72e698e3aad403d7 Mon Sep 17 00:00:00 2001 From: Marcus Notheis Date: Fri, 19 Jul 2024 12:23:55 +0200 Subject: [PATCH 1/3] create wrapper cli for codemod --- packages/cli/src/bin/index.ts | 98 ++++++++++++++++++++---- packages/cli/src/scripts/codemod/main.ts | 40 ++++++++++ 2 files changed, 121 insertions(+), 17 deletions(-) create mode 100644 packages/cli/src/scripts/codemod/main.ts diff --git a/packages/cli/src/bin/index.ts b/packages/cli/src/bin/index.ts index c985c807d2d..5ebf37b955a 100755 --- a/packages/cli/src/bin/index.ts +++ b/packages/cli/src/bin/index.ts @@ -3,26 +3,25 @@ import { resolve } from 'node:path'; import { parseArgs } from 'node:util'; import * as process from 'process'; -const options = { - packageName: { - type: 'string' as const - }, - out: { - type: 'string' as const, - short: 'o' - }, - additionalComponentNote: { - type: 'string' as const - } -}; -const { values, positionals } = parseArgs({ options, allowPositionals: true }); +const { positionals } = parseArgs({ allowPositionals: true, strict: false }); const [command] = positionals; -console.log(command); - switch (command) { case 'create-wrappers': { + const wrapperOptions = { + packageName: { + type: 'string' as const + }, + out: { + type: 'string' as const, + short: 'o' + }, + additionalComponentNote: { + type: 'string' as const + } + }; + const { values } = parseArgs({ options: wrapperOptions, allowPositionals: true }); const { packageName, out, additionalComponentNote } = values; const missingParameters = []; if (!packageName) { @@ -51,9 +50,74 @@ switch (command) { } case 'resolve-cem': { + const cemOptions = { + packageName: { + type: 'string' as const + }, + out: { + type: 'string' as const, + short: 'o' + } + }; + const { values } = parseArgs({ options: cemOptions, allowPositionals: true }); + const { packageName, out } = values; + const missingParameters = []; + if (!packageName) { + missingParameters.push('--packageName'); + } + if (!out) { + missingParameters.push('--out'); + } + + if (missingParameters.length > 0) { + console.error(` + Missing parameters: ${missingParameters.join(', ')} + Example: ui5-wcr resolve-cem --packageName @ui5/webcomponents --out ./src/components + + Please add the missing parameters and try again. + `); + process.exit(1); + } + const resolveCEM = await import('../scripts/resolve-cem/main.js'); - const outPath = resolve(process.cwd(), values.out!); - await resolveCEM.default(values.packageName!, outPath); + const outPath = resolve(process.cwd(), out!); + await resolveCEM.default(packageName!, outPath); + break; + } + + case 'codemod': { + const codemodOptions = { + transform: { + type: 'string' as const + }, + src: { + type: 'string' as const + }, + typescript: { + type: 'boolean' as const, + default: false + } + }; + const { values } = parseArgs({ options: codemodOptions, allowPositionals: true }); + const missingParameters = []; + if (!values.src) { + missingParameters.push('--src'); + } + if (!values.transform) { + missingParameters.push('--transform'); + } + + if (missingParameters.length > 0) { + console.error(` + Missing parameters: ${missingParameters.join(', ')} + Example: ui5-wcr codemod --src ./src --transform v2 (--typescript) + + Please add the missing parameters and try again. + `); + process.exit(1); + } + const codemod = await import('../scripts/codemod/main.js'); + await codemod.default(values.transform!, values.src!, values.typescript!); break; } default: diff --git a/packages/cli/src/scripts/codemod/main.ts b/packages/cli/src/scripts/codemod/main.ts new file mode 100644 index 00000000000..e2430371022 --- /dev/null +++ b/packages/cli/src/scripts/codemod/main.ts @@ -0,0 +1,40 @@ +import childProcess from 'node:child_process'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const SUPPORTED_TRANSFORMERS = ['v2']; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +const transformerDir = path.resolve(__dirname, 'transforms'); + +export default async function runCodemod(transform: string, inputDir: string, useTypeScript: boolean) { + if (!SUPPORTED_TRANSFORMERS.includes(transform)) { + // eslint-disable-next-line no-console + console.error('Invalid transform choice, pick one of:'); + // eslint-disable-next-line no-console + console.error(SUPPORTED_TRANSFORMERS.map((x) => '- ' + x).join('\n')); + process.exit(1); + } + + const jscodeshiftOptions = []; + + const transformerPath = path.join(transformerDir, transform, `main.cjs`); + jscodeshiftOptions.push(`--transform`, transformerPath); + + if (useTypeScript) { + jscodeshiftOptions.push('--extensions=tsx,ts,jsx,js'); + jscodeshiftOptions.push('--parser', 'tsx'); + } else { + jscodeshiftOptions.push('--extensions=jsx,js'); + } + + jscodeshiftOptions.push('--ignore-pattern=**/node_modules/**'); + + // eslint-disable-next-line no-console + console.log(`Executing 'npx jscodeshift ${jscodeshiftOptions.join(' ')} ${inputDir}'`); + childProcess.spawnSync('npx', ['jscodeshift', ...jscodeshiftOptions, inputDir], { + stdio: 'inherit' + }); +} From 187efcc13d7c25c88080a98ee347d6500540ce33 Mon Sep 17 00:00:00 2001 From: Marcus Notheis Date: Fri, 19 Jul 2024 13:11:48 +0200 Subject: [PATCH 2/3] Update MigrationGuide.mdx --- docs/MigrationGuide.mdx | 34 +++++++++++++++++++++++++++++++--- 1 file changed, 31 insertions(+), 3 deletions(-) diff --git a/docs/MigrationGuide.mdx b/docs/MigrationGuide.mdx index 2b1f289c859..1d4c7818ae9 100644 --- a/docs/MigrationGuide.mdx +++ b/docs/MigrationGuide.mdx @@ -1,6 +1,7 @@ +import './MigrationGuide.css'; import { Footer, TableOfContent } from '@sb/components'; import { Meta } from '@storybook/blocks'; -import './MigrationGuide.css'; +import { MessageStrip } from '@ui5/webcomponents-react'; @@ -14,10 +15,37 @@ or the [changelog](?path=/docs/change-log--page)._ > This migration guide only covers breaking changes when updating from v1 to v2. > For migration guides for older releases, please refer to our [Migration Guide Archive](https://github.com/SAP/ui5-webcomponents-react/blob/main/docs/MigrationGuide.archive.md). -
- +## Codemod + +To make the migration to UI5 Web Components (for React) v2 easier, +we provide a codemod which tries to transform most of the breaking changes. + + + The codemod is a best efforts attempt to help you migrate the breaking change. Please review the generated code + thoroughly! +
+ Also, there are edge cases that cannot be found by the code mod, so please keep an eye on the log output. +
+ + Applying the codemod might break your code formatting, so please don't forget to run prettier and/or eslint + after you've applied the codemod! + + + } +/> + +```shell +npx @ui5/webcomponents-react-cli codemod --transform v2 \ + --src ./path/to/src \ + --typescript # only if you use TypeScript in your project, omit if you use JavaScript +``` + ## General changes ### Removed `react-jss` From 65150174d473cd97ec61cf16b986fd7720b84a0f Mon Sep 17 00:00:00 2001 From: Marcus Notheis Date: Fri, 19 Jul 2024 13:30:13 +0200 Subject: [PATCH 3/3] Update MigrationGuide.mdx --- docs/MigrationGuide.mdx | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/MigrationGuide.mdx b/docs/MigrationGuide.mdx index 1d4c7818ae9..1a11226faae 100644 --- a/docs/MigrationGuide.mdx +++ b/docs/MigrationGuide.mdx @@ -30,8 +30,6 @@ we provide a codemod which tries to transform most of the breaking changes. The codemod is a best efforts attempt to help you migrate the breaking change. Please review the generated code thoroughly!
- Also, there are edge cases that cannot be found by the code mod, so please keep an eye on the log output. -
Applying the codemod might break your code formatting, so please don't forget to run prettier and/or eslint after you've applied the codemod!