fix: improve type props handling

Author: antfu

package.json

@@ -66,6 +66,7 @@
   "devDependencies": {
     "@antfu/eslint-config": "^0.7.0",
     "@antfu/ni": "^0.7.0",
+    "@antfu/utils": "^0.2.4",
     "@types/jest": "^27.0.1",
     "@types/node": "^16.7.1",
     "@vue/composition-api": "^1.1.1",

pnpm-lock.yaml

@@ -34,11 +34,7 @@ export function getIdentifierDeclarations(nodes: Statement[], identifiers = new
       for (const declarator of node.declarations)
         handleVariableId(declarator.id)
     }
-    else if (node.type === 'FunctionDeclaration') {
-      if (node.id)
-        identifiers.add(node.id.name)
-    }
-    else if (node.type === 'ClassDeclaration') {
+    else if (node.type === 'FunctionDeclaration' || node.type === 'ClassDeclaration') {
       if (node.id)
         identifiers.add(node.id.name)
     }
@@ -67,9 +63,7 @@ export function getIdentifierUsages(node?: Expression | SpreadElement | PrivateN
   }
   else if (node.type === 'CallExpression') {
     getIdentifierUsages(node.callee as Expression, identifiers)
-    node.arguments.forEach((arg) => {
-      getIdentifierUsages(arg as Expression, identifiers)
-    })
+    node.arguments.forEach(arg => getIdentifierUsages(arg as Expression, identifiers))
   }
   else if (node.type === 'BinaryExpression' || node.type === 'LogicalExpression') {
     getIdentifierUsages(node.left, identifiers)
@@ -99,25 +93,18 @@ export function getIdentifierUsages(node?: Expression | SpreadElement | PrivateN
     })
   }
   else if (node.type === 'ArrayExpression') {
-    node.elements.forEach((element) => {
-      getIdentifierUsages(element, identifiers)
-    })
+    node.elements.forEach(element => getIdentifierUsages(element, identifiers))
   }
-  else if (node.type === 'SpreadElement') {
+  else if (node.type === 'SpreadElement' || node.type === 'ReturnStatement') {
     getIdentifierUsages(node.argument, identifiers)
   }
   else if (node.type === 'NewExpression') {
     getIdentifierUsages(node.callee as Expression, identifiers)
-    node.arguments.forEach((arg) => {
-      getIdentifierUsages(arg as Expression, identifiers)
-    })
+    node.arguments.forEach(arg => getIdentifierUsages(arg as Expression, identifiers))
   }
   else if (node.type === 'ArrowFunctionExpression' || node.type === 'FunctionDeclaration' || node.type === 'FunctionExpression') {
     getIdentifierUsages(node.body, identifiers)
   }
-  else if (node.type === 'ReturnStatement') {
-    getIdentifierUsages(node.argument, identifiers)
-  }
   // else {
   //   console.log(node)
   // }

src/core/identifiers.ts

@@ -1,23 +1,28 @@
 import { types as t } from '@babel/core'
 import { camelize, capitalize } from '@vue/shared'
-import traverse from '@babel/traverse'
+import { Node, Statement } from '@babel/types'
 import generate from '@babel/generator'
+import { partition } from '@antfu/utils'
 import { ParsedSFC, ScriptSetupTransformOptions } from '../types'
 import { applyMacros } from './macros'
 import { getIdentifierDeclarations } from './identifiers'
 
 export function transformScriptSetup(sfc: ParsedSFC, options?: ScriptSetupTransformOptions) {
   const { scriptSetup, script, template } = sfc
 
-  const imports = scriptSetup.ast.body.filter(n => n.type === 'ImportDeclaration')
-  const body = scriptSetup.ast.body.filter(n => n.type !== 'ImportDeclaration')
+  const { nodes: body, props } = applyMacros(scriptSetup.ast.body)
 
-  const { nodes: scriptSetupBody, props } = applyMacros(body)
+  const [hoisted, setupBody] = partition(
+    body,
+    n => n.type === 'ImportDeclaration'
+     || n.type === 'ExportNamedDeclaration'
+     || n.type.startsWith('TS'),
+  )
 
   // get all identifiers in `<script setup>`
   const declarations = new Set<string>()
-  getIdentifierDeclarations(imports, declarations)
-  getIdentifierDeclarations(body, declarations)
+  getIdentifierDeclarations(hoisted, declarations)
+  getIdentifierDeclarations(setupBody, declarations)
 
   // filter out identifiers that are used in `<template>`
   const returns = Array.from(declarations)
@@ -31,31 +36,28 @@ export function transformScriptSetup(sfc: ParsedSFC, options?: ScriptSetupTransf
     )
 
   // append `<script setup>` imports to `<script>`
-  let ast = t.program([
-    ...imports,
-    ...script.ast.body,
-  ])
 
   const __sfc = t.identifier('__sfc_main')
 
   let hasBody = false
 
-  // replace `export default` with a temproray variable
-  // `const __sfc_main = { ... }`
-  traverse(ast, {
-    ExportDefaultDeclaration(path) {
-      hasBody = true
-      const decl = path.node.declaration
-      path.replaceWith(
-        t.variableDeclaration('const', [
-          t.variableDeclarator(
-            __sfc,
-            decl as any,
-          ),
-        ]),
-      )
-    },
-  })
+  let ast = t.program(
+    [...hoisted, ...script.ast.body]
+      .map((node: Node) => {
+        // replace `export default` with a temproray variable
+        // `const __sfc_main = { ... }`
+        if (node.type === 'ExportDefaultDeclaration') {
+          hasBody = true
+          return t.variableDeclaration('const', [
+            t.variableDeclarator(
+              __sfc,
+              node.declaration as any,
+            ),
+          ])
+        }
+        return node
+      }) as Statement[],
+  )
 
   // inject `const __sfc_main = {}` if `<script>` has default export
   if (!hasBody) {
@@ -104,7 +106,7 @@ export function transformScriptSetup(sfc: ParsedSFC, options?: ScriptSetupTransf
             t.identifier('__props'),
             t.identifier('__ctx'),
           ], t.blockStatement([
-            ...scriptSetupBody,
+            ...setupBody,
             returnStatement as any,
           ])),
         ),

src/core/transformScriptSetup.ts

@@ -27,7 +27,7 @@ exports[`transform fixture Macros.vue 1`] = `
   <div @click=\\"emit(props.msg)\\">{{ msg }}</div>
 </template>
 
-<script >
+<script lang=\\"js\\">
 const __sfc_main = {};
 __sfc_main.props = {
   msg: String
@@ -57,22 +57,70 @@ const __sfc_main = {};
 __sfc_main.props = {
   msg: String
 };
+export default __sfc_main;
+</script>
+"
+`;
+
+exports[`transform fixture MacrosType.vue 1`] = `
+"<template>
+  <div @click=\\"emit(props.msg)\\">
+    {{ msg }}
+  </div>
+</template>
+
+<script lang=\\"ts\\">
+const __sfc_main = {};
+__sfc_main.props = {
+  msg: {
+    key: \\"msg\\",
+    required: false,
+    type: [String],
+    default: 'Hello'
+  },
+  value: {
+    key: \\"value\\",
+    required: true,
+    type: [Number, String]
+  },
+  data: {
+    key: \\"data\\",
+    required: false,
+    type: [Object]
+  }
+};
 
 __sfc_main.setup = (__props, __ctx) => {
-  return {};
+  const props = __props;
+  const emit = __ctx.emit;
+  return {
+    props,
+    emit
+  };
 };
 
 export default __sfc_main;
 </script>
 "
 `;
 
-exports[`transform fixture MacrosType.vue 1`] = `
+exports[`transform fixture MacrosType2.vue 1`] = `
 "<template>
-  <div @click=\\"emit(props.msg)\\">{{ msg }}</div>
+  <div @click=\\"emit(props.msg)\\">
+    {{ msg }}
+  </div>
 </template>
 
 <script lang=\\"ts\\">
+export interface Props {
+  msg: string;
+  value: number | string;
+  data?: {
+    value: boolean;
+  };
+  arr?: [number, string, {}];
+  any: any;
+}
 const __sfc_main = {};
 __sfc_main.props = {
   msg: {
@@ -84,7 +132,22 @@ __sfc_main.props = {
   value: {
     key: \\"value\\",
     required: true,
-    type: [Number]
+    type: [Number, String]
+  },
+  data: {
+    key: \\"data\\",
+    required: false,
+    type: [Object]
+  },
+  arr: {
+    key: \\"arr\\",
+    required: false,
+    type: [Array]
+  },
+  any: {
+    key: \\"any\\",
+    required: true,
+    type: [null]
   }
 };
 
@@ -150,6 +213,20 @@ export default __sfc_main;
 "
 `;
 
+exports[`transform fixture ScriptOnly.vue 1`] = `
+"<script lang=\\"ts\\">
+import { defineComponent } from '@vue/composition-api';
+
+const __sfc_main = defineComponent({
+  name: 'Hi'
+});
+
+export default __sfc_main;
+</script>
+
+"
+`;
+
 exports[`transform fixture TemplateOnly.vue 1`] = `
 "<template>
   <div>

test/__snapshots__/transform.test.ts.snap

@@ -2,10 +2,10 @@
   <div @click="emit(props.msg)">{{ msg }}</div>
 </template>
 
-<script setup>
+<script setup lang="js">
 const props = defineProps({
   msg: String,
 })
 
-const emit = defineEmits()
+const emit = defineEmits(['msg', 'update'])
 </script>

test/fixtures/Macros.vue

@@ -1,10 +1,12 @@
 <template>
-  <div @click="emit(props.msg)">{{ msg }}</div>
+  <div @click="emit(props.msg)">
+    {{ msg }}
+  </div>
 </template>
 
 <script setup lang="ts">
 const props = withDefaults(
-  defineProps<{ msg: string; value: number }>(),
+  defineProps<{ msg: string; value: number | string; data?: { value: boolean } }>(),
   { msg: 'Hello' },
 )
 

test/fixtures/MacrosType.vue

@@ -0,0 +1,25 @@
+<template>
+  <div @click="emit(props.msg)">
+    {{ msg }}
+  </div>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  msg: string
+  value: number | string
+  data?: { value: boolean }
+  arr?: [number, string, {}]
+  any: any
+}
+
+const props = withDefaults(
+  defineProps<Props>(),
+  { msg: 'Hello' },
+)
+
+const emit = defineEmits<{
+  (msg: string): void
+  (msg: number): number
+}>()
+</script>

test/fixtures/MacrosType2.vue

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api'
+
+export default defineComponent({
+  name: 'Hi',
+})
+</script>

test/fixtures/ScriptOnly.vue

@@ -45,7 +45,7 @@ describe('identifiers', () => {
       ['!a', ['a']],
       ['!!c', ['c']],
       ['[a,b,[c,{d}],...args]', ['a', 'b', 'c', 'd', 'args']],
-      ['new Foo(a,[b])', ['Foo', 'a', 'b']],
+      ['new Foo(a,[b,,c])', ['Foo', 'a', 'b', 'c']],
       ['new RC.Foo()', ['RC']],
       ['() => foo(bar)', ['foo', 'bar']],
       ['() => { foo() + bar; a }', ['foo', 'bar', 'a']],