remove use of reactivity transform (#1219)

.vitepress/config.ts

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

.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')
 }

.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) => {

.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>
 

.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>

.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,

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'

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>
 

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>

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>

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>

src/guide/built-ins/teleport.md

@@ -116,7 +116,8 @@ export default {
 下のボタンをクリックして、ブラウザーの devtools で `<body>` タグを検査できます:
 
 <script setup>
-let open = $ref(false)
+import { ref } from 'vue'
+const open = ref(false)
 </script>
 
 <div class="demo">

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>

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>

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>

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>

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, {

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) {

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))
 })
 

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>

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>

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}
-
-Ref で `.value` を使わなければならないのは、JavaScript の言語的な制約による欠点です。しかし、コンパイル時の変換 (ここでいうコンパイル時とは SFC を JavaScript コードへ変換する時) を利用すれば、適切な場所に自動的に `.value` を追加して人間工学を改善することができます。Vue はコンパイル時の変換を提供しており、先ほどの「カウンター」の例をこのように記述することができます。
-
-```vue
-<script setup>
-let count = $ref(0)
-
-function increment() {
- // ここでは .value が不要です
- count++
-}
-</script>
-
-<template>
- <button @click="increment">{{ count }}</button>
-</template>
-```
-
-[Reactivity Transform](/guide/extras/reactivity-transform.html) の詳細については、専用のセクションで説明されています。ただし、現在はまだ実験的なものであり、最終的に完成するまでに変更される可能性があることに注意してください。
-
-</div>

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>