Skip to content

Commit

Permalink
docs: ✏️ update docs and changelogs
Browse files Browse the repository at this point in the history
  • Loading branch information
shaharkazaz committed Mar 23, 2024
1 parent b78827d commit 0cb9980
Show file tree
Hide file tree
Showing 46 changed files with 616 additions and 620 deletions.
8 changes: 4 additions & 4 deletions docs/docs/additional-functionality.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ So the result of `service.translate('greet', {name: 'John'})` will be: "Hello Jo
You don't have to inject the service each time you need to translate a key. Transloco has an exported `translate()` function:

```ts
import { translate } from '@ngneat/transloco';
import { translate } from '@jsverse/transloco';

translate('hello');
```
Expand All @@ -70,7 +70,7 @@ In order to safely use this method, you are responsible for ensuring that the tr
You don't have to inject the service each time you need to translate an object. Transloco has an exported `translateObject()` function:

```ts
import { translateObject } from '@ngneat/transloco';
import { translateObject } from '@jsverse/transloco';

translateObject('some.object');
```
Expand All @@ -85,7 +85,7 @@ In order to safely use this method, you are responsible for ensuring that the tr

Returns the language code name from the browser, e.g. `"en"`
```ts
import { getBrowserLang } from '@ngneat/transloco';
import { getBrowserLang } from '@jsverse/transloco';

getBrowserLang();
```
Expand All @@ -94,7 +94,7 @@ getBrowserLang();

Returns the culture language code name from the browser, e.g. ``"en-US"``
```ts
import { getBrowserCultureLang } from '@ngneat/transloco';
import { getBrowserCultureLang } from '@jsverse/transloco';

getBrowserCultureLang()
```
12 changes: 10 additions & 2 deletions docs/docs/getting-started/angular-compatability.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,20 @@ Make sure you install the version corresponding to your Angular version:

<div class="compatability-table">

| Angular | @jsverse/transloco | @jsverse/transloco-locale | @jsverse/transloco-messageformat | @jsverse/transloco-preload-langs | @jsverse/transloco-persist-translations | @jsverse/transloco-persist-lang |
| --------------- | ------------------ | ------------------------- | -------------------------------- | -------------------------------- | --------------------------------------- | ------------------------------- |
| >=16 | 7.x | 7.x | 7.x | 7.x | 7.x | 7.x |

Soon support for older angular versions will be released under the jsverse scope.
<details>
<summary>See older versions</summary>
<p>

| Angular | @ngneat/transloco | @ngneat/transloco-locale | @ngneat/transloco-messageformat | @ngneat/transloco-preload-langs | @ngneat/transloco-persist-translations | @ngneat/transloco-persist-lang |
| --------------- | ----------------- | ------------------------ | ------------------------------- | ------------------------------- | -------------------------------------- | ------------------------------ |
| >=16 | 5.x | 5.x | 5.x | 5.x | 5.x | 5.x |
| >=13 <16 | 4.x | 4.x | 4.x | 4.x | 4.x | 4.x |
| 12 | 3.x | 3.x | 3.x | 3.x | 3.x | 3.x |
| >=6 <12 | 2.x | <3 | <3 | <3 | <3 | <3 |

</p>
</details>
</div>
10 changes: 5 additions & 5 deletions docs/docs/getting-started/installation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ import TabItem from '@theme/TabItem';

Install the library using Angular CLI:
```bash
ng add @ngneat/transloco
ng add @jsverse/transloco
# On an nx workspace
nx g @ngneat/transloco:ng-add
nx g @jsverse/transloco:ng-add
```

For more information, see the [ng-add](../schematics/ng-add) command page.
Expand All @@ -26,7 +26,7 @@ A default http loader implementation to fetch the translation files:

```ts
import { inject, Injectable } from "@angular/core";
import { Translation, TranslocoLoader } from "@ngneat/transloco";
import { Translation, TranslocoLoader } from "@jsverse/transloco";
import { HttpClient } from "@angular/common/http";

@Injectable({ providedIn: 'root' })
Expand Down Expand Up @@ -67,7 +67,7 @@ The command will add the `provideTransloco` and `provideHttpClient` to your app
```ts title="app.config.ts"
import { ApplicationConfig, isDevMode } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import { provideTransloco } from '@ngneat/transloco';
import { provideTransloco } from '@jsverse/transloco';

import { TranslocoHttpLoader } from './transloco-loader';

Expand Down Expand Up @@ -99,7 +99,7 @@ When added to a module based application a new `transloco-root.module.ts` which
import {
provideTransloco,
TranslocoModule
} from '@ngneat/transloco';
} from '@jsverse/transloco';
import { Injectable, isDevMode, NgModule } from '@angular/core';

import { TranslocoHttpLoader } from './transloco-loader';
Expand Down
8 changes: 4 additions & 4 deletions docs/docs/hack.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ description: Hack The Library | Transloco Angular i18n
The loader provides you with the ability to override the default handling of translation file loading.

```ts
import { TranslocoLoader } from '@ngneat/transloco';
import { TranslocoLoader } from '@jsverse/transloco';

export class CustomLoader implements TranslocoLoader {
getTranslation(lang: string) {
Expand All @@ -25,7 +25,7 @@ export class CustomLoader implements TranslocoLoader {
The interceptor provides you with the ability to manipulate the translation object before it is saved by the service.

```ts
import { TranslocoInterceptor } from '@ngneat/transloco';
import { TranslocoInterceptor } from '@jsverse/transloco';

export class CustomInterceptor implements TranslocoInterceptor {
preSaveTranslation(translation: Translation, lang: string): Translation {
Expand All @@ -42,7 +42,7 @@ export class CustomInterceptor implements TranslocoInterceptor {

This handler is responsible for handling missing keys. The default handler calls `console.warn()` with the key when config.isProdMode is set to `false`, and returns an empty string to use as a replacement for the missing key's value.
```ts
import { TranslocoMissingHandler } from '@ngneat/transloco';
import { TranslocoMissingHandler } from '@jsverse/transloco';

export class CustomHandler implements TranslocoMissingHandler {
handle(key: string, config: TranslocoConfig) {
Expand All @@ -58,7 +58,7 @@ The fallback strategy is responsible for loading the fallback translation file,
When you need more control over this functionality, you can define your own strategy:

```ts
import { TranslocoFallbackStrategy } from '@ngneat/transloco';
import { TranslocoFallbackStrategy } from '@jsverse/transloco';

export class CustomStrategy implements TranslocoFallbackStrategy {
getNextLangs(failedLang: string) {
Expand Down
4 changes: 2 additions & 2 deletions docs/docs/lazy-load/scope-configuration.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ We can set it inside the _lazy route_ providers:

```ts title="todos.routes.ts"
import { Route } from '@angular/router';
import { provideTranslocoScope } from '@ngneat/transloco';
import { provideTranslocoScope } from '@jsverse/transloco';

export const TODO_ROUTES: Route = {
path: '',
Expand All @@ -52,7 +52,7 @@ export const TODO_ROUTES: Route = {
We can set it inside the _lazy module_ providers:

```ts title="todos.module.ts"
import { provideTranslocoScope } from '@ngneat/transloco';
import { provideTranslocoScope } from '@jsverse/transloco';

const routes: Routes = [
{
Expand Down
2 changes: 1 addition & 1 deletion docs/docs/migration/angular.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ some manual changes might still be needed after the script ran.
The script will iterate over all your HTML files, build a translation file and will execute the replacements described below.

### Command
`ng g @ngneat/transloco:migrate`
`ng g @jsverse/transloco:migrate`

### The Translation file

Expand Down
6 changes: 3 additions & 3 deletions docs/docs/migration/ngx.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ some manual changes might still be needed after the script ran.
:::

### Command
`ng g @ngneat/transloco:migrate`
`ng g @jsverse/transloco:migrate`

## What will be done?

Expand Down Expand Up @@ -42,10 +42,10 @@ The `TranslateService` imports will be replaced with `TranslocoService`.

##### Examples:

1. `import {TranslateService} from '@ngx-translate/core';` will be replaced with `import { TranslocoService } from '@ngneat/transloco';`
1. `import {TranslateService} from '@ngx-translate/core';` will be replaced with `import { TranslocoService } from '@jsverse/transloco';`
2. `import {TranslateModule, TranslateLoader} from '@ngx-translate/core';` will be replaced with
`import {TranslateLoader} from '@ngx-translate/core';`
`import { TranslocoService } from '@ngneat/transloco';`
`import { TranslocoService } from '@jsverse/transloco';`

### Constructor Injections

Expand Down
10 changes: 5 additions & 5 deletions docs/docs/plugins/locale.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ This plugin provides localization(l10n) support for Transloco.
## Installation

```bash
npm i @ngneat/transloco-locale
npm i @jsverse/transloco-locale
```

<Tabs groupId="app-type" queryString>
Expand Down Expand Up @@ -50,7 +50,7 @@ Import the `TranslocoLocaleModule` or the directive/pipe you are using into your
Export the `TranslocoLocaleModule` along with `TranslocoModule` from the `TranslocoRootModule` and add the locale providers:

```ts title="transloco-root.module.ts"
import { TranslocoLocaleModule, provideTranslocoLocale } from '@ngneat/transloco-locale';
import { TranslocoLocaleModule, provideTranslocoLocale } from '@jsverse/transloco-locale';

@NgModule({
exports: [ TranslocoModule, TranslocoLocaleModule ],
Expand Down Expand Up @@ -185,7 +185,7 @@ export const appConfig = {
<TabItem value="ng-module" label="NgModule" attributes={{style: {display: 'none'}}}>

```ts title="transloco-root.module.ts"
import { TranslocoLocaleModule, provideTranslocoLocale } from '@ngneat/transloco-locale';
import { TranslocoLocaleModule, provideTranslocoLocale } from '@jsverse/transloco-locale';

@NgModule({
exports: [ TranslocoModule, TranslocoLocaleModule ],
Expand Down Expand Up @@ -280,7 +280,7 @@ export const appConfig = {
1. In the module's configuration (as mentioned above):

```ts title="transloco-root.module.ts"
import { TranslocoLocaleModule } from '@ngneat/transloco-locale';
import { TranslocoLocaleModule } from '@jsverse/transloco-locale';

const globalFormatConfig = {
date: {
Expand Down Expand Up @@ -390,7 +390,7 @@ In some cases you might want to customize the localization transformation, to ac
There are two types of transformers for date and number:

```ts title="custom-transformer.ts"
import { DefaultDateTransformer, DefaultNumberTransformer } from '@ngneat/transloco-locale';
import { DefaultDateTransformer, DefaultNumberTransformer } from '@jsverse/transloco-locale';

export class CustomDateTransformer extends DefaultDateTransformer {
public transform(date: Date, locale: Locale, options: DateFormatOptions): string {
Expand Down
6 changes: 3 additions & 3 deletions docs/docs/plugins/message-format.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: Message Format
description: Plugins - Message Format | Transloco Angular i18n
---

Transpiler for `@ngneat/transloco` that uses `@messageformat/core` to compile translations using ICU syntax for handling pluralization and gender.
Transpiler for `@jsverse/transloco` that uses `@messageformat/core` to compile translations using ICU syntax for handling pluralization and gender.

Messageformat is a mechanism for handling both pluralization and gender in your app.

Expand All @@ -12,7 +12,7 @@ You can see its format guide [here](https://messageformat.github.io/messageforma
## Installation

```bash
npm i @ngneat/transloco-messageformat
npm i @jsverse/transloco-messageformat
```

## Usage
Expand All @@ -30,7 +30,7 @@ It then enables support for the following within your i18n translation files:
To enable this plugin, add the following import in your `TranslocoRootModule`:

```ts title="transloco-root.module.ts"
import { provideTranslocoMessageformat } from '@ngneat/transloco-messageformat';
import { provideTranslocoMessageformat } from '@jsverse/transloco-messageformat';

@NgModule({
providers: [
Expand Down
8 changes: 4 additions & 4 deletions docs/docs/plugins/persist-lang.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@ This plugin provides the functionality of persisting the active language to the

## Installation
```bash
npm install @ngneat/transloco-persist-lang
npm install @jsverse/transloco-persist-lang
```

## Usage
Add persist lang providers using the into the `TranslocoRootModule`/`app.config.ts`, and provide the storage you would like to use:

```ts title="transloco-root.module.ts"
import { provideTranslocoPersistLang } from '@ngneat/transloco-persist-lang';
import { provideTranslocoPersistLang } from '@jsverse/transloco-persist-lang';

@NgModule({
providers: [
Expand All @@ -34,7 +34,7 @@ When the user changes the current language, the plugin will keep it in the provi
By default, the plugin will use the cached language if available otherwise it will use the default language provided in the config. You can always change this behavior by providing a `getLangFn` option:

```ts title="transloco-root.module.ts"
import { provideTranslocoPersistLang } from '@ngneat/transloco-persist-lang';
import { provideTranslocoPersistLang } from '@jsverse/transloco-persist-lang';

export function getLangFn({
cachedLang,
Expand Down Expand Up @@ -62,7 +62,7 @@ export class TranslocoRootModule {}
The plugin also provides a `cookiesStorage` function that you can use to save the language in a cookie. (SSR advantage)

```ts title="transloco-root.module.ts"
import { provideTranslocoPersistLang, cookiesStorage } from '@ngneat/transloco-persist-lang';
import { provideTranslocoPersistLang, cookiesStorage } from '@jsverse/transloco-persist-lang';

@NgModule({
imports: [
Expand Down
8 changes: 4 additions & 4 deletions docs/docs/plugins/persist-translations.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@ This plugin provides the functionality of persisting translations to the provide

## Installation
```bash
npm install @ngneat/transloco-persist-translations
npm install @jsverse/transloco-persist-translations
```

## Usage
Add persist translation providers using the into the `TranslocoRootModule`/`app.config.ts`, and provide the storage you would like to use:

```ts title="transloco-root.module.ts"
import {provideTranslocoPersistTranslations} from '@ngneat/transloco-persist-translations';
import {provideTranslocoPersistTranslations} from '@jsverse/transloco-persist-translations';

import { TranslocoHttpLoader } from './transloco-loader';

Expand All @@ -35,7 +35,7 @@ Note that you should **not** include the default loader to make it work.
You can also use an async storage. For example, let's install [localForage](https://github.com/localForage/localForage) and use `IndexedDB`:

```ts title="transloco-root.module.ts"
import {provideTranslocoPersistTranslations} from '@ngneat/transloco-persist-translations';
import {provideTranslocoPersistTranslations} from '@jsverse/transloco-persist-translations';
import * as localForage from 'localforage';

import { TranslocoHttpLoader } from './transloco-loader';
Expand Down Expand Up @@ -75,7 +75,7 @@ export class TranslocoRootModule {}
The storage cleanup is done automatically once the `ttl` is passed, but it could also can be done manually by calling `clearCache` method from the cache service:

```ts title="app.component.ts"
import { TranslocoPersistTranslations } from '@ngneat/transloco-persist-translations';
import { TranslocoPersistTranslations } from '@jsverse/transloco-persist-translations';

export class AppComponent {
constructor(private loader: TranslocoPersistTranslations) {}
Expand Down
4 changes: 2 additions & 2 deletions docs/docs/plugins/preload-langs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@ This plugin provides the functionality of preloading the provided languages when

## Installation
```bash
npm install @ngneat/transloco-preload-langs
npm install @jsverse/transloco-preload-langs
```

## Usage
```ts title="transloco-root.module.ts"
import { provideTranslocoPreloadLangs } from '@ngneat/transloco-preload-langs';
import { provideTranslocoPreloadLangs } from '@jsverse/transloco-preload-langs';

@NgModule({
providers: [
Expand Down
2 changes: 1 addition & 1 deletion docs/docs/plugins/third-party.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,6 @@ Here are some 3rd party plugins for Transloco made by the community.
<a className="blog-post plugin" href="https://github.com/penleychan/ngx-transloco-router" rel="noopener noreferrer" target="_blank" spellCheck="false">
<div className="blog-preview">
<div className="blog-title">ngx-transloco-router: Localized routes for Transloco</div>
<div className="blog-description">This is a fork/port of @gilsdav/ngx-translate-router modified to work with @ngneat/transloco.</div>
<div className="blog-description">This is a fork/port of @gilsdav/ngx-translate-router modified to work with @jsverse/transloco.</div>
</div>
</a>
2 changes: 1 addition & 1 deletion docs/docs/recipes/google-translate-integration.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ description: Recipe - Generate Locale Files using Google Translate | Transloco A
---
import useBaseUrl from '@docusaurus/useBaseUrl';

Many thanks to [born2net](https://github.com/born2net) for sharing this. [(#261)](https://github.com/ngneat/transloco/issues/261)
Many thanks to [born2net](https://github.com/born2net) for sharing this. [(#261)](https://github.com/jsverse/transloco/issues/261)

The script will read the en.json translation file and will generate new localized files based on what's defined in the script.

Expand Down
2 changes: 1 addition & 1 deletion docs/docs/recipes/prefetch.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Here's how you can achieve this using the `APP_INITIALIZER` token:
```ts
import { APP_INITIALIZER } from '@angular/core';
import { UserService } from './user.service';
import { TranslocoService } from '@ngneat/transloco';
import { TranslocoService } from '@jsverse/transloco';

export function preloadUser(userService: UserService, transloco: TranslocoService) {
return function() {
Expand Down
2 changes: 1 addition & 1 deletion docs/docs/recipes/xliff.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import {
TRANSLOCO_CONFIG,
translocoConfig,
TranslocoModule
} from '@ngneat/transloco';
} from '@jsverse/transloco';
import { Injectable, isDevMode, NgModule } from '@angular/core';
import { from } from 'rxjs';
import { switchMap, map } from 'rxjs/operators';
Expand Down
Loading

0 comments on commit 0cb9980

Please sign in to comment.