@intlayer/docs 9.3.1 → 9.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/blog/ar/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/de/nextjs-multilingual-seo-comparison.md +9 -9
- package/blog/en/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/en-GB/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/es/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/fr/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/hi/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/id/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/it/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/ja/nextjs-multilingual-seo-comparison.md +9 -9
- package/blog/ko/nextjs-multilingual-seo-comparison.md +9 -9
- package/blog/pl/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/pt/nextjs-multilingual-seo-comparison.md +9 -9
- package/blog/ru/nextjs-multilingual-seo-comparison.md +9 -9
- package/blog/tr/nextjs-multilingual-seo-comparison.md +9 -9
- package/blog/uk/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/vi/nextjs-multilingual-seo-comparison.md +10 -10
- package/blog/zh/nextjs-multilingual-seo-comparison.md +10 -10
- package/dist/cjs/generated/docs.entry.cjs +20 -0
- package/dist/cjs/generated/docs.entry.cjs.map +1 -1
- package/dist/esm/generated/docs.entry.mjs +20 -0
- package/dist/esm/generated/docs.entry.mjs.map +1 -1
- package/dist/types/generated/docs.entry.d.ts +1 -0
- package/dist/types/generated/docs.entry.d.ts.map +1 -1
- package/docs/ar/bundle_optimization.md +1 -1
- package/docs/ar/configuration.md +32 -9
- package/docs/ar/dictionary/content_file.md +0 -22
- package/docs/ar/dictionary/function_fetching.md +23 -0
- package/docs/ar/eslint.md +336 -0
- package/docs/ar/intlayer_with_react_router_v7_fs_routes.md +1 -1
- package/docs/bn/configuration.md +34 -9
- package/docs/bn/eslint.md +336 -0
- package/docs/cs/bundle_optimization.md +1 -1
- package/docs/cs/configuration.md +33 -9
- package/docs/cs/eslint.md +336 -0
- package/docs/de/bundle_optimization.md +1 -1
- package/docs/de/configuration.md +34 -9
- package/docs/de/dictionary/content_file.md +0 -22
- package/docs/de/dictionary/function_fetching.md +23 -0
- package/docs/de/eslint.md +336 -0
- package/docs/en/bundle_optimization.md +1 -1
- package/docs/en/configuration.md +34 -9
- package/docs/en/dictionary/content_file.md +0 -22
- package/docs/en/dictionary/function_fetching.md +23 -0
- package/docs/en/eslint.md +336 -0
- package/docs/en/packages/intlayer/getLocalizedPath.md +70 -19
- package/docs/en-GB/configuration.md +33 -9
- package/docs/en-GB/dictionary/content_file.md +0 -22
- package/docs/en-GB/dictionary/function_fetching.md +23 -0
- package/docs/en-GB/eslint.md +336 -0
- package/docs/en-GB/intlayer_with_create_react_app.md +32 -35
- package/docs/en-GB/intlayer_with_react_router_v7_fs_routes.md +1 -1
- package/docs/es/bundle_optimization.md +1 -1
- package/docs/es/configuration.md +35 -9
- package/docs/es/dictionary/content_file.md +0 -22
- package/docs/es/dictionary/function_fetching.md +23 -0
- package/docs/es/eslint.md +336 -0
- package/docs/fr/bundle_optimization.md +1 -1
- package/docs/fr/configuration.md +35 -9
- package/docs/fr/dictionary/content_file.md +0 -22
- package/docs/fr/dictionary/function_fetching.md +23 -0
- package/docs/fr/eslint.md +336 -0
- package/docs/hi/configuration.md +35 -9
- package/docs/hi/dictionary/content_file.md +0 -22
- package/docs/hi/dictionary/function_fetching.md +23 -0
- package/docs/hi/eslint.md +336 -0
- package/docs/hi/intlayer_with_react_router_v7_fs_routes.md +1 -1
- package/docs/hi/intlayer_with_vite+svelte.md +2 -2
- package/docs/id/configuration.md +35 -9
- package/docs/id/dictionary/content_file.md +0 -22
- package/docs/id/dictionary/function_fetching.md +23 -0
- package/docs/id/eslint.md +336 -0
- package/docs/it/bundle_optimization.md +1 -1
- package/docs/it/configuration.md +35 -9
- package/docs/it/dictionary/content_file.md +0 -22
- package/docs/it/dictionary/function_fetching.md +23 -0
- package/docs/it/eslint.md +336 -0
- package/docs/ja/configuration.md +30 -9
- package/docs/ja/dictionary/content_file.md +0 -22
- package/docs/ja/dictionary/function_fetching.md +23 -0
- package/docs/ja/eslint.md +336 -0
- package/docs/ja/intlayer_with_react_router_v7.md +1 -146
- package/docs/ja/intlayer_with_vite+react.md +5 -1
- package/docs/ko/configuration.md +31 -9
- package/docs/ko/dictionary/content_file.md +0 -22
- package/docs/ko/dictionary/function_fetching.md +23 -0
- package/docs/ko/eslint.md +336 -0
- package/docs/ko/intlayer_with_lynx+react.md +4 -0
- package/docs/ko/intlayer_with_react_router_v7_fs_routes.md +1 -1
- package/docs/ko/intlayer_with_storybook.md +5 -5
- package/docs/nl/configuration.md +33 -9
- package/docs/nl/eslint.md +336 -0
- package/docs/pl/bundle_optimization.md +1 -1
- package/docs/pl/configuration.md +34 -9
- package/docs/pl/dictionary/content_file.md +0 -22
- package/docs/pl/dictionary/function_fetching.md +23 -0
- package/docs/pl/eslint.md +336 -0
- package/docs/pl/intlayer_with_astro.md +1 -114
- package/docs/pl/migration_from_i18next_to_intlayer.md +4 -0
- package/docs/pl/migration_from_next-i18next_to_intlayer.md +8 -4
- package/docs/pl/migration_from_next-intl_to_intlayer.md +11 -5
- package/docs/pl/migration_from_nuxtjs_i18n_to_intlayer.md +8 -4
- package/docs/pl/migration_from_react-i18next_to_intlayer.md +8 -4
- package/docs/pl/migration_from_vue-i18n_to_intlayer.md +4 -0
- package/docs/pt/bundle_optimization.md +1 -1
- package/docs/pt/configuration.md +34 -9
- package/docs/pt/dictionary/content_file.md +0 -22
- package/docs/pt/dictionary/function_fetching.md +23 -0
- package/docs/pt/eslint.md +336 -0
- package/docs/pt/intlayer_with_astro.md +1 -114
- package/docs/ru/bundle_optimization.md +1 -1
- package/docs/ru/configuration.md +34 -9
- package/docs/ru/dictionary/content_file.md +0 -22
- package/docs/ru/dictionary/function_fetching.md +23 -0
- package/docs/ru/eslint.md +336 -0
- package/docs/tr/bundle_optimization.md +1 -1
- package/docs/tr/configuration.md +33 -9
- package/docs/tr/dictionary/content_file.md +0 -22
- package/docs/tr/dictionary/function_fetching.md +23 -0
- package/docs/tr/eslint.md +336 -0
- package/docs/uk/configuration.md +35 -9
- package/docs/uk/dictionary/content_file.md +0 -22
- package/docs/uk/dictionary/function_fetching.md +23 -0
- package/docs/uk/eslint.md +336 -0
- package/docs/uk/packages/angular-intlayer/exports.md +2 -2
- package/docs/ur/configuration.md +35 -9
- package/docs/ur/eslint.md +336 -0
- package/docs/vi/bundle_optimization.md +1 -1
- package/docs/vi/configuration.md +33 -9
- package/docs/vi/dictionary/content_file.md +0 -22
- package/docs/vi/dictionary/function_fetching.md +23 -0
- package/docs/vi/eslint.md +336 -0
- package/docs/zh/bundle_optimization.md +1 -1
- package/docs/zh/configuration.md +29 -9
- package/docs/zh/dictionary/content_file.md +0 -22
- package/docs/zh/dictionary/function_fetching.md +23 -0
- package/docs/zh/eslint.md +336 -0
- package/docs/zh/intlayer_with_create_react_app.md +4 -0
- package/docs/zh/intlayer_with_lynx+react.md +4 -0
- package/docs/zh/intlayer_with_nextjs_14.md +0 -2
- package/docs/zh/intlayer_with_nextjs_15.md +0 -2
- package/docs/zh/intlayer_with_nextjs_page_router.md +0 -2
- package/docs/zh/intlayer_with_nuxt.md +1 -1
- package/docs/zh/intlayer_with_react_router_v7.md +4 -0
- package/docs/zh/intlayer_with_react_router_v7_fs_routes.md +4 -0
- package/docs/zh/intlayer_with_solid_start.md +1 -1
- package/docs/zh/intlayer_with_vite+vue.md +0 -2
- package/docs/zh-TW/bundle_optimization.md +1 -1
- package/docs/zh-TW/eslint.md +336 -0
- package/package.json +7 -7
- package/src/generated/docs.entry.ts +20 -0
|
@@ -0,0 +1,336 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2026-08-12
|
|
3
|
+
updatedAt: 2026-08-13
|
|
4
|
+
title: Plugin ESLint | Aturan Lint untuk Intlayer
|
|
5
|
+
description: Deteksi string hardcoded, panggilan dinamis yang tidak dapat dioptimalkan oleh compiler Intlayer, dan konten kamus yang tidak terpakai dengan eslint-plugin-intlayer. Bekerja dengan ESLint dan oxlint di seluruh React, Vue, Svelte, Angular, dan Astro.
|
|
6
|
+
keywords:
|
|
7
|
+
- Intlayer
|
|
8
|
+
- ESLint
|
|
9
|
+
- oxlint
|
|
10
|
+
- Linting
|
|
11
|
+
- i18n
|
|
12
|
+
- Internasionalisasi
|
|
13
|
+
- no-raw-text
|
|
14
|
+
- String hardcoded
|
|
15
|
+
- Terjemahan tidak terpakai
|
|
16
|
+
- Konten mati
|
|
17
|
+
- React
|
|
18
|
+
- Vue
|
|
19
|
+
- Svelte
|
|
20
|
+
- Angular
|
|
21
|
+
slugs:
|
|
22
|
+
- doc
|
|
23
|
+
- eslint
|
|
24
|
+
history:
|
|
25
|
+
- version: 9.3.1
|
|
26
|
+
date: 2026-08-12
|
|
27
|
+
changes: "Riwayat awal"
|
|
28
|
+
author: aymericzip
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
# Plugin ESLint x OXLint
|
|
32
|
+
|
|
33
|
+
`eslint-plugin-intlayer` menangkap jenis kesalahan i18n yang tidak dapat dideteksi oleh TypeScript:
|
|
34
|
+
|
|
35
|
+
1. **Teks hardcoded** yang tidak pernah dimasukkan ke dalam kamus.
|
|
36
|
+
2. **Panggilan dinamis** yang lolos pemeriksaan tipe dan berjalan, namun tidak dapat dioptimalkan oleh compiler Intlayer.
|
|
37
|
+
3. **Konten mati (Dead content)** — kamus dan field yang tidak dibaca oleh apa pun di dalam proyek (opsional/opt-in).
|
|
38
|
+
|
|
39
|
+
Kunci kamus yang tidak diketahui, path field yang tidak diketahui, dan locale yang hilang sudah merupakan kesalahan kompilasi, sehingga plugin tidak mengulanginya.
|
|
40
|
+
|
|
41
|
+
## Instalasi
|
|
42
|
+
|
|
43
|
+
```bash packageManager="npm"
|
|
44
|
+
npm install --save-dev eslint-plugin-intlayer
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
```bash packageManager="pnpm"
|
|
48
|
+
pnpm add --save-dev eslint-plugin-intlayer
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
```bash packageManager="yarn"
|
|
52
|
+
yarn add --dev eslint-plugin-intlayer
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
Memerlukan ESLint 9 atau lebih baru (flat config). ESLint 10 didukung.
|
|
56
|
+
|
|
57
|
+
## Penggunaan
|
|
58
|
+
|
|
59
|
+
Plugin ini berjalan di ESLint dan [oxlint](https://oxc.rs) — aturan yang sama, opsi yang sama.
|
|
60
|
+
|
|
61
|
+
<Tabs defaultTab="eslint">
|
|
62
|
+
<Tab label="ESLint" value="eslint">
|
|
63
|
+
|
|
64
|
+
```javascript fileName="eslint.config.mjs"
|
|
65
|
+
import intlayer from "eslint-plugin-intlayer";
|
|
66
|
+
|
|
67
|
+
export default [...intlayer.configs.recommended];
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
Atau sebarkan sebuah konfigurasi dan tetapkan sendiri tingkat keparahannya:
|
|
71
|
+
|
|
72
|
+
```javascript fileName="eslint.config.mjs"
|
|
73
|
+
import intlayer from "eslint-plugin-intlayer";
|
|
74
|
+
|
|
75
|
+
export default [
|
|
76
|
+
...intlayer.configs.recommended,
|
|
77
|
+
{
|
|
78
|
+
rules: {
|
|
79
|
+
"intlayer/no-raw-text": "warn",
|
|
80
|
+
"intlayer/static-dictionary-key": "error",
|
|
81
|
+
"intlayer/no-dynamic-field-access": "error",
|
|
82
|
+
"intlayer/enforce-adapter-import": "warn",
|
|
83
|
+
"intlayer/no-unused-content": "warn",
|
|
84
|
+
},
|
|
85
|
+
},
|
|
86
|
+
];
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
</Tab>
|
|
90
|
+
<Tab label="oxlint" value="oxlint">
|
|
91
|
+
|
|
92
|
+
```json fileName=".oxlintrc.json"
|
|
93
|
+
{
|
|
94
|
+
"jsPlugins": ["eslint-plugin-intlayer"],
|
|
95
|
+
"rules": {
|
|
96
|
+
"intlayer/no-raw-text": "warn",
|
|
97
|
+
"intlayer/static-dictionary-key": "error",
|
|
98
|
+
"intlayer/no-dynamic-field-access": "error",
|
|
99
|
+
"intlayer/enforce-adapter-import": "warn"
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
Dua catatan: dukungan plugin JS di oxlint masih berstatus alfa, dan oxlint tidak mendukung parser kustom — sehingga file `.vue`, `.svelte`, `.astro`, dan template Angular tidak diperiksa di sana. Jalankan oxlint untuk file JS/TS/JSX Anda dan gunakan ESLint untuk sisanya.
|
|
105
|
+
|
|
106
|
+
`no-unused-content` sengaja tidak disertakan di atas: aturan ini memerlukan direktori kerja dan path file yang diperiksa dari konteks aturan, yang belum dijamin oleh bridge plugin JS alfa. Jalankan aturan ini di bawah ESLint.
|
|
107
|
+
|
|
108
|
+
</Tab>
|
|
109
|
+
</Tabs>
|
|
110
|
+
|
|
111
|
+
### Konfigurasi
|
|
112
|
+
|
|
113
|
+
| Konfigurasi | `no-raw-text` | `static-dictionary-key` | `no-dynamic-field-access` | `enforce-adapter-import` | `no-unused-content` |
|
|
114
|
+
| --------------- | ------------------------- | ----------------------- | ------------------------- | ------------------------ | ------------------- |
|
|
115
|
+
| `recommended` | warn | error | error | off | off |
|
|
116
|
+
| `strict` | error (+ literal non-JSX) | error | error | error | off |
|
|
117
|
+
| `contract-only` | off | error | error | off | off |
|
|
118
|
+
|
|
119
|
+
`recommended` sengaja menetapkan `no-raw-text` pada `warn`: menerapkannya pada codebase yang ada akan menampilkan semua string yang belum diterjemahkan sekaligus, yang seharusnya tidak merusak proses build Anda pada hari pertama.
|
|
120
|
+
|
|
121
|
+
`enforce-adapter-import` dinonaktifkan secara default — aktifkan secara eksplisit jika Anda menginginkannya.
|
|
122
|
+
|
|
123
|
+
`no-unused-content` dinonaktifkan di setiap konfigurasi, termasuk `strict`. Ini adalah satu-satunya aturan yang membaca konfigurasi Intlayer Anda dan memindai file sumber dari disk, jadi mengaktifkannya harus menjadi pilihan yang disengaja daripada sesuatu yang dilakukan preset secara otomatis.
|
|
124
|
+
|
|
125
|
+
## Aturan
|
|
126
|
+
|
|
127
|
+
### `no-raw-text`
|
|
128
|
+
|
|
129
|
+
Melaporkan teks yang ditampilkan kepada pengguna yang tidak dideklarasikan dalam kamus. Aturan ini menggunakan deteksi yang sama dengan `intlayer extract`, sehingga nama merek, class CSS, dan identifier teknis diabaikan.
|
|
130
|
+
|
|
131
|
+
```jsx
|
|
132
|
+
// ✗ Dilaporkan
|
|
133
|
+
<h1>Welcome to our documentation</h1>
|
|
134
|
+
<input placeholder="Enter your email address" />
|
|
135
|
+
|
|
136
|
+
// ✓ Benar
|
|
137
|
+
const { title } = useIntlayer("home");
|
|
138
|
+
<h1>{title}</h1>
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
File deklarasi konten (`*.content.ts`, …) dilewati.
|
|
142
|
+
|
|
143
|
+
Untuk memperbaiki seluruh file sekaligus, jalankan `npx intlayer extract` dan biarkan compiler memindahkan string ke dalam kamus untuk Anda.
|
|
144
|
+
|
|
145
|
+
**Opsi**
|
|
146
|
+
|
|
147
|
+
```javascript fileName="eslint.config.mjs"
|
|
148
|
+
{
|
|
149
|
+
"intlayer/no-raw-text": [
|
|
150
|
+
"warn",
|
|
151
|
+
{
|
|
152
|
+
// Atribut yang nilainya berupa teks yang ditampilkan kepada pengguna.
|
|
153
|
+
// Default: title, placeholder, alt, aria-label, label
|
|
154
|
+
attributes: ["title", "placeholder", "alt", "aria-label", "label"],
|
|
155
|
+
|
|
156
|
+
// Elemen yang kontennya bukan teks yang ditampilkan kepada pengguna.
|
|
157
|
+
// Default: code, pre, script, style
|
|
158
|
+
ignoreElements: ["code", "pre", "script", "style"],
|
|
159
|
+
|
|
160
|
+
// Ekspresi reguler untuk teks yang tidak boleh dilaporkan.
|
|
161
|
+
ignorePatterns: ["^Powered by"],
|
|
162
|
+
|
|
163
|
+
// Laporkan juga literal string di luar markup. Default: false
|
|
164
|
+
includeStringLiterals: false,
|
|
165
|
+
},
|
|
166
|
+
],
|
|
167
|
+
}
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
### `static-dictionary-key`
|
|
171
|
+
|
|
172
|
+
Mengharuskan kunci kamus berupa literal string.
|
|
173
|
+
|
|
174
|
+
Compiler hanya dapat memuat awal kamus ketika dapat membaca kunci secara langsung di lokasi pemanggilan. Dengan kunci yang dihitung, compiler secara diam-diam melewati optimasi dan menggabungkan setiap kamus sebagai gantinya.
|
|
175
|
+
|
|
176
|
+
```typescript
|
|
177
|
+
// ✗ Dilaporkan
|
|
178
|
+
useIntlayer(dictionaryKey);
|
|
179
|
+
useIntlayer(`home-${suffix}`);
|
|
180
|
+
getTranslations({ namespace: page });
|
|
181
|
+
|
|
182
|
+
// ✗ Variabel tetap bukan literal
|
|
183
|
+
const key = "home";
|
|
184
|
+
useIntlayer(key);
|
|
185
|
+
|
|
186
|
+
// ✓ Benar
|
|
187
|
+
useIntlayer("home");
|
|
188
|
+
getTranslations({ namespace: "home" });
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
Ini berlaku untuk `useIntlayer`, `getIntlayer`, dan setiap adapter kompatibilitas (`useTranslation`, `useTranslations`, `formatMessage`, `<FormattedMessage id>`, `<Trans i18nKey>`, …).
|
|
192
|
+
|
|
193
|
+
### `no-dynamic-field-access`
|
|
194
|
+
|
|
195
|
+
Mengharuskan field yang Anda baca dari kamus diketahui secara statis.
|
|
196
|
+
|
|
197
|
+
Compiler menghapus field yang tidak terdeteksi digunakan. Akses yang dihitung tidak terlihat oleh compiler, sehingga pembacaan dapat menghasilkan `undefined` saat runtime.
|
|
198
|
+
|
|
199
|
+
```typescript
|
|
200
|
+
// ✗ Dilaporkan
|
|
201
|
+
const content = useIntlayer("home");
|
|
202
|
+
content[fieldName];
|
|
203
|
+
|
|
204
|
+
const t = useTranslations("home");
|
|
205
|
+
t(messageKey);
|
|
206
|
+
|
|
207
|
+
// ✓ Benar
|
|
208
|
+
content.title;
|
|
209
|
+
content["title"];
|
|
210
|
+
content.items[0];
|
|
211
|
+
t("hero.title");
|
|
212
|
+
```
|
|
213
|
+
|
|
214
|
+
### `enforce-adapter-import`
|
|
215
|
+
|
|
216
|
+
Lebih memilih adapter kompatibilitas `@intlayer/*` daripada paket asli. Paket asli hanya me-resolve ke Intlayer ketika alias bundler dikonfigurasi; adapter selalu melakukannya. Dapat diperbaiki otomatis dengan `--fix`.
|
|
217
|
+
|
|
218
|
+
```typescript
|
|
219
|
+
// ✗ Dilaporkan
|
|
220
|
+
import { useTranslation } from "react-i18next";
|
|
221
|
+
import { getTranslations } from "next-intl/server";
|
|
222
|
+
|
|
223
|
+
// ✓ Benar
|
|
224
|
+
import { useTranslation } from "@intlayer/react-i18next";
|
|
225
|
+
import { getTranslations } from "@intlayer/next-intl/server";
|
|
226
|
+
```
|
|
227
|
+
|
|
228
|
+
### `no-unused-content`
|
|
229
|
+
|
|
230
|
+
**Dinonaktifkan secara default.** Melaporkan konten yang tidak dibaca oleh apa pun di proyek Anda, ditambah kunci kamus yang dideklarasikan di lebih dari satu tempat.
|
|
231
|
+
|
|
232
|
+
```typescript fileName="src/home.content.ts"
|
|
233
|
+
export default {
|
|
234
|
+
key: "home", // ✗ Dilaporkan jika tidak ada pemanggil di mana pun yang meminta "home"
|
|
235
|
+
content: {
|
|
236
|
+
title: t({ id: "Judul", en: "Title" }),
|
|
237
|
+
|
|
238
|
+
// ✗ Dilaporkan jika tidak ada yang membaca `hero`
|
|
239
|
+
hero: {
|
|
240
|
+
subtitle: t({ id: "Subjudul", en: "Subtitle" }),
|
|
241
|
+
},
|
|
242
|
+
},
|
|
243
|
+
};
|
|
244
|
+
```
|
|
245
|
+
|
|
246
|
+
Berbeda dengan aturan lainnya, aturan ini tidak dapat mengambil keputusan hanya dari file yang sedang diperiksa — sebuah field hanya dianggap tidak digunakan secara relatif terhadap keseluruhan proyek. Pada deklarasi konten pertama dalam satu sesi lint, aturan ini memuat konfigurasi Intlayer Anda, memindai file sumber yang dideklarasikan konfigurasi tersebut (`build.traversePattern`, `compiler.transformPattern`), dan menjalankan penganalisis penggunaan yang sama yang menggerakkan `@intlayer/lsp` dan coretan "tidak digunakan" di ekstensi VS Code. Hasilnya di-cache selama `cacheTtl` milidetik, sehingga pemindaian terjadi sekali per sesi dan bukan per file.
|
|
247
|
+
|
|
248
|
+
**Opsi**
|
|
249
|
+
|
|
250
|
+
```javascript fileName="eslint.config.mjs"
|
|
251
|
+
{
|
|
252
|
+
"intlayer/no-unused-content": [
|
|
253
|
+
"warn",
|
|
254
|
+
{
|
|
255
|
+
// Laporkan kunci kamus yang tidak direferensikan oleh apa pun. Default: true
|
|
256
|
+
reportUnusedDictionaries: true,
|
|
257
|
+
|
|
258
|
+
// Laporkan field konten yang tidak dibaca oleh apa pun. Default: true
|
|
259
|
+
reportUnusedFields: true,
|
|
260
|
+
|
|
261
|
+
// Laporkan kunci yang dideklarasikan di lebih dari satu tempat. Default: true
|
|
262
|
+
reportDuplicateKeys: true,
|
|
263
|
+
|
|
264
|
+
// Ekspresi reguler untuk path field yang tidak boleh dilaporkan.
|
|
265
|
+
ignoreFields: ["^meta"],
|
|
266
|
+
|
|
267
|
+
// Root proyek tempat pemindaian dimulai. Default: direktori kerja ESLint
|
|
268
|
+
baseDir: process.cwd(),
|
|
269
|
+
|
|
270
|
+
// Berapa lama satu pemindaian proyek digunakan kembali, dalam ms. Default: 30000
|
|
271
|
+
cacheTtl: 30000,
|
|
272
|
+
},
|
|
273
|
+
],
|
|
274
|
+
}
|
|
275
|
+
```
|
|
276
|
+
|
|
277
|
+
Kurangi `cacheTtl` jika Anda melakukan lint dari server editor jangka panjang dan ingin editan Anda terlihat lebih cepat; atur `baseDir` ketika satu sesi lint mencakup beberapa proyek Intlayer di dalam sebuah monorepo.
|
|
278
|
+
|
|
279
|
+
> **Cenderung memilih untuk diam.** Laporan positif palsu di sini dapat menghapus terjemahan, jadi tidak ada yang dilaporkan ketika kamus digunakan dengan cara yang tidak dapat diikuti oleh analisis: objek konten yang diteruskan secara utuh, fungsi penerjemah yang diikat darinya (`const t = useTranslations("home")`), deklarasi yang dijangkau melalui impor langsung (`useDictionary(myDictionary)`), sebuah `nest()` dari kamus lain, atau daftar field yang dibuat tidak lengkap oleh spread operator. Komponen file tunggal (`.vue`, `.svelte`, `.astro`) dihitung menggunakan setiap field dari kamus yang mereka sebutkan, karena blok skrip mereka tidak diparsing di sini.
|
|
280
|
+
|
|
281
|
+
`reportDuplicateKeys` membaca kamus yang belum digabungkan yang ditulis proses build di bawah `.intlayer/`, sehingga tetap diam sampai proyek dibangun setidaknya satu kali. Dua deklarasi yang berbagi kunci akan digabungkan, yang merupakan pola yang sah — laporan ini ada karena field yang ditentukan di kedua sisi secara diam-diam hanya menyimpan salah satu dari dua nilai.
|
|
282
|
+
|
|
283
|
+
Penganalisis dimuat dari `@intlayer/lsp`, yang didistribusikan sebagai ESM. Oleh karena itu, aturan ini memerlukan versi Node yang dapat melakukan `require()` pada modul ES — Node 20.19+ atau 22.12+. Pada versi yang lebih lama, aturan ini tidak melaporkan apa pun alih-alih menggagalkan sesi lint.
|
|
284
|
+
|
|
285
|
+
## Framework
|
|
286
|
+
|
|
287
|
+
Setiap aturan berfungsi di semua integrasi Intlayer, termasuk di dalam template Vue, Svelte, dan Angular. Anda hanya perlu memberi tahu ESLint parser mana yang membaca setiap tipe file.
|
|
288
|
+
|
|
289
|
+
| Framework | File | Parser |
|
|
290
|
+
| ------------------------- | ----------------- | --------------------------------- |
|
|
291
|
+
| React, Preact, Solid, Lit | `.jsx` `.tsx` | `typescript-eslint` |
|
|
292
|
+
| Next.js | `.jsx` `.tsx` | `typescript-eslint` |
|
|
293
|
+
| Vue, Nuxt | `.vue` | `vue-eslint-parser` |
|
|
294
|
+
| Svelte, SvelteKit | `.svelte` | `svelte-eslint-parser` |
|
|
295
|
+
| Angular | `.ts` | `typescript-eslint` |
|
|
296
|
+
| Template Angular | `.component.html` | `@angular-eslint/template-parser` |
|
|
297
|
+
| Astro | `.astro` | `astro-eslint-parser` |
|
|
298
|
+
|
|
299
|
+
```javascript fileName="eslint.config.mjs"
|
|
300
|
+
import intlayer from "eslint-plugin-intlayer";
|
|
301
|
+
import tseslint from "typescript-eslint";
|
|
302
|
+
import vueParser from "vue-eslint-parser";
|
|
303
|
+
import svelteParser from "svelte-eslint-parser";
|
|
304
|
+
import angularTemplateParser from "@angular-eslint/template-parser";
|
|
305
|
+
|
|
306
|
+
export default [
|
|
307
|
+
...intlayer.configs.recommended,
|
|
308
|
+
|
|
309
|
+
{
|
|
310
|
+
files: ["**/*.{ts,tsx,jsx}"],
|
|
311
|
+
languageOptions: { parser: tseslint.parser },
|
|
312
|
+
},
|
|
313
|
+
{
|
|
314
|
+
files: ["**/*.vue"],
|
|
315
|
+
languageOptions: {
|
|
316
|
+
parser: vueParser,
|
|
317
|
+
parserOptions: { parser: tseslint.parser },
|
|
318
|
+
},
|
|
319
|
+
},
|
|
320
|
+
{
|
|
321
|
+
files: ["**/*.svelte"],
|
|
322
|
+
languageOptions: {
|
|
323
|
+
parser: svelteParser,
|
|
324
|
+
parserOptions: { parser: tseslint.parser },
|
|
325
|
+
},
|
|
326
|
+
},
|
|
327
|
+
{
|
|
328
|
+
files: ["**/*.component.html"],
|
|
329
|
+
languageOptions: { parser: angularTemplateParser },
|
|
330
|
+
},
|
|
331
|
+
];
|
|
332
|
+
```
|
|
333
|
+
|
|
334
|
+
Instal hanya parser yang dibutuhkan proyek Anda.
|
|
335
|
+
|
|
336
|
+
> **Keterbatasan yang diketahui.** Dalam template Vue dan Angular, ekspresi seperti `{{ content[key] }}` tidak diperiksa oleh `no-dynamic-field-access`. Pembacaan dinamis yang ditulis dalam blok skrip tertangkap secara normal.
|
|
@@ -159,7 +159,7 @@ pnpm add -D webpack-bundle-analyzer
|
|
|
159
159
|
bun add -d webpack-bundle-analyzer
|
|
160
160
|
```
|
|
161
161
|
|
|
162
|
-
```typescript fileName="webpack.config.ts
|
|
162
|
+
```typescript fileName="webpack.config.ts"
|
|
163
163
|
import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
|
|
164
164
|
|
|
165
165
|
export default {
|
package/docs/it/configuration.md
CHANGED
|
@@ -478,6 +478,30 @@ const config: IntlayerConfig = {
|
|
|
478
478
|
*/
|
|
479
479
|
purge: true,
|
|
480
480
|
|
|
481
|
+
/**
|
|
482
|
+
* Raggruppare i chunk di dizionario per lingua in base al confine di
|
|
483
|
+
* code-splitting che li utilizza, così una pagina caricata in modo lazy
|
|
484
|
+
* recupera il suo contenuto con una sola richiesta.
|
|
485
|
+
* Predefinito: true
|
|
486
|
+
*
|
|
487
|
+
* Nota:
|
|
488
|
+
* - Si applica solo ai dizionari che usano `importMode: 'dynamic'`.
|
|
489
|
+
*/
|
|
490
|
+
chunkGrouping: true,
|
|
491
|
+
|
|
492
|
+
/**
|
|
493
|
+
* Caricare un dizionario insieme al chunk che lo utilizza, invece di
|
|
494
|
+
* recuperarlo una volta che quel chunk viene renderizzato. I lettori vengono
|
|
495
|
+
* renderizzati in modo sincrono invece di sospendersi, quindi la navigazione
|
|
496
|
+
* non mostra più un lampeggio di caricamento.
|
|
497
|
+
* Predefinito: true
|
|
498
|
+
*
|
|
499
|
+
* Nota:
|
|
500
|
+
* - Viene attesa solo la lingua risolta, quindi la pagina scarica solo la
|
|
501
|
+
* lingua che mostra.
|
|
502
|
+
*/
|
|
503
|
+
dictionariesPreload: true,
|
|
504
|
+
|
|
481
505
|
/**
|
|
482
506
|
* Formato di output per i file del dizionario generati.
|
|
483
507
|
* Predefinito: ['cjs', 'esm']
|
|
@@ -1057,15 +1081,17 @@ Le opzioni di build sono applicate ai plugin `@intlayer/babel` e `@intlayer/swc`
|
|
|
1057
1081
|
|
|
1058
1082
|
> Durante l'ottimizzazione, Intlayer sostituirà le chiamate ai dizionari per ottimizzare il suddivisione del codice (chunking) in modo che il bundle risultante importi solo i dizionari effettivamente utilizzati.
|
|
1059
1083
|
|
|
1060
|
-
| Campo
|
|
1061
|
-
|
|
|
1062
|
-
| `mode`
|
|
1063
|
-
| `optimize`
|
|
1064
|
-
| `minify`
|
|
1065
|
-
| `purge`
|
|
1066
|
-
| `checkTypes`
|
|
1067
|
-
| `
|
|
1068
|
-
| `
|
|
1084
|
+
| Campo | Descrizione | Tipo | Predefinito | Esempio | Commenti |
|
|
1085
|
+
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
1086
|
+
| `mode` | Controlla la modalità di build. | `'auto'` | <br/> `'manual'` | `'auto'` | `'manual'` | • `'auto'`: Il build viene lanciato automaticamente durante il build dell'applicazione.<br/>• `'manual'`: Viene eseguito solo tramite un comando di build esplicito.<br/>• Può essere utilizzato per impedire il build dei dizionari (es. per evitare l'esecuzione in ambiente Node.js). |
|
|
1087
|
+
| `optimize` | Controlla se le ottimizzazioni del build debbano essere eseguite. | `boolean` | `undefined` | `process.env.NODE_ENV === 'production'` | • Se non definito, l'ottimizzazione viene lanciata durante il build del framework (Vite/Next.js).<br/>• `true` forza l'ottimizzazione anche in modalità dev.<br/>• `false` la disabilita.<br/>• Se abilitato, sostituisce le chiamate ai dizionari per l'ottimizzazione del chunking.<br/>• Richiede i plugin `@intlayer/babel` e `@intlayer/swc`. |
|
|
1088
|
+
| `minify` | Minifica i dizionari per ridurre le dimensioni del bundle. | `boolean` | `false` | | • Indica se il bundle deve essere minificato.<br/>• Predefinito: `true` in produzione.<br/>• Questa opzione verrà ignorata se `optimize` è disabilitato.<br/>• Questa opzione verrà ignorata se `editor.enabled` è vero. |
|
|
1089
|
+
| `purge` | Rimuovi le chiavi non utilizzate nei dizionari. | `boolean` | `false` | | • Indica se il bundle deve essere rimosso.<br/>• Predefinito: `true` in produzione.<br/>• Questa opzione verrà ignorata se `optimize` è disabilitato. |
|
|
1090
|
+
| `checkTypes` | Indica se il build debba controllare i tipi di TypeScript e loggare gli errori. | `boolean` | `false` | | Può rallentare il processo di build. |
|
|
1091
|
+
| `chunkGrouping` | Indica se raggruppare i chunk di dizionario per lingua in base al confine di code-splitting che li utilizza. | `boolean` | `true` | | • Senza raggruppamento, una pagina composta da molti componenti emette una richiesta per dizionario.<br/>• I dizionari raggiunti da più confini vengono spostati in un chunk condiviso, così nessuna pagina include il contenuto di un'altra.<br/>• Si applica solo ai dizionari che usano `importMode: 'dynamic'`.<br/>• Si applica solo alla build client, e solo durante il bundling (non in dev). |
|
|
1092
|
+
| `dictionariesPreload` | Indica se un dizionario debba essere caricato insieme al chunk che lo utilizza, invece di essere recuperato una volta che quel chunk viene renderizzato. | `boolean` | `true` | | • Il punto di ingresso generato attende la lingua di navigazione al livello superiore, quindi una route caricata in modo lazy non è considerata caricata finché il suo contenuto non è disponibile.<br/>• I lettori vengono renderizzati in modo sincrono invece di sospendersi, quindi la navigazione non mostra più un lampeggio di caricamento.<br/>• Viene attesa solo la lingua risolta, quindi la pagina scarica solo la lingua che mostra.<br/>• Si applica solo ai dizionari che usano `importMode: 'dynamic'`, nella build client.<br/>• Richiede un bundler che supporti il top-level await (Vite, esbuild). |
|
|
1093
|
+
| `outputFormat` | Controlla il formato di output per i dizionari. | `('esm' | 'cjs')[]` | `['esm', 'cjs']` | `['cjs']` | |
|
|
1094
|
+
| `traversePattern` | Pattern che specifica i file da scansionare durante l'ottimizzazione. | `string[]` | `['**/*.{tsx,ts,js,mjs,cjs,jsx,vue,svelte,svte}', '!**/node_modules/**', '!**/dist/**', '!**/.intlayer/**', '!**/*.config.*', '!**/*.test.*', '!**/*.spec.*', '!**/*.stories.*']` | `['src/**/*.{ts,tsx}', '../ui-library/**/*.{ts,tsx}', '!**/node_modules/**']` | • Limita l'ottimizzazione ai file rilevanti per migliorare le prestazioni del build.<br/>• Ignorato se `optimize` è disattivato.<br/>• Utilizza pattern glob. |
|
|
1069
1095
|
|
|
1070
1096
|
---
|
|
1071
1097
|
|
|
@@ -533,28 +533,6 @@ Utilizzato in combinazione con le Varianti, questo campo definisce alternative d
|
|
|
533
533
|
|
|
534
534
|
> Vedi [Varianti](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dynamic_dictionaries/variants.md) per ulteriori informazioni.
|
|
535
535
|
|
|
536
|
-
#### `meta` (`Record<string, string | number | boolean>`)
|
|
537
|
-
|
|
538
|
-
Utilizzato in combinazione con i Record Dinamici, questo campo consente di dichiarare record gestiti dal CMS o dati arbitrari recuperati a runtime tramite un ID opaco. L'identità del dizionario è definita dall'insieme arbitrario di coppie chiave-valore dichiarate in questo campo `meta`.
|
|
539
|
-
|
|
540
|
-
**Esempio:**
|
|
541
|
-
|
|
542
|
-
```typescript
|
|
543
|
-
{
|
|
544
|
-
key: "product-copy",
|
|
545
|
-
meta: {
|
|
546
|
-
id: "prod_abc",
|
|
547
|
-
userId: "user_123"
|
|
548
|
-
},
|
|
549
|
-
content: {
|
|
550
|
-
name: "Widget Pro",
|
|
551
|
-
description: "The best widget."
|
|
552
|
-
}
|
|
553
|
-
}
|
|
554
|
-
```
|
|
555
|
-
|
|
556
|
-
> Vedi [Record Dinamici](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/dynamic_dictionaries/dynamic_content.md) per ulteriori informazioni.
|
|
557
|
-
|
|
558
536
|
### Proprietà CMS
|
|
559
537
|
|
|
560
538
|
##### `version` (stringa)
|
|
@@ -89,6 +89,29 @@ Impossibile recuperare contenuti da un file JSON, usa invece un file .ts o .js
|
|
|
89
89
|
|
|
90
90
|
In questo caso, la funzione `fakeFetch` simula un ritardo per imitare il tempo di risposta del server. Intlayer esegue la funzione asincrona e utilizza il risultato come contenuto per la chiave `text`.
|
|
91
91
|
|
|
92
|
+
## Recupero di Contenuti Remoti
|
|
93
|
+
|
|
94
|
+
Puoi anche assegnare direttamente una promise a un campo di contenuto. Intlayer la attende durante la costruzione dei dizionari e ne inserisce il valore risolto:
|
|
95
|
+
|
|
96
|
+
```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
|
|
97
|
+
import type { Dictionary } from "intlayer";
|
|
98
|
+
|
|
99
|
+
const remoteContent = {
|
|
100
|
+
key: "remote_content",
|
|
101
|
+
content: {
|
|
102
|
+
externalContent: fetch("https://example.com").then((res) => res.json()),
|
|
103
|
+
},
|
|
104
|
+
} satisfies Dictionary;
|
|
105
|
+
|
|
106
|
+
export default remoteContent;
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
```plaintext fileName="**/*.content.json" contentDeclarationFormat="json"
|
|
110
|
+
Impossibile recuperare contenuti da un file JSON, usa invece un file .ts o .js
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
> La richiesta viene eseguita in fase di build, quindi i dati recuperati sono uno snapshot incorporato nel dizionario. Ricostruisci i dizionari per aggiornarlo.
|
|
114
|
+
|
|
92
115
|
## Utilizzo di Contenuti Basati su Funzioni nei Componenti React
|
|
93
116
|
|
|
94
117
|
Per utilizzare contenuti basati su funzioni in un componente React, è necessario importare `useIntlayer` da `react-intlayer` e chiamarlo con l'ID del contenuto per recuperare il contenuto. Ecco un esempio:
|