[pull] indonesian from master (#31)

* fix: fixed custom directives migration guide

* Update the GitHub repo link to `vue-next` (vuejs#672)

* Update introduction.md (vuejs#673)

* Improve formatting of teleport.md (vuejs#674)

This switches a link to using VideoLesson, which should make
it look a lot better. It also fixes a small punctuation typo.

* Fix a typo (vuejs#675)

* Add inject example to reactive section of docs (vuejs#677)

This example might come in handy for users that are yet to read on `Computed and Watch` in the documentation so they know that the properties they're making reactive using `computed` is available under `property.value` and not `property`.

* Fix: typo in global-api-treeshaking (vuejs#678)

* fix: increase header depth and tweak wording in transitions-overview.md (vuejs#679)

* fix: add two migration pages to the sidebar index (vuejs#680)

* fix: correct two examples of using h with components and slots (vuejs#681)

Co-authored-by: NataliaTepluhina <[email protected]>
Co-authored-by: YuLe <[email protected]>
Co-authored-by: Alexander Sokolov <[email protected]>
Co-authored-by: Aris Merchant <[email protected]>
Co-authored-by: Kid <[email protected]>
Co-authored-by: Timi Omoyeni <[email protected]>
Co-authored-by: Kushal Niroula <[email protected]>
Co-authored-by: skirtle <[email protected]>

Author: 9 people

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/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/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/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/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: