Skip to content

add van-i18n#17

Open
zakarialaoui10 wants to merge 1 commit intovanjs-org:masterfrom
zakaria-forks:master
Open

add van-i18n#17
zakarialaoui10 wants to merge 1 commit intovanjs-org:masterfrom
zakaria-forks:master

Conversation

@zakarialaoui10
Copy link
Contributor

Demo

Open in StackBlitz

API Design

  • createI18NProvider(lang, locals) : initialize once
  • useTranslation() : use anywhere, returns :
    • t(key) : reactive translation
    • setLang(lang, rtl = false) : change language globally

Usage

import van from "vanjs-core";
import { createI18NProvider, useTranslation } from "van-i18n";

const {div, p, button, br} = van.tags

const locals = {
  fr: {
    start: "Commencer",
    end: "Terminer",
  },
  en: {
    start: "Start",
    end: "Finish",
  },
};

createI18NProvider("en", locals);

const App = () => {
  const [t, setLang] = useTranslation();

  return div(
    p(t("start")),
    br(),
    button({ onclick: () => setLang("en") }, "EN"),
    button({ onclick: () => setLang("fr") }, "FR"),
  );
};

document.body.appendChild(App());

Features

  • Reactivity
  • Simple Architecture
  • No nesting
  • No wrapping components
  • Automatically updates <html lang=""..
  • Handle directions
  • Lightweight

## Demo 

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/zakarialaoui10-van-i18n-33jjkyg8?file=src%2FApp.js)

## Api design 

## API Design 

- `createI18NProvider(lang, localss)` : initialize once
- `useTranslation()` : use anywhere, returns :
    - `t(key)` : reactive translation
    - `setLang(lang, rtl = false)` : change language globally

## Usage 

```js
import van from "vanjs-core";
import { createI18NProvider, useTranslation } from "van-i18n";

const {div, p, button, br} = van.tags

const locals = {
  fr: {
    start: "Commencer",
    end: "Terminer",
  },
  en: {
    start: "Start",
    end: "Finish",
  },
};

createI18NProvider("en", locals);

const App = () => {
  const [t, setLang] = useTranslation();

  return div(
    p(t("start")),
    br(),
    button({ onclick: () => setLang("en") }, "EN"),
    button({ onclick: () => setLang("fr") }, "FR"),
  );
};

document.body.appendChild(App());

```

## Features

- Reactivity
- Simple Architecture
- No nesting
- No wrapping components
- Automatically updates `<html lang=""..`
- Handle directions
- Lightweight
@zakarialaoui10
Copy link
Contributor Author

@thednp
@Tao-VanJS

I am planning to add interpolation, Intl conversions, and TypeScript declarations.

Contributions are welcome!

If you find this project useful, a ⭐ on GitHub would help it grow!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant