chore(demo): use standalone components (#324)

apps/demo/src/app/app.routes.ts

@@ -5,105 +5,84 @@ import {DemoPath} from '@demo/constants';
 export const appRoutes: Routes = [
     {
         path: DemoPath.HomePage,
-        loadChildren: async () =>
-            (await import(`./pages/home/home-page.module`)).HomePageModule,
+        loadComponent: async () => import(`./pages/home/home-page.component`),
     },
     {
         path: DemoPath.CommonPage,
-        loadChildren: async () =>
-            (await import(`./pages/common/common-page.module`)).CommonPageModule,
+        loadComponent: async () => import(`./pages/common/common-page.component`),
     },
     {
         path: DemoPath.UniversalPage,
-        loadChildren: async () =>
-            (await import(`./pages/universal/universal-page.module`)).UniversalPageModule,
+        loadComponent: async () => import(`./pages/universal/universal-page.component`),
     },
     {
         path: DemoPath.AudioPage,
-        loadChildren: async () =>
-            (await import(`./pages/audio/audio-page.module`)).AudioPageModule,
+        loadComponent: async () => import(`./pages/audio/audio-page.component`),
     },
     {
         path: DemoPath.CanvasPage,
-        loadChildren: async () =>
-            (await import(`./pages/canvas/canvas-page.module`)).CanvasPageModule,
+        loadComponent: async () => import(`./pages/canvas/canvas-page.component`),
     },
     {
         path: DemoPath.ResizeObserverPage,
-        loadChildren: async () =>
-            (await import(`./pages/resize-observer/resize-observer-page.module`))
-                .ResizeObserverPageModule,
+        loadComponent: async () =>
+            import(`./pages/resize-observer/resize-observer-page.component`),
     },
     {
         path: DemoPath.GeolocationPage,
-        loadChildren: async () =>
-            (await import(`./pages/geolocation/geolocation-page.module`))
-                .GeolocationPageModule,
+        loadComponent: async () =>
+            import(`./pages/geolocation/geolocation-page.component`),
     },
     {
         path: DemoPath.ScreenOrientation,
-        loadChildren: async () =>
-            (await import(`./pages/screen-orientation/screen-orientation-page.module`))
-                .ScreenOrientationPageModule,
+        loadComponent: async () =>
+            import(`./pages/screen-orientation/screen-orientation-page.component`),
     },
     {
         path: DemoPath.IntersectionObserverPage,
-        loadChildren: async () =>
-            (
-                await import(
-                    `./pages/intersection-observer/intersection-observer-page.module`
-                )
-            ).IntersectionObserverPageModule,
+        loadComponent: async () =>
+            import(`./pages/intersection-observer/intersection-observer-page.component`),
     },
     {
         path: DemoPath.MutationObserverPage,
-        loadChildren: async () =>
-            (await import(`./pages/mutation-observer/mutation-observer-page.module`))
-                .MutationObserverPageModule,
+        loadComponent: async () =>
+            import(`./pages/mutation-observer/mutation-observer-page.component`),
     },
     {
         path: DemoPath.PaymentRequestPage,
-        loadChildren: async () =>
-            (await import(`./pages/payment-request/payment-request-page.module`))
-                .PaymentRequestPageModule,
+        loadComponent: async () =>
+            import(`./pages/payment-request/payment-request-page.component`),
     },
     {
         path: DemoPath.PermissionsPage,
-        loadChildren: async () =>
-            (await import(`./pages/permissions/permissions-page.module`))
-                .PermissionsPageModule,
+        loadComponent: async () =>
+            import(`./pages/permissions/permissions-page.component`),
     },
     {
         path: DemoPath.MidiPage,
-        loadChildren: async () =>
-            (await import(`./pages/midi/midi-page.module`)).MidiPageModule,
+        loadComponent: async () => import(`./pages/midi/midi-page.component`),
     },
     {
         path: DemoPath.SpeechPage,
-        loadChildren: async () =>
-            (await import(`./pages/speech/speech-page.module`)).SpeechPageModule,
+        loadComponent: async () => import(`./pages/speech/speech-page.component`),
     },
     {
         path: DemoPath.StoragePage,
-        loadChildren: async () =>
-            (await import(`./pages/storage/storage-page.module`)).StoragePageModule,
+        loadComponent: async () => import(`./pages/storage/storage-page.component`),
     },
     {
         path: DemoPath.WorkersPage,
-        loadChildren: async () =>
-            (await import(`./pages/workers/workers-page.module`)).WorkersPageModule,
+        loadComponent: async () => import(`./pages/workers/workers-page.component`),
     },
     {
         path: DemoPath.ViewTransitionPage,
-        loadChildren: async () =>
-            (await import(`./pages/view-transition/view-transition-page.module`))
-                .ViewTransitionPageModule,
+        loadComponent: async () =>
+            import(`./pages/view-transition/view-transition-page.component`),
     },
     {
         path: DemoPath.Notification,
-        loadChildren: async () =>
-            (await import(`./pages/notification/notification-page.module`))
-                .NotificationPageModule,
+        loadComponent: async () =>
+            import(`./pages/notification/notification-page.component`),
     },
     {
         path: ``,

apps/demo/src/app/pages/audio/audio-page.component.ts

@@ -1,13 +1,41 @@
+import {CommonModule} from '@angular/common';
 import {ChangeDetectionStrategy, Component, Inject, ViewChild} from '@angular/core';
-import {AUDIO_CONTEXT} from '@ng-web-apis/audio';
+import {FormsModule} from '@angular/forms';
+import {AUDIO_CONTEXT, WebAudioModule} from '@ng-web-apis/audio';
+import {CanvasModule} from '@ng-web-apis/canvas';
+import {
+    TuiButtonModule,
+    TuiLabelModule,
+    TuiTextfieldControllerModule,
+} from '@taiga-ui/core';
+import {
+    TuiDataListWrapperModule,
+    TuiRadioLabeledModule,
+    TuiSelectModule,
+    TuiSliderModule,
+} from '@taiga-ui/kit';
 
 @Component({
+    standalone: true,
     selector: 'audio-page',
+    imports: [
+        CommonModule,
+        FormsModule,
+        WebAudioModule,
+        CanvasModule,
+        TuiButtonModule,
+        TuiSliderModule,
+        TuiLabelModule,
+        TuiSelectModule,
+        TuiRadioLabeledModule,
+        TuiTextfieldControllerModule,
+        TuiDataListWrapperModule,
+    ],
     templateUrl: './audio-page.component.html',
     styleUrls: ['./audio-page.component.css'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AudioPageComponent {
+export default class AudioPageComponent {
     @ViewChild('chain')
     readonly chain?: AudioNode;
 

apps/demo/src/app/pages/canvas/canvas-page.component.ts

@@ -1,12 +1,43 @@
+import {CommonModule} from '@angular/common';
 import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {CanvasModule} from '@ng-web-apis/canvas';
+import {TuiInputColorModule} from '@taiga-ui/addon-editor';
+import {
+    TuiExpandModule,
+    TuiLabelModule,
+    TuiTextfieldControllerModule,
+} from '@taiga-ui/core';
+import {
+    TuiDataListWrapperModule,
+    TuiInputFilesModule,
+    TuiInputModule,
+    TuiSelectModule,
+    TuiSliderModule,
+} from '@taiga-ui/kit';
 
 @Component({
+    standalone: true,
     selector: 'audio-page',
+    imports: [
+        CommonModule,
+        FormsModule,
+        CanvasModule,
+        TuiInputFilesModule,
+        TuiLabelModule,
+        TuiSliderModule,
+        TuiExpandModule,
+        TuiSelectModule,
+        TuiInputModule,
+        TuiInputColorModule,
+        TuiDataListWrapperModule,
+        TuiTextfieldControllerModule,
+    ],
     templateUrl: './canvas-page.component.html',
     styleUrls: ['./canvas-page.component.css'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CanvasPageComponent {
+export default class CanvasPageComponent {
     x1 = 20;
     y1 = 20;
     w1 = 100;

apps/demo/src/app/pages/common/common-page.component.ts

@@ -1,11 +1,16 @@
+import {CommonModule} from '@angular/common';
 import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {RouterLink} from '@angular/router';
+import {MarkdownModule} from 'ngx-markdown';
 
 @Component({
+    standalone: true,
     selector: 'common-page',
+    imports: [RouterLink, CommonModule, MarkdownModule],
     templateUrl: './common-page.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CommonPageComponent {
+export default class CommonPageComponent {
     readonly readme = import('../../../../../../libs/common/README.md?raw').then(a =>
         a.default.replace('![logo](logo.svg) ', ''),
     ) as any as Promise<string>;

apps/demo/src/app/pages/geolocation/geolocation-page.component.ts

@@ -1,17 +1,22 @@
+import {CommonModule} from '@angular/common';
 import {ChangeDetectionStrategy, Component, Inject} from '@angular/core';
 import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
 import {GeolocationService} from '@ng-web-apis/geolocation';
+import {TuiButtonModule, TuiLoaderModule} from '@taiga-ui/core';
+import {HighlightModule} from 'ngx-highlightjs';
 
 import {SAMPLE} from './samples/sample';
 import {SAMPLE_ASYNC} from './samples/sample-async';
 
 @Component({
+    standalone: true,
     selector: 'geolocation-page',
+    imports: [CommonModule, TuiButtonModule, TuiLoaderModule, HighlightModule],
     templateUrl: './geolocation-page.component.html',
     styleUrls: ['./geolocation-page.component.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class GeolocationPageComponent {
+export default class GeolocationPageComponent {
     watch = false;
 
     readonly sample = SAMPLE;