@commercetools-frontend/codemod 0.2.0 → 21.13.1

package/README.md

@@ -9,7 +9,7 @@ Codemod transformations for Custom Applications.
 ## Usage
 
 ```bash
-$ npx @commercetools-frontend/codemod <transform> <glob_pattern>
+$ npx @commercetools-frontend/codemod@latest <transform> <glob_pattern>
 ```
 
 We recommend to run `prettier` on the modified files to preserve the formatting configured on your project. For example, you can run `prettier --write $(git diff --name-only)`.
@@ -23,7 +23,7 @@ We recommend to run `prettier` on the modified files to preserve the formatting
 Remove deprecated `level` and `baseZIndex` props from modal page components.
 
 ```
-$ npx @commercetools-frontend/codemod remove-deprecated-modal-level-props 'src/**/*.js'
+$ npx @commercetools-frontend/codemod@latest remove-deprecated-modal-level-props 'src/**/*.{js,jsx,ts,tsx}'
 ```
 
 ### `rename-js-to-jsx`
@@ -31,5 +31,13 @@ $ npx @commercetools-frontend/codemod remove-deprecated-modal-level-props 'src/*
 Rename `.js` files using React JSX syntax to `.jsx`.
 
 ```
-$ npx @commercetools-frontend/codemod rename-js-to-jsx 'src/**/*.js'
+$ npx @commercetools-frontend/codemod@latest rename-js-to-jsx 'src/**/*.js'
+```
+
+### `rename-mod-css-to-module-css`
+
+Rename `.mod.css` files to `.module.css` and update imports.
+
+```
+$ npx @commercetools-frontend/codemod@latest rename-mod-css-to-module-css 'src/**/*.{js,jsx,ts,tsx}'
 ```

package/bin/mc-codemod.js

@@ -1,3 +1,3 @@
 #!/usr/bin/env node
 
-require('../').run();
+require('../').cli();

package/build/package.json

@@ -0,0 +1,40 @@
+{
+    "name": "@commercetools-frontend/codemod",
+    "version": "21.13.1",
+    "description": "Codemod transformations for Custom Applications",
+    "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/commercetools/merchant-center-application-kit.git",
+        "directory": "packages/codemod"
+    },
+    "homepage": "https://docs.commercetools.com/custom-applications",
+    "keywords": ["javascript", "frontend", "codemod", "toolkit"],
+    "license": "MIT",
+    "publishConfig": {
+        "access": "public"
+    },
+    "main": "./build/src/index.js",
+    "files": ["bin", "build", "package.json", "LICENSE", "README.md"],
+    "bin": {
+        "mc-codemod": "./bin/mc-codemod.js"
+    },
+    "scripts": {
+        "build": "rimraf build && tsc",
+        "build:bundles:watch": "yarn build -w"
+    },
+    "dependencies": {
+        "cac": "6.7.12",
+        "glob": "8.0.3",
+        "jscodeshift": "0.13.1"
+    },
+    "devDependencies": {
+        "@tsconfig/node16": "^1.0.3",
+        "@types/jscodeshift": "0.11.5",
+        "rimraf": "3.0.2",
+        "typescript": "4.7.4"
+    },
+    "engines": {
+        "node": ">=14"
+    }
+}

package/build/src/cli.js

@@ -0,0 +1,77 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.run = void 0;
+const path_1 = __importDefault(require("path"));
+const cac_1 = __importDefault(require("cac"));
+const glob_1 = __importDefault(require("glob"));
+// @ts-ignore internal module
+const Runner_1 = __importDefault(require("jscodeshift/src/Runner"));
+const package_json_1 = __importDefault(require("../package.json"));
+const cli = (0, cac_1.default)('mc-codemod');
+const transforms = [
+    {
+        name: 'remove-deprecated-modal-level-props',
+        description: 'Remove deprecated "level" and "baseZIndex" props from modal page components.',
+    },
+    {
+        name: 'rename-js-to-jsx',
+        description: 'Rename ".js" files using React JSX syntax to ".jsx".',
+    },
+    {
+        name: 'rename-mod-css-to-module-css',
+        description: 'Rename ".mod.css" files to ".module.css" and update imports.',
+    },
+];
+const executeCodemod = async (transform, globPattern, globalOptions) => {
+    const files = glob_1.default.sync(globPattern);
+    const runJscodeshift = async (transformPath, filePaths, options) => {
+        await Runner_1.default.run(transformPath, filePaths, options);
+    };
+    switch (transform) {
+        case 'remove-deprecated-modal-level-props':
+        case 'rename-js-to-jsx':
+        case 'rename-mod-css-to-module-css': {
+            const transformPath = path_1.default.join(__dirname, `transforms/${transform}.js`);
+            await runJscodeshift(transformPath, files, {
+                extensions: 'tsx,ts,jsx,js',
+                ignorePattern: [
+                    '**/node_modules/**',
+                    '**/public/**',
+                    '**/dist/**',
+                    '**/build/**',
+                ],
+                parser: 'tsx',
+                verbose: 0,
+                dry: globalOptions.dryRun,
+            });
+            break;
+        }
+        default:
+            throw new Error(`Unknown transform ${transform}.`);
+    }
+};
+const run = () => {
+    cli.option('--dry-run', `(optional) Executes the command but does not send any mutation request.`, { default: false });
+    // Default command
+    cli
+        .command('')
+        .usage('\n\n  Codemods for updating Custom Applications.')
+        .action(() => {
+        cli.outputHelp();
+    });
+    // Transform commands
+    transforms.forEach((transform) => {
+        cli
+            .command(`${transform.name} <glob-pattern>`, transform.description)
+            .usage(`${transform.name} <glob-pattern>\n\n  ${transform.description}`)
+            .action((globPattern, globalOptions) => executeCodemod(transform.name, globPattern, globalOptions));
+    });
+    cli.help();
+    cli.version(package_json_1.default.version);
+    cli.parse();
+};
+exports.run = run;
+exports.default = exports.run;

package/build/src/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cli = void 0;
+const cli_1 = __importDefault(require("./cli"));
+exports.cli = cli_1.default;

package/build/{transforms → src/transforms}/remove-deprecated-modal-level-props.js

@@ -15,19 +15,26 @@ function removeDeprecatedModalLevelProps(file, api, options) {
         const node = path.node;
         if (node.name.type === 'JSXIdentifier' &&
             componentNamesWithDeprecatedZIndexProps.includes(node.name.name)) {
-            node.attributes =
-                node.attributes?.filter((attribute) => {
-                    if (attribute.type === 'JSXAttribute' &&
-                        attribute.name.type === 'JSXIdentifier') {
-                        const hasDeprecatedAttribute = deprecatedPropsToBeRemoved.includes(attribute.name.name);
-                        hasModifications = true;
-                        return !hasDeprecatedAttribute;
-                    }
-                    return true;
-                }) ?? [];
+            if (options.dry) {
+                api.stats(file.path);
+            }
+            else {
+                node.attributes =
+                    node.attributes?.filter((attribute) => {
+                        if (attribute.type === 'JSXAttribute' &&
+                            attribute.name.type === 'JSXIdentifier') {
+                            const hasDeprecatedAttribute = deprecatedPropsToBeRemoved.includes(attribute.name.name);
+                            hasModifications = true;
+                            return !hasDeprecatedAttribute;
+                        }
+                        return true;
+                    }) ?? [];
+            }
         }
     }
     root.find(j.JSXOpeningElement).forEach(removeDepreactedPropsFromComponent);
-    return hasModifications ? root.toSource(options) : null;
+    return hasModifications
+        ? root.toSource({ ...options, quote: 'single' })
+        : null;
 }
 exports.default = removeDeprecatedModalLevelProps;

package/build/src/transforms/rename-mod-css-to-module-css.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+function renameModCssToModuleCss(file, api, options) {
+    const j = api.jscodeshift;
+    let hasModifications = false;
+    function renameImportModCssToModuleCss(astPath) {
+        const node = astPath.node;
+        if (typeof node.source.value === 'string' &&
+            node.source.value.endsWith('.mod.css')) {
+            if (options.dry) {
+                api.stats(file.path);
+            }
+            else {
+                const previousCssModulesFilePath = node.source.value;
+                const nextCssModulesFilePath = previousCssModulesFilePath.replace('.mod.css', '.module.css');
+                node.source.value = nextCssModulesFilePath;
+                hasModifications = true;
+                // Side effect for renaming the actual CSS module file.
+                fs_1.default.renameSync(path_1.default.join(path_1.default.dirname(file.path), previousCssModulesFilePath), path_1.default.join(path_1.default.dirname(file.path), nextCssModulesFilePath));
+            }
+        }
+    }
+    const root = j(file.source);
+    root.find(j.ImportDeclaration).forEach(renameImportModCssToModuleCss);
+    return hasModifications
+        ? root.toSource({ ...options, quote: 'single' })
+        : null;
+}
+exports.default = renameModCssToModuleCss;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/codemod",
-  "version": "0.2.0",
+  "version": "21.13.1",
   "description": "Codemod transformations for Custom Applications",
   "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
   "repository": {
@@ -14,7 +14,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "main": "./build/cli.js",
+  "main": "./build/src/index.js",
   "files": ["bin", "build", "package.json", "LICENSE", "README.md"],
   "bin": {
     "mc-codemod": "./bin/mc-codemod.js"
@@ -24,15 +24,15 @@
     "build:bundles:watch": "yarn build -w"
   },
   "dependencies": {
-    "glob": "8.0.1",
-    "jscodeshift": "0.13.1",
-    "mri": "1.2.0"
+    "cac": "6.7.12",
+    "glob": "8.0.3",
+    "jscodeshift": "0.13.1"
   },
   "devDependencies": {
-    "@tsconfig/node14": "^1.0.1",
+    "@tsconfig/node16": "^1.0.3",
     "@types/jscodeshift": "0.11.5",
     "rimraf": "3.0.2",
-    "typescript": "4.6.4"
+    "typescript": "4.7.4"
   },
   "engines": {
     "node": ">=14"

package/build/cli.js

@@ -1,66 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.run = void 0;
-const path_1 = __importDefault(require("path"));
-const mri_1 = __importDefault(require("mri"));
-const glob_1 = __importDefault(require("glob"));
-// @ts-ignore internal module
-const Runner_1 = __importDefault(require("jscodeshift/src/Runner"));
-const run = () => {
-    const flags = (0, mri_1.default)(process.argv.slice(2), {
-        alias: { help: ['h'] },
-        boolean: ['dry-run'],
-    });
-    const commands = flags._;
-    if (commands.length === 0 || (flags.help && commands.length === 0)) {
-        console.log(`
-Usage: mc-codemod [global-options] [transform] [glob-pattern]
-
-Global options:
-
-  --dry-run             (optional) Executes the command but does not send any mutation request.
-
-Transforms:
-
-  remove-deprecated-modal-level-props     Remove deprecated "level" and "baseZIndex" props from modal page components.
-  rename-js-to-jsx                        Rename ".js" files using React JSX syntax to ".jsx".
-  `);
-        process.exit(0);
-    }
-    const [transform, globPattern] = commands;
-    const files = glob_1.default.sync(globPattern);
-    const runJscodeshift = async (transformPath, filePaths, options) => {
-        await Runner_1.default.run(transformPath, filePaths, options);
-    };
-    const execute = async () => {
-        switch (transform) {
-            case 'remove-deprecated-modal-level-props':
-            case 'rename-js-to-jsx': {
-                const transformPath = path_1.default.join(__dirname, `transforms/${transform}.js`);
-                await runJscodeshift(transformPath, files, {
-                    extensions: 'tsx,ts,jsx,js',
-                    ignorePattern: [
-                        '**/node_modules/**',
-                        '**/public/**',
-                        '**/dist/**',
-                        '**/build/**',
-                    ],
-                    parser: 'tsx',
-                    verbose: 0,
-                    dry: flags['dry-run'],
-                });
-                break;
-            }
-            default:
-                throw new Error(`Unknown transform ${transform}.`);
-        }
-    };
-    execute().catch((error) => {
-        console.error(error.stack || error.message || error);
-        process.exit(1);
-    });
-};
-exports.run = run;