Intlayer v7 Mới - Có gì mới?

Chào mừng đến với Intlayer v7! Phiên bản lớn này giới thiệu các cải tiến đáng kể về hiệu suất, an toàn kiểu và trải nghiệm nhà phát triển. Dưới đây là những điểm nổi bật, kèm theo ghi chú di chuyển và ví dụ thực tiễn.

Những điểm nổi bật

• Chiến lược lưu bộ nhớ đệm để xây dựng nhanh hơn
• Cải tiến việc tạo kiểu TypeScript với các kiểu riêng cho từng ngôn ngữ
• Tối ưu gói: Các ngôn ngữ được lưu dưới dạng chuỗi thay vì enum
• Các chế độ định tuyến mới: prefix-no-default, prefix-all, no-prefix, search-params
• Lưu trữ ngôn ngữ tuân thủ GDPR với localStorage làm mặc định
• Cấu hình lưu trữ linh hoạt: cookies, localStorage, sessionStorage, hoặc kết hợp nhiều loại
• Kích thước gói Visual Editor giảm 30%
• Tùy chọn cấu hình middleware được cải thiện
• Cập nhật hành vi lệnh fill để quản lý nội dung tốt hơn
• Tăng cường độ ổn định với việc cập nhật đầy đủ các tệp khai báo nội dung
• Quản lý thử lại thông minh để đảm bảo độ chính xác dịch thuật
• Xử lý song song để tăng tốc quá trình dịch thuật
• Chia nhỏ thông minh để xử lý các tệp lớn trong giới hạn ngữ cảnh AI

Hiệu suất: Bộ nhớ đệm để tăng tốc quá trình build

Thay vì xây dựng lại các khai báo nội dung với esbuild trong mỗi lần build, phiên bản v7 triển khai một chiến lược lưu bộ nhớ đệm giúp tăng tốc quá trình build.

npx intlayer build

Hệ thống lưu bộ nhớ đệm mới:

• Lưu trữ các khai báo nội dung đã biên dịch để tránh xử lý trùng lặp
• Phát hiện thay đổi và chỉ xây dựng lại các tệp đã sửa đổi
• Giảm đáng kể thời gian build cho các dự án lớn

TypeScript: Tạo kiểu riêng cho từng ngôn ngữ

Kiểu TypeScript giờ đây được tạo riêng cho từng ngôn ngữ, cung cấp kiểu mạnh hơn và loại bỏ các kiểu hợp nhất (union types) giữa các ngôn ngữ.

Hành vi v6:

const content = getIntlayer("my-title-content", "en");// typeof content = { title: "My title" } | { title: "Mon titre" } | { title: "Mi título" }

Hành vi v7:

const content = getIntlayer("my-title-content", "en");// typeof content = { title: "My title" }

Lợi ích:

• Tự động hoàn thành chính xác hơn trong IDE của bạn
• An toàn kiểu tốt hơn, không bị lẫn lộn kiểu giữa các ngôn ngữ
• Cải thiện hiệu suất bằng cách giảm độ phức tạp kiểu

Tối ưu gói: Các ngôn ngữ dưới dạng chuỗi

Kiểu Locales không còn là enum nữa, điều này có nghĩa là nó hoàn toàn có thể tree-shake và sẽ không làm phình to gói của bạn với hàng nghìn bản ghi ngôn ngữ không sử dụng.

v6:

import { Locales } from "intlayer";// Enum bao gồm tất cả các ngôn ngữ -> không thể tree-shakeconst locale: Locales = Locales.ENGLISH;

v7:

import { Locales, Locale } from "intlayer";// Kiểu chuỗi -> hoàn toàn có thể tree-shakeconst locale: Locale = Locales.ENGLISH;

Vì Locales không còn là enum nữa, bạn sẽ phải thay đổi kiểu từ Locales thành Locale để lấy locale dưới dạng kiểu.

Xem chi tiết triển khai để biết thêm thông tin.

Chế độ định tuyến mới cho sự linh hoạt hơn

Phiên bản v7 giới thiệu cấu hình routing.mode thống nhất thay thế cho các tùy chọn prefixDefault và noPrefix trước đây, cung cấp kiểm soát chi tiết hơn đối với cấu trúc URL.

Các chế độ định tuyến có sẵn

• prefix-no-default (mặc định): Ngôn ngữ mặc định không có tiền tố, các ngôn ngữ khác có
  • /dashboard (en) hoặc /fr/dashboard (fr)
• prefix-all: Tất cả các ngôn ngữ đều có tiền tố
  • /en/dashboard (en) hoặc /fr/dashboard (fr)
• no-prefix: Không có tiền tố locale trong URL (locale được xử lý qua lưu trữ/headers)
  • /dashboard cho tất cả các locale
• search-params: Locale được truyền dưới dạng tham số truy vấn
  • /dashboard?locale=en hoặc /dashboard?locale=fr

Cấu hình cơ bản

// intlayer.config.tsexport default {  internationalization: {    locales: ["en", "fr", "es"],    defaultLocale: "en",  },  routing: {    mode: "prefix-no-default", // mặc định  },};

Tuân thủ GDPR: lưu trữ localStorage / cookies

Phiên bản v7 ưu tiên quyền riêng tư của người dùng bằng cách sử dụng localStorage làm cơ chế lưu trữ mặc định thay vì cookies. Thay đổi này giúp tuân thủ GDPR bằng cách tránh yêu cầu đồng ý cookie cho tùy chọn locale.

Các tùy chọn cấu hình lưu trữ

Trường routing.storage mới cũng có sẵn bên cạnh các tùy chọn trước đó như middleware.cookieName và middleware.serverSetCookie, cung cấp các cấu hình lưu trữ linh hoạt:

// Vô hiệu hóa lưu trữstorage: false// Các loại lưu trữ đơn giảnstorage: 'cookie'storage: 'localStorage'storage: 'sessionStorage'// Cookie với các thuộc tính tùy chỉnhstorage: {  type: 'cookie',  name: 'custom-locale',  domain: '.example.com',  secure: true,  sameSite: 'strict'}// localStorage với khóa tùy chỉnhstorage: {  type: 'localStorage',  name: 'custom-locale'}// Nhiều loại lưu trữ để dự phòngstorage: ['cookie', 'localStorage']

Ví dụ cấu hình tuân thủ GDPR

Dành cho các ứng dụng sản xuất cần cân bằng giữa chức năng và tuân thủ GDPR:

// intlayer.config.tsexport default {  internationalization: {    locales: ["en", "fr", "es"],    defaultLocale: "en",  },  routing: {    mode: "prefix-no-default",    storage: [      {        type: "localStorage", // Lưu trữ chính (không cần sự đồng ý)        name: "user-locale",      },      {        type: "cookie", // Lưu trữ cookie tùy chọn (cần sự đồng ý)        name: "user-locale",        secure: true,        sameSite: "strict",        httpOnly: false,      },    ],  },};

Bật / tắt lưu trữ cookie

Ví dụ sử dụng React / Next.js:

Có thể được định nghĩa toàn cục:

<IntlayerProvider isCookieEnabled={false}>  <App /></IntlayerProvider>

Có thể ghi đè cục bộ cho từng hook:

const { setLocale } = useLocale({ isCookieEnabled: false });setLocale("en");

Lưu ý: Cookie được bật theo mặc định. Lưu ý: Kiểm tra yêu cầu cookie GDPR cho trường hợp sử dụng cụ thể của bạn.

Trình chỉnh sửa trực quan: Gói nhỏ hơn 30%

Gói Trình chỉnh sửa trực quan đã được tối ưu hóa để nhỏ hơn 30% so với phiên bản trước, nhờ vào:

• Cải thiện hiệu suất trình chỉnh sửa mã
• Loại bỏ các phụ thuộc không cần thiết trên các gói lõi của Intlayer
• Cải tiến tree-shaking và đóng gói module

Điều này giúp giảm thời gian tải xuống và cải thiện hiệu suất chạy ứng dụng của bạn.

Lệnh fill: Hành vi cập nhật để quản lý nội dung tốt hơn

Phiên bản v7 giới thiệu hành vi cải tiến cho lệnh fill, cung cấp quản lý nội dung linh hoạt và dễ dự đoán hơn:

Hành vi fill mới

• fill: true - Ghi đè tệp hiện tại với nội dung đã điền cho tất cả các ngôn ngữ
• fill: "path/to/file" - Điền vào tệp được chỉ định mà không sửa đổi tệp hiện tại
• fill: false - Vô hiệu hóa hoàn toàn tính năng tự động điền

Hỗ trợ nâng cao cho các cấu trúc nội dung phức tạp

Lệnh fill hiện hỗ trợ các cấu trúc khai báo nội dung phức tạp, bao gồm:

• Đối tượng ghép: Các khai báo nội dung tham chiếu đến các đối tượng khác
• Nội dung giải cấu trúc: Nội dung sử dụng các mẫu giải cấu trúc
• Tham chiếu lồng nhau: Các đối tượng gọi lẫn nhau trong các hệ thống phân cấp phức tạp
• Cấu trúc nội dung động: Nội dung có các thuộc tính điều kiện hoặc tính toán

Lợi ích

• Ý định rõ ràng hơn: Hành vi giờ đây rõ ràng hơn về những gì được sửa đổi
• Tách biệt tốt hơn: Các tệp nội dung có thể được giữ riêng biệt với các bản dịch đã điền
• Quy trình làm việc cải tiến: Các nhà phát triển có nhiều quyền kiểm soát hơn về nơi lưu trữ các bản dịch
• Hỗ trợ cấu trúc phức tạp: Xử lý các kiến trúc nội dung tinh vi với nhiều đối tượng liên kết phức tạp

Ví dụ sử dụng

// Ghi đè tệp hiện tại với tất cả các ngôn ngữconst content = {  key: "example",  fill: true, // Ghi đè tệp này  content: {    title: "Hello World",  },};// Điền vào tệp riêng biệt mà không sửa đổi tệp hiện tạiconst content = {  key: "example",  fill: "./translations.json", // Tạo/cập nhật translations.json  content: {    title: "Hello World",  },};// Vô hiệu hóa tự động điềnconst content = {  key: "example",  fill: false, // Không tự động điền  content: {    title: "Hello World",  },};// Cấu trúc nội dung phức tạp với các đối tượng ghépconst sharedContent = {  buttons: {    save: "Lưu",    cancel: "Hủy",  },};const content = {  key: "complex-example",  fill: true,  content: {    // Tham chiếu đến các đối tượng khác    sharedContent,    // Nội dung được giải cấu trúc    ...sharedContent,    // Tham chiếu lồng nhau    sections: [      {        ...sharedContent.buttons,        header: "Phần 1",      },    ],  },};

Tăng cường độ ổn định và quản lý bản dịch

Phiên bản v7 giới thiệu một số cải tiến để làm cho việc dịch nội dung trở nên đáng tin cậy và hiệu quả hơn:

Cập nhật đầy đủ tệp khai báo nội dung

Hệ thống hiện cập nhật các tệp .content.{ts,js,cjs,mjs} thay vì cập nhật từng phần, đảm bảo:

• Toàn vẹn dữ liệu: Việc viết lại toàn bộ file ngăn ngừa các cập nhật một phần có thể làm hỏng nội dung
• Tính nhất quán: Tất cả các ngôn ngữ được cập nhật đồng thời, duy trì sự đồng bộ
• Độ tin cậy: Giảm nguy cơ các file nội dung bị thiếu hoặc bị lỗi định dạng

Quản lý thử lại thông minh

Cơ chế thử lại mới ngăn việc đẩy nội dung với định dạng sai, và tránh làm gián đoạn toàn bộ quá trình điền nếu một yêu cầu thất bại.

Song song hóa để xử lý nhanh hơn

Các thao tác dịch thuật hiện chạy theo hàng đợi để thực thi song song. Điều này tăng tốc đáng kể quá trình.

Chia nhỏ thông minh cho các file lớn

Chiến lược chia nhỏ nâng cao xử lý các file nội dung lớn mà không vượt quá giới hạn ngữ cảnh của AI:

Ví dụ quy trình làm việc

// File nội dung lớn được tự động chia nhỏconst content = {  key: "large-documentation",  fill: true,  content: {    // Nội dung lớn được tự động chia nhỏ để xử lý AI    introduction: "..." // hơn 5000 ký tự    sections: [      // Nhiều phần lớn    ]  }};

Hệ thống tự động:

1. Phân tích kích thước và cấu trúc nội dung
2. Chia nhỏ nội dung phù hợp
3. Xử lý các phần song song
4. Xác thực và thử lại nếu cần
5. Tái tạo lại file hoàn chỉnh

Ghi chú di chuyển từ v6

Các cấu hình đã loại bỏ

• middleware.cookieName: Thay thế bằng routing.storage
• middleware.serverSetCookie: Thay thế bằng routing.storage
• middleware.prefixDefault: Thay thế bằng routing.mode
• middleware.noPrefix: Thay thế bằng routing.mode

Bản đồ di chuyển

Bản đồ cấu hình

Ví dụ di chuyển

Trước (v6):

export default {  middleware: {    headerName: "x-intlayer-locale",    cookieName: "intlayer-locale",    prefixDefault: false,    basePath: "",    serverSetCookie: "always",    noPrefix: false,  },};

Sau (v7):

export default {  routing: {    mode: "prefix-no-default",    storage: "localStorage", // hoặc 'cookie' nếu bạn cần lưu trữ bằng cookie    headerName: "x-intlayer-locale",    basePath: "",  },};

Bản đồ nội dung từ điển

Ví dụ di chuyển

Trước (v6):

const content = {  key: "example",  autoFill: true, // Viết lại file này  content: {    title: "Hello World",  },};

Sau (v7):

const content = {  key: "example",  fill: true, // Ghi đè file này  content: {    title: "Hello World",  },};

Ghi chú di chuyển từ v5 lên v6

Xem ghi chú di chuyển từ v5 lên v6 để biết thêm thông tin.

Liên kết hữu ích

• Tham khảo Cấu hình
• Tài liệu Middleware
• Kiểu TypeScript
• Hướng dẫn Cookie GDPR