fix(ssr): handle nameless descture in function args (#6489)

vitejs · Jan 13, 2022 · debc08d · debc08d
1 parent 1c1f82f
commit debc08d
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 28 deletions.
diff --git a/packages/vite/src/node/ssr/__tests__/ssrTransform.spec.ts b/packages/vite/src/node/ssr/__tests__/ssrTransform.spec.ts
@@ -1,3 +1,4 @@
+import { transformWithEsbuild } from '../../plugins/esbuild'
 import { traverseHtml } from '../../plugins/html'
 import { ssrTransform } from '../ssrTransform'
 
@@ -590,3 +591,31 @@ bbb()
     "
   `)
 })
+
+test('jsx', async () => {
+  const code = `
+  import React from 'react'
+  import { Foo, Slot } from 'foo'
+  
+  function Bar({ Slot = <Foo /> }) {
+    return (
+      <>
+        <Slot />
+      </>
+    )
+  }
+  `
+  const id = '/foo.jsx'
+  const result = await transformWithEsbuild(code, id)
+  expect((await ssrTransform(result.code, null, '/foo.jsx')).code)
+    .toMatchInlineSnapshot(`
+    "const __vite_ssr_import_0__ = await __vite_ssr_import__(\\"react\\");
+
+    const __vite_ssr_import_1__ = await __vite_ssr_import__(\\"foo\\");
+
+    function Bar({ Slot: Slot2 = /* @__PURE__ */ __vite_ssr_import_0__.default.createElement(__vite_ssr_import_1__.Foo, null) }) {
+      return /* @__PURE__ */ __vite_ssr_import_0__.default.createElement(__vite_ssr_import_0__.default.Fragment, null, /* @__PURE__ */ __vite_ssr_import_0__.default.createElement(Slot2, null));
+    }
+    "
+  `)
+})
diff --git a/packages/vite/src/node/ssr/ssrTransform.ts b/packages/vite/src/node/ssr/ssrTransform.ts
@@ -284,6 +284,31 @@ function walk(
   function isInScope(name: string, parents: Node[]) {
     return parents.some((node) => node && scopeMap.get(node)?.has(name))
   }
+  function handlePattern(p: Pattern, parentFunction: FunctionNode) {
+    if (p.type === 'Identifier') {
+      setScope(parentFunction, p.name)
+    } else if (p.type === 'RestElement') {
+      handlePattern(p.argument, parentFunction)
+    } else if (p.type === 'ObjectPattern') {
+      p.properties.forEach((property) => {
+        if (property.type === 'RestElement') {
+          setScope(parentFunction, (property.argument as Identifier).name)
+        } else {
+          handlePattern(property.value, parentFunction)
+        }
+      })
+    } else if (p.type === 'ArrayPattern') {
+      p.elements.forEach((element) => {
+        if (element) {
+          handlePattern(element, parentFunction)
+        }
+      })
+    } else if (p.type === 'AssignmentPattern') {
+      handlePattern(p.left, parentFunction)
+    } else {
+      setScope(parentFunction, (p as any).name)
+    }
+  }
 
   ;(eswalk as any)(root, {
     enter(node: Node, parent: Node | null) {
@@ -318,8 +343,12 @@ function walk(
         }
         // walk function expressions and add its arguments to known identifiers
         // so that we don't prefix them
-        node.params.forEach((p) =>
-          (eswalk as any)(p.type === 'AssignmentPattern' ? p.left : p, {
+        node.params.forEach((p) => {
+          if (p.type === 'ObjectPattern' || p.type === 'ArrayPattern') {
+            handlePattern(p, node)
+            return
+          }
+          ;(eswalk as any)(p.type === 'AssignmentPattern' ? p.left : p, {
             enter(child: Node, parent: Node) {
               if (child.type !== 'Identifier') return
               // do not record as scope variable if is a destructuring keyword
@@ -338,38 +367,14 @@ function walk(
               setScope(node, child.name)
             }
           })
-        )
+        })
       } else if (node.type === 'Property' && parent!.type === 'ObjectPattern') {
         // mark property in destructuring pattern
         ;(node as any).inPattern = true
       } else if (node.type === 'VariableDeclarator') {
         const parentFunction = findParentFunction(parentStack)
         if (parentFunction) {
-          const handlePattern = (p: Pattern) => {
-            if (p.type === 'Identifier') {
-              setScope(parentFunction, p.name)
-            } else if (p.type === 'RestElement') {
-              handlePattern(p.argument)
-            } else if (p.type === 'ObjectPattern') {
-              p.properties.forEach((property) => {
-                if (property.type === 'RestElement') {
-                  setScope(
-                    parentFunction,
-                    (property.argument as Identifier).name
-                  )
-                } else handlePattern(property.value)
-              })
-            } else if (p.type === 'ArrayPattern') {
-              p.elements.forEach((element) => {
-                if (element) handlePattern(element)
-              })
-            } else if (p.type === 'AssignmentPattern') {
-              handlePattern(p.left)
-            } else {
-              setScope(parentFunction, (p as any).name)
-            }
-          }
-          handlePattern(node.id)
+          handlePattern(node.id, parentFunction)
         }
       }
     },