@signaltree/ng-forms 7.3.0 → 7.3.1

package/README.md

@@ -77,11 +77,14 @@ class CheckoutComponent {
 ### form() alone (no ng-forms needed)
 
 ```typescript
+import { signalTree, form } from '@signaltree/core';
+import { email } from '@signaltree/ng-forms';
+
 // Pure signal forms - works without Angular forms module
 const tree = signalTree({
   login: form({
     initial: { email: '', password: '' },
-    validators: { email: validators.email() },
+    validators: { email: email() },
   }),
 });
 
@@ -137,9 +140,9 @@ pnpm add @signaltree/core @signaltree/ng-forms
 
 ```typescript
 import { Component } from '@angular/core';
-import { createFormTree, validators } from '@signaltree/ng-forms';
+import { createFormTree, required, email } from '@signaltree/ng-forms';
 
-interface ProfileForm {
+interface ProfileForm extends Record<string, unknown> {
   name: string;
   email: string;
   marketing: boolean;
@@ -182,9 +185,9 @@ export class ProfileFormComponent {
       persistKey: 'profile-form',
       storage: this.storage,
       fieldConfigs: {
-        name: { validators: validators.required('Name is required') },
+        name: { validators: [required('Name is required')] },
         email: {
-          validators: [validators.required(), validators.email()],
+          validators: [required(), email()],
           debounceMs: 150,
         },
       },
@@ -256,8 +259,8 @@ class CheckoutComponent {
   }, {
     persistKey: 'checkout-draft',
     fieldConfigs: {
-      'shipping.zip': { validators: validators.zipCode() },
-      'payment.card': { validators: validators.creditCard(), debounceMs: 300 }
+      'shipping.zip': { validators: [(v) => /^\d{5}$/.test(String(v)) ? null : 'Invalid ZIP'] },
+      'payment.card': { validators: [(v) => /^\d{13,19}$/.test(String(v)) ? null : 'Invalid card'], debounceMs: 300 }
     }
   });
 
@@ -287,7 +290,7 @@ const checkout = createFormTree(initialState, {
   },
   fieldConfigs: {
     'payment.card.number': { debounceMs: 200 },
-    'preferences.*': { validators: validators.required() },
+    'preferences.*': { validators: [required()] },
   },
   conditionals: [
     {
@@ -399,7 +402,7 @@ Use `SignalValueDirective` to keep standalone signals and `ngModel` fields align
 ### Before (deprecated)
 
 ```typescript
-import { createFormTree } from '@signaltree/ng-forms';
+import { createFormTree, email } from '@signaltree/ng-forms';
 
 const form = createFormTree(
   {
@@ -407,7 +410,7 @@ const form = createFormTree(
     email: '',
   },
   {
-    validators: { email: validators.email() },
+    validators: { email: email() },
     persistKey: 'profile-form',
   }
 );
@@ -421,12 +424,12 @@ form.form; // FormGroup
 
 ```typescript
 import { signalTree, form } from '@signaltree/core';
-import { formBridge } from '@signaltree/ng-forms';
+import { formBridge, email } from '@signaltree/ng-forms';
 
 const tree = signalTree({
   profile: form({
     initial: { name: '', email: '' },
-    validators: { email: validators.email() },
+    validators: { email: email() },
     persist: 'profile-form',
   }),
 }).with(formBridge());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signaltree/ng-forms",
-  "version": "7.3.0",
+  "version": "7.3.1",
   "description": "Angular forms as reactive JSON. Seamless SignalTree integration with FormTree creation, validators, and form state tracking.",
   "license": "MIT",
   "type": "module",

package/dist/enhancer/form-bridge.js

@@ -1,194 +0,0 @@
-import { inject, DestroyRef, computed } from '@angular/core';
-import { FormControl, FormArray, FormGroup } from '@angular/forms';
-
-function findFormSignals(node, path, results) {
-  if (node === null || node === undefined) return;
-  const hasForm = (typeof node === 'function' || typeof node === 'object') && node !== null && '$' in node && 'valid' in node && 'dirty' in node && 'validate' in node;
-  if (hasForm && typeof node.validate === 'function') {
-    results.push({
-      path,
-      formSignal: node
-    });
-    return;
-  }
-  if (typeof node === 'function' || typeof node === 'object') {
-    const entries = Object.entries(node);
-    for (const [key, value] of entries) {
-      if (key.startsWith('_') || key === 'set' || key === 'update') continue;
-      const childPath = path ? `${path}.${key}` : key;
-      findFormSignals(value, childPath, results);
-    }
-  }
-}
-function createFormGroupBridge(formSignal, config, cleanupCallbacks) {
-  const values = formSignal();
-  const formGroup = createFormGroupFromValues(values, config.fieldConfigs || {});
-  const angularErrors = computed(() => {
-    const result = {};
-    collectControlErrors(formGroup, '', result);
-    return result;
-  });
-  const asyncPending = computed(() => formGroup.pending);
-  const syncSignalToControl = () => {
-    const currentValues = formSignal();
-    patchFormGroupValues(formGroup, currentValues);
-  };
-  const syncControlToSignal = () => {
-    const formValues = formGroup.getRawValue();
-    formSignal.set(formValues);
-  };
-  const subscription = formGroup.valueChanges.subscribe(() => {
-    syncControlToSignal();
-  });
-  cleanupCallbacks.push(() => subscription.unsubscribe());
-  syncSignalToControl();
-  if (config.conditionals && config.conditionals.length > 0) {
-    const conditionalState = new Map();
-    const applyConditionals = () => {
-      const values = formGroup.getRawValue();
-      for (const {
-        when,
-        fields
-      } of config.conditionals) {
-        let visible = true;
-        try {
-          visible = when(values);
-        } catch {
-          visible = true;
-        }
-        for (const fieldPath of fields) {
-          const control = formGroup.get(fieldPath);
-          if (!control) continue;
-          const previous = conditionalState.get(fieldPath);
-          if (previous === visible) continue;
-          conditionalState.set(fieldPath, visible);
-          if (visible) {
-            control.enable({
-              emitEvent: true
-            });
-          } else {
-            control.disable({
-              emitEvent: false
-            });
-          }
-        }
-      }
-    };
-    applyConditionals();
-    const condSub = formGroup.valueChanges.subscribe(() => applyConditionals());
-    cleanupCallbacks.push(() => condSub.unsubscribe());
-  }
-  return {
-    formGroup,
-    formControl: path => {
-      const control = formGroup.get(path);
-      return control instanceof FormControl ? control : null;
-    },
-    angularErrors,
-    asyncPending
-  };
-}
-function createFormGroupFromValues(values, fieldConfigs, basePath = '') {
-  const controls = {};
-  for (const [key, value] of Object.entries(values)) {
-    const path = basePath ? `${basePath}.${key}` : key;
-    const fieldConfig = fieldConfigs[path] || {};
-    if (Array.isArray(value)) {
-      const arrayControls = value.map((item, index) => {
-        if (typeof item === 'object' && item !== null) {
-          return createFormGroupFromValues(item, fieldConfigs, `${path}.${index}`);
-        }
-        return new FormControl(item);
-      });
-      controls[key] = new FormArray(arrayControls);
-    } else if (typeof value === 'object' && value !== null) {
-      controls[key] = createFormGroupFromValues(value, fieldConfigs, path);
-    } else {
-      const validators = fieldConfig.validators ? Array.isArray(fieldConfig.validators) ? fieldConfig.validators : [fieldConfig.validators] : [];
-      const asyncValidators = fieldConfig.asyncValidators ? Array.isArray(fieldConfig.asyncValidators) ? fieldConfig.asyncValidators : [fieldConfig.asyncValidators] : [];
-      controls[key] = new FormControl(value, {
-        validators,
-        asyncValidators
-      });
-    }
-  }
-  return new FormGroup(controls);
-}
-function patchFormGroupValues(group, values, basePath) {
-  for (const [key, value] of Object.entries(values)) {
-    const control = group.get(key);
-    if (!control) continue;
-    if (control instanceof FormGroup && typeof value === 'object' && value !== null) {
-      patchFormGroupValues(control, value);
-    } else if (control instanceof FormArray && Array.isArray(value)) {
-      control.clear({
-        emitEvent: false
-      });
-      for (const item of value) {
-        if (typeof item === 'object' && item !== null) {
-          control.push(createFormGroupFromValues(item, {}));
-        } else {
-          control.push(new FormControl(item));
-        }
-      }
-    } else {
-      control.setValue(value, {
-        emitEvent: false
-      });
-    }
-  }
-}
-function collectControlErrors(control, path, result) {
-  if (control.errors) {
-    result[path || 'root'] = control.errors;
-  }
-  if (control instanceof FormGroup) {
-    for (const [key, child] of Object.entries(control.controls)) {
-      collectControlErrors(child, path ? `${path}.${key}` : key, result);
-    }
-  } else if (control instanceof FormArray) {
-    control.controls.forEach((child, index) => {
-      collectControlErrors(child, `${path}.${index}`, result);
-    });
-  }
-}
-function formBridge(config = {}) {
-  return tree => {
-    const cleanupCallbacks = [];
-    const formBridgeMap = new Map();
-    const formLocations = [];
-    findFormSignals(tree.$, '', formLocations);
-    for (const {
-      path,
-      formSignal
-    } of formLocations) {
-      const bridge = createFormGroupBridge(formSignal, config, cleanupCallbacks);
-      formBridgeMap.set(path, bridge);
-      formSignal['formGroup'] = bridge.formGroup;
-      formSignal['formControl'] = bridge.formControl;
-      formSignal['angularErrors'] = bridge.angularErrors;
-      formSignal['asyncPending'] = bridge.asyncPending;
-    }
-    const destroyRef = config.destroyRef ?? tryInjectDestroyRef();
-    if (destroyRef) {
-      destroyRef.onDestroy(() => {
-        cleanupCallbacks.forEach(fn => fn());
-      });
-    }
-    const enhanced = tree;
-    enhanced.formBridge = formBridgeMap;
-    enhanced.getAngularForm = function (path) {
-      return formBridgeMap.get(path) ?? null;
-    };
-    return enhanced;
-  };
-}
-function tryInjectDestroyRef() {
-  try {
-    return inject(DestroyRef);
-  } catch {
-    return undefined;
-  }
-}
-
-export { formBridge };

package/dist/enhancer/index.js

@@ -1,2 +0,0 @@
-export { formBridge } from './form-bridge.js';
-export { FORM_MARKER, isFormMarker } from '@signaltree/core';

package/dist/index.js

@@ -1,5 +0,0 @@
-export * from './core/ng-forms.js';
-export * from './core/validators.js';
-export * from './core/async-validators.js';
-export * from './history/index.js';
-export * from './enhancer/index.js';

package/src/audit/audit.d.ts

@@ -1,21 +0,0 @@
-import type { ISignalTree } from '@signaltree/core';
-export interface AuditEntry<T = unknown> {
-    timestamp: number;
-    changes: Partial<T>;
-    previousValues?: Partial<T>;
-    metadata?: AuditMetadata;
-}
-export interface AuditMetadata {
-    userId?: string;
-    source?: string;
-    description?: string;
-    [key: string]: unknown;
-}
-export interface AuditTrackerConfig<T> {
-    getMetadata?: () => AuditMetadata;
-    includePreviousValues?: boolean;
-    filter?: (changes: Partial<T>) => boolean;
-    maxEntries?: number;
-}
-export declare function createAuditTracker<T extends Record<string, unknown>>(tree: ISignalTree<T>, auditLog: AuditEntry<T>[], config?: AuditTrackerConfig<T>): () => void;
-export declare function createAuditCallback<T extends Record<string, unknown>>(auditLog: AuditEntry<T>[], getMetadata?: () => AuditMetadata): (previousState: T, currentState: T) => void;

package/src/audit/index.d.ts

@@ -1 +0,0 @@
-export { createAuditTracker, createAuditCallback, type AuditEntry, type AuditMetadata, type AuditTrackerConfig, } from './audit.js';

package/src/core/async-validators.d.ts

@@ -1,3 +0,0 @@
-import type { FormTreeAsyncValidatorFn } from './ng-forms';
-export declare function unique(checkFn: (value: unknown) => Promise<boolean>, message?: string): FormTreeAsyncValidatorFn<unknown>;
-export declare function debounce(validator: FormTreeAsyncValidatorFn<unknown>, delayMs: number): FormTreeAsyncValidatorFn<unknown>;

package/src/core/ng-forms.d.ts

@@ -1,90 +0,0 @@
-import { DestroyRef, EventEmitter, OnInit, Signal, WritableSignal } from '@angular/core';
-import { AbstractControl, ControlValueAccessor, FormArray, FormGroup } from '@angular/forms';
-import { Observable } from 'rxjs';
-import type { ISignalTree, TreeConfig, TreeNode } from '@signaltree/core';
-export type FormTreeAsyncValidatorFn<T> = (value: T) => Observable<string | null> | Promise<string | null>;
-export type EnhancedArraySignal<T> = WritableSignal<T[]> & {
-    push: (item: T) => void;
-    removeAt: (index: number) => void;
-    setAt: (index: number, value: T) => void;
-    insertAt: (index: number, item: T) => void;
-    move: (from: number, to: number) => void;
-    clear: () => void;
-};
-export type FieldValidator = (value: unknown) => string | null;
-export interface FieldConfig {
-    debounceMs?: number;
-    validators?: Record<string, FieldValidator> | FieldValidator[];
-    asyncValidators?: Record<string, FormTreeAsyncValidatorFn<unknown>> | Array<FormTreeAsyncValidatorFn<unknown>>;
-}
-export interface ConditionalField<T> {
-    when: (values: T) => boolean;
-    fields: string[];
-}
-export interface FormTreeOptions<T extends Record<string, unknown>> extends TreeConfig {
-    validators?: SyncValidatorMap;
-    asyncValidators?: AsyncValidatorMap;
-    destroyRef?: DestroyRef;
-    fieldConfigs?: Record<string, FieldConfig>;
-    conditionals?: Array<ConditionalField<T>>;
-    persistKey?: string;
-    storage?: Pick<Storage, 'getItem' | 'setItem' | 'removeItem'>;
-    persistDebounceMs?: number;
-    validationBatchMs?: number;
-}
-export type FormTree<T extends Record<string, unknown>> = {
-    state: TreeNode<T>;
-    $: TreeNode<T>;
-    form: FormGroup;
-    errors: WritableSignal<Record<string, string>>;
-    asyncErrors: WritableSignal<Record<string, string>>;
-    touched: WritableSignal<Record<string, boolean>>;
-    asyncValidating: WritableSignal<Record<string, boolean>>;
-    dirty: WritableSignal<boolean>;
-    valid: WritableSignal<boolean>;
-    submitting: WritableSignal<boolean>;
-    unwrap(): T;
-    setValue(field: string, value: unknown): void;
-    setValues(values: Partial<T>): void;
-    reset(): void;
-    submit<TResult>(submitFn: (values: T) => Promise<TResult>): Promise<TResult>;
-    validate(field?: string): Promise<void>;
-    getFieldError(field: string): Signal<string | undefined>;
-    getFieldAsyncError(field: string): Signal<string | undefined>;
-    getFieldTouched(field: string): Signal<boolean | undefined>;
-    isFieldValid(field: string): Signal<boolean>;
-    isFieldAsyncValidating(field: string): Signal<boolean | undefined>;
-    fieldErrors: Record<string, Signal<string | undefined>>;
-    fieldAsyncErrors: Record<string, Signal<string | undefined>>;
-    values: ISignalTree<T>;
-    destroy(): void;
-};
-export declare class FormValidationError extends Error {
-    readonly errors: Record<string, string>;
-    readonly asyncErrors: Record<string, string>;
-    constructor(errors: Record<string, string>, asyncErrors: Record<string, string>);
-}
-type SyncValidatorMap = Record<string, (value: unknown) => string | null>;
-type AsyncValidatorMap = Record<string, FormTreeAsyncValidatorFn<unknown>>;
-export declare function createFormTree<T extends Record<string, unknown>>(initialValues: T, config?: FormTreeOptions<T>): FormTree<T>;
-export declare function createVirtualFormArray<T>(items: T[], visibleRange: {
-    start: number;
-    end: number;
-}, controlFactory?: (value: T, index: number) => AbstractControl): FormArray;
-export declare class SignalValueDirective implements ControlValueAccessor, OnInit {
-    signalTreeSignalValue: WritableSignal<unknown>;
-    signalTreeSignalValueChange: EventEmitter<unknown>;
-    private elementRef;
-    private renderer;
-    private onChange;
-    private onTouched;
-    ngOnInit(): void;
-    handleChange(event: Event): void;
-    handleBlur(): void;
-    writeValue(value: unknown): void;
-    registerOnChange(fn: (value: unknown) => void): void;
-    registerOnTouched(fn: () => void): void;
-    setDisabledState?(isDisabled: boolean): void;
-}
-export declare const SIGNAL_FORM_DIRECTIVES: (typeof SignalValueDirective)[];
-export {};

package/src/core/validators.d.ts

@@ -1,9 +0,0 @@
-import type { FieldValidator } from './ng-forms';
-export declare function required(message?: string): FieldValidator;
-export declare function email(message?: string): FieldValidator;
-export declare function minLength(min: number, message?: string): FieldValidator;
-export declare function maxLength(max: number, message?: string): FieldValidator;
-export declare function pattern(regex: RegExp, message?: string): FieldValidator;
-export declare function min(min: number, message?: string): FieldValidator;
-export declare function max(max: number, message?: string): FieldValidator;
-export declare function compose(validators: FieldValidator[]): FieldValidator;

package/src/enhancer/form-bridge.d.ts

@@ -1,30 +0,0 @@
-import { DestroyRef, Signal } from '@angular/core';
-import { AsyncValidatorFn, FormControl, FormGroup, ValidationErrors, ValidatorFn } from '@angular/forms';
-import { ISignalTree } from '@signaltree/core';
-export interface AngularConditionalField<T = unknown> {
-    when: (values: T) => boolean;
-    fields: string[];
-}
-export interface AngularFieldConfig {
-    debounceMs?: number;
-    validators?: ValidatorFn | ValidatorFn[];
-    asyncValidators?: AsyncValidatorFn | AsyncValidatorFn[];
-}
-export interface AngularFormsConfig<T = unknown> {
-    conditionals?: AngularConditionalField<T>[];
-    fieldConfigs?: Record<string, AngularFieldConfig>;
-    destroyRef?: DestroyRef;
-    validationBatchMs?: number;
-}
-export interface AngularFormBridge<T extends Record<string, unknown>> {
-    formGroup: FormGroup;
-    formControl(path: string): FormControl | null;
-    angularErrors: Signal<Record<string, ValidationErrors | null>>;
-    asyncPending: Signal<boolean>;
-}
-export interface AngularFormsMethods {
-    getAngularForm<T extends Record<string, unknown>>(path: string): AngularFormBridge<T> | null;
-    formBridge: Map<string, AngularFormBridge<Record<string, unknown>>>;
-}
-export declare function formBridge<TConfig = unknown>(config?: AngularFormsConfig<TConfig>): <T>(tree: ISignalTree<T>) => ISignalTree<T> & AngularFormsMethods;
-export { FORM_MARKER, isFormMarker } from '@signaltree/core';

package/src/enhancer/index.d.ts

@@ -1 +0,0 @@
-export * from './form-bridge';

package/src/history/history.d.ts

@@ -1,21 +0,0 @@
-import { Signal } from '@angular/core';
-interface FormTree<T extends Record<string, unknown>> {
-    form: any;
-    unwrap(): T;
-    destroy(): void;
-    setValues(values: Partial<T>): void;
-}
-export interface FormHistory<T> {
-    past: T[];
-    present: T;
-    future: T[];
-}
-export declare function withFormHistory<T extends Record<string, unknown>>(formTree: FormTree<T>, options?: {
-    capacity?: number;
-}): FormTree<T> & {
-    undo: () => void;
-    redo: () => void;
-    clearHistory: () => void;
-    history: Signal<FormHistory<T>>;
-};
-export {};

package/src/history/index.d.ts

@@ -1 +0,0 @@
-export { withFormHistory, type FormHistory } from './history';

package/src/index.d.ts

@@ -1,5 +0,0 @@
-export * from './core/ng-forms';
-export * from './core/validators';
-export * from './core/async-validators';
-export * from './history';
-export * from './enhancer';

package/src/rxjs/index.d.ts

@@ -1 +0,0 @@
-export * from './public-api';

package/src/rxjs/public-api.d.ts

@@ -1 +0,0 @@
-export * from './rxjs-bridge';

package/src/rxjs/rxjs-bridge.d.ts

@@ -1,3 +0,0 @@
-import { Signal } from '@angular/core';
-import { Observable } from 'rxjs';
-export declare function toObservable<T>(signal: Signal<T>): Observable<T>;

package/src/wizard/index.d.ts

@@ -1 +0,0 @@
-export { createWizardForm, type FormStep } from './wizard';

package/src/wizard/wizard.d.ts

@@ -1,19 +0,0 @@
-import { Signal } from '@angular/core';
-type FormTreeOptions = Record<string, unknown>;
-interface FormTree<T extends Record<string, unknown>> {
-    unwrap(): T;
-}
-export interface FormStep<T extends Record<string, unknown>> {
-    fields: Array<keyof T | string>;
-    validate?: (form: FormTree<T>) => Promise<boolean> | boolean;
-    canSkip?: (values: T) => boolean;
-}
-export declare function createWizardForm<T extends Record<string, unknown>>(steps: FormStep<T>[], initialValues: T, config?: FormTreeOptions): FormTree<T> & {
-    currentStep: Signal<number>;
-    nextStep: () => Promise<boolean>;
-    previousStep: () => void;
-    goToStep: (index: number) => Promise<boolean>;
-    canGoToStep: (index: number) => boolean;
-    isFieldVisible: (field: keyof T | string) => Signal<boolean>;
-};
-export {};