diff --git a/README.md b/README.md index f1dfdd0..2cb60bb 100644 --- a/README.md +++ b/README.md @@ -3,24 +3,86 @@ Typesafe i18n. ## Installation +``` +pnpm i -D t18s +``` -This package has not yet been published. Please be patient while I get it to MVP. +## Usage +`t18s` is a vite plugin that compiles your translations to a typesafe format. It also dynamically generates the runtime code to work with your translations. -## Features +1. Add the plugin to your vite config +```js +// vite.config.js +import { sveltekit } from '@sveltejs/kit/vite'; +import { defineConfig } from 'vite'; +import { t18s } from "t18s" + +export default defineConfig({ + //Plugin order doesn't matter + //Default options are shown + plugins: [sveltekit(), t18s({ + translationsDir: "src/translations", + dts: "src/t18s.d.ts" + })] +}); +``` + +Then start the dev server with `(p)npm dev`. + +2. Create a translations file +In the `translationsDir` that you specified in the vite config, create a file called `en.json` (or whatever locale you want to use). The file should contain key-value pairs of translations. + +```json +{ + "hello": "Hello World!", + "helloName": "Hello {name}!" +} +``` + +The values must be valid ICU MessageFormat strings. +You can also use YAML files. + +3. Use the translations in your code +```svelte + + +

{$t("hello")}

+

{$t("helloName", { name: "John" })}

+``` + +That's it. + +## Roadmap - [x] TypeSafe - [x] Precompile translations, no runtime overhead - [x] Supports SSR - [x] Full ICU MessageFormat support -- [x] Supports HMR, no page reload on translation changes +- [x] HMR: No page reload on translation changes - [x] Supports Svelte - [x] Lazy loading locales -- [x] SSR +- [x] Works with SSR - [ ] Fallback Locale - [ ] Sub Locales (eg EN_US, EN_UK) - [x] Loading Delay - [ ] Namespaces -- [ ] Message Description Intellisense -- [ ] More File Formats -- [ ] Edit translations in the browser +- [ ] Locale extraction helpers +- [ ] Documentation Site +- [ ] All Common Message-File Formats + - [x] JSON + - [x] YAML + - [ ] TOML + - [ ] CSV + - [ ] XLIFF + - [ ] PO + - [ ] INI + - [ ] XML +- [ ] Edit translations inline in the browser (like [Better i18n for Svelte](https://github.com/versiobit/better-i18n-for-svelte)) - [ ] Frameworks other than Svelte + - [ ] Vanilla + - [ ] React + - [ ] Vue +- [ ] Message Description Intellisense +