From d4e831355eefc19375477fc5cd603833bc98a7fe Mon Sep 17 00:00:00 2001
From: Cuvii <xw5427@gmail.com>
Date: Wed, 23 Mar 2022 22:48:07 +0800
Subject: [PATCH] feat: enable ref sugar by default & remove annoying warnings
 (#319)

---
 .vscode/settings.json | 2 +-
 README.md             | 2 ++
 README.zh-CN.md       | 2 ++
 src/auto-imports.d.ts | 7 +++++++
 src/pages/index.vue   | 6 +++---
 tsconfig.json         | 1 +
 vite.config.ts        | 2 ++
 7 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 624da39..c8501cc 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,5 +1,5 @@
 {
-  "cSpell.words": ["Vitesse"],
+  "cSpell.words": ["Vitesse", "Vite", "unocss", "vitest", "vueuse", "pinia", "demi", "antfu", "iconify", "intlify", "vitejs", "unplugin", "pnpm"],
   "i18n-ally.sourceLanguage": "en",
   "i18n-ally.keystyle": "nested",
   "i18n-ally.localesPaths": "locales",
diff --git a/README.md b/README.md
index df5117b..fc83660 100644
--- a/README.md
+++ b/README.md
@@ -45,6 +45,8 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
 
 - 🔥 Use the [new `<script setup>` syntax](https://github.com/vuejs/rfcs/pull/227)
 
+- 🤙🏻 [Reactivity Transform](https://vuejs.org/guide/extras/reactivity-transform.html) enabled
+
 - 📥 [APIs auto importing](https://github.com/antfu/unplugin-auto-import) - use Composition API and others directly
 
 - 🖨 Static-site generation (SSG) via [vite-ssg](https://github.com/antfu/vite-ssg)
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 7b209fa..da7cbe7 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -45,6 +45,8 @@
 
 - 🔥 使用 [新的 `<script setup>` 语法](https://github.com/vuejs/rfcs/pull/227)
 
+- 🤙🏻 默认开启 [响应性语法糖](https://vuejs.org/guide/extras/reactivity-transform.html) 
+
 - 📥 [API 自动加载](https://github.com/antfu/unplugin-auto-import) - 直接使用 Composition API 无需引入
 
 - 🖨 使用 [vite-ssg](https://github.com/antfu/vite-ssg) 进行服务端生成 (SSG)
diff --git a/src/auto-imports.d.ts b/src/auto-imports.d.ts
index 51cb267..0e0212f 100644
--- a/src/auto-imports.d.ts
+++ b/src/auto-imports.d.ts
@@ -1,6 +1,13 @@
 // Generated by 'unplugin-auto-import'
 // We suggest you to commit this file into source control
 declare global {
+  const $: typeof import('vue/macros')['$']
+  const $$: typeof import('vue/macros')['$$']
+  const $computed: typeof import('vue/macros')['$computed']
+  const $customRef: typeof import('vue/macros')['$customRef']
+  const $ref: typeof import('vue/macros')['$ref']
+  const $shallowRef: typeof import('vue/macros')['$shallowRef']
+  const $toRef: typeof import('vue/macros')['$toRef']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
   const computed: typeof import('vue')['computed']
diff --git a/src/pages/index.vue b/src/pages/index.vue
index e6aa99a..5c52732 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -2,12 +2,12 @@
 import { useUserStore } from '~/stores/user'
 
 const user = useUserStore()
-const name = ref(user.savedName)
+const name = $ref(user.savedName)
 
 const router = useRouter()
 const go = () => {
-  if (name.value)
-    router.push(`/hi/${encodeURIComponent(name.value)}`)
+  if (name)
+    router.push(`/hi/${encodeURIComponent(name)}`)
 }
 
 const { t } = useI18n()
diff --git a/tsconfig.json b/tsconfig.json
index d74936d..644d40a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,6 +15,7 @@
     "forceConsistentCasingInFileNames": true,
     "types": [
       "vite/client",
+      "vue/ref-macros",
       "vite-plugin-pages/client",
       "vite-plugin-vue-layouts/client"
     ],
diff --git a/vite.config.ts b/vite.config.ts
index 9d3e3d7..8afdcc8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -25,6 +25,7 @@ export default defineConfig({
   plugins: [
     Vue({
       include: [/\.vue$/, /\.md$/],
+      reactivityTransform: true,
     }),
 
     // https://github.com/hannoeru/vite-plugin-pages
@@ -41,6 +42,7 @@ export default defineConfig({
         'vue',
         'vue-router',
         'vue-i18n',
+        'vue/macros',
         '@vueuse/head',
         '@vueuse/core',
       ],