Berikut adalah artikel tentang perubahan koleksi dalam Markdown dan berbagai framework lainnya.

Perubahan Koleksi dalam Markdown

Dalam Markdown, koleksi dapat diubah untuk menampilkan portal yang diperbarui. Hal ini terjadi karena pertama kali portal tersebut harus dibuat menjadi DOM palsu, lalu harus dilakukan render lagi ke DOM asli. Namun, karena pertama kali render dilakukan ke DOM palsu, maka prosesnya relatif cepat.

Library pertama render daftar item ke DOM palsu untuk mengumpulkan informasi tentang semua komponen <Item /> – yang mungkin terletak dalam wrapper komponen yang lebih dalam. Dengan informasi tersebut, mereka dapat memulai render lagi ke DOM asli. Saya asumsikan bahwa pendekatan ini juga compatible dengan rendering sisi server.

React Slots RFC

Ada Request for Comments (RFC) untuk React Slots yang akan membawa API slot ke React, menghilangkan kelemahan solusi lainnya. Tidak jelas kapan ini akan diterapkan.

Slots dalam framework lainnya

Sekarang setelah kita menemukan berbagai pendekatan dalam React, mari lihat bagaimana framework lainnya menyelesaikan masalah ini.

Vue

Vue mendukung elemen <slot> untuk slot default dan nama. Mulai dari Vue 3.3, ada fungsi defineSlots() yang memungkinkan penulis komponen untuk mendefinisikan slot komponen dan prop-nya dalam block <script setup>. Dengan menggunakan elemen <slot /> dalam template, maka rendering tersebut menjadi fully type-safe.

<script setup lang="ts">
 defineSlots<{
 header(props: { title: string }): any;
 default(props: Record<never, never>): any;
 }>();
</script>

<template>
 <div class="example">
 <header>
 <slot name="header" title="Example" />
 </header>
 <slot></slot>
 </div>
</template>

Pengguna komponen dapat kemudian menggunakan direktif v-slot untuk menampilkan elemen dalam slot tertentu:

<Example>
 <template v-slot:header="headerProps">
 <h1>{{ headerProps.title }}</h1>
 </template>
 <p>Content</p>
</Example>

Dalam penggunaan slot, Anda mendapatkan keamanan tipe untuk prop-nya (disini headerProps) tetapi nama slot tidak fully type-safe, yaitu masih memungkinkan menggunakan nama slot yang tidak ditentukan dalam komponen, seperti <template v-slot:foo />.

Angular

Angular mendukung proyeksi konten dengan elemen ng-content dan atribut select:

<div class="card">
 <header>
 <ng-content select="[cardHeader]"></ng-content>
 </header>
 <div>
 <ng-content></ng-content>
 </div>
 <footer>
 <ng-content select="[cardFooter]"></ng-content>
 </footer>
</div>

Contoh ini memiliki slot default dan dua "nama" yang menerima semua elemen dengan atribut cardHeader/cardFooter. Kita dapat menampilkan elemen ke dalam slot tersebut dengan menambahkan salah satu dari dua atribut:

<app-card>
 <h1 cardHeader>Title</h1>
 <p>Content</p>
 <a href="#" cardFooter>Read more</a>
</app-card>

Atribut select dapat menerima CSS selector lainnya, seperti:

• Selektor elemen: my-element
• Selektor kelas: .btn
• Selektor ID: #header
• Pseudo classes: .btn:not(.btn-secondary)
• Kombinasi: .btn,#btn

Jika Anda ingin memproyeksi elemen ke slot yang tidak cocok dengan selektor, Anda dapat menggunakan ngProjectAs:

<!--
 Button is projected into <ng-content select=".btn">
 even if it doesn't have the `btn` class
-->
<button ngProjectAs=".btn" class="custom-button">
 Click Me
</button>

Bagaimana API ini membandingkan dengan pendekatan-pendekatan dalam React? API selektor sangat kuat dan memungkinkan kita mengontrol mana elemen yang harus dirender. Namun, ada beberapa kelemahan atau batasan:

• Statik: Atribut select tidak dapat diikat ke nilai dinamis, harus string statik.
• Tidak dirender setidaknya sekali: Elemen hanya dirender jika terjadi perubahan pada konten.

Artikel ini membahas tentang berbagai pendekatan dalam Markdown dan framework lainnya untuk menyelesaikan masalah koleksi. Dalam beberapa kasus, penggunaan API slot dapat membantu meningkatkan keamanan tipe dan kinerja aplikasi.