fix: enable verbatimModuleSyntax for script

package.json

@@ -44,8 +44,14 @@
     "test:types": "tsc --noEmit"
   },
   "peerDependencies": {
+    "esbuild": "^0.25.2",
     "vue": "^3.5.13"
   },
+  "peerDependenciesMeta": {
+    "esbuild": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "@babel/parser": "^7.27.0"
   },

src/mkdist.ts

@@ -40,7 +40,6 @@ function defineVueLoader(options?: DefineVueLoaderOptions): Loader {
     const { parse } = await import('vue/compiler-sfc')
 
     let modified = false
-    let fakeScriptBlock = false
 
     const raw = await input.getContents()
     const sfc = parse(raw, {
@@ -81,28 +80,14 @@ function defineVueLoader(options?: DefineVueLoaderOptions): Loader {
           : sfc.descriptor.scriptSetup,
       )
     }
-    if (!sfc.descriptor.script && !sfc.descriptor.scriptSetup) {
-      // push a fake script block to generate dts
-      blocks.unshift({
-        type: 'script',
-        content: 'default {}',
-        attrs: {},
-        loc: {
-          start: {
-            offset: 0,
-            line: 1,
-            column: 1,
-          },
-          end: {
-            offset: 0,
-            line: 1,
-            column: 1,
-          },
-          source: '',
-        },
-      })
-      fakeScriptBlock = true
-    }
+
+    // generate dts
+    await context.loadFile({
+      path: `${input.path}.js`,
+      srcPath: `${input.srcPath}.js`,
+      extension: '.js',
+      getContents: () => 'export default {}',
+    })
 
     const results = await Promise.all(
       blocks.map(async (data) => {
@@ -127,10 +112,6 @@ function defineVueLoader(options?: DefineVueLoaderOptions): Loader {
     const contents = results
       .sort((a, b) => a.offset - b.offset)
       .map(({ block }) => {
-        if (block.type === 'script' && fakeScriptBlock) {
-          return undefined
-        }
-
         const attrs = Object.entries(block.attrs)
           .map(([key, value]) => {
             if (!value) {
@@ -236,11 +217,24 @@ const styleLoader = defineDefaultBlockLoader({
   type: 'style',
 })
 
-const scriptLoader = defineDefaultBlockLoader({
-  defaultLang: 'js',
-  type: 'script',
-  validExtensions: ['.js', '.mjs'],
-})
+const scriptLoader: VueBlockLoader = async (block, { options }) => {
+  if (block.type !== 'script') {
+    return
+  }
+
+  const { transform } = await esbuild()
+  const { code: result } = await transform(block.content, {
+    ...options.esbuild,
+    loader: 'ts',
+    tsconfigRaw: { compilerOptions: { target: 'ESNext', verbatimModuleSyntax: true } },
+  })
+
+  return {
+    type: block.type,
+    attrs: toOmit(block.attrs, ['lang', 'generic']),
+    content: result,
+  }
+}
 
 export const vueLoader = defineVueLoader({
   blockLoaders: {
@@ -250,6 +244,14 @@ export const vueLoader = defineVueLoader({
   },
 })
 
+let esbuildCache: typeof import('esbuild')
+async function esbuild() {
+  if (!esbuildCache) {
+    esbuildCache = await import('esbuild')
+  }
+  return esbuildCache
+}
+
 function cleanupBreakLine(str: string): string {
   return str.replaceAll(/(\n\n)\n+/g, '\n\n').replace(/^\s*\n|\n\s*$/g, '')
 }

test/mkdist.test.ts

@@ -192,6 +192,30 @@ describe('transform typescript script setup', () => {
     `)
   })
 
+  it('do not tree-shake', async () => {
+    expect(
+      await fixture(
+        `<template>
+          <div :data-test="toValue('hello')" />
+        </template>
+        <script setup lang="ts">
+        import { toValue, type Ref } from 'vue'
+        const msg = 1
+        </script>`,
+      ),
+    ).toMatchInlineSnapshot(`
+      "<template>
+                <div :data-test="toValue('hello')" />
+      </template>
+
+      <script setup>
+      import { toValue } from "vue";
+      const msg = 1;
+      </script>
+      "
+    `)
+  })
+
   async function fixture(src: string): Promise<string> {
     await rm(tmpDir, { force: true, recursive: true })
     await mkdir(join(tmpDir, 'src'), { recursive: true })