Discussion on: How do you do language translations

[Akash Kava]

In Web Atoms, we use Dependency Injection based on currently selected language, {lang} is resolved at time of module loading.

@DISingleton({ inject: "./{lang}/StringResource" })
export abstract class BaseStringResource {
    public abstract get username(): string;
    public abstract userNotFound(name: string): string;
}

/en-US/StringResource.ts

export default class StringResource extends BaseStringResource {
    public username = "Username";

    public userNotFound(name: string): string {
        return `Invalid username '${name}'`;
    }
} 

/hi/StringResource.ts

export default class StringResource extends BaseStringResource {
    public username = "यूज़र नेम";
    public userNotFound(name: string): string {
        return `'${name}' यूज़र नहीं मिला`;
    }
} 

Benefit is, you can write methods which can accept input and different language can format differently. I know you could put c style or c# style placeholder formatting.

But in this case, StringResource class can access various other libraries to perform substitution. And if you make methods async, you can still access some other JSON and perform substitution.

Dependency Injection in Web Atoms

Akash Kava ・ Jun 25 ・ 3 min read

#dependencyinjection #mvvm #typescript #javascript