feat: add unplugin-vue-components volar plugin

Author: zhiyuanzmj

README.md

@@ -84,7 +84,7 @@ See [Vitesse](https://github.com/antfu/vitesse) for full feature set.
 If you prefer to do it manually with the cleaner git history
 
 ```bash
-npx degit @vue-macros/vitesse-jsxmy-vitesse-app
+npx degit @vue-macros/vitesse-jsx my-vitesse-app
 cd my-vitesse-app
 pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
 ```

README.zh-CN.md

@@ -85,7 +85,7 @@
 如果您更喜欢使用更干净的 git 历史记录手动执行此操作
 
 ```bash
-npx degit @vue-macros/vitesse-jsxmy-vitesse-app
+npx degit @vue-macros/vitesse-jsx my-vitesse-app
 cd my-vitesse-app
 pnpm i # 如果你没装过 pnpm, 可以先运行: npm install -g pnpm
 ```

package.json

@@ -25,7 +25,7 @@
     "@unocss/eslint-plugin": "^0.64.1",
     "@unocss/reset": "^0.64.1",
     "@vitejs/plugin-vue-jsx": "^4.1.0",
-    "@vue-macros/jsx": "https://pkg.pr.new/vue-macros/vue-macros/@vue-macros/jsx@904d806",
+    "@vue-macros/jsx": "https://pkg.pr.new/vue-macros/vue-macros/@vue-macros/jsx@9e7d673",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^9.15.0",
     "eslint-plugin-format": "^0.1.2",
@@ -38,7 +38,7 @@
     "typescript": "^5.7.2",
     "unocss": "^0.64.1",
     "unplugin-auto-import": "^0.18.5",
-    "unplugin-vue-components-jsx": "0.27.3-1",
+    "unplugin-vue-components": "npm:unplugin-vue-components-jsx@0.27.4-2",
     "unplugin-vue-router": "https://pkg.pr.new/unplugin-vue-router@6e5dc20",
     "vite": "^5.4.11",
     "vite-plugin-inspect": "^0.8.8",

pnpm-lock.yaml

@@ -1,15 +1,41 @@
+/**
+ * ## The Counter
+ */
 export default defineComponent(({
   initial = undefined as undefined | number,
 }) => {
   const { count, inc, dec } = useCounter(initial)
 
+  const color = computed(() => (index: number) => (
+    index
+      ? count.value >= index
+      : count.value <= index)
+    ? 'green'
+    : 'red',
+  )
+
+  const styles = defineStyle(`
+    .inc, .dec {
+      @apply px3 b-(2 solid rounded [${color.value(1)}]);
+    }
+    .dec {
+      @apply b-[${color.value(0)}];
+    }
+  `)
+
+  const slots = defineSlots({
+    default: ({ value }: { value: number }) => <div class={styles.inc}>{value}</div>,
+  })
+
   return () => (
-    <div>
-      { count.value }
-      <button class="inc" onClick={() => inc()}>
+    <div gap3 mb3 flex="~ justify-center">
+
+      <slots.default value={count.value} />
+
+      <button class={styles.inc} onClick={() => inc()}>
         +
       </button>
-      <button class="dec" onClick={() => dec()}>
+      <button class={styles.dec} onClick={() => dec()}>
         -
       </button>
     </div>

src/components/TheCounter.tsx

@@ -25,6 +25,8 @@ export default defineComponent(() => {
 
       <div py-4 />
 
+      <TheCounter />
+
       <TheInput
         v-model={name.value}
         placeholder="What's your name?"

src/pages/index.tsx

@@ -5,7 +5,7 @@ import vueJsx from '@vitejs/plugin-vue-jsx'
 import VueJsxMacros from '@vue-macros/jsx/vite'
 import UnoCSS from 'unocss/vite'
 import AutoImport from 'unplugin-auto-import/vite'
-import Components from 'unplugin-vue-components-jsx/vite'
+import Components from 'unplugin-vue-components/vite'
 import { VueRouterAutoImports } from 'unplugin-vue-router'
 import VueRouter from 'unplugin-vue-router/vite'
 import { defineConfig } from 'vite'
@@ -20,9 +20,7 @@ export default defineConfig({
   },
   plugins: [
     // https://github.com/vue-macros/vue-macros
-    VueJsxMacros({
-      jsxMacros: true,
-    }),
+    VueJsxMacros(),
 
     // https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue-jsx
     vueJsx(),