refactor: remove FrontEndExample

projects/addon-doc/README.md

@@ -116,18 +116,15 @@ npm i @taiga-ui/addon-doc
    ```typescript
    import {Component} from '@angular/core';
 
-   import {default as exampleHtml} from '!!raw-loader!./examples/1/index.html';
-   import {default as exampleTs} from '!!raw-loader!./examples/1/index.ts';
-
    @Component({
      selector: 'super-component',
      templateUrl: './account.template.html',
    })
    export class SuperComponent {
      // Keys would be used as tabs for code example
      readonly example = {
-       TypeScript: exampleTs,
-       HTML: exampleHtml,
+       TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+       HTML: import('!!raw-loader!./examples/1/index.html'),
      };
 
      readonly inputVariants = ['input 1', 'input 2'];

projects/addon-doc/schematics/doc-page/files/component/__name@dasherize__/__name@dasherize__.component.ts

@@ -1,18 +1,15 @@
 import {ChangeDetectionStrategy, Component} from '@angular/core';
-<% for(let i =1; i<=samples; i++) {%>import * as example<%=i%>Html from '!!raw-loader!./examples/<%=i%>/index.html';
-import * as example<%=i%>Ts from '!!raw-loader!./examples/<%=i%>/index.ts';
-<%}%>import {default as exampleImportModule} from '!!raw-loader!./import/import-module.txt';
 
 @Component({
     selector: 'example-<%= dasherize(name) %>',
     templateUrl: './<%= dasherize(name) %>.template.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Example<%= classify(name) %>Component {
-    <% for(let i =1; i<=samples; i++) {%>readonly example<%=i%>: IFrontEndExample = {
-            TypeScript: example<%=i%>Ts,
-            HTML: example<%=i%>Html,
+    <% for(let i =1; i<=samples; i++) {%>readonly example<%=i%> = {
+            TypeScript: import('!!raw-loader!./examples/<%=i%>/index.ts'),
+            HTML: import('!!raw-loader!./examples/<%=i%>/index.html'),
         };
     <% } %>
-    readonly exampleImportModule = exampleImportModule;
+    readonly exampleImportModule = import('!!raw-loader!./import/import-module.txt');
 }

projects/addon-doc/src/interfaces/code-editor.ts

@@ -1,15 +1,15 @@
 export interface TuiCodeEditor {
     readonly name: string;
     edit(component: string, id: string, files: Record<string, string>): Promise<void>;
+}
 
+/**
+ * @deprecated use {@link TuiCodeEditor}
+ */
+export interface CodeEditor extends TuiCodeEditor {
     /**
      * @deprecated
      * use `edit` method instead of `open`
      */
     open(component: string, sampleId: string, files: Record<string, string>): void;
 }
-
-/**
- * @deprecated use {@link TuiCodeEditor}
- */
-export type CodeEditor = TuiCodeEditor;

projects/demo/src/modules/app/stackblitz/stackblitz.service.ts

@@ -93,14 +93,4 @@ export class TuiStackblitzService implements TuiCodeEditor {
             tags: ['Angular', 'Taiga UI', 'Angular components', 'UI Kit'],
         });
     }
-
-    /**
-     * @deprecated use `edit` method instead of `open`
-     */
-    open(component: string, sampleId: string, files: Record<string, string>): void {
-        // eslint-disable-next-line
-        this.edit(component, sampleId, files).then(() =>
-            console.info('project is opened'),
-        );
-    }
 }

projects/demo/src/modules/charts/axes/axes.component.ts

@@ -6,17 +6,7 @@ import {
     TuiLineHandler,
     TuiLineTypeT,
 } from '@taiga-ui/addon-charts';
-
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 
 @Component({
     selector: 'example-tui-axes',
@@ -25,19 +15,19 @@ import {FrontEndExample} from '../../interfaces/front-end-example';
     changeDetection,
 })
 export class ExampleTuiAxesComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
-        LESS: example2Less,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
     };
 
     readonly lineVariants: readonly TuiLineTypeT[] = [

projects/demo/src/modules/charts/axes/examples/import/import-module.md

@@ -0,0 +1,14 @@
+```ts
+import {TuiAxesModule} from '@taiga-ui/addon-charts';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiAxesModule,
+  ],
+  // ...
+})
+export class MyModule {}
+```

projects/demo/src/modules/charts/axes/examples/import/insert-template.txt → projects/demo/src/modules/charts/axes/examples/import/insert-template.md

@@ -1 +1,3 @@
+```html
 <tui-axes [value]="value"></tui-axes>
+```

projects/demo/src/modules/charts/bar-chart/bar-chart.component.ts

@@ -1,21 +1,11 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {getCurrencySymbol, TuiCurrency} from '@taiga-ui/addon-commerce';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiContextWithImplicit} from '@taiga-ui/cdk';
 import {formatNumber, TuiHintModeT, TuiSizeL, TuiSizeS} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 const MONTHS: readonly string[] = [
     'Jan 2019',
     'Feb',
@@ -38,19 +28,19 @@ const MONTHS: readonly string[] = [
     changeDetection,
 })
 export class ExampleTuiBarChartComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
-        LESS: example2Less,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
     };
 
     collapsed = false;

projects/demo/src/modules/charts/bar-chart/examples/import/import-module.md

@@ -0,0 +1,14 @@
+```ts
+import {TuiBarChartModule} from '@taiga-ui/addon-charts';
+
+//...
+
+@NgModule({
+  imports: [
+    //  ...
+    TuiBarChartModule,
+  ],
+  //...
+})
+export class MyModule {}
+```

projects/demo/src/modules/charts/bar-set/bar-set.component.ts

@@ -1,65 +1,46 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {TuiSizeL, TuiSizeS} from '@taiga-ui/core';
 
-import {default as example1Html} from '!!raw-loader!./examples/1/index.html';
-import {default as example1Less} from '!!raw-loader!./examples/1/index.less';
-import {default as example1Ts} from '!!raw-loader!./examples/1/index.ts';
-import {default as example2Html} from '!!raw-loader!./examples/2/index.html';
-import {default as example2Less} from '!!raw-loader!./examples/2/index.less';
-import {default as example2Ts} from '!!raw-loader!./examples/2/index.ts';
-import {default as example3Html} from '!!raw-loader!./examples/3/index.html';
-import {default as example3Less} from '!!raw-loader!./examples/3/index.less';
-import {default as example3Ts} from '!!raw-loader!./examples/3/index.ts';
-import {default as example4Html} from '!!raw-loader!./examples/4/index.html';
-import {default as example4Less} from '!!raw-loader!./examples/4/index.less';
-import {default as example4Ts} from '!!raw-loader!./examples/4/index.ts';
-import {default as example5Html} from '!!raw-loader!./examples/5/index.html';
-import {default as example5Less} from '!!raw-loader!./examples/5/index.less';
-import {default as example5Ts} from '!!raw-loader!./examples/5/index.ts';
-import {default as exampleModule} from '!!raw-loader!./examples/import/import-module.txt';
-import {default as exampleHtml} from '!!raw-loader!./examples/import/insert-template.txt';
-
-import {FrontEndExample} from '../../interfaces/front-end-example';
-
 @Component({
     selector: 'example-tui-bar-set',
     templateUrl: './bar-set.template.html',
     styleUrls: ['./bar-set.style.less'],
     changeDetection,
 })
 export class ExampleTuiBarSetComponent {
-    readonly exampleModule = exampleModule;
-    readonly exampleHtml = exampleHtml;
+    readonly exampleModule = import('!!raw-loader!./examples/import/import-module.md');
+    readonly exampleHtml = import('!!raw-loader!./examples/import/insert-template.md');
 
-    readonly example1: FrontEndExample = {
-        TypeScript: example1Ts,
-        HTML: example1Html,
-        LESS: example1Less,
+    readonly example1: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/1/index.ts'),
+        HTML: import('!!raw-loader!./examples/1/index.html'),
+        LESS: import('!!raw-loader!./examples/1/index.less'),
     };
 
-    readonly example2: FrontEndExample = {
-        TypeScript: example2Ts,
-        HTML: example2Html,
-        LESS: example2Less,
+    readonly example2: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/2/index.ts'),
+        HTML: import('!!raw-loader!./examples/2/index.html'),
+        LESS: import('!!raw-loader!./examples/2/index.less'),
     };
 
-    readonly example3: FrontEndExample = {
-        TypeScript: example3Ts,
-        HTML: example3Html,
-        LESS: example3Less,
+    readonly example3: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/3/index.ts'),
+        HTML: import('!!raw-loader!./examples/3/index.html'),
+        LESS: import('!!raw-loader!./examples/3/index.less'),
     };
 
-    readonly example4: FrontEndExample = {
-        TypeScript: example4Ts,
-        HTML: example4Html,
-        LESS: example4Less,
+    readonly example4: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/4/index.ts'),
+        HTML: import('!!raw-loader!./examples/4/index.html'),
+        LESS: import('!!raw-loader!./examples/4/index.less'),
     };
 
-    readonly example5: FrontEndExample = {
-        TypeScript: example5Ts,
-        HTML: example5Html,
-        LESS: example5Less,
+    readonly example5: TuiDocExample = {
+        TypeScript: import('!!raw-loader!./examples/5/index.ts'),
+        HTML: import('!!raw-loader!./examples/5/index.ts'),
+        LESS: import('!!raw-loader!./examples/5/index.less'),
     };
 
     collapsed = false;

projects/demo/src/modules/charts/bar-set/examples/import/import-module.md

@@ -0,0 +1,14 @@
+```ts
+import {TuiBarSetModule} from '@taiga-ui/addon-charts';
+
+// ...
+
+@NgModule({
+  imports: [
+    // ...
+    TuiBarSetModule,
+  ],
+})
+// ...
+export class MyModule {}
+```

projects/demo/src/modules/charts/bar-set/examples/import/insert-template.txt → projects/demo/src/modules/charts/bar-set/examples/import/insert-template.md

@@ -1 +1,3 @@
+```html
 <tui-bar-set [value]="value"></tui-bar>
+```