@feugene/fint-i18n

@feugene/fint-i18n

English version

Локализация для Vue 3, которая грузит только тот словарь, что нужен текущему экрану, — за 5.2 КБ и без единой зависимости.

В цифрах

Размер — yarn size:consumer: каждая строка — отдельный бандл поверх собранного dist, gzip -9, vue вынесен наружу.

Скорость — yarn bench, Apple M5 Pro, Node 26:

Размер — гейт CI: size-budget.json роняет сборку на подкравшихся байтах, а каждый сдвинутый бюджет несёт обоснование в том же файле. Бенчи в CI тоже гоняются, но информационно: на общих раннерах числа слишком шумные, чтобы на них гейтить.

Почему эта

• Ленивые блоки вместо одного большого файла. Экран грузит свой словарь. Блок без собственного лоадера резолвится вверх к родителю, widgets.* разворачивается во все дочерние, а счётчик использований освобождает блок, когда размонтируется последний использующий его компонент.
• Компиляция, совместимая с CSP. Шаблоны компилируются в функции без new Function и без eval, поэтому работают под строгим Content-Security-Policy, где библиотеки с компилятором внутри не работают.
• В сообщении нет спецсимволов. Плюрализация — это форма значения, объект форм CLDR, а не разметка внутри строки. | в тексте остаётся |, и ничто не разрежет перевод пополам молча.
• Tree-shaking по локалям. Локали — отдельные экспорты, в бандл попадают только перечисленные языки. sideEffects: false во всём пакете.
• Типизированные ключи без потери динамических. Дженерик схемы даёт автодополнение и проверку опечаток для литеральных ключей, а t() продолжает принимать строки, собранные в рантайме.

Установка

npm i @feugene/fint-i18n     # yarn add / pnpm add

Vue 3.5+, только ESM. vue — единственная peer-зависимость, других нет.

За минуту

import {createApp} from 'vue'
import {createFintI18n} from '@feugene/fint-i18n/core'
import {installI18n} from '@feugene/fint-i18n/vue'
import {en, ru} from './i18n/messages'

const i18n = createFintI18n({
    locale: 'en',
    fallbackLocale: 'en',
    // В сборку попадут только перечисленные здесь локали.
    loaders: [en, ru],
})

const app = createApp(App)
installI18n(app, i18n)
app.mount('#app')

<script setup>
  import {useFintI18n, useI18nScope} from '@feugene/fint-i18n/vue'

  // Блоки, нужные компоненту: грузятся на монтировании, выгружаются вместе с ним.
  await useI18nScope(['common', 'auth'])

  const {t, locale, setLocale} = useFintI18n()
</script>

<template>
  <p>{{ t('common.welcome', { name: 'User' }) }}</p>
  <span v-t="'auth.login'"/>
  <button @click="setLocale(locale === 'en' ? 'ru' : 'en')">
    {{ t('common.switch') }}
  </button>
</template>

loaders принимает одну коллекцию или массив коллекций, так что свои локали может поставлять каждый пакет, — порядок мерджа и правила конфликтов в разделе «Определение сообщений».

Что внутри

Всё подключается опционально: за то, что не импортировали, платить не приходится.

Документация

• 📦 Установка — настройка и опции
• 📂 Определение сообщений — форматы JSON, лоадеры, мердж
• 🚀 Использование — t(), $t, v-t, скоупы
• 🧱 Блоки перевода — резолвинг, wildcard'ы, память
• 📘 Справочник API — все методы, композаблы и типы
• 🔌 Плагины — система хуков и встроенные плагины
• 🖥️ Серверный рендеринг — снимок и гидрация
• 🧰 Инструменты для словарей — проверки в CI и кодмод плюрализации
• 🔍 Devtools — состояние рантайма, лента событий, мост в window
• 🌐 Гайд для авторов локализационных пакетов — контракт per-locale экспортов
• ⚡ Бенчмарки и анализ бандла — как измеряются цифры выше

У каждой возможности есть живая секция в playground, у SSR — отдельное приложение.

Лицензия

MIT