fix: enable verbatimModuleSyntax for script blocks (#10)

Author: Teages

package.json

@@ -27,7 +27,7 @@
     "dist"
   ],
   "engines": {
-    "node": ">=6.9.0"
+    "node": ">=18.0.0"
   },
   "scripts": {
     "build": "unbuild",
@@ -44,6 +44,7 @@
     "test:types": "tsc --noEmit"
   },
   "peerDependencies": {
+    "esbuild": "*",
     "vue": "^3.5.13"
   },
   "dependencies": {

src/mkdist.ts

@@ -1,5 +1,6 @@
 import type { SFCBlock, SFCTemplateBlock } from 'vue/compiler-sfc'
 import type { InputFile, Loader, LoaderContext, LoaderResult, OutputFile } from './types/mkdist'
+import { transform } from 'esbuild'
 import { preTranspileScriptSetup, transpileVueTemplate } from './index'
 
 interface DefineVueLoaderOptions {
@@ -40,7 +41,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 +81,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 +113,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 +218,23 @@ 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 { 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: {

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 })