@intlayer/docs 5.7.6 → 5.7.8

package/docs/ru/intlayer_with_tanstack.md

@@ -0,0 +1,458 @@
+---
+createdAt: 2025-08-11
+updatedAt: 2025-08-11
+title: Начало работы с Intlayer в TanStack Start (React)
+description: Добавьте i18n в ваше приложение TanStack Start с помощью Intlayer — словари на уровне компонентов, локализованные URL и SEO-дружественные метаданные.
+keywords:
+  - Интернационализация
+  - Документация
+  - Intlayer
+  - TanStack Start
+  - TanStack Router
+  - React
+  - i18n
+  - JavaScript
+slugs:
+  - doc
+  - environment
+  - tanstack-start
+---
+
+# Начало работы с интернационализацией (i18n) с Intlayer и TanStack Start (React)
+
+## Что такое Intlayer?
+
+**Intlayer** — это открытый набор инструментов i18n для приложений React. Он предоставляет вам:
+
+- **Словари на уровне компонентов** с безопасностью TypeScript.
+- **Динамические метаданные и маршруты** (готовые для SEO).
+- **Переключение локали во время выполнения** (и вспомогательные функции для обнаружения/сохранения локалей).
+- **Плагин Vite** для преобразований во время сборки + улучшения для разработки (DX).
+
+В этом руководстве показано, как интегрировать Intlayer в проект **TanStack Start** (который использует Vite под капотом и TanStack Router для маршрутизации/SSR).
+
+---
+
+## Шаг 1: Установка зависимостей
+
+```bash
+# npm
+npm i intlayer react-intlayer
+npm i -D vite-intlayer
+
+# pnpm
+pnpm add intlayer react-intlayer
+pnpm add -D vite-intlayer
+
+# yarn
+yarn add intlayer react-intlayer
+yarn add -D vite-intlayer
+```
+
+- **intlayer**: ядро (конфигурация, словари, CLI/преобразования).
+- **react-intlayer**: `<IntlayerProvider>` + хуки для React.
+- **vite-intlayer**: плагин Vite, а также опциональное промежуточное ПО для обнаружения локали/перенаправлений (работает в режиме разработки и SSR/превью; для production SSR переместите в `dependencies`).
+
+---
+
+## Шаг 2: Настройка Intlayer
+
+Создайте файл `intlayer.config.ts` в корне вашего проекта:
+
+```ts fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  // Вы также можете настроить: contentDir, contentFileExtensions, параметры middleware и др.
+};
+
+export default config;
+```
+
+Варианты CommonJS/ESM идентичны вашему оригинальному документу, если вы предпочитаете `cjs`/`mjs`.
+
+> Полное описание конфигурации: смотрите документацию по конфигурации Intlayer.
+
+---
+
+## Шаг 3: Добавьте плагин Vite (и опциональный middleware)
+
+**TanStack Start использует Vite**, поэтому добавьте плагин(и) Intlayer в ваш `vite.config.ts`:
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import { intlayerPlugin, intLayerMiddlewarePlugin } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    react(),
+    intlayerPlugin(),
+    // Необязательно, но рекомендуется для обнаружения локали, работы с куки и редиректов:
+    intLayerMiddlewarePlugin(),
+  ],
+});
+```
+
+> Если вы разворачиваете SSR, переместите `vite-intlayer` в `dependencies`, чтобы middleware работал в продакшене.
+
+---
+
+## Шаг 4: Объявите ваш контент
+
+Размещайте ваши словари где угодно внутри `./src` (по умолчанию `contentDir`). Пример:
+
+```tsx fileName="src/app.content.tsx"
+import { t, type Dictionary } from "intlayer";
+import type { ReactNode } from "react";
+
+const appContent = {
+  key: "app",
+  content: {
+    viteLogo: t({
+      ru: "Логотип Vite",
+      en: "Vite logo",
+      fr: "Logo Vite",
+      es: "Logo Vite",
+    }),
+    reactLogo: t({
+      ru: "Логотип React",
+      en: "React logo",
+      fr: "Logo React",
+      es: "Logo React",
+    }),
+    title: t({
+      ru: "TanStack Start + React",
+      en: "TanStack Start + React",
+      fr: "TanStack Start + React",
+      es: "TanStack Start + React",
+    }),
+    count: t({
+      ru: "счёт: ",
+      en: "count is ",
+      fr: "le compte est ",
+      es: "el recuento es ",
+    }),
+    edit: t<ReactNode>({
+      ru: (
+        <>
+          Редактируйте <code>src/routes/index.tsx</code> и сохраните, чтобы
+          проверить HMR
+        </>
+      ),
+      en: (
+        <>
+          Edit <code>src/routes/index.tsx</code> and save to test HMR
+        </>
+      ),
+      fr: (
+        <>
+          Éditez <code>src/routes/index.tsx</code> et enregistrez pour tester
+          HMR
+        </>
+      ),
+      es: (
+        <>
+          Edita <code>src/routes/index.tsx</code> y guarda para probar HMR
+        </>
+      ),
+    }),
+    readTheDocs: t({
+      ru: "Нажмите на логотипы, чтобы узнать больше",
+      en: "Click the logos to learn more",
+      fr: "Cliquez sur les logos pour en savoir plus",
+      es: "Haz clic en los logotipos para saber más",
+    }),
+  },
+} satisfies Dictionary;
+
+export default appContent;
+```
+
+JSON/ESM/CJS варианты работают так же, как и в вашем исходном документе.
+
+> TSX контент? Не забудьте `import React from "react"`, если ваша сборка этого требует.
+
+---
+
+## Шаг 5: Оберните TanStack Start с помощью Intlayer
+
+С TanStack Start ваш **корневой маршрут** — это правильное место для установки провайдеров.
+
+```tsx fileName="src/routes/__root.tsx"
+import {
+  Outlet,
+  createRootRoute,
+  Link as RouterLink,
+} from "@tanstack/react-router";
+import { IntlayerProvider, useIntlayer } from "react-intlayer";
+
+function AppShell() {
+  // Пример использования словаря на верхнем уровне:
+  const content = useIntlayer("app");
+
+  return (
+    <div>
+      <nav className="flex gap-3 p-3">
+        <RouterLink to="/">Главная</RouterLink>
+        <RouterLink to="/about">О нас</RouterLink>
+      </nav>
+      <main className="p-6">
+        <h1>{content.title}</h1>
+        <Outlet />
+      </main>
+    </div>
+  );
+}
+
+export const Route = createRootRoute({
+  component: () => (
+    <IntlayerProvider>
+      <AppShell />
+    </IntlayerProvider>
+  ),
+});
+```
+
+Затем используйте ваш контент на страницах:
+
+```tsx fileName="src/routes/index.tsx"
+import { createFileRoute } from "@tanstack/react-router";
+import { useIntlayer } from "react-intlayer";
+import reactLogo from "../assets/react.svg";
+
+export const Route = createFileRoute("/")({
+  component: () => {
+    const content = useIntlayer("app");
+    return (
+      <>
+        <button>{content.count}0</button>
+        <p>{content.edit}</p>
+        <img
+          src={reactLogo}
+          alt={content.reactLogo.value}
+          width={48}
+          height={48}
+        />
+        <p className="opacity-70">{content.readTheDocs}</p>
+      </>
+    );
+  },
+});
+```
+
+> Атрибуты строк (`alt`, `title`, `aria-label` и др.) требуют использования `.value`:
+>
+> ```jsx
+> <img alt={c.reactLogo.value} />
+> ```
+
+---
+
+## (Необязательно) Шаг 6: Переключение локали (на клиенте)
+
+```tsx fileName="src/components/LocaleSwitcher.tsx"
+import { Locales } from "intlayer";
+import { useLocale } from "react-intlayer";
+
+export function LocaleSwitcher() {
+  const { setLocale } = useLocale();
+  return (
+    <div className="flex gap-2">
+      <button onClick={() => setLocale(Locales.ENGLISH)}>Английский</button>
+      <button onClick={() => setLocale(Locales.FRENCH)}>Французский</button>
+      <button onClick={() => setLocale(Locales.SPANISH)}>Испанский</button>
+    </div>
+  );
+}
+```
+
+---
+
+## (Необязательно) Шаг 7: Локализованная маршрутизация (SEO-дружественные URL)
+
+У вас есть **два хороших варианта** с TanStack Start. Выберите один.
+
+Создайте папку с динамическим сегментом `src/routes/$locale/`, чтобы ваши URL были вида `/:locale/...`. В макете `$locale` проверьте `params.locale`, установите `<IntlayerProvider locale=...>`, и отобразите `<Outlet />`. Этот подход прост, но остальные маршруты будут размещены внутри `$locale`, и вам понадобится дополнительное дерево без префикса, если вы _не_ хотите, чтобы префикс локали по умолчанию добавлялся.
+
+---
+
+## (Необязательно) Шаг 8: Обновление URL при переключении локали
+
+При использовании шаблона A (basepath) переключение локалей означает **переход на другой базовый путь**:
+
+```tsx fileName="src/components/LocaleSwitcherNavigate.tsx"
+import { useRouter } from "@tanstack/react-router";
+import { Locales, getLocalizedUrl } from "intlayer";
+import { useLocale } from "react-intlayer";
+
+export function LocaleSwitcherNavigate() {
+  const router = useRouter();
+  const { locale, setLocale } = useLocale();
+
+  const change = async (next: Locales) => {
+    if (next === locale) return;
+    const nextPath = getLocalizedUrl(
+      window.location.pathname + window.location.search,
+      next
+    );
+    await router.navigate({ to: nextPath }); // сохраняет историю
+    setLocale(next);
+  };
+
+  return (
+    <div className="flex gap-2">
+      <button onClick={() => change(Locales.ENGLISH)}>English</button>
+      <button onClick={() => change(Locales.FRENCH)}>Français</button>
+      <button onClick={() => change(Locales.SPANISH)}>Español</button>
+    </div>
+  );
+}
+```
+
+---
+
+## (Необязательно) Шаг 9: `<html lang>` и `dir` (TanStack Start Document)
+
+TanStack Start предоставляет **Document** (корневой HTML-шаблон), который вы можете настроить. Установите `lang` и `dir` для доступности и SEO:
+
+```tsx fileName="src/routes/__root.tsx" {4,15}
+import { Outlet, createRootRoute } from "@tanstack/react-router";
+import { IntlayerProvider } from "react-intlayer";
+import { getHTMLTextDir } from "intlayer";
+
+function Document({
+  locale,
+  children,
+}: {
+  locale: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang={locale} dir={getHTMLTextDir(locale)}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        {/* ... */}
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}
+
+export const Route = createRootRoute({
+  component: () => (
+    <IntlayerProvider>
+      {/* Если вы вычисляете локаль на сервере, передайте её в Document; иначе клиент исправит после гидратации */}
+      <Document locale={document?.documentElement?.lang || "en"}>
+        <Outlet />
+      </Document>
+    </IntlayerProvider>
+  ),
+});
+```
+
+Для исправления на стороне клиента вы также можете использовать небольшой хук:
+
+```tsx fileName="src/hooks/useI18nHTMLAttributes.tsx"
+import { useEffect } from "react";
+import { useLocale } from "react-intlayer";
+import { getHTMLTextDir } from "intlayer";
+
+export const useI18nHTMLAttributes = () => {
+  const { locale } = useLocale();
+  useEffect(() => {
+    document.documentElement.lang = locale; // Устанавливаем атрибут lang для документа
+    document.documentElement.dir = getHTMLTextDir(locale); // Устанавливаем направление текста (ltr или rtl) в зависимости от локали
+  }, [locale]);
+};
+```
+
+---
+
+## (Необязательно) Шаг 10: Локализованный компонент Link
+
+TanStack Router предоставляет компонент `<Link/>`, но если вам когда-либо понадобится простой `<a>`, который автоматически добавляет префикс локали к внутренним URL:
+
+```tsx fileName="src/components/Link.tsx"
+import { getLocalizedUrl } from "intlayer";
+import {
+  forwardRef,
+  type AnchorHTMLAttributes,
+  type DetailedHTMLProps,
+} from "react";
+import { useLocale } from "react-intlayer";
+
+export interface LinkProps
+  extends DetailedHTMLProps<
+    AnchorHTMLAttributes<HTMLAnchorElement>,
+    HTMLAnchorElement
+  > {}
+
+const isExternal = (href?: string) => /^https?:\/\//.test(href ?? "");
+
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
+  ({ href, children, ...props }, ref) => {
+    const { locale } = useLocale();
+    const hrefI18n =
+      href && !isExternal(href) ? getLocalizedUrl(href, locale) : href;
+    return (
+      <a href={hrefI18n} ref={ref} {...props}>
+        {children}
+      </a>
+    );
+  }
+);
+Link.displayName = "Link";
+```
+
+> Если вы используете шаблон A (basepath), то `<Link to="/about" />` из TanStack уже преобразуется в `/fr/about` через `basepath`, поэтому кастомная ссылка является необязательной.
+
+---
+
+## TypeScript
+
+Включите сгенерированные Intlayer типы:
+
+```json5 fileName="tsconfig.json"
+{
+  "include": ["src", ".intlayer/**/*.ts"],
+}
+```
+
+---
+
+## Git
+
+Игнорируйте сгенерированные артефакты Intlayer:
+
+```gitignore
+.intlayer
+```
+
+---
+
+## Расширение VS Code
+
+- **Расширение Intlayer для VS Code** → автодополнение, ошибки, встроенные превью, быстрые действия.
+  Marketplace: `intlayer.intlayer-vs-code-extension`
+
+---
+
+## Дальнейшие шаги
+
+- Визуальный редактор
+- Режим CMS
+- Определение локали на краю / адаптеры
+
+---
+
+## История документации
+
+| Версия | Дата       | Изменения                          |
+| ------ | ---------- | ---------------------------------- |
+| 1.0.0  | 2025-08-11 | Добавлена адаптация TanStack Start |

package/docs/ru/packages/next-intlayer/index.md

@@ -279,7 +279,6 @@ Intlayer предоставляет множество функций, кото
 - [`useIntlayer()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/next-intlayer/useIntlayer.md)
 - [`useDictionary()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/next-intlayer/useDictionary.md)
 - [`useLocale()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/next-intlayer/useLocale.md)
-- [`useIntlayerAsync()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/next-intlayer/useIntlayerAsync.md)
 
 ## История документации
 

package/docs/ru/packages/react-intlayer/index.md

@@ -274,7 +274,6 @@ Intlayer предоставляет множество функций, кото
 - [`useIntlayer()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/react-intlayer/useIntlayer.md)
 - [`useDictionary()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/react-intlayer/useDictionary.md)
 - [`useLocale()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/react-intlayer/useLocale.md)
-- [`useIntlayerAsync()`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/react-intlayer/useIntlayerAsync.md)
 
 ## История документации
 

package/docs/zh/CI_CD.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-05-20
-updatedAt: 2025-06-29
+updatedAt: 2025-08-13
 title: CI/CD 集成
 description: 了解如何将 Intlayer 集成到您的 CI/CD 流水线中，实现内容管理和部署的自动化。
 keywords:
@@ -19,11 +19,11 @@ slugs:
 
 # 在 CI/CD 流水线中自动生成翻译
 
-Intlayer 允许自动生成内容声明文件的翻译。根据您的工作流程，有多种实现方式。
+Intlayer 允许自动生成内容声明文件的翻译。根据您的工作流程，有多种方式可以实现这一点。
 
 ## 使用 CMS
 
-使用 Intlayer，您可以采用一种工作流程，其中本地只声明单一语言环境，而所有翻译内容均通过 CMS 远程管理。这使得内容和翻译可以完全脱离代码库，提供给内容编辑者更大的灵活性，并支持热内容重载（无需重新构建应用即可应用更改）。
+使用 Intlayer，您可以采用一种工作流程，只在本地声明单一语言环境，而所有翻译内容则通过 CMS 远程管理。这使内容和翻译完全脱离代码库，为内容编辑者提供更大的灵活性，并支持热内容重载（无需重建应用即可应用更改）。
 
 ### 示例配置
 
@@ -45,7 +45,7 @@ const config: IntlayerConfig = {
     clientSecret: process.env.INTLAYER_CLIENT_SECRET,
   },
   ai: {
-    applicationContext: "This is a test application", // 有助于确保一致的翻译生成
+    applicationContext: "这是一个测试应用程序", // 有助于确保一致的翻译生成
   },
 };
 
@@ -77,7 +77,7 @@ const config: IntlayerConfig = {
     provider: "openai",
     apiKey: process.env.OPENAI_API_KEY, // 使用您自己的 API 密钥
 
-    applicationContext: "这是一个测试应用", // 有助于确保翻译生成的一致性
+    applicationContext: "这是一个测试应用程序", // 有助于确保翻译生成的一致性
   },
 };
 
@@ -85,7 +85,7 @@ export default config;
 ```
 
 ```bash fileName=".husky/pre-push"
-npx intlayer build                          # 确保字典是最新的
+npx intlayer build                          # 确保词典是最新的
 npx intlayer fill --unpushed --mode fill    # 仅填充缺失内容，不更新已有内容
 ```
 
@@ -105,68 +105,94 @@ npx intlayer fill --base-dir ./app2 --unpushed --mode fill
 
 ## 使用 GitHub Actions
 
-Intlayer 提供了一个 CLI 命令用于自动填充和审查字典内容。您可以使用 GitHub Actions 将其集成到您的 CI/CD 工作流中。
+Intlayer 提供了一个 CLI 命令，用于自动填充和审查词典内容。您可以将其集成到使用 GitHub Actions 的 CI/CD 工作流中。
 
 ```yaml fileName=".github/workflows/intlayer-translate.yml"
 name: Intlayer 自动填充
+# 触发此工作流的条件
 on:
-  push:
-    branches: [ main ]
-    paths:
-      - 'src/**'
   pull_request:
-    branches: [ main ]
-    paths:
-      - 'src/**'
-  workflow_dispatch: {}
+    branches:
+      - "main"
+
+permissions:
+  contents: write
+  pull-requests: write
 
 concurrency:
-  group: 'autofill-${{ github.ref }}'
+  group: "autofill-${{ github.ref }}"
   cancel-in-progress: true
 
 jobs:
   autofill:
     runs-on: ubuntu-latest
     env:
-      INTLAYER_CLIENT_ID: ${{ secrets.INTLAYER_CLIENT_ID }}
-      INTLAYER_CLIENT_SECRET: ${{ secrets.INTLAYER_CLIENT_SECRET }}
-      OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+      # OpenAI
+      AI_MODEL: openai
+      AI_PROVIDER: gpt-5-mini
+      AI_API_KEY: ${{ secrets.AI_API_KEY }}
 
     steps:
+      # 第一步：从仓库获取最新代码
       - name: ⬇️ 签出仓库
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
-          persist-credentials: true
+          persist-credentials: true # 保留凭据以创建拉取请求
+          fetch-depth: 0 # 获取完整的 git 历史以进行差异分析
 
+      # 步骤 2：设置 Node.js 环境
       - name: 🟢 设置 Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 20 # 使用 Node.js 20 LTS 以保证稳定性
 
+      # 步骤 3：安装项目依赖
       - name: 📦 安装依赖
-        run: npm ci
+        run: npm install
+
+      # 步骤 4：全局安装 Intlayer CLI 以管理翻译
+      - name: 📦 安装 Intlayer
+        run: npm install -g intlayer-cli
 
+      # 步骤 5：构建 Intlayer 项目以生成翻译文件
       - name: ⚙️ 构建 Intlayer 项目
         run: npx intlayer build
 
+      # 步骤 6：使用 AI 自动填充缺失的翻译
       - name: 🤖 自动填充缺失的翻译
-        run: npx intlayer fill --git-diff --mode fill
-
-      - name: 📤 创建或更新翻译拉取请求
-        uses: peter-evans/create-pull-request@v4
-        with:
-          commit-message: chore: 自动填充缺失的翻译 [skip ci]
-          branch: auto-translations
-          title: chore: 更新缺失的翻译
-          labels: translation, automated
+        run: npx intlayer fill --git-diff --mode fill --provider $AI_PROVIDER --model $AI_MODEL --api-key $AI_API_KEY
+
+      # 第7步：检查是否有更改并提交
+      - name: � 检查更改
+        id: check-changes
+        run: |
+          if [ -n "$(git status --porcelain)" ]; then
+            echo "has-changes=true" >> $GITHUB_OUTPUT
+          else
+            echo "has-changes=false" >> $GITHUB_OUTPUT
+          fi
+
+      # 第8步：如果存在更改，则提交并推送
+      - name: 📤 提交并推送更改
+        if: steps.check-changes.outputs.has-changes == 'true'
+        run: |
+          git config --local user.email "action@github.com"
+          git config --local user.name "GitHub Action"
+          git add .
+          git commit -m "chore: 自动填充缺失的翻译 [skip ci]"
+          git push origin HEAD:${{ github.head_ref }}
 ```
 
-> 与 Husky 相同，在 monorepo 的情况下，您可以使用 `--base-dir` 参数来顺序处理每个应用。
+要设置环境变量，请前往 GitHub → 设置 → Secrets and variables → Actions 并添加密钥（API_KEY）。
+
+> 与 Husky 相同，在单一仓库（monorepo）的情况下，可以使用 `--base-dir` 参数依次处理每个应用。
 
-> 默认情况下，`--git-diff` 参数会过滤包含从基线（默认 `origin/main`）到当前分支（默认：`HEAD`）的更改的字典。
+> 默认情况下，`--git-diff` 参数会筛选包含从基线（默认 `origin/main`）到当前分支（默认 `HEAD`）的更改的字典。
 
 > 有关 Intlayer CLI 命令及其用法的更多信息，请参阅 [CLI 文档](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/intlayer_cli.md)。
 
 ## 文档历史
 
-- 5.5.10 - 2025-06-29：初始化历史
+| 版本   | 日期       | 变更           |
+| ------ | ---------- | -------------- |
+| 5.5.10 | 2025-06-29 | 初始化历史记录 |