From 694dda5951fe1fcdcf5a36be14ffcd1154c039a5 Mon Sep 17 00:00:00 2001 From: splincode Date: Sun, 29 Sep 2024 13:28:37 +0300 Subject: [PATCH] chore: improve i18n documentation --- projects/cdk/schematics/ng-update/v4/index.ts | 3 + .../ng-update/v4/steps/constants/functions.ts | 9 ++ .../ng-update/v4/steps/replace-functions.ts | 25 +++++ .../v4/tests/schematic-migrate-i18n.spec.ts | 84 ++++++++++++++ .../src/modules/customization/i18n/dynamic.md | 5 +- .../src/modules/customization/i18n/esbuild.md | 14 +-- .../src/modules/customization/i18n/index.html | 105 +++++++++--------- .../src/modules/customization/i18n/index.ts | 10 +- 8 files changed, 185 insertions(+), 70 deletions(-) create mode 100644 projects/cdk/schematics/ng-update/v4/steps/constants/functions.ts create mode 100644 projects/cdk/schematics/ng-update/v4/steps/replace-functions.ts create mode 100644 projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-i18n.spec.ts diff --git a/projects/cdk/schematics/ng-update/v4/index.ts b/projects/cdk/schematics/ng-update/v4/index.ts index 5a848a06f141f..5966222bf8796 100644 --- a/projects/cdk/schematics/ng-update/v4/index.ts +++ b/projects/cdk/schematics/ng-update/v4/index.ts @@ -41,18 +41,21 @@ import { MODULES_TO_REMOVE, SERVICES_TO_REPLACE, } from './steps/constants'; +import {REPLACE_FUNCTIONS} from './steps/constants/functions'; import {MODULES_TO_REPLACE_WITH_PROVIDERS} from './steps/constants/modules-to-replace'; import {TYPES_TO_RENAME} from './steps/constants/types'; import {dropUniversalMock} from './steps/drop-universal-mock'; import {migrateEditor} from './steps/migrate-editor'; import {migrateImportProvidersFrom} from './steps/migrate-providers-from'; import {migrateRoot} from './steps/migrate-root'; +import {replaceFunctions} from './steps/replace-functions'; import {replaceModulesWithProviders} from './steps/utils/replace-modules-with-providers'; function main(options: TuiSchema): Rule { return (tree: Tree, context: SchematicContext) => { const fileSystem = getFileSystem(tree); + replaceFunctions(REPLACE_FUNCTIONS); migrateImportProvidersFrom(options); migrateEditor(fileSystem, options); replaceEnums(options, ENUMS_TO_REPLACE); diff --git a/projects/cdk/schematics/ng-update/v4/steps/constants/functions.ts b/projects/cdk/schematics/ng-update/v4/steps/constants/functions.ts new file mode 100644 index 0000000000000..63fc876da1c83 --- /dev/null +++ b/projects/cdk/schematics/ng-update/v4/steps/constants/functions.ts @@ -0,0 +1,9 @@ +import type {ReplacementType} from '../../../interfaces/replacement-type'; + +export const REPLACE_FUNCTIONS: readonly ReplacementType[] = [ + { + from: 'tuiDocLanguageSwitcher', + to: 'tuiLanguageSwitcher', + moduleSpecifier: ['@taiga-ui/i18n'], + }, +]; diff --git a/projects/cdk/schematics/ng-update/v4/steps/replace-functions.ts b/projects/cdk/schematics/ng-update/v4/steps/replace-functions.ts new file mode 100644 index 0000000000000..12a4aa9e15d6f --- /dev/null +++ b/projects/cdk/schematics/ng-update/v4/steps/replace-functions.ts @@ -0,0 +1,25 @@ +import {Node} from 'ng-morph'; + +import {getNamedImportReferences} from '../../../utils/get-named-import-references'; +import type {ReplacementType} from '../../interfaces/replacement-type'; + +export function replaceFunctions(functions: readonly ReplacementType[]): void { + functions.forEach(({from, to, moduleSpecifier}) => { + getNamedImportReferences(from, moduleSpecifier).forEach((ref) => { + if (ref.wasForgotten()) { + return; + } + + const parent = ref.getParent(); + + if (Node.isImportSpecifier(parent) || Node.isCallExpression(parent)) { + parent?.replaceWithText( + parent + ?.getText({includeJsDocComments: false}) + .trim() + .replace(from, to ?? from), + ); + } + }); + }); +} diff --git a/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-i18n.spec.ts b/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-i18n.spec.ts new file mode 100644 index 0000000000000..410a6cd360661 --- /dev/null +++ b/projects/cdk/schematics/ng-update/v4/tests/schematic-migrate-i18n.spec.ts @@ -0,0 +1,84 @@ +import {join} from 'node:path'; + +import {HostTree} from '@angular-devkit/schematics'; +import {SchematicTestRunner, UnitTestTree} from '@angular-devkit/schematics/testing'; +import type {TuiSchema} from '@taiga-ui/cdk/schematics/ng-add/schema'; +import { + createProject, + createSourceFile, + resetActiveProject, + saveActiveProject, + setActiveProject, +} from 'ng-morph'; + +import {createAngularJson} from '../../../utils/create-angular-json'; + +const collectionPath = join(__dirname, '../../../migration.json'); + +const COMPONENT_BEFORE = ` +import {tuiDocLanguageSwitcher} from '@taiga-ui/i18n'; + +@Component({ + standalone: true, + templateUrl: './test.template.html', + providers: [ + tuiDocLanguageSwitcher(async (language): Promise => {}) + ] +}) +export class Test { +}`; + +const COMPONENT_AFTER = ` +import {tuiLanguageSwitcher} from '@taiga-ui/i18n'; + +@Component({ + standalone: true, + templateUrl: './test.template.html', + providers: [ + tuiLanguageSwitcher(async (language): Promise => {}) + ] +}) +export class Test { +}`; + +describe('ng-update', () => { + let host: UnitTestTree; + let runner: SchematicTestRunner; + + beforeEach(() => { + host = new UnitTestTree(new HostTree()); + runner = new SchematicTestRunner('schematics', collectionPath); + + setActiveProject(createProject(host)); + + createMainFiles(); + + saveActiveProject(); + }); + + it('should migrate i18n references in ts files', async () => { + const tree = await runner.runSchematic( + 'updateToV4', + {'skip-logs': process.env['TUI_CI'] === 'true'} as Partial, + host, + ); + + expect(tree.readContent('test/app/test.component.ts')).toEqual(COMPONENT_AFTER); + }); + + afterEach(() => { + resetActiveProject(); + }); +}); + +function createMainFiles(): void { + createSourceFile('test/app/test.component.ts', COMPONENT_BEFORE); + + createSourceFile('test/app/test.template.html', ''); + + createAngularJson(); + createSourceFile( + 'package.json', + '{"dependencies": {"@angular/core": "~13.0.0", "@taiga-ui/i18n": "~3.42.0"}}', + ); +} diff --git a/projects/demo/src/modules/customization/i18n/dynamic.md b/projects/demo/src/modules/customization/i18n/dynamic.md index 4e041a43d28b7..483c57aae1f96 100644 --- a/projects/demo/src/modules/customization/i18n/dynamic.md +++ b/projects/demo/src/modules/customization/i18n/dynamic.md @@ -1,11 +1,10 @@ ```ts -import {TuiLanguageName} from '@taiga-ui/i18n/types'; -import {tuiDocLanguageSwitcher} from '@taiga-ui/i18n/switch'; +import {tuiLanguageSwitcher, TuiLanguageName} from '@taiga-ui/i18'; bootstrapApplication(App, { providers: [ // ... - tuiDocLanguageSwitcher( + tuiLanguageSwitcher( /** * @note: * then the i18n language files will be loaded from node_modules diff --git a/projects/demo/src/modules/customization/i18n/esbuild.md b/projects/demo/src/modules/customization/i18n/esbuild.md index 44342d66b3ea3..bd7a33bc191b2 100644 --- a/projects/demo/src/modules/customization/i18n/esbuild.md +++ b/projects/demo/src/modules/customization/i18n/esbuild.md @@ -1,15 +1,10 @@ ```ts -import {TuiLanguageName} from '@taiga-ui/i18n/types'; -import {tuiDocLanguageSwitcher} from '@taiga-ui/i18n/utils'; +import {tuiLanguageSwitcher, TuiLanguageName} from '@taiga-ui/i18n'; -@Component({ - standalone: true, - imports: [ - // ... - ], +bootstrapApplication(App, { providers: [ // ... - tuiDocLanguageSwitcher(async (language: TuiLanguageName): Promise => { + tuiLanguageSwitcher(async (language: TuiLanguageName): Promise => { switch (language) { case 'belarusian': return import('@taiga-ui/i18n/languages/belarusian'); @@ -46,6 +41,5 @@ import {tuiDocLanguageSwitcher} from '@taiga-ui/i18n/utils'; } }), ], -}) -export class Example {} +}).catch((err: unknown) => console.error(err)); ``` diff --git a/projects/demo/src/modules/customization/i18n/index.html b/projects/demo/src/modules/customization/i18n/index.html index 7d991b60231bd..d083bb47fee7f 100644 --- a/projects/demo/src/modules/customization/i18n/index.html +++ b/projects/demo/src/modules/customization/i18n/index.html @@ -1,59 +1,59 @@ - - -

- You have English by default. If you want to change it, you need to provide - TUI_LANGUAGE - token in your configuration. Full list of supported language - - here - - . -

+ +

+ Some components in Taiga UI embedded texts and they use English translate by default. If you want to change it, + you need to provide + TUI_LANGUAGE + token in your configuration. Full list of supported language + + here. + +

- - + - - - - - Language - + + -

CLI's esbuild-based build system

-

- Dynamic import expressions that do not contain static values will be kept in their original form and not - processed at build time. This is a limitation of the underlying bundler but is - - planned - - to be implemented in the future. In many cases, application code can be made to work by changing the import - expressions into static strings with some form of conditional statement such as an if or switch for the - known potential files. -

+ + - - + + + CLI's webpack-based build system + + + + + + CLI's esbuild-based build system + + + + + - +

1. Go to CLI's esbuild-based build system

3. Translate entities in files. If you need some clarification, take a look at interfaces of entities

- + diff --git a/projects/demo/src/modules/customization/i18n/index.ts b/projects/demo/src/modules/customization/i18n/index.ts index cf86eeda9bb13..9f7b1b90d5363 100644 --- a/projects/demo/src/modules/customization/i18n/index.ts +++ b/projects/demo/src/modules/customization/i18n/index.ts @@ -3,10 +3,12 @@ import {changeDetection} from '@demo/emulate/change-detection'; import {TuiDemo} from '@demo/utils'; import {TuiDocLanguageSwitcher} from '@taiga-ui/addon-doc'; import {TuiLink} from '@taiga-ui/core'; +import {TuiTablePagination} from '@taiga-ui/addon-table'; +import {TuiAccordion} from '@taiga-ui/kit'; @Component({ standalone: true, - imports: [TuiDemo, TuiDocLanguageSwitcher, TuiLink], + imports: [TuiDemo, TuiDocLanguageSwitcher, TuiLink, TuiTablePagination, TuiAccordion], templateUrl: './index.html', changeDetection, }) @@ -19,13 +21,13 @@ export default class Page { }; protected example1 = { - 'language-switcher.component.html': import( + 'language-switcher.html': import( '../../../../../addon-doc/components/language-switcher/index.html?raw' ), - 'language-switcher.component.ts': import( + 'language-switcher.ts': import( '../../../../../addon-doc/components/language-switcher/index.ts?raw' ), - 'language-switcher.module.less': import( + 'language-switcher.less': import( '../../../../../addon-doc/components/language-switcher/index.less?raw' ), };