From 0cad8b8263483f7910ef5eceb532c5453889f291 Mon Sep 17 00:00:00 2001 From: Alex Date: Sat, 10 Jun 2023 15:53:51 +0200 Subject: [PATCH] feature(transloco): providers functions --- docs/docs/getting-started/installation.mdx | 64 +++++++++++--- libs/transloco/src/index.ts | 15 +++- .../src/lib/transloco-testing.module.ts | 3 +- libs/transloco/src/lib/transloco.config.ts | 4 +- libs/transloco/src/lib/transloco.module.ts | 45 +--------- libs/transloco/src/lib/transloco.providers.ts | 85 +++++++++++++++++++ 6 files changed, 160 insertions(+), 56 deletions(-) create mode 100644 libs/transloco/src/lib/transloco.providers.ts diff --git a/docs/docs/getting-started/installation.mdx b/docs/docs/getting-started/installation.mdx index aec4e97d6..bea151189 100644 --- a/docs/docs/getting-started/installation.mdx +++ b/docs/docs/getting-started/installation.mdx @@ -33,19 +33,21 @@ First, Transloco creates boilerplate files for the requested translations: } ``` -Next, it will create a new file, `transloco-root.module.ts` which exposes an Angular's module with a default configuration, and inject it into the `AppModule`: +## NgModule Setup + +Next, it will create a new file, `transloco-root.module.ts` which exposes an Angular module with a default configuration, and inject it into the `AppModule`: ```ts title="transloco-root.module.ts" +import { Injectable, isDevMode, NgModule } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { - TRANSLOCO_LOADER, Translation, TranslocoLoader, - TRANSLOCO_CONFIG, translocoConfig, - TranslocoModule + TranslocoModule, + provideTranslocoConfig, + provideTranslocoLoader } from '@ngneat/transloco'; -import { Injectable, isDevMode, NgModule } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class TranslocoHttpLoader implements TranslocoLoader { @@ -59,9 +61,8 @@ export class TranslocoHttpLoader implements TranslocoLoader { @NgModule({ exports: [ TranslocoModule ], providers: [ - { - provide: TRANSLOCO_CONFIG, - useValue: translocoConfig({ + provideTranslocoConfig( + translocoConfig({ availableLangs: ['en', 'es'], defaultLang: 'en', // Remove this option if your application @@ -69,8 +70,8 @@ export class TranslocoHttpLoader implements TranslocoLoader { reRenderOnLangChange: true, prodMode: !isDevMode(), }) - }, - { provide: TRANSLOCO_LOADER, useClass: TranslocoHttpLoader } + ), + provideTranslocoLoader(TranslocoHttpLoader) ] }) export class TranslocoRootModule {} @@ -95,6 +96,49 @@ getTranslation(langPath: string) { ::: And that's it! Now we are ready to use it in our project. +## Standalone Setup + +Add the `provideTransloco` function to your `main.ts` and pass in your configuration. + +```ts title="main.ts" +import {inject, Injectable, isDevMode } from '@angular/core'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { HttpClient, provideHttpClient } from '@angular/common/http'; +import { + Translation, + TranslocoLoader, + translocoConfig, + provideTransloco, +} from '@ngneat/transloco'; +import { AppComponent } from './app/app.component'; + +@Injectable({ providedIn: 'root' }) +export class TranslocoHttpLoader implements TranslocoLoader { + private http = inject(HttpClient); + + getTranslation(lang: string) { + return this.http.get(`/assets/i18n/${lang}.json`); + } +} + +bootstrapApplication(AppComponent, { + providers: [ + provideHttpClient(), + provideTransloco({ + config: translocoConfig({ + availableLangs: ['en', 'es'], + defaultLang: 'en', + // Remove this option if your application + // doesn't support changing language in runtime. + reRenderOnLangChange: true, + prodMode: !isDevMode(), + }), + loader: TranslocoHttpLoader, + }) + ] +}); +``` + ## Angular & Transloco versions Make sure you install the version corresponding to your Angular version: diff --git a/libs/transloco/src/index.ts b/libs/transloco/src/index.ts index f586cb732..7e428886c 100644 --- a/libs/transloco/src/index.ts +++ b/libs/transloco/src/index.ts @@ -1,7 +1,11 @@ -export { translate, translateObject, TranslocoService } from './lib/transloco.service'; +export { + translate, + translateObject, + TranslocoService, +} from './lib/transloco.service'; export { TranslocoDirective } from './lib/transloco.directive'; export { TranslocoPipe } from './lib/transloco.pipe'; -export { TranslocoModule, defaultProviders } from './lib/transloco.module'; +export { TranslocoModule } from './lib/transloco.module'; export { TRANSLOCO_LOADER, TranslocoLoader } from './lib/transloco.loader'; export { TranslocoConfig, @@ -44,3 +48,10 @@ export { getBrowserCultureLang, getBrowserLang } from './lib/browser-lang'; export { getPipeValue, getLangFromScope, getScopeFromLang } from './lib/shared'; export * from './lib/types'; export * from './lib/helpers'; +export { + defaultProviders, + provideTransloco, + provideTranslocoConfig, + provideTranslocoLoader, + provideTranslocoScope, +} from './lib/transloco.providers'; diff --git a/libs/transloco/src/lib/transloco-testing.module.ts b/libs/transloco/src/lib/transloco-testing.module.ts index 80ff507c5..634e63a4a 100644 --- a/libs/transloco/src/lib/transloco-testing.module.ts +++ b/libs/transloco/src/lib/transloco-testing.module.ts @@ -9,7 +9,8 @@ import { import { TRANSLOCO_LOADER, TranslocoLoader } from './transloco.loader'; import { HashMap, Translation } from './types'; import { Observable, of } from 'rxjs'; -import { defaultProviders, TranslocoModule } from './transloco.module'; +import { TranslocoModule } from './transloco.module'; +import { defaultProviders } from './transloco.providers'; import { TRANSLOCO_CONFIG, TranslocoConfig, diff --git a/libs/transloco/src/lib/transloco.config.ts b/libs/transloco/src/lib/transloco.config.ts index 7586a9720..0c5a84669 100644 --- a/libs/transloco/src/lib/transloco.config.ts +++ b/libs/transloco/src/lib/transloco.config.ts @@ -1,5 +1,5 @@ -import { InjectionToken, Provider } from '@angular/core'; -import { AvailableLangs, HashMap } from './types'; +import { InjectionToken } from '@angular/core'; +import { AvailableLangs } from './types'; export interface TranslocoConfig { defaultLang: string; diff --git a/libs/transloco/src/lib/transloco.module.ts b/libs/transloco/src/lib/transloco.module.ts index bada948f3..1a54240a9 100644 --- a/libs/transloco/src/lib/transloco.module.ts +++ b/libs/transloco/src/lib/transloco.module.ts @@ -1,49 +1,12 @@ import { NgModule } from '@angular/core'; import { TranslocoLoaderComponent } from './loader-component.component'; import { TranslocoDirective } from './transloco.directive'; -import { - DefaultTranspiler, - TRANSLOCO_TRANSPILER, -} from './transloco.transpiler'; +import { defaultProviders } from './transloco.providers'; import { TranslocoPipe } from './transloco.pipe'; -import { - DefaultHandler, - TRANSLOCO_MISSING_HANDLER, -} from './transloco-missing-handler'; -import { - DefaultInterceptor, - TRANSLOCO_INTERCEPTOR, -} from './transloco.interceptor'; -import { - DefaultFallbackStrategy, - TRANSLOCO_FALLBACK_STRATEGY, -} from './transloco-fallback-strategy'; -import { TRANSLOCO_CONFIG } from './transloco.config'; - -export const defaultProviders = [ - { - provide: TRANSLOCO_TRANSPILER, - useClass: DefaultTranspiler, - deps: [TRANSLOCO_CONFIG], - }, - { - provide: TRANSLOCO_MISSING_HANDLER, - useClass: DefaultHandler, - }, - { - provide: TRANSLOCO_INTERCEPTOR, - useClass: DefaultInterceptor, - }, - { - provide: TRANSLOCO_FALLBACK_STRATEGY, - useClass: DefaultFallbackStrategy, - deps: [TRANSLOCO_CONFIG], - }, -]; @NgModule({ - declarations: [TranslocoDirective, TranslocoPipe, TranslocoLoaderComponent], - providers: [defaultProviders], - exports: [TranslocoDirective, TranslocoPipe] + declarations: [TranslocoDirective, TranslocoPipe, TranslocoLoaderComponent], + providers: [defaultProviders], + exports: [TranslocoDirective, TranslocoPipe], }) export class TranslocoModule {} diff --git a/libs/transloco/src/lib/transloco.providers.ts b/libs/transloco/src/lib/transloco.providers.ts new file mode 100644 index 000000000..caf28fd1f --- /dev/null +++ b/libs/transloco/src/lib/transloco.providers.ts @@ -0,0 +1,85 @@ +import { Provider, Type } from '@angular/core'; + +import { TRANSLOCO_LOADER, TranslocoLoader } from './transloco.loader'; +import { TRANSLOCO_CONFIG, TranslocoConfig } from './transloco.config'; +import { TRANSLOCO_SCOPE } from './transloco-scope'; +import { TranslocoScope } from './types'; + +import { + DefaultTranspiler, + TRANSLOCO_TRANSPILER, +} from './transloco.transpiler'; +import { + DefaultHandler, + TRANSLOCO_MISSING_HANDLER, +} from './transloco-missing-handler'; +import { + DefaultInterceptor, + TRANSLOCO_INTERCEPTOR, +} from './transloco.interceptor'; +import { + DefaultFallbackStrategy, + TRANSLOCO_FALLBACK_STRATEGY, +} from './transloco-fallback-strategy'; + +export const defaultProviders = [ + { + provide: TRANSLOCO_TRANSPILER, + useClass: DefaultTranspiler, + deps: [TRANSLOCO_CONFIG], + }, + { + provide: TRANSLOCO_MISSING_HANDLER, + useClass: DefaultHandler, + }, + { + provide: TRANSLOCO_INTERCEPTOR, + useClass: DefaultInterceptor, + }, + { + provide: TRANSLOCO_FALLBACK_STRATEGY, + useClass: DefaultFallbackStrategy, + deps: [TRANSLOCO_CONFIG], + }, +]; + +type TranslocoOptions = { + config?: TranslocoConfig; + loader?: Type; +}; + +export function provideTransloco(options: TranslocoOptions) { + const providers: Provider[] = [...defaultProviders]; + + if (options.config) { + providers.push(...provideTranslocoConfig(options.config)); + } + + if (options.loader) { + providers.push(...provideTranslocoLoader(options.loader)); + } + + return providers; +} + +export function provideTranslocoConfig(config: TranslocoConfig) { + return [ + { + provide: TRANSLOCO_CONFIG, + useValue: config, + }, + ]; +} + +export function provideTranslocoLoader(loader: Type) { + return [{ provide: TRANSLOCO_LOADER, useClass: loader }]; +} + +export function provideTranslocoScope(scope: TranslocoScope) { + return [ + { + provide: TRANSLOCO_SCOPE, + useValue: scope, + }, + ]; +}