[pull] indonesian from master

src/.vuepress/config.js

@@ -126,6 +126,7 @@ const sidebar = {
         '/guide/migration/async-components',
         '/guide/migration/attribute-coercion',
         '/guide/migration/attrs-includes-class-style',
+        '/guide/migration/children',
         '/guide/migration/custom-directives',
         '/guide/migration/custom-elements-interop',
         '/guide/migration/data-option',
@@ -148,7 +149,8 @@ const sidebar = {
         '/guide/migration/v-on-native-modifier-removed',
         '/guide/migration/v-model',
         '/guide/migration/v-if-v-for',
-        '/guide/migration/v-bind'
+        '/guide/migration/v-bind',
+        '/guide/migration/watch'
       ]
     },
     {

src/README.md

@@ -11,7 +11,7 @@ actionButtons:
   - text: Get Started
     link: /guide/introduction
   - text: GitHub
-    link: https://github.com/vuejs/vue
+    link: https://github.com/vuejs/vue-next
     extraClass: github grey
     icon: fa fa-github
     target: _blank
@@ -30,7 +30,7 @@ footer: |
   Copyright © 2014-2020 Evan You
 socialIcons:
   - type: GitHub
-    link: https://github.com/vuejs/vue
+    link: https://github.com/vuejs/vue-next
   - type: Twitter
     link: https://twitter.com/vuejs
   - type: Medium

src/guide/component-provide-inject.md

@@ -107,6 +107,13 @@ app.component('todo-list', {
     }
   }
 })
+
+app.component('todo-list-statistics', {
+  inject: ['todoLength'],
+  created() {
+    console.log(`Injected property: ${this.todoLength.value}`) // > Injected property: 5
+  }
+})
 ```
 
-In this, any change to `todos.length` will be reflected correctly in the components, where `todoLength` is injected. Read more about `reactive` provide/inject in the [Composition API section](composition-api-provide-inject.html#reactivity)
+In this, any change to `todos.length` will be reflected correctly in the components, where `todoLength` is injected. Read more about `computed` in the [Computed and Watch section](reactivity-computed-watchers.html#computed-values) and `reactive` provide/inject in the [Composition API section](composition-api-provide-inject.html#reactivity).

src/guide/contributing/translations.md

@@ -1,6 +1,6 @@
 # Translations
 
-Vue has spread across the globe, with the core team being in at least half a dozen different timezones. [The forum](https://forum.vuejs.org/) includes 7 languages and counting and many of our docs have [actively-maintained translations](https://github.com/vuejs?utf8=%E2%9C%93&q=vuejs.org). We'are very proud of Vue's international reach, but we can do even better.
+Vue has spread across the globe, with the core team being in at least half a dozen different timezones. [The forum](https://forum.vuejs.org/) includes 7 languages and counting and many of our docs have [actively-maintained translations](https://github.com/vuejs?utf8=%E2%9C%93&q=vuejs.org). We're very proud of Vue's international reach, but we can do even better.
 
 ## Can we start translating Vue 3 docs?
 

src/guide/migration/custom-directives.md

@@ -10,7 +10,6 @@ badges:
 Here is a quick summary of what has changed:
 
 - API has been renamed to better align with component lifecycle
-- Custom directives will be controlled by child component via `v-bind="$attrs"`
 
 For more information, read on!
 
@@ -103,26 +102,6 @@ mounted(el, binding, vnode) {
 }
 ```
 
-## Implementation Details
-
-In Vue 3, we're now supporting fragments, which allow us to return more than one DOM node per component. You can imagine how handy that is for something like a component with multiple `<li>` elements or the children elements of a table:
-
-```html
-<template>
-  <li>Hello</li>
-  <li>Vue</li>
-  <li>Devs!</li>
-</template>
-```
-
-As wonderfully flexible as this is, we can potentially encounter a problem with a custom directive that could have multiple root nodes.
-
-As a result, custom directives are now included as part of a virtual DOM node’s data. When a custom directive is used on a component, hooks are passed down to the component as extraneous props and end up in `this.$attrs`.
-
-This also means it's possible to directly hook into an element's lifecycle like this in the template, which can be handy when a custom directive is too involved:
-
-```html
-<div @vnodeMounted="myHook" />
-```
-
-This is consistent with the attribute fallthrough behavior, so when a child component uses `v-bind="$attrs"` on an inner element, it will apply any custom directives used on it as well.
+:::warning
+With [fragments](/guide/migration/fragments.html#overview) support, components can potentially have more than one root nodes. When applied to a multi-root component, directive will be ignored and the warning will be thrown.
+:::

src/guide/migration/global-api-treeshaking.md

@@ -36,7 +36,7 @@ test('an async feature', async () => {
 
 `Vue.nextTick()` is a global API exposed directly on a single Vue object – in fact, the instance method `$nextTick()` is just a handy wrapper around `Vue.nextTick()` with the callback’s `this` context automatically bound to the current instance for convenience.
 
-But what if you’ve never had to deal with manual DOM manipulation, nor are you using or testing async components in our app? Or, what if, for whatever reason, you prefer to use the good old `window.setTimeout()` instead? In such a case, the code for `nextTick()` will become dead code – that is, code that’s written but never used. And dead code is hardly a good thing, especially in our client-side context where every kilobyte matters.
+But what if you’ve never had to deal with manual DOM manipulation, nor are you using or testing async components in your app? Or, what if, for whatever reason, you prefer to use the good old `window.setTimeout()` instead? In such a case, the code for `nextTick()` will become dead code – that is, code that’s written but never used. And dead code is hardly a good thing, especially in our client-side context where every kilobyte matters.
 
 Module bundlers like [webpack](https://webpack.js.org/) support [tree-shaking](https://webpack.js.org/guides/tree-shaking/), which is a fancy term for “dead code elimination.” Unfortunately, due to how the code is written in previous Vue versions, global APIs like `Vue.nextTick()` are not tree-shakeable and will be included in the final bundle regardless of where they are actually used or not.
 

src/guide/migration/introduction.md

@@ -112,7 +112,7 @@ The following consists a list of breaking changes from 2.x:
 - [$on, $off and $once instance methods](/guide/migration/events-api.html)
 - [Filters](/guide/migration/filters.html)
 - [Inline templates attributes](/guide/migration/inline-template-attribute.html)
-- [`$children` intance property](/guide/migration/children.md)
+- [`$children` instance property](/guide/migration/children.md)
 - `$destroy` instance method. Users should no longer manually manage the lifecycle of individual Vue components.
 
 ## Supporting Libraries

src/guide/render-function.md

@@ -370,11 +370,15 @@ To pass slots to a child component using render functions:
 render() {
   // `<div><child v-slot="props"><span>{{ props.text }}</span></child></div>`
   return Vue.h('div', [
-    Vue.h('child', {}, {
+    Vue.h(
+      Vue.resolveComponent('child'),
+      {},
       // pass `slots` as the children object
       // in the form of { name: props => VNode | Array<VNode> }
-      default: (props) => Vue.h('span', props.text)
-    })
+      {
+        default: (props) => Vue.h('span', props.text)
+      }
+    )
   ])
 }
 ```
@@ -389,7 +393,9 @@ Vue.h(
   {
     level: 1
   },
-  [Vue.h('span', 'Hello'), ' world!']
+  {
+    default: () => [Vue.h('span', 'Hello'), ' world!']
+  }
 )
 ```
 

src/guide/teleport.md

@@ -1,6 +1,6 @@
 # Teleport
 
-<div class="vueschool"><a href="https://vueschool.io/lessons/vue-3-teleport?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to use teleport with Vue School">Learn how to use teleport with a free lesson on Vue School</a></div>
+<VideoLesson href="https://vueschool.io/lessons/vue-3-teleport?friend=vuejs" title="Learn how to use teleport with Vue School">Learn how to use teleport with a free lesson on Vue School</VideoLesson>
 
 Vue encourages us to build our UIs by encapsulating UI and related behavior into components. We can nest them inside one another to build a tree that makes up an application UI.
 
@@ -140,4 +140,4 @@ A common use case scenario would be a reusable `<Modal>` component of which ther
 </div>
 ```
 
-You can check `<teleport>` component options in the [API reference](../api/built-in-components.html#teleport)
+You can check `<teleport>` component options in the [API reference](../api/built-in-components.html#teleport).

src/guide/transitions-overview.md

@@ -72,9 +72,9 @@ Vue.createApp(Demo).mount('#demo')
 
 <common-codepen-snippet title="Create animation with a class" slug="ff45b91caf7a98c8c9077ad8ab539260" tab="css,result" :editable="false" :preview="false" />
 
-# Transitions with Style Bindings
+## Transitions with Style Bindings
 
-Some transition affects can be applied by interpolating values, for instance by binding a style to an element while an interaction occurs. Take this example for instance:
+Some transition effects can be applied by interpolating values, for instance by binding a style to an element while an interaction occurs. Take this example for instance:
 
 ```html
 <div id="demo">
@@ -152,7 +152,7 @@ You may also find that entrances look better with slightly more time than an exi
 
 ## Easing
 
-Easing is an important way to convey depth in an animation. One of the most common mistakes newcomers to animation have is to use `ease-in` for entrances, and `ease-out` for exits. You'll actually need the opposite.
+Easing is an important way to convey depth in an animation. One of the most common mistakes newcomers to animation make is to use `ease-in` for entrances, and `ease-out` for exits. You'll actually need the opposite.
 
 If we were to apply these states to a transition, it would look something like this: