@elag/lang-sync-inertia (英语)

与 Inertia.js 同步 Laravel 翻译 Vue 3, React 和 Svelte .

轻量级前端伴 eramitgupta/laravel-lang-sync-inertia它读取通过Inertia共享的翻译 page.props.lang 并提供一致的,类型安全的帮助,用于查找、嵌入式密钥、占位符、复数化和本地化的更新.

特征

• 🔄 Laravel 同步 与 syncLangFiles() 通过 Inertia 共享选中语言文件
• 🧩 Vue 3, React 18/19, 和斯维尔特 5 一个软件包根的助手
• 🌍 本地意识加载 从Laravel的活跃状态 lang/{locale} 目录
• 📁 单个、多个和嵌入式文件 带有点标记, 如 admin.auth
• ⚡ 共享翻译 通过Inertia的活性 page.props.lang
• 🛠️ 翻译助手数字 : __(), (中文(简体) ), trans(), (中文(简体) ), transChoice(),以及 trans_choice()
• 📝 拉拉维尔占位符 两者 :name 遗产 {name} 语法
• 🔢 多元化 与精确值和 Laravel 间隔, 例如 {0}, (中文(简体) ), {1},以及 [2,*]
• ↩️ 直接字符串密钥 当翻译缺失时返回到原始密钥
• 📦 JSON 导出 从 PHP 语言文件进行前端已准备好的静态翻译
• ✅ 类型脚本支持 带有打字器和轻量级运行时间

所需资源

此软件包需要 Laravel 后端软件包与前端共享翻译 :

composer require erag/laravel-lang-sync-inertia

• 后端 GitHub : lahamitta/lalavel-lang-sync-inertia (法语)
• 前端 GitHub : laimitgupta/lang-sync-inertia (英语)
• 联合国 拉维尔·朗同步Inertia

安装

npm install @erag/lang-sync-inertia

使用量

第3组

import { vueLang } from '@erag/lang-sync-inertia'

const { trans, __, transChoice } = vueLang()

组件示例 :

<script setup lang="ts">
import { vueLang } from '@erag/lang-sync-inertia'

const { trans, __, transChoice } = vueLang()
</script>

<template>
  <h1>{{ __('auth.greeting') }}</h1>
  <p>{{ trans('auth.welcome', { name: 'Amit' }) }}</p>
  <p>{{ transChoice('auth.apples', 3) }}</p>
</template>

反应

import { reactLang } from '@erag/lang-sync-inertia/react'

const { trans, __, transChoice } = reactLang()

组件示例 :

import { reactLang } from '@erag/lang-sync-inertia'

export default function Login() {
  const { trans, __, transChoice } = reactLang()

  return (
    <div>
      <h1>{__('auth.greeting')}</h1>
      <p>{trans('auth.welcome', { name: 'Amit' })}</p>
      <p>{transChoice('auth.apples', 3)}</p>
    </div>
  )
}

丝绒

要求数 @inertiajs/svelte v3(斯维尔特5).

import { svelteLang } from '@erag/lang-sync-inertia'

const { trans, __, transChoice } = svelteLang()

组件示例 :

<script module lang="ts">
import { svelteLang } from '@erag/lang-sync-inertia'

const { trans, __, transChoice } = svelteLang()
</script>

<h1>{__('auth.greeting')}</h1>
<p>{trans('auth.welcome', { name: 'Amit' })}</p>
<p>{transChoice('auth.apples', 3)}</p>

API 参考

__(key, replaces?)

翻译密钥,替换可选的占位符.

__('auth.login')
// → "Login"

__('auth.welcome', { name: 'Amit' })
// → "Welcome, Amit!"

__('messages.greeting.welcome_with_message', {
  name: 'Amit',
  message: 'Good to see you'
})
// lang/en/messages.php → ['greeting' => ['welcome_with_message' => 'Welcome, :name. :message']]
// → "Welcome, Amit. Good to see you"

如果找不到匹配的翻译密钥, 则原密钥返回时不变 :

__('I love programming.')
// → "I love programming."

Laravel 关键示例 :

return [
    'greeting' => [
        'name' => 'Welcome, :name',
        'welcome_with_message' => 'Welcome, :name. :message',
        'legacy_welcome' => 'Welcome, {name}',
    ],
];

__('messages.greeting.name', { name: 'dayle' })
// → "Welcome, dayle"

trans('messages.greeting.welcome_with_message', {
  name: 'dayle',
  message: 'Good to see you'
})
// → "Welcome, dayle. Good to see you"

包含字面点的密钥——如作为翻译密钥使用的英文句子——得到支持. 在进行点评前,先进行直接检查,以便正确解决:

// lang/en/messages.php → ['Please proceed with caution, this cannot be undone.' => '...']
__('Please proceed with caution, this cannot be undone.')
// → "..."

trans(key, replaces)

别名 __() 带有明确的替换对象——在总是有占位符时更可取.

trans('auth.welcome', { name: 'Amit' })
// → "Welcome, Amit!"

transChoice(key, count, replaces?)

使用 Laravel 风格的复数化字符串翻译一个复数化键. 这个 trans_choice() 还有别名.

transChoice('auth.apples', 1)
// → "There is one apple"

transChoice('auth.apples', 5)
// → "There are 5 apples"

trans_choice('auth.notifications', 0)
// → "No notifications"

trans_choice('auth.notifications', 3)
// → "3 notifications"

Laravel 语言文件示例 :

return [
    'apples' => 'There is one apple|There are :count apples',
    'notifications' => '{0} No notifications|{1} One notification|[2,*] :count notifications',
];

拉拉维尔一体化

主计长

syncLangFiles(['auth', 'dashboard']);
return Inertia::render('Dashboard');

网格语言目录可以从 Laravel 中以点标记引用 :

syncLangFiles('admin.users');

return Inertia::render('Admin/Users/Index');

对于一个文件像 lang/en/admin/users.php,使用前端的完整嵌入式密钥路径:

__('admin.users.name')

语言文件 - resources/lang/en/auth.php

return [
    'greeting' => 'Hello!',
    'welcome'  => 'Welcome, :name',
    'apples'   => 'There is one apple|There are :count apples',
];

软件包读取自 page.props.lang 自动——前端不需要额外设置.

类型脚本

type Replaces = Record<string, string | number>
type LangValue = string | { [key: string]: string | LangValue }
type LangObject = Record<string, LangValue>

API 条目点

使用套件根中的特定框架帮助符 :

// Vue
import { vueLang } from '@erag/lang-sync-inertia'
const { trans, __ } = vueLang()

// React
import { reactLang } from '@erag/lang-sync-inertia'
const { trans, __ } = reactLang()

// Svelte
import { svelteLang } from '@erag/lang-sync-inertia'
const { trans, __ } = svelteLang()

遗产 lang() 从特定框架路径导入(/vue, (中文(简体) ), /react,或 /svelte)继续支持后向相容性.

软件包结构

src/
├── vue/
├── react/
├── svelte/
├── types/
└── index.ts

行为守则 • 妇女 捐款 • 妇女 安全政策

许可证

麻省理工学院 阿米特·古普塔