refactor(command): signal refactor (#21)

Author: stephenlautier

CHANGELOG.md

@@ -1,3 +1,25 @@
+## 4.0.0 (2025-11-05)
+
+### Features
+
+- **command:** refactor to signal based add `$isExecuting` and `$canExecute`
+- **command:** change `provideSsvCommandOptions` to `Provider[]` instead of `EnvironmentProviders`
+- **command:** deprecated `Command` `autoDestroy`, `subscribe`, `unsubscribe` (redundant when using `command`/`commandAsync`)
+- **command:** deprecated `Command` `canExecute`, `isExecuting` in favor of signal based
+
+### Refactor
+
+- **all:** remove all `OnDestroy` in favor of `DestroyRef`
+
+### BREAKING CHANGES
+
+- **command:** remove `Command` `isExecuting$` and `canExecute$`
+- **command:** remove `CommandOptions` `hasDisabledDelay`
+- **command:** rename `CommandDirective` to `SsvCommand`
+- **command:** rename `CommandRefDirective` to `SsvCommandRef`
+- **ux:** rename `SsvViewportMatcherVarDirective` to `SsvViewportMatcherVar`
+- **ux:** rename `SsvViewportMatcherDirective` to `SsvViewportMatcher`
+
 ## 3.3.0 (2025-10-28)
 
 ### Chore

apps/test-app/src/app/app.config.ts

@@ -14,7 +14,6 @@ export const appConfig: ApplicationConfig = {
 
 		provideSsvCommandOptions({
 			executingCssClass: "is-busy",
-			hasDisabledDelay: false
 		}),
 
 		provideSsvUxViewportOptions({

apps/test-app/src/app/command/example-command.component.html

@@ -139,8 +139,7 @@ <h1>Command</h1>
 				mat-raised-button
 				color="primary"
 				disabled
-				[ssvCommand]="saveCmdNoValidation"
-				[ssvCommandOptions]="{ hasDisabledDelay: true }">
+				[ssvCommand]="saveCmdNoValidation">
 				@if (saveCmdNoValidation.isExecuting) {
 				<i class="ai-circled ai-indicator ai-dark-spin small"></i>
 				} Save

apps/test-app/src/app/command/example-command.component.ts

@@ -5,7 +5,7 @@ import { MatIconModule } from "@angular/material/icon";
 import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
 
 import { BehaviorSubject, timer, Observable, tap, filter, map, distinctUntilChanged } from "rxjs";
-import { CommandAsync, commandAsync, SsvCommandModule } from "@ssv/ngx.command";
+import { commandAsync, SsvCommand, SsvCommandRef } from "@ssv/ngx.command";
 import { CommonModule } from "@angular/common";
 
 interface Hero {
@@ -31,11 +31,15 @@ interface HeroPausedState {
 		MatIconModule,
 		MatButtonModule,
 		MatProgressSpinnerModule,
-		SsvCommandModule,
+		SsvCommand,
+		SsvCommandRef,
 	]
 })
 export class ExampleCommandComponent {
 
+	readonly #cdr = inject(ChangeDetectorRef);
+	readonly #destroyRef = inject(DestroyRef);
+
 	isValid = true;
 	isExecuting = false;
 
@@ -45,12 +49,12 @@ export class ExampleCommandComponent {
 	readonly $isValid = signal(false);
 	readonly $containerVisibility = signal(true);
 
-	readonly saveCmd = new CommandAsync(() => this.save$(), this.isValid$);
-	readonly saveSignalCmd = new CommandAsync(() => this.save$(), this.$isValid);
-	readonly saveCmdNoValidation = new CommandAsync(() => this.save$());
-	readonly removeHeroCmd = new CommandAsync(this.removeHero$.bind(this), this.isValidHeroRemove$);
-	readonly pauseHeroCmd = new CommandAsync(this.pauseHero$.bind(this), this.isValidHeroRemove$);
-	readonly saveReduxCmd = new CommandAsync(
+	readonly saveCmd = commandAsync(() => this.save$(), this.isValid$);
+	readonly saveSignalCmd = commandAsync(() => this.save$(), this.$isValid);
+	readonly saveCmdNoValidation = commandAsync(() => this.save$());
+	readonly removeHeroCmd = commandAsync(this.removeHero$.bind(this), this.isValidHeroRemove$);
+	readonly pauseHeroCmd = commandAsync(this.pauseHero$.bind(this), this.isValidHeroRemove$);
+	readonly saveReduxCmd = commandAsync(
 		this.saveRedux.bind(this),
 		this.isValidRedux$,
 	);
@@ -71,26 +75,22 @@ export class ExampleCommandComponent {
 		isInvulnerable: true
 	} as Hero);
 
-	// saveCmdSync: ICommand = new Command(this.save$.bind(this), this.isValid$, true);
-	// saveCmd: ICommand = new Command(this.save$.bind(this), null, true);
+	// saveCmdSync = command(this.save$.bind(this), this.isValid$, true);
+	// saveCmd = command(this.save$.bind(this), null, true);
 	private _state = new BehaviorSubject({ isLoading: false });
 	private _pauseState = new BehaviorSubject<HeroPausedState>({});
 
-	private readonly cdr = inject(ChangeDetectorRef);
-	private readonly destroyRef = inject(DestroyRef);
-
 	constructor() {
-		this.destroyRef.onDestroy(() => {
+		this.#destroyRef.onDestroy(() => {
 			console.warn("destroyRef.onDestroy");
 		});
-		// this.containerDestroySaveCmd.autoDestroy = false;
 	}
 
 	save() {
 		this.isExecuting = true;
 		setTimeout(() => {
 			this.isExecuting = false;
-			this.cdr.markForCheck();
+			this.#cdr.markForCheck();
 			console.warn("save", "execute complete");
 		}, 2000);
 	}
@@ -145,7 +145,7 @@ export class ExampleCommandComponent {
 			map(x => !x || !x.isPaused),
 			distinctUntilChanged(),
 			tap(x => console.warn(">>>> canPauseHero$ change", x, hero)),
-			tap(() => this.cdr.markForCheck()),
+			tap(() => this.#cdr.markForCheck()),
 		);
 	}
 

apps/test-app/src/app/viewport/viewport.component.html

@@ -1,57 +1,58 @@
 <h1>Viewport</h1>
-<p>Experimental area for viewport
-</p>
+<p>Experimental area for viewport</p>
 <div class="container">
 	<fieldset class="viewport__field-container">
 		<legend class="viewport__field-header">Size info</legend>
 		<div class="viewport__field">
 			<span class="type variable">Size Info</span>
-			<span class="type object value">{{sizeInfo | json}}</span>
+			<span class="type object value">{{ sizeInfo | json }}</span>
 		</div>
 	</fieldset>
 	<fieldset class="viewport__field-container">
 		<legend class="viewport__field-header">Size</legend>
 		<div class="viewport__field">
 			<span class="type variable">Size</span>
-			<span class="type object value">{{size | json}}</span>
+			<span class="type object value">{{ size | json }}</span>
 		</div>
 	</fieldset>
 </div>
 <div class="container">
 	<fieldset>
 		<legend class="viewport__field-header">Viewport Matcher Container</legend>
-		<div *ssvViewportMatcher="'large'"
+		<div
+			*ssvViewportMatcher="'large'"
 			class="matcher-dummy-container">
 			Dummy container #1 <strong class="matcher-dummy-container__target">only (large)</strong>
 		</div>
-		<div *ssvViewportMatcher="['large', 'xlarge']"
+		<div
+			*ssvViewportMatcher="['large', 'xlarge']"
 			class="matcher-dummy-container">
 			Dummy container #2 <br />
-			<strong class="matcher-dummy-container__target">
-				only (large, xlarge)
-			</strong>
+			<strong class="matcher-dummy-container__target"> only (large, xlarge) </strong>
 		</div>
-		<div *ssvViewportMatcher="''; exclude ['xsmall', 'small']"
+		<div
+			*ssvViewportMatcher="''; exclude: ['xsmall', 'small']"
 			class="matcher-dummy-container">
 			Dummy container #3
 			<strong class="matcher-dummy-container__target"> exclude (xsmall, small) </strong>
 		</div>
 		<div>
-			<div *ssvViewportMatcher="{size: 'xlarge', operation: '<='}; else elseB"
+			<div
+				*ssvViewportMatcher="{ size: 'xlarge', operation: '<=' }; else elseB"
 				class="matcher-dummy-container">
 				Dummy container #4
 				<strong class="matcher-dummy-container__target">(<= xlarge>)</strong>
 			</div>
 			<ng-template #elseB>
 				<div class="matcher-dummy-container">
 					Dummy container #5
-					<strong class="matcher-dummy-container__target">(<= xlarge
-							[else]>)</strong>
+					<strong class="matcher-dummy-container__target">(<= xlarge [else]>)</strong>
 				</div>
 			</ng-template>
 		</div>
 
-		<div *ssvViewportMatcher="['>=', 'xlarge']"
+		<div
+			*ssvViewportMatcher="['>=', 'xlarge']"
 			class="matcher-dummy-container">
 			Dummy container #6 <strong class="matcher-dummy-container__target">(>= xlarge>)</strong>
 			<small>tuple syntax *recommended*</small>
@@ -69,32 +70,35 @@ <h1>Viewport</h1>
 		<legend class="viewport__field-header">Viewport Data</legend>
 		<div class="viewport__field">
 			<span class="type variable">data</span>
-			<span class="type object value">{{dataConfig | json}}</span>
+			<span class="type object value">{{ dataConfig | json }}</span>
 		</div>
 		<div class="viewport__field">
 			<span class="type variable">value</span>
 			<span class="type string value">
-				{{ dataConfig | ssvViewportData: "closestSmallerFirst"}}
+				{{ dataConfig | ssvViewportData : "closestSmallerFirst" }}
 			</span>
 		</div>
 	</fieldset>
 
 	<fieldset class="viewport__var-container viewport__field-container">
 		<legend class="viewport__field-header">Viewport Matcher Var</legend>
-		<div class="viewport__field"
-			*ssvViewportMatcherVar="let isMediumDown when ['<=', 'medium']">
+		<div
+			class="viewport__field"
+			*ssvViewportMatcherVar="let isMediumDown; when: ['<=', 'medium']">
 			<span class="type variable">['<=', 'medium' ]</span>
-					<span class="type boolean value">{{isMediumDown}}</span>
+			<span class="type boolean value">{{ isMediumDown }}</span>
 		</div>
-		<div class="viewport__field"
-			*ssvViewportMatcherVar="let isLarge when 'large'">
+		<div
+			class="viewport__field"
+			*ssvViewportMatcherVar="let isLarge; when: 'large'">
 			<span class="type variable">'large'</span>
-			<span class="type boolean value">{{isLarge}}</span>
+			<span class="type boolean value">{{ isLarge }}</span>
 		</div>
-		<div class="viewport__field"
-			*ssvViewportMatcherVar="let isLargeOrSmall when ['small', 'large']">
+		<div
+			class="viewport__field"
+			*ssvViewportMatcherVar="let isLargeOrSmall; when: ['small', 'large']">
 			<span class="type variable">['small', 'large']</span>
-			<span class="type boolean value">{{isLargeOrSmall}}</span>
+			<span class="type boolean value">{{ isLargeOrSmall }}</span>
 		</div>
 	</fieldset>
-</div>
+</div>

libs/ngx.command/README.md

@@ -20,6 +20,7 @@ Choose the version corresponding to your Angular version:
 
  | Angular | library |
  | ------- | ------- |
+ | 17+     | 4.x+    |
  | 17+     | 3.x+    |
  | 10+     | 2.x+    |
  | 4 to 9  | 1.x+    |
@@ -163,7 +164,6 @@ export const appConfig: ApplicationConfig = {
   providers: [
     provideSsvCommandOptions({
       executingCssClass: "is-busy",
-      hasDisabledDelay: false
     }),
   ],
 };

libs/ngx.command/src/command-ref.directive.ts

@@ -1,9 +1,8 @@
-import { Observable } from "rxjs";
-import { Directive, OnInit, OnDestroy, Input } from "@angular/core";
+import { Directive, OnInit, inject, Injector, DestroyRef, input } from "@angular/core";
 
-import { ICommand, CommandCreator } from "./command.model";
+import type { ICommand, CommandCreator, CanExecute } from "./command.model";
 import { isCommandCreator } from "./command.util";
-import { Command } from "./command";
+import { command } from "./command";
 
 const NAME_CAMEL = "ssvCommandRef";
 
@@ -29,29 +28,35 @@ const NAME_CAMEL = "ssvCommandRef";
 	exportAs: NAME_CAMEL,
 	standalone: true,
 })
-export class CommandRefDirective implements OnInit, OnDestroy {
+export class SsvCommandRef implements OnInit {
 
-	@Input(NAME_CAMEL) commandCreator: CommandCreator | undefined;
+	readonly #injector = inject(Injector);
+
+	readonly commandCreator = input.required<CommandCreator>({
+		alias: `ssvCommandRef`
+	});
 
 	get command(): ICommand { return this._command; }
 	private _command!: ICommand;
 
+	constructor() {
+		const destroyRef = inject(DestroyRef);
+		destroyRef.onDestroy(() => {
+			this._command?.unsubscribe();
+		});
+	}
+
 	ngOnInit(): void {
-		if (isCommandCreator(this.commandCreator)) {
-			const isAsync = this.commandCreator.isAsync || this.commandCreator.isAsync === undefined;
+		if (isCommandCreator(this.commandCreator())) {
+			const commandCreator = this.commandCreator();
+			const isAsync = commandCreator.isAsync || commandCreator.isAsync === undefined;
+
+			const execFn = commandCreator.execute.bind(commandCreator.host);
 
-			const execFn = this.commandCreator.execute.bind(this.commandCreator.host);
-			this._command = new Command(execFn, this.commandCreator.canExecute as Observable<boolean> | undefined, isAsync);
+			this._command = command(execFn, commandCreator.canExecute as CanExecute, { isAsync, injector: this.#injector });
 		} else {
 			throw new Error(`${NAME_CAMEL}: [${NAME_CAMEL}] is not defined properly!`);
 		}
 	}
 
-	ngOnDestroy(): void {
-		// console.log("[commandRef::destroy]");
-		if (this._command) {
-			this._command.destroy();
-		}
-	}
-
 }