From ee1539999c1423202f27b05451e4062df2a319a8 Mon Sep 17 00:00:00 2001
From: ZHAO Jinxiang <xiaoxiangmoe@gmail.com>
Date: Fri, 31 Dec 2021 22:35:52 +0800
Subject: [PATCH] fix: examples and playground

---
 .eslintrc => .eslintrc.json                   |  0
 examples/nuxt/components/HelloWorld.vue       | 40 ++++-----
 examples/nuxt/pages/index.vue                 | 11 +--
 examples/nuxt/shims-vue.d.ts                  |  1 +
 examples/nuxt/tsconfig.json                   | 19 ++---
 examples/vue-cli/package.json                 |  6 +-
 examples/vue-cli/src/App.vue                  |  8 +-
 .../vue-cli/src/components/HelloWorld.vue     | 12 ++-
 examples/vue-cli/src/main.ts                  |  8 +-
 examples/vue-cli/src/shims-vue.d.ts           |  5 +-
 examples/vue-cli/tsconfig.json                | 25 ++----
 examples/vue-cli/vue.config.js                |  1 +
 playground/index.html                         |  2 +-
 playground/main.ts                            |  8 --
 playground/package.json                       |  8 +-
 playground/{ => src}/App.vue                  | 15 ++--
 playground/{ => src}/Async.vue                |  0
 playground/{ => src}/Bar.vue                  |  0
 playground/{ => src}/Foo.vue                  |  0
 playground/{ => src}/HelloWorld.vue           | 41 +++++-----
 playground/src/main.ts                        |  9 +++
 playground/src/shims-vue.d.ts                 |  2 +
 playground/tsconfig.json                      | 31 +++++++
 playground/vite.config.ts                     |  4 +-
 pnpm-lock.yaml                                | 46 ++++++++---
 src/nuxt.ts                                   |  5 +-
 src/rollup.ts                                 |  5 +-
 src/vite.ts                                   |  5 +-
 src/webpack.ts                                |  5 +-
 test/__snapshots__/transform.test.ts.snap     | 81 ++++++++-----------
 test/transform.test.ts                        |  2 +-
 tsconfig.json                                 |  6 +-
 32 files changed, 230 insertions(+), 181 deletions(-)
 rename .eslintrc => .eslintrc.json (100%)
 create mode 100644 examples/nuxt/shims-vue.d.ts
 delete mode 100644 playground/main.ts
 rename playground/{ => src}/App.vue (81%)
 rename playground/{ => src}/Async.vue (100%)
 rename playground/{ => src}/Bar.vue (100%)
 rename playground/{ => src}/Foo.vue (100%)
 rename playground/{ => src}/HelloWorld.vue (76%)
 create mode 100644 playground/src/main.ts
 create mode 100644 playground/src/shims-vue.d.ts
 create mode 100644 playground/tsconfig.json

diff --git a/.eslintrc b/.eslintrc.json
similarity index 100%
rename from .eslintrc
rename to .eslintrc.json
diff --git a/examples/nuxt/components/HelloWorld.vue b/examples/nuxt/components/HelloWorld.vue
index e873c6d..d6a19a1 100644
--- a/examples/nuxt/components/HelloWorld.vue
+++ b/examples/nuxt/components/HelloWorld.vue
@@ -1,19 +1,17 @@
-<template>
-  <div>
-    <h3>{{ msg }}, {{ name }}</h3>
-    <button @click="inc">
-      Inc
-    </button>
-    <div>{{ count }} x 2 = {{ doubled }}</div>
-    <button @click="dec()" v-html="decText" />
-  </div>
-</template>
 
+<script lang="ts">
+/* eslint-disable import/first */
+export default {
+  name: 'App',
+}
+</script>
 <script setup lang="ts">
-import { ref, computed, watch } from '@vue/composition-api'
+import { computed, ref, watch } from '@vue/composition-api'
 
-const props = withDefaults(defineProps<{ msg: string; name: string | number }>(), { msg: 'Hello' })
-const emit = defineEmits(['update'])
+withDefaults(defineProps<{ msg: string; name: string | number }>(), { msg: 'Hello' })
+const emit = defineEmits<{
+  (event: 'update', value: number): void
+}>()
 
 const count = ref(0)
 const doubled = computed(() => count.value * 2)
@@ -30,9 +28,13 @@ const decText = '<b>Dec</b>'
 
 watch(count, value => emit('update', value))
 </script>
-
-<script lang="ts">
-export default {
-  name: 'App'
-}
-</script>
+<template>
+  <div>
+    <h3>{{ msg }}, {{ name }}</h3>
+    <button @click="inc">
+      Inc
+    </button>
+    <div>{{ count }} x 2 = {{ doubled }}</div>
+    <button @click="dec()" v-html="decText" />
+  </div>
+</template>
diff --git a/examples/nuxt/pages/index.vue b/examples/nuxt/pages/index.vue
index 8648c5c..6e14f73 100644
--- a/examples/nuxt/pages/index.vue
+++ b/examples/nuxt/pages/index.vue
@@ -1,13 +1,14 @@
-<template>
-  <div>
-    <hello-world name="Vue 2" @update="onUpdate" />
-  </div>
-</template>
 
 <script setup lang="ts">
 import HelloWorld from '../components/HelloWorld.vue'
 
 function onUpdate(e: any) {
+  // eslint-disable-next-line no-console
   console.log(e)
 }
 </script>
+<template>
+  <div>
+    <HelloWorld name="Vue 2" @update="onUpdate" />
+  </div>
+</template>
diff --git a/examples/nuxt/shims-vue.d.ts b/examples/nuxt/shims-vue.d.ts
new file mode 100644
index 0000000..06ef633
--- /dev/null
+++ b/examples/nuxt/shims-vue.d.ts
@@ -0,0 +1 @@
+/// <reference types="unplugin-vue2-script-setup/shims.js" />
diff --git a/examples/nuxt/tsconfig.json b/examples/nuxt/tsconfig.json
index ef822c0..35370a6 100644
--- a/examples/nuxt/tsconfig.json
+++ b/examples/nuxt/tsconfig.json
@@ -9,27 +9,20 @@
       "DOM"
     ],
     "esModuleInterop": true,
-    "skipLibCheck": true,
+    "skipLibCheck": false,
     "allowJs": true,
     "sourceMap": true,
     "strict": true,
     "noEmit": true,
-    "baseUrl": ".",
-    "paths": {
-      "~/*": [
-        "./*"
-      ],
-      "@/*": [
-        "./*"
-      ]
-    },
     "types": [
       "@types/node",
-      "@nuxt/types",
-      "unplugin-vue2-script-setup/types"
+      "@nuxt/types"
     ]
   },
   "exclude": [
     "node_modules"
-  ]
+  ],
+  "vueCompilerOptions": {
+    "experimentalCompatMode": 2
+  }
 }
diff --git a/examples/vue-cli/package.json b/examples/vue-cli/package.json
index fd42a0f..92e64fc 100644
--- a/examples/vue-cli/package.json
+++ b/examples/vue-cli/package.json
@@ -7,8 +7,9 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@vue/composition-api": "^1.4.3",
     "core-js": "^3.20.1",
-    "vue": "^2.6.11"
+    "vue": "^2.6.14"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.5.15",
@@ -18,5 +19,8 @@
     "unplugin-vue2-script-setup": "workspace:*",
     "vue-template-compiler": "^2.6.14",
     "vue-tsc": "^0.30.1"
+  },
+  "vueCompilerOptions": {
+    "experimentalCompatMode": 2
   }
 }
diff --git a/examples/vue-cli/src/App.vue b/examples/vue-cli/src/App.vue
index 9db9937..aa4ac08 100644
--- a/examples/vue-cli/src/App.vue
+++ b/examples/vue-cli/src/App.vue
@@ -1,13 +1,11 @@
+<script setup lang="ts">
+import HelloWorld from './components/HelloWorld.vue'
+</script>
 <template>
   <div id="app">
     <HelloWorld msg="Welcome to Your Vue.js App" />
   </div>
 </template>
-
-<script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue'
-</script>
-
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
diff --git a/examples/vue-cli/src/components/HelloWorld.vue b/examples/vue-cli/src/components/HelloWorld.vue
index 462a346..6fafbd3 100644
--- a/examples/vue-cli/src/components/HelloWorld.vue
+++ b/examples/vue-cli/src/components/HelloWorld.vue
@@ -1,3 +1,8 @@
+<script setup lang="ts">
+defineProps<{
+  msg: string
+}>()
+</script>
 <template>
   <div class="hello">
     <h1>{{ msg }}</h1>
@@ -28,13 +33,6 @@
     </ul>
   </div>
 </template>
-
-<script setup lang="ts">
-defineProps({
-  msg: String,
-})
-</script>
-
 <style scoped>
 h3 {
   margin: 40px 0 0;
diff --git a/examples/vue-cli/src/main.ts b/examples/vue-cli/src/main.ts
index 9fead88..a1b8dec 100644
--- a/examples/vue-cli/src/main.ts
+++ b/examples/vue-cli/src/main.ts
@@ -1,10 +1,12 @@
 import Vue from 'vue'
-import VueCompostionAPI from '@vue/composition-api'
+import VueCompostionAPI, { createApp, h } from '@vue/composition-api'
 import App from './App.vue'
 
 Vue.config.productionTip = false
 Vue.use(VueCompostionAPI)
 
-const app = new Vue({ render: h => h(App as any) })
+const app = createApp({
+  render: () => h(App),
+})
 
-app.$mount('#app')
+app.mount('#app')
diff --git a/examples/vue-cli/src/shims-vue.d.ts b/examples/vue-cli/src/shims-vue.d.ts
index d9f24fa..06ef633 100644
--- a/examples/vue-cli/src/shims-vue.d.ts
+++ b/examples/vue-cli/src/shims-vue.d.ts
@@ -1,4 +1 @@
-declare module '*.vue' {
-  import Vue from 'vue'
-  export default Vue
-}
+/// <reference types="unplugin-vue2-script-setup/shims.js" />
diff --git a/examples/vue-cli/tsconfig.json b/examples/vue-cli/tsconfig.json
index 907c1c3..aaea037 100644
--- a/examples/vue-cli/tsconfig.json
+++ b/examples/vue-cli/tsconfig.json
@@ -6,35 +6,26 @@
     "jsx": "preserve",
     "importHelpers": true,
     "moduleResolution": "node",
-    "skipLibCheck": true,
+    "skipLibCheck": false,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
-    "baseUrl": ".",
     "types": [
-      "webpack-env",
-      "unplugin-vue2-script-setup/types"
+      "webpack-env"
     ],
-    "paths": {
-      "@/*": [
-        "src/*"
-      ]
-    },
     "lib": [
       "esnext",
       "dom",
-      "dom.iterable",
-      "scripthost"
+      "dom.iterable"
     ]
   },
   "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue",
-    "tests/**/*.ts",
-    "tests/**/*.tsx"
+    "src"
   ],
   "exclude": [
     "node_modules"
-  ]
+  ],
+  "vueCompilerOptions": {
+    "experimentalCompatMode": 2
+  }
 }
diff --git a/examples/vue-cli/vue.config.js b/examples/vue-cli/vue.config.js
index 80bc58e..4e82d37 100644
--- a/examples/vue-cli/vue.config.js
+++ b/examples/vue-cli/vue.config.js
@@ -13,6 +13,7 @@ module.exports = {
       }),
     ],
   },
+  parallel: false,
   chainWebpack(config) {
     // disable type check and let `vue-tsc` handles it
     config.plugins.delete('fork-ts-checker')
diff --git a/playground/index.html b/playground/index.html
index 58346fd..d4bf433 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -8,6 +8,6 @@
 </head>
 <body>
   <div id="app"></div>
-  <script type="module" src="./main.ts"></script>
+  <script type="module" src="./src/main.ts"></script>
 </body>
 </html>
diff --git a/playground/main.ts b/playground/main.ts
deleted file mode 100644
index 074ea9d..0000000
--- a/playground/main.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import Vue from 'vue'
-import VueCompositionAPI from '@vue/composition-api'
-import App from './App.vue'
-
-Vue.use(VueCompositionAPI)
-
-const app = new Vue({ render: h => h(App) })
-app.$mount('#app')
diff --git a/playground/package.json b/playground/package.json
index 1d2bfd9..60ad152 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -1,16 +1,18 @@
 {
   "private": true,
   "scripts": {
-    "dev": "vite --open"
+    "dev": "vite --open",
+    "build": "vue-tsc --noEmit && vite build"
   },
   "dependencies": {
     "@vue/composition-api": "^1.4.3",
     "vue": "^2.6.14"
   },
   "devDependencies": {
-    "vite": "^2.7.9",
+    "vite": "^2.7.10",
     "vite-plugin-inspect": "^0.3.11",
     "vite-plugin-vue2": "^1.9.0",
-    "vue-template-compiler": "^2.6.14"
+    "vue-template-compiler": "^2.6.14",
+    "vue-tsc": "^0.30.1"
   }
 }
diff --git a/playground/App.vue b/playground/src/App.vue
similarity index 81%
rename from playground/App.vue
rename to playground/src/App.vue
index 7ab2f32..05165e5 100644
--- a/playground/App.vue
+++ b/playground/src/App.vue
@@ -1,11 +1,3 @@
-<template>
-  <div>
-    <hello-world name="Vue 2" @update="onUpdate" />
-
-    <async-component />
-  </div>
-</template>
-
 <script setup lang="ts">
 import { defineAsyncComponent } from '@vue/composition-api'
 
@@ -18,3 +10,10 @@ function onUpdate(e: any) {
   console.log(e)
 }
 </script>
+<template>
+  <div>
+    <HelloWorld name="Vue 2" @update="onUpdate" />
+
+    <AsyncComponent />
+  </div>
+</template>
diff --git a/playground/Async.vue b/playground/src/Async.vue
similarity index 100%
rename from playground/Async.vue
rename to playground/src/Async.vue
diff --git a/playground/Bar.vue b/playground/src/Bar.vue
similarity index 100%
rename from playground/Bar.vue
rename to playground/src/Bar.vue
diff --git a/playground/Foo.vue b/playground/src/Foo.vue
similarity index 100%
rename from playground/Foo.vue
rename to playground/src/Foo.vue
diff --git a/playground/HelloWorld.vue b/playground/src/HelloWorld.vue
similarity index 76%
rename from playground/HelloWorld.vue
rename to playground/src/HelloWorld.vue
index 4d41eba..7bc4926 100644
--- a/playground/HelloWorld.vue
+++ b/playground/src/HelloWorld.vue
@@ -1,22 +1,18 @@
-<template>
-  <div>
-    <h3>{{ msg }}, {{ name }}</h3>
-    <button @click="inc">
-      Inc
-    </button>
-    <div>{{ count }} x 2 = {{ doubled }}</div>
-    <button @click="dec()" v-html="decText" />
-    <component :is="count > 2 ? Foo : Bar" />
-  </div>
-</template>
-
+<script lang="ts">
+/* eslint-disable import/first */
+export default {
+  name: 'App',
+}
+</script>
 <script setup lang="ts">
 import { watch } from '@vue/composition-api'
 import Foo from './Foo.vue'
 import Bar from './Bar.vue'
 
-const props = withDefaults(defineProps<{ msg: string; name: string | number }>(), { msg: 'Hello' })
-const emit = defineEmits(['update'])
+withDefaults(defineProps<{ msg: string; name: string | number }>(), { msg: 'Hello' })
+const emit = defineEmits<{
+  (event: 'update', value: number): void
+}>()
 
 let count = $ref(0)
 // eslint-disable-next-line prefer-const
@@ -33,9 +29,14 @@ const decText = '<b>Dec</b>'
 
 watch(count, value => emit('update', value))
 </script>
-
-<script lang="ts">
-export default {
-  name: 'App'
-}
-</script>
+<template>
+  <div>
+    <h3>{{ msg }}, {{ name }}</h3>
+    <button @click="inc">
+      Inc
+    </button>
+    <div>{{ count }} x 2 = {{ doubled }}</div>
+    <button @click="dec()" v-html="decText" />
+    <component :is="count > 2 ? Foo : Bar" />
+  </div>
+</template>
diff --git a/playground/src/main.ts b/playground/src/main.ts
new file mode 100644
index 0000000..b04e7b4
--- /dev/null
+++ b/playground/src/main.ts
@@ -0,0 +1,9 @@
+import Vue from 'vue'
+import VueCompositionAPI, { createApp, h } from '@vue/composition-api'
+import App from './App.vue'
+
+Vue.use(VueCompositionAPI)
+
+const app = createApp({ render: () => h(App) })
+
+app.mount('#app')
diff --git a/playground/src/shims-vue.d.ts b/playground/src/shims-vue.d.ts
new file mode 100644
index 0000000..13a790f
--- /dev/null
+++ b/playground/src/shims-vue.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="unplugin-vue2-script-setup/shims.js" />
+/// <reference types="unplugin-vue2-script-setup/ref-macros.js" />
diff --git a/playground/tsconfig.json b/playground/tsconfig.json
new file mode 100644
index 0000000..aaea037
--- /dev/null
+++ b/playground/tsconfig.json
@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "skipLibCheck": false,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "types": [
+      "webpack-env"
+    ],
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable"
+    ]
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules"
+  ],
+  "vueCompilerOptions": {
+    "experimentalCompatMode": 2
+  }
+}
diff --git a/playground/vite.config.ts b/playground/vite.config.ts
index 7db7791..8d429df 100644
--- a/playground/vite.config.ts
+++ b/playground/vite.config.ts
@@ -1,7 +1,9 @@
 import { defineConfig } from 'vite'
 import { createVuePlugin as Vue2 } from 'vite-plugin-vue2'
 import Inspect from 'vite-plugin-inspect'
-import ScriptSetup from '../src/vite'
+import { unplugin } from '../src'
+
+const ScriptSetup = unplugin.vite
 
 export default defineConfig({
   plugins: [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 83096a6..59e81c7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -93,13 +93,15 @@ importers:
       '@vue/cli-plugin-babel': ^4.5.15
       '@vue/cli-plugin-typescript': ^4.5.15
       '@vue/cli-service': ^4.5.15
+      '@vue/composition-api': ^1.4.3
       core-js: ^3.20.1
       typescript: ^4.5.4
       unplugin-vue2-script-setup: workspace:*
-      vue: ^2.6.11
+      vue: ^2.6.14
       vue-template-compiler: ^2.6.14
       vue-tsc: ^0.30.1
     dependencies:
+      '@vue/composition-api': 1.4.3_vue@2.6.14
       core-js: 3.20.1
       vue: 2.6.14
     devDependencies:
@@ -114,19 +116,21 @@ importers:
   playground:
     specifiers:
       '@vue/composition-api': ^1.4.3
-      vite: ^2.7.9
+      vite: ^2.7.10
       vite-plugin-inspect: ^0.3.11
       vite-plugin-vue2: ^1.9.0
       vue: ^2.6.14
       vue-template-compiler: ^2.6.14
+      vue-tsc: ^0.30.1
     dependencies:
       '@vue/composition-api': 1.4.3_vue@2.6.14
       vue: 2.6.14
     devDependencies:
-      vite: 2.7.9
-      vite-plugin-inspect: 0.3.11_vite@2.7.9
-      vite-plugin-vue2: 1.9.0_8ef3fc29348b7a9d3790b603714f5bb1
+      vite: 2.7.10
+      vite-plugin-inspect: 0.3.11_vite@2.7.10
+      vite-plugin-vue2: 1.9.0_0942e2da5dc468c8f4e6d1df85edc06f
       vue-template-compiler: 2.6.14
+      vue-tsc: 0.30.1_typescript@4.5.4
 
 packages:
 
@@ -12182,7 +12186,7 @@ packages:
       extsprintf: 1.3.0
     dev: true
 
-  /vite-plugin-inspect/0.3.11_vite@2.7.9:
+  /vite-plugin-inspect/0.3.11_vite@2.7.10:
     resolution: {integrity: sha512-YsaV4bhJ++EULZamWVudMsq0VTugR/0slgbSj/A9JI9KmsGsXBCN4zBx0ptd0TkKrRniLbqO7iQqdZaybuLGvQ==}
     peerDependencies:
       vite: ^2.0.0
@@ -12190,12 +12194,12 @@ packages:
       debug: 4.3.3
       sirv: 1.0.18
       ufo: 0.7.9
-      vite: 2.7.9
+      vite: 2.7.10
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /vite-plugin-vue2/1.9.0_8ef3fc29348b7a9d3790b603714f5bb1:
+  /vite-plugin-vue2/1.9.0_0942e2da5dc468c8f4e6d1df85edc06f:
     resolution: {integrity: sha512-4vmcoiOmOTGjRnA0hk8tHYqk96ZxRpe4AmeCqJJ8jQuNo+SDF1zXPyhxAUIK1tuK354No77WVHHIimVvZQuvIA==}
     peerDependencies:
       vite: ^2.0.0-beta.23
@@ -12221,13 +12225,37 @@ packages:
       rollup: 2.60.0
       slash: 3.0.0
       source-map: 0.7.3
-      vite: 2.7.9
+      vite: 2.7.10
       vue-template-compiler: 2.6.14
       vue-template-es2015-compiler: 1.9.1
     transitivePeerDependencies:
       - supports-color
     dev: true
 
+  /vite/2.7.10:
+    resolution: {integrity: sha512-KEY96ntXUid1/xJihJbgmLZx7QSC2D4Tui0FdS0Old5OokYzFclcofhtxtjDdGOk/fFpPbHv9yw88+rB93Tb8w==}
+    engines: {node: '>=12.2.0'}
+    hasBin: true
+    peerDependencies:
+      less: '*'
+      sass: '*'
+      stylus: '*'
+    peerDependenciesMeta:
+      less:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+    dependencies:
+      esbuild: 0.13.15
+      postcss: 8.4.5
+      resolve: 1.20.0
+      rollup: 2.60.2
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
   /vite/2.7.9:
     resolution: {integrity: sha512-CyopIJIRrc26Wnbkch5BCHFhQodzeV4jjSegLAEw1RImvXSuoOo2SfpEW9zRVi188WmjJwCqCaoG25C0r4nekw==}
     engines: {node: '>=12.2.0'}
diff --git a/src/nuxt.ts b/src/nuxt.ts
index 1e54095..a94ecad 100644
--- a/src/nuxt.ts
+++ b/src/nuxt.ts
@@ -18,4 +18,7 @@ function scriptSetupModule(this: any, inlineOptions: PluginOptions = {}) {
   })
 }
 
-export = scriptSetupModule
+export default scriptSetupModule
+module.exports = scriptSetupModule
+module.exports.default = scriptSetupModule
+Object.defineProperty(module.exports, '__esModule', { value: true })
diff --git a/src/rollup.ts b/src/rollup.ts
index 7483b3d..62d3a71 100644
--- a/src/rollup.ts
+++ b/src/rollup.ts
@@ -1,3 +1,6 @@
 import unplugin from '.'
 
-export = unplugin.rollup
+export default unplugin.rollup
+module.exports = unplugin.rollup
+module.exports.default = unplugin.rollup
+Object.defineProperty(module.exports, '__esModule', { value: true })
diff --git a/src/vite.ts b/src/vite.ts
index 4050f15..996ecf0 100644
--- a/src/vite.ts
+++ b/src/vite.ts
@@ -1,3 +1,6 @@
 import unplugin from '.'
 
-export = unplugin.vite
+export default unplugin.vite
+module.exports = unplugin.vite
+module.exports.default = unplugin.vite
+Object.defineProperty(module.exports, '__esModule', { value: true })
diff --git a/src/webpack.ts b/src/webpack.ts
index 1f0bf9e..a5bec64 100644
--- a/src/webpack.ts
+++ b/src/webpack.ts
@@ -1,3 +1,6 @@
 import unplugin from '.'
 
-export = unplugin.webpack
+export default unplugin.webpack
+module.exports = unplugin.webpack
+module.exports.default = unplugin.webpack
+Object.defineProperty(module.exports, '__esModule', { value: true })
diff --git a/test/__snapshots__/transform.test.ts.snap b/test/__snapshots__/transform.test.ts.snap
index 9a0943a..3ed4893 100644
--- a/test/__snapshots__/transform.test.ts.snap
+++ b/test/__snapshots__/transform.test.ts.snap
@@ -1,15 +1,7 @@
 // Vitest Snapshot v1
 
-exports[`transform > fixtures > playground/App.vue 1`] = `
-"<template>
-  <div>
-    <hello-world name=\\"Vue 2\\" @update=\\"onUpdate\\" />
-
-    <async-component />
-  </div>
-</template>
-
-<script lang=\\"ts\\">
+exports[`transform > fixtures > playground/src/App.vue 1`] = `
+"<script lang=\\"ts\\">
 import { defineAsyncComponent } from '@vue/composition-api';
 import HelloWorld from './HelloWorld.vue';
 const AsyncComponent = defineAsyncComponent(() => import('./Async.vue'));
@@ -32,43 +24,39 @@ __sfc_main.components = Object.assign({
 }, __sfc_main.components);
 export default __sfc_main;
 </script>
+<template>
+  <div>
+    <HelloWorld name=\\"Vue 2\\" @update=\\"onUpdate\\" />
+
+    <AsyncComponent />
+  </div>
+</template>
 "
 `;
 
-exports[`transform > fixtures > playground/Async.vue 1`] = `
+exports[`transform > fixtures > playground/src/Async.vue 1`] = `
 "<template>
   <div>Async Component</div>
 </template>
 "
 `;
 
-exports[`transform > fixtures > playground/Bar.vue 1`] = `
+exports[`transform > fixtures > playground/src/Bar.vue 1`] = `
 "<template>
   <div>Bar</div>
 </template>
 "
 `;
 
-exports[`transform > fixtures > playground/Foo.vue 1`] = `
+exports[`transform > fixtures > playground/src/Foo.vue 1`] = `
 "<template>
   <div>Foo</div>
 </template>
 "
 `;
 
-exports[`transform > fixtures > playground/HelloWorld.vue 1`] = `
-"<template>
-  <div>
-    <h3>{{ msg }}, {{ name }}</h3>
-    <button @click=\\"inc\\">
-      Inc
-    </button>
-    <div>{{ count }} x 2 = {{ doubled }}</div>
-    <button @click=\\"dec()\\" v-html=\\"decText\\" />
-    <component :is=\\"count > 2 ? Foo : Bar\\" />
-  </div>
-</template>
-
+exports[`transform > fixtures > playground/src/HelloWorld.vue 1`] = `
+"
 <script lang=\\"ts\\">
 import { ref as _ref, computed as _computed } from \\"@vue/composition-api\\";
 import { watch } from '@vue/composition-api';
@@ -92,7 +80,6 @@ __sfc_main.props = {
 };
 
 __sfc_main.setup = (__props, __ctx) => {
-  const props = __props;
   const emit = __ctx.emit;
 
   let count = _ref(0); // eslint-disable-next-line prefer-const
@@ -123,38 +110,36 @@ __sfc_main.setup = (__props, __ctx) => {
 
 export default __sfc_main;
 </script>
-
-
+<template>
+  <div>
+    <h3>{{ msg }}, {{ name }}</h3>
+    <button @click=\\"inc\\">
+      Inc
+    </button>
+    <div>{{ count }} x 2 = {{ doubled }}</div>
+    <button @click=\\"dec()\\" v-html=\\"decText\\" />
+    <component :is=\\"count > 2 ? Foo : Bar\\" />
+  </div>
+</template>
 "
 `;
 
-exports[`transform > fixtures > playground/main.ts 1`] = `
+exports[`transform > fixtures > playground/src/main.ts 1`] = `
 "import Vue from 'vue'
-import VueCompositionAPI from '@vue/composition-api'
+import VueCompositionAPI, { createApp, h } from '@vue/composition-api'
 import App from './App.vue'
 
 Vue.use(VueCompositionAPI)
 
-const app = new Vue({ render: h => h(App) })
-app.$mount('#app')
+const app = createApp({ render: () => h(App) })
+
+app.mount('#app')
 "
 `;
 
-exports[`transform > fixtures > playground/vite.config.ts 1`] = `
-"import { defineConfig } from 'vite'
-import { createVuePlugin as Vue2 } from 'vite-plugin-vue2'
-import Inspect from 'vite-plugin-inspect'
-import ScriptSetup from '../src/vite'
-
-export default defineConfig({
-  plugins: [
-    Vue2(),
-    Inspect(),
-    ScriptSetup({
-      refTransform: true,
-    }),
-  ],
-})
+exports[`transform > fixtures > playground/src/shims-vue.d.ts 1`] = `
+"/// <reference types=\\"unplugin-vue2-script-setup/shims.js\\" />
+/// <reference types=\\"unplugin-vue2-script-setup/ref-macros.js\\" />
 "
 `;
 
diff --git a/test/transform.test.ts b/test/transform.test.ts
index c2ab2cf..e968868 100644
--- a/test/transform.test.ts
+++ b/test/transform.test.ts
@@ -9,7 +9,7 @@ describe('transform', () => {
     const root = resolve(__dirname, '..')
     const files = fg.sync([
       'test/fixtures/*.{vue,js,ts}',
-      'playground/*.{vue,js,ts}',
+      'playground/src/*.{vue,js,ts}',
     ], {
       cwd: root,
       onlyFiles: true,
diff --git a/tsconfig.json b/tsconfig.json
index 2a73307..adbb378 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,13 +4,11 @@
     "module": "CommonJS",
     "lib": ["esnext", "dom"],
     "moduleResolution": "node",
-    "esModuleInterop": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
     "strict": true,
     "strictNullChecks": true,
     "isolatedModules": true,
     "resolveJsonModule": true
-  },
-  "vueCompilerOptions": {
-    "experimentalCompatMode": 2
   }
 }