From ee78707177afc04b53638c94dad6e8562420af91 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Fri, 3 Sep 2021 23:54:47 +0800
Subject: [PATCH 1/3] feat(sfc): support using extends interface with
 defineProps()

---
 .../__snapshots__/compileScript.spec.ts.snap  | 25 ++++++
 .../__tests__/compileScript.spec.ts           | 22 ++++++
 packages/compiler-sfc/src/compileScript.ts    | 79 +++++++++++++++----
 3 files changed, 109 insertions(+), 17 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 54591d402bd..373b8e1766b 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -924,6 +924,31 @@ export default /*#__PURE__*/_defineComponent({
 
       
       
+return {  }
+}
+
+})"
+`;
+
+exports[`SFC compile <script setup> with TypeScript defineProps w/ interface extends 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+interface Foo { x?: number }
+      interface Bar extends Foo { y?: number }
+      interface Props extends Bar {
+        z: number
+      }
+      
+export default /*#__PURE__*/_defineComponent({
+  props: {
+    x: { type: Number, required: false },
+    y: { type: Number, required: false },
+    z: { type: Number, required: true }
+  },
+  setup(__props: any, { expose }) {
+  expose()
+
+      
+      
 return {  }
 }
 
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index 854357b6397..29e21b4ca8b 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -773,6 +773,28 @@ const emit = defineEmits(['a', 'b'])
       })
     })
 
+    test('defineProps w/ interface extends', () => {
+      const { content, bindings } = compile(`
+      <script setup lang="ts">
+      interface Foo { x?: number }
+      interface Bar extends Foo { y?: number }
+      interface Props extends Bar {
+        z: number
+      }
+      defineProps<Props>()
+      </script>
+      `)
+      assertCode(content)
+      expect(content).toMatch(`x: { type: Number, required: false }`)
+      expect(content).toMatch(`y: { type: Number, required: false }`)
+      expect(content).toMatch(`z: { type: Number, required: true }`)
+      expect(bindings).toStrictEqual({
+        x: BindingTypes.PROPS,
+        y: BindingTypes.PROPS,
+        z: BindingTypes.PROPS
+      })
+    })
+
     test('defineProps w/ exported interface', () => {
       const { content, bindings } = compile(`
       <script setup lang="ts">
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 523efd724d0..b15a08e3c35 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -37,6 +37,7 @@ import {
   CallExpression,
   RestElement,
   TSInterfaceBody,
+  TSTypeElement,
   AwaitExpression,
   Program,
   ObjectMethod
@@ -439,6 +440,53 @@ export function compileScript(
     return true
   }
 
+  function resolveExtendsType(
+    node: Node,
+    qualifier: (node: Node) => boolean,
+    cache: Array<Node> = []
+  ): Array<Node> {
+    if (node.type === 'TSInterfaceDeclaration' && node.extends) {
+      node.extends.forEach(extend => {
+        if (
+          extend.type === 'TSExpressionWithTypeArguments' &&
+          extend.expression.type === 'Identifier'
+        ) {
+          for (const node of scriptSetupAst.body) {
+            const qualified = isQualifiedType(
+              node,
+              qualifier,
+              extend.expression.name
+            )
+            if (qualified) {
+              cache.unshift(qualified)
+              resolveExtendsType(node, qualifier, cache)
+              return cache
+            }
+          }
+        }
+      })
+    }
+    return cache
+  }
+
+  function isQualifiedType(
+    node: Node,
+    qualifier: (node: Node) => boolean,
+    refName: String
+  ): Node | undefined {
+    if (node.type === 'TSInterfaceDeclaration' && node.id.name === refName) {
+      return node.body
+    } else if (
+      node.type === 'TSTypeAliasDeclaration' &&
+      node.id.name === refName &&
+      qualifier(node.typeAnnotation)
+    ) {
+      return node.typeAnnotation
+    } else if (node.type === 'ExportNamedDeclaration' && node.declaration) {
+      return isQualifiedType(node.declaration, qualifier, refName)
+    }
+  }
+
   function resolveQualifiedType(
     node: Node,
     qualifier: (node: Node) => boolean
@@ -451,28 +499,25 @@ export function compileScript(
       node.typeName.type === 'Identifier'
     ) {
       const refName = node.typeName.name
-      const isQualifiedType = (node: Node): Node | undefined => {
-        if (
-          node.type === 'TSInterfaceDeclaration' &&
-          node.id.name === refName
-        ) {
-          return node.body
-        } else if (
-          node.type === 'TSTypeAliasDeclaration' &&
-          node.id.name === refName &&
-          qualifier(node.typeAnnotation)
-        ) {
-          return node.typeAnnotation
-        } else if (node.type === 'ExportNamedDeclaration' && node.declaration) {
-          return isQualifiedType(node.declaration)
-        }
-      }
       const body = scriptAst
         ? [...scriptSetupAst.body, ...scriptAst.body]
         : scriptSetupAst.body
       for (const node of body) {
-        const qualified = isQualifiedType(node)
+        let qualified = isQualifiedType(
+          node,
+          qualifier,
+          refName
+        ) as TSInterfaceBody
         if (qualified) {
+          const extendsTypes = resolveExtendsType(node, qualifier)
+          if (extendsTypes.length) {
+            const bodies: TSTypeElement[] = []
+            extendsTypes.forEach(extend => {
+              bodies.push(...(extend as TSInterfaceBody).body)
+            })
+            bodies.push(...qualified.body)
+            qualified.body = bodies
+          }
           return qualified
         }
       }

From 52a386da41f7eb5de0db341fb60664b26a36a341 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Sat, 4 Sep 2021 11:38:56 +0800
Subject: [PATCH 2/3] chore: improve code

---
 .../__snapshots__/compileScript.spec.ts.snap  | 23 +++++++-------
 .../__tests__/compileScript.spec.ts           |  7 +++--
 packages/compiler-sfc/src/compileScript.ts    | 31 +++++++++++++++----
 3 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 373b8e1766b..009a16a8851 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -911,12 +911,19 @@ return {  }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript defineProps w/ interface 1`] = `
+exports[`SFC compile <script setup> with TypeScript defineProps w/ extends interface 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
-interface Props { x?: number }
+interface Foo { x?: number }
+      interface Bar extends Foo { y?: number }
+      interface Props extends Bar {
+        z: number
+        y: string
+      }
       
 export default /*#__PURE__*/_defineComponent({
   props: {
+    z: { type: Number, required: true },
+    y: { type: String, required: true },
     x: { type: Number, required: false }
   },
   setup(__props: any, { expose }) {
@@ -930,19 +937,13 @@ return {  }
 })"
 `;
 
-exports[`SFC compile <script setup> with TypeScript defineProps w/ interface extends 1`] = `
+exports[`SFC compile <script setup> with TypeScript defineProps w/ interface 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
-interface Foo { x?: number }
-      interface Bar extends Foo { y?: number }
-      interface Props extends Bar {
-        z: number
-      }
+interface Props { x?: number }
       
 export default /*#__PURE__*/_defineComponent({
   props: {
-    x: { type: Number, required: false },
-    y: { type: Number, required: false },
-    z: { type: Number, required: true }
+    x: { type: Number, required: false }
   },
   setup(__props: any, { expose }) {
   expose()
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index 29e21b4ca8b..aeb544e8a29 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -773,21 +773,22 @@ const emit = defineEmits(['a', 'b'])
       })
     })
 
-    test('defineProps w/ interface extends', () => {
+    test('defineProps w/ extends interface', () => {
       const { content, bindings } = compile(`
       <script setup lang="ts">
       interface Foo { x?: number }
       interface Bar extends Foo { y?: number }
       interface Props extends Bar {
         z: number
+        y: string
       }
       defineProps<Props>()
       </script>
       `)
       assertCode(content)
-      expect(content).toMatch(`x: { type: Number, required: false }`)
-      expect(content).toMatch(`y: { type: Number, required: false }`)
       expect(content).toMatch(`z: { type: Number, required: true }`)
+      expect(content).toMatch(`y: { type: String, required: true }`)
+      expect(content).toMatch(`x: { type: Number, required: false }`)
       expect(bindings).toStrictEqual({
         x: BindingTypes.PROPS,
         y: BindingTypes.PROPS,
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index b15a08e3c35..e57c37bfa74 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -458,7 +458,7 @@ export function compileScript(
               extend.expression.name
             )
             if (qualified) {
-              cache.unshift(qualified)
+              cache.push(qualified)
               resolveExtendsType(node, qualifier, cache)
               return cache
             }
@@ -487,6 +487,28 @@ export function compileScript(
     }
   }
 
+  // filter all extends types to keep the override declaration
+  function filterExtendsType(extendsTypes: Node[], bodies: TSTypeElement[]) {
+    extendsTypes.forEach(extend => {
+      const body = (extend as TSInterfaceBody).body
+      body.forEach(newBody => {
+        if (
+          newBody.type === 'TSPropertySignature' &&
+          newBody.key.type === 'Identifier'
+        ) {
+          const name = newBody.key.name
+          const hasOverride = bodies.some(
+            seenBody =>
+              seenBody.type === 'TSPropertySignature' &&
+              seenBody.key.type === 'Identifier' &&
+              seenBody.key.name === name
+          )
+          if (!hasOverride) bodies.push(newBody)
+        }
+      })
+    })
+  }
+
   function resolveQualifiedType(
     node: Node,
     qualifier: (node: Node) => boolean
@@ -511,11 +533,8 @@ export function compileScript(
         if (qualified) {
           const extendsTypes = resolveExtendsType(node, qualifier)
           if (extendsTypes.length) {
-            const bodies: TSTypeElement[] = []
-            extendsTypes.forEach(extend => {
-              bodies.push(...(extend as TSInterfaceBody).body)
-            })
-            bodies.push(...qualified.body)
+            const bodies: TSTypeElement[] = [...qualified.body]
+            filterExtendsType(extendsTypes, bodies)
             qualified.body = bodies
           }
           return qualified

From c8af08d7ede410132a2eb699f688ae58b3269dd0 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Mon, 6 Sep 2021 09:01:39 +0800
Subject: [PATCH 3/3] chore: improve code

---
 .../__snapshots__/compileScript.spec.ts.snap     | 15 ++++++++-------
 .../compiler-sfc/__tests__/compileScript.spec.ts | 16 +++++++++-------
 packages/compiler-sfc/src/compileScript.ts       | 13 +++++++++----
 3 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
index 009a16a8851..befdf2f2797 100644
--- a/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap
@@ -913,12 +913,13 @@ return {  }
 
 exports[`SFC compile <script setup> with TypeScript defineProps w/ extends interface 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
-interface Foo { x?: number }
-      interface Bar extends Foo { y?: number }
-      interface Props extends Bar {
-        z: number
-        y: string
-      }
+interface Bar extends Foo { y?: number }
+        interface Props extends Bar {
+          z: number
+          y: string
+        }
+        
+        interface Foo { x?: number }
       
 export default /*#__PURE__*/_defineComponent({
   props: {
@@ -929,7 +930,7 @@ export default /*#__PURE__*/_defineComponent({
   setup(__props: any, { expose }) {
   expose()
 
-      
+        
       
 return {  }
 }
diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index aeb544e8a29..32a085ae163 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -775,14 +775,16 @@ const emit = defineEmits(['a', 'b'])
 
     test('defineProps w/ extends interface', () => {
       const { content, bindings } = compile(`
+      <script lang="ts">
+        interface Foo { x?: number }
+      </script>
       <script setup lang="ts">
-      interface Foo { x?: number }
-      interface Bar extends Foo { y?: number }
-      interface Props extends Bar {
-        z: number
-        y: string
-      }
-      defineProps<Props>()
+        interface Bar extends Foo { y?: number }
+        interface Props extends Bar {
+          z: number
+          y: string
+        }
+        defineProps<Props>()
       </script>
       `)
       assertCode(content)
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index e57c37bfa74..fe7f2222d89 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -440,6 +440,12 @@ export function compileScript(
     return true
   }
 
+  function getAstBody(): Statement[] {
+    return scriptAst
+      ? [...scriptSetupAst.body, ...scriptAst.body]
+      : scriptSetupAst.body
+  }
+
   function resolveExtendsType(
     node: Node,
     qualifier: (node: Node) => boolean,
@@ -451,7 +457,8 @@ export function compileScript(
           extend.type === 'TSExpressionWithTypeArguments' &&
           extend.expression.type === 'Identifier'
         ) {
-          for (const node of scriptSetupAst.body) {
+          const body = getAstBody()
+          for (const node of body) {
             const qualified = isQualifiedType(
               node,
               qualifier,
@@ -521,9 +528,7 @@ export function compileScript(
       node.typeName.type === 'Identifier'
     ) {
       const refName = node.typeName.name
-      const body = scriptAst
-        ? [...scriptSetupAst.body, ...scriptAst.body]
-        : scriptSetupAst.body
+      const body = getAstBody()
       for (const node of body) {
         let qualified = isQualifiedType(
           node,