feat: add stackblitz starter (#30)

Co-authored-by: splincode <>

apps/demo-integrations/cypress/support/helpers/demo-paths.ts

@@ -2,7 +2,7 @@ import type {TuiDocPage, TuiDocPages} from '@taiga-ui/addon-doc';
 
 import {DEMO_PAGES} from '../../../../demo/src/app/app.pages';
 
-const EXCLUSION_SECTIONS: string[] = [`Other`];
+const EXCLUSION_SECTIONS: string[] = [`Documentation`];
 const EXCLUSION_ROUTES: string[] = [`Starter Kit`];
 
 export const DEMO_PATHS = flatPages(DEMO_PAGES)

apps/demo/src/app/app.component.html

@@ -24,6 +24,16 @@
                 target="_blank"
                 class="link"
             ></a>
+
+            <a
+                tuiLink
+                tuiMode="onLight"
+                title="StackBlitz Starter"
+                iconAlign="left"
+                icon="assets/icons/stackblitz.svg"
+                routerLink="stackblitz"
+                class="link"
+            ></a>
         </ng-container>
 
         <p

apps/demo/src/app/app.pages.ts

@@ -3,6 +3,18 @@ import {TuiDocPages} from '@taiga-ui/addon-doc';
 import {TuiDemoPath} from './constants';
 
 export const DEMO_PAGES: TuiDocPages = [
+    {
+        section: `Documentation`,
+        title: `StackBlitz`,
+        keywords: `reproduce, issue, bug, sandbox, playground, test`,
+        route: TuiDemoPath.Stackblitz,
+    },
+    {
+        section: `Documentation`,
+        title: `Changelog`,
+        route: TuiDemoPath.Changelog,
+        keywords: `release, change, changelog, archive, history`,
+    },
     {
         section: `Editor`,
         title: `Starter Kit`,
@@ -166,10 +178,4 @@ export const DEMO_PAGES: TuiDocPages = [
             },
         ],
     },
-    {
-        section: `Other`,
-        title: `Changelog`,
-        route: TuiDemoPath.Changelog,
-        keywords: `release, change, changelog, archive, history`,
-    },
 ];

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

@@ -14,6 +14,15 @@ export const appRoutes: Routes = [
             title: `StarterKit`,
         },
     },
+    {
+        path: `stackblitz`,
+        loadChildren: async () =>
+            (await import(`./pages/stackblitz/starter/stackblitz-starter.module`))
+                .StackblitzStarterModule,
+        data: {
+            title: `Stackblitz Starter`,
+        },
+    },
     {
         path: TuiDemoPath.Installation,
         loadChildren: async () =>

apps/demo/src/app/constants/demo-path.ts

@@ -1,5 +1,7 @@
 // eslint-disable-next-line no-restricted-syntax
 export const enum TuiDemoPath {
+    Stackblitz = `stackblitz`,
+    Changelog = `changelog`,
     StarterKit = `starter-kit`,
     Installation = `installation`,
     ColorPicker = `color-picker`,
@@ -22,5 +24,4 @@ export const enum TuiDemoPath {
     EmbedYoutube = `embed/youtube`,
     EmbedIframe = `embed/iframe`,
     EmbedHtml5 = `embed/html5`,
-    Changelog = `changelog`,
 }

apps/demo/src/app/pages/changelog/editor-changelog.component.ts

@@ -1,7 +1,8 @@
 import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
 import {tuiRawLoad} from '@taiga-ui/addon-doc';
+import MarkdownIt from 'markdown-it';
 import {of} from 'rxjs';
-import {switchMap} from 'rxjs/operators';
+import {map, switchMap} from 'rxjs/operators';
 
 @Component({
     selector: 'changelog',
@@ -11,7 +12,22 @@ import {switchMap} from 'rxjs/operators';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TuiChangelogComponent {
-    readonly changelog$ = of(import('../../../../../../CHANGELOG.md?raw')).pipe(
+    readonly changelog$ = of(
+        import('../../../../../../libs/tui-editor/CHANGELOG.md?raw'),
+    ).pipe(
         switchMap(tuiRawLoad),
+        map((value: string) =>
+            new MarkdownIt()
+                .render(
+                    value
+                        .replaceAll(
+                            'All notable changes to this project will be documented in this file. See\n[Conventional Commits](https://conventionalcommits.org) for commit guidelines.',
+                            '',
+                        )
+                        .replace(/# Change Log\n/g, '')
+                        .trim(),
+                )
+                .replace(/h1|h2|h3|h4|h5|h6/g, 'h2'),
+        ),
     );
 }

apps/demo/src/app/pages/changelog/editor-changelog.style.less

@@ -1,60 +1,35 @@
-markdown {
+.changelog {
     max-width: 58.25rem;
 
-    & > :nth-child(1),
-    & > :nth-child(2) {
-        display: none;
-    }
-
-    > * {
-        margin-left: 1.25rem;
-    }
-
-    & h2 {
-        font-size: 2em;
-        padding-bottom: 0.5em;
-        margin-left: 0;
-        border-bottom: 1px solid var(--tui-base-03);
-    }
-
-    & h3 {
-        text-transform: uppercase;
-        font-weight: normal;
-        font-size: 1.5rem;
-        margin: 1rem 0;
-    }
-
-    & h3:not([id^='feat']):not([id^='bug']):not([id^='deprecations']) {
-        font-size: 1.75rem;
-        padding-bottom: 0.5em;
-        margin: 2rem 0 0 0;
-        border-bottom: 1px solid var(--tui-base-03);
-    }
-
-    & h3[id^='breaking'] {
+    > *:not(h2) {
         margin-left: 1.25rem;
-        color: var(--tui-error-fill);
     }
 
-    & code {
-        color: #d45d8c;
-    }
-
-    & h3[id^='feat']:before {
-        content: '🚀';
-    }
+    a {
+        text-decoration: none;
+        color: var(--tui-link);
 
-    & h3[id^='bug']:before {
-        content: '🐞';
+        &:hover,
+        &:active {
+            color: var(--tui-link-hover);
+        }
     }
 
-    & h3[id^='deprecations']:before {
-        content: '⚠️';
+    li {
+        position: relative;
+        padding-left: 1.5rem;
+        word-wrap: break-word;
+        margin-top: 0.75rem;
     }
 
-    & h3[id^='feat']:before,
-    & h3[id^='bug']:before,
-    & h3[id^='deprecations']:before {
-        margin-right: 0.5rem;
+    li:before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0.5rem;
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: 100%;
+        background-color: var(--tui-primary);
     }
 }

apps/demo/src/app/pages/changelog/editor-changelog.template.html

@@ -1,3 +1,6 @@
 <tui-doc-page header="Changelog">
-    <markdown [data]="(changelog$ | async) || ''"></markdown>
+    <div
+        class="changelog"
+        [innerHTML]="changelog$ | async"
+    ></div>
 </tui-doc-page>

apps/demo/src/app/pages/stackblitz/classes/index.ts

@@ -0,0 +1,3 @@
+export * from './ts-file.parser';
+export * from './ts-file-component.parser';
+export * from './ts-file-module.parser';

apps/demo/src/app/pages/stackblitz/classes/ts-file-component.parser.ts

@@ -0,0 +1,24 @@
+import {TsFileParser} from './ts-file.parser';
+
+export class TsFileComponentParser extends TsFileParser {
+    set selector(newSelector: string) {
+        this.rawFileContent = this.rawFileContent.replace(
+            /(selector:\s['"`])(.*)(['"`])/gi,
+            `$1${newSelector}$3`,
+        );
+    }
+
+    set templateUrl(newUrl: string) {
+        this.rawFileContent = this.rawFileContent.replace(
+            /(templateUrl:\s['"`])(.*)(['"`])/gi,
+            `$1${newUrl}$3`,
+        );
+    }
+
+    set styleUrls(newUrls: string[] | readonly string[]) {
+        this.rawFileContent = this.rawFileContent.replace(
+            /(styleUrls:\s)(\[.*\])/gi,
+            `$1${JSON.stringify(newUrls)}`,
+        );
+    }
+}

apps/demo/src/app/pages/stackblitz/classes/ts-file-module.parser.ts

@@ -0,0 +1,24 @@
+import {TsFileParser} from './ts-file.parser';
+
+export class TsFileModuleParser extends TsFileParser {
+    addDeclaration(entity: string): void {
+        this.rawFileContent = this.rawFileContent.replace(
+            `declarations: [`,
+            `declarations: [${entity}, `,
+        );
+    }
+
+    addModuleImport(entity: string): void {
+        this.rawFileContent = this.rawFileContent.replace(
+            `imports: [`,
+            `imports: [\n${entity}, `,
+        );
+    }
+
+    hasDeclarationEntity(entity: string): boolean {
+        const [, declarations = ``] =
+            this.rawFileContent.match(/(?:declarations:\s\[)(.*)(?:\])/i) || [];
+
+        return declarations.includes(entity);
+    }
+}

apps/demo/src/app/pages/stackblitz/classes/ts-file.parser.ts

@@ -0,0 +1,73 @@
+import {TuiTsParserException} from '@taiga-ui/cdk';
+
+export class TsFileParser {
+    get className(): string {
+        const [, className] = this.rawFileContent.match(/(?:export class\s)(\w*)/i) || [];
+
+        return className || ``;
+    }
+
+    set className(newClassName: string) {
+        this.rawFileContent = this.rawFileContent.replace(
+            /(export class\s)(\w*)/i,
+            `$1${newClassName}`,
+        );
+    }
+
+    get hasNgModule(): boolean {
+        return this.rawFileContent.includes(`@NgModule`);
+    }
+
+    get hasNgComponent(): boolean {
+        return this.rawFileContent.includes(`@Component`);
+    }
+
+    constructor(protected rawFileContent: string) {
+        const classesInside = rawFileContent.match(/export class/gi) || [];
+
+        if (classesInside.length > 1) {
+            throw new TuiTsParserException();
+        }
+
+        this.replaceMetaAssets();
+    }
+
+    addImport(entity: string, packageOrPath: string): void {
+        const fromName = packageOrPath.replace(`.ts`, ``);
+
+        this.rawFileContent = this.rawFileContent.includes(fromName)
+            ? this.addIntoExistingImport(entity, fromName)
+            : `import {${entity}} from '${fromName}';\n${this.rawFileContent};`;
+    }
+
+    toString(): string {
+        return this.rawFileContent;
+    }
+
+    private addIntoExistingImport(entity: string, packageName: string): string {
+        const packageImportsRegex = new RegExp(
+            `(?:import\\s?\\{\\r?\\n?)(?:(?:.*),\\r?\\n?)*?(?:.*?)\\r?\\n?} from (?:'|")${packageName}(?:'|");`,
+            `gm`,
+        );
+
+        return this.rawFileContent.replace(packageImportsRegex, parsed =>
+            parsed.includes(entity) ? parsed : parsed.replace(`{`, `{${entity}, `),
+        );
+    }
+
+    /**
+     * @description:
+     * The 'import.meta' doesn't support on Stackblitz
+     */
+    private replaceMetaAssets(): void {
+        this.rawFileContent = this.rawFileContent.replace(
+            `import {assets} from '@demo/utils';\n`,
+            ``,
+        );
+
+        this.rawFileContent = this.rawFileContent.replace(
+            `assets\``,
+            `\`https://taiga-ui.dev/assets`,
+        );
+    }
+}