remove use of reactivity transform

Author: yyx990803

Diff for: .vitepress/config.ts

@@ -687,9 +687,5 @@ export default defineConfigWithTheme<ThemeConfig>({
     json: {
       stringify: true
     }
-  },
-
-  vue: {
-    reactivityTransform: true
   }
 })

Diff for: .vitepress/theme/components/Banner.vue

@@ -5,13 +5,15 @@
  * 2. uncomment and update BANNER_ID in ../../inlined-scripts/restorePreferences.ts
  * 3. update --vt-banner-height if necessary
  */
+import { ref } from 'vue'
+
+const open = ref(true)
 
-let open = $ref(true)
 /**
  * Call this if the banner is dismissible
  */
 function dismiss() {
-  open = false
+  open.value = false
   document.documentElement.classList.add('banner-dismissed')
   localStorage.setItem(`vue-docs-banner-${__VUE_BANNER_ID__}`, 'true')
 }

Diff for: .vitepress/theme/components/PreferenceSwitch.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { VTSwitch, VTIconChevronDown } from '@vue/theme'
 import { useRoute } from 'vitepress'
-import { inject, Ref } from 'vue'
+import { ref, computed, inject, Ref } from 'vue'
 import {
   preferCompositionKey,
   preferComposition,
@@ -10,15 +10,15 @@ import {
 } from './preferences'
 
 const route = useRoute()
-const show = $computed(() =>
+const show = computed(() =>
   /^\/(guide|tutorial|examples|style-guide)\//.test(route.path)
 )
-const showSFC = $computed(() => !/^\/guide|style-guide/.test(route.path))
+const showSFC = computed(() => !/^\/guide|style-guide/.test(route.path))
 
-let isOpen = $ref(true)
+let isOpen = ref(true)
 
 const toggleOpen = () => {
-  isOpen = !isOpen
+  isOpen.value = !isOpen.value
 }
 
 const removeOutline = (e: Event) => {

Diff for: .vitepress/theme/components/SponsorsGroup.vue

@@ -1,29 +1,34 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import { SponsorData, data, base, load } from './sponsors'
 
 type Placement = 'aside' | 'page' | 'landing'
 
-const { tier, placement = 'aside' } = defineProps<{
-  tier: keyof SponsorData
-  placement?: Placement
-}>()
+const props = withDefaults(
+  defineProps<{
+    tier: keyof SponsorData
+    placement?: Placement
+  }>(),
+  {
+    placement: 'aside'
+  }
+)
 
-let container = $ref<HTMLElement>()
-let visible = $ref(false)
+const container = ref<HTMLElement>()
+const visible = ref(false)
 
 onMounted(async () => {
   // only render when entering view
   const observer = new IntersectionObserver(
     (entries) => {
       if (entries[0].isIntersecting) {
-        visible = true
+        visible.value = true
         observer.disconnect()
       }
     },
     { rootMargin: '0px 0px 300px 0px' }
   )
-  observer.observe(container!)
+  observer.observe(container.value!)
   onUnmounted(() => observer.disconnect())
 
   // load data
@@ -38,7 +43,7 @@ const eventMap: Record<Placement, string> = {
 }
 
 function track(interest?: boolean) {
-  fathom.trackGoal(interest ? `Y2BVYNT2` : eventMap[placement], 0)
+  fathom.trackGoal(interest ? `Y2BVYNT2` : eventMap[props.placement], 0)
 }
 </script>
 

Diff for: .vitepress/theme/components/VueJobs.vue

@@ -1,8 +1,10 @@
 <script lang="ts">
+import { ref } from 'vue'
+
 // shared data across instances so we load only once
 const base = 'https://app.vuejobs.com/feed/vuejs/docs?format=json'
 
-let items = $ref<Jobs[]>([])
+const items = ref<Jobs[]>([])
 
 type Jobs = {
   organization: Organization
@@ -21,19 +23,19 @@ type Organization = {
 <script setup lang="ts">
 import { onMounted, computed } from 'vue'
 
-let vuejobs = $ref<HTMLElement>()
-
 const openings = computed(() =>
-  items.sort(() => 0.5 - Math.random()).slice(0, 2)
+  items.value.sort(() => 0.5 - Math.random()).slice(0, 2)
 )
 
 onMounted(async () => {
-  if (!items.length) items = (await (await fetch(`${base}`)).json()).data
+  if (!items.value.length) {
+    items.value = (await (await fetch(`${base}`)).json()).data
+  }
 })
 </script>
 
 <template>
-  <div class="vuejobs-wrapper" ref="vuejobs">
+  <div class="vuejobs-wrapper">
     <div class="vj-container">
       <a
         class="vj-item"
@@ -45,15 +47,17 @@ onMounted(async () => {
         <div class="vj-company-logo">
           <img
             :src="job.organization.avatar"
-            :alt="`Logo for ${job.organization.name}`" />
+            :alt="`Logo for ${job.organization.name}`"
+          />
         </div>
         <div
           style="
             overflow: hidden;
             display: flex;
             flex-direction: column;
             justify-content: center;
-          ">
+          "
+        >
           <div class="vj-job-title">{{ job.title }}</div>
           <div class="vj-job-info">
             {{ job.organization.name }} <span>· </span>

Diff for: .vitepress/theme/components/VueMasteryModal.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { watch } from 'vue'
+import { ref, watch } from 'vue'
 
 const VIDEO_SOURCE = 'https://player.vimeo.com/video/647441538?autoplay=1'
-let showWhyVue: boolean = $ref(false)
+const showWhyVue = ref(false)
 
 watch(
   () => showWhyVue,

Diff for: env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="vitepress/client" />
-/// <reference types="vue/macros-global" />
 
 declare module '@vue/theme/config' {
   import { UserConfig } from 'vitepress'

Diff for: src/about/releases.md

@@ -3,13 +3,13 @@ outline: deep
 ---
 
 <script setup>
-import { onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 
-let version = $ref()
+const version = ref()
 
 onMounted(async () => {
   const res = await fetch('https://api.github.com/repos/vuejs/core/releases?per_page=1')
-  version = (await res.json())[0].name
+  version.value = (await res.json())[0].name
 })
 </script>
 

Diff for: src/guide/built-ins/keep-alive-demos/CompA.vue

@@ -1,5 +1,6 @@
 <script setup>
-let count = $ref(0)
+import { ref } from 'vue'
+const count = ref(0)
 </script>
 
 <template>

Diff for: src/guide/built-ins/keep-alive-demos/CompB.vue

@@ -1,5 +1,6 @@
 <script setup>
-let msg = $ref('')
+import { ref } from 'vue'
+const msg = ref('')
 </script>
 
 <template>

Diff for: src/guide/built-ins/keep-alive-demos/SwitchComponent.vue

@@ -1,10 +1,11 @@
 <script setup>
+import { shallowRef } from 'vue'
 import CompA from './CompA.vue'
 import CompB from './CompB.vue'
 
-let current = $shallowRef(CompA)
+const current = shallowRef(CompA)
 
-const { useKeepAlive } = defineProps({ useKeepAlive: Boolean })
+defineProps({ useKeepAlive: Boolean })
 </script>
 
 <template>

Diff for: src/guide/built-ins/teleport.md

@@ -116,7 +116,8 @@ The `to` target of `<Teleport>` expects a CSS selector string or an actual DOM n
 You can click the button below and inspect the `<body>` tag via your browser's devtools:
 
 <script setup>
-let open = $ref(false)
+import { ref } from 'vue'
+const open = ref(false)
 </script>
 
 <div class="demo">

Diff for: src/guide/built-ins/transition-demos/Basic.vue

@@ -1,5 +1,6 @@
 <script setup>
-let show = $ref(true)
+import { ref } from 'vue'
+const show = ref(true)
 </script>
 
 <template>

Diff for: src/guide/built-ins/transition-demos/BetweenComponents.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { h } from 'vue'
+import { h, ref } from 'vue'
 
 const CompA = () => h('div', 'Component A')
 const CompB = () => h('div', 'Component B')
 
-let activeComponent = $ref(CompA)
+const activeComponent = ref(CompA)
 </script>
 
 <template>

Diff for: src/guide/built-ins/transition-demos/BetweenElements.vue

@@ -1,7 +1,9 @@
 <script setup>
-const { mode } = defineProps(['mode'])
+import { ref } from 'vue'
 
-let docState = $ref('saved')
+defineProps(['mode'])
+
+const docState = ref('saved')
 </script>
 
 <template>

Diff for: src/guide/built-ins/transition-demos/CssAnimation.vue

@@ -1,5 +1,6 @@
 <script setup>
-let show = $ref(true)
+import { ref } from 'vue'
+const show = ref(true)
 </script>
 
 <template>

Diff for: src/guide/built-ins/transition-demos/JsHooks.vue

@@ -1,7 +1,8 @@
 <script setup>
+import { ref } from 'vue'
 import gsap from 'gsap'
 
-let show = $ref(true)
+const show = ref(true)
 
 function onBeforeEnter(el) {
   gsap.set(el, {

Diff for: src/guide/built-ins/transition-demos/ListMove.vue

@@ -1,17 +1,18 @@
 <script setup>
-let items = $ref([1, 2, 3, 4, 5])
-let nextNum = items.length + 1
+import { ref } from 'vue'
+const items = ref([1, 2, 3, 4, 5])
+let nextNum = items.value.length + 1
 
 function add() {
-  items.splice(randomIndex(), 0, nextNum++)
+  items.value.splice(randomIndex(), 0, nextNum++)
 }
 
 function remove() {
-  items.splice(randomIndex(), 1)
+  items.value.splice(randomIndex(), 1)
 }
 
 function randomIndex() {
-  return Math.floor(Math.random() * items.length)
+  return Math.floor(Math.random() * items.value.length)
 }
 
 function shuffle(array) {

Diff for: src/guide/built-ins/transition-demos/ListStagger.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { ref, computed } from 'vue'
 import gsap from 'gsap'
 
 const list = [
@@ -9,9 +10,9 @@ const list = [
   { msg: 'Kung Fury' }
 ]
 
-let query = $ref('')
+const query = ref('')
 
-const computedList = $computed(() => {
+const computedList = computed(() => {
   return list.filter((item) => item.msg.toLowerCase().includes(query))
 })
 

Diff for: src/guide/built-ins/transition-demos/NestedTransitions.vue

@@ -1,5 +1,6 @@
 <script setup>
-let show = $ref(true)
+import { ref } from 'vue'
+const show = ref(true)
 </script>
 
 <template>

Diff for: src/guide/built-ins/transition-demos/SlideFade.vue

@@ -1,5 +1,6 @@
 <script setup>
-let show = $ref(true)
+import { ref } from 'vue'
+const show = ref(true)
 </script>
 
 <template>

Diff for: src/guide/essentials/reactivity-fundamentals.md

@@ -573,28 +573,3 @@ export default {
 ```
 
 </div>
-
-<div class="composition-api">
-
-## Reactivity Transform <sup class="vt-badge experimental" /> \*\* {#reactivity-transform}
-
-Having to use `.value` with refs is a drawback imposed by the language constraints of JavaScript. However, with compile-time transforms we can improve the ergonomics by automatically appending `.value` in appropriate locations. Vue provides a compile-time transform that allows us to write the earlier "counter" example like this:
-
-```vue
-<script setup>
-let count = $ref(0)
-
-function increment() {
-  // no need for .value
-  count++
-}
-</script>
-
-<template>
-  <button @click="increment">{{ count }}</button>
-</template>
-```
-
-You can learn more about [Reactivity Transform](/guide/extras/reactivity-transform.html) in its dedicated section. Do note that it is currently still experimental and may change before being finalized.
-
-</div>

Diff for: src/guide/extras/demos/Colors.vue

@@ -1,7 +1,10 @@
 <script setup>
-let x = $ref(0)
+import { ref } from 'vue'
+
+const x = ref(0)
+
 function onMousemove(e) {
-  x = e.clientX
+  x.value = e.clientX
 }
 </script>