diff --git a/README.md b/README.md index a97a3e6a..b18e6557 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,146 @@ [![Published on npm](https://img.shields.io/npm/v/lit-localize.svg)](https://www.npmjs.com/package/lit-localize) [![Test Status](https://github.com/PolymerLabs/lit-localize/workflows/tests/badge.svg?branch=master)](https://github.com/PolymerLabs/lit-localize/actions?query=workflow%3Atests+branch%3Amaster+event%3Apush) + + +###### [API](#api) | [Tutorial](#tutorial) | [API](#api) + +> lit-localize is a library and command-line tool for localizing/translating web +> applications that are based on lit-html and LitElement. + +## Features + +- 🌐 Localize your lit-html and LitElement applications +- 🔥 Safely embed HTML markup within localized templates +- 🍦 Write vanilla code that works in development with no new tooling +- 📄 Standard XLIFF interchange format +- 🆓 Generate a zero-overhead bundle for each locale +- 🔁 ... or dynamically load locales and automatically re-render + +## Tutorial + +1. Install lit-localize. You get both a client library and a command-line tool. + You'll always use both together. + + ```bash + npm install --save lit-localize + ``` + +2. Set up a TypeScript lit-html project if you don't have one already: + + ```bash + npm install --save lit-html + npm install --save-dev typescript + npx tsc --init + ``` + + You'll want these TypeScript settings: + + ```json + "compilerOptions": { + "target": "es2018", + "module": "esnext", + "moduleResolution": "node" + } + ``` + + You'll also need this directory to exist: + + ```bash + mkdir xliff + ``` + +3. Create an `index.ts`, and declare a localizable template using the `msg` + function. The first argument is a unique identifier for this template, and + the second is a string or lit-html template. + + (Note that this code will directly compile and run, just as it would if you + were rendering the lit template directly, so your build process doesn't need + to change until you want to integrate localized templates.) + + ```typescript + import {html, render} from 'lit-html'; + import {msg} from 'lit-localize'; + + render( + html`
${msg('greeting', html`Hello World!`)}
`, + document.body + ); + ``` + +4. Make a JSON config file at the root of your project called + `lit-localize.json`. In this example we're using _transform_ mode, but you + can also use _runtime_ mode. The `$schema` property is optional, and lets + editors like VSCode auto-complete and check for errors. + + ```json + { + "$schema": "https://raw.githubusercontent.com/PolymerLabs/lit-localize/master/config.schema.json", + "sourceLocale": "en", + "targetLocales": ["es-419"], + "tsConfig": "tsconfig.json", + "output": { + "mode": "transform" + }, + "interchange": { + "format": "xliff", + "xliffDir": "xliff/" + } + } + ``` + +5. Run the lit-localize CLI: + + ```bash + npx lit-localize + ``` + +6. Take a look at the generated XLIFF file `xliff/es-419.xlf`. Note that we have + a `