@dotjem/angular-dynamic-components 0.0.1

package/projects/dotjem/angular-dynamic-components/src/lib/dynamic-component-host.component.spec.ts

@@ -0,0 +1,151 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+} from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { vi } from 'vitest';
+import { DynamicComponentHost } from './dynamic-component-host.component';
+import { ComponentRegistry } from './component-registry';
+
+@Component({
+  selector: 'dx-stub-label',
+  template: `<span>{{ config()?.text }}</span>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class StubLabelComponent {
+  readonly config = input<{ text: string } | null>(null);
+}
+
+@Component({
+  selector: 'dx-stub-button',
+  template: `<button>{{ config()?.label }}</button>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class StubButtonComponent {
+  readonly config = input<{ label: string } | null>(null);
+}
+
+@Component({
+  selector: 'dx-stub-data-field',
+  template: `
+    <span>{{ data()?.value }}|{{ config()?.hint }}</span>
+    <button class="emit-data" type="button" (click)="emitChange()">Emit</button>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class StubDataFieldComponent {
+  readonly data = input<{ value: string } | null>(null);
+  readonly config = input<{ hint: string } | null>(null);
+  readonly dataChange = output<{ value: string }>();
+
+  emitChange(): void {
+    this.dataChange.emit({ value: 'changed' });
+  }
+}
+
+describe('DynamicComponentHost', () => {
+  let fixture: ComponentFixture<DynamicComponentHost>;
+  let registry: ComponentRegistry;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DynamicComponentHost],
+      providers: [ComponentRegistry],
+    }).compileComponents();
+
+    registry = TestBed.inject(ComponentRegistry);
+    registry.register('stub-label', StubLabelComponent, 'editor');
+    registry.register('stub-label', StubButtonComponent, 'search');
+    registry.register('stub-button', StubButtonComponent, 'search');
+    registry.register('stub-data', StubDataFieldComponent, 'editor');
+
+    fixture = TestBed.createComponent(DynamicComponentHost);
+  });
+
+  it('should create the host component', () => {
+    fixture.componentRef.setInput('registry', 'editor');
+    fixture.componentRef.setInput('component', 'stub-label');
+    fixture.componentRef.setInput('config', { text: 'Hello' });
+    fixture.detectChanges();
+    expect(fixture.componentInstance).toBeTruthy();
+  });
+
+  it('renders the registered component from a component key', () => {
+    fixture.componentRef.setInput('registry', 'editor');
+    fixture.componentRef.setInput('component', 'stub-label');
+    fixture.componentRef.setInput('config', { text: 'Hello' });
+    fixture.detectChanges();
+
+    const span = fixture.debugElement.query(By.css('span'));
+    expect(span).toBeTruthy();
+    expect(span.nativeElement.textContent).toContain('Hello');
+  });
+
+  it('replaces the rendered component when component key changes', () => {
+    fixture.componentRef.setInput('registry', 'editor');
+    fixture.componentRef.setInput('component', 'stub-label');
+    fixture.componentRef.setInput('config', { text: 'Hello' });
+    fixture.detectChanges();
+    expect(fixture.debugElement.query(By.css('span'))).toBeTruthy();
+
+    fixture.componentRef.setInput('registry', 'search');
+    fixture.componentRef.setInput('component', 'stub-button');
+    fixture.componentRef.setInput('config', { label: 'Click' });
+    fixture.detectChanges();
+
+    expect(fixture.debugElement.query(By.css('span'))).toBeNull();
+    expect(fixture.debugElement.query(By.css('button'))).toBeTruthy();
+  });
+
+  it('logs a warning for an unregistered type', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    fixture.componentRef.setInput('component', 'not-registered');
+    fixture.detectChanges();
+    expect(warnSpy).toHaveBeenCalledWith(
+      expect.stringContaining('not-registered')
+    );
+    warnSpy.mockRestore();
+  });
+
+  it('uses host-level registry for resolution', () => {
+    fixture.componentRef.setInput('registry', 'search');
+    fixture.componentRef.setInput('component', 'stub-label');
+    fixture.componentRef.setInput('config', { label: 'Lookup' });
+    fixture.detectChanges();
+
+    expect(fixture.debugElement.query(By.css('button'))).toBeTruthy();
+    expect(fixture.debugElement.query(By.css('span'))).toBeNull();
+  });
+
+  it('binds external data and config as dedicated inputs', () => {
+    fixture.componentRef.setInput('registry', 'editor');
+    fixture.componentRef.setInput('component', 'stub-data');
+    fixture.componentRef.setInput('data', { value: 'john' });
+    fixture.componentRef.setInput('config', { hint: 'required' });
+    fixture.detectChanges();
+
+    const span = fixture.debugElement.query(By.css('span'));
+    expect(span.nativeElement.textContent).toContain('john|required');
+  });
+
+  it('re-emits dataChange from the rendered component', () => {
+    let emitted: unknown = undefined;
+    fixture.componentInstance.dataChange.subscribe((value) => {
+      emitted = value;
+    });
+
+    fixture.componentRef.setInput('registry', 'editor');
+    fixture.componentRef.setInput('component', 'stub-data');
+    fixture.componentRef.setInput('data', { value: 'john' });
+    fixture.componentRef.setInput('config', { hint: 'required' });
+    fixture.detectChanges();
+
+    fixture.debugElement.query(By.css('.emit-data')).nativeElement.click();
+    fixture.detectChanges();
+
+    expect(emitted).toEqual({ value: 'changed' });
+  });
+});

package/projects/dotjem/angular-dynamic-components/src/lib/dynamic-component-host.component.ts

@@ -0,0 +1,135 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ComponentRef,
+  inject,
+  input,
+  output,
+  OnChanges,
+  OnDestroy,
+  SimpleChanges,
+  Type,
+  ViewContainerRef,
+} from '@angular/core';
+import { ComponentRegistry } from './component-registry';
+
+interface Subscription {
+  unsubscribe(): void;
+}
+
+/**
+ * Renders a single registered component by type.
+ *
+ * Place `<dx-dynamic-component-host>` anywhere in a template and bind `[component]`
+ * to a registered type key. The component found in the registry for that type
+ * is created dynamically inside the host's view container and
+ * receives host-level `data`/`config` as `@Input()` bindings.
+ *
+ * @example
+ * ```html
+ * <dx-dynamic-component-host
+ *   [component]="'my-button'"
+ *   [registry]="'editor'"
+ *   [data]="buttonModel"
+ *   [config]="buttonConfig">
+ * </dx-dynamic-component-host>
+ * ```
+ */
+@Component({
+  selector: 'dx-dynamic-component-host',
+  template: ``,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DynamicComponentHost implements OnChanges, OnDestroy {
+  /** The registered component type key to render. */
+  readonly component = input.required<string>();
+  /** Optional registry override for component resolution. */
+  readonly registry = input<string | null | undefined>(null);
+  /** Model data passed to the rendered component as its `data` input. */
+  readonly data = input<unknown>(undefined);
+  /** Static or semi-static configuration passed as the rendered component's `config` input. */
+  readonly config = input<Record<string, unknown> | null>(null);
+  /** Re-emits the rendered component's `dataChange` output to support `[(data)]`. */
+  readonly dataChange = output<unknown>();
+
+  private readonly vcr = inject(ViewContainerRef);
+  private readonly componentRegistry = inject(ComponentRegistry);
+
+  private componentRef: ComponentRef<unknown> | null = null;
+  private renderedComponentType: Type<unknown> | null = null;
+  private dataChangeSubscription: Subscription | null = null;
+
+  ngOnChanges(_changes: SimpleChanges): void {
+    this.syncComponent();
+  }
+
+  ngOnDestroy(): void {
+    this.destroyComponent();
+  }
+
+  private syncComponent(): void {
+    const componentTypeKey = this.component();
+    const registryName = this.registry() ?? 'default';
+    const componentType = this.componentRegistry.resolve(componentTypeKey, registryName);
+    if (!componentType) {
+      this.destroyComponent();
+      console.warn(
+        `DynamicComponentHost: no component registered for type "${componentTypeKey}" in registry "${registryName}".`
+      );
+      return;
+    }
+
+    if (!this.componentRef || this.renderedComponentType !== componentType) {
+      this.destroyComponent();
+      this.componentRef = this.vcr.createComponent(componentType);
+      this.renderedComponentType = componentType;
+      this.bindDataChangeOutput(this.componentRef);
+    }
+
+    if (!this.componentRef) {
+      return;
+    }
+
+    this.applyStandardInputs(this.componentRef);
+    this.componentRef.changeDetectorRef.markForCheck();
+  }
+
+  private applyStandardInputs(ref: ComponentRef<unknown>): void {
+    const instance = ref.instance as Record<string, unknown>;
+    if ('data' in instance) {
+      ref.setInput('data', this.data());
+    }
+    if ('config' in instance) {
+      ref.setInput('config', this.config());
+    }
+  }
+
+  private bindDataChangeOutput(ref: ComponentRef<unknown>): void {
+    this.dataChangeSubscription?.unsubscribe();
+    this.dataChangeSubscription = null;
+
+    const instance = ref.instance as Record<string, unknown>;
+    const output = instance['dataChange'];
+    if (
+      output &&
+      typeof output === 'object' &&
+      'subscribe' in output &&
+      typeof output.subscribe === 'function'
+    ) {
+      this.dataChangeSubscription = output.subscribe((value: unknown) =>
+        this.dataChange.emit(value)
+      ) as Subscription;
+    }
+  }
+
+  private destroyComponent(): void {
+    this.dataChangeSubscription?.unsubscribe();
+    this.dataChangeSubscription = null;
+    this.renderedComponentType = null;
+    if (this.componentRef) {
+      this.componentRef.destroy();
+      this.componentRef = null;
+    }
+    this.vcr.clear();
+  }
+}

package/projects/dotjem/angular-dynamic-components/src/public-api.ts

@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of @dotjem/angular-dynamic-components
+ */
+
+export * from './lib/component-registry';
+export * from './lib/dynamic-component-host.component';

package/projects/dotjem/angular-dynamic-components/tsconfig.lib.json

@@ -0,0 +1,13 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "types": []
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["**/*.spec.ts"]
+}

package/projects/dotjem/angular-dynamic-components/tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/projects/dotjem/angular-dynamic-components/tsconfig.spec.json

@@ -0,0 +1,10 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../out-tsc/spec",
+    "types": ["vitest/globals"]
+  },
+  "include": ["src/**/*.d.ts", "src/**/*.spec.ts"]
+}

package/tsconfig.json

@@ -0,0 +1,42 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "paths": {
+      "@dotjem/angular-dynamic-components": ["./dist/dotjem/angular-dynamic-components"]
+    },
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "preserve"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./projects/dotjem/angular-dynamic-components/tsconfig.lib.json"
+    },
+    {
+      "path": "./projects/dotjem/angular-dynamic-components/tsconfig.spec.json"
+    },
+    {
+      "path": "./projects/demo/tsconfig.app.json"
+    },
+    {
+      "path": "./projects/demo/tsconfig.spec.json"
+    }
+  ]
+}