Skip to content

Commit

Permalink
feature(transloco): providers functions
Browse files Browse the repository at this point in the history
  • Loading branch information
alexfriesen authored and shaharkazaz committed Jun 10, 2023
1 parent 2044afb commit 0cad8b8
Show file tree
Hide file tree
Showing 6 changed files with 160 additions and 56 deletions.
64 changes: 54 additions & 10 deletions docs/docs/getting-started/installation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -59,18 +61,17 @@ 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
// doesn't support changing language in runtime.
reRenderOnLangChange: true,
prodMode: !isDevMode(),
})
},
{ provide: TRANSLOCO_LOADER, useClass: TranslocoHttpLoader }
),
provideTranslocoLoader(TranslocoHttpLoader)
]
})
export class TranslocoRootModule {}
Expand All @@ -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<Translation>(`/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:
Expand Down
15 changes: 13 additions & 2 deletions libs/transloco/src/index.ts
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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';
3 changes: 2 additions & 1 deletion libs/transloco/src/lib/transloco-testing.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions libs/transloco/src/lib/transloco.config.ts
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
45 changes: 4 additions & 41 deletions libs/transloco/src/lib/transloco.module.ts
Original file line number Diff line number Diff line change
@@ -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 {}
85 changes: 85 additions & 0 deletions libs/transloco/src/lib/transloco.providers.ts
Original file line number Diff line number Diff line change
@@ -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<TranslocoLoader>;
};

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<TranslocoLoader>) {
return [{ provide: TRANSLOCO_LOADER, useClass: loader }];
}

export function provideTranslocoScope(scope: TranslocoScope) {
return [
{
provide: TRANSLOCO_SCOPE,
useValue: scope,
},
];
}

0 comments on commit 0cad8b8

Please sign in to comment.