refactor(addon-doc): drop AsyncPipe (#9102)

projects/addon-doc/components/code/index.html

@@ -5,7 +5,7 @@
     {{ filename }}
 </p>
 <pre
-    *ngFor="let content of processor$ | async"
+    *ngFor="let content of processor()"
     class="t-code"
 >
     <code [lineNumbers]="true" [highlight]="content"></code>

projects/addon-doc/components/code/index.ts

@@ -1,5 +1,5 @@
 import {ClipboardModule} from '@angular/cdk/clipboard';
-import {AsyncPipe, isPlatformServer, NgForOf, NgIf} from '@angular/common';
+import {isPlatformServer, NgForOf, NgIf} from '@angular/common';
 import {
     ChangeDetectionStrategy,
     Component,
@@ -22,7 +22,7 @@ import {BehaviorSubject, map, startWith, Subject, switchMap, timer} from 'rxjs';
 @Component({
     standalone: true,
     selector: 'tui-doc-code',
-    imports: [AsyncPipe, ClipboardModule, Highlight, NgForOf, NgIf, TuiButton],
+    imports: [ClipboardModule, Highlight, NgForOf, NgIf, TuiButton],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -37,9 +37,8 @@ export class TuiDocCode {
 
     protected readonly isServer = isPlatformServer(inject(PLATFORM_ID));
 
-    protected readonly markdownCodeProcessor = inject<TuiHandler<string, string[]>>(
-        TUI_DOC_EXAMPLE_MARKDOWN_CODE_PROCESSOR,
-    );
+    protected readonly markdownCodeProcessor: TuiHandler<string, readonly string[]> =
+        inject(TUI_DOC_EXAMPLE_MARKDOWN_CODE_PROCESSOR);
 
     protected readonly copy$ = new Subject<void>();
 
@@ -55,9 +54,12 @@ export class TuiDocCode {
         {initialValue: this.icons.copy},
     );
 
-    protected readonly processor$ = this.rawLoader$$.pipe(
-        switchMap(tuiRawLoad),
-        map((value: string): string[] => this.markdownCodeProcessor(value)),
+    protected readonly processor = toSignal(
+        this.rawLoader$$.pipe(
+            switchMap(tuiRawLoad),
+            map((value: string) => this.markdownCodeProcessor(value)),
+        ),
+        {initialValue: []},
     );
 
     @Input()

projects/addon-doc/components/copy/index.html

@@ -1,24 +1,20 @@
 <button
-    *ngIf="texts$ | async as texts"
     appearance=""
     size="s"
     tuiButton
     type="button"
     class="t-copy"
     (click)="onClick()"
 >
-    <span
-        *tuiLet="copied$ | async as copied"
-        class="t-content"
-    >
+    <span class="t-content">
         <span
             class="t-initial"
-            [attr.data-text]="copied ? '' : texts[0]"
+            [attr.data-text]="copied() ? '' : texts()[0]"
         >
-            <ng-container *ngIf="!copied">
+            <ng-container *ngIf="!copied()">
                 <ng-content />
             </ng-container>
         </span>
-        {{ copied ? texts[1] : '' }}
+        {{ copied() ? texts()[1] : '' }}
     </span>
 </button>

projects/addon-doc/components/copy/index.ts

@@ -1,36 +1,36 @@
-import {AsyncPipe, NgIf} from '@angular/common';
+import {NgIf} from '@angular/common';
 import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
+import {toSignal} from '@angular/core/rxjs-interop';
 import {TUI_FALSE_HANDLER} from '@taiga-ui/cdk/constants';
-import {TuiLet} from '@taiga-ui/cdk/directives/let';
-import {tuiPure} from '@taiga-ui/cdk/utils/miscellaneous';
 import {TuiButton} from '@taiga-ui/core/components/button';
 import {TUI_COPY_TEXTS} from '@taiga-ui/kit/tokens';
-import type {Observable} from 'rxjs';
 import {map, startWith, Subject, switchMap, timer} from 'rxjs';
 
 const COPIED_TIMEOUT = 1500;
 
 @Component({
     standalone: true,
     selector: 'tui-doc-copy',
-    imports: [AsyncPipe, NgIf, TuiButton, TuiLet],
+    imports: [NgIf, TuiButton],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TuiDocCopy {
     private readonly copy$ = new Subject<void>();
 
-    protected readonly texts$ = inject(TUI_COPY_TEXTS);
+    protected readonly texts = toSignal(inject(TUI_COPY_TEXTS), {
+        initialValue: ['', ''] as const,
+    });
 
-    @tuiPure
-    protected get copied$(): Observable<boolean> {
-        return this.copy$.pipe(
+    protected readonly copied = toSignal(
+        this.copy$.pipe(
             switchMap(() =>
                 timer(COPIED_TIMEOUT).pipe(map(TUI_FALSE_HANDLER), startWith(true)),
             ),
-        );
-    }
+        ),
+        {initialValue: true},
+    );
 
     protected onClick(): void {
         this.copy$.next();

projects/addon-doc/components/documentation/documentation-property-connector.directive.ts

@@ -1,13 +1,13 @@
 import {Location} from '@angular/common';
-import type {OnChanges, OnInit} from '@angular/core';
+import {type OnChanges, type OnInit, signal} from '@angular/core';
 import {Directive, EventEmitter, inject, Input, Output, TemplateRef} from '@angular/core';
 import type {Params} from '@angular/router';
 import {ActivatedRoute, UrlSerializer} from '@angular/router';
 import {TUI_DOC_URL_STATE_HANDLER} from '@taiga-ui/addon-doc/tokens';
 import {tuiCoerceValue, tuiInspectAny} from '@taiga-ui/addon-doc/utils';
 import {tuiIsNumber} from '@taiga-ui/cdk/utils/miscellaneous';
 import {TuiAlertService} from '@taiga-ui/core/components/alert';
-import {BehaviorSubject, Subject} from 'rxjs';
+import {Subject} from 'rxjs';
 
 const SERIALIZED_SUFFIX = '$';
 
@@ -49,7 +49,7 @@ export class TuiDocDocumentationPropertyConnector<T> implements OnInit, OnChange
 
     public readonly changed$ = new Subject<void>();
 
-    public readonly emits$ = new BehaviorSubject(1);
+    public readonly emits = signal(1);
 
     public readonly template = inject(TemplateRef);
 
@@ -92,7 +92,7 @@ export class TuiDocDocumentationPropertyConnector<T> implements OnInit, OnChange
         // For more convenient debugging
         console.info(this.attrName, event);
 
-        this.emits$.next(this.emits$.value + 1);
+        this.emits.update((x) => ++x);
 
         let content: string | undefined;
 

projects/addon-doc/components/documentation/documentation.component.ts

@@ -1,12 +1,5 @@
 import {animate, style, transition, trigger} from '@angular/animations';
-import {
-    AsyncPipe,
-    NgForOf,
-    NgIf,
-    NgSwitch,
-    NgSwitchCase,
-    NgTemplateOutlet,
-} from '@angular/common';
+import {NgForOf, NgIf, NgSwitch, NgSwitchCase, NgTemplateOutlet} from '@angular/common';
 import type {AfterContentInit, QueryList} from '@angular/core';
 import {
     ChangeDetectionStrategy,
@@ -57,7 +50,6 @@ import {TuiDocTypeReferencePipe} from './pipes/type-reference.pipe';
     standalone: true,
     selector: 'tui-doc-documentation',
     imports: [
-        AsyncPipe,
         FormsModule,
         NgForOf,
         NgIf,

projects/addon-doc/components/documentation/documentation.template.html

@@ -150,7 +150,7 @@
                 <ng-template #elseEmitter>
                     <tui-notification
                         class="t-output"
-                        [@emitEvent]="propertyConnector.emits$ | async"
+                        [@emitEvent]="propertyConnector.emits()"
                     >
                         Emit!
                     </tui-notification>

projects/addon-doc/components/example/example.component.ts

@@ -1,6 +1,7 @@
 import {Clipboard} from '@angular/cdk/clipboard';
-import {AsyncPipe, NgForOf, NgIf, NgTemplateOutlet} from '@angular/common';
-import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core';
+import {NgForOf, NgIf, NgTemplateOutlet} from '@angular/common';
+import {ChangeDetectionStrategy, Component, inject, Input, signal} from '@angular/core';
+import {toSignal} from '@angular/core/rxjs-interop';
 import {RouterLink, RouterLinkActive} from '@angular/router';
 import {WA_LOCATION} from '@ng-web-apis/common';
 import {
@@ -27,8 +28,7 @@ import {
     PolymorpheusOutlet,
     PolymorpheusTemplate,
 } from '@taiga-ui/polymorpheus';
-import type {Observable} from 'rxjs';
-import {BehaviorSubject, map, ReplaySubject, Subject, switchAll, switchMap} from 'rxjs';
+import {BehaviorSubject, map, ReplaySubject, switchAll, switchMap} from 'rxjs';
 
 import {TuiDocCode} from '../code';
 import {TUI_DOC_EXAMPLE_OPTIONS} from './example.options';
@@ -38,7 +38,6 @@ import {TuiDocExampleGetTabsPipe} from './example-get-tabs.pipe';
     standalone: true,
     selector: 'tui-doc-example',
     imports: [
-        AsyncPipe,
         NgForOf,
         NgIf,
         NgTemplateOutlet,
@@ -90,18 +89,26 @@ export class TuiDocExample {
     protected readonly defaultTabIndex = 0;
     protected readonly defaultTab = this.texts[this.defaultTabIndex];
     protected activeItemIndex = this.defaultTabIndex;
-    protected readonly copy$ = this.copyTexts$.pipe(map(([copy]) => copy));
-    protected readonly loading$ = new Subject<boolean>();
 
-    protected readonly processor$: Observable<Record<string, string>> =
+    protected readonly copy = toSignal(this.copyTexts$.pipe(map(([copy]) => copy)), {
+        initialValue: '',
+    });
+
+    protected readonly loading = signal(false);
+
+    protected readonly processor = toSignal(
         this.rawLoader$$.pipe(
             switchMap(tuiRawLoadRecord),
             map((value) => this.processContent(value)),
-        );
+        ),
+        {initialValue: {} as unknown as Record<string, string>},
+    );
 
-    protected readonly lazyComponent$ = this.lazyLoader$$.pipe(
-        switchAll(),
-        map((module) => new PolymorpheusComponent(module.default)),
+    protected readonly lazyComponent = toSignal(
+        this.lazyLoader$$.pipe(
+            switchAll(),
+            map((module) => new PolymorpheusComponent(module.default)),
+        ),
     );
 
     @Input()
@@ -144,9 +151,9 @@ export class TuiDocExample {
     }
 
     protected edit(files: Record<string, string>): void {
-        this.loading$.next(true);
+        this.loading.set(true);
         this.codeEditor
             ?.edit(this.componentName, this.id || '', files)
-            .finally(() => this.loading$.next(false));
+            .finally(() => this.loading.set(false));
     }
 }

projects/addon-doc/components/example/example.template.html

@@ -15,7 +15,7 @@
         tuiLink
         type="button"
         class="t-link"
-        [attr.title]="copy$ | async"
+        [attr.title]="copy()"
         [fragment]="id"
         [routerLinkActiveOptions]="{matrixParams: 'exact', queryParams: 'exact', paths: 'exact', fragment: 'exact'}"
         (click)="copyExampleLink($event.currentTarget)"
@@ -32,11 +32,8 @@
     </ng-container>
 </h3>
 
-<div
-    *ngIf="processor$ | async as files"
-    class="t-example"
->
-    <ng-container *ngIf="files | tuiDocExampleGetTabs: defaultTab as tabs">
+<div class="t-example">
+    <ng-container *ngIf="processor() | tuiDocExampleGetTabs: defaultTab as tabs">
         <div
             *ngIf="tabs.length > 1"
             class="t-tabs-wrapper"
@@ -59,12 +56,12 @@
             </tui-tabs-with-more>
 
             <tui-loader
-                *ngIf="files | tuiMapper: visible"
+                *ngIf="processor() | tuiMapper: visible"
                 size="xs"
                 class="t-code-editor"
                 [overlay]="true"
-                [showLoader]="!!(loading$ | async)"
-                (click)="edit(files)"
+                [showLoader]="loading()"
+                (click)="edit(processor())"
             >
                 <ng-container *ngIf="codeEditor?.content as content; else defaultEditContent">
                     <ng-container *polymorpheusOutlet="content as editContent">
@@ -96,13 +93,13 @@
                 [style.display]="activeItemIndex === index && index === defaultTabIndex ? 'block' : 'none'"
             >
                 <ng-content />
-                <ng-container *polymorpheusOutlet="lazyComponent$ | async as text">
+                <ng-container *polymorpheusOutlet="lazyComponent() as text">
                     {{ text }}
                 </ng-container>
             </div>
 
             <tui-doc-code
-                *tuiLet="files?.[tabs?.[index] || 0] || '' as code"
+                *tuiLet="processor()[tabs[index] || 0] || '' as code"
                 [code]="code"
                 [style.display]="activeItemIndex === index && index !== defaultTabIndex ? 'block' : 'none'"
             >

projects/addon-doc/components/internal/header/index.html

@@ -9,7 +9,7 @@
     (tuiActiveZoneChange)="onActiveZone($event)"
 >
     <tui-doc-navigation
-        *tuiSidebar="!!(open$ | async)"
+        *tuiSidebar="open()"
         class="t-navigation"
     />
 </button>

projects/addon-doc/components/internal/header/index.ts

@@ -1,5 +1,5 @@
-import {AsyncPipe} from '@angular/common';
 import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
+import {toSignal} from '@angular/core/rxjs-interop';
 import {Router} from '@angular/router';
 import {TUI_DOC_ICONS, TUI_DOC_LOGO, TUI_DOC_MENU_TEXT} from '@taiga-ui/addon-doc/tokens';
 import {TuiSidebar} from '@taiga-ui/addon-mobile/directives/sidebar';
@@ -15,7 +15,6 @@ import {TuiDocNavigation} from '../../navigation/navigation.component';
     standalone: true,
     selector: 'header[tuiDocHeader]',
     imports: [
-        AsyncPipe,
         PolymorpheusOutlet,
         PolymorpheusTemplate,
         TuiActiveZone,
@@ -33,10 +32,14 @@ export class TuiDocHeader {
     protected readonly icons = inject(TUI_DOC_ICONS);
     protected readonly logo = inject(TUI_DOC_LOGO);
     protected readonly menu = inject(TUI_DOC_MENU_TEXT);
-    protected readonly open$ = merge(
-        this.router.events.pipe(map(TUI_FALSE_HANDLER)),
-        this.stream$,
-    ).pipe(startWith(false), distinctUntilChanged());
+
+    protected readonly open = toSignal(
+        merge(this.router.events.pipe(map(TUI_FALSE_HANDLER)), this.stream$).pipe(
+            startWith(false),
+            distinctUntilChanged(),
+        ),
+        {initialValue: false},
+    );
 
     protected onClick(): void {
         this.stream$.next(true);