Cara Kerja Intlayer

Daftar Isi

Ikhtisar

Ide utama di balik Intlayer adalah mengadopsi manajemen konten per-komponen. Jadi ide di balik Intlayer adalah memungkinkan Anda untuk mendeklarasikan konten Anda di mana saja dalam codebase Anda, misalnya di direktori yang sama dengan komponen Anda.

.└── Components    └── MyComponent        ├── index.content.ts        └── index.tsx

Untuk melakukan itu, peran Intlayer adalah menemukan semua file deklarasi konten Anda, dalam berbagai format yang ada di proyek Anda, dan kemudian akan menghasilkan kamus dari file-file tersebut.

Jadi ada dua langkah utama:

• Langkah build
• Langkah interpretasi

Langkah build kamus

Langkah build dapat dilakukan dengan tiga cara:

• menggunakan CLI dengan npx intlayer build
• menggunakan ekstensi vscode
• menggunakan plugin aplikasi seperti paket vite-intlayer, atau yang setara untuk Next.js. Ketika Anda menggunakan salah satu plugin tersebut, Intlayer akan secara otomatis membangun kamus Anda saat Anda memulai (dev) atau membangun (prod) aplikasi Anda.

1. Deklarasi file konten

   • File konten dapat didefinisikan dalam berbagai format, seperti TypeScript, ECMAScript, CommonJS, atau JSON.
   • File konten dapat didefinisikan di mana saja dalam proyek, yang memungkinkan pemeliharaan dan skalabilitas yang lebih baik. Penting untuk menghormati konvensi ekstensi file untuk file konten. Ekstensi ini secara default adalah *.content.{js|cjs|mjs|ts|tsx|json}, tetapi dapat diubah dalam file konfigurasi.

2. Generasi dictionaries

   • Kamus dihasilkan dari file konten. Secara default, kamus Intlayer dihasilkan di direktori .intlayer/dictionaries dalam proyek.
   • Kamus tersebut dihasilkan dalam berbagai format untuk memenuhi semua kebutuhan dan mengoptimalkan kinerja aplikasi.

3. Generasi tipe kamus

Berdasarkan dictionaries Anda, Intlayer akan menghasilkan tipe untuk membuatnya dapat digunakan dalam aplikasi Anda.

• Tipe kamus dihasilkan dari content declaration files Intlayer. Secara default, tipe kamus Intlayer dihasilkan di direktori .intlayer/types dalam proyek.

• Intlayer module augmentation adalah fitur TypeScript yang memungkinkan Anda mendefinisikan tipe tambahan untuk Intlayer. Ini membuat pengalaman pengembangan lebih mudah dengan menyarankan argumen yang tersedia atau argumen yang diperlukan. Di antara tipe yang dihasilkan, tipe kamus Intlayer atau bahkan tipe konfigurasi bahasa ditambahkan ke file types/intlayer.d.ts, dan digunakan oleh paket lain. Untuk melakukan ini, perlu agar file tsconfig.json dikonfigurasi untuk menyertakan direktori types dari proyek.

Langkah interpretasi kamus

Dengan menggunakan Intlayer, Anda akan mengakses konten Anda dalam aplikasi menggunakan hook useIntlayer.

const MyComponent = () => {  const content = useIntlayer("my-component");  return <div>{content.title}</div>;};

Hook ini akan mengelola deteksi locale untuk Anda dan akan mengembalikan konten untuk locale saat ini. Dengan menggunakan hook ini, Anda juga dapat menginterpretasikan markdown, mengelola pluralisasi, dan lainnya.

Untuk melihat semua fitur Intlayer, Anda dapat membaca dokumentasi kamus.

Konten Jarak Jauh

Intlayer memungkinkan Anda untuk mendeklarasikan konten secara lokal, dan kemudian mengekspornya ke CMS agar dapat diedit oleh tim non-teknis Anda.

Jadi Anda akan dapat mendorong dan menarik konten dari CMS ke aplikasi Anda, dengan cara yang mirip seperti yang Anda lakukan dengan Git untuk kode Anda.

Untuk kamus yang dieksternalisasi menggunakan CMS, Intlayer melakukan operasi fetch dasar untuk mengambil kamus jarak jauh dan menggabungkannya dengan kamus lokal Anda. Jika dikonfigurasi pada proyek Anda, Intlayer akan secara otomatis mengelola pengambilan konten dari CMS saat aplikasi dimulai (dev) / dibangun (prod).

Editor Visual

Intlayer juga menyediakan editor visual untuk memungkinkan Anda mengedit konten Anda secara visual. Editor visual ini tersedia dalam paket eksternal intlayer-editor.

• Server adalah aplikasi Express sederhana yang mendengarkan permintaan dari klien dan mengambil konten aplikasi Anda, seperti dictionaries dan konfigurasi untuk membuatnya dapat diakses di sisi klien.
• Di sisi lain, klien adalah aplikasi React yang digunakan untuk berinteraksi dengan konten Anda menggunakan antarmuka visual.

Ketika Anda memanggil konten Anda menggunakan useIntlayer dan editor diaktifkan, secara otomatis akan membungkus string Anda dengan objek Proxy bernama IntlayerNode. Node ini menggunakan window.postMessage untuk berkomunikasi dengan iframe yang dibungkus yang berisi antarmuka editor visual. Di sisi editor, editor mendengarkan pesan-pesan ini dan mensimulasikan interaksi nyata dengan konten Anda, memungkinkan Anda mengedit teks langsung dalam konteks aplikasi Anda.

Optimasi build aplikasi

Untuk mengoptimalkan ukuran bundle aplikasi Anda, Intlayer menyediakan dua plugin untuk mengoptimalkan build aplikasi Anda: plugin @intlayer/babel dan @intlayer/swc.

Plugin Babel dan SWC bekerja dengan menganalisis Abstract Syntax Tree (AST) aplikasi Anda untuk menggantikan pemanggilan fungsi Intlayer dengan kode yang dioptimalkan. Proses ini membuat bundle akhir Anda lebih ringan di produksi dengan memastikan hanya kamus yang benar-benar digunakan yang diimpor, mengoptimalkan chunking dan mengurangi ukuran bundle.

Dalam mode pengembangan, Intlayer menggunakan impor statis terpusat untuk kamus guna menyederhanakan pengalaman pengembangan.

Dengan mengaktifkan opsi importMode = "dynamic" dalam konfigurasi, Intlayer akan menggunakan impor dinamis untuk memuat kamus. Opsi ini dinonaktifkan secara default untuk menghindari pemrosesan async saat merender aplikasi.

@intlayer/babel tersedia secara default pada paket vite-intlayer,

@intlayer/swc tidak terpasang secara default pada paket next-intlayer karena plugin SWC masih bersifat eksperimental di Next.js.

Untuk melihat cara mengonfigurasi build aplikasi Anda, Anda dapat membaca dokumentasi konfigurasi.

Paket

Intlayer terdiri dari beberapa paket, masing-masing dengan peran spesifik dalam proses terjemahan. Berikut adalah representasi grafis dari struktur paket ini:

intlayer

Paket intlayer digunakan dalam aplikasi untuk mendeklarasikan konten dalam file konten.

react-intlayer

Paket react-intlayer digunakan untuk menginterpretasikan kamus Intlayer dan membuatnya dapat digunakan dalam aplikasi React.

next-intlayer

Paket next-intlayer digunakan sebagai lapisan di atas react-intlayer untuk membuat kamus Intlayer dapat digunakan dalam aplikasi Next.js. Paket ini mengintegrasikan fitur-fitur penting agar Intlayer dapat bekerja di lingkungan Next.js, seperti middleware terjemahan, routing, atau konfigurasi file next.config.js.

vue-intlayer

Paket vue-intlayer digunakan untuk menginterpretasikan kamus Intlayer dan membuatnya dapat digunakan dalam aplikasi Vue.

nuxt-intlayer

Paket nuxt-intlayer adalah modul Nuxt untuk membuat kamus Intlayer dapat digunakan dalam aplikasi Nuxt. Paket ini mengintegrasikan fitur-fitur penting agar Intlayer dapat bekerja di lingkungan Nuxt, seperti middleware terjemahan, routing, atau konfigurasi file nuxt.config.js.

svelte-intlayer (WIP)

Paket svelte-intlayer digunakan untuk menginterpretasikan kamus Intlayer dan membuatnya dapat digunakan dalam aplikasi Svelte.

solid-intlayer (WIP)

Paket solid-intlayer digunakan untuk menginterpretasikan kamus Intlayer dan membuatnya dapat digunakan dalam aplikasi Solid.js.

preact-intlayer

Paket preact-intlayer digunakan untuk menginterpretasikan kamus Intlayer dan membuatnya dapat digunakan dalam aplikasi Preact.

angular-intlayer (WIP)

Paket angular-intlayer digunakan untuk menginterpretasikan kamus Intlayer dan membuatnya dapat digunakan dalam aplikasi Angular.

express-intlayer

Paket express-intlayer digunakan untuk menggunakan Intlayer pada backend Express.js.

react-native-intlayer

Paket react-native-intlayer menyediakan alat yang mengintegrasikan plugin agar Intlayer dapat bekerja dengan Metro bundler.

lynx-intlayer

Paket lynx-intlayer menyediakan alat yang mengintegrasikan plugin agar Intlayer dapat bekerja dengan Lynx bundler.

vite-intlayer

Menyertakan plugin Vite untuk mengintegrasikan Intlayer dengan Vite bundler, serta middleware untuk mendeteksi locale yang dipilih pengguna, mengelola cookie, dan menangani pengalihan URL.

react-scripts-intlayer

Mencakup perintah dan plugin react-scripts-intlayer untuk mengintegrasikan Intlayer dengan aplikasi berbasis Create React App. Plugin ini didasarkan pada craco dan mencakup konfigurasi tambahan untuk bundler Webpack.

intlayer-editor

Paket intlayer-editor digunakan untuk memungkinkan penggunaan editor visual. Paket ini bersifat opsional, dapat diinstal dalam aplikasi, dan akan digunakan oleh paket react-intlayer. Paket ini terdiri dari dua bagian: server dan klien.

Klien berisi elemen UI yang akan digunakan oleh react-intlayer.

Server, yang berbasis Express, digunakan untuk menerima permintaan editor visual dan mengelola atau memodifikasi file konten.

intlayer-cli

Paket intlayer-cli dapat digunakan untuk menghasilkan kamus menggunakan perintah npx intlayer dictionaries build. Jika intlayer sudah terpasang, CLI secara otomatis terpasang dan paket ini tidak diperlukan.

@intlayer/core

Paket @intlayer/core adalah paket utama Intlayer. Paket ini berisi fungsi terjemahan dan manajemen kamus. @intlayer/core bersifat multiplatform dan digunakan oleh paket lain untuk melakukan interpretasi kamus.

@intlayer/config

Paket @intlayer/config digunakan untuk mengonfigurasi pengaturan Intlayer, seperti bahasa yang tersedia, parameter middleware Next.js, atau pengaturan editor terintegrasi.

@intlayer/webpack

Paket @intlayer/webpack digunakan untuk menyediakan konfigurasi Webpack agar aplikasi berbasis Webpack dapat bekerja dengan Intlayer. Paket ini juga menyediakan plugin untuk ditambahkan ke aplikasi Webpack yang sudah ada.

@intlayer/cli

Paket @intlayer/cli adalah paket NPM yang digunakan untuk mendeklarasikan skrip yang terkait dengan antarmuka baris perintah Intlayer. Paket ini memastikan keseragaman semua perintah CLI Intlayer. Paket ini terutama digunakan oleh paket intlayer-cli, dan intlayer.

@intlayer/mcp

Paket @intlayer/mcp menyediakan server MCP (Model Context Protocol) yang memberikan bantuan IDE bertenaga AI yang disesuaikan untuk ekosistem Intlayer. Paket ini secara otomatis memuat dokumentasi dan terintegrasi dengan Intlayer CLI.

@intlayer/dictionaries-entry & @intlayer/unmerged-dictionaries-entry & @intlayer/dynamic-dictionaries-entry

Paket @intlayer/dictionaries-entry, @intlayer/unmerged-dictionaries-entry dan @intlayer/dynamic-dictionaries-entry mengembalikan jalur entri dari kamus Intlayer. Karena pencarian sistem berkas dari browser tidak mungkin dilakukan, menggunakan bundler seperti Webpack atau Rollup untuk mengambil jalur entri kamus juga tidak memungkinkan. Paket-paket ini dirancang untuk di-alias-kan, memungkinkan optimasi bundling di berbagai bundler seperti Vite, Webpack, dan Turbopack.

@intlayer/chokidar

Paket @intlayer/chokidar digunakan untuk memantau file konten dan menghasilkan ulang kamus yang dimodifikasi setiap kali ada perubahan.

@intlayer/editor

Paket @intlayer/editor menyediakan utilitas yang terkait dengan editor kamus. Paket ini secara khusus mencakup API untuk menghubungkan aplikasi dengan editor Intlayer, serta utilitas untuk memanipulasi kamus. Paket ini bersifat lintas platform.

@intlayer/editor-react

Paket @intlayer/editor-react menyediakan states, contexts, hooks, dan komponen untuk menghubungkan aplikasi React dengan editor Intlayer.

@intlayer/babel

Paket @intlayer/babel menyediakan alat yang mengoptimalkan bundling kamus untuk aplikasi berbasis Vite dan Webpack.

@intlayer/swc

Paket @intlayer/swc menyediakan alat yang mengoptimalkan bundling kamus untuk aplikasi Next.js.

@intlayer/api

Paket @intlayer/api adalah SDK API untuk berinteraksi dengan backend.

@intlayer/design-system

Paket @intlayer/design-system digunakan untuk berbagi elemen desain antara CMS dan editor Visual.

@intlayer/backend

Paket @intlayer/backend mengekspor tipe backend dan pada akhirnya akan menawarkan backend sebagai paket mandiri di masa depan.

Obrolan dengan dokumentasi pintar kami

• Ajukan pertanyaan Anda ke dokumentasi pintar kami