feat(compiler-sfc): useAttrs support generic type

Author: rudyxu1102

packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap

@@ -1286,6 +1286,39 @@ return { get aa() { return aa }, set aa(v) { aa = v }, bb, cc, dd, get a() { ret
 }"
 `;
 
+exports[`SFC compile <script setup> > useAttrs w/ generic type 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { useAttrs, ref} from 'vue'
+      
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose }) {
+  expose();
+
+      const attrs = useAttrs<{ foo: number }>()
+      
+return { attrs, useAttrs, ref }
+}
+
+}, { attrs: {} as { foo: number }})"
+`;
+
+exports[`SFC compile <script setup> > useAttrs w/ type reference 1`] = `
+"import { defineComponent as _defineComponent } from 'vue'
+import { useAttrs, ref} from 'vue'
+      type CompAttrs = { foo: number }
+      
+export default /*#__PURE__*/_defineComponent({
+  setup(__props, { expose }) {
+  expose();
+
+      const attrs = useAttrs<CompAttrs>()
+      
+return { attrs, useAttrs, ref }
+}
+
+}, { attrs: {} as { foo: number }})"
+`;
+
 exports[`SFC compile <script setup> > with TypeScript > const Enum 1`] = `
 "import { defineComponent as _defineComponent } from 'vue'
 const enum Foo { A = 123 }

packages/compiler-sfc/__tests__/compileScript.spec.ts

@@ -112,6 +112,29 @@ const bar = 1
     assertCode(content)
   })
 
+  test('useAttrs w/ generic type', () => {
+    const { content } = compile(`
+      <script lang="ts" setup>
+      import { useAttrs, ref} from 'vue'
+      const attrs = useAttrs<{ foo: number }>()
+      </script>
+    `)
+    assertCode(content)
+    expect(content).toMatch('{ attrs: {} as { foo: number }}')
+  })
+
+  test('useAttrs w/ type reference', () => {
+    const { content } = compile(`
+      <script lang="ts" setup>
+      import { useAttrs, ref} from 'vue'
+      type CompAttrs = { foo: number }
+      const attrs = useAttrs<CompAttrs>()
+      </script>
+    `)
+    assertCode(content)
+    expect(content).toMatch('{ attrs: {} as { foo: number }}')
+  })
+
   test('defineEmits()', () => {
     const { content, bindings } = compile(`
 <script setup>

packages/compiler-sfc/src/compileScript.ts

@@ -294,6 +294,8 @@ export function compileScript(
   let propsDestructureDecl: Node | undefined
   let propsDestructureRestId: string | undefined
   let propsTypeDecl: PropsDeclType | undefined
+  let attrsTypeDecl: PropsDeclType | undefined
+
   let propsTypeDeclRaw: Node | undefined
   let propsIdentifier: string | undefined
   let emitsRuntimeDecl: Node | undefined
@@ -505,6 +507,33 @@ export function compileScript(
     return true
   }
 
+  function processDefineAttrs(node: Node): boolean {
+    const USE_ATTRS = 'useAttrs'
+    if (!isCallOf(node, USE_ATTRS)) {
+      return false
+    }
+
+    let attrsTypeDeclRaw: Node | undefined
+
+    // call has type parameters - infer runtime types from it
+    if (node.typeParameters) {
+      attrsTypeDeclRaw = node.typeParameters.params[0]
+      attrsTypeDecl = resolveQualifiedType(
+        attrsTypeDeclRaw,
+        node => node.type === 'TSTypeLiteral'
+      ) as TSTypeLiteral | TSInterfaceBody | undefined
+      if (!attrsTypeDecl) {
+        error(
+          `type argument passed to ${USE_ATTRS}() must be a literal type, ` +
+            `or a reference to an interface or literal type.`,
+          attrsTypeDeclRaw
+        )
+      }
+      return true
+    }
+    return false
+  }
+
   function processWithDefaults(
     node: Node,
     declId?: LVal,
@@ -1219,6 +1248,7 @@ export function compileScript(
             processDefineProps(decl.init, decl.id, node.kind) ||
             processWithDefaults(decl.init, decl.id, node.kind)
           const isDefineEmits = processDefineEmits(decl.init, decl.id)
+          processDefineAttrs(decl.init)
           if (isDefineProps || isDefineEmits) {
             if (left === 1) {
               s.remove(node.start! + startOffset, node.end! + startOffset)
@@ -1665,7 +1695,14 @@ export function compileScript(
         hasAwait ? `async ` : ``
       }setup(${args}) {\n${exposeCall}`
     )
-    s.appendRight(endOffset, `})`)
+    if (attrsTypeDecl) {
+      s.appendRight(
+        endOffset,
+        `}, { attrs: {} as ${genSetupPropsType(attrsTypeDecl)}})`
+      )
+    } else {
+      s.appendRight(endOffset, `})`)
+    }
   } else {
     if (defaultExport) {
       // without TS, can't rely on rest spread, so we use Object.assign