@hapico/cli 0.0.16 → 0.0.17

package/utils/codemod/index.tsx

@@ -0,0 +1,1588 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import * as Babel from "@babel/standalone";
+import * as uuid from "uuid";
+import * as prettier from "prettier/standalone";
+import parserBabel from "prettier/plugins/babel";
+import estree from "prettier/plugins/estree";
+import { includes, map } from "lodash";
+
+const generator = Babel.packages.generator.default;
+const traverse = Babel.packages.traverse.default;
+const parser = Babel.packages.parser;
+const parse = Babel.packages.parser.parse;
+
+export interface IFile {
+  path: string;
+  content: string;
+  es5?: string;
+}
+
+export interface ImportStatement {
+  default: string;
+  named: Array<string>;
+  from: string;
+  code: string;
+}
+
+export type LiteralChangeRequest = {
+  id: string;
+  replacement: string;
+};
+
+type WrapComponentRequest = {
+  id: string;
+  wrapper: string; // Name of the wrapper component
+  attributes: Record<string, string>; // Attributes to pass to the wrapper component
+};
+
+export const removeExtension = (filename: string) => {
+  return filename.replace(/\.[^/.]+$/, "");
+};
+
+/**
+ * This tool is used to modify the code of a component.
+ * JSX React code can be modified using this tool.
+ */
+export const ID_ATTRIBUTE = "_id";
+class CodeMod {
+  public code: string;
+  private presets: Array<any> = [
+    // Keep the code as is
+    ["typescript", { allExtensions: true, isTSX: true }], // Handle TypeScript syntax
+  ];
+  constructor(code: string) {
+    this.code = code;
+  }
+
+  getCode() {
+    return this.code;
+  }
+
+  isValid() {
+    try {
+      Babel.transform(this.code, {
+        presets: this.presets,
+        filename: "file.tsx", // Ensure it's treated as TSX file
+      });
+      return true;
+    } catch (error) {
+      console.error("IS_VALID_ERROR", error);
+      return false;
+    }
+  }
+
+  /**
+   * Return es5 code
+   * @returns
+   */
+  compile() {
+    try {
+      // Transform the TypeScript React.js code into ES5
+      const result = Babel.transform(this.code, {
+        presets: [
+          ["env", { targets: { esmodules: false } }], // Compiles to ES5
+          "typescript", // Handles TypeScript syntax
+          "react", // Handles JSX syntax in TSX files
+        ],
+        filename: "file.tsx", // Ensure the file is treated as TSX
+      });
+      return result.code;
+    } catch (error) {
+      // console.error("COMPILE_ERROR", error);
+      return "";
+    }
+  }
+
+  /**
+   * Encode
+   * Mean every JSX tag will be injected with ID_ATTRIBUTE={uuidv4()}
+   * @param params
+   */
+  encode() {
+    const ast = this.ast();
+    // traverse the code and add ID_ATTRIBUTE={uuidv4()} to all JSX elements
+    traverse(ast, {
+      JSXOpeningElement(path: any) {
+        if (!path.node.attributes) {
+          path.node.attributes = [];
+        }
+        if (
+          path.node.attributes.find(
+            (attr: any) => attr.name?.name === ID_ATTRIBUTE
+          )
+        ) {
+          return;
+        }
+        path.node.attributes.push({
+          type: "JSXAttribute",
+          name: {
+            type: "JSXIdentifier",
+            name: ID_ATTRIBUTE,
+          },
+          value: {
+            type: "JSXExpressionContainer",
+            expression: {
+              type: "StringLiteral",
+              value: uuid.v4(),
+            },
+          },
+        });
+      },
+    });
+    // convert the AST back to code
+    this.astToCode(ast);
+    return this;
+  }
+
+  /**
+   * AST
+   * @returns
+   */
+  ast() {
+    const ast = parser.parse(this.code, {
+      sourceType: "module",
+      plugins: ["jsx", "typescript"],
+    });
+    return ast as any;
+  }
+
+  /**
+   * AST to Code
+   * @param ast
+   * @returns
+   */
+  astToCode(ast: any) {
+    const { code } = generator(ast, {}, this.code);
+    this.code = code;
+    return this;
+  }
+
+  /**
+   * Decode
+   * Remove all _____id attributes from JSX elements
+   * @param params
+   */
+  decode(options?: {
+    exceptIds: Array<string>;
+  }) {
+    const { exceptIds = [] } = options || { exceptIds: [] };
+    const ast = this.ast();
+    // traverse the code and remove ID_ATTRIBUTE from all JSX elements
+    traverse(ast, {
+      JSXOpeningElement(path: any) {
+        if (!path.node.attributes) {
+          return;
+        }
+        path.node.attributes = path.node.attributes.filter(
+          (attr: any) => attr.name?.name !== ID_ATTRIBUTE || exceptIds.includes(attr.value?.expression?.value)
+        );
+      },
+    });
+    // convert the AST back to code
+    this.astToCode(ast);
+    return this;
+  }
+
+  /**
+   * Prettify the code
+   */
+  async prettify() {
+    try {
+      this.code = await prettier.format(this.code, {
+        parser: "babel",
+        plugins: [parserBabel, estree],
+      });
+    } catch (error) {
+      console.error("PRETTIFY_ERROR", this.code);
+      console.error(error);
+    }
+    return this;
+  }
+
+  public async output() {
+    return this.code;
+  }
+
+  /**
+   * Modify JSX Text Content
+   * @param request
+   * @returns
+   */
+  modifyJSXTextContent(request: LiteralChangeRequest) {
+    this.code =
+      Babel.transform(this.code, {
+        presets: [
+          // "react", // Handle JSX syntax as is (no React.createElement transformation),
+          ["typescript", { allExtensions: true, isTSX: true }], // Handle TypeScript syntax
+        ],
+        filename: "file.tsx", // Ensure it's treated as TSX file
+        plugins: [
+          () => ({
+            visitor: {
+              JSXElement(path: any) {
+                const openingElement = path.node.openingElement;
+                const openingAttribute = openingElement.attributes.find(
+                  (attr: any) => attr?.name?.name === ID_ATTRIBUTE
+                );
+                if (openingAttribute?.value?.expression?.value === request.id) {
+                  path.node.children = [
+                    {
+                      type: "JSXText",
+                      value: request.replacement,
+                    },
+                  ];
+                }
+              },
+            },
+          }),
+        ],
+      })?.code ?? "";
+
+    return this;
+  }
+
+  /**
+   * Check if the code has a React import
+   * @returns {boolean}
+   */
+  hasReactImport() {
+    const ast = this.ast();
+    let hasReact = false;
+    traverse(ast, {
+      ImportDeclaration(path: any) {
+        if (path.node.source.value === "react") {
+          hasReact = true;
+        }
+      },
+    });
+    return hasReact;
+  }
+
+  /**
+   * wrap component with another component
+   */
+  wrapJSXComponent(request: WrapComponentRequest) {
+    const { id, wrapper, attributes } = request;
+    let isDone = false;
+    this.code =
+      Babel.transform(this.code, {
+        presets: this.presets,
+        filename: "file.tsx", // Ensure it's treated as TSX file
+        plugins: [
+          () => ({
+            visitor: {
+              JSXElement(path: any) {
+                if (isDone) {
+                  return;
+                }
+                console.log("PATH", path.node);
+                const openingElement = path.node.openingElement;
+                const closingElement = path.node.closingElement;
+
+                const openingAttribute = openingElement.attributes.find(
+                  (attr: any) => attr?.name?.name === ID_ATTRIBUTE
+                );
+                if (
+                  openingAttribute?.value?.expression?.value === id ||
+                  openingAttribute?.value?.value === id
+                ) {
+                  const wrapperAttributes = map(attributes, (value, key) => ({
+                    type: "JSXAttribute",
+                    name: {
+                      type: "JSXIdentifier",
+                      name: key,
+                    },
+                    value: {
+                      type: "StringLiteral",
+                      value,
+                    },
+                  }));
+
+                  // Insert wrapper around the current node
+                  path.replaceWith({
+                    type: "JSXElement",
+                    openingElement: {
+                      type: "JSXOpeningElement",
+                      name: {
+                        type: "JSXIdentifier",
+                        name: wrapper,
+                      },
+                      attributes: wrapperAttributes,
+                      selfClosing: false,
+                    },
+                    closingElement: {
+                      type: "JSXClosingElement",
+                      name: {
+                        type: "JSXIdentifier",
+                        name: wrapper,
+                      },
+                    },
+                    children: [
+                      {
+                        type: "JSXElement",
+                        openingElement,
+                        closingElement,
+                        children: path.node.children || [],
+                      },
+                    ],
+                  });
+                  isDone = true;
+                }
+              },
+            },
+          }),
+        ],
+      })?.code ?? "";
+    return this;
+  }
+
+  getAttributes(id: string) {
+    const attributes: any = {};
+    Babel.transform(this.code, {
+      presets: this.presets,
+      filename: "file.tsx", // Ensure it's treated as TSX file
+      plugins: [
+        () => ({
+          visitor: {
+            JSXElement(path: any) {
+              const openingElement = path.node.openingElement;
+              if (!openingElement?.attributes) {
+                return;
+              }
+              const openingAttribute = openingElement.attributes.find(
+                (attr: any) => attr?.name?.name === ID_ATTRIBUTE
+              );
+              if (
+                openingAttribute?.value?.expression?.value === id ||
+                openingAttribute?.value?.value === id
+              ) {
+                openingElement.attributes.forEach((attr: any) => {
+                  if (attr?.name?.name !== ID_ATTRIBUTE) {
+                    if (attr?.value?.type === "JSXExpressionContainer") {
+                      if (attr?.value?.expression?.type === "StringLiteral") {
+                        attributes[attr?.name?.name] =
+                          attr.value.expression.value;
+                      } else if (
+                        attr?.value?.expression?.type === "NumericLiteral"
+                      ) {
+                        attributes[attr?.name?.name] =
+                          attr.value.expression.value;
+                      }
+                    } else if (
+                      attr?.value?.type === "StringLiteral" ||
+                      attr?.value?.type === "NumericLiteral"
+                    ) {
+                      attributes[attr?.name?.name] = attr.value.value;
+                    }
+                  }
+                });
+              }
+            },
+          },
+        }),
+      ],
+    });
+    return attributes;
+  }
+
+  removeJSXElement(id: string) {
+    this.code =
+      Babel.transform(this.code, {
+        presets: this.presets,
+        filename: "file.tsx", // Ensure it's treated as TSX file
+        plugins: [
+          () => ({
+            visitor: {
+              JSXElement(path: any) {
+                const openingElement = path.node.openingElement;
+                const openingAttribute = openingElement.attributes.find(
+                  (attr: any) => attr?.name?.name === ID_ATTRIBUTE
+                );
+                if (
+                  openingAttribute?.value?.expression?.value === id ||
+                  openingAttribute?.value?.value === id
+                ) {
+                  path.remove();
+                }
+              },
+            },
+          }),
+        ],
+      })?.code || "";
+    return this;
+  }
+
+  moveJSXElement(id: string, direction: "up" | "down") {
+    this.code =
+      Babel.transform(this.code, {
+        presets: this.presets,
+        filename: "file.tsx", // Ensure it's treated as TSX file
+        plugins: [
+          () => ({
+            visitor: {
+              JSXElement(path: any) {
+                // move up means check if the current JSX element is in children array
+                // if it is, then move it up
+                const openingElement = path.node.openingElement;
+                const openingAttribute = openingElement.attributes.find(
+                  (attr: any) => attr?.name?.name === ID_ATTRIBUTE
+                );
+                if (
+                  openingAttribute?.value?.expression?.value === id ||
+                  openingAttribute?.value?.value === id
+                ) {
+                  const parentPath = path.parentPath;
+                  if (parentPath?.node?.type === "JSXElement") {
+                    const parentChildren = parentPath.node.children;
+                    if (Array.isArray(parentChildren)) {
+                      const currentIndex = parentChildren.findIndex(
+                        (child: any) => child === path.node
+                      );
+                      if (direction === "down") {
+                        if (currentIndex > 0) {
+                          // find the previous JSX element
+                          let index = currentIndex - 1;
+                          while (
+                            index >= 0 &&
+                            parentChildren[index].type !== "JSXElement"
+                          ) {
+                            index--;
+                          }
+                          if (index >= 0) {
+                            const previousElement = parentChildren[index];
+                            parentChildren[index] = path.node;
+                            parentChildren[currentIndex] = previousElement;
+                          }
+                        }
+                      } else if (direction === "up") {
+                        console.log(
+                          "DOWN",
+                          currentIndex,
+                          parentChildren.length
+                        );
+                        if (currentIndex < parentChildren.length - 1) {
+                          // find the next JSX element
+                          let index = currentIndex + 1;
+                          while (
+                            index < parentChildren.length &&
+                            parentChildren[index].type !== "JSXElement"
+                          ) {
+                            index++;
+                          }
+                          if (index < parentChildren.length) {
+                            const nextElement = parentChildren[index];
+                            parentChildren[index] = path.node;
+                            parentChildren[currentIndex] = nextElement;
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              },
+            },
+          }),
+        ],
+      })?.code || "";
+    return this;
+  }
+
+  getClassName(id: string) {
+    let className = "";
+    const ast = this.ast();
+    traverse(ast, {
+      JSXElement(path: any) {
+        const openingElement = path.node.openingElement;
+        const openingAttribute = openingElement.attributes.find(
+          (attr: any) => attr?.name?.name === ID_ATTRIBUTE
+        );
+        if (
+          openingAttribute?.value?.expression?.value === id ||
+          openingAttribute?.value?.value === id
+        ) {
+          const classNameAttribute = openingElement.attributes.find(
+            (attr: any) => attr?.name?.name === "className"
+          );
+          className =
+            classNameAttribute?.value?.value ??
+            classNameAttribute?.value?.expression.value;
+        }
+      },
+    });
+
+    return className;
+  }
+
+  updateClassName(id: string, className: string) {
+    this.code =
+      Babel.transform(this.code, {
+        presets: this.presets,
+        filename: "file.tsx", // Ensure it's treated as TSX file
+        plugins: [
+          () => ({
+            visitor: {
+              JSXElement(path: any) {
+                const openingElement = path.node.openingElement;
+                console.log("UPDATE_CLASS_NAME", id, openingElement.attributes);
+                const openingAttribute = openingElement.attributes.find(
+                  (attr: any) => attr?.name?.name === ID_ATTRIBUTE
+                );
+                
+                if (
+                  openingAttribute?.value?.expression?.value === id ||
+                  openingAttribute?.value?.value === id
+                ) {
+                  const classNameAttribute = openingElement.attributes.find(
+                    (attr: any) => attr?.name?.name === "className"
+                  );
+                  if (classNameAttribute && classNameAttribute?.value) {
+                    classNameAttribute.value = {
+                      type: "StringLiteral",
+                      value: className,
+                    };
+                  }
+                }
+              },
+            },
+          }),
+        ],
+      })?.code || "";
+    return this;
+  }
+
+  removeImport(source: string) {
+    const newCode = Babel.transform(this.code + "", {
+      presets: this.presets,
+      filename: "file.tsx", // Ensure it's treated as TSX file
+      plugins: [
+        () => ({
+          visitor: {
+            ImportDeclaration(path: any) {
+              if (path.node?.source?.value === source) {
+                path.remove();
+              }
+            },
+          },
+        }),
+      ],
+    })?.code;
+    this.code = newCode || "";
+    return this;
+  }
+
+  /**
+   * Check if the code has import statement from a specific source
+   * @param from
+   * @returns
+   */
+  isImported(from: string) {
+    const ast = this.ast();
+    let isImported = false;
+    traverse(ast, {
+      ImportDeclaration(path: any) {
+        if (path.node.source.value === from) {
+          isImported = true;
+        }
+      },
+    });
+    return isImported;
+  }
+
+  /**
+   * Add import statement to the code
+   * @param importStatement
+   * @returns
+   */
+  /**
+   * Add import statement to the code
+   * @param importStatement
+   * @returns
+   */
+  addImport(params: { default?: string; named?: string[]; from: string }) {
+    if (!params.from) {
+      throw new Error("Import source cannot be empty");
+    }
+
+    const { default: defaultImport, named = [], from } = params;
+    const ast = this.ast();
+
+    // Check if import already exists
+    let importExists = false;
+    traverse(ast, {
+      ImportDeclaration(path: any) {
+        if (path.node.source.value === from) {
+          importExists = true;
+          // Add new specifiers to existing import
+          if (defaultImport) {
+            const hasDefault = path.node.specifiers.some(
+              (spec: any) => spec.type === "ImportDefaultSpecifier"
+            );
+            if (!hasDefault) {
+              path.node.specifiers.unshift({
+                type: "ImportDefaultSpecifier",
+                local: {
+                  type: "Identifier",
+                  name: defaultImport,
+                },
+              });
+            }
+          }
+          if (named.length > 0) {
+            named.forEach((name) => {
+              const hasNamed = path.node.specifiers.some(
+                (spec: any) =>
+                  spec.local.name === name && spec.type === "ImportSpecifier"
+              );
+              if (!hasNamed) {
+                path.node.specifiers.push({
+                  type: "ImportSpecifier",
+                  local: {
+                    type: "Identifier",
+                    name,
+                  },
+                  imported: {
+                    type: "Identifier",
+                    name,
+                  },
+                });
+              }
+            });
+          }
+        }
+      },
+    });
+
+    // If import doesn't exist, create new import declaration
+    if (!importExists) {
+      const specifiers: any[] = [];
+
+      if (defaultImport) {
+        specifiers.push({
+          type: "ImportDefaultSpecifier",
+          local: {
+            type: "Identifier",
+            name: defaultImport,
+          },
+        });
+      }
+
+      if (named.length > 0) {
+        named.forEach((name) => {
+          specifiers.push({
+            type: "ImportSpecifier",
+            local: {
+              type: "Identifier",
+              name,
+            },
+            imported: {
+              type: "Identifier",
+              name,
+            },
+          });
+        });
+      }
+
+      ast.program.body.unshift({
+        type: "ImportDeclaration",
+        specifiers,
+        source: {
+          type: "StringLiteral",
+          value: from,
+        },
+      });
+    }
+
+    this.astToCode(ast);
+    return this;
+  }
+
+
+  /**
+   * Add import 
+   * @param importStatements 
+   * @returns 
+   */
+  addImportStatements(importStatements: Array<string>) {
+    const ast = this.ast();
+    importStatements.forEach((importStatement) => {
+      const importAst = parse(importStatement, {
+        sourceType: "module",
+        plugins: ["jsx", "typescript"],
+      });
+      ast.program.body.push(...importAst.program.body);
+    });
+    this.astToCode(ast);
+    return this;
+  }
+
+
+  /**
+   * List all imports
+   */
+  listImports(): Array<ImportStatement> {
+    const imports: Array<ImportStatement> = [];
+    Babel.transform(this.code, {
+      presets: this.presets,
+      filename: "file.tsx", // Ensure it's treated as TSX file
+      plugins: [
+        () => ({
+          visitor: {
+            ImportDeclaration(path: any) {
+              const defaultImport = path.node.specifiers.find(
+                (specifier: any) => specifier.type === "ImportDefaultSpecifier"
+              );
+              const namedImports = path.node.specifiers.filter(
+                (specifier: any) => specifier.type === "ImportSpecifier"
+              );
+              imports.push({
+                default: defaultImport?.local.name,
+                named: namedImports.map(
+                  (specifier: any) => specifier.local.name
+                ),
+                from: path.node.source.value,
+                code: path.toString(),
+              });
+            },
+          },
+        }),
+      ],
+    });
+    return imports;
+  }
+
+  /**
+   * Now only support @/.. import path
+   * @param importPath
+   */
+  getFileContent(
+    importPath: string,
+    files: IFile[]
+    // currentIndexPath: string
+  ) {
+    if (importPath.startsWith("@/")) {
+      const importFile = files.find((file) =>
+        file.path.includes(importPath.replace("@/", "") + ".")
+      );
+      if (importFile) {
+        return importFile.content;
+      }
+    }
+    return "";
+  }
+
+  /**
+   * List all ids where the JSX element has attribute ID_ATTRIBUTE with value
+   */
+  listAllIds = (files: IFile[]) => {
+    const ids: string[] = [];
+    Babel.transform(this.code, {
+      presets: this.presets,
+      filename: "file.tsx", // Ensure it's treated as TSX file
+      plugins: [
+        () => ({
+          visitor: {
+            JSXElement(path: any) {
+              const openingElement = path.node.openingElement;
+              const openingAttribute = openingElement.attributes.find(
+                (attr: any) => attr?.name?.name === ID_ATTRIBUTE
+              );
+              if (openingAttribute?.value?.expression?.value) {
+                ids.push(openingAttribute?.value?.expression?.value);
+              }
+            },
+          },
+        }),
+      ],
+    });
+
+    // list all imports
+    const imports = this.listImports();
+    const importFiles = map(imports, (item) => {
+      return this.getFileContent(item.from, files);
+    });
+
+    // list all ids
+    map(importFiles, (file) => {
+      const codeMode = new CodeMod(file);
+      const idsInFile = codeMode.listAllIds(files);
+      ids.push(...idsInFile);
+    });
+
+    return ids;
+  };
+
+  /**
+   * Get the props of a JSX element
+   * @param id
+   * @returns
+   */
+  getItemProps(id: string) {
+    const attributes = this.getAttributes(id);
+    const className = this.getClassName(id);
+    return {
+      id,
+      className,
+      ...attributes,
+    };
+  }
+
+  /**
+   * Update the props of a JSX element
+   * Update keeps the existing props and only updates the new props
+   * @param id
+   * @param props
+   * @returns
+   */
+  updateItemProps(id: string, props: any) {
+    const { ...attributes } = props;
+    this.code =
+      Babel.transform(this.code, {
+        presets: this.presets,
+        filename: "file.tsx", // Ensure it's treated as TSX file
+        plugins: [
+          () => ({
+            visitor: {
+              JSXElement(path: any) {
+                const openingElement = path.node.openingElement;
+                const openingAttribute = openingElement.attributes.find(
+                  (attr: any) => attr?.name?.name === ID_ATTRIBUTE
+                );
+                if (
+                  openingAttribute?.value?.expression?.value === id ||
+                  openingAttribute?.value?.value === id
+                ) {
+                  // remove already existing attributes
+                  for (const key in attributes) {
+                    openingElement.attributes =
+                      openingElement.attributes.filter(
+                        (attr: any) => attr?.name?.name !== key
+                      );
+                  }
+                  for (const key in attributes) {
+                    openingElement.attributes.push({
+                      type: "JSXAttribute",
+                      name: {
+                        type: "JSXIdentifier",
+                        name: key,
+                      },
+                      value: {
+                        type: "StringLiteral",
+                        value: attributes[key],
+                      },
+                    });
+                  }
+                }
+              },
+            },
+          }),
+        ],
+      })?.code || "";
+  }
+
+  updateItemText(id: string, html: string) {
+    this.code =
+      Babel.transform(this.code, {
+        presets: this.presets,
+        filename: "file.tsx", // Ensure it's treated as TSX file
+        plugins: [
+          () => ({
+            visitor: {
+              JSXElement(path: any) {
+                const openingElement = path.node.openingElement;
+                const openingAttribute = openingElement.attributes.find(
+                  (attr: any) => attr?.name?.name === ID_ATTRIBUTE
+                );
+                if (
+                  openingAttribute?.value?.expression?.value === id ||
+                  openingAttribute?.value?.value === id
+                ) {
+                  path.node.children = [
+                    {
+                      type: "JSXText",
+                      value: html,
+                    },
+                  ];
+                }
+              },
+            },
+          }),
+        ],
+      })?.code || "";
+
+    console.log("UPDATE_ITEM_TEXT", id, html, this.code);
+  }
+
+  /**
+   * Check if code has logic like
+   * Identifier, BlockStatement,..
+   * @returns
+   */
+  checkHasLogicCode() {
+    let hasLogicCode = false;
+    Babel.transform(this.code, {
+      presets: this.presets,
+      filename: "file.tsx", // Ensure it's treated as TSX file
+      plugins: [
+        () => ({
+          visitor: {
+            Identifier() {
+              hasLogicCode = true;
+            },
+            BlockStatement() {
+              hasLogicCode = true;
+            },
+          },
+        }),
+      ],
+    });
+    return hasLogicCode;
+  }
+
+  checkChildrenIsContentEditable(id: string) {
+    let isContentEditable = false;
+    // isContentEditable it means code of children has only text
+    // p, h1, h2, h3, h4, h5, h6, span, div, a, button, label, li, td, th, textarea
+
+    const ALOWED_TAGS = [
+      "p",
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6",
+      "span",
+      "div",
+      "a",
+      "button",
+      "label",
+      "li",
+      "td",
+      "th",
+      "textarea",
+    ];
+
+    Babel.transform(this.code, {
+      presets: this.presets,
+      filename: "file.tsx", // Ensure it's treated as TSX file
+      plugins: [
+        () => ({
+          visitor: {
+            JSXElement(path: any) {
+              const openingElement = path.node.openingElement;
+              const openingAttribute = openingElement.attributes.find(
+                (attr: any) => attr?.name?.name === ID_ATTRIBUTE
+              );
+              if (
+                openingAttribute?.value?.expression?.value === id ||
+                openingAttribute?.value?.value === id
+              ) {
+                const tagName = openingElement.name.name;
+                if (includes(ALOWED_TAGS, tagName)) {
+                  isContentEditable = true;
+                }
+              }
+            },
+          },
+        }),
+      ],
+    });
+
+    // And it must have not include any logic code
+    if (isContentEditable) {
+      const childrenCode = this.getChildrenContent(id);
+      const hasLogicCode = new CodeMod(childrenCode).checkHasLogicCode();
+      if (hasLogicCode) {
+        isContentEditable = false;
+      }
+    }
+
+    return isContentEditable;
+  }
+
+  /**
+   * Get all code of children of a JSX element
+   * @param elementId
+   */
+  getChildrenContent(elementId: string) {
+    let code = "";
+    Babel.transform(this.code, {
+      presets: this.presets,
+      filename: "file.tsx", // Ensure it's treated as TSX file
+      plugins: [
+        () => ({
+          visitor: {
+            JSXElement(path: any) {
+              const openingElement = path.node.openingElement;
+              const openingAttribute = openingElement.attributes.find(
+                (attr: any) => attr?.name?.name === ID_ATTRIBUTE
+              );
+              if (
+                openingAttribute?.value?.expression?.value === elementId ||
+                openingAttribute?.value?.value === elementId
+              ) {
+                code = path.toString();
+              }
+            },
+          },
+        }),
+      ],
+    });
+    return code;
+  }
+
+  /**
+   * Remove a JSX element from the code
+   */
+  removeItem(id: string) {
+    this.code =
+      Babel.transform(this.code, {
+        presets: this.presets,
+        filename: "file.tsx", // Ensure it's treated as TSX file
+        plugins: [
+          () => ({
+            visitor: {
+              JSXElement(path: any) {
+                const openingElement = path.node.openingElement;
+                const openingAttribute = openingElement.attributes.find(
+                  (attr: any) => attr?.name?.name === ID_ATTRIBUTE
+                );
+                if (
+                  openingAttribute?.value?.expression?.value === id ||
+                  openingAttribute?.value?.value === id
+                ) {
+                  path.remove();
+                }
+              },
+            },
+          }),
+        ],
+      })?.code || "";
+  }
+
+  /**
+   * Remove all imports
+   * @param oldPath
+   * @param newPath
+   */
+  renameImportSource(oldPath: string, newPath: string) {
+    this.code =
+      Babel.transform(this.code, {
+        presets: this.presets,
+        filename: "file.tsx", // Ensure it's treated as TSX file
+        plugins: [
+          () => ({
+            visitor: {
+              ImportDeclaration(path: any) {
+                if (
+                  removeExtension(path.node.source.value) ===
+                  removeExtension(oldPath)
+                ) {
+                  path.node.source.value = removeExtension(newPath);
+                }
+              },
+            },
+          }),
+        ],
+      })?.code || "";
+    console.log("RENAME_IMPORT_SOURCE_AFTER", this.code);
+    return this;
+  }
+  renameDefaultImport(oldName: string, newName: string) {
+    this.code =
+      Babel.transform(this.code, {
+        presets: this.presets,
+        filename: "file.tsx", // Ensure it's treated as TSX file
+        plugins: [
+          () => ({
+            visitor: {
+              ImportDefaultSpecifier(path: any) {
+                if (path.node.local.name === oldName) {
+                  path.node.local.name = newName;
+                }
+              },
+            },
+          }),
+        ],
+      })?.code || "";
+    return this;
+  }
+
+  /**
+   * Only Custom Component
+   * @returns
+   */
+  refactor_RenameAllComponentNames(key: string) {
+    const firstLetterIsUpperCase = (str: string) => {
+      return str[0] === str[0].toUpperCase();
+    };
+
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    this.code =
+      Babel.transform(this.code, {
+        presets: this.presets,
+        filename: "file.tsx",
+        plugins: [
+          () => ({
+            visitor: {
+              JSXElement(path: any) {
+                const openingElement = path.node.openingElement;
+                const closingElement = path.node.closingElement;
+                const componentName = openingElement.name.name;
+                console.log("COMPONENT_NAME___", componentName);
+                if (openingElement && firstLetterIsUpperCase(componentName)) {
+                  console.log(
+                    "FOUND_COMPONENT",
+                    openingElement,
+                    closingElement
+                  );
+                  openingElement.name.name = `${componentName}${key}`;
+                  if (closingElement)
+                    closingElement.name.name = `${componentName}${key}`;
+                }
+              },
+              ImportDeclaration(path: any) {
+                // Refactor all imports
+                // Example: import A from "./A" => import NewA from "./A"
+                // import { A } from "./A" => import { A as NewA } from "./A"
+                console.log("IMPORT_DECLARATION", path.node);
+                const specifiers = path.node.specifiers;
+
+                if (specifiers && specifiers.length > 0) {
+                  for (let i = 0; i < specifiers.length; i++) {
+                    const specifier = specifiers[i];
+                    if (specifier.type === "ImportDefaultSpecifier") {
+                      const localName = specifier.local.name;
+                      if (firstLetterIsUpperCase(localName)) {
+                        specifier.local.name = `${localName}${key}`;
+                      }
+                    } else if (specifier.type === "ImportSpecifier") {
+                      const localName = specifier.local.name;
+                      if (firstLetterIsUpperCase(localName)) {
+                        specifier.local.name = `${localName}${key}`;
+                      }
+                    }
+                  }
+                }
+              },
+            },
+          }),
+        ],
+      })?.code || "";
+    return this;
+  }
+
+  /**
+   * Refactor all component names
+   * @param attribute
+   */
+  refreshIDAttributes() {
+    this.code =
+      Babel.transform(this.code, {
+        presets: this.presets,
+        filename: "file.tsx",
+        plugins: [
+          () => ({
+            visitor: {
+              JSXElement(path: any) {
+                const openingElement = path.node.openingElement;
+                if (openingElement) {
+                  // update ID_ATTRIBUTE to new value
+                  const idAttribute = openingElement.attributes.find(
+                    (attr: any) => attr?.name?.name === ID_ATTRIBUTE
+                  );
+                  if (idAttribute) {
+                    idAttribute.value = {
+                      type: "JSXExpressionContainer",
+                      expression: {
+                        type: "StringLiteral",
+                        value: uuid.v4(),
+                      },
+                    };
+                  }
+                }
+              },
+            },
+          }),
+        ],
+      })?.code || "";
+    return this;
+  }
+
+  /**
+   * Get the tag name of a JSX element
+   * @param id
+   * @returns
+   */
+  getTagName(id: string) {
+    let tagName = "";
+    Babel.transform(this.code, {
+      presets: this.presets,
+      filename: "file.tsx",
+      plugins: [
+        () => ({
+          visitor: {
+            JSXElement(path: any) {
+              const openingElement = path.node.openingElement;
+              const openingAttribute = openingElement.attributes.find(
+                (attr: any) => attr?.name?.name === ID_ATTRIBUTE
+              );
+              if (
+                openingAttribute?.value?.expression?.value === id ||
+                openingAttribute?.value?.value === id
+              ) {
+                tagName = openingElement.name.name;
+              }
+            },
+          },
+        }),
+      ],
+    });
+    return tagName;
+  }
+
+  getRelatedFiles(elementId: string, files: IFile[]) {
+    const allRelatedFiles: IFile[] = [];
+    // find file that contains the elementId
+    const currentFile = files.find((file) => includes(file.content, elementId));
+    const listRelatedFiles = (
+      elementId: string | undefined,
+      file?: IFile
+    ): Array<string> => {
+      if (!file) {
+        return [];
+      }
+      const codeMode = new CodeMod(file.content);
+      const allImports = codeMode.listImports();
+      // list all Component between ID_ATTRIBUTE={elementId}
+      const codeBlock = elementId
+        ? codeMode.extractComponentCode(elementId)
+        : file.content;
+      // List all components in the code block
+      // const codeMod = new CodeMod(codeBlock);
+      const importString: Array<string> = [];
+
+      allImports.forEach((item) => {
+        if (elementId === undefined) {
+          // import all
+          importString.push(item.from);
+        }
+        // if import is in codeBlock
+        if (
+          includes(codeBlock, `<${item.default}`) ||
+          includes(codeBlock, `<${item.named[0]}`)
+        ) {
+          importString.push(item.from);
+        }
+      });
+      if (importString.length > 0) {
+        importString.forEach((importPath) => {
+          const file = files.find((file) => {
+            return "@/" + removeExtension(file.path) === importPath;
+          });
+          if (file) {
+            importString.push(...listRelatedFiles(undefined, file));
+          }
+        });
+      }
+      return importString;
+    };
+
+    const allRelatedPaths = listRelatedFiles(elementId, currentFile);
+    for (const path of allRelatedPaths) {
+      const file = files.find((file) => {
+        return "@/" + removeExtension(file.path) === path;
+      });
+      if (file) {
+        allRelatedFiles.push(file);
+      }
+    }
+
+    return {
+      currentFile,
+      files: allRelatedFiles,
+    };
+  }
+
+  /**
+   * Extract the code of a JSX element
+   * @param elementId
+   * @returns
+   */
+  extractComponentCode(elementId: string) {
+    let code = "";
+    Babel.transform(this.code, {
+      presets: this.presets,
+      filename: "file.tsx",
+      plugins: [
+        () => ({
+          visitor: {
+            JSXElement(path: any) {
+              const openingElement = path.node.openingElement;
+              const openingAttribute = openingElement.attributes.find(
+                (attr: any) => attr?.name?.name === ID_ATTRIBUTE
+              );
+              if (
+                openingAttribute?.value?.expression?.value === elementId ||
+                openingAttribute?.value?.value === elementId
+              ) {
+                code = path.toString();
+              }
+            },
+          },
+        }),
+      ],
+    });
+    return code;
+  }
+
+  /**
+   * List all ids where the JSX element has attribute ID_ATTRIBUTE with value
+   * @returns
+   */
+  listIdAttributes() {
+    const ids: string[] = [];
+    Babel.transform(this.code, {
+      presets: this.presets,
+      filename: "file.tsx",
+      plugins: [
+        () => ({
+          visitor: {
+            JSXElement(path: any) {
+              const openingElement = path.node.openingElement;
+              const openingAttribute = openingElement.attributes.find(
+                (attr: any) => attr?.name?.name === ID_ATTRIBUTE
+              );
+              if (openingAttribute?.value?.expression?.value) {
+                ids.push(openingAttribute?.value?.expression?.value);
+              }
+            },
+          },
+        }),
+      ],
+    });
+    return ids;
+  }
+
+  replaceLiteral(from: string, to: string) {
+    this.code =
+      Babel.transform(this.code, {
+        presets: this.presets,
+        filename: "file.tsx",
+        plugins: [
+          () => ({
+            visitor: {
+              StringLiteral(path: any) {
+                // update the value of the string literal
+                if (path.node.value.includes(from)) {
+                  console.log(
+                    "===> REPLACE_LITERAL",
+                    path.node.value,
+                    path.node.value.replace(from, to)
+                  );
+                  path.node.value = path.node.value.replace(from, to);
+                }
+              },
+            },
+          }),
+        ],
+      })?.code || "";
+    console.log("REPLACE_LITERAL", from, to, this.code);
+  }
+
+  /**
+   * List all identifiers in the code
+   * @returns
+   */
+  listAllIndentifiers() {
+    const identifiers: string[] = [];
+    Babel.transform(this.code, {
+      presets: this.presets,
+      filename: "file.tsx",
+      plugins: [
+        () => ({
+          visitor: {
+            Identifier(path: any) {
+              identifiers.push(path.node.name);
+            },
+          },
+        }),
+      ],
+    });
+    return identifiers;
+  }
+
+  /**
+   * List all component names in the code
+   * @returns
+   */
+  listAllComponentNames() {
+    const ComponentNames: string[] = [];
+    Babel.transform(this.code, {
+      presets: this.presets,
+      filename: "file.tsx",
+      plugins: [
+        () => ({
+          visitor: {
+            JSXElement(path: any) {
+              const openingElement = path.node.openingElement;
+              const componentName = openingElement.name.name;
+              if (
+                componentName &&
+                componentName[0] === componentName[0].toUpperCase()
+              ) {
+                ComponentNames.push(componentName);
+              }
+            },
+          },
+        }),
+      ],
+    });
+    return ComponentNames;
+  }
+
+  listAllComponentIds(componentName: string) {
+    const ComponentIds: string[] = [];
+    Babel.transform(this.code, {
+      presets: this.presets,
+      filename: "file.tsx",
+      plugins: [
+        () => ({
+          visitor: {
+            JSXElement(path: any) {
+              const openingElement = path.node.openingElement;
+              const _componentName = openingElement.name.name;
+              if (componentName === _componentName) {
+                const openingAttribute = openingElement.attributes.find(
+                  (attr: any) => attr?.name?.name === ID_ATTRIBUTE
+                );
+                if (openingAttribute?.value?.expression?.value) {
+                  ComponentIds.push(openingAttribute?.value?.expression?.value);
+                }
+              }
+            },
+          },
+        }),
+      ],
+    });
+    return ComponentIds;
+  }
+
+  createUUID() {
+    return uuid.v4();
+  }
+
+  addChild(payload: { id: string; content?: string }) {
+    const { id } = payload;
+    const ast = this.ast();
+    traverse(ast, {
+      JSXElement(path: any) {
+        const openingElement = path.node.openingElement;
+        const openingAttribute = openingElement.attributes.find(
+          (attr: any) => attr?.name?.name === ID_ATTRIBUTE
+        );
+        if (
+          openingAttribute?.value?.expression?.value === id ||
+          openingAttribute?.value?.value === id
+        ) {
+          // convert content to JSX
+          const content = payload.content
+            ? parse(payload.content, {
+                sourceType: "module",
+                plugins: ["jsx", "typescript"],
+              }).program.body[0]
+            : null;
+
+          if (content) {
+            path.node.children.push((content as any)?.expression);
+          }
+        }
+      },
+    });
+    this.astToCode(ast);
+    return this;
+  }
+
+  updateElementContent(id: string, content: string) {
+    const ast = this.ast();
+    traverse(ast, {
+      JSXElement(path: any) {
+        const openingElement = path.node.openingElement;
+        const openingAttribute = openingElement.attributes.find(
+          (attr: any) => attr?.name?.name === ID_ATTRIBUTE
+        );
+        if (
+          openingAttribute?.value?.expression?.value === id ||
+          openingAttribute?.value?.value === id
+        ) {
+          // update the children of the element
+          path.node.children = [
+            {
+              type: "JSXText",
+              value: content,
+            },
+          ];
+        }
+      },
+    });
+    this.astToCode(ast);
+  }
+
+  removeElement(id: string) {
+    console.log("REMOVE_ELEMENT", id);
+    const ast = this.ast();
+    traverse(ast, {
+      JSXElement(path: any) {
+        const openingElement = path.node.openingElement;
+        const openingAttribute = openingElement.attributes.find(
+          (attr: any) => attr?.name?.name === ID_ATTRIBUTE
+        );
+        if (
+          openingAttribute?.value?.expression?.value === id ||
+          openingAttribute?.value?.value === id
+        ) {
+          path.remove();
+        }
+      },
+    });
+    this.astToCode(ast);
+    return this;
+  }
+
+  /**
+   * Append ui code into return of default export function
+   * @param code
+   */
+  appendDefaultReturn(code: string) {
+    const ast = this.ast();
+    let isHandled = false;
+    traverse(ast, {
+      ExportDefaultDeclaration(path: any) {
+        if (isHandled) {
+          return;
+        }
+        isHandled = true;
+        console.log("EXPORT_DEFAULT_DECLARATION", path.node);
+        if (path.node.declaration.type === "FunctionDeclaration") {
+          // Find the return statement
+          const body = path.node.declaration.body.body;
+          const returnStatement = body.find(
+            (stmt: any) => stmt.type === "ReturnStatement"
+          );
+          if (returnStatement) {
+            // Append the code to the return statement
+            const newCode = parse(code, {
+              sourceType: "module",
+              plugins: ["jsx", "typescript"],
+            }).program.body[0];
+            const expression = (newCode as any).expression || newCode;
+            returnStatement.argument.children.push(expression);
+          }
+        }
+      },
+    });
+    this.astToCode(ast);
+  }
+}
+
+export default CodeMod;