@intlayer/docs 8.12.5-canary.0 → 9.0.0-canary.2

package/docs/zh/intlayer_with_vite+react.md

@@ -71,246 +71,6 @@ Intlayer 不仅仅是一个 i18n 解决方案，还提供了一个**自托管的
 
 ---
 
-## 在 Vite 和 React 应用中设置 Intlayer 的分步指南
-
-<Tabs defaultTab="video">
-  <Tab label="视频" value="video">
-  
-<iframe title="Vite 和 React 最佳的国际化解决方案？探索 Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/dS9L7uJeak4?si=VaKmrYMmXjo3xpk2"/>
-
-  </Tab>
-  <Tab label="代码" value="code">
-
-<iframe
-  src="https://ide.intlayer.org/aymericzip/intlayer-vite-react-template?file=intlayer.config.ts"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="演示 CodeSandbox - 如何使用 Intlayer 国际化您的应用程序"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-  <Tab label="演示" value="demo">
-
-<iframe
-  src="https://intlayer-vite-react-template.vercel.app"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="演示 - intlayer-vite-react-template"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-</Tabs>
-
-请参阅 GitHub 上的 [Application Template](https://github.com/aymericzip/intlayer-vite-react-template)。
-
-### 第一步：安装依赖
-
-使用 npm 安装所需的包：
-
-```bash packageManager="npm"
-npm install intlayer react-intlayer
-npm install vite-intlayer --save-dev
-npx intlayer init
-```
-
-```bash packageManager="pnpm"
-pnpm add intlayer react-intlayer
-pnpm add vite-intlayer --save-dev
-pnpm intlayer init
-```
-
-```bash packageManager="yarn"
-yarn add intlayer react-intlayer
-yarn add vite-intlayer --save-dev
-yarn intlayer init
-```
-
-```bash packageManager="bun"
-bun add intlayer react-intlayer
-bun add vite-intlayer --dev
-bun x intlayer init
-```
-
-- **intlayer**
-
-核心包，提供用于配置管理、翻译、[内容声明](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/content_file.md)、转译和[CLI命令](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/cli/index.md)的国际化工具。
-
-- **react-intlayer**
-  将 Intlayer 集成到 React 应用中的包。它提供了用于 React 国际化的上下文提供者和钩子。
-
-- **vite-intlayer**
-  包含用于将 Intlayer 集成到 [Vite 打包工具](https://vite.dev/guide/why.html#why-bundle-for-production) 的 Vite 插件，以及用于检测用户首选语言环境、管理 Cookie 和处理 URL 重定向的中间件。
-
-### 第2步：配置您的项目
-
-创建一个配置文件来配置您应用程序的语言：
-
-```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import { Locales, type IntlayerConfig } from "intlayer";
-
-const config: IntlayerConfig = {
-  internationalization: {
-    locales: [
-      Locales.ENGLISH,
-      Locales.FRENCH,
-      Locales.SPANISH,
-      // 您的其他语言
-    ],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
-
-export default config;
-```
-
-> 通过此配置文件，您可以设置本地化的 URL、中间件重定向、cookie 名称、内容声明的位置和扩展名，禁用控制台中的 Intlayer 日志等。有关可用参数的完整列表，请参阅[配置文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/configuration.md)。
-
-### 第三步：在您的 Vite 配置中集成 Intlayer
-
-将 intlayer 插件添加到您的配置中。
-
-```typescript fileName="vite.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react-swc";
-import { intlayer } from "vite-intlayer";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react(), intlayer()],
-});
-```
-
-> `intlayer()` Vite 插件用于将 Intlayer 集成到 Vite 中。它确保内容声明文件的构建，并在开发模式下监视这些文件。在 Vite 应用程序中定义了 Intlayer 环境变量。此外，它还提供别名以优化性能。
-
-### 第4步：声明您的内容
-
-创建并管理您的内容声明以存储翻译：
-
-```tsx fileName="src/app.content.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
-import { t, type Dictionary } from "intlayer";
-import type { ReactNode } from "react";
-
-const appContent = {
-  key: "app",
-  content: {
-    viteLogo: t({
-      en: "Vite logo",
-      fr: "Logo Vite",
-      es: "Logo Vite",
-    }),
-    reactLogo: t({
-      en: "React logo",
-      fr: "Logo React",
-      es: "Logo React",
-    }),
-
-    title: "Vite + React",
-
-    count: t({
-      en: "count is ",
-      fr: "le compte est ",
-      es: "el recuento es ",
-    }),
-
-    edit: t<ReactNode>({
-      en: (
-        <>
-          编辑 <code>src/App.tsx</code> 并保存以测试 HMR
-        </>
-      ),
-      fr: (
-        <>
-          Éditez <code>src/App.tsx</code> et enregistrez pour tester HMR
-        </>
-      ),
-      es: (
-        <>
-          Edita <code>src/App.tsx</code> y guarda para probar HMR
-        </>
-      ),
-    }),
-
-    readTheDocs: t({
-      en: "点击 Vite 和 React 标志以了解更多信息",
-      fr: "Cliquez sur les logos Vite et React pour en savoir plus",
-      es: "Haga clic en los logotipos de Vite y React para obtener más información",
-    }),
-  },
-} 满足 Dictionary;
-
-export default appContent;
-```
-
-```json fileName="src/app.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "app",
-  "content": {
-    "viteLogo": {
-      "nodeType": "translation",
-      "translation": {
-        "en": "Vite logo",
-        "fr": "Logo Vite",
-        "es": "Logo Vite"
-      }
-    },
-    "reactLogo": {
-      "nodeType": "translation",
-      "translation": {
-        "zh": "React 标志",
-        "en": "React logo",
-        "fr": "Logo React",
-        "es": "Logo React"
-      }
-    },
-    "title": {
-      "nodeType": "translation",
-      "translation": {
-        "zh": "Vite + React",
-        "en": "Vite + React",
-        "fr": "Vite + React",
-        "es": "Vite + React"
-      }
-    },
-    "count": {
-      "nodeType": "translation",
-      "translation": {
-        "zh": "计数为 ",
-        "en": "count is ",
-        "fr": "le compte est ",
-        "es": "el recuento es "
-      }
-    },
-    "edit": {
-      "nodeType": "translation",
-      "translation": {
-        "zh": "编辑 src/App.tsx 并保存以测试 HMR",
-        "en": "Edit src/App.tsx and save to test HMR",
-        "fr": "Éditez src/App.tsx et enregistrez pour tester HMR",
-        "es": "Edita src/App.tsx y guarda para probar HMR"
-      }
-    },
-    "readTheDocs": {
-      "nodeType": "translation",
-      "translation": {
-        "zh": "点击 Vite 和 React 标志以了解更多信息",
-        "en": "Click on the Vite and React logos to learn more",
-        "fr": "Cliquez sur les logos Vite et React pour en savoir plus",
-        "es": "Haga clic en los logotipos de Vite y React para obtener más información"
-      }
-    }
-  }
-}
-```
-
-> 您的内容声明可以定义在应用程序中的任何位置，只要它们被包含在 `contentDir` 目录中（默认是 `./src`），并且匹配内容声明文件的扩展名（默认是 `.content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}`）。
-
-> 更多详情，请参阅[内容声明文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/content_file.md)。
-
-> 如果您的内容文件包含 TSX 代码，您应考虑在内容文件中导入 `import React from "react";`。
-
 ### 第5步：在代码中使用 Intlayer
 
 在整个应用程序中访问您的内容字典：
@@ -812,54 +572,6 @@ bun run build # Or bun run dev
 
 </Steps>
 
-### 配置 TypeScript
-
-Intlayer 使用模块增强（module augmentation）来利用 TypeScript 的优势，使您的代码库更健壮。
-
-![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
-
-![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
-
-确保您的 TypeScript 配置包含自动生成的类型。
-
-```json5 fileName="tsconfig.json"
-{
-  // ... 您现有的 TypeScript 配置
-  "include": [
-    // ... 您现有的 TypeScript 配置
-    ".intlayer/**/*.ts", // 包含自动生成的类型
-  ],
-}
-```
-
-### Git 配置
-
-建议忽略 Intlayer 生成的文件，这样可以避免将它们提交到您的 Git 仓库中。
-
-为此，您可以在 `.gitignore` 文件中添加以下指令：
-
-```plaintext fileName=".gitignore"
-# 忽略 Intlayer 生成的文件
-.intlayer
-```
-
-### VS Code 扩展
-
-为了提升您使用 Intlayer 的开发体验，您可以安装官方的 **Intlayer VS Code 扩展**。
-
-[从 VS Code 市场安装](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-该扩展提供：
-
-- **翻译键的自动补全**。
-- **实时错误检测**，用于缺失的翻译。
-- **内联预览**已翻译的内容。
-- **快速操作**，轻松创建和更新翻译。
-
-有关如何使用该扩展的更多详细信息，请参阅[Intlayer VS Code 扩展文档](https://intlayer.org/doc/vs-code-extension)。
-
----
-
 ### （可选）站点地图与 robots.txt（构建时生成）
 
 Intlayer 提供 `generateSitemap` 与 `getMultilingualUrls`，可将面向爬虫的多语言 `sitemap.xml` 和 `robots.txt` 格式化并自动写入 `public/`。实践中在 Vite **之前**运行小型 Node 脚本（例如 npm 的 `predev` / `prebuild`）即可在构建或开发时生成这些文件。
@@ -934,6 +646,54 @@ console.log("SEO files generated successfully.");
 
 若使用 pnpm 或 yarn，请相应调整命令；也可在 CI 或其他步骤中调用该脚本。
 
+### 配置 TypeScript
+
+Intlayer 使用模块扩展 (module augmentation) 来利用 TypeScript 的优势，并使你的 codebase 更强大。
+
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
+
+![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
+
+确保你的 TypeScript 配置包含了自动生成的类型。
+
+```json5 fileName="tsconfig.json"
+{
+  // ... 你现有的 TypeScript 配置
+  "include": [
+    // ... 你现有的 TypeScript 配置
+    ".intlayer/**/*.ts", // 包含自动生成的类型
+  ],
+}
+```
+
+### Git 配置
+
+建议忽略由 Intlayer 生成的文件。这可以让你避免将它们提交到你的 Git 仓库。
+
+为此，你可以将以下指令添加到你的 `.gitignore` 文件中：
+
+```plaintext fileName=".gitignore"
+# 忽略由 Intlayer 生成的文件
+.intlayer
+```
+
+### VS Code 扩展
+
+为了提升使用 Intlayer 的开发体验，你可以安装官方的 **Intlayer VS Code 扩展**。
+
+[从 VS Code 市场安装](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+
+该扩展提供：
+
+- 翻译键的**自动补全**。
+- 针对缺失翻译的**实时错误检测**。
+- 已翻译内容的**行内预览**。
+- 轻松创建和更新翻译的**快速操作**。
+
+有关如何使用该扩展的更多详细信息，请参阅 [Intlayer VS Code 扩展文档](https://intlayer.org/zh/doc/vs-code-extension)。
+
+---
+
 ### 深入了解
 
 要进一步使用，您可以实现[可视化编辑器](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_visual_editor.md)或使用[内容管理系统（CMS）](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_CMS.md)将内容外部化。

package/docs/zh/releases/v8.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-22
-updatedAt: 2026-01-26
+updatedAt: 2026-06-14
 title: Intlayer v8 新功能 - 有什么新变化？
 description: 了解 Intlayer v8 的新特性。在开发者体验、内容验证和字典管理方面带来重大改进。
 keywords:

package/docs/zh/releases/v9.md

@@ -0,0 +1,220 @@
+---
+createdAt: 2026-06-14
+updatedAt: 2026-06-14
+title: New Intlayer v9 - What's new?
+description: Discover what's new in Intlayer v9. Introducing drop-in compatibility packages for popular i18n libraries and support for Collections, Variants, and Dynamic Records.
+keywords:
+  - Intlayer
+  - Compatibility
+  - Migration
+  - Collections
+  - Variants
+  - Dynamic Records
+  - i18next
+  - next-intl
+  - vue-i18n
+slugs:
+  - doc
+  - releases
+  - v9
+author: aymericzip
+---
+
+# New Intlayer v9 - What's new?
+
+Welcome to Intlayer v9! This major release marks a huge milestone in simplifying the migration path to Intlayer with **Compat Adapter Packages** for major i18n libraries (`react-i18next`, `next-intl`, `vue-i18n`, etc.) and adds support for rich content structures: **Collections**, **Variants**, and **Dynamic Records**.
+
+## Table of contents
+
+<TOC levels={[2]} maxDepth={1} />
+
+---
+
+## Compat Adapter Packages
+
+Migrating to Intlayer from popular i18n libraries is now easier than ever. We have created five compat packages that expose the **exact same public APIs** as standard i18n libraries but delegate all translation work to Intlayer at runtime.
+
+### Expose Same Public API with Strict Typing
+
+By replacing imports, you get all the benefits of Intlayer (including compile-time type safety against your actual dictionaries) with minimal code changes:
+
+- `@intlayer/i18next`
+- `@intlayer/react-i18next`
+- `@intlayer/next-intl`
+- `@intlayer/next-i18next`
+- `@intlayer/vue-i18n`
+
+For example, simply change:
+
+```ts
+import { useTranslation } from "react-i18next";
+```
+
+to:
+
+```ts
+import { useTranslation } from "@intlayer/react-i18next";
+```
+
+Your keys will now be **strictly typed** against your Intlayer dictionaries, offering full dot-path auto-completion in your IDE!
+
+### Bundler Alias Plugins (Vite, Next.js, Turbopack)
+
+To allow migrating without rewriting all your import statements manually, each compat adapter package includes a **custom bundler plugin** (Vite or Next.js) under the `/plugin` subpath.
+
+These plugins automatically rewrite existing imports (e.g. `react-i18next` or `next-intl`) to their `@intlayer/*` equivalents at build time.
+
+#### Next.js (Webpack / Turbopack) Example
+
+Instead of `withIntlayer`, wrap your Next.js configuration with the compat plugin:
+
+```ts fileName="next.config.ts"
+import { createNextI18nPlugin } from "@intlayer/next-i18next/plugin";
+import type { NextConfig } from "next";
+
+const withIntlayer = createNextI18nPlugin();
+const nextConfig: NextConfig = {};
+
+export default withIntlayer(nextConfig);
+```
+
+#### Vite (React, Vue, Solid, Svelte) Example
+
+```ts fileName="vite.config.ts"
+import vueI18nVitePlugin from "@intlayer/vue-i18n/plugin";
+
+export default defineConfig({
+  plugins: [vueI18nVitePlugin()],
+});
+```
+
+---
+
+## Mutualized Runtime Resolver
+
+All compat adapters now route translation resolution through a single, highly optimized runtime parser: `@intlayer/core/messageFormat`.
+
+- **Interpolate Message**: Resolves standard `{{var}}` (whitespace & dot-paths), ICU formatted args (`{v, number, percent}` etc.), and bare `{var}` templates.
+- **Message Node Resolver**: Resolves nested nodes: `insert()`, `plural()` (CLDR plural rules), `enu()` (enumeration), `gender()`, HTML tags, arrays, and callable function nodes.
+- **Tokenized Tag Parser**: Supports inline XML/HTML tags and numbered tags (e.g., `<1>children</1>`) to power rich-text rendering out of the box.
+
+---
+
+## Feature Spec: Collections, Variants & Dynamic Records
+
+Intlayer v9 expands beyond static key-value objects, allowing dictionaries to declare dynamic layout structures that are fully typed end-to-end.
+
+### 1. Collections
+
+Define a CMS-managed list of ordered items (e.g. FAQs, products, or blog lists):
+
+```ts fileName="faq.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+export default {
+  key: "faq",
+  content: [
+    {
+      question: t({ en: "What is Intlayer?", fr: "Qu'est-ce qu'Intlayer ?" }),
+      answer: t({ en: "An i18n toolkit.", fr: "Une boîte à outils i18n." }),
+    },
+  ],
+} satisfies Dictionary;
+```
+
+#### Usage:
+
+```ts
+// Fetch all items
+const allFaqs = useIntlayer("faq"); // -> { question: string, answer: string }[]
+
+// Fetch single item by index
+const faq = useIntlayer("faq", { item: 1 }); // -> { question: string, answer: string }
+```
+
+### 2. Variants
+
+Deliver A/B tests, seasonal headers, feature flags, or custom landing pages:
+
+```ts fileName="hero.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+export default {
+  key: "hero-banner",
+  variant: "default",
+  content: {
+    control: t({ en: "Welcome", fr: "Bienvenue" }),
+    black_friday: t({ en: "Shop now", fr: "Acheter maintenant" }),
+  },
+} satisfies Dictionary;
+```
+
+#### Usage:
+
+```ts
+const banner = useIntlayer("hero-banner", { variant: "black_friday" });
+```
+
+### 3. Dynamic Records
+
+Define dictionaries whose entries are loaded dynamically at runtime via query IDs:
+
+```ts fileName="product.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+export default {
+  key: "product-copy",
+  meta: {
+    id: "prod_123",
+    category: "books",
+  },
+  content: {
+    title: t({ en: "Clean Code", fr: "Code Propre" }),
+  },
+} satisfies Dictionary;
+```
+
+#### Usage:
+
+```ts
+// Fetches only the requested item dynamically (requires Suspense)
+const product = useIntlayer("product-copy", {
+  id: "prod_123",
+  category: "books",
+});
+```
+
+---
+
+## Dynamic Loading & Bundle Size Optimizations
+
+To keep bundles extremely small, Intlayer v9 supports dynamic lazy loading.
+
+In your configuration, set `importMode` to `'dynamic'` or `'fetch'`:
+
+```ts fileName="intlayer.config.ts"
+export default {
+  dictionary: {
+    importMode: "dynamic", // "static" | "dynamic" | "fetch"
+  },
+};
+```
+
+At build time, `@intlayer/swc` and `@intlayer/babel` scan your files and replace `useIntlayer` / `getIntlayer` calls with tree-shakeable wrappers (`useDictionary` / `useDictionaryDynamic`). Only the content required for the selected collection item, variant, or locale is loaded, preventing your production bundle from containing unused translations.
+
+---
+
+## Migration notes from v8
+
+If you are upgrading from v8, note that the v9 does not include breaking changes. But here are the key changes:
+
+- **Locales & Dialects**: If using external i18n dependencies, add their respective compat adapter plugins in your configuration or bundler setup to automatically rewrite imports.
+- **Custom Selectors**: When calling `useIntlayer`, the second parameter is now reserved for an option object containing `{ locale, item, variant, id }`. If you previously passed a locale string directly, you can still do so, but using the options object is recommended for advanced selections.
+
+---
+
+## Useful links
+
+- [Compat Adapter Packages Guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/compat/index.md)
+- [Dynamic Dictionaries - Collections, Variants & Dynamic Records](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dynamic_dictionaries/index.md)
+- [Configuration Reference](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intlayer/docs",
-  "version": "8.12.5-canary.0",
+  "version": "9.0.0-canary.2",
   "private": false,
   "description": "Intlayer documentation",
   "keywords": [
@@ -73,13 +73,13 @@
     "watch": "webpack --config ./webpack.config.ts --watch"
   },
   "dependencies": {
-    "@intlayer/config": "9.0.0-canary.0",
-    "@intlayer/core": "9.0.0-canary.0",
-    "@intlayer/types": "9.0.0-canary.0"
+    "@intlayer/config": "9.0.0-canary.2",
+    "@intlayer/core": "9.0.0-canary.2",
+    "@intlayer/types": "9.0.0-canary.2"
   },
   "devDependencies": {
-    "@intlayer/api": "9.0.0-canary.0",
-    "@intlayer/cli": "9.0.0-canary.0",
+    "@intlayer/api": "9.0.0-canary.2",
+    "@intlayer/cli": "9.0.0-canary.2",
     "@types/node": "25.9.3",
     "@utils/ts-config": "1.0.4",
     "@utils/ts-config-types": "1.0.4",
@@ -88,7 +88,7 @@
     "rimraf": "6.1.3",
     "tsdown": "0.21.10",
     "typescript": "6.0.3",
-    "vitest": "4.1.8"
+    "vitest": "4.1.9"
   },
   "engines": {
     "node": ">=14.18"