@dynamic-field-kit/angular 1.2.10 → 1.4.0

package/src/components/DynamicInput.ts

@@ -1,27 +1,45 @@
 import { CommonModule } from '@angular/common';
 import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
   Component,
   ComponentRef,
-  Input,
-  Output,
   EventEmitter,
-  ViewChild,
-  ViewContainerRef,
+  inject,
+  Input,
   OnChanges,
-  AfterViewInit,
   OnDestroy,
+  Output,
   SimpleChanges,
   Type,
-  SimpleChange,
+  ViewChild,
+  ViewContainerRef,
 } from '@angular/core';
-import { fieldRegistry, FieldTypeKey } from '@dynamic-field-kit/core';
+import { FieldTypeKey, Properties } from '@dynamic-field-kit/core';
 import { Subscription } from 'rxjs';
+import { FIELD_REGISTRY } from '../fieldRegistryToken';
 import { BaseInputComponent } from './BaseInput';
 
+// Only the framework-agnostic FieldRendererProps keys. Domain-specific props
+// reach the renderer through `extraProps` (FieldDescription.props) instead.
+const KNOWN_PROPS = [
+  'value',
+  'label',
+  'placeholder',
+  'required',
+  'disabled',
+  'readOnly',
+  'error',
+  'options',
+  'className',
+  'description',
+] as const;
+
 @Component({
   selector: 'dfk-dynamic-input',
   standalone: true,
   imports: [CommonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
   template: `<div #host style="display: contents;"></div>`,
 })
 export class DynamicInput
@@ -29,160 +47,234 @@ export class DynamicInput
   implements OnChanges, AfterViewInit, OnDestroy
 {
   @Input() type!: FieldTypeKey;
-  @Output() override valueChange = new EventEmitter<any>();
-  @Output() onChange = new EventEmitter<any>(); // backward compat
+  // Extra, framework-agnostic props forwarded verbatim to the renderer.
+  @Input() extraProps?: Properties;
+  @Output() override valueChange = new EventEmitter<unknown>();
+  @Output() onChange = new EventEmitter<unknown>();
+
+  private registry = inject(FIELD_REGISTRY);
 
   @ViewChild('host', { read: ViewContainerRef, static: false })
   host!: ViewContainerRef;
-  private compRef?: ComponentRef<any>;
-  private inputInstance?: any;
+  private compRef?: ComponentRef<unknown>;
+  private inputInstance?: unknown;
   private subscriptions: Subscription[] = [];
+  // Tracks which KNOWN_PROPS were actually supplied to DynamicInput (via
+  // SimpleChanges), independent of TS class-field emit. See applyProps.
+  private supplied = new Set<string>();
 
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes['type'] && !changes['type'].firstChange && this.host) {
-      this.render();
-      return;
+  ngOnChanges(changes: SimpleChanges): void {
+    super.ngOnChanges(changes);
+
+    for (const prop of KNOWN_PROPS) {
+      if (changes[prop]) {
+        this.supplied.add(prop);
+      }
     }
 
     if (this.inputInstance) {
-      this.applyKnownProps(this.inputInstance);
-
-      const childChanges: SimpleChanges = {};
-      for (const prop in changes) {
-        childChanges[prop] = new SimpleChange(
-          changes[prop].previousValue,
-          changes[prop].currentValue,
-          changes[prop].firstChange
-        );
-      }
+      this.syncPropsToInstance(changes);
+    }
 
-      this.inputInstance.ngOnChanges?.(childChanges);
-      this.compRef?.changeDetectorRef.detectChanges();
-    } else if (this.host) {
+    if (changes['type'] && !changes['type'].firstChange && this.host) {
+      this.render();
+    } else if (!this.inputInstance && this.host) {
       this.render();
     }
   }
 
-  ngAfterViewInit() {
+  ngAfterViewInit(): void {
     this.render();
   }
 
-  ngOnDestroy() {
+  ngOnDestroy(): void {
+    this.cleanup();
+  }
+
+  private syncPropsToInstance(changes: SimpleChanges): void {
+    if (!this.inputInstance) {
+      return;
+    }
+
+    for (const prop of KNOWN_PROPS) {
+      if (changes[prop] && this.inputInstance) {
+        (this.inputInstance as Record<string, unknown>)[prop] = (
+          this as Record<string, unknown>
+        )[prop];
+      }
+    }
+    if (changes['extraProps']) {
+      this.applyExtraProps(this.inputInstance);
+    }
+    this.compRef?.changeDetectorRef?.detectChanges();
+  }
+
+  private cleanup(): void {
     this.cleanupSubscriptions();
     this.cleanupRenderedComponent();
   }
 
-  private cleanupSubscriptions() {
+  private cleanupSubscriptions(): void {
     this.subscriptions.forEach((s) => s.unsubscribe());
     this.subscriptions = [];
   }
 
-  private render() {
-    const Renderer = fieldRegistry.get(this.type as FieldTypeKey);
-    this.cleanupRenderedComponent();
-    this.cleanupSubscriptions();
+  private cleanupRenderedComponent(): void {
+    this.compRef?.destroy();
+    this.compRef = undefined;
+    this.inputInstance = undefined;
+  }
+
+  private render(): void {
+    const Renderer = this.registry.get(this.type);
+    this.cleanup();
     this.host.clear();
+
     if (!Renderer) {
-      const el = document.createElement('div');
-      el.textContent = `Unknown field type: ${this.type}`;
-      this.host.element.nativeElement.appendChild(el);
+      this.renderError(`Unknown field type: ${this.type}`);
       return;
     }
 
+    if (this.isComponentType(Renderer)) {
+      this.renderComponent(Renderer as unknown as Type<unknown>);
+    } else if (typeof Renderer === 'function') {
+      this.renderFallback(Renderer);
+    } else {
+      this.renderError(`Invalid renderer for type: ${this.type}`);
+    }
+  }
+
+  // Angular component classes carry a static ɵcmp. Checked instead of
+  // reflectComponentType() because the peer range starts at Angular 13 and
+  // reflectComponentType is v14+. Plain function renderers have no ɵcmp and
+  // fall through to renderFallback. Uses hasOwnProperty (not `in`) so a
+  // class that merely extends a component without its own @Component
+  // decorator - and would otherwise inherit the parent's static ɵcmp via the
+  // prototype chain - is not mistaken for a component in its own right.
+  private isComponentType(renderer: unknown): boolean {
+    return (
+      typeof renderer === 'function' &&
+      Object.prototype.hasOwnProperty.call(renderer, 'ɵcmp')
+    );
+  }
+
+  private renderComponent(compType: Type<unknown>): void {
     try {
-      const compType = Renderer as unknown as Type<any>;
       const compRef = this.host.createComponent(compType);
       const instance = compRef.instance;
+
       if (!instance) {
-        throw new Error(`Failed to create instance for ${this.type}`);
+        this.renderError(`Failed to create instance for ${this.type}`);
+        return;
       }
 
-      this.applyKnownProps(instance);
+      this.applyProps(instance);
+      this.bindOutputs(instance);
 
-      const subA = this.bindOutput(instance, 'valueChange');
-      if (subA) {
-        this.subscriptions.push(subA);
-      }
-      const subB = this.bindOutput(instance, 'onValueChange');
-      if (subB) {
-        this.subscriptions.push(subB);
-      }
-
-      instance.changeDetectorRef?.detectChanges();
       this.compRef = compRef;
       this.inputInstance = instance;
       compRef.changeDetectorRef.detectChanges();
-    } catch (err) {
-      // Fallback to function renderer
-      try {
-        const props: any = {
-          value: this.value,
-          onValueChange: (v: any) => this.emitValue(v),
-          label: this.label,
-          placeholder: this.placeholder,
-          required: this.required,
-          options: this.options,
-          className: this.className,
-          description: this.description,
-          disabled: this.disabled,
-          errorMessage: this.errorMessage,
-        };
-        const out = (Renderer as (props: unknown) => unknown)(props);
-        if (typeof out === 'string') {
-          const el = document.createElement('div');
-          el.innerHTML = out;
-          this.host.element.nativeElement.appendChild(el);
-        }
-      } catch (e) {
+    } catch {
+      this.renderError(`Failed to render field: ${this.type}`);
+    }
+  }
+
+  private renderFallback(renderer: unknown): void {
+    try {
+      const props = this.getFallbackProps();
+      const result = (renderer as (props: unknown) => string)(props);
+
+      if (typeof result === 'string') {
         const el = document.createElement('div');
-        el.textContent = `Failed to render field: ${this.type}`;
+        el.innerHTML = result;
         this.host.element.nativeElement.appendChild(el);
       }
+    } catch {
+      this.renderError(`Failed to render field: ${this.type}`);
     }
   }
 
-  private applyKnownProps(instance: any) {
-    const knownProps = [
-      'value',
-      'label',
-      'placeholder',
-      'required',
-      'disabled',
-      'options',
-      'className',
-      'description',
-      'errorMessage',
-    ];
-    for (const prop of knownProps) {
-      if (prop in this && prop in instance) {
-        instance[prop] = (this as any)[prop];
+  private getFallbackProps(): Record<string, unknown> {
+    return {
+      ...this.extraProps,
+      value: this.value,
+      onValueChange: (v: unknown) => this.emitValue(v),
+      label: this.label ?? '',
+      placeholder: this.placeholder ?? '',
+      required: this.required ?? false,
+      disabled: this.disabled ?? false,
+      readOnly: this.readOnly ?? false,
+      error: this.error,
+      options: this.options ?? [],
+      className: this.className ?? '',
+      description: this.description ?? '',
+    };
+  }
+
+  // Gates on `this.supplied` (populated from SimpleChanges in ngOnChanges),
+  // not on `prop in instanceObj` or `prop in this`. Both `in` checks test a
+  // TypeScript class-field emit artifact rather than intent: whether a
+  // property slot exists at runtime depends on the compile target
+  // (useDefineForClassFields is false below ES2022, true at ES2022+), so the
+  // same source can behave oppositely between this package's test build and
+  // its shipped ES2022 bundle, where every declared field is always an own
+  // property. `this.supplied` instead reflects only whether Angular ever
+  // fired a SimpleChange for that input, i.e. whether the prop was *bound*
+  // at all - it skips only props DynamicInput was never given a binding
+  // for. It is NOT a general "renderer defaults survive" guarantee: Angular
+  // fires a firstChange SimpleChange for every bound input even when the
+  // bound value is undefined, and FieldInput's template binds all
+  // KNOWN_PROPS unconditionally, so on the real
+  // MultiFieldInput -> FieldInput -> DynamicInput path every prop counts as
+  // supplied and renderer-side defaults (e.g. `@Input() label = 'None'`)
+  // are still overwritten with undefined. This only helps when DynamicInput
+  // is mounted directly with some inputs left unbound.
+  private applyProps(instance: unknown): void {
+    const instanceObj = instance as Record<string, unknown>;
+    for (const prop of KNOWN_PROPS) {
+      if (this.supplied.has(prop)) {
+        instanceObj[prop] = (this as Record<string, unknown>)[prop];
       }
     }
+    this.applyExtraProps(instance);
   }
 
-  private bindOutput(
-    instance: any,
-    outputName: 'valueChange' | 'onValueChange'
-  ): Subscription | undefined {
-    const output = instance?.[outputName];
-    if (!output || typeof output.subscribe !== 'function') {
+  private applyExtraProps(instance: unknown): void {
+    if (!instance || !this.extraProps) {
       return;
     }
+    const instanceObj = instance as Record<string, unknown>;
+    for (const [key, value] of Object.entries(this.extraProps)) {
+      instanceObj[key] = value;
+    }
+  }
+
+  private bindOutputs(instance: unknown): void {
+    const outputNames: Array<'valueChange' | 'onValueChange'> = [
+      'valueChange',
+      'onValueChange',
+    ];
 
-    const sub = (output as EventEmitter<any>).subscribe((value) => {
-      this.emitValue(value);
-    });
-    return sub;
+    for (const outputName of outputNames) {
+      const output = (instance as Record<string, unknown>)[outputName];
+      if (output && typeof output === 'object' && 'subscribe' in output) {
+        const sub = (
+          output as { subscribe: (cb: (v: unknown) => void) => Subscription }
+        ).subscribe((value: unknown) => this.emitValue(value));
+        this.subscriptions.push(sub);
+      }
+    }
   }
 
-  private emitValue(value: any) {
+  private emitValue(value: unknown): void {
     this.valueChange.emit(value);
     this.onChange.emit(value);
   }
 
-  private cleanupRenderedComponent() {
-    this.compRef?.destroy();
-    this.compRef = undefined;
-    this.inputInstance = undefined;
+  private renderError(message: string): void {
+    const el = document.createElement('div');
+    el.textContent = message;
+    el.style.color = 'red';
+    this.host.element.nativeElement.appendChild(el);
   }
 }

package/src/components/FieldInput.ts

@@ -1,49 +1,74 @@
 import { NgIf } from '@angular/common';
-import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { FieldDescription, Properties } from '@dynamic-field-kit/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import { FieldDescription } from '@dynamic-field-kit/core';
 import { DynamicInput } from './DynamicInput';
 
 @Component({
   selector: 'dfk-field-input',
   standalone: true,
   imports: [NgIf, DynamicInput],
+  changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <dfk-dynamic-input
-      *ngIf="fieldDescription && renderInfos"
+      *ngIf="shouldRender"
       [type]="fieldDescription!.type"
-      [value]="getFieldValue()"
+      [value]="value"
       [label]="fieldDescription!.label"
       [placeholder]="fieldDescription!.placeholder"
       [required]="fieldDescription!.required"
-      [description]="fieldDescription!.description"
-      [options]="fieldDescription!.options"
+      [description]="$any(fieldDescription!.description)"
+      [options]="resolvedOptions"
       [className]="fieldDescription!.className"
       (valueChange)="
         onValueChangeField.emit({ value: $event, key: fieldDescription!.name })
       "
-      [disabled]="false"
-      [errorMessage]="''"
+      [disabled]="disabled"
+      [readOnly]="readOnly"
+      [error]="$any(error)"
+      [extraProps]="fieldDescription!.props"
     ></dfk-dynamic-input>
   `,
 })
-export class FieldInput {
+export class FieldInput implements OnChanges {
   @Input() fieldDescription?: FieldDescription;
-  @Input() renderInfos?: Properties;
+  @Input() value?: unknown;
+  @Input() options?: Record<string, unknown>[];
+  @Input() disabled?: boolean;
+  @Input() readOnly?: boolean;
+  @Input() error?: string | string[];
   @Output() onValueChangeField = new EventEmitter<{
-    value: any;
+    value: unknown;
     key: string;
   }>();
 
-  getFieldValue() {
-    if (!this.fieldDescription || !this.renderInfos) {
+  shouldRender = false;
+
+  get resolvedOptions(): Record<string, unknown>[] | undefined {
+    if (this.options) {
+      return this.options;
+    }
+    if (!this.fieldDescription?.options) {
       return undefined;
     }
-
-    const value = this.renderInfos[this.fieldDescription.name];
-    if (value === undefined && this.fieldDescription.type === 'text') {
-      return '';
+    if (typeof this.fieldDescription.options === 'function') {
+      return undefined;
     }
+    return this.fieldDescription.options;
+  }
+
+  constructor(private cdr: ChangeDetectorRef) {}
 
-    return value;
+  ngOnChanges(_changes: SimpleChanges): void {
+    this.shouldRender = !!this.fieldDescription;
+    this.cdr.markForCheck();
   }
 }