更新のあった差分の翻訳 (#444)

* docs: link directly to equivalent pages in translations

vuejs/docs@883b753

* Add TypeScript example for event handling

vuejs/docs@2e20116

* docs: elaborate on what can be included in the createApp root props

vuejs/docs@9554a83

* add an any and a union type example for typescript prop annotation

vuejs/docs@4dc940e

* fix: code style in reactivity-computed-watchers.md

vuejs/docs@fd21397

* docs: extra examples of migrating keyCode modifiers

vuejs/docs@afc2a95

* docs: add various improvements to the Events API migration guide

vuejs/docs@d9430c2

* docs: translate new typescript example

* docs: translate about createApp root props

* docs: translate event api migration guide

* docs: translate keycode modifier migration guide

* fix: link error

vuejs/docs@dd2bf86

Author: naokie

src/.vuepress/config.js

@@ -423,23 +423,28 @@ module.exports = {
           // Translation maintainers: Please include the link below to the English documentation
           {
             text: 'English',
-            link: 'https://v3.vuejs.org/'
+            link: 'https://v3.vuejs.org/',
+            isTranslation: true
           },
           {
             text: '中文',
-            link: 'https://v3.cn.vuejs.org/'
+            link: 'https://v3.cn.vuejs.org/',
+            isTranslation: true
           },
           {
             text: '한국어',
-            link: 'https://v3.ko.vuejs.org/'
+            link: 'https://v3.ko.vuejs.org/',
+            isTranslation: true
           },
           // {
-          //  text: '日本語',
-          //  link: 'https://v3.ja.vuejs.org/'
+          //   text: '日本語',
+          //   link: 'https://v3.ja.vuejs.org/',
+          //   isTranslation: true
           // },
           {
             text: 'Русский',
-            link: 'https://v3.ru.vuejs.org/'
+            link: 'https://v3.ru.vuejs.org/ru/',
+            isTranslation: true
           },
           {
             text: 'その他の翻訳',

src/.vuepress/theme/components/NavLink.vue

@@ -22,8 +22,26 @@
 </template>
 
 <script>
+import Vue from 'vue'
 import { isExternal, isMailto, isTel, ensureExt } from '../util'
 
+const pageLocation = Vue.observable({ path: '/' })
+
+let initPath = () => {
+  initPath = () => {}
+
+  const updatePath = () => {
+    pageLocation.path = location.pathname
+  }
+
+  updatePath()
+
+  // There is no event for detecting navigation but these cover most cases
+  for (const event of ['focusin', 'scroll', 'mouseover', 'keydown']) {
+    window.addEventListener(event, updatePath)
+  }
+}
+
 export default {
   name: 'NavLink',
 
@@ -35,7 +53,13 @@ export default {
 
   computed: {
     link () {
-      return ensureExt(this.item.link)
+      let link = ensureExt(this.item.link)
+
+      if (this.item.isTranslation) {
+        link = link.replace(/\/$/, '') + pageLocation.path
+      }
+
+      return link
     },
 
     exact () {
@@ -68,7 +92,7 @@ export default {
     },
 
     rel () {
-      if (this.isNonHttpURI) {
+      if (this.isNonHttpURI || this.item.isTranslation) {
         return null
       }
       if (this.item.rel) {
@@ -82,6 +106,10 @@ export default {
     focusoutAction () {
       this.$emit('focusout')
     }
+  },
+
+  mounted () {
+    initPath()
   }
 }
 </script>

src/.vuepress/theme/layouts/404.vue

@@ -3,7 +3,13 @@
     <div class="theme-default-content">
       <h1>404</h1>
 
-      <blockquote>{{ getMsg() }}</blockquote>
+      <blockquote>
+        <p>Whoops! This page doesn't exist.</p>
+      </blockquote>
+
+      <p v-show="isTranslation">
+        New pages are added to the documentation all the time. This page might not be included in all of the translations yet.
+      </p>
 
       <RouterLink to="/">
         Take me home.
@@ -13,17 +19,22 @@
 </template>
 
 <script>
-const msgs = [
-  `There's nothing here.`,
-  `How did we get here?`,
-  `That's a Four-Oh-Four.`,
-  `Looks like we've got some broken links.`
-]
+import { repos } from '../../components/guide/contributing/translations-data.js'
 
 export default {
-  methods: {
-    getMsg () {
-      return msgs[Math.floor(Math.random() * msgs.length)]
+  data () {
+    return {
+      isTranslation: false
+    }
+  },
+
+  mounted () {
+    const toOrigin = url => (String(url).match(/https?:\/\/[^/]+/) || [])[0]
+    const referrer = toOrigin(document.referrer)
+
+    // Did we get here from a translation?
+    if (referrer && referrer !== location.origin && repos.some(({ url }) => toOrigin(url) === referrer)) {
+      this.isTranslation = true
     }
   }
 }

src/api/global-api.md

@@ -63,6 +63,8 @@ const app = createApp(
 </div>
 ```
 
+ルートプロパティは VNode を作成するとき [`h`](#h) に渡されるのと同じように、未加工のプロパティです。コンポーネントプロパティに加えて、ルートコンポーネントに適用される属性やイベントリスナも含めることができます。
+
 ### 型定義
 
 ```ts

src/guide/migration/events-api.md

@@ -7,46 +7,46 @@ badges:
 
 ## 概要
 
-インスタンスメソッド `$on`、`$off`、`$once` は削除されました。アプリケーションインスタンスはイベントエミッタインタフェースを実装しなくなりました。
+インスタンスメソッド `$on`、`$off`、`$once` は削除されました。コンポーネントインスタンスはイベントエミッタインタフェースを実装しなくなりました。
 
 ## 2.x での構文
 
-2.x では、Vue インスタンスを使用して、イベントエミッタ API (`$on`、`$off`、`$once`) を介して強制的に接続されたハンドラをトリガすることができました。これは、アプリケーション全体で使用されるグローバルイベントリスナーを作成するための _イベントハブ_ を作るために使用されました。
+2.x では、Vue インスタンスを使用して、イベントエミッタ API (`$on`、`$off`、`$once`) を介して強制的に接続されたハンドラをトリガすることができました。これは、アプリケーション全体で使用されるグローバルイベントリスナーを作成するための _イベントバス_ を作るために使用できました。
 
 ```js
-// eventHub.js
+// eventBus.js
 
-const eventHub = new Vue()
+const eventBus = new Vue()
 
-export default eventHub
+export default eventBus
 ```
 
 ```js
 // ChildComponent.vue
-import eventHub from './eventHub'
+import eventBus from './eventBus'
 
 export default {
   mounted() {
-    // eventHub リスナーの追加
-    eventHub.$on('custom-event', () => {
+    // eventBus リスナーの追加
+    eventBus.$on('custom-event', () => {
       console.log('Custom event triggered!')
     })
   },
   beforeDestroy() {
-    // eventHub リスナーの削除
-    eventHub.$off('custom-event')
+    // eventBus リスナーの削除
+    eventBus.$off('custom-event')
   },
 }
 ```
 
 ```js
 // ParentComponent.vue
-import eventHub from './eventHub'
+import eventBus from './eventBus'
 
 export default {
   methods: {
     callGlobalCustomEvent() {
-      eventHub.$emit('custom-event') // ChildComponent がマウントされている場合、コンソールにメッセージが表示されます。
+      eventBus.$emit('custom-event') // ChildComponent がマウントされている場合、コンソールにメッセージが表示されます。
     },
   },
 }
@@ -58,26 +58,47 @@ export default {
 
 ## 移行の戦略
 
+[移行ビルドのフラグ: `INSTANCE_EVENT_EMITTER`](migration-build.html#compat-の設定)
+
 Vue 3 では、これらの API を使用して、コンポーネント内からコンポーネント自身が発行したイベントを購読することはできなくなりました。そのユースケースのための移行パスはありません。
 
-ただし、EventHub (イベントハブ) パターンは、Event Emitter (イベントエミッタ) インタフェースを実装した外部ライブラリを使用することで置き換えることができます。例えば、[mitt](https://github.com/developit/mitt) や [tiny-emitter](https://github.com/scottcorgan/tiny-emitter) などです。
+### ルートコンポーネントのイベント
+
+静的なイベントリスナは `createApp` にプロパティとして渡すことで、ルートコンポーネントに追加することができます:
+
+```js
+createApp(App, {
+  // 'expand' イベントを待機する
+  onExpand() {
+    console.log('expand')
+  }
+})
+```
+
+### Event Bus
+
+Event Bus (イベントバス) パターンは、Event Emitter (イベントエミッタ) インタフェースを実装した外部ライブラリを使用することで置き換えることができます。例えば、[mitt](https://github.com/developit/mitt) や [tiny-emitter](https://github.com/scottcorgan/tiny-emitter) などです。
 
 例:
 
 ```js
-// eventHub.js
+// eventBus.js
 import emitter from 'tiny-emitter/instance'
 
 export default {
   $on: (...args) => emitter.on(...args),
   $once: (...args) => emitter.once(...args),
   $off: (...args) => emitter.off(...args),
-  $emit: (...args) => emitter.emit(...args),
+  $emit: (...args) => emitter.emit(...args)
 }
 ```
 
 これは Vue 2 と同じような Event Emitter API を提供します。
 
-これらのメソッドは、Vue 3 の将来の互換ビルドでもサポートされる可能性があります。
+ほとんどの場合、コンポーネント同士の通信にグローバル Event Bus を使うことには反対します。短期的にはもっとも単純な解決策であることが多いですが、長期的にはいつもメンテナンスの頭痛の種になることが証明されています。状況に応じて、Event Bus を使う以外のいろいろな方法があります。:
 
-[移行ビルドのフラグ: `INSTANCE_EVENT_EMITTER`](migration-build.html#compat-の設定)
+* [プロパティ](/guide/component-basics.html#プロパティを用いた子コンポーネントへのデータの受け渡し) と [イベント](/guide/component-basics.html#子コンポーネントのイベントを購読する) は、親子間の通信をする最初の選択肢です。兄弟は親を介して通信できます。
+* [Provide と Inject](/guide/component-provide-inject.html) はコンポーネントと、そのスロットのコンテンツとの通信を可能にします。これはいつも一緒に使われる緊密に結合されたコンポーネントに有効です。
+* `provide`/`inject` はコンポーネント間の距離が離れている通信にも使えます。プロパティを必要としないコンポーネントを何階層にもわたって、プロパティを渡す必要のある「Prop Drilling（プロパティのバケツリレーのこと）」を回避するのに役立ちます。
+* Prop Drilling はスロットを使うようにリファクタリングして回避することもできます。中間のコンポーネントがプロパティを必要としない場合、それは関心の分離に問題があることを示しているかもしれません。そのコンポーネントにスロットを導入することで、親はコンテンツを直接作成することができて、中間のコンポーネントが関与することなくプロパティを渡すことができます。
+* [Vuex](https://next.vuex.vuejs.org/) のような [グローバルな状態管理](/guide/state-management.html) もあります。

src/guide/migration/introduction.md

@@ -53,7 +53,7 @@ Vue 3 で注目すべきいくつかの新機能の次のとおりです。
 - [Fragments](/guide/migration/fragments.html)
 - [Emits Component Option](/guide/component-custom-events.html)
 - カスタムレンダラを作るための [`@vue/runtime-core` の `createRenderer` API](https://github.com/vuejs/vue-next/tree/master/packages/runtime-core)
-- [SFC での Composition API の Syntax Sugar (`<script setup>`)](https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md) <Badge text="experimental" type="warning" />
+- [SFC での Composition API の Syntax Sugar (`<script setup>`)](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md) <Badge text="experimental" type="warning" />
 - [SFC でのステートドリブンな CSS Variables (`<style>` の `v-bind`)](https://github.com/vuejs/rfcs/blob/style-vars-2/active-rfcs/0000-sfc-style-variables.md) <Badge text="experimental" type="warning" />
 - [SFC での `<style scoped>` は、グローバルルールまたはスロットされたコンテンツのみを対象とするルールを含めることができるようになった](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md)
 - [Suspense](/guide/migration/suspense.html) <Badge text="experimental" type="warning" />

src/guide/migration/keycode-modifiers.md

@@ -46,7 +46,10 @@ Vue.config.keyCodes = {
 
 ```html
 <!-- Vue 3 の v-on でキー修飾子を利用する場合 -->
-<input v-on:keyup.delete="confirmDelete" />
+<input v-on:keyup.page-down="nextPage">
+
+<!-- Matches both q and Q -->
+<input v-on:keypress.q="quit">
 ```
 
 `config.keyCodes` の利用も同様の理由で非推奨となり、サポートされなくなりました。
@@ -55,6 +58,14 @@ Vue.config.keyCodes = {
 
 キーコードを利用している場合は、ケバブケースでの命名に変更することを推奨します。
 
+一部の句読点のキーは、文字のまま含めることができます。例えば、`,` キーでは:
+
+```html
+<input v-on:keypress.,="commaPress">
+```
+
+構文の制限のため `"`、`'`、`/`、`=`、`>`、`.` といった特定の文字はマッチしません。それらの文字については、代わりにリスナの中で `event.key` をチェックする必要があります。
+
 [移行ビルドのフラグ:](migration-build.html#compat-の設定)
 
 - `CONFIG_KEY_CODES`