fix: zachw/cfr-default-exports

Author: ZachJW34

packages/data-context/package.json

@@ -22,6 +22,7 @@
     "@urql/core": "2.4.4",
     "@urql/exchange-execute": "1.1.0",
     "@urql/exchange-graphcache": "4.3.6",
+    "ast-types": "^0.14.2",
     "chokidar": "3.5.1",
     "common-path-prefix": "3.0.0",
     "cross-fetch": "^3.1.4",

packages/data-context/src/actions/CodegenActions.ts

@@ -7,9 +7,12 @@ import templates from '../codegen/templates'
 import type { CodeGenType } from '../gen/graphcache-config.gen'
 import { WizardFrontendFramework, WIZARD_FRAMEWORKS } from '@packages/scaffold-config'
 import { parse as parseReactComponent, resolver as reactDocgenResolvers } from 'react-docgen'
+import { visit } from 'ast-types'
 
 interface ReactComponentDescriptor {
   displayName: string
+  exportName: string
+  isDefault: boolean
 }
 
 export class CodegenActions {
@@ -19,12 +22,20 @@ export class CodegenActions {
     try {
       const src = await this.ctx.fs.readFile(filePath, 'utf8')
 
-      const result = parseReactComponent(src, reactDocgenResolvers.findAllExportedComponentDefinitions)
+      const linker: Linker = {}
+      let result = parseReactComponent(src, findAllWithLink(linker))
+
       // types appear to be incorrect in [email protected]
       // TODO: update when 6.0.0 stable is out for fixed types.
       const defs = (Array.isArray(result) ? result : [result]) as ReactComponentDescriptor[]
 
-      return defs
+      const mappedDefs = defs.map((meta) => {
+        const displayName = meta.displayName || ''
+
+        return { ...meta, displayName, ...linker[displayName] }
+      })
+
+      return mappedDefs
     } catch (err) {
       this.ctx.debug(err)
 
@@ -139,3 +150,70 @@ export class CodegenActions {
     return WIZARD_FRAMEWORKS.find((framework) => framework.configFramework === config?.component?.devServer.framework)
   }
 }
+
+type Linker = Record<string, { exportName: string, isDefault: boolean }>
+function findAllWithLink (linker: Linker) {
+  return (ast: any, parser: any, importer: any) => {
+    visit(ast, {
+      // export const Foo, export { Foo, Bar }, export function FooBar () { ... }
+      visitExportNamedDeclaration: (path) => {
+        const declaration = path.node.declaration as any
+
+        if (declaration) { // export const Foo
+          if (declaration.id) {
+            linker[declaration.id.name] = { exportName: declaration.id.name, isDefault: false }
+          } else { // export const Foo, Bar
+            (path.node.declaration as any).declarations.forEach((node: any) => {
+              const id = node.name ?? node.id?.name
+
+              if (id) {
+                linker[id] = { exportName: id, isDefault: false }
+              }
+            })
+          }
+        } else { // export { Foo, Bar }
+          path.node.specifiers?.forEach((node) => {
+            if (!node.local?.name) {
+              return
+            }
+
+            if (node.exported?.name === 'default') { // export { Foo as default }
+              linker[node.local.name] = {
+                exportName: node.local.name,
+                isDefault: true,
+              }
+            } else {
+              linker[node.local.name] = {
+                exportName: node.exported.name,
+                isDefault: false,
+              }
+            }
+          })
+        }
+
+        return false
+      },
+      // export default Foo
+      visitExportDefaultDeclaration: (path) => {
+        const declaration: any = path.node.declaration
+        const id: string = declaration.name || declaration.id?.name
+
+        if (id) { // export default Foo
+          linker[id] = {
+            exportName: id,
+            isDefault: true,
+          }
+        } else { // export default () => {}
+          linker[''] = {
+            exportName: 'Component',
+            isDefault: true,
+          }
+        }
+
+        return false
+      },
+    })
+
+    return reactDocgenResolvers.findAllExportedComponentDefinitions(ast, parser, importer)
+  }
+}

packages/data-context/test/unit/actions/CodegenActions.spec.ts

@@ -24,59 +24,98 @@ describe('CodegenActions', () => {
       const reactComponents = await actions.getReactComponentsFromFile(`${absolutePathPrefix}/counter-class.jsx`)
 
       expect(reactComponents).to.have.length(1)
-      expect(reactComponents[0].displayName).to.equal('Counter')
+      expect(reactComponents[0].exportName).to.equal('Counter')
+      expect(reactComponents[0].isDefault).to.equal(false)
     })
 
     it('returns React components from file with functional component', async () => {
       const reactComponents = await actions.getReactComponentsFromFile(`${absolutePathPrefix}/counter-functional.jsx`)
 
       expect(reactComponents).to.have.length(1)
-      expect(reactComponents[0].displayName).to.equal('Counter')
+      expect(reactComponents[0].exportName).to.equal('Counter')
+      expect(reactComponents[0].isDefault).to.equal(false)
     })
 
     it('returns only exported React components from file with functional components', async () => {
       const reactComponents = await actions.getReactComponentsFromFile(`${absolutePathPrefix}/counter-multiple-components.jsx`)
 
       expect(reactComponents).to.have.length(2)
-      expect(reactComponents[0].displayName).to.equal('CounterContainer')
-      expect(reactComponents[1].displayName).to.equal('CounterView')
-    })
-
-    it('returns both named and default exports', async () => {
-      const reactComponents = await actions.getReactComponentsFromFile(`${absolutePathPrefix}/counter-mixed-multiple-components.tsx`)
+      expect(reactComponents[0].exportName).to.equal('CounterContainer')
+      expect(reactComponents[0].isDefault).to.equal(false)
 
-      expect(reactComponents).to.have.length(2)
-      expect(reactComponents[0].displayName).to.equal('CounterContainer')
-      expect(reactComponents[1].displayName).to.equal('CounterView')
+      expect(reactComponents[1].exportName).to.equal('CounterView')
+      expect(reactComponents[1].isDefault).to.equal(false)
     })
 
     it('returns React components from a tsx file', async () => {
       const reactComponents = await actions.getReactComponentsFromFile(`${absolutePathPrefix}/counter.tsx`)
 
       expect(reactComponents).to.have.length(1)
-      expect(reactComponents[0].displayName).to.equal('Counter')
+      expect(reactComponents[0].exportName).to.equal('Counter')
+      expect(reactComponents[0].isDefault).to.equal(false)
     })
 
     it('returns React components that are exported by default', async () => {
-      const reactComponents = await actions.getReactComponentsFromFile(`${absolutePathPrefix}/counter-default.tsx`)
+      let reactComponents = await actions.getReactComponentsFromFile(`${absolutePathPrefix}/counter-default.tsx`)
+
+      expect(reactComponents).to.have.length(1)
+      expect(reactComponents[0].exportName).to.equal('CounterDefault')
+      expect(reactComponents[0].isDefault).to.equal(true)
 
+      reactComponents = await actions.getReactComponentsFromFile(`${absolutePathPrefix}/default-anonymous.jsx`)
       expect(reactComponents).to.have.length(1)
-      expect(reactComponents[0].displayName).to.equal('CounterDefault')
+      expect(reactComponents[0].exportName).to.equal('Component')
+      expect(reactComponents[0].isDefault).to.equal(true)
+
+      reactComponents = await actions.getReactComponentsFromFile(`${absolutePathPrefix}/default-function.jsx`)
+      expect(reactComponents).to.have.length(1)
+      expect(reactComponents[0].exportName).to.equal('HelloWorld')
+      expect(reactComponents[0].isDefault).to.equal(true)
+
+      reactComponents = await actions.getReactComponentsFromFile(`${absolutePathPrefix}/default-class.jsx`)
+      expect(reactComponents).to.have.length(1)
+      expect(reactComponents[0].exportName).to.equal('HelloWorld')
+      expect(reactComponents[0].isDefault).to.equal(true)
+
+      reactComponents = await actions.getReactComponentsFromFile(`${absolutePathPrefix}/default-specifier.jsx`)
+      expect(reactComponents).to.have.length(1)
+      expect(reactComponents[0].exportName).to.equal('HelloWorld')
+      expect(reactComponents[0].isDefault).to.equal(true)
     })
 
     it('returns React components defined with arrow functions', async () => {
       const reactComponents = await actions.getReactComponentsFromFile(`${absolutePathPrefix}/counter-arrow-function.jsx`)
 
       expect(reactComponents).to.have.length(1)
-      expect(reactComponents[0].displayName).to.equal('Counter')
+      expect(reactComponents[0].exportName).to.equal('Counter')
+      expect(reactComponents[0].isDefault).to.equal(false)
     })
 
     it('returns React components from a file with multiple separate export statements', async () => {
       const reactComponents = await actions.getReactComponentsFromFile(`${absolutePathPrefix}/counter-separate-exports.jsx`)
 
       expect(reactComponents).to.have.length(2)
-      expect(reactComponents[0].displayName).to.equal('CounterView')
-      expect(reactComponents[1].displayName).to.equal('CounterContainer')
+      expect(reactComponents[0].exportName).to.equal('CounterView')
+      expect(reactComponents[0].isDefault).to.equal(false)
+      expect(reactComponents[1].exportName).to.equal('CounterContainer')
+      expect(reactComponents[1].isDefault).to.equal(true)
+    })
+
+    it('returns React components that are exported and aliased', async () => {
+      const reactComponents = await actions.getReactComponentsFromFile(`${absolutePathPrefix}/export-alias.jsx`)
+
+      expect(reactComponents).to.have.length(1)
+      expect(reactComponents[0].exportName).to.equal('HelloWorld')
+      expect(reactComponents[0].isDefault).to.equal(false)
+    })
+
+    // TODO: "react-docgen" will resolve HOCs but our export detection does not. Can fall back to displayName here
+    it.skip('handles higher-order-components', async () => {
+      const reactComponents = await actions.getReactComponentsFromFile(`${absolutePathPrefix}/counter-hoc.jsx`)
+
+      expect(reactComponents).to.have.length(1)
+      expect(reactComponents[0].exportName).to.equal('Counter')
+      expect(reactComponents[0].isDefault).to.equal(true)
     })
 
     it('does not throw while parsing empty file', async () => {

packages/data-context/test/unit/actions/project/counter-hoc.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+function Counter () {
+  const [count, setCount] = React.useState(0)
+
+  return <p onClick={() => setCount(count + 1)}>count: {count}</p>
+}
+
+const connect = (component) => component
+
+export default connect(Counter)

packages/data-context/test/unit/actions/project/default-anonymous.jsx

@@ -0,0 +1 @@
+export default () => <div>Hello World</div>

packages/data-context/test/unit/actions/project/default-class.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default class HelloWorld extends React.Component {
+  render () {
+    return <div>HelloWorld</div>
+  }
+}

packages/data-context/test/unit/actions/project/default-function.jsx

@@ -0,0 +1,3 @@
+export default function HelloWorld () {
+  return <div>Hello World</div>
+}

packages/data-context/test/unit/actions/project/default-specifier.jsx

@@ -0,0 +1,3 @@
+const HelloWorld = () => <div>Hello World</div>
+
+export { HelloWorld as default }

packages/data-context/test/unit/actions/project/export-alias.jsx

@@ -0,0 +1,3 @@
+const hw = () => <div>HelloWorld</div>
+
+export { hw as HelloWorld }