diff --git a/projects/addon-doc/components/example/example.component.ts b/projects/addon-doc/components/example/example.component.ts index 3fcf9fd98fa95..3f5ceae36c806 100644 --- a/projects/addon-doc/components/example/example.component.ts +++ b/projects/addon-doc/components/example/example.component.ts @@ -1,5 +1,4 @@ import {Clipboard} from '@angular/cdk/clipboard'; -import type {Type} from '@angular/core'; import { ChangeDetectionStrategy, Component, @@ -7,7 +6,6 @@ import { inject, Input, } from '@angular/core'; -import type {DefaultExport} from '@angular/router'; import {LOCATION} from '@ng-web-apis/common'; import type {TuiDocExample} from '@taiga-ui/addon-doc/interfaces'; import { @@ -24,7 +22,7 @@ import {TUI_COPY_TEXTS} from '@taiga-ui/kit'; import type {PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; import {PolymorpheusComponent} from '@tinkoff/ng-polymorpheus'; import type {Observable} from 'rxjs'; -import {BehaviorSubject, map, ReplaySubject, Subject, switchMap} from 'rxjs'; +import {BehaviorSubject, map, ReplaySubject, Subject, switchAll, switchMap} from 'rxjs'; import {TUI_DOC_EXAMPLE_OPTIONS} from './example.options'; @@ -85,12 +83,8 @@ export class TuiDocExampleComponent { ); protected readonly lazyComponent$ = this.lazyLoader$$.pipe( - switchMap(async lazyImport => - lazyImport.then( - (module: DefaultExport>) => - new PolymorpheusComponent(module.default), - ), - ), + switchAll(), + map(module => new PolymorpheusComponent(module.default)), ); protected readonly loading$ = new Subject(); @@ -121,11 +115,8 @@ export class TuiDocExampleComponent { protected edit(files: Record): void { this.loading$.next(true); - this.codeEditor + void this.codeEditor ?.edit(this.componentName, this.id || '', files) - // TODO: replace lines below with `finally` when we bump Firefox to 58+ - // TODO: Add `es2018.promise` to `tsconfig.json` => `compilerOptions.lib`. - .then(() => this.loading$.next(false)) - .catch(() => this.loading$.next(false)); + .finally(() => this.loading$.next(false)); } } diff --git a/projects/demo/src/modules/components/avatar/index.html b/projects/demo/src/modules/components/avatar/index.html index 9d96f109a52cf..2f330d08e00d9 100644 --- a/projects/demo/src/modules/components/avatar/index.html +++ b/projects/demo/src/modules/components/avatar/index.html @@ -7,7 +7,7 @@ @@ -19,7 +19,7 @@ @@ -31,14 +31,14 @@ @@ -50,14 +50,14 @@ diff --git a/projects/demo/src/modules/components/avatar/index.ts b/projects/demo/src/modules/components/avatar/index.ts index 8f8957138d5bb..cfd3e4003ab9a 100644 --- a/projects/demo/src/modules/components/avatar/index.ts +++ b/projects/demo/src/modules/components/avatar/index.ts @@ -3,7 +3,7 @@ import {Component, inject} from '@angular/core'; import type {SafeResourceUrl} from '@angular/platform-browser'; import {DomSanitizer} from '@angular/platform-browser'; import {changeDetection} from '@demo/emulate/change-detection'; -import {TuiExamplePipe} from '@demo/utils'; +import {TuiComponentPipe, TuiExamplePipe} from '@demo/utils'; import {TuiAddonDocModule} from '@taiga-ui/addon-doc'; import type {TuiSizeXS, TuiSizeXXL} from '@taiga-ui/core'; import {TuiNotificationModule} from '@taiga-ui/core'; @@ -19,6 +19,7 @@ import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus'; TuiExamplePipe, PolymorpheusModule, AsyncPipe, + TuiComponentPipe, ], templateUrl: './index.html', changeDetection, @@ -27,12 +28,6 @@ export default class ExampleComponent { private readonly sanitizer = inject(DomSanitizer); protected readonly exampleModule = import('./examples/import/module.md?raw'); protected readonly exampleHtml = import('./examples/import/template.md?raw'); - protected readonly example1 = import('./examples/1'); - protected readonly example2 = import('./examples/2'); - protected readonly example3 = import('./examples/3'); - protected readonly example4 = import('./examples/4'); - protected readonly example5 = import('./examples/5'); - protected readonly example6 = import('./examples/6'); protected readonly sizes: ReadonlyArray = [ 'xs', diff --git a/projects/demo/src/utils/component.pipe.ts b/projects/demo/src/utils/component.pipe.ts new file mode 100644 index 0000000000000..ed4cb362e9747 --- /dev/null +++ b/projects/demo/src/utils/component.pipe.ts @@ -0,0 +1,16 @@ +import type {PipeTransform} from '@angular/core'; +import {inject, Pipe} from '@angular/core'; +import {TuiDocPageComponent} from '@taiga-ui/addon-doc'; + +import {toKebab} from './example.pipe'; + +@Pipe({name: 'tuiComponent', standalone: true}) +export class TuiComponentPipe implements PipeTransform { + protected docPage = inject(TuiDocPageComponent); + + public async transform(index: number): Promise<{readonly default: any}> { + return import( + `../modules/${this.docPage.type}/${toKebab(this.docPage.header)}/examples/${index}/index.ts` + ); + } +} diff --git a/projects/demo/src/utils/example.pipe.ts b/projects/demo/src/utils/example.pipe.ts index a33c60eb2bf6f..1fac7f8030a32 100644 --- a/projects/demo/src/utils/example.pipe.ts +++ b/projects/demo/src/utils/example.pipe.ts @@ -3,7 +3,7 @@ import {inject, Pipe} from '@angular/core'; import type {TuiDocExample} from '@taiga-ui/addon-doc'; import {TuiDocPageComponent} from '@taiga-ui/addon-doc'; -const toKebab: (str: string) => string = str => +export const toKebab: (str: string) => string = str => str.replaceAll( /[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase(), diff --git a/projects/demo/src/utils/index.ts b/projects/demo/src/utils/index.ts index cc51f676f12a4..263608d68afb3 100644 --- a/projects/demo/src/utils/index.ts +++ b/projects/demo/src/utils/index.ts @@ -1,3 +1,4 @@ +export * from './component.pipe'; export * from './example.pipe'; export * from './load-assets'; export * from './setup.component';