diff --git a/angular.json b/angular.json index 7e2993e..658d173 100644 --- a/angular.json +++ b/angular.json @@ -91,6 +91,50 @@ } } }, + "multi-http-loader": { + "projectType": "library", + "root": "projects/multi-http-loader", + "sourceRoot": "projects/multi-http-loader/src", + "prefix": "lib", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:ng-packagr", + "options": { + "project": "projects/multi-http-loader/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "projects/multi-http-loader/tsconfig.lib.prod.json" + }, + "development": { + "tsConfig": "projects/multi-http-loader/tsconfig.lib.json" + } + }, + "defaultConfiguration": "production" + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "tsConfig": "./tsconfig.spec.json", + "karmaConfig": "./karma.conf.js", + "polyfills": [ + "zone.js", + "zone.js/testing" + ] + } + }, + "lint": { + "builder": "@angular-eslint/builder:lint", + "options": { + "lintFilePatterns": [ + "projects/multi-http-loader/**/*.ts", + "projects/multi-http-loader/**/*.html" + ], + "eslintConfig": "projects/multi-http-loader/eslint.config.js" + } + } + } + }, "test-app": { "projectType": "application", "schematics": { diff --git a/projects/multi-http-loader/LICENSE b/projects/multi-http-loader/LICENSE new file mode 100644 index 0000000..59f808d --- /dev/null +++ b/projects/multi-http-loader/LICENSE @@ -0,0 +1,8 @@ +Copyright (c) 2018 Olivier Combe +Copyright (c) 2024 Andreas Löw / CodeAndWeb GmbH + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/projects/multi-http-loader/README.md b/projects/multi-http-loader/README.md new file mode 100644 index 0000000..99272c0 --- /dev/null +++ b/projects/multi-http-loader/README.md @@ -0,0 +1,116 @@ +# @codeandweb/multi-http-loader + +A loader for [ngx-translate](https://github.com/ngx-translate/core) that loads translations using http. + +[![npm version](https://img.shields.io/npm/v/ngx-translate-multi-http-loader.svg)](https://www.npmjs.com/package/ngx-translate-multi-http-loader) ![NPM](https://img.shields.io/npm/l/ngx-translate-multi-http-loader) ![npm bundle size](https://img.shields.io/bundlephobia/min/ngx-translate-multi-http-loader) +![npm](https://img.shields.io/npm/dm/ngx-translate-multi-http-loader) + +Angular 14 example: https://stackblitz.com/edit/ngx-translate-multi-http-loader-sample-2clau3?file=src/app/app.module.ts + +Angular 6 example: https://stackblitz.com/edit/ngx-translate-multi-http-loader-sample + +Get the complete changelog here: https://github.com/rbalet/ngx-translate-multi-http-loader/releases + +* [Installation](#installation) +* [Usage](#usage) +* [Error & BugFix](#possible-error--bugfix) + +## breaking change: v9.0.0 +* This library is now using `httpBackend` instead of the `httpClient`, to avoid being delayed by interceptor, which was creating errors while loading. +* From the v9, the library will only be using a list of `string[]` so `prefix` & `suffix` aren't needed anymore and `.json` gonna be the default suffix. + +## Installation + +We assume that you already installed [ngx-translate](https://github.com/ngx-translate/core). + +Now you need to install the npm module for `MultiTranslateHttpLoader`: + +```sh +npm install ngx-translate-multi-http-loader +``` + +Choose the version corresponding to your Angular version: + + | Angular | @ngx-translate/core | ngx-translate-multi-http-loader | + | ------- | ------------------- | ------------------------------- | + | >= 16 | 15.x+ | >= 15.x+ | + | 15 | 14.x+ | 9.x+ | + | 14 | 14.x+ | 8.x+ | + | 13 | 14.x+ | 7.x+ | + | 6 | 10.x+ | 1.x+ | + +## Usage +_The `MultiTranslateHttpLoader` uses HttpBackend to load translations, therefore :_ +1. Create and export a new `HttpLoaderFactory` function +2. Import the `HttpClientModule` from `@angular/common/http` +3. Setup the `TranslateModule` to use the `MultiTranslateHttpLoader` + +```typescript +import {NgModule} from '@angular/core'; +import {BrowserModule} from '@angular/platform-browser'; +import {HttpClientModule, HttpBackend} from '@angular/common/http'; +import {TranslateModule, TranslateLoader} from '@ngx-translate/core'; +import {MultiTranslateHttpLoader} from 'ngx-translate-multi-http-loader'; +import {AppComponent} from './app'; + +// AoT requires an exported function for factories +export function HttpLoaderFactory(_httpBackend: HttpBackend) { + return new MultiTranslateHttpLoader(_httpBackend, ['/assets/i18n/core/', '/assets/i18n/vendors/']); // /i18n/core/ on angular >= v18 with the new public logic +} + +@NgModule({ + imports: [ + BrowserModule, + HttpClientModule, + TranslateModule.forRoot({ + loader: { + provide: TranslateLoader, + useFactory: HttpLoaderFactory, + deps: [HttpBackend] + } + }) + ], + bootstrap: [AppComponent] +}) +export class AppModule { } +``` + +The `MultiTranslateHttpLoader` takes a list of `string[]` or `TranslationResource[]`. + +### String[] +For example `['/assets/i18n/core/', '/assets/i18n/vendors/']`, +will load your translations files for the lang "en" from : `/assets/i18n/core/en.json` and `/assets/i18n/vendors/en.json` + +### Custom suffix +**For now this loader only support the `json` format.** + +Instead of an array of `string[]`, +you may pass a list of parameters: +- `prefix: string = '/assets/i18n/'` +- `suffix: string = '.json'` +- `optional: boolean = true` + +```typescript +export function HttpLoaderFactory(_httpBackend: HttpBackend) { + return new MultiTranslateHttpLoader(_httpBackend, [ + {prefix: './assets/i18n/core/', suffix: '.json'}, + {prefix: './assets/i18n/vendors/'}, // , "suffix: '.json'" being the default value + {prefix: './assets/i18n/non-existent/', optional: true}, // Wont create any log + ]); +} +``` + +The loader will merge all translation files from the server + + +## Possible error & Bugfix +### values.at is not a function +1. Install `core-js` +2. In `polyfills.ts`, add `import 'core-js/modules/es.array.at'` + + +## Authors and acknowledgment +* maintainer [Raphaël Balet](https://github.com/rbalet) +* Former maintainer [Dennis Keil](https://github.com/denniske) +* +[![BuyMeACoffee](https://www.buymeacoffee.com/assets/img/custom_images/purple_img.png)](https://www.buymeacoffee.com/widness) diff --git a/projects/multi-http-loader/eslint.config.js b/projects/multi-http-loader/eslint.config.js new file mode 100644 index 0000000..d260aa8 --- /dev/null +++ b/projects/multi-http-loader/eslint.config.js @@ -0,0 +1,32 @@ +// @ts-check +const tseslint = require("typescript-eslint"); +const rootConfig = require("../../eslint.config.js"); + +module.exports = tseslint.config( + ...rootConfig, + { + files: ["**/*.ts"], + rules: { + "@angular-eslint/directive-selector": [ + "error", + { + type: "attribute", + prefix: "lib", + style: "camelCase", + }, + ], + "@angular-eslint/component-selector": [ + "error", + { + type: "element", + prefix: "lib", + style: "kebab-case", + }, + ], + }, + }, + { + files: ["**/*.html"], + rules: {}, + } +); diff --git a/projects/multi-http-loader/ng-package.json b/projects/multi-http-loader/ng-package.json new file mode 100644 index 0000000..167e721 --- /dev/null +++ b/projects/multi-http-loader/ng-package.json @@ -0,0 +1,7 @@ +{ + "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../dist/multi-http-loader", + "lib": { + "entryFile": "src/public-api.ts" + } +} diff --git a/projects/multi-http-loader/package.json b/projects/multi-http-loader/package.json new file mode 100644 index 0000000..b6fc9fa --- /dev/null +++ b/projects/multi-http-loader/package.json @@ -0,0 +1,29 @@ +{ + "name": "@codeandweb/multi-http-loader", + "version": "16.0.0", + "description": "http loader for dynamically loading translation files for @codeandweb/ngx-translate", + "keywords": [ + "@ngx-translate", + "ngx-translate", + "@ngx-translate/http-loader", + "multi-http-loader", + "@codeandweb/ngx-translate" + ], + "maintainers": [ + "raphael.balet@outlook.com" + ], + "author": { + "name": "Raphaël Balet", + "email": "raphael.balet@outlook.com" + }, + "license": "MIT", + "dependencies": { + "tslib": "^2.6.3" + }, + "peerDependencies": { + "@angular/common": ">=16", + "@angular/core": ">=16", + "@codeandweb/ngx-translate": ">=16" + }, + "sideEffects": false +} diff --git a/projects/multi-http-loader/src/lib/http-loader.spec.ts b/projects/multi-http-loader/src/lib/http-loader.spec.ts new file mode 100644 index 0000000..cdb3a7f --- /dev/null +++ b/projects/multi-http-loader/src/lib/http-loader.spec.ts @@ -0,0 +1,115 @@ +import { HttpClient, provideHttpClient } from "@angular/common/http"; +import { + HttpTestingController, + provideHttpClientTesting, +} from "@angular/common/http/testing"; +import { TestBed } from "@angular/core/testing"; +import { + provideTranslateService, + TranslateLoader, + TranslateService, + Translation, +} from "@codeandweb/ngx-translate"; +import { MultiTranslateHttpLoader } from "../public-api"; + +describe("TranslateLoader", () => { + let translate: TranslateService; + let http: HttpTestingController; + + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [ + TranslateService, + provideHttpClient(), + provideHttpClientTesting(), + provideTranslateService({ + loader: { + provide: TranslateLoader, + useFactory: (httpClient: HttpClient) => + new MultiTranslateHttpLoader(httpClient), + deps: [HttpClient], + }, + }), + ], + }); + translate = TestBed.inject(TranslateService); + http = TestBed.inject(HttpTestingController); + }); + + it("should be able to provide MultiTranslateHttpLoader", () => { + expect(MultiTranslateHttpLoader).toBeDefined(); + expect(translate.currentLoader).toBeDefined(); + expect( + translate.currentLoader instanceof MultiTranslateHttpLoader + ).toBeTruthy(); + }); + + it("should be able to get translations", () => { + translate.use("en"); + + // this will request the translation from the backend because we use a static files loader for TranslateService + translate.get("TEST").subscribe((res: Translation) => { + expect(res).toEqual("This is a test"); + }); + + // mock response after the xhr request, otherwise it will be undefined + http.expectOne("/assets/i18n/en.json").flush({ + TEST: "This is a test", + TEST2: "This is another test", + }); + + // this will request the translation from downloaded translations without making a request to the backend + translate.get("TEST2").subscribe((res: Translation) => { + expect(res).toEqual("This is another test"); + }); + }); + + it("should be able to reload a lang", () => { + translate.use("en"); + + // this will request the translation from the backend because we use a static files loader for TranslateService + translate.get("TEST").subscribe((res: Translation) => { + expect(res).toEqual("This is a test"); + + // reset the lang as if it was never initiated + translate.reloadLang("en").subscribe(() => { + expect(translate.instant("TEST")).toEqual("This is a test 2"); + }); + + http + .expectOne("/assets/i18n/en.json") + .flush({ TEST: "This is a test 2" }); + }); + + // mock response after the xhr request, otherwise it will be undefined + http.expectOne("/assets/i18n/en.json").flush({ TEST: "This is a test" }); + }); + + it("should be able to reset a lang", (done: DoneFn) => { + translate.use("en"); + spyOn(http, "expectOne").and.callThrough(); + + // this will request the translation from the backend because we use a static files loader for TranslateService + translate.get("TEST").subscribe((res: Translation) => { + expect(res).toEqual("This is a test"); + expect(http.expectOne).toHaveBeenCalledTimes(1); + + // reset the lang as if it was never initiated + translate.resetLang("en"); + + expect(translate.instant("TEST")).toEqual("TEST"); + + // use set timeout because no request is really made and we need to trigger zone to resolve the observable + setTimeout(() => { + translate.get("TEST").subscribe((res2: Translation) => { + expect(res2).toEqual("TEST"); // because the loader is "pristine" as if it was never called + expect(http.expectOne).toHaveBeenCalledTimes(1); + done(); + }); + }, 10); + }); + + // mock response after the xhr request, otherwise it will be undefined + http.expectOne("/assets/i18n/en.json").flush({ TEST: "This is a test" }); + }); +}); diff --git a/projects/multi-http-loader/src/lib/multi-http-loader.ts b/projects/multi-http-loader/src/lib/multi-http-loader.ts new file mode 100644 index 0000000..9a73a2d --- /dev/null +++ b/projects/multi-http-loader/src/lib/multi-http-loader.ts @@ -0,0 +1,77 @@ +import { HttpBackend, HttpClient } from "@angular/common/http"; +import { TranslateLoader } from "@codeandweb/ngx-translate"; +import { forkJoin, Observable, of } from "rxjs"; +import { catchError, map } from "rxjs/operators"; + +export interface TranslationResource { + prefix: string; + suffix?: string; + optional?: boolean; +} + +export class MultiTranslateHttpLoader implements TranslateLoader { + constructor( + private _handler: HttpBackend, + private _resourcesPrefix: string[] | TranslationResource[] + ) {} + + public getTranslation(lang: string): Observable { + const requests: Observable[] = this._resourcesPrefix.map( + (resource) => { + let path: string; + + if (typeof resource === "string") path = `${resource}${lang}.json`; + else path = `${resource.prefix}${lang}${resource.suffix || ".json"}`; + + return new HttpClient(this._handler).get(path).pipe( + catchError((res) => { + if (typeof resource !== "string" && !resource.optional) { + console.group(); + console.error( + "Something went wrong for the following translation file:", + path + ); + console.error(res); + console.groupEnd(); + } + return of({}); + }) + ); + } + ); + + return forkJoin(requests).pipe( + map((response) => + response.reduce((acc, curr) => this.mergeDeep(acc, curr), {}) + ) + ); + } + + // @ToDo: Use it from ngx-translate once it gets exported: https://github.com/rbalet/ngx-translate-multi-http-loader/issues/35 + isObject(item: any): boolean { + return item && typeof item === "object" && !Array.isArray(item); + } + + mergeDeep(target: any, source: any): any { + const output = Object.assign({}, target); + + if (!this.isObject(target)) { + return this.mergeDeep({}, source); + } + + if (this.isObject(target) && this.isObject(source)) { + Object.keys(source).forEach((key: any) => { + if (this.isObject(source[key])) { + if (!(key in target)) { + Object.assign(output, { [key]: source[key] }); + } else { + output[key] = this.mergeDeep(target[key], source[key]); + } + } else { + Object.assign(output, { [key]: source[key] }); + } + }); + } + return output; + } +} diff --git a/projects/multi-http-loader/src/public-api.ts b/projects/multi-http-loader/src/public-api.ts new file mode 100644 index 0000000..cf56676 --- /dev/null +++ b/projects/multi-http-loader/src/public-api.ts @@ -0,0 +1 @@ +export * from "./lib/multi-http-loader"; diff --git a/projects/multi-http-loader/tsconfig.lib.json b/projects/multi-http-loader/tsconfig.lib.json new file mode 100644 index 0000000..2359bf6 --- /dev/null +++ b/projects/multi-http-loader/tsconfig.lib.json @@ -0,0 +1,15 @@ +/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ +/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/lib", + "declaration": true, + "declarationMap": true, + "inlineSources": true, + "types": [] + }, + "exclude": [ + "**/*.spec.ts" + ] +} diff --git a/projects/multi-http-loader/tsconfig.lib.prod.json b/projects/multi-http-loader/tsconfig.lib.prod.json new file mode 100644 index 0000000..9215caa --- /dev/null +++ b/projects/multi-http-loader/tsconfig.lib.prod.json @@ -0,0 +1,11 @@ +/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */ +/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */ +{ + "extends": "./tsconfig.lib.json", + "compilerOptions": { + "declarationMap": false + }, + "angularCompilerOptions": { + "compilationMode": "partial" + } +}