@werdetnachbarn/hello-world v1.0.2

Hello World

Compatibility Note

• Vue.js 2.x (optional)

Installation

NPM

npm install @werdetnachbarn/hello-world

Yarn

yarn add @werdetnachbarn/hello-world

If you want to use this library with Vue.js, you have to register the Vue-Plugin. Follow the steps here to achieve this behavior.

Usage

Create an Interface

Create an Interface that defines all your Translation Messages.

import {MessageInterface, DeepReadonly} from "@werdetnachbarn/hello-world";

export interface InnerMessagesInterface extends MessageInterface {
    hello: (name: string) => string
}
export type MessagesInterface = DeepReadonly<InnerMessagesInterface>;

Create Language Files

Create Files for all your Supported Languages. These are just JS-Objects which implement your previously defined Interface:

import {MessagesInterface} from "./MessagesInterface";

export const messages: MessagesInterface = {
    hello: (name: string): string => `Hello ${name}`,
}

export default messages;

Register Language-Files

To register a certain Language file you have to create a 'bundle'-Object. this can later be register on the translationResolver:

import {en_messages} from "./en";

const messages = {
    en: en_messages
}

export const translationResolver = new TranslationResolver({
    locale: 'en',
    fallbackLocale: 'en',
    messages: messages,
    datetimes: {},
    numbers: {}
});

VueJS (optional)

If you use VueJS you can register the VueJS-Plugin to get direct access to the translations from your Components. A really cool feature is, that your displayed Messages will automatically change if you change the locale.

import Vue from "vue";
import {translationResolver} from "@werdetnachbarn/hello-world";
import VueI18n from "./internationalization/_generic/Vue";

Vue.use(new VueI18n(translationResolver));

As a next step you need to create a jsI18n-shims.d.ts-File. This is needed so you get full Typesafety when accessing the translationResolver from within a Vue-Component. Therefore paste the following content into the VueI18n-shims.d.ts-File:

import {translationResolver} from "./i18n";

declare module 'vue/types/vue' {
    interface Vue {
        $trans: typeof translationResolver;
    }
}

Now you cann access your Messages in your Components like so:

<template>
    <div class="card-body">
        {{ $trans.m.hello('Christian') }}
    </div>
</template>

Docs

String Formats

Message

In your Language-Files you can specify a key:Value for just a String. This can be achieved like this: First you have to specify this in your MessagesInterface:

import {MessageInterface, DeepReadonly} from "@werdetnachbarn/hello-world";

export interface InnerMessagesInterface extends MessageInterface {
    hello: string
}
export type MessagesInterface = DeepReadonly<InnerMessagesInterface>;

After that you can implement this for every Language:

import {MessagesInterface} from "./MessagesInterface";

export const messages: MessagesInterface = {
    hello: 'Hello World!',
}

export default messages;

Parameterized Message

You can inject Parameters into Message. This way you can easily achieve greeting messages like this one:

import {MessageInterface, DeepReadonly} from "@werdetnachbarn/hello-world";

export interface InnerMessagesInterface extends MessageInterface {
    hello: (name: string) => string
}
export type MessagesInterface = DeepReadonly<InnerMessagesInterface>;

After that you can implement this for every Language:

import {MessagesInterface} from "./MessagesInterface";

export const messages: MessagesInterface = {
    hello: (name: string): string => `Hello ${name}`,
}

export default messages;

Pluralize

You can also translate with pluralization. This way you can provide Templates for different number inputs:

import {MessageInterface, Pluralizer, DeepReadonly} from "@werdetnachbarn/hello-world/messages";

export interface InnerMessagesInterface extends MessageInterface {
    dogs: Pluralizer
}
export type MessagesInterface = DeepReadonly<InnerMessagesInterface>;

After that you can implement this for every Language:

import {MessagesInterface, DefaultPluralizer} from "@werdetnachbarn/hello-world/messages";

export const messages: MessagesInterface = {
    dogs: (amount: number) => DefaultPluralizer(amount, {
        zero: 'You have no Dogs :(',
        one: 'You have a Dog. Nice!',
        many: amount1 => `You have ${String(amount1)} dogs.`
    })
}

export default messages;