@kaizen/components 0.0.0-canary-fix-select-futureselect-focus-jumping-20241003232256 → 0.0.0-canary-tsx-codemod-20241029235345

package/codemods/utils/createProp.spec.ts

@@ -0,0 +1,83 @@
+import ts from "typescript"
+import { parseJsx } from "../__tests__/utils/parseJsx"
+import { createStyleProp } from "./createProp"
+import { printAst } from "./printAst"
+import { TransformConfig, transformSource } from "./transformSource"
+import { updateJsxElementWithNewProps } from "./updateJsxElementWithNewProps"
+
+export const mockedTransformer =
+  (context: ts.TransformationContext) =>
+  (rootNode: ts.Node): ts.Node => {
+    const visit = (node: ts.Node): ts.Node => {
+      if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
+        if (node.tagName.getText() === "Pancakes") {
+          const newAttributes = node.attributes.properties.map(attr => {
+            if (ts.isJsxAttribute(attr)) {
+              if (attr.name.getText() === "replaceWithExistingValue") {
+                return createStyleProp({ width: attr.initializer! })
+              }
+
+              if (attr.name.getText() === "replaceWithStringValue") {
+                return createStyleProp({ width: "100px" })
+              }
+
+              if (attr.name.getText() === "replaceWithNumberValue") {
+                return createStyleProp({ width: 100 })
+              }
+            }
+            return attr
+          })
+          return updateJsxElementWithNewProps(node, newAttributes)
+        }
+      }
+      return ts.visitEachChild(node, visit, context)
+    }
+    return ts.visitNode(rootNode, visit)
+  }
+
+const testCreateStyleProp = (
+  sourceFile: TransformConfig["sourceFile"]
+): string =>
+  transformSource({
+    sourceFile,
+    astTransformer: mockedTransformer,
+    tagName: "Pancakes",
+  })
+
+describe("createStyleProp()", () => {
+  it("creates a style prop with a string value", () => {
+    const inputAst = parseJsx("<Pancakes replaceWithStringValue />")
+    const outputAst = parseJsx('<Pancakes style={{ width: "100px" }} />')
+    expect(testCreateStyleProp(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it("creates a style prop with a number value", () => {
+    const inputAst = parseJsx("<Pancakes replaceWithNumberValue />")
+    const outputAst = parseJsx("<Pancakes style={{ width: 100 }} />")
+    expect(testCreateStyleProp(inputAst)).toEqual(printAst(outputAst))
+  })
+
+  it("creates a style prop with a pre-existing value", () => {
+    const inputAst = parseJsx(`
+      export const TestComponent = () => (
+        <>
+          <Pancakes replaceWithExistingValue="20px" />
+          <Pancakes replaceWithExistingValue={100} />
+          <Pancakes replaceWithExistingValue={variable} />
+          <Pancakes replaceWithExistingValue={variable.nested} />
+        </>
+      )
+    `)
+    const outputAst = parseJsx(`
+      export const TestComponent = () => (
+        <>
+          <Pancakes style={{ width: "20px" }} />
+          <Pancakes style={{ width: 100 }} />
+          <Pancakes style={{ width: variable }} />
+          <Pancakes style={{ width: variable.nested }} />
+        </>
+      )
+    `)
+    expect(testCreateStyleProp(inputAst)).toEqual(printAst(outputAst))
+  })
+})

package/codemods/utils/createProp.ts

@@ -0,0 +1,51 @@
+import ts from "typescript"
+
+export const createProp = (
+  name: string,
+  value?: ts.JsxAttributeValue | undefined
+): ts.JsxAttribute =>
+  ts.factory.createJsxAttribute(ts.factory.createIdentifier(name), value)
+
+export const createStringProp = (
+  name: string,
+  value: string
+): ts.JsxAttribute => createProp(name, ts.factory.createStringLiteral(value))
+
+// A util that creates a style prop with the given attributes
+// ie. adding style={{ width: "100px" }}
+export const createStyleProp = (
+  attributes: Record<string, string | number | ts.JsxAttributeValue>
+): ts.JsxAttribute => {
+  const styles = Object.keys(attributes).map(name => {
+    const value = attributes[name]
+    if (typeof value === "string") {
+      return ts.factory.createPropertyAssignment(
+        name,
+        ts.factory.createStringLiteral(value)
+      )
+    }
+
+    if (typeof value === "number") {
+      return ts.factory.createPropertyAssignment(
+        name,
+        ts.factory.createNumericLiteral(value)
+      )
+    }
+
+    if (ts.isJsxExpression(value)) {
+      if (value.expression) {
+        return ts.factory.createPropertyAssignment(name, value.expression)
+      }
+    }
+
+    return ts.factory.createPropertyAssignment(name, value)
+  })
+
+  return createProp(
+    "style",
+    ts.factory.createJsxExpression(
+      undefined,
+      ts.factory.createObjectLiteralExpression(styles)
+    )
+  )
+}

package/codemods/utils/getKaioTagName.spec.ts

@@ -0,0 +1,85 @@
+import { parseJsx } from "../__tests__/utils"
+import { getKaioTagName, getKaioTagNamesByRegex } from "./getKaioTagName"
+
+describe("getKaioTagName", () => {
+  it("returns the import name if it matches the target specifier", () => {
+    const input = parseJsx('import { Well } from "@kaizen/components"')
+    const tagName = getKaioTagName(input, "Well")
+    expect(tagName).toBe("Well")
+  })
+
+  it("returns the import alias if it matches the target specifier", () => {
+    const input = parseJsx(
+      'import { Well as KaizenWell } from "@kaizen/components"'
+    )
+    const tagName = getKaioTagName(input, "Well")
+    expect(tagName).toBe("KaizenWell")
+  })
+
+  it("returns undefined if there is no match to the target specifier", () => {
+    const input = parseJsx('import { Well } from "@kaizen/well"')
+    const tagName = getKaioTagName(input, "Well")
+    expect(tagName).toBe(undefined)
+  })
+})
+
+describe("getKaioTagNamesByRegex", () => {
+  it("returns the import names if it matches the regex target specifier", () => {
+    const input = parseJsx(
+      'import { AddIcon, ArrowDownIcon, Well } from "@kaizen/components"'
+    )
+    const tagNames = getKaioTagNamesByRegex(input, "Icon")
+    expect(tagNames).toEqual(
+      new Map([
+        [
+          "@kaizen/components",
+          new Map([
+            ["AddIcon", "AddIcon"],
+            ["ArrowDownIcon", "ArrowDownIcon"],
+          ]),
+        ],
+      ])
+    )
+  })
+
+  it("returns the import alias if it matches the target specifier", () => {
+    const input = parseJsx(
+      'import { AddIcon as KzAddIcon, ArrowDownIcon, Well } from "@kaizen/components"'
+    )
+    const tagNames = getKaioTagNamesByRegex(input, "Icon")
+    expect(tagNames).toEqual(
+      new Map([
+        [
+          "@kaizen/components",
+          new Map([
+            ["KzAddIcon", "AddIcon"],
+            ["ArrowDownIcon", "ArrowDownIcon"],
+          ]),
+        ],
+      ])
+    )
+  })
+
+  it("returns matching import names from different KAIO imports", () => {
+    const input = parseJsx(`
+      import { AddIcon, Well } from "@kaizen/components"
+      import { Icon } from "@kaizen/components/future"
+    `)
+    const tagNames = getKaioTagNamesByRegex(input, "Icon$")
+    expect(tagNames).toEqual(
+      new Map([
+        ["@kaizen/components", new Map([["AddIcon", "AddIcon"]])],
+        ["@kaizen/components/future", new Map([["Icon", "Icon"]])],
+      ])
+    )
+  })
+
+  it("returns undefined if there is no match to the target specifier", () => {
+    const input = parseJsx(`
+      import { Well } from "@kaizen/components"
+      import { AddIcon } from "@kaizen/icons"
+    `)
+    const tagNames = getKaioTagNamesByRegex(input, "Icon")
+    expect(tagNames).toBe(undefined)
+  })
+})

package/codemods/utils/getKaioTagName.ts

@@ -0,0 +1,129 @@
+import ts from "typescript"
+
+const getKaioNamedImports = (
+  visitedNode: ts.Node
+):
+  | {
+      importModuleName: string
+      namedImports: ts.NodeArray<ts.ImportSpecifier>
+    }
+  | undefined => {
+  if (ts.isImportDeclaration(visitedNode)) {
+    const moduleSpecifier = (visitedNode.moduleSpecifier as ts.StringLiteral)
+      .text
+    if (moduleSpecifier.includes("@kaizen/components")) {
+      const namedBindings = visitedNode.importClause?.namedBindings
+      if (namedBindings && ts.isNamedImports(namedBindings)) {
+        return {
+          importModuleName: moduleSpecifier,
+          namedImports: namedBindings.elements,
+        }
+      }
+    }
+  }
+
+  return undefined
+}
+
+type ImportSpecifierNames = { tagName: string; originalName: string }
+
+const getNamesFromSpecifier = (
+  importSpecifier: ts.ImportSpecifier
+): ImportSpecifierNames => {
+  const tagName = importSpecifier.name.getText()
+  const originalName = importSpecifier.propertyName
+    ? importSpecifier.propertyName.getText()
+    : tagName
+
+  return { tagName, originalName }
+}
+
+/**
+ * Recurses through AST to find the import name or alias in KAIO that matches the provided component name.
+ *
+ * @returns string | undefined
+ * - `string` the import name or alias found
+ * - `undefined` no import that matches the target
+ */
+export const getKaioTagName = (
+  node: ts.Node,
+  importSpecifierTarget: string
+): string | undefined => {
+  let alias: string | undefined
+
+  const visitNode = (visitedNode: ts.Node): string | undefined => {
+    const kaioNamedImports = getKaioNamedImports(visitedNode)
+
+    if (!kaioNamedImports) {
+      return ts.forEachChild(visitedNode, visitNode) || undefined
+    }
+
+    kaioNamedImports.namedImports.find(importSpecifier => {
+      const { tagName, originalName } = getNamesFromSpecifier(importSpecifier)
+
+      if (originalName === importSpecifierTarget) {
+        alias = tagName
+        return true
+      }
+
+      return false
+    })
+
+    return alias
+  }
+
+  return visitNode(node)
+}
+
+// Key is the tag name (component name or alias)
+// Value is the original component name
+type TagNamesMap = Map<string, string>
+// Key is the import module name (eg. `@kaizen/components/future`)
+export type ImportModuleNameTagsMap = Map<string, TagNamesMap>
+
+/**
+ * Recurses through AST to find all the import names or aliases in KAIO that match the provided regex.
+ *
+ * @returns Map<string, Map<string, string>> | undefined
+ * - `Map<string, Map<string, string>>` = Map<importModuleName, Map<tagName, originalName>>
+ *   - `importModuleName` = the module name of the KAIO import (eg. `@kaizen/components/future`)
+ *   - `tagName` = the component name or alias (eg. `KaizenWell`)
+ *   - `originalName` = the original component name (eg. `Well`)
+ * - `undefined` no imports that match the target
+ */
+export const getKaioTagNamesByRegex = (
+  node: ts.Node,
+  importSpecifierPattern: RegExp | string
+): ImportModuleNameTagsMap | undefined => {
+  const tagsByImportModuleName = new Map() as ImportModuleNameTagsMap
+
+  const visitNode = (visitedNode: ts.Node): ts.Node | undefined => {
+    const kaioNamedImports = getKaioNamedImports(visitedNode)
+
+    if (!kaioNamedImports) {
+      return ts.forEachChild(visitedNode, visitNode)
+    }
+
+    const tags = new Map() as TagNamesMap
+    kaioNamedImports.namedImports.forEach(importSpecifier => {
+      const { tagName, originalName } = getNamesFromSpecifier(importSpecifier)
+
+      if (new RegExp(importSpecifierPattern).test(originalName)) {
+        tags.set(tagName, originalName)
+      }
+    })
+
+    if (tags.size > 0) {
+      tagsByImportModuleName.set(
+        kaioNamedImports.importModuleName,
+        new Map(tags)
+      )
+    }
+
+    return ts.forEachChild(visitedNode, visitNode)
+  }
+
+  visitNode(node)
+
+  return tagsByImportModuleName.size === 0 ? undefined : tagsByImportModuleName
+}

package/codemods/utils/index.ts

@@ -1,7 +1,9 @@
+export * from "./createProp"
 export * from "./getPropValueText"
-export * from "./getTagName"
+export * from "./getKaioTagName"
 export * from "./migrateStringProp"
 export * from "./printAst"
 export * from "./transformComponentsInDir"
 export * from "./transformSource"
+export * from "./updateKaioImports"
 export * from "./updateJsxElementWithNewProps"

package/codemods/utils/transformComponentsInDir.ts

@@ -1,23 +1,23 @@
 import fs from "fs"
 import path from "path"
 import ts from "typescript"
-import { transformSource, getTagName, TransformConfig } from "."
+import { transformSource, getKaioTagName, TransformConfig } from "."
 
-/** Walks the directory and runs the runs the AST transformer on the given component name */
-export const transformComponentsInDir = (
+export const traverseDir = (
   dir: string,
-  transformer: TransformConfig["astTransformer"],
-  componentName: string
+  transformFile: (componentFilePath: string, sourceFile: ts.SourceFile) => void
 ): void => {
   if (dir.includes("node_modules")) {
     return
   }
 
   const files = fs.readdirSync(dir)
+
   files.forEach(file => {
     const fullPath = path.join(dir, file)
+
     if (fs.statSync(fullPath).isDirectory()) {
-      transformComponentsInDir(fullPath, transformer, componentName)
+      traverseDir(fullPath, transformFile)
     } else if (fullPath.endsWith(".tsx")) {
       const source = fs.readFileSync(fullPath, "utf8")
       const sourceFile = ts.createSourceFile(
@@ -26,17 +26,33 @@ export const transformComponentsInDir = (
         ts.ScriptTarget.Latest,
         true
       )
-      const tagName = getTagName(sourceFile, componentName)
 
-      if (tagName) {
-        const updatedSourceFile = transformSource({
-          sourceFile,
-          astTransformer: transformer,
-          tagName,
-        })
-
-        fs.writeFileSync(fullPath, updatedSourceFile, "utf8")
-      }
+      transformFile(fullPath, sourceFile)
     }
   })
 }
+
+/** Walks the directory and runs the AST transformer on the given component name */
+export const transformComponentsInDir = (
+  dir: string,
+  transformer: TransformConfig["astTransformer"],
+  componentName: string
+): void => {
+  const transformFile = (
+    componentFilePath: string,
+    sourceFile: ts.SourceFile
+  ): void => {
+    const tagName = getKaioTagName(sourceFile, componentName)
+    if (tagName) {
+      const updatedSourceFile = transformSource({
+        sourceFile,
+        astTransformer: transformer,
+        tagName,
+      })
+
+      fs.writeFileSync(componentFilePath, updatedSourceFile, "utf8")
+    }
+  }
+
+  traverseDir(dir, transformFile)
+}

package/codemods/utils/transformSource.ts

@@ -1,21 +1,26 @@
 import ts from "typescript"
+import { ImportModuleNameTagsMap } from "./getKaioTagName"
 import { printAst } from "./printAst"
 
-export type TransformConfig = {
+export type TransformConfig<
+  TagName extends string | ImportModuleNameTagsMap = string,
+> = {
   sourceFile: ts.SourceFile
   astTransformer: (
     context: ts.TransformationContext,
-    tagName: string
+    tagName: TagName
   ) => (rootNode: ts.Node) => ts.Node
-  tagName: string
+  tagName: TagName
 }
 
 /** Transforms the source file with the transformer and target import alias provided */
-export const transformSource = ({
+export const transformSource = <
+  TagName extends string | ImportModuleNameTagsMap,
+>({
   sourceFile,
   astTransformer,
   tagName,
-}: TransformConfig): string => {
+}: TransformConfig<TagName>): string => {
   const result = ts.transform(sourceFile, [
     context => astTransformer(context, tagName),
   ])

package/codemods/utils/updateJsxElementWithNewProps.ts

@@ -2,19 +2,20 @@ import ts from "typescript"
 
 export const updateJsxElementWithNewProps = (
   node: ts.Node,
-  newAttributes: ts.JsxAttributeLike[]
+  newAttributes: ts.JsxAttributeLike[],
+  newTagName?: string
 ): ts.Node => {
   if (ts.isJsxOpeningElement(node)) {
     return ts.factory.updateJsxOpeningElement(
       node,
-      node.tagName,
+      newTagName ? ts.factory.createIdentifier(newTagName) : node.tagName,
       node.typeArguments,
       ts.factory.createJsxAttributes(newAttributes)
     )
   } else if (ts.isJsxSelfClosingElement(node)) {
     return ts.factory.updateJsxSelfClosingElement(
       node,
-      node.tagName,
+      newTagName ? ts.factory.createIdentifier(newTagName) : node.tagName,
       node.typeArguments,
       ts.factory.createJsxAttributes(newAttributes)
     )