chore(demo): use new modern Angular routing approach for all document…

…ation (#915)

projects/demo/src/app/app.routes.ts

@@ -8,122 +8,98 @@ export const appRoutes: Routes = [
     // Getting started
     {
         path: DemoPath.WhatIsMaskito,
-        loadChildren: () =>
-            import('../pages/documentation/what-is-maskito/what-is-maskito.module').then(
-                m => m.WhatIsMaskitoDocPageModule,
-            ),
+        loadComponent: () =>
+            import('../pages/documentation/what-is-maskito/what-is-maskito.component'),
         data: {
             title: 'What is Maskito?',
         },
     },
     {
         path: DemoPath.MaskitoLibraries,
-        loadChildren: () =>
+        loadComponent: () =>
             import(
-                '../pages/documentation/maskito-libraries/maskito-libraries.module'
-            ).then(m => m.MaskitoLibrariesDocPageModule),
+                '../pages/documentation/maskito-libraries/maskito-libraries.component'
+            ),
         data: {
             title: 'Maskito libraries',
         },
     },
     // Core concepts
     {
         path: DemoPath.CoreConceptsOverview,
-        loadChildren: () =>
+        loadComponent: () =>
             import(
-                '../pages/documentation/core-concepts-overview/core-concepts-overview.module'
-            ).then(m => m.CoreConceptsOverviewDocPageModule),
+                '../pages/documentation/core-concepts-overview/core-concepts-overview.component'
+            ),
         data: {
             title: 'Core concepts',
         },
     },
     {
         path: DemoPath.MaskExpression,
-        loadChildren: () =>
-            import('../pages/documentation/mask-expression/mask-expression.module').then(
-                m => m.MaskExpressionDocPageModule,
-            ),
+        loadComponent: () =>
+            import('../pages/documentation/mask-expression/mask-expression.component'),
         data: {
             title: 'Mask expression',
         },
     },
     {
         path: DemoPath.ElementState,
-        loadChildren: () =>
-            import('../pages/documentation/element-state/element-state.module').then(
-                m => m.ElementStateDocPageModule,
-            ),
+        loadComponent: () =>
+            import('../pages/documentation/element-state/element-state.component'),
         data: {
             title: 'Element state',
         },
     },
     {
         path: DemoPath.Processors,
-        loadChildren: () =>
-            import('../pages/documentation/processors/processors.module').then(
-                m => m.ProcessorsDocPageModule,
-            ),
+        loadComponent: () =>
+            import('../pages/documentation/processors/processors.component'),
         data: {
             title: 'Processors',
         },
     },
     {
         path: DemoPath.Plugins,
-        loadChildren: () =>
-            import('../pages/documentation/plugins/plugins.module').then(
-                m => m.PluginsDocPageModule,
-            ),
+        loadComponent: () => import('../pages/documentation/plugins/plugins.component'),
         data: {
             title: 'Plugins',
         },
     },
     {
         path: DemoPath.OverwriteMode,
-        loadChildren: () =>
-            import('../pages/documentation/overwrite-mode/overwrite-mode.module').then(
-                m => m.OverwriteModeDocPageModule,
-            ),
+        loadComponent: () =>
+            import('../pages/documentation/overwrite-mode/overwrite-mode.component'),
         data: {
             title: 'Overwrite mode',
         },
     },
     {
         path: DemoPath.Transformer,
-        loadChildren: () =>
-            import('../pages/documentation/transformer/transformer.module').then(
-                m => m.TransformerDocPageModule,
-            ),
+        loadComponent: () =>
+            import('../pages/documentation/transformer/transformer.component'),
         data: {
             title: 'Transformer',
         },
     },
     // Frameworks
     {
         path: DemoPath.Angular,
-        loadChildren: () =>
-            import('../pages/frameworks/angular/angular-doc.module').then(
-                m => m.AngularDocPageModule,
-            ),
+        loadChildren: () => import('../pages/frameworks/angular'),
         data: {
             title: 'Angular',
         },
     },
     {
         path: DemoPath.React,
-        loadChildren: () =>
-            import('../pages/frameworks/react/react-doc.module').then(
-                m => m.ReactDocPageModule,
-            ),
+        loadComponent: () => import('../pages/frameworks/react/react-doc.component'),
         data: {
             title: 'React',
         },
     },
     {
         path: DemoPath.Vue,
-        loadChildren: () =>
-            import('../pages/frameworks/vue/vue-doc.module').then(
-                m => m.VueDocPageModule,
-            ),
+        loadComponent: () => import('../pages/frameworks/vue/vue-doc.component'),
         data: {
             title: 'Vue',
         },
@@ -181,8 +157,7 @@ export const appRoutes: Routes = [
     },
     {
         path: DemoPath.PhonePackage,
-        loadChildren: () =>
-            import('../pages/phone/phone-doc.module').then(m => m.PhoneDocModule),
+        loadChildren: () => import('../pages/phone'),
         data: {
             title: 'Phone',
         },
@@ -219,37 +194,32 @@ export const appRoutes: Routes = [
     // Other
     {
         path: DemoPath.BrowserSupport,
-        loadChildren: () =>
-            import('../pages/documentation/browser-support/browser-support.module').then(
-                m => m.BrowserSupportModule,
-            ),
+        loadComponent: () =>
+            import('../pages/documentation/browser-support/browser-support.component'),
         data: {
             title: 'Browser support',
         },
     },
     {
         path: DemoPath.Changelog,
-        loadChildren: () =>
-            import('../pages/documentation/changelog/changelog.module').then(
-                m => m.ChangelogModule,
-            ),
+        loadComponent: () =>
+            import('../pages/documentation/changelog/changelog.component'),
         data: {
             title: 'Changelog',
         },
     },
     {
         path: DemoPath.Stackblitz,
-        loadChildren: () =>
-            import('../pages/stackblitz').then(m => m.StackblitzStarterModule),
+        loadComponent: () =>
+            import('../pages/stackblitz').then(m => m.StackblitzStarterComponent),
         data: {
             title: 'Stackblitz Starter',
         },
     },
     // TODO: replace this page with Cypress Component Testing after angular13+ update
     {
         path: DemoPath.Cypress,
-        loadChildren: () =>
-            import('../pages/cypress/cypress.module').then(m => m.CypressDocPageModule),
+        loadComponent: () => import('../pages/cypress/cypress.component'),
         data: {
             title: 'Cypress tests 🤫',
         },

projects/demo/src/pages/cypress/cypress.component.ts

@@ -1,5 +1,5 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
-import {TuiDocPageModule} from '@taiga-ui/addon-doc';
+import {TuiAddonDocModule} from '@taiga-ui/addon-doc';
 
 import {TestDocExample1} from './examples/1-predicate/component';
 import {TestDocExample2} from './examples/2-native-max-length/component';
@@ -12,7 +12,7 @@ import {TestDocExample6} from './examples/6-multi-character-prefix/component';
     standalone: true,
     selector: 'cypress-doc-page',
     imports: [
-        TuiDocPageModule,
+        TuiAddonDocModule,
         TestDocExample1,
         TestDocExample2,
         TestDocExample3,
@@ -24,4 +24,4 @@ import {TestDocExample6} from './examples/6-multi-character-prefix/component';
     styleUrls: ['./cypress.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CypressDocPageComponent {}
+export default class CypressDocPageComponent {}

projects/demo/src/pages/cypress/examples/1-predicate/component.ts

@@ -1,5 +1,5 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {FormsModule} from '@angular/forms';
 import {MaskitoDirective} from '@maskito/angular';
 import {MaskitoElementPredicate, MaskitoOptions} from '@maskito/core';
 import {TuiGroupModule} from '@taiga-ui/core';
@@ -8,13 +8,7 @@ import {TuiInputModule} from '@taiga-ui/kit';
 @Component({
     standalone: true,
     selector: 'test-doc-example-1',
-    imports: [
-        TuiGroupModule,
-        MaskitoDirective,
-        TuiInputModule,
-        ReactiveFormsModule,
-        FormsModule,
-    ],
+    imports: [TuiGroupModule, MaskitoDirective, TuiInputModule, FormsModule],
     templateUrl: './template.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })

projects/demo/src/pages/documentation/browser-support/browser-support.component.ts

@@ -1,16 +1,16 @@
 import {NgFor, NgIf} from '@angular/common';
 import {ChangeDetectionStrategy, Component} from '@angular/core';
-import {TuiDocPageModule} from '@taiga-ui/addon-doc';
+import {TuiAddonDocModule} from '@taiga-ui/addon-doc';
 
 @Component({
     standalone: true,
     selector: 'browser-support',
-    imports: [TuiDocPageModule, NgFor, NgIf],
+    imports: [TuiAddonDocModule, NgFor, NgIf],
     templateUrl: './browser-support.template.html',
     styles: ['td {width: 18.75rem}'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class BrowserSupportComponent {
+export default class BrowserSupportComponent {
     readonly desktopBrowsers = [
         {name: 'Google Chrome', version: '74+'},
         {name: 'Mozilla Firefox', version: '87+'},

projects/demo/src/pages/documentation/changelog/changelog.component.ts

@@ -1,19 +1,19 @@
 import {AsyncPipe} from '@angular/common';
 import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
-import {TuiDocPageModule, tuiRawLoad} from '@taiga-ui/addon-doc';
+import {TuiAddonDocModule, tuiRawLoad} from '@taiga-ui/addon-doc';
 import {MarkdownModule} from 'ngx-markdown';
 import {of, switchMap} from 'rxjs';
 
 @Component({
     standalone: true,
     selector: 'changelog',
-    imports: [TuiDocPageModule, MarkdownModule, AsyncPipe],
+    imports: [TuiAddonDocModule, MarkdownModule, AsyncPipe],
     templateUrl: './changelog.template.html',
     styleUrls: ['./changelog.style.less'],
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ChangelogComponent {
+export default class ChangelogComponent {
     readonly changelog$ = of(import('../../../../../../CHANGELOG.md?raw')).pipe(
         switchMap(tuiRawLoad),
     );

projects/demo/src/pages/documentation/core-concepts-overview/core-concepts-overview.component.ts

@@ -1,17 +1,16 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {RouterLink} from '@angular/router';
 import {DemoPath} from '@demo/constants';
-import {TuiDocCodeModule, TuiDocPageModule} from '@taiga-ui/addon-doc';
+import {TuiAddonDocModule} from '@taiga-ui/addon-doc';
 import {TuiLinkModule, TuiNotificationModule} from '@taiga-ui/core';
 import {TuiIslandModule} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
     selector: 'core-concepts-overview-doc-page',
     imports: [
-        TuiDocPageModule,
+        TuiAddonDocModule,
         TuiLinkModule,
-        TuiDocCodeModule,
         TuiNotificationModule,
         TuiIslandModule,
         RouterLink,
@@ -20,7 +19,7 @@ import {TuiIslandModule} from '@taiga-ui/kit';
     styleUrls: ['./core-concepts-overview.styles.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CoreConceptsOverviewDocPageComponent {
+export default class CoreConceptsOverviewDocPageComponent {
     readonly maskitoPublicApiDemo = import('./examples/maskito-public-api-demo.md?raw');
     readonly maskExpressionDocPage = `/${DemoPath.MaskExpression}`;
     readonly processorsDocPage = `/${DemoPath.Processors}`;