@volue/wave-codemod__react 0.1.0-next.0

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) for commit guidelines.
+
+<!-- MONODEPLOY:BELOW -->

package/README.md

@@ -0,0 +1,38 @@
+# `@volue/wave-codemod__react`
+
+Codemods for migration to the newer version of the `@volue/wave-react` library.
+
+These codemods utilize [jscodeshift](https://github.com/facebook/jscodeshift) library for transformations and [Hypermod.io CLI tool](https://www.hypermod.io/docs/tools/cli) for downloading and running them against your codebase.
+
+## Install
+
+No installation of this package is necessary.
+Downloading and running codemods can be done via `npx @hypermod/cli`.
+
+## Usage
+
+### Considerations
+
+- You should run codemods on a separate Git branch, then manually review the changes before deploying them.
+- Codemods are designed to do the heavy lifting, but they may not be perfect, so some manual work may still be required in order to successfully migrate.
+- Codemods might output code that doesn’t follow your coding style. Make sure to run your code formatter and/or linter before committing the changes.
+
+### Examples
+
+To run a transform for version `1.0.0` of `@volue/wave-react`, use one of the following commands:
+
+```sh
+# Transform multiple files
+npx @hypermod/cli --packages @volue/wave-codemod__react@1.0.0 --experimental-loader /project/src/**/*.tsx
+
+# Transform single file
+npx @hypermod/cli --packages @volue/wave-codemod__react@1.0.0 --experimental-loader /project/src/path/to/file
+```
+
+To run all transforms for `@volue/wave-react` in sequence from version `1.0.0` to the latest, add `--sequence` flag:
+
+```sh
+npx @hypermod/cli --sequence --packages @volue/wave-codemod__react@1.0.0 --experimental-loader /project/src/**/*.tsx
+```
+
+[See the Hypermod CLI docs for more information and examples](https://www.hypermod.io/docs/tools/cli)

package/dist/index.cjs

@@ -0,0 +1,136 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('@hypermod/utils');
+
+const componentsSet = /* @__PURE__ */ new Set([
+  "ActionBar",
+  "Anchor",
+  "AppFrame",
+  "Avatar",
+  "ButtonGroup",
+  "Card",
+  "Checkbox",
+  "Collapsible",
+  "CollapsibleCard",
+  "Combobox",
+  "DataItem",
+  "DataList",
+  "DatePicker",
+  "Dialog",
+  "Drawer",
+  "FormField",
+  "HeaderNavList",
+  "Menu",
+  "MultiSelectMenu",
+  "Notification",
+  "Pagination",
+  "Popover",
+  "Positioner",
+  "Radio",
+  "RovingFocusGroup",
+  "SelectMenu",
+  "SidebarNavigation",
+  "SingleSelectMenu",
+  "Switch",
+  "Table",
+  "Tabs",
+  "ToggleButtonGroup",
+  "TreeView"
+]);
+function addRootToMultipartComps(j, ast) {
+  const componentsToTransform = [];
+  ast.find(j.ImportDeclaration, { source: { value: "@volue/wave-react" } }).forEach((path) => {
+    path.node.specifiers?.forEach((specifier) => {
+      if (specifier.type === "ImportSpecifier") {
+        const importedName = specifier.imported.name;
+        if (componentsSet.has(importedName)) {
+          componentsToTransform.push(importedName);
+        }
+      }
+    });
+  });
+  if (componentsToTransform.length === 0) {
+    return;
+  }
+  componentsToTransform.forEach((componentName) => {
+    ast.find(j.JSXOpeningElement, {
+      name: {
+        type: "JSXIdentifier",
+        name: componentName
+      }
+    }).forEach((openingTagPath) => {
+      if (openingTagPath.node.name.type === "JSXIdentifier") {
+        openingTagPath.node.name.name = `${componentName}.Root`;
+      }
+    });
+    ast.find(j.JSXClosingElement, {
+      name: {
+        type: "JSXIdentifier",
+        name: componentName
+      }
+    }).forEach((closingTagPath) => {
+      if (closingTagPath.node.name.type === "JSXIdentifier") {
+        closingTagPath.node.name.name = `${componentName}.Root`;
+      }
+    });
+    ast.find(j.TSTypeQuery, {
+      exprName: {
+        type: "Identifier",
+        name: componentName
+      }
+    }).replaceWith(
+      j.tsTypeQuery(
+        j.tsQualifiedName(j.identifier(componentName), j.identifier("Root"))
+      )
+    );
+  });
+}
+
+const REG_RETURN = /return\s+\((\s+)\(<([^\s>]+)/g;
+function removeParentheses(string) {
+  const matches = string.matchAll(REG_RETURN);
+  let result = "";
+  const allMatches = [...matches];
+  if (allMatches.length === 0) return string;
+  allMatches.forEach((match) => {
+    const [, spaces, componentName] = match;
+    const sl = spaces.length;
+    const REG_DOUBLE_TAG = `(return\\s+\\(\\s{${sl}})\\((<${componentName}.+?\\s{${sl}}<\\/${componentName}>)\\)(\\s+\\))`;
+    const REG_SELF_CLOSING = `(return\\s+\\(\\s{${sl}})\\((<${componentName}.+?\\/>)\\)(\\s+\\))`;
+    const regexp = new RegExp(`${REG_DOUBLE_TAG}|${REG_SELF_CLOSING}`, "gs");
+    result = string.replace(
+      regexp,
+      (match2, doubleTagStart, doubleTagContent, doubleTagEnd, selfTagStart, selfTagContent, selfTagEnd) => {
+        if (doubleTagStart && doubleTagContent && doubleTagEnd) {
+          return doubleTagStart + doubleTagContent + doubleTagEnd;
+        }
+        if (selfTagStart && selfTagContent && selfTagEnd) {
+          return selfTagStart + selfTagContent + selfTagEnd;
+        }
+        return match2;
+      }
+    );
+  });
+  return result;
+}
+
+function transformer(file, api, options) {
+  const { jscodeshift: j } = api;
+  const ast = j(file.source);
+  if (!utils.hasImportDeclaration(j, ast, "@volue/wave-react")) {
+    return file.source;
+  }
+  utils.applyMotions(j, ast, [addRootToMultipartComps]);
+  return removeParentheses(ast.toSource(options.printOptions));
+}
+
+var index = {
+  transforms: {
+    "1.0.0": transformer
+  }
+};
+
+exports.default = index;
+exports.v1 = transformer;

package/dist/index.d.cts

@@ -0,0 +1,11 @@
+import { FileInfo, API, Options } from 'jscodeshift';
+
+declare function transformer(file: FileInfo, api: API, options: Options): string;
+
+declare const _default: {
+    transforms: {
+        '1.0.0': typeof transformer;
+    };
+};
+
+export { _default as default, transformer as v1 };

package/dist/index.d.mts

@@ -0,0 +1,11 @@
+import { FileInfo, API, Options } from 'jscodeshift';
+
+declare function transformer(file: FileInfo, api: API, options: Options): string;
+
+declare const _default: {
+    transforms: {
+        '1.0.0': typeof transformer;
+    };
+};
+
+export { _default as default, transformer as v1 };

package/dist/index.mjs

@@ -0,0 +1,131 @@
+import { hasImportDeclaration, applyMotions } from '@hypermod/utils';
+
+const componentsSet = /* @__PURE__ */ new Set([
+  "ActionBar",
+  "Anchor",
+  "AppFrame",
+  "Avatar",
+  "ButtonGroup",
+  "Card",
+  "Checkbox",
+  "Collapsible",
+  "CollapsibleCard",
+  "Combobox",
+  "DataItem",
+  "DataList",
+  "DatePicker",
+  "Dialog",
+  "Drawer",
+  "FormField",
+  "HeaderNavList",
+  "Menu",
+  "MultiSelectMenu",
+  "Notification",
+  "Pagination",
+  "Popover",
+  "Positioner",
+  "Radio",
+  "RovingFocusGroup",
+  "SelectMenu",
+  "SidebarNavigation",
+  "SingleSelectMenu",
+  "Switch",
+  "Table",
+  "Tabs",
+  "ToggleButtonGroup",
+  "TreeView"
+]);
+function addRootToMultipartComps(j, ast) {
+  const componentsToTransform = [];
+  ast.find(j.ImportDeclaration, { source: { value: "@volue/wave-react" } }).forEach((path) => {
+    path.node.specifiers?.forEach((specifier) => {
+      if (specifier.type === "ImportSpecifier") {
+        const importedName = specifier.imported.name;
+        if (componentsSet.has(importedName)) {
+          componentsToTransform.push(importedName);
+        }
+      }
+    });
+  });
+  if (componentsToTransform.length === 0) {
+    return;
+  }
+  componentsToTransform.forEach((componentName) => {
+    ast.find(j.JSXOpeningElement, {
+      name: {
+        type: "JSXIdentifier",
+        name: componentName
+      }
+    }).forEach((openingTagPath) => {
+      if (openingTagPath.node.name.type === "JSXIdentifier") {
+        openingTagPath.node.name.name = `${componentName}.Root`;
+      }
+    });
+    ast.find(j.JSXClosingElement, {
+      name: {
+        type: "JSXIdentifier",
+        name: componentName
+      }
+    }).forEach((closingTagPath) => {
+      if (closingTagPath.node.name.type === "JSXIdentifier") {
+        closingTagPath.node.name.name = `${componentName}.Root`;
+      }
+    });
+    ast.find(j.TSTypeQuery, {
+      exprName: {
+        type: "Identifier",
+        name: componentName
+      }
+    }).replaceWith(
+      j.tsTypeQuery(
+        j.tsQualifiedName(j.identifier(componentName), j.identifier("Root"))
+      )
+    );
+  });
+}
+
+const REG_RETURN = /return\s+\((\s+)\(<([^\s>]+)/g;
+function removeParentheses(string) {
+  const matches = string.matchAll(REG_RETURN);
+  let result = "";
+  const allMatches = [...matches];
+  if (allMatches.length === 0) return string;
+  allMatches.forEach((match) => {
+    const [, spaces, componentName] = match;
+    const sl = spaces.length;
+    const REG_DOUBLE_TAG = `(return\\s+\\(\\s{${sl}})\\((<${componentName}.+?\\s{${sl}}<\\/${componentName}>)\\)(\\s+\\))`;
+    const REG_SELF_CLOSING = `(return\\s+\\(\\s{${sl}})\\((<${componentName}.+?\\/>)\\)(\\s+\\))`;
+    const regexp = new RegExp(`${REG_DOUBLE_TAG}|${REG_SELF_CLOSING}`, "gs");
+    result = string.replace(
+      regexp,
+      (match2, doubleTagStart, doubleTagContent, doubleTagEnd, selfTagStart, selfTagContent, selfTagEnd) => {
+        if (doubleTagStart && doubleTagContent && doubleTagEnd) {
+          return doubleTagStart + doubleTagContent + doubleTagEnd;
+        }
+        if (selfTagStart && selfTagContent && selfTagEnd) {
+          return selfTagStart + selfTagContent + selfTagEnd;
+        }
+        return match2;
+      }
+    );
+  });
+  return result;
+}
+
+function transformer(file, api, options) {
+  const { jscodeshift: j } = api;
+  const ast = j(file.source);
+  if (!hasImportDeclaration(j, ast, "@volue/wave-react")) {
+    return file.source;
+  }
+  applyMotions(j, ast, [addRootToMultipartComps]);
+  return removeParentheses(ast.toSource(options.printOptions));
+}
+
+var index = {
+  transforms: {
+    "1.0.0": transformer
+  }
+};
+
+export { index as default, transformer as v1 };

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@volue/wave-codemod__react",
+  "version": "0.1.0-next.0",
+  "description": "Codemods for Wave React library",
+  "license": "",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Volue/wave",
+    "directory": "codemods/react"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.cts",
+  "exports": {
+    ".": {
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      },
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "jest": "jest",
+    "lint": "eslint . --cache",
+    "lint:fix": "yarn run lint --fix",
+    "lint:types": "tsc",
+    "_prettier": "prettier \"**/*.{json,md,yml}\"",
+    "format": "yarn run _prettier --write",
+    "test": "run-p lint:types lint \"_prettier --check\" jest",
+    "clean": "premove dist",
+    "build": "yarn run clean && pkgroll",
+    "prepack": "yarn run build"
+  },
+  "devDependencies": {
+    "@jest/types": "29.6.3",
+    "@types/jest": "29.5.14",
+    "@volue/eslint-config": "1.3.11",
+    "eslint": "9.20.1",
+    "jest": "29.7.0",
+    "npm-run-all2": "7.0.2",
+    "pkgroll": "2.11.0",
+    "premove": "4.0.0",
+    "prettier": "3.5.1",
+    "ts-jest": "29.2.6",
+    "typescript": "5.7.3"
+  },
+  "dependencies": {
+    "@hypermod/utils": "0.5.0",
+    "@types/jscodeshift": "0.12.0",
+    "jscodeshift": "17.1.2"
+  }
+}