fix: modifyNestedForwardRef option. (#10)

Author: knightedcodemonkey

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@knighted/display-name",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.3",
   "description": "Codemod to add a React displayName to function components.",
   "type": "module",
   "exports": {

package.json

@@ -57,7 +57,7 @@ const collectDisplayNames = async (node: Node, code: MagicString) => {
 
   return foundDisplayNames
 }
-const collectReactPragmas = async (node: Node) => {
+const detectReactPragmas = async (node: Node) => {
   let isReact = false
   let isReactMemo = false
   let isReactForwardRef = false
@@ -136,11 +136,6 @@ const isForwardRef = (node: CallExpression, scopes: Scope[]) => {
     isReactMember('forwardRef', node, scopes)
   )
 }
-const hasNestedForwardRef = (node: CallExpression, scopes: Scope[]) => {
-  const arg = node.arguments[0]
-
-  return arg.type === 'CallExpression' && isForwardRef(arg, scopes)
-}
 const isMemoWrapped = (parent: Node, scopes: Scope[]) => {
   return parent.type === 'CallExpression' && isMemo(parent, scopes)
 }
@@ -164,7 +159,7 @@ 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 collectReactPragmas(
+  const { isReact, isReactMemo, isReactForwardRef } = await detectReactPragmas(
     ast.program,
   )
 
@@ -175,7 +170,11 @@ const modify = async (source: string, options: Options = defaultOptions) => {
       ...defaultOptions,
       ...options,
     }
-    const addDisplayName = (ancestors: Node[], call: CallExpression) => {
+    const addDisplayName = (
+      ancestors: Node[],
+      call: CallExpression,
+      memoWrapped = false,
+    ) => {
       const declaratorIndex = ancestors.findLastIndex(
         ancestor => ancestor.type === 'VariableDeclarator',
       )
@@ -205,8 +204,11 @@ const modify = async (source: string, options: Options = defaultOptions) => {
             }
           }
 
-          // Pragma directly assigned to a variable
-          if (declarator.init === call && !foundDisplayNames.includes(name)) {
+          // Pragma directly assigned to a variable or forwardRef wrapped with memo
+          if (
+            (declarator.init === call || memoWrapped) &&
+            !foundDisplayNames.includes(name)
+          ) {
             append(name)
           }
 
@@ -320,19 +322,15 @@ const modify = async (source: string, options: Options = defaultOptions) => {
           !node.arguments[0].id
         ) {
           if (isMemo(node, scopes)) {
-            const nestedForwardRef = hasNestedForwardRef(node, scopes)
-
-            if (!nestedForwardRef || (nestedForwardRef && opts.modifyNestedForwardRef)) {
-              addDisplayName(ancestors, node)
-            }
+            addDisplayName(ancestors, node)
           }
 
           if (isForwardRef(node, scopes)) {
             const parent = ancestors[ancestors.length - 2]
             const memoWrapped = isMemoWrapped(parent, scopes)
 
             if (!memoWrapped || (memoWrapped && opts.modifyNestedForwardRef)) {
-              addDisplayName(ancestors, node)
+              addDisplayName(ancestors, node, memoWrapped)
             }
           }
         }

src/displayName.ts

@@ -4,7 +4,7 @@ import { resolve } from 'node:path'
 import { rm, writeFile } from 'node:fs/promises'
 import { spawnSync } from 'node:child_process'
 
-import { modifyFile } from '../src/displayName.js'
+import { modify, modifyFile } from '../src/displayName.js'
 
 describe('@knighted/displayName', () => {
   it('transforms files', async t => {
@@ -22,6 +22,27 @@ describe('@knighted/displayName', () => {
     assert.ok(code.indexOf("Foo.displayName = 'Foo'") === -1)
     assert.ok(code.indexOf("NamedFuncExpr.displayName = 'NamedFuncExpr'") === -1)
 
+    // Ignored forwardRef wrapped in memo
+    assert.ok(
+      code.indexOf("MemoWrappedForward.displayName = 'MemoWrappedForward'") === -1,
+    )
+
+    // Ignores shadowed React/memo/forwardRef
+    assert.ok(code.indexOf("ShadowedMemo.displayName = 'ShadowedMemo'") === -1)
+    assert.ok(code.indexOf("ShadowedReactMemo.displayName = 'ShadowedReactMemo'") === -1)
+    assert.ok(
+      code.indexOf("ShadowedReactForward.displayName = 'ShadowedReactForward'") === -1,
+    )
+    assert.ok(code.indexOf("ShadowedForward.displayName = 'ShadowedForward'") === -1)
+
+    // Adds displayName to memo/forwardRef
+    assert.ok(code.indexOf("Memo.displayName = 'Memo'") !== -1)
+    assert.ok(code.indexOf("ForwardRef.displayName = 'ForwardRef'") !== -1)
+
+    // Adds displayName to React.memo/React.forwardRef
+    assert.ok(code.indexOf("ReactMemo.displayName = 'ReactMemo'") !== -1)
+    assert.ok(code.indexOf("ReactForwardRef.displayName = 'ReactForwardRef'") !== -1)
+
     // Correctly identifies namespaced displayNames already present
     assert.equal(
       [
@@ -31,6 +52,7 @@ describe('@knighted/displayName', () => {
       ].length,
       1,
     )
+
     const { status: lint } = spawnSync('eslint', [write], { stdio: 'inherit' })
     assert.equal(lint, 0)
     const { status: types } = spawnSync(
@@ -85,6 +107,74 @@ describe('@knighted/displayName', () => {
     assert.equal(types, 0)
   })
 
+  it('requires memo, forwardRef or React.memo/React.forwardRef to be in scope', async () => {
+    const components = `
+      const Foo = memo(() => {
+        return <div>foo</div>
+      })
+      const Bar = forwardRef(() => {
+        return <span>bar</span>
+      })
+      const Baz = React.memo(() => {
+        return <p>baz</p>
+      })
+      const Qux = React.forwardRef(() => {
+        return <p>qux</p>
+      })
+    `
+    let code = await modify(components)
+
+    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)
+
+    let src = `
+      import React, { memo, 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)
+
+    // It ignores shadowed React/memo/forwardRef
+    src = `
+      import React, { memo, forwardRef } from 'react'
+      
+      function Shadow() {
+        const memo = (cb) => cb()
+        const forwardRef = (cb) => cb()
+        const React = { memo, forwardRef }
+
+        ${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 () => {
+    const src = `
+      import { forwardRef, memo } from 'react'
+
+      const WrappedForwardRef = memo(forwardRef(() => {
+        return <div>foo</div>
+      }))
+    `
+    let code = await modify(src, { modifyNestedForwardRef: true })
+
+    assert.ok(code.indexOf("WrappedForwardRef.displayName = 'WrappedForwardRef'") !== -1)
+    code = await modify(src, { modifyNestedForwardRef: false })
+    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')

test/displayName.ts

@@ -12,7 +12,7 @@ const Baz = function (props: object) {
   return <p>baz</p>
 }
 
-const Qux = memo(() => {
+const Memo = memo(() => {
   return (
     <div>
       {'qux'}
@@ -21,13 +21,13 @@ const Qux = memo(() => {
   )
 })
 
-const Quxx = memo(
+const MemoWrappedForward = memo(
   forwardRef<HTMLDivElement, object>((props, ref) => {
     return <div ref={ref}>quxx</div>
   }),
 )
 
-const Ref = forwardRef<HTMLDivElement, object>((props, ref) => {
+const ForwardRef = forwardRef<HTMLDivElement, object>((props, ref) => {
   return <div ref={ref}>ref</div>
 })
 
@@ -103,18 +103,18 @@ const MixedShadowed = function () {
   const { forwardRef } = { forwardRef: () => null } as ForwardRefObject
   const [React] = [{ memo, forwardRef }] as const
 
-  const Comp = memo(() => {
+  const ShadowedMemo = memo(() => {
     return <div>shadowed</div>
   })
   // eslint-disable-next-line react/display-name
-  const ReactMemo = React.memo(() => null)
+  const ShadowedReactMemo = React.memo(() => null)
   // eslint-disable-next-line react/display-name
-  const ReactForward = React.forwardRef((props, ref) => {
+  const ShadowedReactForward = React.forwardRef((props, ref) => {
     return `${props} ${ref}`
   })
-  const OtherComp = forwardRef((props, ref) => `${props} ${ref}`)
+  const ShadowedForward = forwardRef((props, ref) => `${props} ${ref}`)
 
-  return [Comp, ReactMemo, ReactForward, OtherComp]
+  return [ShadowedMemo, ShadowedReactMemo, ShadowedReactForward, ShadowedForward]
 }
 
 const Shadowed = function () {
@@ -138,9 +138,9 @@ export {
   Foo,
   Bar,
   Baz,
-  Qux,
-  Quxx,
-  Ref,
+  Memo,
+  MemoWrappedForward,
+  ForwardRef,
   NestedMemo,
   NestedForwardRef,
   FuncExpr,