@instructure/ui-codemods 8.14.1-snapshot.7 → 8.15.1-snapshot.2

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.15.0](https://github.com/instructure/instructure-ui/compare/v8.14.0...v8.15.0) (2022-01-26)
+
+**Note:** Version bump only for package @instructure/ui-codemods
+
 # [8.14.0](https://github.com/instructure/instructure-ui/compare/v8.13.0...v8.14.0) (2021-12-16)
 
 **Note:** Version bump only for package @instructure/ui-codemods

package/README.md

@@ -42,7 +42,7 @@ jscodeshift -t node_modules/@instructure/ui-codemods/lib/updatePropNames.js <pat
 This codemod helps you update your project by renaming `imports` that have changed (e.g., `instructure-ui` => `@instructure/<package name>`).
 
 ```sh
-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.json
+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
 ```
 
 [npm]: https://img.shields.io/npm/v/@instructure/ui-codemods.svg

package/lib/helpers/{replaceDeprecatedImports.js → replaceDeprecatedImports.ts}

@@ -22,15 +22,25 @@
  * SOFTWARE.
  */
 
-const parseImport = require('../utils/parseImport')
-const findTransform = require('../utils/findTransform')
-const findImportDeclaration = require('../utils/findImportDeclaration')
+import parseImport, { ParsedImport } from '../utils/parseImport'
+import findTransform from '../utils/findTransform'
+import findImportDeclaration from '../utils/findImportDeclaration'
+import {
+  API,
+  ASTPath,
+  Collection,
+  ImportDeclaration,
+  ImportDefaultSpecifier,
+  ImportSpecifier,
+  JSCodeshift
+} from 'jscodeshift'
+import type { ConfigObject, TransformObj } from '../updateImports'
 
 function transformImportPath(
-  importPath,
-  parsedImport,
-  transform,
-  transformDefaults
+  importPath: string,
+  parsedImport: ParsedImport,
+  transform: TransformObj,
+  transformDefaults: TransformObj
 ) {
   let updatedImportPath = transform.importPath || transformDefaults.importPath
 
@@ -47,34 +57,34 @@ function transformImportPath(
 }
 
 function updateImports(
-  j,
-  root,
-  config,
-  api,
-  importDeclaration,
-  importSpecifier,
-  importPath
+  j: JSCodeshift,
+  root: Collection,
+  config: ConfigObject,
+  api: API,
+  importDeclaration: ASTPath<ImportDeclaration>,
+  importSpecifier: ASTPath<ImportDefaultSpecifier> | ASTPath<ImportSpecifier>,
+  importPath: string
 ) {
   let hasModifications = false
-  const { transformDefaults = {}, transforms = [] } = config
-
+  const { transformDefaults = {} as TransformObj, transforms = [] } = config
   // This is the name of the export imported from the module. For example, in the import
   // `import { Foo as Bar } from '@instructure...` this would be Foo
   let moduleName
   if (
     importSpecifier &&
     importSpecifier.value &&
-    importSpecifier.value.imported
+    (importSpecifier.value as ImportSpecifier).imported
   ) {
-    moduleName = importSpecifier.value.imported.name
+    moduleName = (importSpecifier.value as ImportSpecifier).imported.name
   }
 
   // This is the local name created by the consumer. For example, in the import
   // `import { Foo as Bar } from '@instructure...` this would be Bar
-  let localName = importSpecifier.value.local.name
+  const localName = (importSpecifier.value as ImportDefaultSpecifier).local!
+    .name
 
   const parsedImport = parseImport(importPath)
-  let transform = findTransform(
+  const transform = findTransform(
     transforms,
     importPath,
     parsedImport,
@@ -90,16 +100,17 @@ function updateImports(
       importType = moduleName ? 'named' : 'default'
     }
 
-    let updatedModuleName = transform.moduleName || transformDefaults.moduleName
-    const currentModuleName = moduleName || parsedImport.moduleName
-
+    const updatedModuleName =
+      transform.moduleName || transformDefaults.moduleName
+    const currentModuleName = moduleName || parsedImport.moduleName!
+    let updatedModuleNameStr: string
     if (updatedModuleName) {
-      updatedModuleName =
+      updatedModuleNameStr =
         typeof updatedModuleName === 'function'
           ? updatedModuleName(currentModuleName)
           : updatedModuleName
     } else {
-      updatedModuleName = currentModuleName
+      updatedModuleNameStr = currentModuleName
     }
 
     const updatedImportPath = transformImportPath(
@@ -125,7 +136,7 @@ function updateImports(
     if (
       importType === 'named' &&
       importPath === updatedImportPath &&
-      moduleName === updatedModuleName
+      moduleName === updatedModuleNameStr
     ) {
       return false
     }
@@ -140,7 +151,7 @@ function updateImports(
     const { comments: existingComments = [] } =
       (updatedDeclaration || {}).value || {}
 
-    const cleanup = (newDeclaration) => {
+    const cleanup = (newDeclaration?: ImportDeclaration) => {
       hasModifications = true
       j(importSpecifier).remove()
 
@@ -168,7 +179,7 @@ function updateImports(
         // were already on the updated import declaration
         updatedDeclaration.value.comments = [
           ...(existingComments || []),
-          ...(removedImportDeclaration ? comments : [])
+          ...(removedImportDeclaration ? comments! : [])
         ]
       }
     }
@@ -198,7 +209,7 @@ function updateImports(
             .at(0)
             .insertAfter(
               j.importSpecifier(
-                j.identifier(updatedModuleName),
+                j.identifier(updatedModuleNameStr),
                 j.identifier(localName)
               )
             )
@@ -211,7 +222,7 @@ function updateImports(
             .at(0)
             .insertAfter(
               j.importSpecifier(
-                j.identifier(updatedModuleName),
+                j.identifier(updatedModuleNameStr),
                 j.identifier(localName)
               )
             )
@@ -224,7 +235,7 @@ function updateImports(
             j.importDeclaration(
               [
                 j.importSpecifier(
-                  j.identifier(updatedModuleName),
+                  j.identifier(updatedModuleNameStr),
                   j.identifier(localName)
                 )
               ],
@@ -238,7 +249,7 @@ function updateImports(
         const newDeclaration = j.importDeclaration(
           [
             j.importSpecifier(
-              j.identifier(updatedModuleName),
+              j.identifier(updatedModuleNameStr),
               j.identifier(localName)
             )
           ],
@@ -314,7 +325,12 @@ function updateImports(
  * Example:
  *  import Modal from 'instructure-ui/lib/Modal'
  */
-module.exports = function replaceDeprecatedImports(j, root, config, api) {
+export default function replaceDeprecatedImports(
+  j: JSCodeshift,
+  root: Collection,
+  config: ConfigObject,
+  api: API
+) {
   let hasModifications = false
 
   root.find(j.ImportDeclaration).forEach((importDeclaration) => {
@@ -360,7 +376,8 @@ module.exports = function replaceDeprecatedImports(j, root, config, api) {
           })
         } else {
           // If we have a declaration, but no specifiers that means there is just the import path
-          const { transformDefaults = {}, transforms = [] } = config
+          const { transformDefaults = {} as TransformObj, transforms = [] } =
+            config
           const parsedImport = parseImport(importPath)
           const transform = findTransform(transforms, importPath, parsedImport)
 

package/lib/helpers/{replaceDeprecatedProps.js → replaceDeprecatedProps.ts}

@@ -22,8 +22,20 @@
  * SOFTWARE.
  */
 
-const findDeprecatedProp = require('../utils/findDeprecatedProp')
-const createLiteral = require('../utils/createLiteral')
+import findDeprecatedProp from '../utils/findDeprecatedProp'
+import createLiteral from '../utils/createLiteral'
+import {
+  ASTPath,
+  Collection,
+  JSCodeshift,
+  JSXAttribute,
+  JSXExpressionContainer,
+  JSXIdentifier
+} from 'jscodeshift'
+import type {
+  ComponentUpdateData,
+  UpdatePropNamesOptions
+} from '../updatePropNames'
 
 /**
  * Find JSX attributes (props)
@@ -31,14 +43,17 @@ const createLiteral = require('../utils/createLiteral')
  * Example:
  *  <MyComponent [name] />
  */
-module.exports = function replaceDeprecatedProps(j, root, config) {
+export default function replaceDeprecatedProps(
+  j: JSCodeshift,
+  root: Collection,
+  config: UpdatePropNamesOptions
+) {
   let hasModifications = false
-
   // Find JSX Elements
   //
   // Rewrite usages of deprecated props for a Component.
   root.find(j.JSXOpeningElement).forEach((el) => {
-    const name = el.value.name.name
+    const name = (el.value.name as JSXIdentifier).name
 
     // Make sure we're working with a Component that we need to modify
     if (config[name]) {
@@ -51,10 +66,8 @@ module.exports = function replaceDeprecatedProps(j, root, config) {
             .forEach((i) => {
               const prop = i.value.name
               const match = findDeprecatedProp(config, name, prop)
-
               if (match) {
                 hasModifications = true
-
                 if (!match.new) {
                   // If config sets the new name to null, the prop has been
                   // removed. Remove the prop and value.
@@ -81,20 +94,20 @@ module.exports = function replaceDeprecatedProps(j, root, config) {
                         const { type } = expressionContainer.value.expression
                         // Verify that the expression container contains a literal
                         if (type === 'Literal') {
-                          replaceValue({
+                          replaceValue(
                             j,
                             literals,
                             match,
                             attr,
                             expressionContainer
-                          })
+                          )
                         }
                       })
                     } else if (literals && literals.length > 0) {
                       // If the value isn't in a jsx expression container, but we have a literal, that
                       // means that the user is passing a string value. For example, in the following
                       // jsx, `<div prop="someValue" />` we are looking at `"someValue"`
-                      replaceValue({ j, literals, match, attr })
+                      replaceValue(j, literals, match, attr)
                     } else {
                       // If we don't have a jsx expression container or a string literal, that means that
                       // we have just the attribute. For example, in the following jsx, `<div prop />`
@@ -104,12 +117,7 @@ module.exports = function replaceDeprecatedProps(j, root, config) {
                         j.jsxAttribute(newPropName, j.booleanLiteral(true))
                       )
                       // Look for literals again after update
-                      replaceValue({
-                        j,
-                        literals: j(attr).find(j.Literal),
-                        match,
-                        attr
-                      })
+                      replaceValue(j, j(attr).find(j.Literal), match, attr)
                     }
                   }
                 }
@@ -122,13 +130,13 @@ module.exports = function replaceDeprecatedProps(j, root, config) {
   return hasModifications
 }
 
-const replaceValue = ({
-  j,
-  literals,
-  match,
-  attr,
-  expressionContainer
-} = {}) => {
+const replaceValue = (
+  j: JSCodeshift,
+  literals: Collection,
+  match: ComponentUpdateData,
+  attr: ASTPath<JSXAttribute>,
+  expressionContainer?: ASTPath<JSXExpressionContainer>
+) => {
   literals.forEach((literalValue) => {
     const currentValue = literalValue.value.value
 

package/lib/{index.js → index.ts}

@@ -22,8 +22,7 @@
  * SOFTWARE.
  */
 
-const updatePropNames = require('./updatePropNames')
+import updatePropNames from './updatePropNames'
 
-module.exports = {
-  updatePropNames
-}
+export { updatePropNames }
+export default updatePropNames

package/lib/{updateImports.js → updateImports.ts}

@@ -22,33 +22,38 @@
  * SOFTWARE.
  */
 
-const fs = require('fs')
-const path = require('path')
+import fs from 'fs'
+import path from 'path'
+import formatSource from './utils/formatSource'
+import requireUncached from './utils/requireUncached'
+import replaceDeprecatedImports from './helpers/replaceDeprecatedImports'
+import type { API, FileInfo } from 'jscodeshift'
+import { ParsedImport } from './utils/parseImport'
 
-const formatSource = require('./utils/formatSource')
-const requireUncached = require('./utils/requireUncached')
-
-const replaceDeprecatedImports = require('./helpers/replaceDeprecatedImports')
-
-module.exports = function (file, api, options) {
+/**
+ * updates imports to the new per-package or the metapackage syntax.
+ * @param file Holds information about the currently processed file.
+ * @param api This object exposes the jscodeshift library and helper functions from the runner.
+ * @param options Contains all options that have been passed to runner
+ * @returns {*|null} null if there was nothing to reformat
+ */
+export default function updateImports(file: FileInfo, api: API, options: any) {
   const j = api.jscodeshift
   const c = path.resolve(process.cwd(), options.config)
-  let config = fs.existsSync(c) ? requireUncached(c) : null
-
+  let config:
+    | ConfigObject
+    | ((opts: { isMetaComponentPackageMigration: boolean }) => ConfigObject) =
+    fs.existsSync(c) ? requireUncached(c) : null
   if (!config) {
-    throw new Error(`Invalid config file "${c}"`)
+    throw new Error(`Invalid config file "${c}", is this the correct path?`)
   }
-
   if (typeof config === 'function') {
     const configOptions = {
       isMetaComponentPackageMigration: options.isMetaComponentPackageMigration
     }
-
     config = config(configOptions)
   }
-
   const root = j(file.source)
-
   let hasModifications = false
 
   hasModifications =
@@ -56,3 +61,26 @@ module.exports = function (file, api, options) {
 
   return hasModifications ? formatSource(root.toSource(), file.path) : null
 }
+
+export type ConfigObject = {
+  transformDefaults: TransformObj
+  transforms: Transform[]
+}
+
+export type TransformObj = {
+  importType?: string
+  importPath: string | ((path: string, parsedImport?: ParsedImport) => string)
+  moduleName: string | ((path?: string) => string)
+}
+
+export type Transform = {
+  where: {
+    importPath?: string
+    importPattern?: string
+    packageName?: string
+    packageNames?: string[]
+    moduleName?: string
+    moduleNames?: string[]
+  }
+  transform: TransformObj
+}

package/lib/{updatePropNames.js → updatePropNames.ts}

@@ -22,17 +22,19 @@
  * SOFTWARE.
  */
 
-const fs = require('fs')
-const path = require('path')
+import fs from 'fs'
+import path from 'path'
+import formatSource from './utils/formatSource'
+import requireUncached from './utils/requireUncached'
+import replaceDeprecatedProps from './helpers/replaceDeprecatedProps'
+import { API, FileInfo } from 'jscodeshift'
 
-const formatSource = require('./utils/formatSource')
-const requireUncached = require('./utils/requireUncached')
-const replaceDeprecatedProps = require('./helpers/replaceDeprecatedProps')
-
-module.exports = function (file, api, options) {
+export default function (file: FileInfo, api: API, options: any) {
   const j = api.jscodeshift
   const c = path.resolve(process.cwd(), options.config)
-  const config = fs.existsSync(c) ? requireUncached(c) : null
+  const config: UpdatePropNamesOptions = fs.existsSync(c)
+    ? requireUncached(c)
+    : null
 
   if (!config) {
     throw new Error(`Invalid config file "${c}"`)
@@ -45,3 +47,15 @@ module.exports = function (file, api, options) {
 
   return hasModifications ? formatSource(root.toSource(), file.path) : null
 }
+
+export type UpdatePropNamesOptions = {
+  [ComponentNames: string]: {
+    [versionNumber: string]: ComponentUpdateData[]
+  }
+}
+
+export type ComponentUpdateData = {
+  old: string
+  new: string
+  values: { old: string | boolean; new: string | null }[]
+}

package/lib/utils/{createLiteral.js → createLiteral.ts}

@@ -22,7 +22,12 @@
  * SOFTWARE.
  */
 
-module.exports = function createLiteral(j, value) {
+import type { JSCodeshift } from 'jscodeshift'
+
+export default function createLiteral(
+  j: JSCodeshift,
+  value: string | boolean | number | null
+) {
   if (typeof value === 'string') {
     return j.stringLiteral(value)
   }
@@ -36,7 +41,7 @@ module.exports = function createLiteral(j, value) {
   }
 
   if (value === null) {
-    return j.jsxExpressionContainer(j.nullLiteral(value))
+    return j.jsxExpressionContainer(j.nullLiteral())
   }
 
   return null

package/lib/utils/{findDeprecatedProp.js → findDeprecatedProp.ts}

@@ -22,6 +22,8 @@
  * SOFTWARE.
  */
 
+import type { UpdatePropNamesOptions } from '../updatePropNames'
+
 /**
  * Find the deprecated prop for a component
  *
@@ -30,7 +32,11 @@
  * @param {string} prop Property name
  * @return {object} Object if a match is found, otherwise null
  */
-module.exports = function findDeprecatedProp(config, comp, prop) {
+export default function findDeprecatedProp(
+  config: UpdatePropNamesOptions,
+  comp: string,
+  prop: string
+) {
   if (config && comp && prop && config[comp]) {
     const component = config[comp]
 
@@ -49,6 +55,5 @@ module.exports = function findDeprecatedProp(config, comp, prop) {
       }
     }
   }
-
   return null
 }

package/lib/utils/{findImportDeclaration.js → findImportDeclaration.ts}

@@ -22,19 +22,30 @@
  * SOFTWARE.
  */
 
-module.exports = function findImportDeclaration(j, root, importPath) {
-  let importDeclaration
+import { Collection, JSCodeshift } from 'jscodeshift'
 
+/**
+ * Finds an import statement with the given path in the given collection, e.g.
+ * "findImportDeclaration(j, root, 'myPath')" finds
+ * "import otherModule from 'myPath'"
+ * @param j JSCodeshift
+ * @param root the collection (AST tree) to search
+ * @param importPath the import path to look for
+ */
+export default 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
 }

package/lib/utils/{findTransform.js → findTransform.ts}

@@ -22,11 +22,14 @@
  * SOFTWARE.
  */
 
-module.exports = function findTransform(
-  transforms,
-  importPath,
-  parsedImport,
-  moduleName
+import { Transform } from '../updateImports'
+import { ParsedImport } from './parseImport'
+
+export default function findTransform(
+  transforms: Transform[],
+  importPath: string,
+  parsedImport: ParsedImport,
+  moduleName?: string
 ) {
   return (
     transforms.find(({ where = {} }) => {
@@ -57,7 +60,7 @@ module.exports = function findTransform(
         } else {
           foundTransform =
             foundTransform &&
-            where.moduleNames.includes(parsedImport.moduleName)
+            where.moduleNames.includes(parsedImport.moduleName!)
         }
       }
 
@@ -72,7 +75,7 @@ module.exports = function findTransform(
         performedTest = true
 
         foundTransform =
-          foundTransform && where.packageNames.includes(parsedImport.fullName)
+          foundTransform && where.packageNames.includes(parsedImport.fullName!)
       }
 
       if (where.importPath) {

package/lib/utils/{formatSource.js → formatSource.ts}

@@ -22,14 +22,13 @@
  * SOFTWARE.
  */
 
-const prettier = require('prettier')
+import prettier from 'prettier'
 
-module.exports = function formatSource(source, sourcePath) {
+export default function formatSource(source: string, sourcePath: string) {
   let options = null
 
   try {
     options = prettier.resolveConfig.sync(sourcePath)
-
     if (options) {
       // Set the parser argument if the consumer did not set one to avoid a console warning
       options = {
@@ -38,7 +37,7 @@ module.exports = function formatSource(source, sourcePath) {
       }
     }
   } catch (err) {
-    // Will revert to the deafult prettier options if a config cannot be parsed
+    // Will revert to the default prettier options if a config cannot be parsed
   }
 
   return prettier.format(

package/lib/utils/{parseImport.js → parseImport.ts}

@@ -22,16 +22,16 @@
  * SOFTWARE.
  */
 
-const path = require('path')
+import path from 'path'
 
-module.exports = function parseImport(importPath) {
+export default function parseImport(importPath: string): ParsedImport {
   let parsedImport = {}
 
   if (!importPath) return {}
 
   const splitPath = importPath.split('/')
 
-  const parseSourceAndModule = (entries = []) => {
+  const parseSourceAndModule = (entries: string[] = []) => {
     if (entries.length === 0) return {}
 
     const lastEntry = entries[entries.length - 1]
@@ -66,6 +66,13 @@ module.exports = function parseImport(importPath) {
       ...parseSourceAndModule(rest)
     }
   }
-
   return parsedImport
 }
+
+export type ParsedImport = {
+  scope?: string
+  name?: string
+  fullName?: string
+  moduleName?: string
+  sourcePath?: string
+}

package/lib/utils/{requireUncached.js → requireUncached.ts}

@@ -21,7 +21,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-module.exports = function requireUncached(module) {
+
+export default function requireUncached(module: string) {
   delete require.cache[require.resolve(module)]
   return require(module)
 }