fix: prevent mapped lists from creating displayName. (#6)

Author: knightedcodemonkey

eslint.config.js

@@ -25,6 +25,7 @@ export default tseslint.config(
     files: ['test/fixtures/**/*.tsx'],
     rules: {
       '@typescript-eslint/no-unused-vars': 'off',
+      'n/no-missing-import': 'off',
     },
   },
   {

package-lock.json

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

package.json

@@ -2,7 +2,13 @@ import { readFile } from 'node:fs/promises'
 
 import MagicString from 'magic-string'
 import { asyncAncestorWalk, ancestorWalk, walk } from '@knighted/walk'
-import { parseSync, type Node, type FunctionBody, type Expression } from 'oxc-parser'
+import {
+  parseSync,
+  type Node,
+  type FunctionBody,
+  type Expression,
+  type VariableDeclarator,
+} from 'oxc-parser'
 
 type Options = {
   requirePascal?: boolean
@@ -55,6 +61,30 @@ const hasJsx = async (body: FunctionBody | Expression) => {
 
   return found
 }
+/**
+ * Useful for preventing mapped JSX lists inside functions from creating
+ * a displayName when inside a named function.
+ *
+ * A simpler fix would be to add the found named function to `foundDisplayNames`
+ * but that would prevent reusing a displayName for named functions
+ * (which seems like a bad practice overall).
+ */
+const createsNamedReactFunction = (declarator: VariableDeclarator) => {
+  if (declarator.init) {
+    if (declarator.init.type === 'FunctionExpression' && declarator.init.id) {
+      return true
+    }
+
+    if (
+      declarator.init.type === 'CallExpression' &&
+      declarator.init.arguments.some(arg => arg.type === 'FunctionExpression' && arg.id)
+    ) {
+      return true
+    }
+  }
+
+  return false
+}
 const defaultOptions = {
   requirePascal: true,
   insertSemicolon: true,
@@ -75,8 +105,9 @@ const modify = async (source: string, options: Options = defaultOptions) => {
         case 'ArrowFunctionExpression':
           {
             const { body, id } = node
+            const isReact = !!body && (await hasJsx(body))
 
-            if (!id && body && (await hasJsx(body))) {
+            if (!id && isReact) {
               /**
                * If the function expression is not named,
                * use the varible name to set the displayName.
@@ -91,7 +122,8 @@ const modify = async (source: string, options: Options = defaultOptions) => {
                 if (
                   declarator.type === 'VariableDeclarator' &&
                   declarator.id.type === 'Identifier' &&
-                  !foundDisplayNames.includes(declarator.id.name)
+                  !foundDisplayNames.includes(declarator.id.name) &&
+                  !createsNamedReactFunction(declarator)
                 ) {
                   const { name } = declarator.id
                   const declaration = ancestors[declaratorIndex - 1]

src/displayName.ts

@@ -425,4 +425,12 @@ describe('@knighted/displayName', () => {
       `.replace(/\s/g, ''),
     )
   })
+
+  it('works with retyped memo, generics and named function expressions', async () => {
+    const file = resolve(import.meta.dirname, './fixtures/typed.tsx')
+    const code = await modifyFile(file)
+
+    assert.ok(code.indexOf("Items.displayName = 'Items'") === -1)
+    assert.ok(code.indexOf('displayName') === -1)
+  })
 })

test/displayName.ts

@@ -0,0 +1,121 @@
+import type { ReactNode } from 'react'
+import React, { useRef, useLayoutEffect, useState } from 'react'
+import { typedMemo } from './fake.js'
+import { useMultiComboBoxContext } from './fake'
+import { List, Item } from './fake.js'
+
+type ItemsProps<T> = {
+  children?: (props: { item: T; index: number; isSelected: boolean }) => ReactNode
+}
+
+const Other = function Other(props) {
+  return (
+    <ul>
+      {props.items.map(item => {
+        ;<li>{item}</li>
+      })}
+    </ul>
+  )
+}
+const Items = typedMemo(function Items<T>({ children }: ItemsProps<T>) {
+  const {
+    getMenuProps,
+    getItemProps,
+    filteredItems,
+    customItemsList,
+    selectedItems,
+    itemToString,
+    setItemsList,
+    loadItems,
+    inputValue,
+    isOpen,
+  } = useMultiComboBoxContext<T>()
+  const customLength = customItemsList.length
+  const ref = useRef<HTMLUListElement>(null)
+  const [hasMore, setHasMore] = useState(true)
+
+  useLayoutEffect(() => {
+    if (ref.current && isOpen && loadItems) {
+      const root = ref.current
+      const target = root.querySelector(':last-child')
+      const rootMargin = target ? `${target.clientHeight}px 0px 0px 0px` : '0px'
+      const observer = new IntersectionObserver(
+        async entries => {
+          for (const entry of entries) {
+            if (entry.isIntersecting && hasMore) {
+              const { items, hasMore } = await loadItems(inputValue)
+
+              setHasMore(hasMore)
+              setItemsList(prevItems => Array.from(new Set([...prevItems, ...items])))
+            }
+          }
+        },
+        {
+          root,
+          rootMargin,
+          threshold: 0,
+        },
+      )
+
+      if (target) {
+        observer.observe(target)
+      }
+
+      return () => {
+        observer.disconnect()
+      }
+    }
+  }, [
+    ref,
+    isOpen,
+    // Create a new observer after filtering items
+    inputValue,
+    filteredItems,
+    hasMore,
+    setItemsList,
+    loadItems,
+  ])
+
+  return (
+    <List {...getMenuProps({ ref })}>
+      {isOpen &&
+        customItemsList.map((item, index) => (
+          <Item
+            isLastCustom={index === customItemsList.length - 1}
+            isSelected={selectedItems.some(
+              selectedItem => itemToString(selectedItem) === item,
+            )}
+            key={`${item}-${index}`}
+            {...getItemProps({
+              item,
+              index,
+            })}
+          >
+            {itemToString(item)}
+          </Item>
+        ))}
+      {isOpen &&
+        filteredItems.map((item, index) => {
+          const isSelected = selectedItems.some(
+            selectedItem => itemToString(selectedItem) === itemToString(item),
+          )
+
+          return (
+            <Item
+              isSelected={isSelected}
+              key={`${itemToString(item)}-${index}`}
+              {...getItemProps({
+                item,
+                index: customLength + index,
+              })}
+            >
+              {children ? children({ item, index, isSelected }) : itemToString(item)}
+            </Item>
+          )
+        })}
+    </List>
+  )
+})
+
+export type { ItemsProps }
+export { Items, Other }