Nowy Intlayer v6 - Co nowego?

Witamy w Intlayer v6! Ta wersja skupia się na wydajności, doświadczeniu deweloperskim oraz niezawodności. Poniżej znajdują się najważniejsze zmiany wraz z notatkami migracyjnymi i przykładami do kopiowania.

Najważniejsze zmiany

• Nowa komenda: npx intlayer content test do wykrywania brakujących tłumaczeń
• Nowa globalna opcja autoFill do automatycznego generowania brakujących tłumaczeń
• Komenda fill domyślnie pomija istniejące tłumaczenia: npx intlayer fill
• Rozszerzenie VS Code: nowy pasek aktywności Intlayer (Wyszukiwanie i Słowniki), akcje na pasku narzędzi/kontekstowe, automatyczne ujawnianie, komendy Fill/Test
• Budowanie 10× szybciej dzięki równoległemu przetwarzaniu promise
• Zdalne buforowanie słowników, aby uniknąć ponownego pobierania przy starcie aplikacji
• Ulepszone logowanie: ustaw log.mode: 'verbose' aby analizować zachowanie
• Silniejsza walidacja zapobiegająca awariom aplikacji z powodu problemów ze słownikami
• Aktualizacje na żywo z CMS przy użyciu build.importMode = 'fetch' i pnpm intlayer live
• Poprawki: integracja Vue.js, adapter Lynx, Edytor Wizualny na Windows

Nowość: Testowanie brakujących tłumaczeń

Szybko przeprowadź audyt projektu, aby znaleźć brakujące klucze/lokalizacje.

npx intlayer content test

Output:

pnpm intlayer content testBrakujące tłumaczenia: - blog-data       - japoński (ja), koreański (ko), chiński (zh), niemiecki (de), włoski (it) - src/components/BlogPage/blogData.content.ts - demo-page       - francuski (fr), włoski (it)                                         - src/components/DemoPage/demo.content.ts - locale-switcher - włoski (it), portugalski (pt)                                       - src/components/LocaleSwitcher/localeSwitcher.content.tsJęzyki: angielski (en), rosyjski (ru), japoński (ja), francuski (fr), koreański (ko), chiński (zh), hiszpański (es), niemiecki (de), arabski (ar), włoski (it), brytyjski angielski (en-GB), portugalski (pt), hindi (hi)Wymagane języki: angielski (en)Brakujące języki: japoński (ja), koreański (ko), chiński (zh), niemiecki (de), włoski (it), francuski (fr), portugalski (pt)Brakujące wymagane języki: -Łączna liczba brakujących języków: 7Łączna liczba brakujących wymaganych języków: 0

Zobacz więcej opcji w dokumentacji CLI: Referencja CLI → "Testuj brakujące tłumaczenia". A także przewodnik Testowanie.

Nowość: Globalne autoFill do uzupełniania brakujących tłumaczeń

Możesz teraz globalnie włączyć auto-fill, aby każde słowniki z brakującymi tłumaczeniami były automatycznie uzupełniane.

import { type IntlayerConfig, Locales } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,    requiredLocales: [Locales.ENGLISH, Locales.FRENCH],  },  content: {    // Automatyczne generowanie brakujących tłumaczeń dla wszystkich słowników    autoFill: "./{{fileName}}Filled.content.ts",    //    // autoFill: "/messages/{{locale}}/{{key}}/{{fileName}}.content.json",    //    // autoFill: true, // automatyczne generowanie brakujących tłumaczeń dla wszystkich słowników, np. używając "./{{fileName}}.content.json"    //    // autoFill: {    //   en: "./{{fileName}}.en.content.json",    //   fr: "./{{fileName}}.fr.content.json",    //   es: "./{{fileName}}.es.content.json",    // },  },};export default config;

Automatycznie uzupełnij brakujące tłumaczenia za pomocą polecenia npx intlayer fill.

Możesz nadal dostosowywać ustawienia dla poszczególnych słowników, używając pola autoFill w plikach zawartości. Intlayer najpierw uwzględni konfigurację dla konkretnego słownika, a następnie przejdzie do konfiguracji globalnej. Pełną dokumentację znajdziesz w Auto-fill oraz Content file reference.

Polecenie fill: bezpieczniejsze domyślne ustawienia

Polecenie fill domyślnie uzupełnia tylko brakujące tłumaczenia i pomija istniejącą zawartość.

npx intlayer fill

Affected dictionary keys for processing: access-key-creation-form-schema, doc-search-metadata, doc-search-page  - [access-key-creation-form-schema]      Słownik nie ma ścieżki do pliku. Pomijanie.  - [access-key-creation-form-schema]      Przetwarzanie deklaracji zawartości: src/components/Dashboard/ProjectForm/AccessKey/useAccessKeyCreationFormSchema.content.ts  - [access-key-creation-form-schema]      Brak lokalizacji do uzupełnienia - pomijanie słownika  - [doc-search-metadata]                  Słownik nie ma ścieżki do pliku. Pomijanie.  - [doc-search-metadata]                  Przetwarzanie deklaracji zawartości: src/app/[locale]/(docs)/doc/search/metadata.content.ts  - [doc-search-metadata]                  Brak lokalizacji do uzupełnienia - pomijanie słownika  - [doc-search-page]                      Słownik nie ma ścieżki do pliku. Pomijanie.  - [doc-search-page]                      Przetwarzanie deklaracji zawartości: src/app/[locale]/(docs)/doc/search/page.content.ts  - [doc-search-page]                     [Rosyjski (ru)]                   Przygotowywanie tłumaczenia słownika z angielskiego (en) na rosyjski (ru)[intlayer]  Zastosowano formatowanie Prettier do src/app/[locale]/(docs)/doc/search/page.content.ts  - [doc-search-page]                      Deklaracja zawartości zapisana w src/app/[locale]/(docs)/doc/search/page.content.ts

Przykłady CI są dostępne w CI/CD.

Zaktualizowane rozszerzenie VS Code

Rozszerzenie teraz zawiera dedykowaną kartę Intlayer w pasku aktywności oraz kilka usprawnień w przepływie pracy:

• Pasek aktywności Intlayer z dwoma widokami:
  • Widok wyszukiwania do przeszukiwania słownika/treści na żywo
  • Drzewo słowników wyświetlające środowiska, słowniki oraz pliki współtworzące
• Pasek narzędzi w widoku Słowników: Build, Pull, Push, Fill, Refresh, Test, Create Dictionary File
• Menu kontekstowe: Pull/Push na słownikach; Fill na plikach
• Auto‑reveal: aktualny plik edytora jest podświetlany w drzewie Słowników, gdy ma to zastosowanie
• Nowe polecenia dostępne z Palety Poleceń: Fill Dictionaries oraz Test Dictionaries

Szczegóły znajdują się w dokumentacji Oficjalne rozszerzenie VS Code.

Zaktualizowano serwer MCP, aby obsługiwał nowe funkcje.

• Automatyczne wypełnianie
• Testowanie brakujących tłumaczeń
• Aktualizacje na żywo
• Logowanie
• Walidacja
• Notatki migracyjne
• Dokumentacja

Serwer MCP pomaga w automatyzacji projektów korzystających z Intlayer. Testuje brakujące tłumaczenia dla automatycznie generowanego kodu. Pomaga zrozumieć Twoją konfigurację oraz osadzić dokumentację Intlayer w Twoim IDE.

Wydajność: 10× szybciej

• Równoległe rozwiązywanie lokalnych i zdalnych słowników
• Zdalne słowniki są buforowane, aby uniknąć ponownego pobierania przy uruchomieniu aplikacji

npx intlayer build

Wynik:

[intlayer]  Przygotowywanie Intlayer (v6.0.1)[intlayer]  Słowniki:[intlayer]  ✓ Zawartość lokalna: 163/163[intlayer]  ✓ Zawartość zdalna: 100/100[intlayer]   - access-key-creation-form             [local: ✔ built] [distant: ✔ imported][intlayer]   - access-key-form                      [local: ✔ built] [distant: ✔ imported][intlayer]   - ai-ab-testing-section                                 [distant: ✔ imported][intlayer]   - application-not-running-view         [local: ✔ built] [distant: ✔ imported][intlayer]   - available-techno-section             [local: ✔ built] [distant: ✔ imported][intlayer]   - blog-data                            [local: ✔ built][intlayer]   - blog-metadata                        [local: ✔ built][intlayer]   - blog-nav-list                        [local: ✔ built] [distant: ✔ imported][intlayer]   - blog-page                                             [distant: ✔ fetched][intlayer]   - blog-search-page                     [local: ✔ built] [distant: ✔ imported]...[intlayer]  Zawartość załadowana  (Łącznie: 8401ms - Lokalnie: 4050ms - Zdalnie: 4222ms)

Ulepszenia logowania

System logowania został ulepszony, aby dostarczać bardziej szczegółowe informacje o tym, co dzieje się podczas transformacji w trakcie budowania i działania aplikacji.

Włącz szczegółowe logi, aby lepiej zrozumieć, co dzieje się podczas transformacji w trakcie budowania i działania aplikacji.

export default {  log: {    mode: "verbose", // opcje: "default" | "verbose" | "disabled"  },};

Zobacz Konfiguracja dla wszystkich opcji logowania.

Silniejsza walidacja

Przetwarzanie słowników teraz wykonuje bardziej solidną walidację. Gdy przetwarzanie słownika się nie powiedzie, Intlayer unika przerwania działania aplikacji i wyświetla błędy, które można naprawić.

Aktualizacje na żywo z CMS (bezpieczne dla produkcji)

Serwuj na żywo aktualizacje treści (np. aktualizacje redakcyjne) w środowisku produkcyjnym bez konieczności przebudowy aplikacji.

1. Włącz tryb importu na żywo:

import { type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  build: {    importMode: "fetch", // "static" | "dynamic" | "live"  },  editor: {    liveSync: true, // włącz synchronizację na żywo po stronie serwera  },};export default config;

2. Uruchom aplikację i proces na żywo równolegle:

npx intlayer live --with 'vite preview'

Uwagi:

• Tylko słowniki oznaczone do użycia trybu na żywo będą pobierane na żywo. Pozostałe są zoptymalizowane pod kątem wydajności.
• W przypadku braku dostępności API na żywo następuje powrót do importu dynamicznego.

Zobacz CMS i Live Sync oraz Konfiguracja dla pełnych wskazówek.

Równoległy proces do obserwacji plików na turbopack

Podczas korzystania z Turbopack w Next.js 14 i nowszych jako serwera deweloperskiego z poleceniem next dev --turbopack, zmiany w słownikach nie będą domyślnie automatycznie wykrywane.

To ograniczenie występuje, ponieważ Turbopack nie może uruchamiać wtyczek webpack równolegle, aby monitorować zmiany w plikach zawartości.

Aby to obejść, zrezygnowaliśmy z polecenia intlayer watch, używając opcji --with, aby uruchomić jednocześnie serwer deweloperski i obserwatora budowy Intlayer.

{  "scripts": {    "dev": "npx intlayer watch --with 'next dev --turbopack'",  },}

Notatki migracyjne

• Usunięto: dictionaryOutput (wcześniej i18next lub next-intl). W przyszłych wersjach pojawi się ponownie jako modułowe adaptery. Usuń to pole z konfiguracji.
• Powiązane usunięcie: i18nextResourcesDir (zobacz changelog w doc/configuration).
• Zalecane jest użycie nowej globalnej opcji content.autoFill do masowego generowania brakujących tłumaczeń.
• Użyj npx intlayer content test, aby blokować PR-y z powodu brakujących tłumaczeń.
• Dla szczegółowej diagnostyki ustaw log.mode = 'verbose'.
• W konfiguracji Vite używaj intlayer zamiast intlayerPlugin oraz intlayerProxy zamiast intlayerProxyPlugin.

Poprawki

• Stabilność integracji z Vue.js
• Ulepszenia adaptera Lynx
• Edytor wizualny na Windows

Notatki migracyjne z wersji v6 do v7

Sprawdź notatki migracyjne z v6 do v7 aby uzyskać więcej informacji.

Przydatne linki

• Referencja CLI
• Auto‑uzupełnianie
• Konfiguracja
• Referencja pliku zawartości
• Oficjalne rozszerzenie VS Code
• CMS i synchronizacja na żywo