diff --git a/CHANGELOG.md b/CHANGELOG.md index 08ef215..827e798 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,8 +1,8 @@ -## 3.0.0 (2024-11-21) +## 3.0.0 (2025-01-21) ### 🚀 Features -- **command:** add `createCommand`/`createCommandAsync` which handles auto destroy with `DestroyRef` +- **command:** add `command`/`commandAsync` which handles auto destroy with `DestroyRef` - **command:** canExecute signal support - **deps:** update angular 17 - **ux viewport:** add module `SsvUxViewportModule` diff --git a/apps/test-app/src/app/command/example-command.component.ts b/apps/test-app/src/app/command/example-command.component.ts index 10edaa4..c4dd253 100644 --- a/apps/test-app/src/app/command/example-command.component.ts +++ b/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, createCommandAsync, SsvCommandModule } from "@ssv/ngx.command"; +import { CommandAsync, commandAsync, SsvCommandModule } from "@ssv/ngx.command"; import { CommonModule } from "@angular/common"; interface Hero { @@ -54,7 +54,7 @@ export class ExampleCommandComponent { this.saveRedux.bind(this), this.isValidRedux$, ); - readonly containerDestroySaveCmd = createCommandAsync(() => this.save$()); + readonly containerDestroySaveCmd = commandAsync(() => this.save$()); heroes: Hero[] = [ { key: "rexxar", name: "Rexxar" }, diff --git a/libs/ngx.command/README.md b/libs/ngx.command/README.md index d2f4f96..6574c76 100644 --- a/libs/ngx.command/README.md +++ b/libs/ngx.command/README.md @@ -31,18 +31,15 @@ Choose the version corresponding to your Angular version: In order to start working with Command, you need to create a new instance of it. ```ts -import { Command, CommandAsync, ICommand } from "@ssv/ngx.command"; +import { command, commandAsync } from "@ssv/ngx.command"; isValid$ = new BehaviorSubject(false); -// use `CommandAsync` when execute function returns an observable/promise OR else 3rd argument must be true. -saveCmd = new Command(() => this.save()), this.isValid$); +// non async +saveCmd = command(() => this.save()), this.isValid$); -// using CommandAsync -saveCmd = new CommandAsync(() => Observable.timer(2000), this.isValid$); - -// using ICommand interface -saveCmd: ICommand = new CommandAsync(() => Observable.timer(2000), this.isValid$); +// async - returns an observable/promise. +saveCmd = commandAsync(() => Observable.timer(2000), this.isValid$); ``` ## Command Attribute (Directive) @@ -135,12 +132,12 @@ 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 } from "@ssv/ngx.command"; -loginCmd = new CommandAsync(x => this.login(), canExecuteFromNgForm(this.form)); +loginCmd = commandAsync(x => this.login(), canExecuteFromNgForm(this.form)); // options - disable dirty check -loginCmd = new CommandAsync(x => this.login(), canExecuteFromNgForm(this.form, { +loginCmd = commandAsync(x => this.login(), canExecuteFromNgForm(this.form, { dirty: false })); diff --git a/libs/ngx.command/src/command.ts b/libs/ngx.command/src/command.ts index 10c44a5..4c0a1a7 100644 --- a/libs/ngx.command/src/command.ts +++ b/libs/ngx.command/src/command.ts @@ -14,28 +14,29 @@ export type CanExecute = Signal | Observable; /** Creates an async {@link Command}. Must be used within an injection context. * NOTE: this auto injects `DestroyRef` and handles auto destroy. {@link ICommand.autoDestroy} should not be used. */ -export function createCommandAsync( +export function commandAsync( execute: ExecuteAsyncFn, canExecute$?: CanExecute, ): Command { - return createCommand(execute, canExecute$, true); + return command(execute, canExecute$, true); } /** Creates a {@link Command}. Must be used within an injection context. * NOTE: this auto injects `DestroyRef` and handles auto destroy. {@link ICommand.autoDestroy} should not be used. */ -export function createCommand( +export function command( execute: ExecuteFn, canExecute$?: CanExecute, isAsync?: boolean, ): Command { + // todo: add injector/destroyRef to the command (needs overload) const destroyRef = inject(DestroyRef); const cmd = new Command(execute, canExecute$, isAsync); cmd.autoDestroy = false; destroyRef.onDestroy(() => { - // console.warn("[createCommandAsync::destroy]"); + // console.warn("[command::destroy]"); cmd.destroy(); }); return cmd;