@ssv/ngx.command 3.0.0-dev.36 → 3.0.0-dev.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssv/ngx.command",
-  "version": "3.0.0-dev.36",
+  "version": "3.0.0-dev.38",
   "versionSuffix": "",
   "description": "Command pattern implementation for angular. Command used to encapsulate information which is needed to perform an action.",
   "keywords": [
@@ -19,11 +19,26 @@
     "type": "git",
     "url": "https://github.com/sketch7/ssv.ngx.git"
   },
-  "dependencies": {},
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
   "peerDependencies": {
     "@angular/core": ">=17.0.0",
     "@angular/forms": ">=17.0.0",
     "rxjs": ">=6.0.0"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "module": "fesm2022/ssv-ngx.command.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/ssv-ngx.command.mjs",
+      "esm": "./esm2022/ssv-ngx.command.mjs",
+      "default": "./fesm2022/ssv-ngx.command.mjs"
+    }
+  }
 }

package/version.d.ts

@@ -0,0 +1 @@
+export declare const VERSION = "3.0.0-dev.38";

package/eslint.config.js

@@ -1,43 +0,0 @@
-const nx = require("@nx/eslint-plugin");
-const baseConfig = require("../../eslint.config.js");
-
-module.exports = [
-	...baseConfig,
-	{
-		files: ["**/*.json"],
-		rules: {
-			"@nx/dependency-checks": ["error", { ignoredFiles: ["{projectRoot}/eslint.config.{js,cjs,mjs}"] }],
-		},
-		languageOptions: { parser: require("jsonc-eslint-parser") },
-	},
-	...nx.configs["flat/angular"],
-	...nx.configs["flat/angular-template"],
-	{
-		files: ["**/*.ts"],
-		rules: {
-			"@angular-eslint/directive-selector": [
-				"error",
-				{
-					type: "attribute",
-					prefix: "ssv",
-					style: "camelCase",
-				},
-			],
-			"@angular-eslint/component-selector": [
-				"error",
-				{
-					type: "element",
-					prefix: "ssv",
-					style: "kebab-case",
-				},
-			],
-			"@angular-eslint/directive-selector": "off",
-			"@angular-eslint/no-input-rename": "off",
-		},
-	},
-	{
-		files: ["**/*.html"],
-		// Override or add rules here
-		rules: {},
-	},
-];

package/index.ts

@@ -1 +0,0 @@
-export * from "./src/index";

package/jest.config.ts

@@ -1,21 +0,0 @@
-export default {
-  displayName: "@ssv/ngx.command",
-  preset: "../../jest.preset.js",
-  setupFilesAfterEnv: ["<rootDir>/src/test-setup.ts"],
-  coverageDirectory: "../../coverage/libs/ngx.command",
-  transform: {
-    "^.+\\.(ts|mjs|js|html)$": [
-      "jest-preset-angular",
-      {
-        tsconfig: "<rootDir>/tsconfig.spec.json",
-        stringifyContentPathRegex: "\\.(html|svg)$",
-      },
-    ],
-  },
-  transformIgnorePatterns: ["node_modules/(?!.*\\.mjs$)"],
-  snapshotSerializers: [
-    "jest-preset-angular/build/serializers/no-ng-attributes",
-    "jest-preset-angular/build/serializers/ng-snapshot",
-    "jest-preset-angular/build/serializers/html-comment",
-  ],
-};

package/ng-package.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/libs/ngx.command",
-  "lib": {
-    "entryFile": "src/index.ts"
-  }
-}

package/project.json

@@ -1,36 +0,0 @@
-{
-  "name": "@ssv/ngx.command",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "libs/ngx.command/src",
-  "prefix": "ssv",
-  "projectType": "library",
-  "tags": [],
-  "targets": {
-    "build": {
-      "executor": "@nx/angular:package",
-      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
-      "options": {
-        "project": "libs/ngx.command/ng-package.json"
-      },
-      "configurations": {
-        "production": {
-          "tsConfig": "libs/ngx.command/tsconfig.lib.prod.json"
-        },
-        "development": {
-          "tsConfig": "libs/ngx.command/tsconfig.lib.json"
-        }
-      },
-      "defaultConfiguration": "production"
-    },
-    "test": {
-      "executor": "@nx/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
-      "options": {
-        "jestConfig": "libs/ngx.command/jest.config.ts"
-      }
-    },
-    "lint": {
-      "executor": "@nx/eslint:lint"
-    }
-  }
-}

package/src/command-ref.directive.ts

@@ -1,57 +0,0 @@
-import { Observable } from "rxjs";
-import { Directive, OnInit, OnDestroy, Input } from "@angular/core";
-
-import { ICommand, CommandCreator } from "./command.model";
-import { isCommandCreator } from "./command.util";
-import { Command } from "./command";
-
-const NAME_CAMEL = "ssvCommandRef";
-
-/**
- * Command creator ref, directive which allows creating Command in the template
- * and associate it to a command (in order to share executions).
- * @example
- * ### Most common usage
- * ```html
- * <div #actionCmd="ssvCommandRef" [ssvCommandRef]="{host: this, execute: removeHero$, canExecute: isValid$}">
- *    <button [ssvCommand]="actionCmd.command" [ssvCommandParams]="hero">
- *      Remove
- *    </button>
- *    <button [ssvCommand]="actionCmd.command" [ssvCommandParams]="hero">
- *       Remove
- *    </button>
- * </div>
- * ```
- *
- */
-@Directive({
-	selector: `[${NAME_CAMEL}]`,
-	exportAs: NAME_CAMEL,
-	standalone: true,
-})
-export class CommandRefDirective implements OnInit, OnDestroy {
-
-	@Input(NAME_CAMEL) commandCreator: CommandCreator | undefined;
-
-	get command(): ICommand { return this._command; }
-	private _command!: ICommand;
-
-	ngOnInit(): void {
-		if (isCommandCreator(this.commandCreator)) {
-			const isAsync = this.commandCreator.isAsync || this.commandCreator.isAsync === undefined;
-
-			const execFn = this.commandCreator.execute.bind(this.commandCreator.host);
-			this._command = new Command(execFn, this.commandCreator.canExecute as Observable<boolean> | undefined, isAsync);
-		} else {
-			throw new Error(`${NAME_CAMEL}: [${NAME_CAMEL}] is not defined properly!`);
-		}
-	}
-
-	ngOnDestroy(): void {
-		// console.log("[commandRef::destroy]");
-		if (this._command) {
-			this._command.destroy();
-		}
-	}
-
-}

package/src/command.directive.ts

@@ -1,190 +0,0 @@
-import {
-	Directive,
-	OnInit,
-	OnDestroy,
-	Input,
-	HostListener,
-	ElementRef,
-	Renderer2,
-	ChangeDetectorRef,
-	inject,
-} from "@angular/core";
-import { Subject, tap, delay, takeUntil } from "rxjs";
-
-import { type CommandOptions, COMMAND_OPTIONS } from "./command.options";
-import { Command } from "./command";
-import { isCommand, isCommandCreator } from "./command.util";
-import { CommandCreator, type ICommand } from "./command.model";
-
-/**
- * Controls the state of a component in sync with `Command`.
- *
- * @example
- * ### Most common usage
- * ```html
- * <button [ssvCommand]="saveCmd">Save</button>
- * ```
- *
- *
- * ### Usage with options
- * ```html
- * <button [ssvCommand]="saveCmd" [ssvCommandOptions]="{executingCssClass: 'in-progress'}">Save</button>
- * ```
- *
- *
- * ### Usage with params
- * This is useful for collections (loops) or using multiple actions with different args.
- * *NOTE: This will share the `isExecuting` when used with multiple controls.*
- *
- * #### With single param
- *
- * ```html
- * <button [ssvCommand]="saveCmd" [ssvCommandParams]="{id: 1}">Save</button>
- * ```
- * *NOTE: if you have only 1 argument as an array, it should be enclosed within an array e.g. `[['apple', 'banana']]`,
- * else it will spread and you will `arg1: "apple", arg2: "banana"`*
- *
- * #### With multi params
- * ```html
- * <button [ssvCommand]="saveCmd" [ssvCommandParams]="[{id: 1}, 'hello', hero]">Save</button>
- * ```
- *
- * ### Usage with Command Creator
- * This is useful for collections (loops) or using multiple actions with different args, whilst not sharing `isExecuting`.
- *
- *
- * ```html
- * <button [ssvCommand]="{host: this, execute: removeHero$, canExecute: isValid$, params: [hero, 1337, 'xx']}">Save</button>
- * ```
- *
- */
-
-const NAME_CAMEL = "ssvCommand";
-
-// let nextUniqueId = 0;
-
-@Directive({
-	selector: `[${NAME_CAMEL}]`,
-	exportAs: NAME_CAMEL,
-	standalone: true,
-})
-export class CommandDirective implements OnInit, OnDestroy {
-
-	// readonly id = `${NAME_CAMEL}-${nextUniqueId++}`;
-	private readonly globalOptions = inject(COMMAND_OPTIONS);
-	private readonly renderer = inject(Renderer2);
-	private readonly element = inject(ElementRef);
-	private readonly cdr = inject(ChangeDetectorRef);
-
-	@Input(NAME_CAMEL) commandOrCreator: ICommand | CommandCreator | undefined;
-
-	@Input(`${NAME_CAMEL}Options`)
-	get commandOptions(): CommandOptions { return this._commandOptions; }
-	set commandOptions(value: Partial<CommandOptions>) {
-		if (value === this._commandOptions) {
-			return;
-		}
-		this._commandOptions = {
-			...this.globalOptions,
-			...value,
-		};
-	}
-
-	@Input(`${NAME_CAMEL}Params`) commandParams: unknown | unknown[];
-
-	get command(): ICommand { return this._command; }
-
-	private _command!: ICommand;
-	private _commandOptions: CommandOptions = this.globalOptions;
-	private _destroy$ = new Subject<void>();
-
-	ngOnInit(): void {
-		// console.log("[ssvCommand::init]", this.globalOptions);
-		if (!this.commandOrCreator) {
-			throw new Error(`${NAME_CAMEL}: [${NAME_CAMEL}] should be defined!`);
-		} else if (isCommand(this.commandOrCreator)) {
-			this._command = this.commandOrCreator;
-		} else if (isCommandCreator(this.commandOrCreator)) {
-			const isAsync = this.commandOrCreator.isAsync || this.commandOrCreator.isAsync === undefined;
-
-			// todo: find something like this for ivy (or angular10+)
-			// const hostComponent = (this.viewContainer as any)._view.component;
-
-			const execFn = this.commandOrCreator.execute.bind(this.commandOrCreator.host);
-			this.commandParams = this.commandParams || this.commandOrCreator.params;
-
-			const canExec = this.commandOrCreator.canExecute instanceof Function
-				? this.commandOrCreator.canExecute.bind(this.commandOrCreator.host, this.commandParams)()
-				: this.commandOrCreator.canExecute;
-
-			// console.log("[ssvCommand::init] command creator", {
-			// 	firstParam: this.commandParams ? this.commandParams[0] : null,
-			// 	params: this.commandParams
-			// });
-			this._command = new Command(execFn, canExec, isAsync);
-		} else {
-			throw new Error(`${NAME_CAMEL}: [${NAME_CAMEL}] is not defined properly!`);
-		}
-
-		this._command.subscribe();
-		this._command.canExecute$.pipe(
-			this.commandOptions.hasDisabledDelay
-				? delay(1)
-				: tap(() => { /* stub */ }),
-			tap(x => {
-				this.trySetDisabled(!x);
-				// console.log("[ssvCommand::canExecute$]", { canExecute: x });
-				this.cdr.markForCheck();
-			}),
-			takeUntil(this._destroy$),
-		).subscribe();
-
-		if (this._command.isExecuting$) {
-			this._command.isExecuting$.pipe(
-				tap(x => {
-					// console.log("[ssvCommand::isExecuting$]", x, this.commandOptions);
-					if (x) {
-						this.renderer.addClass(
-							this.element.nativeElement,
-							this.commandOptions.executingCssClass
-						);
-					} else {
-						this.renderer.removeClass(
-							this.element.nativeElement,
-							this.commandOptions.executingCssClass
-						);
-					}
-				}),
-				takeUntil(this._destroy$),
-			).subscribe();
-		}
-	}
-
-	@HostListener("click")
-	onClick(): void {
-		// console.log("[ssvCommand::onClick]", this.commandParams);
-		if (Array.isArray(this.commandParams)) {
-			this._command.execute(...this.commandParams);
-		} else {
-			this._command.execute(this.commandParams);
-		}
-	}
-
-	ngOnDestroy(): void {
-		// console.log("[ssvCommand::destroy]");
-		this._destroy$.next();
-		this._destroy$.complete();
-		if (this._command) {
-			this._command.unsubscribe();
-		}
-	}
-
-	private trySetDisabled(disabled: boolean) {
-		if (this.commandOptions.handleDisabled) {
-			// console.warn(">>>> disabled", { id: this.id, disabled });
-			this.renderer.setProperty(this.element.nativeElement, "disabled", disabled);
-		}
-	}
-
-}
-

package/src/command.directive.xspec.ts

@@ -1,105 +0,0 @@
-// import {Observable} from "rxjs/Observable";
-// import {inject, addProviders, async} from "@angular/core/testing";
-// import {TestComponentBuilder, ComponentFixture} from "@angular/compiler/testing";
-// import {Component, provide} from "@angular/core";
-
-// import {Command, ICommand, CommandDirective} from "./index";
-
-// @Component({
-// 	template: `<button class="btn" [ssvCommand]="saveCmd" >Save</button>`,
-// 	directives: [
-// 		CommandDirective
-// 	]
-// })
-// class TestContainer {
-// 	saveCmd = new Command(() => Observable.of("yey").delay(2000), null, true);
-// }
-
-// @Component({
-// 	template: `<button class="btn" [ssvCommand]="emptyCmd" >Save</button>`,
-// 	directives: [
-// 		CommandDirective
-// 	]
-// })
-// class NullCommandTestContainer {
-
-// }
-
-// describe("CommandDirectiveSpecs", () => {
-
-// 	let testComponentBuilder: TestComponentBuilder;
-
-// 	beforeEach(inject([
-// 		TestComponentBuilder
-// 	], (
-// 		_testComponentBuilder: TestComponentBuilder
-// 	) => {
-// 			testComponentBuilder = _testComponentBuilder;
-// 		})
-// 	);
-
-// 	describe("given an undefined command", () => {
-// 		xit("should throw error", async(() => {
-// 			testComponentBuilder
-// 				.createAsync(NullCommandTestContainer)
-// 				.then((fixture: ComponentFixture<NullCommandTestContainer>) => {
-// 					expect(() => {
-// 						fixture.detectChanges();
-// 					}).toThrowError("[commandDirective] command should be defined!");
-// 				});
-
-// 		}));
-// 	});
-
-// 	describe("given command isExecuting is set to true", () => {
-// 		xit("should have element disabled", async(() => {
-// 			testComponentBuilder
-// 				.createAsync(TestContainer)
-// 				.then((fixture: ComponentFixture<TestContainer>) => {
-// 					fixture.detectChanges();
-// 					let container = fixture.componentInstance as TestContainer;
-// 					let element = fixture.debugElement.nativeElement.querySelector("button");
-// 					element.click();
-// 					fixture.detectChanges();
-// 					expect(element).toBeDisabled();
-// 				});
-// 		}));
-
-// 		xit("should have executingCssClass added", () => {
-
-// 		});
-
-// 		xdescribe("when isExecuting has been finished", () => {
-// 			xit("should have element enabled", () => {
-
-// 			});
-
-// 			xit("should have executingCssClass removed", () => {
-
-// 			});
-// 		});
-// 	});
-
-// 	xdescribe("given command canExecute is set to true", () => {
-// 		xit("should have element enabled", () => {
-
-// 		});
-// 	});
-
-// 	xdescribe("given command canExecute is set to false", () => {
-// 		xit("should have element disabled", () => {
-
-// 		});
-// 	});
-
-// 	xdescribe("given commandOptions are provided", () => {
-// 		xdescribe("when isExecuting is set true", () => {
-// 			xit("should have executingCssClass added with the provided option", () => {
-
-// 			});
-// 		});
-
-// 	});
-
-
-// });

package/src/command.model.ts

@@ -1,39 +0,0 @@
-import { Observable } from "rxjs";
-
-export interface ICommand {
-	/** Determines whether the command is currently executing, as a snapshot value. */
-	readonly isExecuting: boolean;
-	/** Determines whether the command is currently executing, as an observable. */
-	readonly isExecuting$: Observable<boolean>;
-	/** Determines whether the command can execute or not, as a snapshot value. */
-	readonly canExecute: boolean;
-	/** Determines whether the command can execute or not, as an observable. */
-	readonly canExecute$: Observable<boolean>;
-
-	/** Determines whether to auto destroy when having 0 subscribers (defaults to `true`). */
-	autoDestroy: boolean;
-
-	/** Execute function to invoke. */
-	execute(...args: unknown[]): void;
-
-	/** Disposes all resources held by subscriptions. */
-	destroy(): void;
-
-	/** Subscribe listener, in order to handle auto disposing. */
-	subscribe(): void;
-
-	/** Unsubscribe listener, in order to handle auto disposing. */
-	unsubscribe(): void;
-}
-
-export interface CommandCreator {
-	// todo: stricter typing
-	// execute: (...args: TParams extends unknown[] ? TParams : [TParams]) => Observable<unknown> | Promise<unknown> | void;
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	execute: (...args: any[]) => Observable<unknown> | Promise<unknown> | void;
-	// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
-	canExecute?: Observable<boolean> | Function;
-	params?: unknown | unknown[];
-	isAsync?: boolean;
-	host: unknown;
-}

package/src/command.module.ts

@@ -1,17 +0,0 @@
-import { NgModule } from "@angular/core";
-
-import { CommandDirective } from "./command.directive";
-import { CommandRefDirective } from "./command-ref.directive";
-
-const EXPORTED_IMPORTS = [
-	CommandDirective,
-	CommandRefDirective
-];
-
-@NgModule({
-	imports: [EXPORTED_IMPORTS],
-	exports: [EXPORTED_IMPORTS]
-})
-export class SsvCommandModule {
-
-}

package/src/command.options.ts

@@ -1,49 +0,0 @@
-import { type EnvironmentProviders, InjectionToken, makeEnvironmentProviders } from "@angular/core";
-
-export interface CommandOptions {
-	/**
-	 * Css Class which gets added/removed on the Command element's host while Command `isExecuting$`.
-	 */
-	executingCssClass: string;
-
-	/** Determines whether the disabled will be handled by the directive or not.
-	 * Disable handled by directive's doesn't always play nice when used with other component/pipe/directive and they also handle disabled.
-	 * This disables the handling manually and need to pass explicitly `[disabled]="!saveCmd.canExecute"`.
-	 */
-	handleDisabled: boolean;
-
-	/** Determine whether to set a `delay(1)` when setting the disabled. Which might be needed when working with external
-	 * components/directives (such as material button)
-	 */
-	hasDisabledDelay: boolean;
-}
-
-const DEFAULT_OPTIONS = Object.freeze<CommandOptions>({
-	executingCssClass: "executing",
-	handleDisabled: true,
-	hasDisabledDelay: false,
-});
-
-export const COMMAND_OPTIONS = new InjectionToken<CommandOptions>("SSV_COMMAND_OPTIONS", {
-	factory: () => DEFAULT_OPTIONS,
-});
-
-export function provideSsvCommandOptions(
-	options: Partial<CommandOptions> | ((defaults: Readonly<CommandOptions>) => Partial<CommandOptions>)
-): EnvironmentProviders {
-	return makeEnvironmentProviders([
-		{
-			provide: COMMAND_OPTIONS,
-			useFactory: () => {
-				let opts = typeof options === "function" ? options(DEFAULT_OPTIONS) : options;
-				opts = opts
-					? {
-						...DEFAULT_OPTIONS,
-						...opts,
-					}
-					: DEFAULT_OPTIONS;
-				return opts;
-			},
-		},
-	]);
-}