feat: support decorators and import-attributes syntax

Author: webfansplz

packages/core/package.json

@@ -45,9 +45,11 @@
     "vite": "^3.0.0-0 || ^4.0.0-0"
   },
   "dependencies": {
-    "@babel/core": "^7.21.3",
+    "@babel/core": "^7.22.17",
+    "@babel/plugin-proposal-decorators": "^7.22.15",
+    "@babel/plugin-syntax-import-attributes": "^7.22.5",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
-    "@babel/plugin-transform-typescript": "^7.21.3",
+    "@babel/plugin-transform-typescript": "^7.22.15",
     "@vue/babel-plugin-jsx": "^1.1.1",
     "@vue/compiler-dom": "^3.2.47",
     "esno": "^0.16.3",

packages/core/src/compiler/template.ts

@@ -1,11 +1,12 @@
-import path from 'path'
+import path from 'node:path'
 import MagicString from 'magic-string'
 import { parse as vueParse, transform as vueTransform } from '@vue/compiler-dom'
 import { parse as babelParse, traverse as babelTraverse } from '@babel/core'
 import vueJsxPlugin from '@vue/babel-plugin-jsx'
 import typescriptPlugin from '@babel/plugin-transform-typescript'
 import importMeta from '@babel/plugin-syntax-import-meta'
-import { parseJSXIdentifier } from '../utils'
+import decoratorsPlugin from '@babel/plugin-proposal-decorators'
+import importAttributesPlugin from '@babel/plugin-syntax-import-attributes'
 import { normalizePath } from 'vite'
 
 const EXCLUDE_TAG = ['template', 'script', 'style']
@@ -62,6 +63,14 @@ export async function compileSFCTemplate(
               typescriptPlugin,
               { isTSX: true, allowExtensions: true },
             ],
+            [
+              decoratorsPlugin,
+              { legacy: true },
+            ],
+            [
+              importAttributesPlugin,
+              { deprecatedAssertSyntax: true },
+            ],
           ],
         })
 

packages/playground/vue2/package.json

@@ -8,6 +8,7 @@
   "dependencies": {
     "@vue/composition-api": "^1.7.1",
     "vue": "2.7.14",
+    "vue-property-decorator": "^9.1.2",
     "vue-template-compiler": "2.7.14"
   },
   "devDependencies": {

packages/playground/vue2/src/App.vue

@@ -1,11 +1,13 @@
 <script lang="ts">
 import Hi from './Hi.vue'
 import Welcome from './Welcome'
+import Count from './Count.vue'
 export default {
   name: 'App',
   components: {
     Hi,
     Welcome,
+    Count,
   },
 }
 </script>
@@ -15,6 +17,7 @@ export default {
     <div>
       <Hi />
       <Welcome />
+      <Count />
       <!--  -->
       <!--  -->
       <!--  -->

packages/playground/vue2/src/Count.vue

@@ -0,0 +1,23 @@
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+
+@Component
+export default class MyComponent extends Vue {
+  @Prop() readonly message!: string
+  @Prop({ default: 0 }) count!: number
+
+  increment() {
+    this.count++
+  }
+}
+</script>
+
+<template>
+  <div>
+    <p>Message: {{ message }}</p>
+    <p>Count: {{ count }}</p>
+    <button @click="increment">
+      Increment
+    </button>
+  </div>
+</template>

packages/playground/vue2/src/Welcome.tsx

@@ -1,8 +1,33 @@
-import { defineComponent } from "@vue/composition-api"
-
-export default defineComponent({
-  name: "Welcome",
-  setup() {
-    return () => <p style="color: #fcb80f;cursor: pointer;"> Welcome to here 🚀 .</p>
-  },
-})
+// import { defineComponent } from "@vue/composition-api"
+
+// export default defineComponent({
+//   name: "Welcome",
+//   setup() {
+//     return () => <p style="color: #fcb80f;cursor: pointer;"> Welcome to here 🚀 .</p>
+//   },
+// })
+
+import Vue from 'vue'
+import { Component } from 'vue-property-decorator'
+
+@Component
+export default class Welcome extends Vue {
+  private count = 0
+
+  private get message(): string {
+    return `Count: ${this.count}`
+  }
+
+  private increment(): void {
+    this.count++
+  }
+
+  render() {
+    return (
+      <div>
+        <h1>{this.message}</h1>
+        <button onClick={this.increment}>Increment</button>
+      </div>
+    )
+  }
+}

packages/playground/vue2/tsconfig.json

@@ -6,7 +6,8 @@
     "strict": true,
     "module": "ESNext",
     "moduleResolution": "Node",
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "experimentalDecorators": true
   },
-  "include": ["src"],
-}
+  "include": ["src"]
+}

packages/playground/vue2/vite.config.ts

@@ -14,6 +14,7 @@ export default defineConfig({
       vue: 2,
       toggleButtonVisibility: 'always',
       enabled: true,
+      disableInspectorOnEditorOpen: true,
     }),
   ],
 })