feat(command): add canExecuteFromSignals + change canExecuteFromNgForm (#14)

Author: stephenlautier

CHANGELOG.md

@@ -1,3 +1,13 @@
+## 3.1.0 (2025-02-16)
+
+### 🚀 Features
+
+- **command:** add `canExecuteFromSignals`
+
+### 🩹 Fixes
+
+- **command:** change `canExecuteFromNgForm` to use pristine/status events which handles state more accurately
+
 ## 3.0.0 (2025-02-11)
 
 ### 🚀 Features

libs/ngx.command/README.md

@@ -43,8 +43,8 @@ saveCmd = command(() => this.save(), isValid);
 saveCmd = commandAsync(() => Observable.timer(2000), isValid);
 
 // can execute diff ways
-saveCmd = command(() => this.save(), isValid); // signal
 saveCmd = command(() => this.save(), () => isValid()); // reactive fn (signal)
+saveCmd = command(() => this.save(), isValid); // signal
 saveCmd = command(() => this.save(), isValid$); // rx
 ```
 
@@ -133,12 +133,12 @@ Command creator ref, directive which allows creating Command in the template and
 
 ## Utils
 
-### canExecuteFromNgForm
+### canExecuteFromNgForm/canExecuteFromSignals
 In order to use with `NgForm` easily, you can use the following utility method.
 This will make canExecute respond to `form.valid` and for `form.dirty` - also can optionally disable validity or dirty.
 
 ```ts
-import { commandAsync, canExecuteFromNgForm } from "@ssv/ngx.command";
+import { commandAsync, canExecuteFromNgForm, canExecuteFromSignals } from "@ssv/ngx.command";
 
 loginCmd = commandAsync(x => this.login(), canExecuteFromNgForm(this.form));
 
@@ -147,6 +147,8 @@ loginCmd = commandAsync(x => this.login(), canExecuteFromNgForm(this.form, {
   dirty: false
 }));
 
+// similar functionality using custom signals (or form which provide signals)
+loginCmd = commandAsync(x => this.login(), canExecuteFromSignals({dirty: $dirty, valid: $valid}));
 ```
 
 

libs/ngx.command/src/command.directive.xspec.ts

@@ -1,4 +1,4 @@
-// import {Observable} from "rxjs/Observable";
+// import {of} from "rxjs";
 // import {inject, addProviders, async} from "@angular/core/testing";
 // import {TestComponentBuilder, ComponentFixture} from "@angular/compiler/testing";
 // import {Component, provide} from "@angular/core";
@@ -12,7 +12,7 @@
 // 	]
 // })
 // class TestContainer {
-// 	saveCmd = new Command(() => Observable.of("yey").delay(2000), null, true);
+// 	saveCmd = new Command(() => of("yey").delay(2000), null, true);
 // }
 
 // @Component({

libs/ngx.command/src/command.ts

@@ -55,7 +55,7 @@ export function command(
 
 /**
  * Command object used to encapsulate information which is needed to perform an action.
- * @deprecated Use {@link command} or {@link commandAsync} instead.
+ * @deprecated Use {@link command} or {@link commandAsync} instead for creating instances.
  */
 export class Command implements ICommand {
 

libs/ngx.command/src/command.util.ts

@@ -1,8 +1,9 @@
-import { AbstractControl, AbstractControlDirective, FormControlStatus } from "@angular/forms";
-import { Observable, of, map, distinctUntilChanged, startWith, delay } from "rxjs";
+import { AbstractControl, PristineChangeEvent, StatusChangeEvent } from "@angular/forms";
+import { Observable, map, distinctUntilChanged, startWith, filter, combineLatest, of } from "rxjs";
 
 import { CommandCreator, ICommand } from "./command.model";
 import { Command } from "./command";
+import { type Signal, computed } from "@angular/core";
 
 /** Determines whether the arg object is of type `Command`. */
 export function isCommand(arg: unknown): arg is ICommand {
@@ -27,23 +28,54 @@ export interface CanExecuteFormOptions {
 	dirty?: boolean;
 }
 
-/** Get form is valid as an observable. */
+const CAN_EXECUTE_FORM_OPTIONS_DEFAULTS = Object.freeze<CanExecuteFormOptions>({
+	validity: true,
+	dirty: true,
+})
+
+/** Get can execute from form validity/pristine as an observable. */
 export function canExecuteFromNgForm(
-	form: AbstractControl | AbstractControlDirective,
+	form: AbstractControl,
 	options?: CanExecuteFormOptions
 ): Observable<boolean> {
-	const opts: CanExecuteFormOptions = { validity: true, dirty: true, ...options };
+	const opts: CanExecuteFormOptions = options ?
+		{ ...CAN_EXECUTE_FORM_OPTIONS_DEFAULTS, ...options }
+		: CAN_EXECUTE_FORM_OPTIONS_DEFAULTS;
+
+	const pristine$ = opts.dirty
+		? form.events.pipe(
+			filter(x => x instanceof PristineChangeEvent),
+			map(x => x.pristine),
+			distinctUntilChanged(),
+			startWith(form.pristine),
+		) : of(true);
 
-	return form.statusChanges
-		? (form.statusChanges as Observable<FormControlStatus>).pipe( // todo: remove cast when working correctly
-			delay(0),
-			startWith(form.valid),
-			map(() => !!(!opts.validity || form.valid) && !!(!opts.dirty || form.dirty)),
+	const valid$ = opts.validity
+		? form.events.pipe(
+			filter(x => x instanceof StatusChangeEvent),
+			map(x => x.status === "VALID"),
 			distinctUntilChanged(),
-		)
-		: of(true);
+			startWith(form.pristine),
+		) : of(true);
+
+	return combineLatest([pristine$, valid$]).pipe(
+		map(([pristine, valid]) => !!(!opts.validity || valid) && !!(!opts.dirty || !pristine)),
+		distinctUntilChanged(),
+	);
 }
 
+/** Can executed based on valid/dirty signal inputs. */
+export function canExecuteFromSignals(
+	signals: { valid: Signal<boolean>, dirty: Signal<boolean> },
+	options?: CanExecuteFormOptions
+): Signal<boolean> {
+	const opts: CanExecuteFormOptions = options ?
+		{ ...CAN_EXECUTE_FORM_OPTIONS_DEFAULTS, ...options }
+		: CAN_EXECUTE_FORM_OPTIONS_DEFAULTS;
+	return computed(() => !!(!opts.validity || signals.valid()) && !!(!opts.dirty || signals.dirty()));
+}
+
+
 function isAssumedType<T = Record<string, unknown>>(x: unknown): x is Partial<T> {
 	return x !== null && typeof x === "object";
 }

libs/ngx.command/src/index.ts

@@ -3,6 +3,6 @@ export { provideSsvCommandOptions, COMMAND_OPTIONS, type CommandOptions } from "
 export { command, commandAsync, Command, CommandAsync, type CanExecute, type CommandCreateOptions } from "./command";
 export { CommandDirective } from "./command.directive";
 export { CommandRefDirective } from "./command-ref.directive";
-export { type CanExecuteFormOptions, isCommand, isCommandCreator, canExecuteFromNgForm } from "./command.util";
+export { type CanExecuteFormOptions, isCommand, isCommandCreator, canExecuteFromNgForm, canExecuteFromSignals } from "./command.util";
 export type { CommandCreator, ICommand } from "./command.model";
 export { VERSION } from "./version";

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssv/ngx",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "packageManager": "[email protected]",
   "volta": {
     "node": "20.18.1"