@instructure/ui-codemods 8.17.1-snapshot.35 → 8.17.1-snapshot.80

package/README.md

@@ -45,6 +45,14 @@ This codemod helps you update your project by renaming `imports` that have chang
 jscodeshift -t node_modules/@instructure/ui-codemods/lib/updateImports.js <path> --config=node_modules/@instructure/instui-config/codemod-configs/v<version number ex. 5 or 6>/imports.config.js
 ```
 
+### Updating more complex props to the InstUI v8 syntax
+
+This codemod upgrades more complex changes like Button, also outputs any manual changes needed to the console. Run this in a InstUI v7 codebase only. This command has an optional fileName parameter, supplying this will append to the given file the warnings.
+
+```sh
+jscodeshift -t node_modules/@instructure/ui-codemods/lib/updateV7Props.js <path> -fileName updateV7PropsWarnings.txt
+```
+
 [npm]: https://img.shields.io/npm/v/@instructure/ui-codemods.svg
 [npm-url]: https://npmjs.com/package/@instructure/ui-codemods
 [license-badge]: https://img.shields.io/npm/l/instructure-ui.svg?style=flat-square

package/lib/helpers/replaceDeprecatedImports.ts

@@ -22,9 +22,6 @@
  * SOFTWARE.
  */
 
-import parseImport, { ParsedImport } from '../utils/parseImport'
-import findTransform from '../utils/findTransform'
-import findImportDeclaration from '../utils/findImportDeclaration'
 import {
   API,
   ASTPath,
@@ -35,6 +32,16 @@ import {
   JSCodeshift
 } from 'jscodeshift'
 import type { ConfigObject, TransformObj } from '../updateImports'
+import { Transform } from '../updateImports'
+import path from 'path'
+
+export type ParsedImport = {
+  scope?: string
+  name?: string
+  fullName?: string
+  moduleName?: string
+  sourcePath?: string
+}
 
 function transformImportPath(
   importPath: string,
@@ -319,6 +326,140 @@ function updateImports(
   return hasModifications
 }
 
+function findImportDeclaration(
+  j: JSCodeshift,
+  root: Collection,
+  importPath: string
+) {
+  let importDeclaration
+  const declarationQueryResult = root.find(j.ImportDeclaration, {
+    source: {
+      type: 'StringLiteral',
+      value: importPath
+    }
+  })
+  if (declarationQueryResult.length > 0) {
+    importDeclaration = declarationQueryResult.get()
+  }
+  return importDeclaration
+}
+
+function findTransform(
+  transforms: Transform[],
+  importPath: string,
+  parsedImport: ParsedImport,
+  moduleName?: string
+) {
+  return (
+    transforms.find(({ where = {} }) => {
+      // If `where` has no entries, there are no matching transforms
+      if (Object.keys(where).length === 0) return false
+
+      let performedTest = false
+      let foundTransform = true
+
+      if (where.moduleName) {
+        performedTest = true
+
+        if (moduleName) {
+          // Give preference to the module name parsed from the AST vs. the import path string
+          foundTransform = foundTransform && where.moduleName === moduleName
+        } else {
+          foundTransform =
+            foundTransform && where.moduleName === parsedImport.moduleName
+        }
+      }
+
+      if (where.moduleNames) {
+        performedTest = true
+
+        if (moduleName) {
+          foundTransform =
+            foundTransform && where.moduleNames.includes(moduleName)
+        } else {
+          foundTransform =
+            foundTransform &&
+            where.moduleNames.includes(parsedImport.moduleName!)
+        }
+      }
+
+      if (where.packageName) {
+        performedTest = true
+
+        foundTransform =
+          foundTransform && where.packageName === parsedImport.fullName
+      }
+
+      if (where.packageNames) {
+        performedTest = true
+
+        foundTransform =
+          foundTransform && where.packageNames.includes(parsedImport.fullName!)
+      }
+
+      if (where.importPath) {
+        performedTest = true
+
+        foundTransform = foundTransform && where.importPath === importPath
+      }
+
+      if (where.importPattern) {
+        performedTest = true
+
+        foundTransform =
+          foundTransform && new RegExp(where.importPattern).test(importPath)
+      }
+
+      return performedTest && foundTransform
+    }) || {}
+  ).transform
+}
+
+function parseImport(importPath: string): ParsedImport {
+  let parsedImport = {}
+
+  if (!importPath) return {}
+
+  const splitPath = importPath.split('/')
+
+  const parseSourceAndModule = (entries: string[] = []) => {
+    if (entries.length === 0) return {}
+
+    const lastEntry = entries[entries.length - 1]
+
+    const moduleOffset = path.parse(lastEntry).name === 'index' ? 2 : 1
+
+    const moduleName = entries[entries.length - moduleOffset]
+
+    return {
+      moduleName: moduleName ? path.parse(moduleName).name : undefined,
+      sourcePath: entries.slice(0, entries.length - moduleOffset).join('/')
+    }
+  }
+
+  if (importPath[0] === '@') {
+    const [scope, name, ...rest] = splitPath
+
+    parsedImport = {
+      scope,
+      name,
+      fullName: `${scope}/${name}`,
+      moduleName: `${scope}/${name}`,
+      ...parseSourceAndModule(rest)
+    }
+  } else {
+    const [name, ...rest] = splitPath
+
+    parsedImport = {
+      name,
+      fullName: name,
+      moduleName: name,
+      ...parseSourceAndModule(rest)
+    }
+  }
+  return parsedImport
+}
+
 /**
  * Find imports
  *

package/lib/helpers/replaceDeprecatedProps.ts

@@ -22,8 +22,6 @@
  * SOFTWARE.
  */
 
-import findDeprecatedProp from '../utils/findDeprecatedProp'
-import createLiteral from '../utils/createLiteral'
 import {
   ASTPath,
   Collection,
@@ -36,14 +34,16 @@ import type {
   ComponentUpdateData,
   UpdatePropNamesOptions
 } from '../updatePropNames'
+import { printWarning } from './v7PropsUpdateHelpers'
 
 /**
- * Find JSX attributes (props)
- *
+ * Replaces deprecated pros and their values based on the given config
+ * object
  * Example:
- *  <MyComponent [name] />
+ *  <Flex wrapItems  ->  <Flex wrap="wrap"
  */
 export default function replaceDeprecatedProps(
+  filePath: string,
   j: JSCodeshift,
   root: Collection,
   config: UpdatePropNamesOptions
@@ -91,9 +91,11 @@ export default function replaceDeprecatedProps(
                       // This means the value is contained in a jsx expression container. For example,
                       // in the following jsx, `<div prop={someValue} />` we are looking at `{someValue}`
                       expressionContainers.forEach((expressionContainer) => {
-                        const { type } = expressionContainer.value.expression
                         // Verify that the expression container contains a literal
-                        if (type === 'Literal') {
+                        if (
+                          expressionContainer.value.expression.type ===
+                          'Literal'
+                        ) {
                           replaceValue(
                             j,
                             literals,
@@ -101,6 +103,15 @@ export default function replaceDeprecatedProps(
                             attr,
                             expressionContainer
                           )
+                        } else {
+                          printWarning(
+                            filePath,
+                            el.value.loc?.start.line,
+                            "Could not rename the value of '" +
+                              prop +
+                              "' because its value is a function or a variable " +
+                              'reference. Please update manually.'
+                          )
                         }
                       })
                     } else if (literals && literals.length > 0) {
@@ -159,3 +170,60 @@ const replaceValue = (
     }
   })
 }
+
+/**
+ * Find the deprecated prop for a component
+ *
+ * @param config Deprecated property configuration
+ * @param comp Component name
+ * @param prop Property name
+ * @return Object if a match is found, otherwise null
+ */
+const findDeprecatedProp = (
+  config: UpdatePropNamesOptions,
+  comp: string,
+  prop: string
+) => {
+  if (config && comp && prop && config[comp]) {
+    const component = config[comp]
+
+    // Iterate versions
+    const versions = Object.keys(component)
+    for (let i = 0; i < versions.length; i++) {
+      const props = component[versions[i]]
+
+      // Iterate properties
+      for (let j = 0; j < props.length; j++) {
+        const match = props[j]
+
+        if (prop === match.old) {
+          return match
+        }
+      }
+    }
+  }
+  return null
+}
+
+const createLiteral = (
+  j: JSCodeshift,
+  value: string | boolean | number | null
+) => {
+  if (typeof value === 'string') {
+    return j.stringLiteral(value)
+  }
+
+  if (typeof value === 'number') {
+    return j.jsxExpressionContainer(j.numericLiteral(value))
+  }
+
+  if (typeof value === 'boolean') {
+    return j.jsxExpressionContainer(j.booleanLiteral(value))
+  }
+
+  if (value === null) {
+    return j.jsxExpressionContainer(j.nullLiteral())
+  }
+
+  return null
+}