Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(i18n-id): Provide Indonesian translation for migration guide - Part 5 #76

Merged
merged 3 commits into from
Dec 6, 2020
Merged

docs(i18n-id): Provide Indonesian translation for migration guide - Part 5 #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ba919fc
docs(i18n-id): Provide Indonesian translation for functional-componen…
Namchee Dec 1, 2020
74b9815
docs(i18n-id): Provide Indonesian translation for global-api-treeshaking
Namchee Dec 2, 2020
6cc4e70
docs(i18n-id): Provide Indonesian translation for global-api.md
Namchee Dec 3, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 34 additions & 34 deletions src/guide/migration/functional-components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,36 +3,36 @@ badges:
- breaking
---

# Functional Components <MigrationBadges :badges="$frontmatter.badges" />
# Komponen Fungsional <MigrationBadges :badges="$frontmatter.badges" />

## Overview
## Gambaran Umum

In terms of what has changed, at a high level:
Berikut merupakan gambaran umum tentang perubahan yang terjadi:

- Performance gains from 2.x for functional components are now negligible in 3.x, so we recommend just using stateful components
- Functional components can only be created using a plain function that receives `props` and `context` (i.e., `slots`, `attrs`, `emit`)
- **BREAKING:** `functional` attribute on single-file component (SFC) `<template>` is removed
- **BREAKING:** `{ functional: true }` option in components created by functions is removed
- Peningkatan performa komponen fungsional yang terdapat pada Vue versi 2.x dapat diabaikan pada Vue versi 3.x, sehingga kami menyarankan Anda untuk menggunakan komponen _stateful_.
- Komponen fungsional hanya dapat dibuat menggunakan sebuah fungsi biasa yang menerima `props` dan `context` (yang di dalamnya terdapat `slots`, `attrs`, dan `emit`) sebagai parameter.
- **MERUSAK** Atribut `fungsional` pada _tag_ `<template>` milik _single-file component_ (SFC) dihapus.
- **MERUSAK** Opsi `{ functional: true }` pada komponen yang dibuat dengan fungsi dihapus.

For more information, read on!
Lanjutkan membaca untuk informasi lebih lanjut.

## Introduction
## Pengenalan

In Vue 2, functional components had two primary use cases:
Pada Vue versi 2, komponen fungsional memiliki dua kasus penggunaan yaitu:

- as a performance optimization, because they initialized much faster than stateful components
- to return multiple root nodes
- sebagai sebuah bentuk optimisasi performa, karena komponen fungsional akan diinisialisasi lebih cepat dibandingkan dengan komponen _stateful_.
- agar dapat menghasilkan lebih dari satu _node_ utama.

However, in Vue 3, the performance of stateful components has improved to the point that the difference is negligible. In addition, stateful components now also include the ability to return multiple root nodes.
Namun, pada Vue versi 3, performa dari komponen _stateful_ telah ditingkatkan sehingga perbedaan performa antara komponen _stateful_ dan komponen fungsional dapat diabaikan. Sebagai tambahan, saat ini komponen _stateful_ juga sudah dapat menghasilkan lebih dari satu _node_ utama.

As a result, the only remaining use case for functional components is simple components, such as a component to create a dynamic heading. Otherwise, it is recommended to use stateful components as you normally would.
Sehingga, satu-satunya kasus penggunaan dari komponen fungsional adalah komponen-komponen sederhana, seperti sebuah komponen yang menghasilkan _heading_ yang dinamis. Selain itu, kami menyarankan Anda untuk menggunakan komponen _stateful_ seperti biasanya.

## 2.x Syntax
## Sintaks Vue versi 2.x

Using the `<dynamic-heading>` component, which is responsible for rendering out the appropriate heading (i.e., `h1`, `h2`, `h3`, etc.), this could have been written as a single-file component in 2.x as:
Pada komponen `<dynamic-heading>`, yang berfungsi untuk menghasilkan _heading_ yang sesuai (entah `h1`, `h2`, `h3`, dan lain-lain), komponen tersebut dapat ditulis dalam sebuah _single-file component_ pada Vue versi 2.x sebagai:

```js
// Vue 2 Functional Component Example
// Contoh komponen fungsional Vue versi 2
export default {
functional: true,
props: ['level'],
Expand All @@ -42,10 +42,10 @@ export default {
}
```

Or, for those who preferred the `<template>` in a single-file component:
Atau, bagi Anda yang lebih suka menggunakan `<template>` dalam _single-file component_:

```js
// Vue 2 Functional Component Example with <template>
// Contoh komponen fungsional Vue versi 2 menggunakan <template>
<template functional>
<component
:is="`h${props.level}`"
Expand All @@ -61,17 +61,17 @@ export default {
</script>
```

## 3.x Syntax
## Sintaks Vue versi 3.x

### Components Created by Functions
### Komponen yang Dibuat oleh Fungsi

Now in Vue 3, all functional components are created with a plain function. In other words, there is no need to define the `{ functional: true }` component option.
Sekarang pada Vue versi 3, seluruh komponen fungsional dibuat menggunakan sebuah fungsi biasa. Dengan kata lain, Anda tidak perlu untuk mendefinisikan `{ functional: true }` pada pengaturan komponen.

They will receive two arguments: `props` and `context`. The `context` argument is an object that contains a component's `attrs`, `slots`, and `emit` properties.
Fungsi tersebut akan menerima dua argumen: `props` dan `context`. Argumen `context` adalah sebuah objek yang memuat properti `attrs`, `slots`, dan `emit` untuk komponen tersebut.

In addition, rather than implicitly provide `h` in a `render` function, `h` is now imported globally.
Sebagai tambahan, dibandingkan dengan menyediakan `h` dalam fungsi `render` secara implisit, sekarang `h` akan diimpor secara global.

Using the previously mentioned example of a `<dynamic-heading>` component, here is how it looks now.
Mengacu pada komponen `<dynamic-heading>` sebelumnya, berikut merupakan cara penulisan komponen tersebut sekarang:

```js
import { h } from 'vue'
Expand All @@ -87,9 +87,9 @@ export default DynamicHeading

### Single File Components (SFCs)

In 3.x, the performance difference between stateful and functional components has been drastically reduced and will be insignificant in most use cases. As a result, the migration path for developers using `functional` on SFCs is to remove the attribute and rename all references of `props` to `$props` and `attrs` to `$attrs`.
Pada Vue versi 2.x, perbedaan performa antara komponen _stateful_ dan fungsional berkurang secara drastis dan tidak signifikan untuk sebagian besar kasus penggunaan. Sehingga, cara migrasi bagi pengembang yang menggunakan atribut `functional` pada SFC adalah dengan menghapus atribut tersebut dan menamai ulang segala acuan pada `props` menjadi `$props` dan `attrs` menjadi `$attrs`.

Using our `<dynamic-heading>` example from before, here is how it would look now.
Mengacu pada contoh `<dynamic-heading>` sebelumnya, berikut merupakan cara penulisan komponen tersebut sekarang:

```js{1}
<template>
Expand All @@ -106,14 +106,14 @@ export default {
</script>
```

The main differences are that:
Perbedaan utama dari kedua cara penulisan tersebut adalah:

1. `functional` attribute removed on `<template>`
1. `listeners` are now passed as part of `$attrs` and can be removed
1. Atribut `functional` dihapus dari `<template>`
1. Sekarang, `listeners` diteruskan sebagai bagian dari `$attrs` dan dapat dihapus

## Next Steps
## Langkah Selanjutnya

For more information on the usage of the new functional components and the changes to render functions in general, see:
Anda dapat memperoleh informasi lebih lanjut mengenai penggunaan komponen fungsional yang baru dan perubahan pada fungsi _render_ melalui:

- [Migration: Render Functions](/guide/migration/render-function-api.html)
- [Guide: Render Functions](/guide/render-function.html)
- [Migrasi: Fungsi Render](/guide/migration/render-function-api.html)
- [Panduan: Fungsi Render](/guide/render-function.html)
84 changes: 42 additions & 42 deletions src/guide/migration/global-api-treeshaking.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,119 +3,119 @@ badges:
- breaking
---

# Global API Treeshaking <MigrationBadges :badges="$frontmatter.badges" />
# Treeshaking API Global <MigrationBadges :badges="$frontmatter.badges" />

## 2.x Syntax
## Sintaks Vue versi 2.x

If you’ve ever had to manually manipulate DOM in Vue, you might have come across this pattern:
Apabila Anda pernah melakukan manipulasi DOM secara manual pada Vue, mungkin Anda pernah menggunakan pola berikut:

```js
import Vue from 'vue'

Vue.nextTick(() => {
// something DOM-related
// sesuatu yang berhubungan dengan DOM
})
```

Or, if you’ve been unit-testing an application involving [async components](/guide/component-dynamic-async.html), chances are you’ve written something like this:
Atau, apabila Anda pernah melakukan _unit testing_ pada sebuah aplikasi yang melibatakan [komponen asinkron](/guide/component-dynamic-async.html), kemungkinan Anda pernah menulis kode program seperti berikut:

```js
import { shallowMount } from '@vue/test-utils'
import { MyComponent } from './MyComponent.vue'

test('an async feature', async () => {
test('sebuah fitur asinkron', async () => {
const wrapper = shallowMount(MyComponent)

// execute some DOM-related tasks
// lakukan beberapa hal yang berkaitan dengan DOM

await wrapper.vm.$nextTick()

// run your assertions
// jalankan tuntutan Anda
})
```

`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.
`Vue.nextTick()` merupakan sebuah API global yang diekspos secara langsung pada sebuah objek Vue – nyatanya, _method_ `$nextTick` merupakan sebuah _wrapper_ untuk fungsi `Vue.nextTick()` dengan konteks `this` pada _callback_ yang diikat secara otomatis pada objek tempat fungsi tersebut dipanggil untuk mempermudah proses pengembangan.

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.
Tapi bagaimana bila Anda tidak pernah berurusan dengan manipulasi DOM secara manual, atau Anda tidak menggunakan atau menguji komponen asinkron pada aplikasi Anda? Atau bagaimana bila, dengan alasan tertentu, Anda lebih suka menggunakan `window.setTimeout()`? Dalam kasus tersebut, kode `nextTick()` akan menjadi kode mati – yang merupakan kode yang sudah ditulis namun tidak pernah dipakai. Ingat bahwa kode mati bukanlah sesuaty yang baik, khususnya dalam konteks sisi klien dimana setiap _kilobyte_ penting.

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.
_Module bundler_ seperti [webpack](https://webpack.js.org/) mendukung fitur [_tree-shaking_](https://webpack.js.org/guides/tree-shaking/), yang merupakan sebuah istilah untuk pemangkasan kode mati. Sayangnya, karena cara kode Vue ditulis pada versi sebelumnya, API global seperti `Vue.nextTick()` tidak dapat dipangkas dan tetap diikutsertakan pada kode akhir terlepas API tersebut digunakan atau tidak.

## 3.x Syntax
## Sintaks Vue versi 3.x

In Vue 3, the global and internal APIs have been restructured with tree-shaking support in mind. As a result, the global APIs can now only be accessed as named exports for the ES Modules build. For example, our previous snippets should now look like this:
Pada Vue versi 3, API global dan internal telah ditrusktur ulang supaya mendukung fitur _tree-shaking_. Sehingga, API global sekarang dapat diakses melalui _named export_ untuk pembangunan modul ES. Sebagai contoh, kode program di atas dapat ditulis ulang menjadi seperti berikut:

```js
import { nextTick } from 'vue'

nextTick(() => {
// something DOM-related
// sesuatu yang berkaitan dengan DOM
})
```

and
dan

```js
import { shallowMount } from '@vue/test-utils'
import { MyComponent } from './MyComponent.vue'
import { nextTick } from 'vue'

test('an async feature', async () => {
test('sebuah fitur asinkron', async () => {
const wrapper = shallowMount(MyComponent)

// execute some DOM-related tasks
// lakukan beberapa hal yang berkaitan dengan DOM

await nextTick()
await wrapper.vm.$nextTick()

// run your assertions
// jalankan tuntutan Anda
})
```

Calling `Vue.nextTick()` directly will now result in the infamous `undefined is not a function` error.
Memanggil `Vue.nextTick()` secara langsung sekarang akan menghasilkan galat `undefined is not a function`.

With this change, provided the module bundler supports tree-shaking, global APIs that are not used in a Vue application will be eliminated from the final bundle, resulting in an optimal file size.
Dengan perubahan tersebut, dengan catatan bahwa _bundler_ modul mendukung fitur _tree-shaking_, API global yang tidak digunakan pada aplikasi Vue akan dipangkas dari kode akhir, menghasilkan ukuran berkas yang optimal.

## Affected APIs
## API yang Terdampak

These global APIs in Vue 2.x are affected by this change:
Berikut merupakan API global pada Vue versi 2.x yang terdampak oleh perubahan tersebut:

- `Vue.nextTick`
- `Vue.observable` (replaced by `Vue.reactive`)
- `Vue.observable` (diganti dengan `Vue.reactive`)
- `Vue.version`
- `Vue.compile` (only in full builds)
- `Vue.set` (only in compat builds)
- `Vue.delete` (only in compat builds)
- `Vue.compile` (hanya pada distribusi Vue yang lengkap)
- `Vue.set` (hanya pada distribusi Vue yang ringkas)
- `Vue.delete` (hanya pada distribusi Vue yang ringkas)

## Internal Helpers
## Bantuan INternal

In addition to public APIs, many of the internal components/helpers are now exported as named exports as well. This allows the compiler to output code that only imports features when they are used. For example the following template:
Selain API publik, banyak komponen atau fungsi bantuan internal yang sekarang diekspor sebagai _named export_. Hal tersebut memungkinkan kompilator untuk menghasilkan kode program yang hanya mengimpor fitur yang dibutuhkan. Sebagai contoh, pada _template_ berikut:

```html
<transition>
<div v-show="ok">hello</div>
<div v-show="ok">halo</div>
</transition>
```

is compiled into something similar to the following:
akan dikompilasi menjadi kode berikut:

```js
import { h, Transition, withDirectives, vShow } from 'vue'

export function render() {
return h(Transition, [withDirectives(h('div', 'hello'), [[vShow, this.ok]])])
return h(Transition, [withDirectives(h('div', 'halo'), [[vShow, this.ok]])])
}
```

This essentially means the `Transition` component only gets imported when the application actually makes use of it. In other words, if the application doesn’t have any `<transition>` component, the code supporting this feature will not be present in the final bundle.
Hal tersebut menandakan bahwa komponen `Transition` hanya akan diimpor apabila aplikasi yang Anda buat menggunakan komponen tersebut. Dengan kata lain, apabila aplikasi yang Anda buat tidak menggunakan komponen `Transition`, kode yang mendukung fitur tersebut tidak akan ada pada kode akhir.

With global tree-shaking, the user only “pay” for the features they actually use. Even better, knowing that optional features won't increase the bundle size for applications not using them, framework size has become much less a concern for additional core features in the future, if at all.
Dengan _tree-shaking_ global, pengguna hanya akan "membayar" untuk fitur yang benar-benar mereka gunakan. Selain itu, karena fitur yang tidak wajib tidak akan menambah ukuran kode program pada aplikasi yang tidak menggunakan fitur tersebut, ukuran _framework_ tidak lagi menjadi masalah apabila terdapat penambahan fitur utama baru pada versi-versi selanjutnya.

::: warning Important
The above only applies to the [ES Modules builds](/guide/installation.html#explanation-of-different-builds) for use with tree-shaking capable bundlers - the UMD build still includes all features and exposes everything on the Vue global variable (and the compiler will produce appropriate output to use APIs off the global instead of importing).
::: warning Penting
Keuntungan di atas hanya berlaku bagi kode program yang memanfaatkan [modul ES](/guide/installation.html#explanation-of-different-builds) yang dibangun menggunakan _bundler_ yang mendukung fitur _tree-shaking_ - kode program yang dibangun menggunakan modul UMD tetap memasukkan seluruh fitur dan mengekspos seluruh variabel global dari Vue (dan kompilator tetap akan menghasilkan kode program yang sebisa mungkin menggunakan API global dibandingkan mengimpor API).
:::

## Usage in Plugins
## Penggunaan pada Plugin

If your plugin relies on an affected Vue 2.x global API, for instance:
Apabila _plugin_ Anda bergantung pada API global yang terdampak pada Vue versi 2.x, seperti:

```js
const plugin = {
Expand All @@ -127,7 +127,7 @@ const plugin = {
}
```

In Vue 3, you’ll have to import it explicitly:
Pada Vue versi 3, Anda harus mengimpor fitur tersebut secara eksplisit:

```js
import { nextTick } from 'vue'
Expand All @@ -141,7 +141,7 @@ const plugin = {
}
```

If you use a module bundle like webpack, this may cause Vue’s source code to be bundled into the plugin, and more often than not that’s not what you'd expect. A common practice to prevent this from happening is to configure the module bundler to exclude Vue from the final bundle. In webpack's case, you can use the [`externals`](https://webpack.js.org/configuration/externals/) configuration option:
Apabila Anda menggunakan _bundler_ modul seperti webpack, _bundler_ tersebut dapat menyebabkan kode sumber Vue diikutsertakan pada _plugin_ tersebut, dimana seringkali Anda tidak mengharapkan perilaku tersebut. Cara yang umum digunakan untuk mencegah perilaku tersebut adalah dengan mengatur _bundler_ untuk tidak mengikutsertakan Vue pada kode akhir. Pada webpack, Anda dapat menggunakna opsi [`externals`](https://webpack.js.org/configuration/externals/):

```js
// webpack.config.js
Expand All @@ -153,9 +153,9 @@ module.exports = {
}
```

This will tell webpack to treat the Vue module as an external library and not bundle it.
Konfigurasi tersebut akan menyebabkan webpack mengenali modul Vue sebagai pustaka eksternal dan tidak mengikutsertakannya.

If your module bundler of choice happens to be [Rollup](https://rollupjs.org/), you basically get the same effect for free, as by default Rollup will treat absolute module IDs (`'vue'` in our case) as external dependencies and not include them in the final bundle. During bundling though, it might emit a [“Treating vue as external dependency”](https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency) warning, which can be suppressed with the `external` option:
Apabila Anda menggunakan [Rollup](https://rollupjs.org/) sebagai _bundler_ modul Anda, Anda dapat mendapatkan fitur yang sama seperti webpack, karena secara bawaan Rollup akan menganggap ID dari modul absolut (`'vue'` dalam kasus ini) sebagai _dependency_ eksternal dan tidak mengikutsertakannya pada kode akhir. Dalam proses pembentukan kode program, Rollup mungkin akan mengeluarkan peringatan [“Treating vue as external dependency”](https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency), yang dapat diabaikan menggunakan opsi `external`:

```js
// rollup.config.js
Expand Down
Loading