@ng-doc/builder 15.0.0-beta.32 → 15.0.0-beta.34

package/interfaces/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../libs/builder/interfaces/index.ts"],"names":[],"mappings":";;;AAAA,0DAAgC;AAChC,kDAAwB;AACxB,4DAAkC;AAClC,yDAA+B;AAC/B,wDAA8B;AAC9B,uDAA6B;AAC7B,wDAA8B;AAC9B,6DAAmC;AACnC,mDAAyB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../libs/builder/interfaces/index.ts"],"names":[],"mappings":";;;AAAA,0DAAgC;AAChC,kDAAwB;AACxB,4DAAkC;AAClC,yDAA+B;AAC/B,0DAAgC;AAChC,wDAA8B;AAC9B,uDAA6B;AAC7B,wDAA8B;AAC9B,6DAAmC;AACnC,wDAA8B;AAC9B,mDAAyB"}

package/interfaces/renderer-options.d.ts

@@ -1,4 +1,6 @@
+import { ObservableSet } from '../classes';
 export interface NgDocRendererOptions<T> {
     scope?: string;
-    overrideContext?: T;
+    dependenciesStore?: ObservableSet<string>;
+    context?: T;
 }

package/interfaces/repo-config.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The repository configuration interface.
+ */
+export interface NgDocRepoConfig {
+    /**
+     * The URL of the repository (e.g. "https://github.com/skoropadas/ng-doc")
+     */
+    url: string;
+    /**
+     * The develop branch name (e.g. "master"/"main")
+     */
+    mainBranch: string;
+    /**
+     * The release branch name (e.g. "release"), uses to generate correct links for the "View source" button
+     */
+    releaseBranch: string;
+}

package/{engine/.cache/libs/app/interfaces/demo-assets.js → interfaces/repo-config.js}

@@ -1,2 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=repo-config.js.map

package/interfaces/repo-config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"repo-config.js","sourceRoot":"","sources":["../../../../libs/builder/interfaces/repo-config.ts"],"names":[],"mappings":""}

package/interfaces/schema.d.ts

@@ -1,29 +1,9 @@
-import { NgDocGlobalKeyword } from './keyword-map';
+import { NgDocConfiguration } from './configuration';
 export interface NgDocSchema {
     browserTarget: string;
     main: string;
-    ngDoc?: NgDocConfiguration;
-}
-/**
- * NgDoc configuration interface, that configure NgDoc library
- */
-export interface NgDocConfiguration {
     /**
-     * List of paths to your documentation location (e.g. "src/app")
+     * @deprecated Please use `ng-doc.config.js` file instead. Check our configuration guide for more details.
      */
-    pages?: string | string[];
-    /**
-     * Route prefix uses to add some additional route segment before documentation pages,
-     * you can use it e.g. to wrap documentation with additional route like "docs".
-     */
-    routePrefix?: string;
-    /**
-     * Tag for of the current target, you can use it in conjunction with the `onlyForTags` field in your pages to
-     * hide pages for certain documentation builds
-     */
-    tag?: string;
-    /**
-     * List of the global keywords, to create link to foreign websites
-     */
-    keywords?: Record<string, NgDocGlobalKeyword>;
+    ngDoc?: NgDocConfiguration;
 }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@ng-doc/builder",
-  "version": "15.0.0-beta.32",
+  "version": "15.0.0-beta.34",
   "type": "commonjs",
   "builders": "./builders.json",
   "schematics": "./schematics/collection.json",
   "dependencies": {
-    "@ng-doc/core": "15.0.0-beta.32",
+    "@ng-doc/core": "15.0.0-beta.34",
     "@angular-devkit/architect": ">=0.1500.0",
     "chokidar": "^3.5.3",
     "minimatch": "^5.1.0",
@@ -21,10 +21,17 @@
     "rehype": "^9.0.1",
     "rehype-format": "^3.1.0",
     "rehype-highlight": "^4.1.0",
-    "rehype-slug": "^4.0.0",
+    "hast-util-to-string": "^1.0.4",
+    "unist-util-visit": "^2.0.1",
+    "github-slugger": "^1.5.0",
+    "hast-util-heading-rank": "^1.0.1",
+    "hast-util-has-property": "^1.0.4",
     "highlight.js": "^11.5.1",
     "raw-loader": "^4.0.2",
-    "@microsoft/tsdoc": "^0.14.2"
+    "esbuild": "^0.17.8",
+    "@microsoft/tsdoc": "^0.14.2",
+    "cosmiconfig": "^8.1.0",
+    "cosmiconfig-typescript-swc-loader": "^0.0.2"
   },
   "publishConfig": {
     "access": "public"

package/schematics/dependencies/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/builder/schematics/dependencies/index.ts"],"names":[],"mappings":";;;;AAAA,2DAaoC;AACpC,qDAA8C;AAE9C,yCAAuC;AACvC,oCAAkD;AAGlD,MAAM,aAAa,GAAa,CAAC,2BAA2B,CAAC,CAAC;AAE9D;;;;;GAKG;AACH,SAAgB,KAAK,CAAC,OAAqC;IAC1D,OAAO,CAAC,IAAU,EAAE,EAAE;;QACrB,MAAM,QAAQ,GAAW,cAAI,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,kBAAS,CAAC,CAAC;QAC5D,MAAM,QAAQ,GAAW,MAAA,IAAA,gCAAwB,EAAC,QAAQ,CAAC,mCAAI,MAAM,CAAC;QAEtE,OAAO,IAAA,kBAAK,EAAC;YACZ,IAAA,sBAAS,EACR,IAAA,kBAAK,EAAC,IAAA,gBAAG,EAAC,SAAS,CAAC,EAAE;gBACrB,IAAA,mBAAM,EACL,CAAC,IAAY,EAAE,EAAE,CAChB,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAA,eAAQ,EAAC,IAAI,CAAC,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC;oBAC1D,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAA,eAAQ,EAAC,IAAI,CAAC,CAAC,CACxC;gBACD,IAAA,2BAAc,EAAC,EAAC,GAAG,OAAO,EAAE,QAAQ,EAAC,CAAC;gBACtC,IAAA,iBAAI,EAAC,OAAO,CAAC,IAAI,CAAC;gBAClB,IAAA,oBAAO,EAAC,CAAC,SAAoB,EAAE,EAAE;oBAChC,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE;wBAChC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;qBAClD;oBACD,OAAO,SAAS,CAAC;gBAClB,CAAC,CAAC;aACF,CAAC,EACF,0BAAa,CAAC,SAAS,CACvB;SACD,CAAC,CAAC;IACJ,CAAC,CAAC;AACH,CAAC;AA1BD,sBA0BC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/builder/schematics/dependencies/index.ts"],"names":[],"mappings":";;;;AAAA,2DAaoC;AACpC,qDAAoC;AAEpC,yCAAuC;AACvC,oCAAkD;AAGlD,MAAM,aAAa,GAAa,CAAC,2BAA2B,CAAC,CAAC;AAE9D;;;;;GAKG;AACH,SAAgB,KAAK,CAAC,OAAqC;IAC1D,OAAO,CAAC,IAAU,EAAE,EAAE;;QACrB,MAAM,QAAQ,GAAW,cAAI,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,kBAAS,CAAC,CAAC;QAC5D,MAAM,QAAQ,GAAW,MAAA,IAAA,gCAAwB,EAAC,QAAQ,CAAC,mCAAI,MAAM,CAAC;QAEtE,OAAO,IAAA,kBAAK,EAAC;YACZ,IAAA,sBAAS,EACR,IAAA,kBAAK,EAAC,IAAA,gBAAG,EAAC,SAAS,CAAC,EAAE;gBACrB,IAAA,mBAAM,EACL,CAAC,IAAY,EAAE,EAAE,CAChB,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAA,eAAQ,EAAC,IAAI,CAAC,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC;oBAC1D,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAA,eAAQ,EAAC,IAAI,CAAC,CAAC,CACxC;gBACD,IAAA,2BAAc,EAAC,EAAC,GAAG,OAAO,EAAE,QAAQ,EAAC,CAAC;gBACtC,IAAA,iBAAI,EAAC,OAAO,CAAC,IAAI,CAAC;gBAClB,IAAA,oBAAO,EAAC,CAAC,SAAoB,EAAE,EAAE;oBAChC,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE;wBAChC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;qBAClD;oBACD,OAAO,SAAS,CAAC;gBAClB,CAAC,CAAC;aACF,CAAC,EACF,0BAAa,CAAC,SAAS,CACvB;SACD,CAAC,CAAC;IACJ,CAAC,CAAC;AACH,CAAC;AA1BD,sBA0BC"}

package/schematics/page/index.js

@@ -20,7 +20,7 @@ function build(options) {
         const closestCategoryFile = options.category
             ? (0, helpers_1.findClosestFile)(options.path, engine_1.CATEGORY_NAME)
             : null;
-        const pageName = (0, strings_1.classify)(options.title);
+        const pageName = (0, strings_1.classify)(options.title + 'Page');
         const categoryConstantName = options.category && closestCategoryFile ? (0, utils_1.extractDefaultExportName)(closestCategoryFile) : null;
         const categoryImportPath = closestCategoryFile
             ? (0, path_1.relative)(path, closestCategoryFile).replace(/.ts$/, '')

package/schematics/page/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/builder/schematics/page/index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAC3E,2DAaoC;AACpC,+BAA8C;AAE9C,yCAA2C;AAC3C,2CAA8C;AAC9C,oCAAkD;AAGlD,MAAM,aAAa,GAAa,CAAC,2BAA2B,EAAE,iCAAiC,CAAC,CAAC;AAEjG;;;;;GAKG;AACH,SAAgB,KAAK,CAAC,OAA6B;IAClD,OAAO,CAAC,IAAU,EAAE,EAAE;QACrB,MAAM,IAAI,GAAW,IAAA,WAAI,EAAC,OAAO,CAAC,IAAI,EAAE,IAAI,IAAA,mBAAS,EAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QACxE,MAAM,mBAAmB,GAAkB,OAAO,CAAC,QAAQ;YAC1D,CAAC,CAAC,IAAA,yBAAe,EAAC,OAAO,CAAC,IAAI,EAAE,sBAAa,CAAC;YAC9C,CAAC,CAAC,IAAI,CAAC;QACR,MAAM,QAAQ,GAAW,IAAA,kBAAQ,EAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACjD,MAAM,oBAAoB,GACzB,OAAO,CAAC,QAAQ,IAAI,mBAAmB,CAAC,CAAC,CAAC,IAAA,gCAAwB,EAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAChG,MAAM,kBAAkB,GAAkB,mBAAmB;YAC5D,CAAC,CAAC,IAAA,eAAQ,EAAC,IAAI,EAAE,mBAAmB,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC;YACzD,CAAC,CAAC,IAAI,CAAC;QAER,OAAO,IAAA,kBAAK,EAAC;YACZ,IAAA,sBAAS,EACR,IAAA,kBAAK,EAAC,IAAA,gBAAG,EAAC,SAAS,CAAC,EAAE;gBACrB,IAAA,mBAAM,EACL,CAAC,IAAY,EAAE,EAAE,CAChB,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAA,eAAQ,EAAC,IAAI,CAAC,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC;oBACxD,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAA,eAAQ,EAAC,IAAI,CAAC,CAAC,CACxC;gBACD,IAAA,2BAAc,EAAC;oBACd,GAAG,OAAO;oBACV,YAAY,EAAE,oBAAoB;oBAClC,UAAU,EAAE,kBAAkB;oBAC9B,QAAQ;oBACR,OAAO,EAAE,OAAO,CAAC,OAAO;iBACxB,CAAC;gBACF,IAAA,iBAAI,EAAC,IAAI,CAAC;gBACV,IAAA,oBAAO,EAAC,CAAC,SAAoB,EAAE,EAAE;oBAChC,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE;wBAChC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;qBAClD;oBACD,OAAO,SAAS,CAAC;gBAClB,CAAC,CAAC;aACF,CAAC,EACF,0BAAa,CAAC,SAAS,CACvB;SACD,CAAC,CAAC;IACJ,CAAC,CAAC;AACH,CAAC;AAxCD,sBAwCC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/builder/schematics/page/index.ts"],"names":[],"mappings":";;;AAAA,oEAA2E;AAC3E,2DAaoC;AACpC,+BAA8C;AAE9C,yCAA2C;AAC3C,2CAA8C;AAC9C,oCAAkD;AAGlD,MAAM,aAAa,GAAa,CAAC,2BAA2B,EAAE,iCAAiC,CAAC,CAAC;AAEjG;;;;;GAKG;AACH,SAAgB,KAAK,CAAC,OAA6B;IAClD,OAAO,CAAC,IAAU,EAAE,EAAE;QACrB,MAAM,IAAI,GAAW,IAAA,WAAI,EAAC,OAAO,CAAC,IAAI,EAAE,IAAI,IAAA,mBAAS,EAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QACxE,MAAM,mBAAmB,GAAkB,OAAO,CAAC,QAAQ;YAC1D,CAAC,CAAC,IAAA,yBAAe,EAAC,OAAO,CAAC,IAAI,EAAE,sBAAa,CAAC;YAC9C,CAAC,CAAC,IAAI,CAAC;QACR,MAAM,QAAQ,GAAW,IAAA,kBAAQ,EAAC,OAAO,CAAC,KAAK,GAAG,MAAM,CAAC,CAAC;QAC1D,MAAM,oBAAoB,GACzB,OAAO,CAAC,QAAQ,IAAI,mBAAmB,CAAC,CAAC,CAAC,IAAA,gCAAwB,EAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAChG,MAAM,kBAAkB,GAAkB,mBAAmB;YAC5D,CAAC,CAAC,IAAA,eAAQ,EAAC,IAAI,EAAE,mBAAmB,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC;YACzD,CAAC,CAAC,IAAI,CAAC;QAER,OAAO,IAAA,kBAAK,EAAC;YACZ,IAAA,sBAAS,EACR,IAAA,kBAAK,EAAC,IAAA,gBAAG,EAAC,SAAS,CAAC,EAAE;gBACrB,IAAA,mBAAM,EACL,CAAC,IAAY,EAAE,EAAE,CAChB,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAA,eAAQ,EAAC,IAAI,CAAC,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC;oBACxD,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAA,eAAQ,EAAC,IAAI,CAAC,CAAC,CACxC;gBACD,IAAA,2BAAc,EAAC;oBACd,GAAG,OAAO;oBACV,YAAY,EAAE,oBAAoB;oBAClC,UAAU,EAAE,kBAAkB;oBAC9B,QAAQ;oBACR,OAAO,EAAE,OAAO,CAAC,OAAO;iBACxB,CAAC;gBACF,IAAA,iBAAI,EAAC,IAAI,CAAC;gBACV,IAAA,oBAAO,EAAC,CAAC,SAAoB,EAAE,EAAE;oBAChC,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE;wBAChC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;qBAClD;oBACD,OAAO,SAAS,CAAC;gBAClB,CAAC,CAAC;aACF,CAAC,EACF,0BAAa,CAAC,SAAS,CACvB;SACD,CAAC,CAAC;IACJ,CAAC,CAAC;AACH,CAAC;AAxCD,sBAwCC"}

package/templates/api-page.module.ts.nunj

@@ -3,14 +3,22 @@ import {ChangeDetectionStrategy, Component, NgModule, Type} from "@angular/core"
 import {RouterModule} from "@angular/router";
 import {CommonModule} from '@angular/common';
 import {NgDocDemoAssets, NgDocPageModule, NgDocRootPage} from '@ng-doc/app';
+import {NgDocPageType} from '@ng-doc/core';
 import pageContent from '!!raw-loader!{{ page.builtPagePath }}';
 
 @Component({
 	template: `<ng-doc-page></ng-doc-page>`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	providers: [{provide: NgDocRootPage, useExisting: {{ page.componentName }}}],
+	providers: [{provide: NgDocRootPage, useExisting: DynamicComponent}],
 })
-export class {{ page.componentName }} extends NgDocRootPage {
+export class DynamicComponent extends NgDocRootPage {
+	readonly pageType: NgDocPageType = 'api';
+	{%- if page.editSourceFileUrl %}
+	readonly editSourceFileUrl: string = '{{ page.editSourceFileUrl }}';
+	{%- endif %}
+	{%- if page.viewSourceFileUrl %}
+	readonly viewSourceFileUrl: string = '{{ page.viewSourceFileUrl }}';
+	{%- endif %}
 	readonly pageContent: string = pageContent;
 	readonly demo: Record<string, Type<unknown>> | undefined = undefined;
 	readonly demoAssets: NgDocDemoAssets | undefined = undefined;
@@ -21,16 +29,17 @@ export class {{ page.componentName }} extends NgDocRootPage {
 }
 
 @NgModule({
-	declarations: [{{ page.componentName }}],
+	declarations: [DynamicComponent],
 	imports: [
 		CommonModule,
 		NgDocPageModule,
 		RouterModule.forChild([{
 			path: '',
-			component: {{ page.componentName }},
+			component: DynamicComponent,
+			title: '{{ page.title }}',
 		}]),
 	],
 	exports: [RouterModule]
 })
-export class {{ page.moduleName }} {
+export class DynamicModule {
 }

package/templates/api-scope.module.ts.nunj

@@ -14,7 +14,7 @@ import {RouterModule} from "@angular/router";
 					{%- for page in scope.children %}
 					{
 						path: '{{ page.route }}',
-						loadChildren: () => import('{{ page.moduleImport }}').then(m => m.{{ page.moduleName }})
+						loadChildren: () => import('{{ page.moduleImport }}').then(m => m.DynamicModule)
 					},
 					{%- endfor %}
 				]
@@ -23,5 +23,5 @@ import {RouterModule} from "@angular/router";
 	],
 	exports: [RouterModule]
 })
-export class {{ scope.moduleName }} {
+export class DynamicModule {
 }

package/templates/api.module.ts.nunj

@@ -2,7 +2,7 @@
 import {ChangeDetectionStrategy, Component, NgModule} from "@angular/core";
 import {RouterModule} from "@angular/router";
 import {CommonModule} from '@angular/common';
-import {NgDocApiListModule, NG_DOC_API_LIST_TOKEN} from '@ng-doc/app';
+import {NG_DOC_API_LIST_TOKEN, NgDocApiListModule} from '@ng-doc/app';
 import apiList from './ng-doc.api-list.json';
 
 @Component({
@@ -13,28 +13,28 @@ import apiList from './ng-doc.api-list.json';
 	}],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class {{ api.componentName }} {
+export class DynamicComponent {
 }
 
 @NgModule({
-	declarations: [{{ api.componentName }}],
+	declarations: [DynamicComponent],
 	imports: [
 		CommonModule,
 		NgDocApiListModule,
 		RouterModule.forChild([
 			{
 				path: '',
-				component: {{ api.componentName }},
+				component: DynamicComponent,
 			},
 			{%- for scope in api.children %}
 			{
 				path: '{{ scope.route }}',
-				loadChildren: () => import('{{ scope.moduleImport }}').then(m => m.{{ scope.moduleName }})
+				loadChildren: () => import('{{ scope.moduleImport }}').then(m => m.DynamicModule)
 			},
 			{%- endfor %}
 		]),
 	],
 	exports: [RouterModule]
 })
-export class {{ api.moduleName }} {
+export class DynamicModule {
 }

package/templates/category.module.ts.nunj

@@ -13,7 +13,7 @@ import {RouterModule} from "@angular/router";
 				{%- for child in category.children %}
 				{
 					path: '{{ child.route }}',
-					loadChildren: () => import('{{ child.moduleImport }}').then(m => m.{{ child.moduleName }})
+					loadChildren: () => import('{{ child.moduleImport }}').then(m => m.DynamicModule)
 				},
 				{%- endfor %}
 			]
@@ -22,5 +22,5 @@ import {RouterModule} from "@angular/router";
 	],
 	exports: [RouterModule]
 })
-export class {{ category.moduleName }} {
+export class DynamicModule {
 }

package/templates/context.ts.nunj

@@ -19,14 +19,14 @@ export const ngDocContextProvider: Provider = {
 				{%- endif %}
 				{%- if entity.navigationItems.length %}
 				children: [
-					{%- for child in entity.navigationItems %}
+					{%- for child in entity.navigationItems | sortNavigationEntities %}
 					{{ nav(child) }},
 					{%- endfor %}
 				]
 				{%- endif %}
 			}
 			{%- endmacro %}
-			{%- for entity in entities %}
+			{%- for entity in entities | sortNavigationEntities %}
 			{{ nav(entity) }},
 			{%- endfor %}
 		],

package/templates/helpers/declaration-modifiers.html.nunj

@@ -7,11 +7,13 @@
 	{% set isStatic = declaration.isStatic and declaration.isStatic() %}
 	{% set isAsync = declaration.isAsync and declaration.isAsync() %}
 	{% set isReadonly = declaration.isReadonly and declaration.isReadonly() %}
-	{% set tooltip = ["Abstract" if isAbstract, 'Static' if isStatic, 'Async' if isAsync, 'Readonly' if isReadonly] | noEmpty | join(', ') %}
+	{% set isProtected = declaration.getScope and declaration.getScope() == 'protected'  %}
+	{% set tooltip = ["Protected" if isProtected, "Abstract" if isAbstract, 'Static' if isStatic, 'Async' if isAsync, 'Readonly' if isReadonly] | noEmpty | join(', ') %}
 
 	{%- if type == 'badge' %}
-		{%- if isAbstract or isStatic or isAsync or isReadonly %}
+		{%- if isAbstract or isStatic or isAsync or isReadonly or isProtected %}
 			<span class="ng-doc-badge-wrapper" ngDocTooltip="{{ tooltip }}">
+				{{ badgeMacro.render("protected") if isProtected }}
 				{{ badgeMacro.render("abstract") if isAbstract }}
 				{{ badgeMacro.render("static") if isStatic }}
 				{{ badgeMacro.render("async") if isAsync }}
@@ -20,8 +22,9 @@
 		{%- endif %}
 
 	{%- elseif type == 'modifier' %}
-		{%- if isAbstract or isStatic or isAsync or isReadonly %}
+		{%- if isAbstract or isStatic or isAsync or isReadonly or isProtected %}
 			<div class="ng-doc-modifiers-wrapper">
+				{{ modifierMacro.render("protected") if isProtected }}
 				{{ modifierMacro.render("abstract") if isAbstract }}
 				{{ modifierMacro.render("static") if isStatic }}
 				{{ modifierMacro.render("async") if isAsync }}
@@ -29,8 +32,9 @@
 			</div>
 		{%- endif %}
 	{%- else %}
-		{%- if isAbstract or isStatic or isAsync or isReadonly %}
+		{%- if isAbstract or isStatic or isAsync or isReadonly or isProtected %}
 			<span class="ng-doc-tags-wrapper">
+				{{ tagMacro.render("protected") if isProtected }}
 				{{ tagMacro.render("abstract") if isAbstract }}
 				{{ tagMacro.render("static") if isStatic }}
 				{{ tagMacro.render("async") if isAsync }}

package/templates/page.module.ts.nunj

@@ -3,9 +3,11 @@ import {Component, NgModule, Type, ChangeDetectionStrategy} from '@angular/core'
 import {RouterModule} from '@angular/router';
 import {CommonModule} from '@angular/common';
 import {NgDocPageModule, NgDocRootPage, NgDocDemoAssets} from '@ng-doc/app';
+import {NgDocDependencies, NgDocPageType} from '@ng-doc/core';
 import pageContent from '!!raw-loader!{{ page.builtPagePath }}';
 {%- if page.pageDependencies %}
 // noinspection ES6UnusedImports
+import {PlaygroundsModule} from './playgrounds';
 import pageDependencies from '{{ page.pageDependencies.importPath }}';
 {%- endif %}
 {%- if page.componentsAssets %}
@@ -17,14 +19,24 @@ import demoAssets from '{{ page.componentsAssets }}';
 @Component({
 	template: `<ng-doc-page></ng-doc-page>`,
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	providers: [{provide: NgDocRootPage, useExisting: {{ page.componentName }}}],
+	providers: [{provide: NgDocRootPage, useExisting: DynamicComponent}],
 })
-export class {{ page.componentName }} extends NgDocRootPage {
+export class DynamicComponent extends NgDocRootPage {
+	readonly pageType: NgDocPageType = 'guide';
 	readonly pageContent: string = pageContent;
+
+	{%- if page.editSourceFileUrl %}
+	readonly editSourceFileUrl: string = '{{ page.editSourceFileUrl }}';
+	{%- endif %}
+
+	{%- if page.viewSourceFileUrl %}
+	readonly viewSourceFileUrl: string = '{{ page.viewSourceFileUrl }}';
+	{%- endif %}
+
 	{%- if page.pageDependencies %}
-	readonly demo: Record<string, Type<unknown>> | undefined = pageDependencies.demo;
-	readonly module: Type<unknown> | undefined = pageDependencies.module;
+	readonly dependencies?: NgDocDependencies = pageDependencies;
 	{%- endif %}
+
 	{%- if page.componentsAssets %}
 	readonly demoAssets: NgDocDemoAssets = demoAssets;
 	{%- endif %}
@@ -35,20 +47,22 @@ export class {{ page.componentName }} extends NgDocRootPage {
 }
 
 @NgModule({
-	declarations: [{{ page.componentName }}],
+	declarations: [DynamicComponent],
 	imports: [
 		CommonModule,
 		NgDocPageModule,
 		{%- if page.pageDependencies %}
 		pageDependencies.module,
+		PlaygroundsModule,
 		{%- endif %}
 		RouterModule.forChild([{
 			path: '',
-			component: {{ page.componentName }},
+			component: DynamicComponent,
+			title: '{{ page.title }}',
 		}]),
 	],
 	exports: [RouterModule]
 })
-export class {{ page.moduleName }} {
+export class DynamicModule {
 }
 

package/templates/playgrounds.ts.nunj

@@ -0,0 +1,70 @@
+// @ts-nocheck
+import {NgModule, Component, ViewChild, Type, ViewContainerRef} from '@angular/core';
+import {NgDocBasePlayground, providePlaygroundDemo} from '@ng-doc/app';
+// noinspection ES6UnusedImports
+import pageDependencies from '{{ dependencies.importPath }}'; import {CommonModule} from '@angular/common';
+
+{% set components = [] -%}
+{%- set index = 1 %}
+
+{%- for id in dependencies.playgroundIds -%}
+{%- set playgrounds = dependencies.getPlaygroundsExpression() %}
+{%- set target = playgrounds | getTargetForPlayground(id) %}
+{%- set template = playgrounds | getTemplateForPlayground(id) %}
+{%- set content = playgrounds | getContentForPlayground(id) %}
+
+	{%- if target %}
+	{%- set selectors = target | extractSelectors %}
+
+		{%- for selector in selectors %}
+			{%- set comp = {id: id, name: 'PlaygroundComponent' + index, selector: selector } %}
+			{%- set components = (components.push(comp), components) %}
+
+@Component({
+	template: `
+		{{template | buildPlaygroundDemoTemplate(selector, content) }}
+	`,
+})
+export class {{ comp.name }} extends NgDocBasePlayground {
+	static readonly selector: string = '{{ comp.selector }}';
+
+	@ViewChild(pageDependencies.playgrounds['{{ id }}'].target, {static: true})
+	readonly playground?: Type<unknown>;
+
+	@ViewChild(pageDependencies.playgrounds['{{ id }}'].target, {static: true, read: ViewContainerRef})
+	readonly viewContainerRef: ViewContainerRef;
+
+	data: any = pageDependencies.playgrounds['{{ id }}'].data;
+
+	constructor() {
+		super();
+	}
+}
+			{%- set index = index + 1 -%}
+		{%- endfor %}
+	{%- endif %}
+{%- endfor %}
+
+@NgModule({
+	imports: [
+		CommonModule,
+		pageDependencies.module,
+	],
+	declarations: [
+		{%- for comp in components %}
+		{{ comp.name }},
+		{%- endfor %}
+	],
+	providers: [
+		{%- for comp in components %}
+		providePlaygroundDemo('{{ comp.id }}', {{ comp.name }}),
+		{%- endfor %}
+	],
+	exports: [
+		{%- for comp in components %}
+		{{ comp.name }},
+		{%- endfor %}
+	],
+})
+export class PlaygroundsModule {
+}

package/templates/routing.ts.nunj

@@ -5,7 +5,7 @@ export const NG_DOC_ROUTING: Routes = [
 	{%- for entity in entities %}
 	{
 		path: '{{ entity.route }}',
-		loadChildren: () => import('{{ entity.moduleImport }}').then(m => m.{{ entity.moduleName }})
+		loadChildren: () => import('{{ entity.moduleImport }}').then(m => m.DynamicModule)
 	},
 	{%- endfor %}
 ];

package/types/component-asset.d.ts

@@ -0,0 +1,2 @@
+import { NgDocAsset } from '../interfaces';
+export declare type NgDocComponentAsset = Record<string, NgDocAsset[]>;

package/{engine/.cache/libs/app/interfaces/context.js → types/component-asset.js}

@@ -1,2 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=component-asset.js.map

package/types/component-asset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-asset.js","sourceRoot":"","sources":["../../../../libs/builder/types/component-asset.ts"],"names":[],"mappings":""}

package/types/index.d.ts

@@ -1,5 +1,6 @@
 export * from './action';
 export * from './artifact-processor';
+export * from './component-asset';
 export * from './constructable';
 export * from './keyword-type';
 export * from './snippet-type';

package/types/index.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./action"), exports);
 tslib_1.__exportStar(require("./artifact-processor"), exports);
+tslib_1.__exportStar(require("./component-asset"), exports);
 tslib_1.__exportStar(require("./constructable"), exports);
 tslib_1.__exportStar(require("./keyword-type"), exports);
 tslib_1.__exportStar(require("./snippet-type"), exports);

package/types/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../libs/builder/types/index.ts"],"names":[],"mappings":";;;AAAA,mDAAyB;AACzB,+DAAqC;AACrC,0DAAgC;AAChC,yDAA+B;AAC/B,yDAA+B;AAC/B,mEAAyC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../libs/builder/types/index.ts"],"names":[],"mappings":";;;AAAA,mDAAyB;AACzB,+DAAqC;AACrC,4DAAkC;AAClC,0DAAgC;AAChC,yDAA+B;AAC/B,yDAA+B;AAC/B,mEAAyC"}

package/engine/.cache/apps/ng-doc/src/app/docs/content/guidelines/demo/demos/button-demo/button-demo.component.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonDemoComponent = void 0;
-const tslib_1 = require("tslib");
-const core_1 = require("@angular/core");
-const notify_1 = require("@ng-doc/ui-kit/services/notify");
-let ButtonDemoComponent = class ButtonDemoComponent {
-    constructor(notifyService) {
-        this.notifyService = notifyService;
-    }
-    clickEvent() {
-        this.notifyService.notify('Button was clicked!');
-    }
-};
-ButtonDemoComponent = tslib_1.__decorate([
-    (0, core_1.Component)({
-        selector: 'ng-doc-button-demo',
-        templateUrl: './button-demo.component.html',
-        styleUrls: ['./button-demo.component.scss'],
-        changeDetection: core_1.ChangeDetectionStrategy.OnPush,
-    }),
-    tslib_1.__metadata("design:paramtypes", [notify_1.NgDocNotifyService])
-], ButtonDemoComponent);
-exports.ButtonDemoComponent = ButtonDemoComponent;

package/engine/.cache/apps/ng-doc/src/app/docs/content/guidelines/demo/demos/button-inline-demo/button-inline-demo.component.js

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonInlineDemoComponent = void 0;
-const tslib_1 = require("tslib");
-const core_1 = require("@angular/core");
-const notify_1 = require("@ng-doc/ui-kit/services/notify");
-let ButtonInlineDemoComponent = class ButtonInlineDemoComponent {
-    /* NgDocCodeSnippetStart(Constructor) */
-    constructor(notifyService) {
-        this.notifyService = notifyService;
-    }
-    /* NgDocCodeSnippetEnd(Constructor) */
-    /* NgDocCodeSnippetStart(ClickEvent) */
-    clickEvent() {
-        this.notifyService.notify('Button was clicked!');
-    }
-};
-ButtonInlineDemoComponent = tslib_1.__decorate([
-    (0, core_1.Component)({
-        selector: 'ng-doc-button-inline-demo',
-        template: `
-		<!-- NgDocHTMLSnippetStart(Button Template) -->
-		<button ng-doc-button (click)="clickEvent()">Just a button</button>
-		<!-- NgDocHTMLSnippetEnd(Button Template) -->
-	`,
-        changeDetection: core_1.ChangeDetectionStrategy.OnPush,
-    }),
-    tslib_1.__metadata("design:paramtypes", [notify_1.NgDocNotifyService])
-], ButtonInlineDemoComponent);
-exports.ButtonInlineDemoComponent = ButtonInlineDemoComponent;

package/engine/.cache/apps/ng-doc/src/app/docs/content/guidelines/demo/ng-doc.dependencies.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const button_demo_component_1 = require("./demos/button-demo/button-demo.component");
-const button_inline_demo_component_1 = require("./demos/button-inline-demo/button-inline-demo.component");
-const ng_doc_module_1 = require("./ng-doc.module");
-const DemoPageDependencies = {
-    // Add your module here
-    module: ng_doc_module_1.DemoPageModule,
-    // And all demos that you'd like to use
-    demo: { ButtonDemoComponent: button_demo_component_1.ButtonDemoComponent, ButtonInlineDemoComponent: button_inline_demo_component_1.ButtonInlineDemoComponent },
-};
-exports.default = DemoPageDependencies;

package/engine/.cache/apps/ng-doc/src/app/docs/content/guidelines/demo/ng-doc.module.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DemoPageModule = void 0;
-const tslib_1 = require("tslib");
-const core_1 = require("@angular/core");
-const button_1 = require("@ng-doc/ui-kit/components/button");
-const button_demo_component_1 = require("./demos/button-demo/button-demo.component");
-const button_inline_demo_component_1 = require("./demos/button-inline-demo/button-inline-demo.component");
-let DemoPageModule = class DemoPageModule {
-};
-DemoPageModule = tslib_1.__decorate([
-    (0, core_1.NgModule)({
-        // Import dependencies
-        imports: [button_1.NgDocButtonModule],
-        // Declarations for your demos
-        declarations: [button_demo_component_1.ButtonDemoComponent, button_inline_demo_component_1.ButtonInlineDemoComponent],
-    })
-], DemoPageModule);
-exports.DemoPageModule = DemoPageModule;

package/engine/.cache/apps/ng-doc/src/app/docs/content/guidelines/demo/ng-doc.page.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const ng_doc_category_1 = require("../ng-doc.category");
-const DemoPage = {
-    title: 'Demo',
-    mdFile: './index.md',
-    category: ng_doc_category_1.default,
-    order: 2,
-    keyword: 'ContentGuidelinesDemo',
-};
-exports.default = DemoPage;

package/engine/.cache/apps/ng-doc/src/app/docs/content/guidelines/ng-doc.category.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const ng_doc_category_1 = require("../ng-doc.category");
-const GuidelinesCategory = {
-    title: 'Guidelines',
-    category: ng_doc_category_1.default,
-    order: 1,
-};
-exports.default = GuidelinesCategory;

package/engine/.cache/apps/ng-doc/src/app/docs/content/guidelines/templating/ng-doc.page.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const ng_doc_category_1 = require("../ng-doc.category");
-const TemplatingPage = {
-    title: 'Templating',
-    mdFile: './index.md',
-    category: ng_doc_category_1.default,
-    keyword: 'ContentGuidelinesTemplating',
-    order: 1,
-};
-exports.default = TemplatingPage;

package/engine/.cache/apps/ng-doc/src/app/docs/develop/custom-data.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CUSTOM_DATA = void 0;
-exports.CUSTOM_DATA = {
-    prop: 'HAHAHA',
-};