feat(daffio): replace dynamic doc renderer with service in page compo…

…nent (#3419)

apps/daffio/src/app/docs/api/api.module.ts

@@ -5,8 +5,8 @@ import { DaffArticleModule } from '@daffodil/design/article';
 import { DaffContainerModule } from '@daffodil/design/container';
 
 import { DaffioDocsApiRoutingModule } from './api-routing.module';
+import { daffioDocsApiContentComponentProvider } from './components/api-content/api-content.provider';
 import { DaffioApiListModule } from './components/api-list/api-list.module';
-import { daffioDocsApiComponentProvider } from './components/doc/provider';
 import { DaffioApiListPageComponent } from './pages/api-list-page/api-list-page.component';
 
 @NgModule({
@@ -25,7 +25,7 @@ import { DaffioApiListPageComponent } from './pages/api-list-page/api-list-page.
     DaffioApiListPageComponent,
   ],
   providers: [
-    daffioDocsApiComponentProvider(),
+    daffioDocsApiContentComponentProvider(),
   ],
 })
 export class DaffioApiModule {}

apps/daffio/src/app/docs/api/components/doc/component.ts → apps/daffio/src/app/docs/api/components/api-content/api-content.component.ts

@@ -4,20 +4,20 @@ import {
   input,
   computed,
 } from '@angular/core';
-import { DaffioSafeHtmlPipe } from 'apps/daffio/src/app/core/html-sanitizer/safe.pipe';
 
 import {
   DaffApiDoc,
   DaffDocKind,
 } from '@daffodil/docs-utils';
 
+import { DaffioSafeHtmlPipe } from '../../../../core/html-sanitizer/safe.pipe';
 import { DaffioDocArticleModule } from '../../../components/doc-article/module';
-import { DaffioDocComponent } from '../../../components/doc-renderer/component.type';
+import { DaffioDocsDynamicContent } from '../../../dynamic-content/dynamic-content.type';
 import { DaffioApiPackageComponent } from '../api-package/api-package.component';
 
 @Component({
-  selector: 'daffio-api-doc',
-  templateUrl: './component.html',
+  selector: 'daffio-docs-api-content',
+  templateUrl: './api-content.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
@@ -26,7 +26,7 @@ import { DaffioApiPackageComponent } from '../api-package/api-package.component'
     DaffioSafeHtmlPipe,
   ],
 })
-export class DaffioDocApiComponent implements DaffioDocComponent<DaffApiDoc> {
+export class DaffioDocsApiContentComponent implements DaffioDocsDynamicContent<DaffApiDoc> {
   static readonly kind = DaffDocKind.API;
 
   readonly isApiPackage = computed(() => this.doc().docType === 'package');

apps/daffio/src/app/docs/api/components/api-content/api-content.provider.ts

@@ -0,0 +1,4 @@
+import { DaffioDocsApiContentComponent } from './api-content.component';
+import { provideDaffioDocsDynamicContentComponents } from '../../../dynamic-content/dynamic-content-components.token';
+
+export const daffioDocsApiContentComponentProvider = () => provideDaffioDocsDynamicContentComponents(DaffioDocsApiContentComponent);

apps/daffio/src/app/docs/api/pages/api-list-page/api-list-page.component.spec.ts

@@ -10,12 +10,12 @@ import {
 import { By } from '@angular/platform-browser';
 import { ActivatedRoute } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
-import { DaffioRoute } from 'apps/daffio/src/app/core/router/route.type';
 import { BehaviorSubject } from 'rxjs';
 
 import { DaffDocsApiNavList } from '@daffodil/docs-utils';
 
 import { DaffioApiListPageComponent } from './api-list-page.component';
+import { DaffioRoute } from '../../../../core/router/route.type';
 import { DaffioApiListComponent } from '../../components/api-list/api-list.component';
 
 @Component({

apps/daffio/src/app/docs/components/doc-default/component.ts → apps/daffio/src/app/docs/components/default-content/default-content.component.ts

@@ -7,19 +7,19 @@ import {
 import { DaffDoc } from '@daffodil/docs-utils';
 
 import { DaffioSafeHtmlPipe } from '../../../core/html-sanitizer/safe.pipe';
+import { DaffioDocsDynamicContent } from '../../dynamic-content/dynamic-content.type';
 import { DaffioDocArticleModule } from '../doc-article/module';
-import { DaffioDocComponent } from '../doc-renderer/component.type';
 
 @Component({
-  selector: 'daffio-doc-default',
-  templateUrl: './component.html',
+  selector: 'daffio-doc-default-content',
+  templateUrl: './default-content.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
     DaffioDocArticleModule,
     DaffioSafeHtmlPipe,
   ],
 })
-export class DaffioDocDefaultComponent<T extends DaffDoc = DaffDoc> implements DaffioDocComponent<T> {
+export class DaffioDocsDefaultContentComponent<T extends DaffDoc = DaffDoc> implements DaffioDocsDynamicContent<T> {
   doc = input<T>();
 }

apps/daffio/src/app/docs/dynamic-content/dynamic-content-component.service.ts

@@ -0,0 +1,31 @@
+import {
+  Inject,
+  Injectable,
+  Type,
+} from '@angular/core';
+
+import { daffArrayToDict } from '@daffodil/core';
+import {
+  DaffDoc,
+  DaffDocKind,
+} from '@daffodil/docs-utils';
+
+import {
+  DAFFIO_DOCS_DYNAMIC_CONTENT_COMPONENTS,
+  DaffioDocsDynamicContentComponentInjection,
+} from './dynamic-content-components.token';
+import { DaffioDocsDynamicContent } from './dynamic-content.type';
+import { DaffioDocsDefaultContentComponent } from '../components/default-content/default-content.component';
+
+@Injectable()
+export class DaffioDocsDynamicContentComponentService<T extends DaffDoc = DaffDoc> {
+  private readonly _map: Record<DaffDocKind, DaffioDocsDynamicContentComponentInjection<T>> = daffArrayToDict(this.components, (c) => c.kind);
+
+  constructor(
+    @Inject(DAFFIO_DOCS_DYNAMIC_CONTENT_COMPONENTS) private components: Array<DaffioDocsDynamicContentComponentInjection<T>>,
+  ) {}
+
+  getComponent(doc: T): Type<DaffioDocsDynamicContent<T>> {
+    return this._map[doc.kind] || DaffioDocsDefaultContentComponent;
+  }
+}

apps/daffio/src/app/docs/dynamic-content/dynamic-content-components.token.ts

@@ -0,0 +1,16 @@
+import { Type } from '@angular/core';
+
+import { createMultiInjectionToken } from '@daffodil/core';
+import {
+  DaffDoc,
+  DaffDocKind,
+} from '@daffodil/docs-utils';
+
+import { DaffioDocsDynamicContent } from './dynamic-content.type';
+
+export type DaffioDocsDynamicContentComponentInjection<T extends DaffDoc = DaffDoc> = {readonly kind: DaffDocKind} & Type<DaffioDocsDynamicContent<T>>;
+
+export const {
+  token: DAFFIO_DOCS_DYNAMIC_CONTENT_COMPONENTS,
+  provider: provideDaffioDocsDynamicContentComponents,
+} = createMultiInjectionToken<DaffioDocsDynamicContentComponentInjection>('DAFFIO_DOCS_DYNAMIC_CONTENT_COMPONENTS');

apps/daffio/src/app/docs/components/doc-renderer/component.type.ts → apps/daffio/src/app/docs/dynamic-content/dynamic-content.type.ts

@@ -2,6 +2,6 @@ import { InputSignal } from '@angular/core';
 
 import { DaffDoc } from '@daffodil/docs-utils';
 
-export interface DaffioDocComponent<T extends DaffDoc = DaffDoc> {
+export interface DaffioDocsDynamicContent<T extends DaffDoc = DaffDoc> {
   doc: InputSignal<T>;
 }

apps/daffio/src/app/docs/guides/components/doc/component.ts → apps/daffio/src/app/docs/guides/components/guides-content/guides-content.component.ts

@@ -3,27 +3,27 @@ import {
   ChangeDetectionStrategy,
   input,
 } from '@angular/core';
-import { DaffioSafeHtmlPipe } from 'apps/daffio/src/app/core/html-sanitizer/safe.pipe';
 
 import {
   DaffGuideDoc,
   DaffDocKind,
 } from '@daffodil/docs-utils';
 
+import { DaffioSafeHtmlPipe } from '../../../../core/html-sanitizer/safe.pipe';
 import { DaffioDocArticleModule } from '../../../components/doc-article/module';
-import { DaffioDocComponent } from '../../../components/doc-renderer/component.type';
+import { DaffioDocsDynamicContent } from '../../../dynamic-content/dynamic-content.type';
 
 @Component({
   selector: 'daffio-docs-guides-content',
-  templateUrl: './component.html',
+  templateUrl: './guides-content.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
     DaffioDocArticleModule,
     DaffioSafeHtmlPipe,
   ],
 })
-export class DaffioDocsGuidesContentComponent implements DaffioDocComponent<DaffGuideDoc> {
+export class DaffioDocsGuidesContentComponent implements DaffioDocsDynamicContent<DaffGuideDoc> {
   static readonly kind = DaffDocKind.GUIDE;
 
   doc = input<DaffGuideDoc>();

apps/daffio/src/app/docs/guides/components/guides-content/guides-content.provider.ts

@@ -0,0 +1,4 @@
+import { DaffioDocsGuidesContentComponent } from './guides-content.component';
+import { provideDaffioDocsDynamicContentComponents } from '../../../dynamic-content/dynamic-content-components.token';
+
+export const daffioDocsGuidesContentComponentProvider = () => provideDaffioDocsDynamicContentComponents(DaffioDocsGuidesContentComponent);

apps/daffio/src/app/docs/guides/guides.module.ts

@@ -1,14 +1,14 @@
 import { NgModule } from '@angular/core';
 
-import { daffioDocsGuideComponentProvider } from './components/doc/provider';
+import { daffioDocsGuidesContentComponentProvider } from './components/guides-content/guides-content.provider';
 import { DaffioGuidesRoutingModule } from './guides-routing.module';
 
 @NgModule({
   imports: [
     DaffioGuidesRoutingModule,
   ],
   providers: [
-    daffioDocsGuideComponentProvider(),
+    daffioDocsGuidesContentComponentProvider(),
   ],
 })
 export class DaffioGuidesModule {}

apps/daffio/src/app/docs/packages/components/doc/component.ts → apps/daffio/src/app/docs/packages/components/packages-content/packages-content.component.ts

@@ -3,27 +3,27 @@ import {
   ChangeDetectionStrategy,
   input,
 } from '@angular/core';
-import { DaffioSafeHtmlPipe } from 'apps/daffio/src/app/core/html-sanitizer/safe.pipe';
 
 import {
   DaffPackageGuideDoc,
   DaffDocKind,
 } from '@daffodil/docs-utils';
 
+import { DaffioSafeHtmlPipe } from '../../../../core/html-sanitizer/safe.pipe';
 import { DaffioDocArticleModule } from '../../../components/doc-article/module';
-import { DaffioDocComponent } from '../../../components/doc-renderer/component.type';
+import { DaffioDocsDynamicContent } from '../../../dynamic-content/dynamic-content.type';
 
 @Component({
   selector: 'daffio-docs-packages-content',
-  templateUrl: './component.html',
+  templateUrl: './packages-content.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
     DaffioDocArticleModule,
     DaffioSafeHtmlPipe,
   ],
 })
-export class DaffioDocPackagesContentComponent implements DaffioDocComponent<DaffPackageGuideDoc> {
+export class DaffioDocsPackagesContentComponent implements DaffioDocsDynamicContent<DaffPackageGuideDoc> {
   static readonly kind = DaffDocKind.PACKAGE;
 
   doc = input<DaffPackageGuideDoc>();

apps/daffio/src/app/docs/packages/components/packages-content/packages-content.provider.ts

@@ -0,0 +1,4 @@
+import { DaffioDocsPackagesContentComponent } from './packages-content.component';
+import { provideDaffioDocsDynamicContentComponents } from '../../../dynamic-content/dynamic-content-components.token';
+
+export const daffioDocsPackagesContentComponentProvider = () => provideDaffioDocsDynamicContentComponents(DaffioDocsPackagesContentComponent);

apps/daffio/src/app/docs/packages/containers/package-cards/package-cards.component.spec.ts

@@ -12,10 +12,10 @@ import {
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { ActivatedRoute } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
-import { DaffioRoute } from 'apps/daffio/src/app/core/router/route.type';
 import { BehaviorSubject } from 'rxjs';
 
 import { DaffioDocsPackageCardsContainer } from './package-cards.component';
+import { DaffioRoute } from '../../../../core/router/route.type';
 
 describe('DaffioDocsPackageCardsContainer', () => {
   let component: DaffioDocsPackageCardsContainer;

apps/daffio/src/app/docs/packages/packages.module.ts

@@ -5,7 +5,7 @@ import { RouterModule } from '@angular/router';
 import { DaffContainerModule } from '@daffodil/design/container';
 import { DaffHeroModule } from '@daffodil/design/hero';
 
-import { daffioDocsPackageComponentProvider } from './components/doc/provider';
+import { daffioDocsPackagesContentComponentProvider } from './components/packages-content/packages-content.provider';
 import { DaffioDocsPackageCardsContainerModule } from './containers/package-cards/package-cards.module';
 import { DaffioPackagesRoutingModule } from './packages-routing.module';
 import { DaffioPackagesOverviewPageComponent } from './pages/packages-overview/packages-overview.component';
@@ -27,7 +27,7 @@ import { DaffioPackagesOverviewPageComponent } from './pages/packages-overview/p
     DaffioPackagesOverviewPageComponent,
   ],
   providers: [
-    daffioDocsPackageComponentProvider(),
+    daffioDocsPackagesContentComponentProvider(),
   ],
 })
 export class DaffioPackagesModule {}

apps/daffio/src/app/docs/pages/docs-page/docs-page.component.html

@@ -1 +1 @@
-<daffio-doc-renderer [doc]="doc$ | async"></daffio-doc-renderer>
+<ng-template [ngComponentOutlet]="component$ | async" [ngComponentOutletInputs]="{doc: doc$ | async}"></ng-template>