refactor: remove @babel/generator and simplify codegen for script setup (#6)

Author: Teages

package.json

@@ -47,13 +47,11 @@
     "vue": "^3.5.13"
   },
   "dependencies": {
-    "@babel/generator": "^7.27.0",
     "@babel/parser": "^7.27.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "4.11.0",
     "@babel/types": "^7.27.0",
-    "@types/babel__generator": "^7.27.0",
     "@types/node": "^22.14.0",
     "@vitest/coverage-v8": "3.1.1",
     "@vue/compiler-dom": "^3.5.13",

pnpm-lock.yaml

@@ -1,7 +1,6 @@
-import type { ArrayExpression, CallExpression, Expression, ExpressionStatement, Identifier, Node, ObjectExpression, ObjectProperty, StringLiteral } from '@babel/types'
+import type { ArrayExpression, CallExpression, Expression, Identifier, Node, ObjectExpression, ObjectProperty, StringLiteral } from '@babel/types'
 import type { SFCDescriptor, SFCScriptBlock, SimpleTypeResolveContext } from 'vue/compiler-sfc'
 
-import { generate } from '@babel/generator'
 import { parse } from '@babel/parser'
 
 interface Context {
@@ -97,19 +96,8 @@ function processDefineProps(node: Expression, context: Context): string | undefi
 
   context.ctx.propsTypeDecl = propsTypeDecl
   const propsStr = context.utils.extractRuntimeProps(context.ctx)
-  const propsAst = parse(`${DEFINE_PROPS}(${propsStr})`, {
-    sourceType: 'module',
-    plugins: ['typescript'],
-  })
-
-  node.typeArguments = undefined
-  node.typeParameters = undefined
-  node.arguments = (
-    (propsAst.program.body[0] as ExpressionStatement)
-      .expression as CallExpression
-  ).arguments
 
-  return generate(node).code
+  return `${DEFINE_PROPS}(${propsStr})`
 }
 function processDefineEmits(node: Expression, context: Context): string | undefined {
   if (!isCallOf(node, DEFINE_EMITS)) {
@@ -136,17 +124,7 @@ function processDefineEmits(node: Expression, context: Context): string | undefi
   context.ctx.emitsTypeDecl = emitsTypeDecl
   const emits = context.utils.extractRuntimeEmits(context.ctx)
 
-  node.typeArguments = undefined
-  node.typeParameters = undefined
-  node.arguments[0] = {
-    type: 'ArrayExpression',
-    elements: [...emits].map(emit => ({
-      type: 'StringLiteral',
-      value: emit,
-    })),
-  }
-
-  return generate(node).code
+  return `defineEmits([${[...emits].map(emit => `"${emit}"`).join(', ')}])`
 }
 function processWithDefaults(node: Expression, context: Context): string | undefined {
   if (!isCallOf(node, WITH_DEFAULTS)) {
@@ -234,7 +212,16 @@ function processDefineModel(node: Expression, context: Context): string | undefi
     ? [modelNameDecl, modelCodegenDecl]
     : [modelCodegenDecl]
 
-  return generate(node).code
+  const codegenArgs: string[] = []
+  if (modelNameDecl) {
+    codegenArgs.push(`"${modelNameDecl.value}"`)
+  }
+
+  const codegenType = model.length === 1 ? model[0] : `[${model.join(',')}]`
+  const codegenExtra = modelRuntimeDecl ? `...${context.ctx.getString(modelRuntimeDecl)}` : ''
+  codegenArgs.push(`{ ${[`type: ${codegenType}`, codegenExtra].filter(s => !!s).join(', ')} }`)
+
+  return `${DEFINE_MODEL}(${codegenArgs.join(', ')})`
 }
 
 function getDefineModelRuntimeDecl(node: CallExpression, context: Context): [StringLiteral | undefined, ObjectExpression | undefined] {

src/utils/script-setup.ts

@@ -18,10 +18,7 @@ describe('transform typescript script setup', () => {
     ).toMatchInlineSnapshot(`
       "<script setup>
       defineProps({
-        msg: {
-          type: String,
-          required: true
-        }
+        msg: { type: String, required: true }
       });
       </script>
       "
@@ -33,10 +30,7 @@ describe('transform typescript script setup', () => {
     ).toMatchInlineSnapshot(`
       "<script setup>
       const props = defineProps({
-        msg: {
-          type: String,
-          required: true
-        }
+        msg: { type: String, required: true }
       });
       </script>
       "
@@ -48,10 +42,7 @@ describe('transform typescript script setup', () => {
     ).toMatchInlineSnapshot(`
       "<script setup>
       const { msg } = defineProps({
-        msg: {
-          type: String,
-          required: true
-        }
+        msg: { type: String, required: true }
       });
       </script>
       "
@@ -63,10 +54,7 @@ describe('transform typescript script setup', () => {
     ).toMatchInlineSnapshot(`
       "<script setup>
       const { msg = "hello" } = defineProps({
-        msg: {
-          type: String,
-          required: false
-        }
+        msg: { type: String, required: false }
       });
       </script>
       "
@@ -81,11 +69,7 @@ describe('transform typescript script setup', () => {
     ).toMatchInlineSnapshot(`
       "<script setup>
       const props = defineProps({
-        msg: {
-          type: String,
-          required: false,
-          default: "hi"
-        }
+        msg: { type: String, required: false, default: "hi" }
       });
       </script>
       "
@@ -97,11 +81,7 @@ describe('transform typescript script setup', () => {
     ).toMatchInlineSnapshot(`
       "<script setup>
       defineProps({
-        msg: {
-          type: String,
-          required: false,
-          default: "hi"
-        }
+        msg: { type: String, required: false, default: "hi" }
       });
       </script>
       "
@@ -168,19 +148,15 @@ describe('transform typescript script setup', () => {
       ),
     ).toMatchInlineSnapshot(`
       "<script setup>
-      const model = defineModel({
-        "type": String
-      });
+      const model = defineModel({ type: String });
       </script>
       "
     `)
     expect(
       await fixture(`<script setup lang="ts">defineModel<string>()</script>`),
     ).toMatchInlineSnapshot(`
       "<script setup>
-      defineModel({
-        "type": String
-      });
+      defineModel({ type: String });
       </script>
       "
     `)
@@ -190,9 +166,7 @@ describe('transform typescript script setup', () => {
       ),
     ).toMatchInlineSnapshot(`
       "<script setup>
-      defineModel("msg", {
-        "type": String
-      });
+      defineModel("msg", { type: String });
       </script>
       "
     `)
@@ -202,12 +176,7 @@ describe('transform typescript script setup', () => {
       ),
     ).toMatchInlineSnapshot(`
       "<script setup>
-      defineModel({
-        "type": String,
-        ...{
-          required: true
-        }
-      });
+      defineModel({ type: String, ...{ required: true } });
       </script>
       "
     `)
@@ -217,12 +186,7 @@ describe('transform typescript script setup', () => {
       ),
     ).toMatchInlineSnapshot(`
       "<script setup>
-      defineModel("msg", {
-        "type": String,
-        ...{
-          required: true
-        }
-      });
+      defineModel("msg", { type: String, ...{ required: true } });
       </script>
       "
     `)