npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@56duong/extract-ngx-translate

v1.0.12

Published

Extracting translation keys from Angular HTML and TypeScript files when you use the ngx-translate.

Downloads

9

Readme

extract-translations

extract-translations is a Node.js script designed to extract translation keys from your source files and update your translation JSON files. It supports various transformation options to format the keys and values as needed.

Features

  • Extracts translation keys from .html and .ts files.
  • Supports various transformation options for keys and values.
  • Cleans up unused keys in existing translation files.
  • Merges new keys into existing translation files.

Installation

You can install the package via npm:

npm i @56duong/extract-ngx-translate

Usage

To run the script, use the following command:

npx @56duong/extract-ngx-translate <inputDir> <outputPaths...> [options]

By default, the script will add keys that do not exist or only update keys that do not have a value, the script will delete keys that no longer exist in the source files unless they have a _preserve key set to true to prevent removal.

Parameters

  • <inputDir>: The directory containing the source files to scan for translation keys.
  • <outputPaths...>: One or more paths to the translation JSON files to update.

Options

File Type Option
  --file-types, -f: A string specifying the file types to process (default: '.ts,.html').

Default Value Options
  --key-as-default-value, --kd: Use key as default value.
  --null-as-default-value, --nd: Use null as default value.
  --string-as-default-value, --esd: Use a specific string as default value.
  If no specific value transformation argument (`--kd`, `--nd`, `--esd`) is provided, the default value is an empty string (`''`).

Key Transformation Options
  --remove-underscore, --ru: Use key as default value and remove underscores.
  --uppercase, --up: Convert key to uppercase.
  --capitalize, --c: Capitalize the first letter of every word in the key.
  --lowercase, --l: Convert key to lowercase.
  --uppercase-first-value, --ufv: Uppercase the first letter of the value.

Overwrite Option
  --overwrite, --o: Overwrite existing translation values with new ones. By default, the script only updates existing keys if they do not have a value. The --overwrite option cannot overwrite keys with the `_preserve` key set to `true`.

Translate Service Identifier Option
  --translate-service, --ts: Specify the name of the translation service to use in TypeScript files (default: 'translateService'). Example: --translate-service='translateService'.

Regular Expressions Used

The script uses regular expressions to identify translation keys in your source files. Below is the regexMap constant that defines the patterns for different file types:

const regexMap = {
  '.html': /'"['"]\s*\|\s*translate/g,
  '.ts': new RegExp(`${translateService}\\.instant\\(\\s*'"['"]\\s*\\)`, 'g'),
};

Explanation

  • HTML Files (.html):

    • The regular expression /'"['"]\s*\|\s*translate/g is used to match translation keys within HTML files.
    • It looks for strings enclosed in single or double quotes that are followed by the | translate pipe.
    • Example: <p>{{ 'hello_world' | translate }}</p> will match 'hello_world'.
    • The regular expression is flexible with spaces, so it will also match <p>{{'hello_world'|translate}}</p>.
  • TypeScript Files (.ts):

    • The regular expression new RegExp(`${translateService}\\.instant\\(\\s*['"]([^'"]*)['"]\\s*\\)`, 'g') is used to match translation keys within TypeScript files.
    • It looks for strings enclosed in single or double quotes that are passed as arguments to the specified translation service's instant method.
    • Example: const hello = this.translateService.instant('hello_world'); will match 'hello_world'.
    • Note: The default translation service identifier is translateService, but you can specify a different identifier using the --translate-service option.

Example

npx @56duong/extract-ngx-translate ./src/app ./src/assets/i18n/en.json ./src/assets/i18n/fr.json ./src/assets/i18n/vi.json --file-types='.ts,.html' --key-as-default-value --uppercase-first-value --remove-underscore

or

npx @56duong/extract-ngx-translate ./src/app ./src/assets/i18n/en.json ./src/assets/i18n/fr.json ./src/assets/i18n/vi.json --file-types='.ts,.html' --kd --ufv --ru

This command will:

  • Scan the ./src/app directory for .ts and .html files.
  • Extract translation keys and apply the specified transformations. Use key as default value, uppercase the first letter of the value and remove underscores.
  • Update the en.json, fr.json, and vi.json files with the new keys and values.

Input Example

TypeScript File (example.component.ts)

import { TranslateService } from '@ngx-translate/core';

export class ExampleComponent {
  constructor(private translateService: TranslateService) {}

  ngOnInit() {
    const hello = this.translateService.instant('hello_world');
    const welcome = this.translateService.instant('welcome_message');
  }
}

Note: The default translation service identifier is `translateService`, but you can specify a different identifier using the `--translate-service` option.

HTML File (example.component.html)

<p>{{ 'hello_world' | translate }}</p>
<p>{{ 'welcome_message' | translate }}</p>

Output Example

English Translation File (en.json)

{
  "hello_world": "Hello world",
  "welcome_message": "Welcome message"
}

French Translation File (fr.json)

{
  "hello_world": "Hello world",
  "welcome_message": "Welcome message"
}

Vietnamese Translation File (vi.json)

{
  "hello_world": "Hello world",
  "welcome_message": "Welcome message"
}

License

This project is licensed under the MIT License.