feat: support import aliases. (#13)

Author: knightedcodemonkey

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@knighted/display-name",
-  "version": "1.0.0-rc.3",
+  "version": "1.0.0-rc.4",
   "description": "Codemod to add a React displayName to function components.",
   "type": "module",
   "exports": {
@@ -51,7 +51,7 @@
   "dependencies": {
     "@knighted/walk": "^1.0.0-rc.2",
     "magic-string": "^0.30.17",
-    "oxc-parser": "^0.68.1"
+    "oxc-parser": "^0.69.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.26.0",

package.json

@@ -19,13 +19,13 @@ type Scope = {
   type: string
   pragmas: Set<string>
 }
-type Pragma = (typeof pragmas)[number]
+type Pragmas = {
+  react: string
+  memo: string
+  forwardRef: string
+}
 
 const pascal = /^[A-Z][a-zA-Z0-9]*$/
-const pragmas = ['React', 'memo', 'forwardRef'] as const
-const isPragma = (name: string): name is Pragma => {
-  return pragmas.includes(name as Pragma)
-}
 const isIdentifierName = (node: Node): node is IdentifierName => {
   return node.type === 'Identifier' && typeof node.name === 'string'
 }
@@ -58,44 +58,38 @@ const collectDisplayNames = async (node: Node, code: MagicString) => {
   return foundDisplayNames
 }
 const detectReactPragmas = async (node: Node) => {
-  let isReact = false
-  let isReactMemo = false
-  let isReactForwardRef = false
+  let react = ''
+  let memo = ''
+  let forwardRef = ''
 
   await walk(node, {
     enter(node) {
       if (node.type === 'ImportDeclaration' && node.source.value === 'react') {
         for (const specifier of node.specifiers) {
-          if (
-            specifier.type === 'ImportDefaultSpecifier' &&
-            specifier.local.name === 'React'
-          ) {
-            isReact = true
+          if (specifier.type === 'ImportDefaultSpecifier') {
+            react = specifier.local.name
           }
 
           if (
             specifier.type === 'ImportSpecifier' &&
             specifier.imported.type === 'Identifier'
           ) {
-            if (specifier.imported.name === 'memo' && specifier.local.name === 'memo') {
-              isReactMemo = true
+            if (specifier.imported.name === 'memo') {
+              memo = specifier.local.name
             }
 
-            if (
-              specifier.imported.name === 'forwardRef' &&
-              specifier.local.name === 'forwardRef'
-            ) {
-              isReactForwardRef = true
+            if (specifier.imported.name === 'forwardRef') {
+              forwardRef = specifier.local.name
             }
           }
         }
       }
     },
   })
 
-  return { isReact, isReactMemo, isReactForwardRef }
+  return { react, memo, forwardRef }
 }
-const isPragmaShadowed = (pragma: Pragma, scopes: Scope[]) => {
+const isPragmaShadowed = (pragma: string, scopes: Scope[]) => {
   for (const scope of scopes) {
     if (scope.pragmas.has(pragma)) {
       return true
@@ -104,40 +98,45 @@ const isPragmaShadowed = (pragma: Pragma, scopes: Scope[]) => {
 
   return false
 }
-const isReactMember = (pragma: Pragma, node: CallExpression, scopes: Scope[]) => {
+const isReactMember = (
+  pragma: string,
+  node: CallExpression,
+  pragmas: Pragmas,
+  scopes: Scope[],
+) => {
   const { callee } = node
 
   return (
     callee.type === 'MemberExpression' &&
     callee.object.type === 'Identifier' &&
-    callee.object.name === 'React' &&
-    !isPragmaShadowed('React', scopes) &&
+    callee.object.name === pragmas.react &&
     callee.property.type === 'Identifier' &&
-    callee.property.name === pragma
+    callee.property.name === pragma &&
+    !isPragmaShadowed(pragmas.react, scopes)
   )
 }
-const isMemo = (node: CallExpression, scopes: Scope[]) => {
+const isMemo = (node: CallExpression, pragmas: Pragmas, scopes: Scope[]) => {
   const { callee } = node
 
   return (
     (callee.type === 'Identifier' &&
-      callee.name === 'memo' &&
-      !isPragmaShadowed('memo', scopes)) ||
-    isReactMember('memo', node, scopes)
+      callee.name === pragmas.memo &&
+      !isPragmaShadowed(pragmas.memo, scopes)) ||
+    isReactMember('memo', node, pragmas, scopes)
   )
 }
-const isForwardRef = (node: CallExpression, scopes: Scope[]) => {
+const isForwardRef = (node: CallExpression, pragmas: Pragmas, scopes: Scope[]) => {
   const { callee } = node
 
   return (
     (callee.type === 'Identifier' &&
-      callee.name === 'forwardRef' &&
-      !isPragmaShadowed('forwardRef', scopes)) ||
-    isReactMember('forwardRef', node, scopes)
+      callee.name === pragmas.forwardRef &&
+      !isPragmaShadowed(pragmas.forwardRef, scopes)) ||
+    isReactMember('forwardRef', node, pragmas, scopes)
   )
 }
-const isMemoWrapped = (parent: Node, scopes: Scope[]) => {
-  return parent.type === 'CallExpression' && isMemo(parent, scopes)
+const isMemoWrapped = (parent: Node, pragmas: Pragmas, scopes: Scope[]) => {
+  return parent.type === 'CallExpression' && isMemo(parent, pragmas, scopes)
 }
 const scopeNodes = [
   'FunctionDeclaration',
@@ -159,11 +158,13 @@ const defaultOptions = {
 const modify = async (source: string, options: Options = defaultOptions) => {
   const ast = parseSync('file.tsx', source)
   const code = new MagicString(source)
-  const { isReact, isReactMemo, isReactForwardRef } = await detectReactPragmas(
-    ast.program,
-  )
+  const { react, memo, forwardRef } = await detectReactPragmas(ast.program)
+  const pragmas = { react, memo, forwardRef } satisfies Pragmas
+  const isPragma = (name: string) => {
+    return name === react || name === memo || name === forwardRef
+  }
 
-  if (isReact || isReactMemo || isReactForwardRef) {
+  if (react || memo || forwardRef) {
     const scopes: Scope[] = []
     const foundDisplayNames = await collectDisplayNames(ast.program, code)
     const opts = {
@@ -321,13 +322,13 @@ const modify = async (source: string, options: Options = defaultOptions) => {
             node.arguments[0].type === 'ArrowFunctionExpression') &&
           !node.arguments[0].id
         ) {
-          if (isMemo(node, scopes)) {
+          if (isMemo(node, pragmas, scopes)) {
             addDisplayName(ancestors, node)
           }
 
-          if (isForwardRef(node, scopes)) {
+          if (isForwardRef(node, pragmas, scopes)) {
             const parent = ancestors[ancestors.length - 2]
-            const memoWrapped = isMemoWrapped(parent, scopes)
+            const memoWrapped = isMemoWrapped(parent, pragmas, scopes)
 
             if (!memoWrapped || (memoWrapped && opts.modifyNestedForwardRef)) {
               addDisplayName(ancestors, node, memoWrapped)

src/displayName.ts

@@ -107,7 +107,7 @@ describe('@knighted/displayName', () => {
     assert.equal(types, 0)
   })
 
-  it('requires memo, forwardRef or React.memo/React.forwardRef to be in scope', async () => {
+  it('requires memo, forwardRef or React to be in scope', async () => {
     const components = `
       const Foo = memo(() => {
         return <div>foo</div>
@@ -158,6 +158,36 @@ describe('@knighted/displayName', () => {
     assert.ok(code.indexOf("Bar.displayName = 'Bar'") === -1)
     assert.ok(code.indexOf("Baz.displayName = 'Baz'") === -1)
     assert.ok(code.indexOf("Qux.displayName = 'Qux'") === -1)
+
+    src = `
+      import { memo } from 'react'
+      ${components}
+    `
+    code = await modify(src)
+    assert.ok(code.indexOf("Foo.displayName = 'Foo'") !== -1)
+    assert.ok(code.indexOf("Bar.displayName = 'Bar'") === -1)
+    assert.ok(code.indexOf("Baz.displayName = 'Baz'") === -1)
+    assert.ok(code.indexOf("Qux.displayName = 'Qux'") === -1)
+
+    src = `
+      import { forwardRef } from 'react'
+      ${components}
+    `
+    code = await modify(src)
+    assert.ok(code.indexOf("Foo.displayName = 'Foo'") === -1)
+    assert.ok(code.indexOf("Bar.displayName = 'Bar'") !== -1)
+    assert.ok(code.indexOf("Baz.displayName = 'Baz'") === -1)
+    assert.ok(code.indexOf("Qux.displayName = 'Qux'") === -1)
+
+    src = `
+      import React from 'react'
+      ${components}
+    `
+    code = await modify(src)
+    assert.ok(code.indexOf("Foo.displayName = 'Foo'") === -1)
+    assert.ok(code.indexOf("Bar.displayName = 'Bar'") === -1)
+    assert.ok(code.indexOf("Baz.displayName = 'Baz'") !== -1)
+    assert.ok(code.indexOf("Qux.displayName = 'Qux'") !== -1)
   })
 
   it('has option to add displayName for wrapped forwardRef', async () => {
@@ -175,16 +205,135 @@ describe('@knighted/displayName', () => {
     assert.ok(code.indexOf("WrappedForwardRef.displayName = 'WrappedForwardRef'") === -1)
   })
 
-  it.skip('works with params shadowing', async t => {
-    // @TODO collect coverage for params scopes
-    const read = resolve(import.meta.dirname, './fixtures/params.tsx')
-    const write = resolve(import.meta.dirname, './fixtures/params-modified.tsx')
-    const code = await modifyFile(read)
+  it('works with aliased React/memo/forwardRef', async () => {
+    let src = `
+      import { memo as me, forwardRef as fr } from 'react'
 
-    t.after(async () => {
-      await rm(write, { force: true })
-    })
+      const Foo = me(() => {
+        return <div>foo</div>
+      })
+      const Bar = fr(() => {
+        return <span>bar</span>
+      })
+      const Baz = memo(() => {
+        return <p>baz</p>
+      })
+    `
+    let code = await modify(src)
 
-    await writeFile(write, code)
+    assert.ok(code.indexOf("Foo.displayName = 'Foo'") !== -1)
+    assert.ok(code.indexOf("Bar.displayName = 'Bar'") !== -1)
+    assert.ok(code.indexOf("Baz.displayName = 'Baz'") === -1)
+
+    src = `
+      import ReactAlias from 'react'
+
+      const Foo = ReactAlias.memo(() => {
+        return <div>foo</div>
+      })
+      const Bar = ReactAlias.forwardRef(() => {
+        return <span>bar</span>
+      })
+      const Baz = React.memo(() => {
+        return <p>baz</p>
+      })
+    `
+    code = await modify(src)
+    assert.ok(code.indexOf("Foo.displayName = 'Foo'") !== -1)
+    assert.ok(code.indexOf("Bar.displayName = 'Bar'") !== -1)
+    assert.ok(code.indexOf("Baz.displayName = 'Baz'") === -1)
+
+    src = `
+      import ReactAlias, { memo as me, forwardRef as fr } from 'react'
+
+      const Foo = ReactAlias.me(() => {
+        return <div>foo</div>
+      })
+      const Bar = ReactAlias.fr(() => {
+        return <span>bar</span>
+      })
+      const Baz = ReactAlias.memo(() => {
+        return <p>baz</p>
+      })
+      const Qux = ReactAlias.forwardRef(() => {
+        return <p>qux</p>
+      })
+      const Qux2 = me(() => {
+        return <p>qux2</p>
+      })
+      const Qux3 = fr(() => {
+        return <p>qux3</p>
+      })
+    `
+    code = await modify(src)
+    assert.ok(code.indexOf("Foo.displayName = 'Foo'") === -1)
+    assert.ok(code.indexOf("Bar.displayName = 'Bar'") === -1)
+    assert.ok(code.indexOf("Baz.displayName = 'Baz'") !== -1)
+    assert.ok(code.indexOf("Qux.displayName = 'Qux'") !== -1)
+    assert.ok(code.indexOf("Qux2.displayName = 'Qux2'") !== -1)
+    assert.ok(code.indexOf("Qux3.displayName = 'Qux3'") !== -1)
+  })
+
+  it('works with params shadowing', async () => {
+    const src = `
+      import { memo, forwardRef, type ReactNode } from 'react'
+
+      function wrapper(cb) {
+        return cb()
+      }
+
+      function ShadowedMemoParam(memo, forwardRef = memo) {
+        const Foo = memo(() => {
+          return <div>foo</div>
+        })
+      }
+
+      function shadowedForwardRefParam(forwardRef = wrapper) {
+        const Bar = forwardRef((props, ref) => {
+          return <div>foo</div>
+        })
+      }
+      
+      function shadowedMemoRestParam(...rest) {
+        const memo = rest[0]
+        const Baz = memo(() => {
+          return <div>foo</div>
+        })
+      }
+
+      function shadowingFuncs() {
+        function memo(cb) {
+          return cb()
+        }
+        const Qux = memo(() => {
+          return <div>foo</div>
+        })
+        const Expr = function forwardRef(cb) {
+          const Quxx = forwardRef(() => {
+            return <div>foo</div>
+          })
+          return cb(Quxx)
+        }
+      }
+      
+      function shadowTSParamProperty(public memo: () => ReactNode) {
+        const Quxxx = memo(() => {
+          return <div>foo</div>
+        })
+      }
+      
+      const Memo = memo(() => {
+        return <div>foo</div>
+      })
+    `
+    const code = await modify(src)
+
+    assert.ok(code.indexOf("Foo.displayName = 'Foo'") === -1)
+    assert.ok(code.indexOf("Bar.displayName = 'Bar'") === -1)
+    assert.ok(code.indexOf("Baz.displayName = 'Baz'") === -1)
+    assert.ok(code.indexOf("Qux.displayName = 'Qux'") === -1)
+    assert.ok(code.indexOf("Quxx.displayName = 'Quxx'") === -1)
+    assert.ok(code.indexOf("Quxxx.displayName = 'Quxxx'") === -1)
+    assert.ok(code.indexOf("Memo.displayName = 'Memo'") !== -1)
   })
 })

test/displayName.ts

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import { forwardRef } from 'react'
 
 const List = forwardRef<HTMLUListElement, object>((props, ref) => {
   const items = ['a', 'b', 'c']