fix(async-stack): ignore null timeout as 0 (currently resolve immediately)

Author: vnphanquang

.changeset/chatty-dolphins-cross.md

@@ -0,0 +1,5 @@
+---
+'@svelte-put/async-stack': patch
+---
+
+make sure push configs are merged correctly and recursively but ignoring nullish values

packages/async-stack/package.json

@@ -62,6 +62,9 @@
 	"bugs": {
 		"url": "https://github.com/vnphanquang/svelte-put/issues"
 	},
+	"dependencies": {
+		"defu": "^6.1.4"
+	},
 	"devDependencies": {
 		"@internals/tsconfig": "workspace:*"
 	},

packages/async-stack/src/stack-item.svelte.d.ts

@@ -10,7 +10,7 @@ export class StackItem<
 > {
 	/** @default 'idle' */
 	state: StackItemState;
-	config: Required<StackItemInstanceConfig<string, UserComponent>>;
+	config: StackItemInstanceConfig<string, UserComponent>;
 	/**
 	 * a promise that resolves when the item is resolved,
 	 * by timing out or via the .resolve method

packages/async-stack/src/stack-item.svelte.js

@@ -8,7 +8,7 @@ export class StackItem {
 	/** @type {import('./types.package').StackItemState} */
 	// eslint-disable-next-line no-undef
 	state = $state('idle');
-	/** @type {Required<import('./types.package').StackItemInstanceConfig<string, UserComponent>>} */
+	/** @type {import('./types.package').StackItemInstanceConfig<string, UserComponent>} */
 	config;
 
 	#internals = {
@@ -26,7 +26,7 @@ export class StackItem {
 	resolution;
 
 	/**
-	 * @param {Required<import('./types.package').StackItemInstanceConfig<string, UserComponent>>} config
+	 * @param {import('./types.package').StackItemInstanceConfig<string, UserComponent>} config
 	 */
 	constructor(config) {
 		this.config = config;

packages/async-stack/src/stack.svelte.d.ts

@@ -15,7 +15,7 @@ export class Stack<VariantMap extends Record<string, Component<any>> = {}> {
 	/** stack items */
 	items: StackItem<any>[];
 	/** global config applied to the entire stack by default */
-	config: Required<StackItemCommonConfig<string, Component<any>>>;
+	config: StackItemCommonConfig<string, Component<any>>;
 	actions: {
 		/** register the element to render a stack item into */
 		render: (node: HTMLElement, item: StackItem<any>) => StackItemRenderActionReturn;

packages/async-stack/src/stack.svelte.js

@@ -1,3 +1,4 @@
+import { defu } from 'defu';
 import { mount, tick, unmount } from 'svelte';
 
 import { MissingComponentInCustomPush, NotFoundVariantConfig } from './errors.js';
@@ -59,7 +60,7 @@ export class Stack {
 	 */
 	constructor(variantConfigMap, init) {
 		if (init?.id) this.config.id = init.id;
-		if (init?.timeout) this.config.timeout = init.timeout;
+		if (init?.timeout) this.config.timeout = init.timeout || 0;
 		this.#variantConfigMap = variantConfigMap;
 	}
 
@@ -71,11 +72,13 @@ export class Stack {
 	 * @returns {StackItem<any>}
 	 */
 	push(variant, config) {
+		/** @typedef {import('./types.package').StackItemInstanceConfig<string, import('svelte').Component<any>>} InstanceConfig */
+
+		/** @typedef {NonNullable<import('./types.package').StackItemCommonConfig<any, import('svelte').Component>['id']>} IdResolver */
+
 		// STEP 1: resolve instance config, merge with common config and variant config, if any
-		/** @type {import('./types.package').StackItemInstanceConfig<string, import('svelte').Component<any>>} */
-		let instanceConfig;
-		/** @type {NonNullable<import('./types.package').StackItemCommonConfig<string, import('svelte').Component>['id']>} */
-		let idResolver;
+		/** @type {Omit<InstanceConfig,'id'> & { id: IdResolver }} */
+		let mergedConfig;
 
 		if (variant === 'custom') {
 			const rConfig =
@@ -85,48 +88,35 @@ export class Stack {
 			if (!rConfig || !rConfig.component) {
 				throw new MissingComponentInCustomPush();
 			}
-			instanceConfig = {
-				...this.config,
-				...rConfig,
-				variant: 'custom',
-				component: rConfig.component,
-				props: rConfig.props ?? {},
-				id: '',
-			};
-			idResolver = /** @type {any} */ (rConfig.id) ?? this.config.id;
+			mergedConfig = defu({ variant: 'custom' }, rConfig, this.config);
 		} else {
+			const rConfig =
+				/** @type {import('./types.package').StackItemByVariantPushConfig<string, import('svelte').Component<any>>} */ (
+					config
+				);
 			const variantConfig = this.#variantConfigMap[variant];
 			if (!variantConfig) {
 				throw new NotFoundVariantConfig(variant, Object.keys(this.#variantConfigMap));
 			}
-			instanceConfig = {
-				...this.config,
-				...variantConfig,
-				...config,
-				props: {
-					...variantConfig.props,
-					...config?.props,
-				},
-				id: '',
-			};
-			idResolver = /** @type {any} */ (config?.id) ?? variantConfig.id ?? this.config.id;
+			mergedConfig = /** @type {typeof mergedConfig} */ (defu(rConfig, variantConfig, this.config));
 		}
 
 		// STEP 2: resolve id for the stack item
-		if (idResolver === 'counter') {
-			instanceConfig.id = (++this.#counter).toString();
-		} else if (idResolver === 'uuid') {
-			instanceConfig.id =
+		let id = '';
+		if (mergedConfig.id === 'counter') {
+			id = (++this.#counter).toString();
+		} else if (mergedConfig.id === 'uuid') {
+			id =
 				'crypto' in globalThis && crypto.randomUUID
 					? crypto.randomUUID()
 					: (++this.#counter).toString();
 		} else {
-			instanceConfig.id = idResolver(instanceConfig);
+			id = mergedConfig.id(mergedConfig);
 		}
 
 		// STEP 3: preparing the `StackItem` instance
 		/** @type {StackItem<any>} */
-		let pushed = new StackItem(instanceConfig);
+		let pushed = new StackItem({ ...mergedConfig, id });
 		pushed.resolution.then(() => {
 			this.items = this.items.filter((n) => n.config.id !== pushed.config.id);
 		});

packages/async-stack/src/types.package.d.ts

@@ -21,7 +21,7 @@ export type StackItemCommonConfig<Variant extends string, UserComponent extends
 	id?:
 		| 'counter'
 		| 'uuid'
-		| ((config: Required<Omit<StackItemInstanceConfig<Variant, UserComponent>, 'id'>>) => string);
+		| ((config: Omit<StackItemInstanceConfig<Variant, UserComponent>, 'id'>) => string);
 };
 
 /** predefined variant config provided while building a {@link Stack} instance */
@@ -37,13 +37,16 @@ export type StackItemVariantConfig<
 	props?: Omit<ComponentProps<UserComponent>, 'item'>;
 };
 
-/** a resolved config for a {@link StackItemInstance} */
+/** a resolved config for a {@link StackItem} */
 export type StackItemInstanceConfig<
 	Variant extends string,
 	UserComponent extends Component<any>,
-> = Required<Omit<StackItemVariantConfig<Variant, UserComponent>, 'id'>> & {
+> = {
 	id: string;
 	timeout: number;
+	variant: Variant;
+	component: UserComponent;
+	props?: Omit<ComponentProps<UserComponent>, 'item'>;
 };
 
 /**