Issues with Update variable references for jsCodemod

Question

I'm very new to jscodeshift.

Goal: I'm trying to build a codemod that does the following:

1. Remove old import -> DONE
2. Add new Import -> DONE
3. Update all references of old import -> not sure how to do this

I'm using transform imports library for this task.

Source Code:

import type { Query } from 'assets/core_api/types/query' // OLD IMPORT
// import type { IQuery } from '@demo/sdk // -> END GOAL: NEW IMPORT
import * as React from 'react'

export interface IProps {
  query: Query
}

const Demo = ({ query: Query }) => {
  return <div>Hello</div>
}

// component
export const DemoComponent: React.FC<IProps> = ({ query }) => {
  return <Demo query={query} />
}

Code:

// To Run: jscodeshift ./explore.tsx -t ./explore-mod.ts --extensions=ts,tsx --parser=tsx
const transformImports = require('transform-imports')

module.exports = function (fileInfo, api, options) {
  const j = api.jscodeshift
  const root = j(fileInfo.source)
  let transformedSource = fileInfo.source

  /* Add new Import */
  const addIQueryImport = () => {
    return j(root.find(j.Declaration).at(0).get()).insertBefore(
      "import type { IQuery } from '@demo/sdk'"
    )
  }

  // Check if new import exists.
  const importDeclaration = root.find(j.ImportDeclaration, {
    source: {
      type: 'StringLiteral',
      value: '@demo/sdk',
    },
  })

  const identifierCollection = importDeclaration.find(j.Identifier)
  const isIQueryExistingOnCode = identifierCollection.length

  // If there is no existing new import, add it.
  if (!isIQueryExistingOnCode) {
    addIQueryImport()
    transformedSource = root.toSource()
  }

  // Remove old assets
  return transformImports(transformedSource, importDefs => {
    importDefs.forEach(importDef => {
      if (importDef.source !== 'assets/core_api/types/query') {
        return
      }
      // If imported export is 'Query' then remove it.
      if (importDef.importedExport.name === 'Query') {
        importDef.remove()
      }
    })
  })
}

Question: How do i update references of Query to iQuery in the code?

Answer 1

You can use my library Putout for this purpose. Here is an example of Includer:

export const include = () => [
    'import type {Query} from "assets/core_api/types/query"'
]

export const fix = (path) => {
    path.scope.rename('Query', 'IQuery');
    path.node.source.value = '@demo/sdk';
}

Try it.

What it does is:

• ✅ include node with Query type;
• ✅ rename Query to IQuery using Babel API;
• ✅ update value of a source, that is StringLiteral;