@dotjem/angular-dynamic-components 0.0.1

package/.editorconfig

@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/.github/workflows/ci-publish.yml

@@ -0,0 +1,113 @@
+name: CI and Publish
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: read
+
+jobs:
+  verify:
+    name: Build, Test and Report
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm test
+
+      - name: Build library
+        run: npm run build
+
+      - name: Upload build artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: dotjem-angular-dynamic-components-dist
+          path: dist/dotjem/angular-dynamic-components
+          if-no-files-found: error
+
+  publish:
+    name: Publish to npm
+    runs-on: ubuntu-latest
+    needs: verify
+    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+    env:
+      LIB_PACKAGE_DIR: projects/dotjem/angular-dynamic-components
+      LIB_DIST_DIR: dist/dotjem/angular-dynamic-components
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js for npm publish
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+          registry-url: https://registry.npmjs.org
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Calculate Version Parameters
+        id: version
+        run: |
+          set -euo pipefail
+          build="${GITHUB_RUN_NUMBER}"
+          template="$(node -p "require('./${LIB_PACKAGE_DIR}/package.json').version")"
+          shortsha="$(git rev-parse --short "${GITHUB_SHA}")"
+          base="$(node - "$template" "$build" <<'NODE'
+          const template = process.argv[2];
+          const build = process.argv[3];
+          const parts = template.split('.');
+          const index = parts.indexOf('build');
+
+          if (index >= 0) {
+            parts[index] = build;
+            process.stdout.write(parts.join('.'));
+          } else {
+            process.stdout.write(`${template}-${build}`);
+          }
+          NODE
+          )"
+          publish_version="${base}+sha.${shortsha}"
+
+          echo "template=$template" >> "$GITHUB_OUTPUT"
+          echo "shortsha=$shortsha" >> "$GITHUB_OUTPUT"
+          echo "publish_version=$publish_version" >> "$GITHUB_OUTPUT"
+
+          {
+            echo "### Version Parameters"
+            echo "- template: \`$template\`"
+            echo "- run number: \`$build\`"
+            echo "- short sha: \`$shortsha\`"
+            echo "- publish version: \`$publish_version\`"
+          } >> "$GITHUB_STEP_SUMMARY"
+
+      - name: Set package version
+        run: |
+          npm pkg set version="${{ steps.version.outputs.publish_version }}" --prefix "${LIB_PACKAGE_DIR}"
+
+      - name: Build library
+        run: npm run build
+
+      - name: Set dist package version
+        run: |
+          npm pkg set version="${{ steps.version.outputs.publish_version }}" --prefix "${LIB_DIST_DIR}"
+
+      - name: Publish package
+        run: npm publish "./${LIB_DIST_DIR}" --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH }}

package/.prettierrc

@@ -0,0 +1,12 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "angular"
+      }
+    }
+  ]
+}

package/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

package/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

package/.vscode/mcp.json

@@ -0,0 +1,9 @@
+{
+  // For more information, visit: https://angular.dev/ai/mcp
+  "servers": {
+    "angular-cli": {
+      "command": "npx",
+      "args": ["-y", "@angular/cli", "mcp"]
+    }
+  }
+}

package/.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "Changes detected"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation (complete|failed)"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "Changes detected"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation (complete|failed)"
+          }
+        }
+      }
+    }
+  ]
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 dotJEM
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,153 @@
+# @dotjem/angular-dynamic-components
+
+> Dynamic component hosting for Angular 21+ — render registered components configured as plain JSON.
+
+Use `dx-dynamic-component-host` directly and let your application own iteration, data mapping, and configuration shape.
+
+---
+
+## Installation
+
+```bash
+npm install @dotjem/angular-dynamic-components
+```
+
+> **Peer dependencies:** `@angular/core ^21`, `@angular/common ^21`, `@angular/forms ^21`
+
+---
+
+## Quick start
+
+### 1. Register your components
+
+In your `app.config.ts` (or any `providers` array) call `provideDynamicComponents()`:
+
+```ts
+import { provideDynamicComponents } from '@dotjem/angular-dynamic-components';
+import { TextFieldComponent } from './fields/text-field.component';
+import { SelectFieldComponent } from './fields/select-field.component';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideDynamicComponents(
+      {
+        'text-field': TextFieldComponent,
+        'select-field': SelectFieldComponent,
+      },
+      'editor'
+    ),
+    provideDynamicComponents(
+      {
+        'text-field': SearchTextFieldComponent,
+      },
+      'search'
+    ),
+  ],
+};
+```
+
+### 2. Describe your UI as configuration entries
+
+```ts
+type DynamicConfiguration = {
+  type: string;
+  field?: string;
+  config: Record<string, unknown>;
+};
+
+const editorConfigurations: DynamicConfiguration[] = [
+  { type: 'section-heading', config: { title: 'Personal Information' } },
+  {
+    type: 'text-field',
+    field: 'firstName',
+    config: { name: 'firstName', label: 'First name', placeholder: 'Jane' },
+  },
+];
+
+let editorData: Record<string, unknown> = {
+  firstName: { value: 'Jane' },
+};
+```
+
+### 3. Render with `<dx-dynamic-component-host>`
+
+```html
+@for (entry of editorConfigurations; track $index) {
+  <dx-dynamic-component-host
+    [component]="entry.type"
+    registry="editor"
+    [data]="entry.field ? editorData[entry.field] : undefined"
+    [config]="entry.config"
+    (dataChange)="onFieldChange(entry.field, $event)"
+  />
+}
+```
+
+---
+
+## API
+
+### `ComponentRegistry`
+
+Injectable service. Use it when you need to register components imperatively:
+
+```ts
+import { ComponentRegistry } from '@dotjem/angular-dynamic-components';
+
+export class SomeModule {
+  constructor(registry: ComponentRegistry) {
+    registry.register('my-widget', MyWidgetComponent);
+  }
+}
+```
+
+| Method | Description |
+|---|---|
+| `register(type, component, registry?)` | Register a component in a named registry (`default` if omitted). |
+| `resolve(type, registry?)` | Returns the component class or `null` in the selected registry. |
+| `has(type, registry?)` | Returns `true` if the type is registered in the selected registry. |
+| `types(registry?)` | Returns registered type keys for the selected registry. |
+| `registryNames()` | Returns all known registry names. |
+
+### `provideDynamicComponents(map, registry?)`
+
+Creates an Angular multi-provider that pre-populates a named registry at bootstrap time.
+
+### `<dx-dynamic-component-host [component]="...">`
+
+Renders the single component described by a registered component key.
+Accepts host-level `[data]` and `[config]` inputs.
+Re-emits the rendered component's `dataChange` so `[(data)]`-style flows work naturally.
+
+---
+
+## Demo application
+
+```bash
+# Build the library first
+npm run build
+
+# Serve the demo app
+npm start
+```
+
+---
+
+## Development
+
+```bash
+# Run library unit tests
+npm test
+
+# Build the library
+npm run build
+
+# Build the demo application
+npm run build:demo
+```
+
+---
+
+## License
+
+MIT

package/angular.json

@@ -0,0 +1,102 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "packageManager": "npm"
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "@dotjem/angular-dynamic-components": {
+      "projectType": "library",
+      "root": "projects/dotjem/angular-dynamic-components",
+      "sourceRoot": "projects/dotjem/angular-dynamic-components/src",
+      "prefix": "dotjem",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:ng-packagr",
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/dotjem/angular-dynamic-components/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/dotjem/angular-dynamic-components/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular/build:unit-test",
+          "options": {
+            "tsConfig": "projects/dotjem/angular-dynamic-components/tsconfig.spec.json"
+          }
+        }
+      }
+    },
+    "demo": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "projects/demo",
+      "sourceRoot": "projects/demo/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "browser": "projects/demo/src/main.ts",
+            "tsConfig": "projects/demo/tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "projects/demo/public"
+              }
+            ],
+            "styles": ["projects/demo/src/styles.scss"]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "demo:build:production"
+            },
+            "development": {
+              "buildTarget": "demo:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "test": {
+          "builder": "@angular/build:unit-test"
+        }
+      }
+    }
+  }
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@dotjem/angular-dynamic-components",
+  "version": "0.0.1",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve demo",
+    "build": "ng build @dotjem/angular-dynamic-components",
+    "build:demo": "ng build demo",
+    "watch": "ng build @dotjem/angular-dynamic-components --watch --configuration development",
+    "test": "ng test @dotjem/angular-dynamic-components",
+    "test:demo": "ng test demo"
+  },
+  "packageManager": "npm@10.8.2",
+  "dependencies": {
+    "@angular/common": "^21.2.0",
+    "@angular/compiler": "^21.2.0",
+    "@angular/core": "^21.2.0",
+    "@angular/forms": "^21.2.0",
+    "@angular/platform-browser": "^21.2.0",
+    "@angular/router": "^21.2.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@angular/build": "^21.2.11",
+    "@angular/cli": "^21.2.11",
+    "@angular/compiler-cli": "^21.2.0",
+    "jsdom": "^28.0.0",
+    "ng-packagr": "^21.2.0",
+    "prettier": "^3.8.1",
+    "typescript": "~5.9.2",
+    "vitest": "^4.0.8"
+  }
+}

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

@@ -0,0 +1,30 @@
+import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { provideDynamicComponents } from '@dotjem/angular-dynamic-components';
+
+import { routes } from './app.routes';
+import { TextFieldComponent } from './components/text-field.component';
+import { SelectFieldComponent } from './components/select-field.component';
+import { SectionHeadingComponent } from './components/section-heading.component';
+import { SearchTextFieldComponent } from './components/search-text-field.component';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideRouter(routes),
+    provideDynamicComponents(
+      {
+        'text-field': TextFieldComponent,
+        'select-field': SelectFieldComponent,
+        'section-heading': SectionHeadingComponent,
+      },
+      'editor'
+    ),
+    provideDynamicComponents(
+      {
+        'text-field': SearchTextFieldComponent,
+      },
+      'search'
+    ),
+  ],
+};

package/projects/demo/src/app/app.html

@@ -0,0 +1,41 @@
+<div class="page">
+  <header>
+    <h1>&#64;dotjem/angular-dynamic-components</h1>
+    <p>Consumer-driven rendering with component/config entries and record-based model data.</p>
+  </header>
+
+  <main>
+    <section class="panel">
+      <h2>Editor form registry</h2>
+      @for (entry of editorConfigurations; track $index) {
+        <dx-dynamic-component-host
+          [component]="entry.type"
+          registry="editor"
+          [data]="entry.field ? editorData[entry.field] : undefined"
+          [config]="entry.config"
+          (dataChange)="handleEditorDataChange(entry.field, $event)"
+        />
+      }
+    </section>
+
+    <section class="panel">
+      <h2>Search form registry</h2>
+      @for (entry of searchConfigurations; track $index) {
+        <dx-dynamic-component-host
+          [component]="entry.type"
+          registry="search"
+          [data]="entry.field ? searchData[entry.field] : undefined"
+          [config]="entry.config"
+          (dataChange)="handleSearchDataChange(entry.field, $event)"
+        />
+      }
+    </section>
+  </main>
+
+  <footer>
+    <p>Configuration JSON:</p>
+    <pre>{{ configurationJson }}</pre>
+    <p>Data JSON:</p>
+    <pre>{{ dataJson }}</pre>
+  </footer>
+</div>

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

@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];

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

@@ -0,0 +1,27 @@
+import { TestBed } from '@angular/core/testing';
+import { App } from './app';
+import { appConfig } from './app.config';
+
+describe('App', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [App],
+      providers: [...appConfig.providers],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(App);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it('should render the library name in the heading', async () => {
+    const fixture = TestBed.createComponent(App);
+    await fixture.whenStable();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain(
+      '@dotjem/angular-dynamic-components'
+    );
+  });
+});