typekit-i18n (v0.3.1)

Appearance

Getting Started ​

Requirements ​

  • Node.js >= 20.11.0
  • pnpm >= 10

Workspace Setup ​

bash
pnpm install

Generate package + playground artifacts:

bash
pnpm run gen:typekit-i18n

Run playground:

bash
pnpm run dev:playground

Run docs site:

bash
pnpm run dev:docs

VSCode Extension (Optional) ​

The repository includes a VSCode extension for translation authoring:

Build local VSIX:

bash
pnpm --filter typekit-i18n-vscode package:vsix

Minimal Package Setup ​

1. Install package ​

bash
pnpm add @number10/typekit-i18n

2. Add translation resources ​

Example translations/ui.csv:

csv
category;key;description;en;de
home;welcome_title;Main title;Welcome;Willkommen
;welcome_body;Greeting with placeholder;Hello {name};Hallo {name}

category is optional. Empty category values are treated as default.

3. Add typekit.config.ts ​

ts
import { defineTypekitI18nConfig } from '@number10/typekit-i18n/codegen'

export default defineTypekitI18nConfig({
  input: ['./translations/*.csv', './translations/*.yaml'],
  output: './src/generated/translationTable.ts',
  outputKeys: './src/generated/translationKeys.ts',
  languages: ['en', 'de'] as const,
  defaultLanguage: 'en',
})

4. Generate table and key types ​

bash
npx typekit-i18n

5. Use translator in runtime ​

ts
import { createTranslator } from '@number10/typekit-i18n'
import { translationTable } from './generated/translationTable'

const t = createTranslator(translationTable)

t('welcome_title') // uses "en" by default
t.setLanguage('de')

const text = t('welcome_title') // uses active language ("de")
const scopedText = t.translateIn('home', 'welcome_title')
const scopedTextAlias = t.in('home', 'welcome_title')

Flow ​