fix(ssr): nested destucture (vitejs#6249)

poyoho · Dec 23, 2021 · 485e298 · 485e298
1 parent a96bdd9
commit 485e298
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 20 deletions.
diff --git a/packages/vite/src/node/ssr/__tests__/ssrTransform.spec.ts b/packages/vite/src/node/ssr/__tests__/ssrTransform.spec.ts
@@ -433,3 +433,68 @@ const a = () => {
     "
   `)
 })
+
+test('nested object destructure alias', async () => {
+  expect(
+    (
+      await ssrTransform(
+        `
+import { remove, add, get, set, rest, objRest } from 'vue'
+
+function a() {
+  const {
+    o: { remove },
+    a: { b: { c: [ add ] }},
+    d: [{ get }, set, ...rest],
+    ...objRest
+  } = foo
+
+  remove()
+  add()
+  get()
+  set()
+  rest()
+  objRest()
+}
+
+remove()
+add()
+get()
+set()
+rest()
+objRest()
+`,
+        null,
+        null
+      )
+    ).code
+  ).toMatchInlineSnapshot(`
+    "
+    const __vite_ssr_import_0__ = await __vite_ssr_import__(\\"vue\\");
+
+
+    function a() {
+      const {
+        o: { remove },
+        a: { b: { c: [ add ] }},
+        d: [{ get }, set, ...rest],
+        ...objRest
+      } = foo
+
+      remove()
+      add()
+      get()
+      set()
+      rest()
+      objRest()
+    }
+
+    __vite_ssr_import_0__.remove()
+    __vite_ssr_import_0__.add()
+    __vite_ssr_import_0__.get()
+    __vite_ssr_import_0__.set()
+    __vite_ssr_import_0__.rest()
+    __vite_ssr_import_0__.objRest()
+    "
+  `)
+})
diff --git a/packages/vite/src/node/ssr/ssrTransform.ts b/packages/vite/src/node/ssr/ssrTransform.ts
@@ -6,7 +6,8 @@ import type {
   Identifier,
   Node as _Node,
   Property,
-  Function as FunctionNode
+  Function as FunctionNode,
+  Pattern
 } from 'estree'
 import { extract_names as extractNames } from 'periscopic'
 import { walk as eswalk } from 'estree-walker'
@@ -339,26 +340,31 @@ function walk(
       } else if (node.type === 'VariableDeclarator') {
         const parentFunction = findParentFunction(parentStack)
         if (parentFunction) {
-          if (node.id.type === 'ObjectPattern') {
-            node.id.properties.forEach((property) => {
-              if (property.type === 'RestElement') {
-                setScope(parentFunction, (property.argument as Identifier).name)
-              } else if (property.value.type === 'AssignmentPattern') {
-                setScope(
-                  parentFunction,
-                  (property.value.left as Identifier).name
-                )
-              } else {
-                setScope(parentFunction, (property.value as Identifier).name)
-              }
-            })
-          } else if (node.id.type === 'ArrayPattern') {
-            node.id.elements.filter(Boolean).forEach((element) => {
-              setScope(parentFunction, (element as Identifier).name)
-            })
-          } else {
-            setScope(parentFunction, (node.id as Identifier).name)
+          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)
         }
       }
     },