From 539859f8425d134d9a332663b11ac957ff47efa8 Mon Sep 17 00:00:00 2001 From: arturovt Date: Wed, 1 Jan 2025 15:59:30 +0200 Subject: [PATCH] refactor(transloco): tree-shake injection token names in production In this commit, we tree-shake injection token names in production by inlining the `ngDevMode` condition. This is the same approach that Angular uses. See, for instance: https://tinyurl.com/4y9dxzsp (long GitHub URL). `ngDevMode` cannot be extracted into a separate shared variable, as this would result in a separate runtime variable. The condition must always be inlined for the minifier to work correctly. --- libs/transloco/src/lib/transloco-fallback-strategy.ts | 6 +++++- libs/transloco/src/lib/transloco-lang.ts | 4 +++- libs/transloco/src/lib/transloco-loading-template.ts | 4 +++- libs/transloco/src/lib/transloco-missing-handler.ts | 6 +++++- libs/transloco/src/lib/transloco-scope.ts | 2 +- libs/transloco/src/lib/transloco.config.ts | 2 +- libs/transloco/src/lib/transloco.interceptor.ts | 2 +- libs/transloco/src/lib/transloco.loader.ts | 2 +- libs/transloco/src/lib/transloco.transpiler.ts | 2 +- libs/transloco/src/lib/types.ts | 8 ++++++++ 10 files changed, 29 insertions(+), 9 deletions(-) diff --git a/libs/transloco/src/lib/transloco-fallback-strategy.ts b/libs/transloco/src/lib/transloco-fallback-strategy.ts index 801d68e37..52649169d 100644 --- a/libs/transloco/src/lib/transloco-fallback-strategy.ts +++ b/libs/transloco/src/lib/transloco-fallback-strategy.ts @@ -3,7 +3,11 @@ import { Inject, Injectable, InjectionToken } from '@angular/core'; import { TRANSLOCO_CONFIG, TranslocoConfig } from './transloco.config'; export const TRANSLOCO_FALLBACK_STRATEGY = - new InjectionToken('TRANSLOCO_FALLBACK_STRATEGY'); + new InjectionToken( + typeof ngDevMode !== 'undefined' && ngDevMode + ? 'TRANSLOCO_FALLBACK_STRATEGY' + : '', + ); export interface TranslocoFallbackStrategy { getNextLangs(failedLang: string): string[]; diff --git a/libs/transloco/src/lib/transloco-lang.ts b/libs/transloco/src/lib/transloco-lang.ts index 579216b90..91a064685 100644 --- a/libs/transloco/src/lib/transloco-lang.ts +++ b/libs/transloco/src/lib/transloco-lang.ts @@ -1,3 +1,5 @@ import { InjectionToken } from '@angular/core'; -export const TRANSLOCO_LANG = new InjectionToken('TRANSLOCO_LANG'); +export const TRANSLOCO_LANG = new InjectionToken( + typeof ngDevMode !== 'undefined' && ngDevMode ? 'TRANSLOCO_LANG' : '', +); diff --git a/libs/transloco/src/lib/transloco-loading-template.ts b/libs/transloco/src/lib/transloco-loading-template.ts index 0665f8571..19e68f951 100644 --- a/libs/transloco/src/lib/transloco-loading-template.ts +++ b/libs/transloco/src/lib/transloco-loading-template.ts @@ -3,5 +3,7 @@ import { InjectionToken } from '@angular/core'; import { Content } from './template-handler'; export const TRANSLOCO_LOADING_TEMPLATE = new InjectionToken( - 'TRANSLOCO_LOADING_TEMPLATE', + typeof ngDevMode !== 'undefined' && ngDevMode + ? 'TRANSLOCO_LOADING_TEMPLATE' + : '', ); diff --git a/libs/transloco/src/lib/transloco-missing-handler.ts b/libs/transloco/src/lib/transloco-missing-handler.ts index e11a211b8..7bee2a0b0 100644 --- a/libs/transloco/src/lib/transloco-missing-handler.ts +++ b/libs/transloco/src/lib/transloco-missing-handler.ts @@ -4,7 +4,11 @@ import { TranslocoConfig } from './transloco.config'; import { HashMap } from './types'; export const TRANSLOCO_MISSING_HANDLER = - new InjectionToken('TRANSLOCO_MISSING_HANDLER'); + new InjectionToken( + typeof ngDevMode !== 'undefined' && ngDevMode + ? 'TRANSLOCO_MISSING_HANDLER' + : '', + ); export interface TranslocoMissingHandlerData extends TranslocoConfig { activeLang: string; diff --git a/libs/transloco/src/lib/transloco-scope.ts b/libs/transloco/src/lib/transloco-scope.ts index 027f868ed..ae33fcf85 100644 --- a/libs/transloco/src/lib/transloco-scope.ts +++ b/libs/transloco/src/lib/transloco-scope.ts @@ -3,5 +3,5 @@ import { InjectionToken } from '@angular/core'; import { TranslocoScope } from './types'; export const TRANSLOCO_SCOPE = new InjectionToken( - 'TRANSLOCO_SCOPE', + typeof ngDevMode !== 'undefined' && ngDevMode ? 'TRANSLOCO_SCOPE' : '', ); diff --git a/libs/transloco/src/lib/transloco.config.ts b/libs/transloco/src/lib/transloco.config.ts index b162addaf..a75ee34ed 100644 --- a/libs/transloco/src/lib/transloco.config.ts +++ b/libs/transloco/src/lib/transloco.config.ts @@ -24,7 +24,7 @@ export interface TranslocoConfig { } export const TRANSLOCO_CONFIG = new InjectionToken( - 'TRANSLOCO_CONFIG', + typeof ngDevMode !== 'undefined' && ngDevMode ? 'TRANSLOCO_CONFIG' : '', { providedIn: 'root', factory: () => defaultConfig, diff --git a/libs/transloco/src/lib/transloco.interceptor.ts b/libs/transloco/src/lib/transloco.interceptor.ts index a2ecef112..c78bceb9b 100644 --- a/libs/transloco/src/lib/transloco.interceptor.ts +++ b/libs/transloco/src/lib/transloco.interceptor.ts @@ -3,7 +3,7 @@ import { InjectionToken, Injectable } from '@angular/core'; import { Translation } from './types'; export const TRANSLOCO_INTERCEPTOR = new InjectionToken( - 'TRANSLOCO_INTERCEPTOR', + typeof ngDevMode !== 'undefined' && ngDevMode ? 'TRANSLOCO_INTERCEPTOR' : '', ); export interface TranslocoInterceptor { diff --git a/libs/transloco/src/lib/transloco.loader.ts b/libs/transloco/src/lib/transloco.loader.ts index e43ea570c..ae2eea5d0 100644 --- a/libs/transloco/src/lib/transloco.loader.ts +++ b/libs/transloco/src/lib/transloco.loader.ts @@ -23,5 +23,5 @@ export class DefaultLoader implements TranslocoLoader { } export const TRANSLOCO_LOADER = new InjectionToken( - 'TRANSLOCO_LOADER', + typeof ngDevMode !== 'undefined' && ngDevMode ? 'TRANSLOCO_LOADER' : '', ); diff --git a/libs/transloco/src/lib/transloco.transpiler.ts b/libs/transloco/src/lib/transloco.transpiler.ts index 0abab67b0..59bbbffb5 100644 --- a/libs/transloco/src/lib/transloco.transpiler.ts +++ b/libs/transloco/src/lib/transloco.transpiler.ts @@ -9,7 +9,7 @@ import { } from './transloco.config'; export const TRANSLOCO_TRANSPILER = new InjectionToken( - 'TRANSLOCO_TRANSPILER', + typeof ngDevMode !== 'undefined' && ngDevMode ? 'TRANSLOCO_TRANSPILER' : '', ); export interface TranslocoTranspiler { diff --git a/libs/transloco/src/lib/types.ts b/libs/transloco/src/lib/types.ts index 3000652b3..aad241c33 100644 --- a/libs/transloco/src/lib/types.ts +++ b/libs/transloco/src/lib/types.ts @@ -50,3 +50,11 @@ export interface LoadOptions { failedCounter?: number; inlineLoader?: InlineLoader; } + +/** @internal */ +declare global { + // Indicates whether the application is operating in development mode. + // `ngDevMode` is a global flag set by Angular CLI. + // https://github.com/angular/angular-cli/blob/9b883fe28862c96720c7899b431174e9b47ad7e4/packages/angular/build/src/tools/esbuild/application-code-bundle.ts#L604 + const ngDevMode: boolean; +}