@dotjem/angular-dynamic-components 0.0.1

package/projects/demo/src/app/app.ts

@@ -0,0 +1,117 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { DynamicComponentHost } from '@dotjem/angular-dynamic-components';
+
+interface DynamicConfiguration {
+  type: string;
+  field?: string;
+  config: Record<string, unknown>;
+}
+
+/**
+ * Root component – demonstrates consumer-driven iteration over dynamic host entries.
+ */
+@Component({
+  selector: 'app-root',
+  imports: [DynamicComponentHost],
+  templateUrl: './app.html',
+  styles: `
+    :host { font-family: system-ui, sans-serif; }
+    .page { max-width: 640px; margin: 2rem auto; padding: 0 1rem; }
+    header { margin-bottom: 1.5rem; }
+    .panel { margin-bottom: 1.5rem; }
+    h1 { color: #1e3a8a; }
+    footer { margin-top: 2rem; }
+    pre {
+      background: #f1f5f9;
+      padding: 1rem;
+      border-radius: 6px;
+      overflow: auto;
+      font-size: .8rem;
+    }
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class App {
+  readonly editorConfigurations: DynamicConfiguration[] = [
+    { type: 'section-heading', config: { title: 'Personal Information' } },
+    {
+      type: 'text-field',
+      field: 'firstName',
+      config: { name: 'firstName', label: 'First name', placeholder: 'Jane' },
+    },
+    {
+      type: 'text-field',
+      field: 'lastName',
+      config: { name: 'lastName', label: 'Last name', placeholder: 'Doe' },
+    },
+    { type: 'section-heading', config: { title: 'Contact Details' } },
+    {
+      type: 'select-field',
+      field: 'country',
+      config: {
+        name: 'country',
+        label: 'Country',
+        options: [
+          { value: 'dk', label: 'Denmark' },
+          { value: 'se', label: 'Sweden' },
+          { value: 'no', label: 'Norway' },
+          { value: 'fi', label: 'Finland' },
+        ],
+      },
+    },
+  ];
+
+  editorData: Record<string, unknown> = {
+    firstName: { value: 'Jane' },
+    lastName: { value: 'Doe' },
+    country: { value: 'dk' },
+  };
+
+  readonly searchConfigurations: DynamicConfiguration[] = [
+    {
+      type: 'text-field',
+      field: 'query',
+      config: { placeholder: 'Search docs', buttonLabel: 'Find' },
+    },
+  ];
+
+  searchData: Record<string, unknown> = {
+    query: { value: 'dynamic forms' },
+  };
+
+  handleEditorDataChange(field: string | undefined, value: unknown): void {
+    if (!field) {
+      return;
+    }
+    this.editorData = {
+      ...this.editorData,
+      [field]: value,
+    };
+  }
+
+  handleSearchDataChange(field: string | undefined, value: unknown): void {
+    if (!field) {
+      return;
+    }
+    this.searchData = {
+      ...this.searchData,
+      [field]: value,
+    };
+  }
+
+  get configurationJson(): string {
+    return JSON.stringify(
+      { editor: this.editorConfigurations, search: this.searchConfigurations },
+      null,
+      2
+    );
+  }
+
+  get dataJson(): string {
+    return JSON.stringify(
+      { editor: this.editorData, search: this.searchData },
+      null,
+      2
+    );
+  }
+}

package/projects/demo/src/app/components/search-text-field.component.ts

@@ -0,0 +1,49 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+} from '@angular/core';
+
+interface SearchFieldData {
+  value: string;
+}
+
+interface SearchFieldConfig {
+  placeholder: string;
+  buttonLabel: string;
+}
+
+/** Search-style field used in the `search` registry context. */
+@Component({
+  selector: 'demo-search-text-field',
+  template: `
+    <div class="search-field">
+      <input
+        [value]="data()?.value ?? ''"
+        [placeholder]="config().placeholder"
+        type="search"
+        (input)="updateValue($any($event.target).value || '')"
+      />
+      <button type="button">{{ config().buttonLabel }}</button>
+    </div>
+  `,
+  styles: `
+    .search-field { display: flex; gap: .5rem; margin-bottom: 1rem; }
+    input { flex: 1; border: 1px solid #a7f3d0; border-radius: 9999px; padding: .4rem .75rem; background: #ecfdf5; }
+    button { border: 1px solid #34d399; border-radius: 9999px; background: #10b981; color: white; padding: .4rem .9rem; cursor: pointer; }
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SearchTextFieldComponent {
+  readonly data = input<SearchFieldData | null>(null);
+  readonly config = input<SearchFieldConfig>({
+    placeholder: 'Search...',
+    buttonLabel: 'Search',
+  });
+  readonly dataChange = output<SearchFieldData>();
+
+  updateValue(value: string): void {
+    this.dataChange.emit({ value });
+  }
+}

package/projects/demo/src/app/components/section-heading.component.ts

@@ -0,0 +1,25 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+} from '@angular/core';
+
+/** A section heading component for grouping form fields. */
+@Component({
+  selector: 'demo-section-heading',
+  template: `<h2 class="section-heading">{{ config()?.title }}</h2>`,
+  styles: `
+    .section-heading {
+      font-size: 1.1rem;
+      font-weight: 700;
+      border-bottom: 2px solid #3b82f6;
+      padding-bottom: .25rem;
+      margin: 1.5rem 0 .75rem;
+      color: #1e40af;
+    }
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SectionHeadingComponent {
+  readonly config = input<{ title: string } | null>(null);
+}

package/projects/demo/src/app/components/select-field.component.ts

@@ -0,0 +1,56 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+} from '@angular/core';
+
+interface SelectFieldData {
+  value: string;
+}
+
+interface SelectFieldConfig {
+  name: string;
+  label: string;
+  options: Array<{ value: string; label: string }>;
+}
+
+/** Editor-style select field that consumes external model data and config. */
+@Component({
+  selector: 'demo-select-field',
+  template: `
+    <div class="field editor-field">
+      <label [for]="config().name">{{ config().label }}</label>
+      <select
+        [id]="config().name"
+        [name]="config().name"
+        [value]="data()?.value ?? ''"
+        (change)="updateValue($any($event.target).value || '')"
+      >
+        <option value="">-- choose --</option>
+        @for (opt of config().options; track opt.value) {
+          <option [value]="opt.value">{{ opt.label }}</option>
+        }
+      </select>
+    </div>
+  `,
+  styles: `
+    .field { margin-bottom: 1rem; }
+    label { display: block; font-weight: 600; margin-bottom: .25rem; color: #1d4ed8; }
+    select { border: 1px solid #93c5fd; border-radius: 4px; padding: .4rem .6rem; width: 100%; box-sizing: border-box; background: #eff6ff; }
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SelectFieldComponent {
+  readonly data = input<SelectFieldData | null>(null);
+  readonly config = input<SelectFieldConfig>({
+    name: 'field',
+    label: 'Field',
+    options: [],
+  });
+  readonly dataChange = output<SelectFieldData>();
+
+  updateValue(value: string): void {
+    this.dataChange.emit({ value });
+  }
+}

package/projects/demo/src/app/components/text-field.component.ts

@@ -0,0 +1,53 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  output,
+} from '@angular/core';
+
+interface TextFieldData {
+  value: string;
+}
+
+interface TextFieldConfig {
+  name: string;
+  label: string;
+  placeholder?: string;
+}
+
+/** Editor-style text field that consumes external model data and config. */
+@Component({
+  selector: 'demo-text-field',
+  template: `
+    <div class="field editor-field">
+      <label [for]="config().name">{{ config().label }}</label>
+      <input
+        [id]="config().name"
+        [name]="config().name"
+        [placeholder]="config().placeholder ?? ''"
+        [value]="data()?.value ?? ''"
+        type="text"
+        (input)="updateValue($any($event.target).value || '')"
+      />
+    </div>
+  `,
+  styles: `
+    .field { margin-bottom: 1rem; }
+    label { display: block; font-weight: 600; margin-bottom: .25rem; color: #1d4ed8; }
+    input { border: 1px solid #93c5fd; border-radius: 4px; padding: .4rem .6rem; width: 100%; box-sizing: border-box; background: #eff6ff; }
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TextFieldComponent {
+  readonly data = input<TextFieldData | null>(null);
+  readonly config = input<TextFieldConfig>({
+    name: 'field',
+    label: 'Field',
+    placeholder: '',
+  });
+  readonly dataChange = output<TextFieldData>();
+
+  updateValue(value: string): void {
+    this.dataChange.emit({ value });
+  }
+}

package/projects/demo/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Demo</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

package/projects/demo/src/main.ts

@@ -0,0 +1,5 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { App } from './app/app';
+
+bootstrapApplication(App, appConfig).catch((err) => console.error(err));

package/projects/demo/src/styles.scss

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

package/projects/demo/tsconfig.app.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.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "types": []
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.spec.ts"]
+}

package/projects/demo/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/projects/dotjem/angular-dynamic-components/README.md

@@ -0,0 +1,5 @@
+# @dotjem/angular-dynamic-components
+
+Dynamic component hosting for Angular 21+ — render UI components configured as plain JSON.
+
+See the [full documentation](https://github.com/dotJEM/angular-dynamic-components#readme) for usage instructions.

package/projects/dotjem/angular-dynamic-components/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/dotjem/angular-dynamic-components",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

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

@@ -0,0 +1,27 @@
+{
+  "name": "@dotjem/angular-dynamic-components",
+  "version": "0.1.0",
+  "description": "Dynamic component hosting for Angular 21+ — render UI components configured as plain JSON.",
+  "keywords": [
+    "angular",
+    "dynamic",
+    "components",
+    "forms",
+    "json",
+    "schema"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dotJEM/angular-dynamic-components.git"
+  },
+  "peerDependencies": {
+    "@angular/common": "^21.2.0",
+    "@angular/core": "^21.2.0",
+    "@angular/forms": "^21.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

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

@@ -0,0 +1,127 @@
+import { TestBed } from '@angular/core/testing';
+import {
+  ComponentRegistry,
+  provideDynamicComponents,
+  DYNAMIC_COMPONENT_REGISTRATIONS,
+} from './component-registry';
+import { Component } from '@angular/core';
+
+@Component({ selector: 'dx-fake-a', template: 'A', standalone: true })
+class FakeComponentA {}
+
+@Component({ selector: 'dx-fake-b', template: 'B', standalone: true })
+class FakeComponentB {}
+
+describe('ComponentRegistry', () => {
+  describe('with no providers', () => {
+    beforeEach(() =>
+      TestBed.configureTestingModule({
+        providers: [ComponentRegistry],
+      })
+    );
+
+    it('should be created', () => {
+      const registry = TestBed.inject(ComponentRegistry);
+      expect(registry).toBeTruthy();
+    });
+
+    it('should return null for unknown types', () => {
+      const registry = TestBed.inject(ComponentRegistry);
+      expect(registry.resolve('unknown')).toBeNull();
+    });
+
+    it('should register and resolve a component', () => {
+      const registry = TestBed.inject(ComponentRegistry);
+      registry.register('fake-a', FakeComponentA);
+      expect(registry.resolve('fake-a')).toBe(FakeComponentA);
+    });
+
+    it('should support same type in different registries', () => {
+      const registry = TestBed.inject(ComponentRegistry);
+      registry.register('text-field', FakeComponentA, 'editor');
+      registry.register('text-field', FakeComponentB, 'search');
+      expect(registry.resolve('text-field', 'editor')).toBe(FakeComponentA);
+      expect(registry.resolve('text-field', 'search')).toBe(FakeComponentB);
+    });
+
+    it('should report has() correctly', () => {
+      const registry = TestBed.inject(ComponentRegistry);
+      expect(registry.has('fake-a')).toBe(false);
+      registry.register('fake-a', FakeComponentA);
+      expect(registry.has('fake-a')).toBe(true);
+    });
+
+    it('should list registered types', () => {
+      const registry = TestBed.inject(ComponentRegistry);
+      registry.register('fake-a', FakeComponentA);
+      registry.register('fake-b', FakeComponentB);
+      expect(registry.types()).toContain('fake-a');
+      expect(registry.types()).toContain('fake-b');
+    });
+
+    it('should throw when registering a duplicate type', () => {
+      const registry = TestBed.inject(ComponentRegistry);
+      registry.register('fake-a', FakeComponentA);
+      expect(() => registry.register('fake-a', FakeComponentA)).toThrow(
+        /already registered/
+      );
+    });
+
+    it('should throw only for duplicates within the same registry', () => {
+      const registry = TestBed.inject(ComponentRegistry);
+      registry.register('fake-a', FakeComponentA, 'editor');
+      expect(() =>
+        registry.register('fake-a', FakeComponentB, 'editor')
+      ).toThrow(/already registered/);
+      expect(() =>
+        registry.register('fake-a', FakeComponentB, 'search')
+      ).not.toThrow();
+    });
+  });
+
+  describe('with provideDynamicComponents()', () => {
+    beforeEach(() =>
+      TestBed.configureTestingModule({
+        providers: [
+          ComponentRegistry,
+          provideDynamicComponents({
+            'fake-a': FakeComponentA,
+            'fake-b': FakeComponentB,
+          }),
+          provideDynamicComponents(
+            {
+              'fake-a': FakeComponentB,
+            },
+            'search'
+          ),
+        ],
+      })
+    );
+
+    it('should resolve pre-registered components', () => {
+      const registry = TestBed.inject(ComponentRegistry);
+      expect(registry.resolve('fake-a')).toBe(FakeComponentA);
+      expect(registry.resolve('fake-b')).toBe(FakeComponentB);
+      expect(registry.resolve('fake-a', 'search')).toBe(FakeComponentB);
+    });
+  });
+
+  describe('provideDynamicComponents()', () => {
+    it('should produce a multi provider for DYNAMIC_COMPONENT_REGISTRATIONS', () => {
+      const provider = provideDynamicComponents({ 'fake-a': FakeComponentA });
+      expect(provider.provide).toBe(DYNAMIC_COMPONENT_REGISTRATIONS);
+      expect(provider.multi).toBe(true);
+    });
+
+    it('should include the registry name in the provider payload', () => {
+      const provider = provideDynamicComponents(
+        { 'fake-a': FakeComponentA },
+        'editor'
+      );
+      expect(provider.useValue.registry).toBe('editor');
+      expect(provider.useValue.components['fake-a'].component).toBe(
+        FakeComponentA
+      );
+    });
+  });
+});

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

@@ -0,0 +1,137 @@
+import { inject, Injectable, InjectionToken, Type } from '@angular/core';
+
+/** Describes a component registration entry inside the registry. */
+export interface ComponentRegistration {
+  /** The Angular component class to instantiate. */
+  component: Type<unknown>;
+}
+
+/** Injection token used to provide component registrations at bootstrap time. */
+export const DYNAMIC_COMPONENT_REGISTRATIONS = new InjectionToken<
+  NamedComponentRegistration[]
+>('DYNAMIC_COMPONENT_REGISTRATIONS');
+
+/** Named registration payload used for bootstrap providers. */
+export interface NamedComponentRegistration {
+  registry: string;
+  components: Record<string, ComponentRegistration>;
+}
+
+/**
+ * Registry service that maps type-string keys to Angular component classes.
+ *
+ * Components are registered either via `provideDynamicComponents()` at
+ * bootstrap time or imperatively via `register()` at runtime.
+ */
+
+@Injectable({ providedIn: 'root' })
+export class ComponentRegistry {
+  private readonly registries = new Map<
+    string,
+    Map<string, ComponentRegistration>
+  >();
+
+  constructor() {
+    const registrations =
+      inject(DYNAMIC_COMPONENT_REGISTRATIONS, { optional: true }) ?? [];
+    for (const namedRegistration of registrations) {
+      const registry = this.ensureRegistry(namedRegistration.registry);
+      for (const [type, reg] of Object.entries(namedRegistration.components)) {
+        registry.set(type, reg);
+      }
+    }
+  }
+
+  /**
+   * Registers a component class under the given `type` key.
+   * Throws if the type is already registered.
+   */
+  register(
+    type: string,
+    component: Type<unknown>,
+    registry = 'default'
+  ): void {
+    const targetRegistry = this.ensureRegistry(registry);
+    if (targetRegistry.has(type)) {
+      throw new Error(
+        `ComponentRegistry: type "${type}" is already registered in registry "${registry}".`
+      );
+    }
+    targetRegistry.set(type, { component });
+  }
+
+  /**
+   * Resolves the component class for the given `type` key.
+   * Returns `null` when the type is not found.
+   */
+  resolve(type: string, registry = 'default'): Type<unknown> | null {
+    return this.registries.get(registry)?.get(type)?.component ?? null;
+  }
+
+  /**
+   * Returns `true` when the given `type` key has a registration.
+   */
+  has(type: string, registry = 'default'): boolean {
+    return this.registries.get(registry)?.has(type) ?? false;
+  }
+
+  /**
+   * Returns all currently registered type keys.
+   */
+  types(registry = 'default'): string[] {
+    return Array.from(this.registries.get(registry)?.keys() ?? []);
+  }
+
+  /** Returns the names of all known registries. */
+  registryNames(): string[] {
+    return Array.from(this.registries.keys());
+  }
+
+  private ensureRegistry(
+    registry: string
+  ): Map<string, ComponentRegistration> {
+    const existing = this.registries.get(registry);
+    if (existing) {
+      return existing;
+    }
+    const created = new Map<string, ComponentRegistration>();
+    this.registries.set(registry, created);
+    return created;
+  }
+}
+
+/**
+ * Helper type used in `provideDynamicComponents()`.
+ */
+export type ComponentMap = Record<string, Type<unknown>>;
+
+/**
+ * Creates an Angular provider that pre-registers a map of components
+ * with the `ComponentRegistry`.
+ *
+ * @example
+ * ```ts
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     provideDynamicComponents({
+ *       'text-input': TextInputComponent,
+ *       'select': SelectComponent,
+ *     }),
+ *   ],
+ * });
+ * ```
+ */
+export function provideDynamicComponents(
+  components: ComponentMap,
+  registry = 'default'
+) {
+  const registrations: Record<string, ComponentRegistration> = {};
+  for (const [type, component] of Object.entries(components)) {
+    registrations[type] = { component };
+  }
+  return {
+    provide: DYNAMIC_COMPONENT_REGISTRATIONS,
+    useValue: { registry, components: registrations },
+    multi: true,
+  };
+}