chore: update playground

playground/rsbuild.config.ts

@@ -1,6 +1,14 @@
 import { defineConfig } from '@rsbuild/core';
+import { pluginBabel } from '@rsbuild/plugin-babel';
+import { pluginVue } from '@rsbuild/plugin-vue';
 import { pluginVueJsx } from '../src';
 
 export default defineConfig({
-  plugins: [pluginVueJsx()],
+  plugins: [
+    pluginVue(),
+    pluginVueJsx(),
+    pluginBabel({
+      include: /\.(?:jsx|tsx)$/,
+    }),
+  ],
 });

playground/src/A.jsx

@@ -0,0 +1,14 @@
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  name: 'Test',
+
+  setup() {
+    const count = ref(0);
+    return () => (
+      <button id="button1" type="button" onClick={() => count.value++}>
+        A: {count.value}
+      </button>
+    );
+  },
+});

playground/src/index.js

@@ -1,8 +1,6 @@
-import './index.css';
+import { createApp } from 'vue';
+import A from './A';
 
-document.querySelector('#root').innerHTML = `
-<div class="content">
-  <h1>Vanilla Rsbuild</h1>
-  <p>Start building amazing things with Rsbuild.</p>
-</div>
-`;
+console.log(A);
+
+createApp(A).mount('#root');