Skip to content

Commit

Permalink
remove use of reactivity transform (#1219)
Browse files Browse the repository at this point in the history
  • Loading branch information
jay-es committed Mar 1, 2023
1 parent ce67118 commit 4136c1b
Show file tree
Hide file tree
Showing 32 changed files with 126 additions and 135 deletions.
4 changes: 0 additions & 4 deletions .vitepress/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -721,9 +721,5 @@ export default defineConfigWithTheme<ThemeConfig>({
json: {
stringify: true
}
},

vue: {
reactivityTransform: true
}
})
6 changes: 4 additions & 2 deletions .vitepress/theme/components/Banner.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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')
}
Expand Down
10 changes: 5 additions & 5 deletions .vitepress/theme/components/PreferenceSwitch.vue
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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) => {
Expand Down
25 changes: 15 additions & 10 deletions .vitepress/theme/components/SponsorsGroup.vue
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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>

Expand Down
20 changes: 12 additions & 8 deletions .vitepress/theme/components/VueJobs.vue
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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"
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions .vitepress/theme/components/VueMasteryModal.vue
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
1 change: 0 additions & 1 deletion env.d.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
/// <reference types="vitepress/client" />
/// <reference types="vue/macros-global" />

declare module '@vue/theme/config' {
import { UserConfig } from 'vitepress'
Expand Down
6 changes: 3 additions & 3 deletions src/about/releases.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
3 changes: 2 additions & 1 deletion src/guide/built-ins/keep-alive-demos/CompA.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script setup>
let count = $ref(0)
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
Expand Down
3 changes: 2 additions & 1 deletion src/guide/built-ins/keep-alive-demos/CompB.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script setup>
let msg = $ref('')
import { ref } from 'vue'
const msg = ref('')
</script>

<template>
Expand Down
5 changes: 3 additions & 2 deletions src/guide/built-ins/keep-alive-demos/SwitchComponent.vue
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
3 changes: 2 additions & 1 deletion src/guide/built-ins/teleport.md
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
3 changes: 2 additions & 1 deletion src/guide/built-ins/transition-demos/Basic.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script setup>
let show = $ref(true)
import { ref } from 'vue'
const show = ref(true)
</script>

<template>
Expand Down
4 changes: 2 additions & 2 deletions src/guide/built-ins/transition-demos/BetweenComponents.vue
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
6 changes: 4 additions & 2 deletions src/guide/built-ins/transition-demos/BetweenElements.vue
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
3 changes: 2 additions & 1 deletion src/guide/built-ins/transition-demos/CssAnimation.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script setup>
let show = $ref(true)
import { ref } from 'vue'
const show = ref(true)
</script>

<template>
Expand Down
3 changes: 2 additions & 1 deletion src/guide/built-ins/transition-demos/JsHooks.vue
Original file line number Diff line number Diff line change
@@ -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, {
Expand Down
11 changes: 6 additions & 5 deletions src/guide/built-ins/transition-demos/ListMove.vue
Original file line number Diff line number Diff line change
@@ -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) {
Expand Down
5 changes: 3 additions & 2 deletions src/guide/built-ins/transition-demos/ListStagger.vue
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<script setup>
import { ref, computed } from 'vue'
import gsap from 'gsap'
const list = [
Expand All @@ -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))
})
Expand Down
3 changes: 2 additions & 1 deletion src/guide/built-ins/transition-demos/NestedTransitions.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script setup>
let show = $ref(true)
import { ref } from 'vue'
const show = ref(true)
</script>

<template>
Expand Down
3 changes: 2 additions & 1 deletion src/guide/built-ins/transition-demos/SlideFade.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script setup>
let show = $ref(true)
import { ref } from 'vue'
const show = ref(true)
</script>

<template>
Expand Down
25 changes: 0 additions & 25 deletions src/guide/essentials/reactivity-fundamentals.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
7 changes: 5 additions & 2 deletions src/guide/extras/demos/Colors.vue
Original file line number Diff line number Diff line change
@@ -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>

Expand Down
Loading

1 comment on commit 4136c1b

@vercel
Copy link

@vercel vercel bot commented on 4136c1b Mar 1, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

docs-ja – ./

docs-ja-vuejs.vercel.app
docs-ja-git-main-vuejs.vercel.app
ja.vuejs.org
docs-ja-rose.vercel.app

Please sign in to comment.