@sprawlify/primitives 0.0.1

package/dist/machines/async-list/index.d.cts

@@ -0,0 +1,89 @@
+import { p as Machine, u as EventObject, y as Service } from "../../types-DejIu60O.cjs";
+
+//#region src/machines/async-list/async-list.types.d.ts
+type SortDirection = "ascending" | "descending";
+interface SortDescriptor<T> {
+  column: keyof T;
+  direction: SortDirection;
+}
+interface LoadDetails<T, C> {
+  signal: AbortSignal | undefined;
+  filterText: string;
+  cursor?: C | undefined;
+  sortDescriptor?: SortDescriptor<T> | undefined;
+}
+interface LoadResult<T, C> {
+  items: T[];
+  cursor?: C | undefined;
+}
+interface SortDetails<T> {
+  items: T[];
+  descriptor: SortDescriptor<T>;
+  filterText: string;
+}
+type LoadDependency = string | number | boolean | undefined | null;
+interface AsyncListProps<T, C> {
+  load: (args: LoadDetails<T, C>) => Promise<LoadResult<T, C>>;
+  sort?: ((args: SortDetails<T>) => Promise<{
+    items: T[];
+  }> | {
+    items: T[];
+  } | undefined) | undefined;
+  initialItems?: T[] | undefined;
+  initialSortDescriptor?: SortDescriptor<T> | undefined;
+  initialFilterText?: string | undefined;
+  dependencies?: LoadDependency[] | undefined;
+  autoReload?: boolean | undefined;
+  onSuccess?: ((details: {
+    items: T[];
+  }) => void | undefined) | undefined;
+  onError?: ((details: {
+    error: Error;
+  }) => void | undefined) | undefined;
+}
+interface AsyncListSchema<T, C> {
+  state: "idle" | "loading" | "sorting";
+  props: AsyncListProps<T, C>;
+  context: {
+    items: T[];
+    filterText: string;
+    cursor?: C | undefined;
+    sortDescriptor?: SortDescriptor<T> | undefined;
+    error?: any | undefined;
+  };
+  refs: {
+    abort: AbortController | null;
+    seq: number;
+  };
+  event: EventObject;
+  action: string;
+  guard: string;
+  effect: string;
+}
+type AsyncListService<T, C> = Service<AsyncListSchema<T, C>>;
+type AsyncListMachine<T, C> = Machine<AsyncListSchema<T, C>>;
+interface AsyncListApi<T, C> {
+  items: T[];
+  filterText: string;
+  cursor: C | undefined;
+  sortDescriptor: SortDescriptor<T> | undefined;
+  loading: boolean;
+  sorting: boolean;
+  empty: boolean;
+  hasMore: boolean;
+  error: any | undefined;
+  abort: VoidFunction;
+  reload: VoidFunction;
+  loadMore: VoidFunction;
+  sort: (sortDescriptor: SortDescriptor<T>) => void;
+  setFilterText: (filterText: string) => void;
+  clearFilter: VoidFunction;
+}
+//#endregion
+//#region src/machines/async-list/async-list.connect.d.ts
+declare function connect<T, C>(service: AsyncListService<T, C>): AsyncListApi<T, C>;
+//#endregion
+//#region src/machines/async-list/async-list.machine.d.ts
+declare const machine: Machine<AsyncListSchema<any, any>>;
+//#endregion
+export { type AsyncListApi as Api, type LoadDependency, type LoadDetails, type LoadResult, type AsyncListMachine as Machine, type AsyncListProps as Props, type AsyncListService as Service, type SortDescriptor, type SortDetails, type SortDirection, connect, machine };

package/dist/machines/async-list/index.d.mts

@@ -0,0 +1,89 @@
+import { p as Machine, u as EventObject, y as Service } from "../../types-DDTcG99l.mjs";
+
+//#region src/machines/async-list/async-list.types.d.ts
+type SortDirection = "ascending" | "descending";
+interface SortDescriptor<T> {
+  column: keyof T;
+  direction: SortDirection;
+}
+interface LoadDetails<T, C> {
+  signal: AbortSignal | undefined;
+  filterText: string;
+  cursor?: C | undefined;
+  sortDescriptor?: SortDescriptor<T> | undefined;
+}
+interface LoadResult<T, C> {
+  items: T[];
+  cursor?: C | undefined;
+}
+interface SortDetails<T> {
+  items: T[];
+  descriptor: SortDescriptor<T>;
+  filterText: string;
+}
+type LoadDependency = string | number | boolean | undefined | null;
+interface AsyncListProps<T, C> {
+  load: (args: LoadDetails<T, C>) => Promise<LoadResult<T, C>>;
+  sort?: ((args: SortDetails<T>) => Promise<{
+    items: T[];
+  }> | {
+    items: T[];
+  } | undefined) | undefined;
+  initialItems?: T[] | undefined;
+  initialSortDescriptor?: SortDescriptor<T> | undefined;
+  initialFilterText?: string | undefined;
+  dependencies?: LoadDependency[] | undefined;
+  autoReload?: boolean | undefined;
+  onSuccess?: ((details: {
+    items: T[];
+  }) => void | undefined) | undefined;
+  onError?: ((details: {
+    error: Error;
+  }) => void | undefined) | undefined;
+}
+interface AsyncListSchema<T, C> {
+  state: "idle" | "loading" | "sorting";
+  props: AsyncListProps<T, C>;
+  context: {
+    items: T[];
+    filterText: string;
+    cursor?: C | undefined;
+    sortDescriptor?: SortDescriptor<T> | undefined;
+    error?: any | undefined;
+  };
+  refs: {
+    abort: AbortController | null;
+    seq: number;
+  };
+  event: EventObject;
+  action: string;
+  guard: string;
+  effect: string;
+}
+type AsyncListService<T, C> = Service<AsyncListSchema<T, C>>;
+type AsyncListMachine<T, C> = Machine<AsyncListSchema<T, C>>;
+interface AsyncListApi<T, C> {
+  items: T[];
+  filterText: string;
+  cursor: C | undefined;
+  sortDescriptor: SortDescriptor<T> | undefined;
+  loading: boolean;
+  sorting: boolean;
+  empty: boolean;
+  hasMore: boolean;
+  error: any | undefined;
+  abort: VoidFunction;
+  reload: VoidFunction;
+  loadMore: VoidFunction;
+  sort: (sortDescriptor: SortDescriptor<T>) => void;
+  setFilterText: (filterText: string) => void;
+  clearFilter: VoidFunction;
+}
+//#endregion
+//#region src/machines/async-list/async-list.connect.d.ts
+declare function connect<T, C>(service: AsyncListService<T, C>): AsyncListApi<T, C>;
+//#endregion
+//#region src/machines/async-list/async-list.machine.d.ts
+declare const machine: Machine<AsyncListSchema<any, any>>;
+//#endregion
+export { type AsyncListApi as Api, type LoadDependency, type LoadDetails, type LoadResult, type AsyncListMachine as Machine, type AsyncListProps as Props, type AsyncListService as Service, type SortDescriptor, type SortDetails, type SortDirection, connect, machine };

package/dist/machines/async-list/index.mjs

@@ -0,0 +1,310 @@
+import "../../dom-query-DFCRhyj1.mjs";
+import { n as ensureProps, t as ensure } from "../../utils-BZyrxWWR.mjs";
+import { a as createMachine } from "../../core-DCFNMTZF.mjs";
+
+//#region src/machines/async-list/async-list.connect.ts
+function connect(service) {
+	const { state, context, send } = service;
+	const loading = state.matches("loading", "sorting");
+	const sorting = state.matches("sorting");
+	const items = context.get("items");
+	const cursor = context.get("cursor");
+	const empty = items.length === 0;
+	const hasMore = cursor != null;
+	return {
+		items,
+		sortDescriptor: context.get("sortDescriptor"),
+		loading,
+		sorting,
+		empty,
+		hasMore,
+		error: context.get("error"),
+		filterText: context.get("filterText"),
+		cursor,
+		abort() {
+			send({ type: "ABORT" });
+		},
+		reload() {
+			send({ type: "RELOAD" });
+		},
+		loadMore() {
+			send({ type: "LOAD_MORE" });
+		},
+		sort(sortDescriptor) {
+			send({
+				type: "SORT",
+				sortDescriptor
+			});
+		},
+		setFilterText(filterText) {
+			send({
+				type: "FILTER",
+				filterText
+			});
+		},
+		clearFilter() {
+			send({
+				type: "FILTER",
+				filterText: ""
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machines/async-list/async-list.machine.ts
+const machine = createMachine({
+	props({ props }) {
+		ensureProps(props, ["load"], "load is required");
+		return props;
+	},
+	context({ prop, bindable }) {
+		return {
+			items: bindable(() => ({ defaultValue: prop("initialItems") ?? [] })),
+			cursor: bindable(() => ({ defaultValue: null })),
+			filterText: bindable(() => ({ defaultValue: prop("initialFilterText") ?? "" })),
+			sortDescriptor: bindable(() => ({ defaultValue: prop("initialSortDescriptor") })),
+			error: bindable(() => ({ defaultValue: void 0 }))
+		};
+	},
+	refs() {
+		return {
+			abort: null,
+			seq: 0
+		};
+	},
+	watch({ prop, track, send }) {
+		track([() => hashDeps(prop("dependencies"))], () => {
+			send({ type: "RELOAD" });
+		});
+	},
+	initialState() {
+		return "idle";
+	},
+	on: { RELOAD: {
+		target: "loading",
+		reenter: true,
+		actions: ["clearItems"]
+	} },
+	entry: ["loadIfNeeded"],
+	states: {
+		idle: { on: {
+			LOAD_MORE: {
+				guard: "hasCursor",
+				target: "loading"
+			},
+			SORT: [{
+				guard: "hasSortFn",
+				target: "sorting",
+				actions: [
+					"setSortDescriptor",
+					"clearCursor",
+					"performSort"
+				]
+			}, {
+				target: "loading",
+				actions: ["setSortDescriptor", "clearCursor"]
+			}],
+			FILTER: {
+				target: "loading",
+				actions: ["setFilterText", "clearCursor"]
+			}
+		} },
+		loading: {
+			entry: ["performFetch"],
+			exit: ["cancelFetch"],
+			on: {
+				SUCCESS: {
+					target: "idle",
+					actions: [
+						"setItems",
+						"setCursor",
+						"clearError",
+						"invokeOnSuccess"
+					]
+				},
+				ERROR: {
+					target: "idle",
+					actions: ["setError", "invokeOnError"]
+				},
+				ABORT: {
+					target: "idle",
+					actions: ["cancelFetch"]
+				},
+				FILTER: {
+					reenter: true,
+					target: "loading",
+					actions: ["setFilterText", "clearCursor"]
+				}
+			}
+		},
+		sorting: { on: {
+			SUCCESS: {
+				target: "idle",
+				actions: [
+					"setItems",
+					"setCursor",
+					"clearError",
+					"invokeOnSuccess"
+				]
+			},
+			ERROR: {
+				target: "idle",
+				actions: ["setError", "invokeOnError"]
+			},
+			ABORT: {
+				target: "idle",
+				actions: ["cancelSort"]
+			},
+			FILTER: {
+				target: "loading",
+				actions: [
+					"setFilterText",
+					"clearCursor",
+					"cancelSort"
+				]
+			},
+			RELOAD: {
+				target: "loading",
+				actions: ["clearItems", "cancelSort"]
+			},
+			SORT: [{
+				guard: "hasSortFn",
+				target: "sorting",
+				reenter: true,
+				actions: [
+					"setSortDescriptor",
+					"clearCursor",
+					"cancelSort",
+					"performSort"
+				]
+			}, {
+				target: "loading",
+				actions: [
+					"setSortDescriptor",
+					"clearCursor",
+					"cancelSort"
+				]
+			}]
+		} }
+	},
+	implementations: {
+		guards: {
+			hasCursor({ context }) {
+				return context.get("cursor") != null;
+			},
+			hasSortFn({ prop }) {
+				return prop("sort") != null;
+			}
+		},
+		actions: {
+			loadIfNeeded({ prop, send }) {
+				if (!prop("autoReload")) return;
+				send({ type: "RELOAD" });
+			},
+			performFetch({ context, prop, refs, send, event }) {
+				refs.set("abort", new AbortController());
+				const abort = refs.get("abort");
+				context.set("error", void 0);
+				const seq = refs.get("seq") + 1;
+				refs.set("seq", seq);
+				const isLoadMore = event.type === "LOAD_MORE";
+				prop("load")({
+					signal: abort?.signal,
+					cursor: isLoadMore ? context.get("cursor") : null,
+					filterText: event.filterText ?? context.get("filterText"),
+					sortDescriptor: event.sortDescriptor ?? context.get("sortDescriptor")
+				}).then(({ items, cursor }) => {
+					if (seq !== refs.get("seq")) return;
+					send({
+						type: "SUCCESS",
+						items,
+						cursor,
+						append: isLoadMore
+					});
+				}).catch((error) => {
+					if (seq !== refs.get("seq")) return;
+					if (isAbortError(error)) return;
+					send({
+						type: "ERROR",
+						error
+					});
+				});
+			},
+			performSort({ context, prop, send, event, refs }) {
+				const sortFn = prop("sort");
+				ensure(sortFn, () => "[sprawlify-js/async-list] sort is required");
+				const currentItems = context.get("items");
+				const filterText = context.get("filterText");
+				const seq = refs.get("seq") + 1;
+				refs.set("seq", seq);
+				Promise.resolve(sortFn({
+					items: currentItems,
+					descriptor: event.sortDescriptor,
+					filterText
+				})).then((r) => {
+					if (seq !== refs.get("seq")) return;
+					send({
+						type: "SUCCESS",
+						items: r?.items ?? currentItems,
+						cursor: void 0,
+						append: false
+					});
+				}).catch((e) => {
+					if (seq !== refs.get("seq")) return;
+					send({
+						type: "ERROR",
+						error: e
+					});
+				});
+			},
+			setSortDescriptor({ context, event }) {
+				context.set("sortDescriptor", event.sortDescriptor);
+			},
+			setFilterText({ context, event }) {
+				context.set("filterText", event.filterText);
+			},
+			invokeOnSuccess({ prop, event }) {
+				prop("onSuccess")?.({ items: event.items });
+			},
+			invokeOnError({ prop, event }) {
+				prop("onError")?.({ error: event.error });
+			},
+			clearItems({ context }) {
+				context.set("items", []);
+			},
+			setItems({ context, event }) {
+				context.set("items", (prev) => event.append ? [...prev, ...event.items] : event.items);
+			},
+			setCursor({ context, event }) {
+				context.set("cursor", event.cursor);
+			},
+			setError({ context, event }) {
+				context.set("error", event.error);
+			},
+			clearError({ context }) {
+				context.set("error", void 0);
+			},
+			clearCursor({ context }) {
+				context.set("cursor", null);
+			},
+			cancelFetch({ refs }) {
+				refs.get("abort")?.abort();
+				refs.set("abort", null);
+			},
+			cancelSort({ refs }) {
+				const seq = refs.get("seq") + 1;
+				refs.set("seq", seq);
+			}
+		}
+	}
+});
+function isAbortError(err) {
+	return err instanceof Error && err.name === "AbortError";
+}
+function hashDeps(deps = []) {
+	return deps.filter(Boolean).join(",");
+}
+
+//#endregion
+export { connect, machine };

package/dist/machines/avatar/index.cjs

@@ -0,0 +1,169 @@
+const require_create_anatomy = require('../../create-anatomy-CDsIFUXg.cjs');
+const require_dom_query = require('../../dom-query-CWZdWUGp.cjs');
+const require_utils = require('../../utils-_6frwjgJ.cjs');
+const require_core = require('../../core-CQFbMdTl.cjs');
+const require_create_props = require('../../create-props-YKy7JIKj.cjs');
+
+//#region src/machines/avatar/avatar.anatomy.ts
+const anatomy = require_create_anatomy.createAnatomy("avatar").parts("root", "image", "fallback");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/machines/avatar/avatar.dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `avatar:${ctx.id}`;
+const getImageId = (ctx) => ctx.ids?.image ?? `avatar:${ctx.id}:image`;
+const getFallbackId = (ctx) => ctx.ids?.fallback ?? `avatar:${ctx.id}:fallback`;
+const getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+const getImageEl = (ctx) => ctx.getById(getImageId(ctx));
+
+//#endregion
+//#region src/machines/avatar/avatar.connect.ts
+function connect(service, normalize) {
+	const { state, send, prop, scope } = service;
+	const loaded = state.matches("loaded");
+	return {
+		loaded,
+		setSrc(src) {
+			getImageEl(scope)?.setAttribute("src", src);
+		},
+		setLoaded() {
+			send({
+				type: "img.loaded",
+				src: "api"
+			});
+		},
+		setError() {
+			send({
+				type: "img.error",
+				src: "api"
+			});
+		},
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				dir: prop("dir"),
+				id: getRootId(scope)
+			});
+		},
+		getImageProps() {
+			return normalize.img({
+				...parts.image.attrs,
+				hidden: !loaded,
+				dir: prop("dir"),
+				id: getImageId(scope),
+				"data-state": loaded ? "visible" : "hidden",
+				onLoad() {
+					send({
+						type: "img.loaded",
+						src: "element"
+					});
+				},
+				onError() {
+					send({
+						type: "img.error",
+						src: "element"
+					});
+				}
+			});
+		},
+		getFallbackProps() {
+			return normalize.element({
+				...parts.fallback.attrs,
+				dir: prop("dir"),
+				id: getFallbackId(scope),
+				hidden: loaded,
+				"data-state": loaded ? "hidden" : "visible"
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machines/avatar/avatar.machine.ts
+const machine = require_core.createMachine({
+	initialState() {
+		return "loading";
+	},
+	effects: ["trackImageRemoval", "trackSrcChange"],
+	on: {
+		"src.change": { target: "loading" },
+		"img.unmount": { target: "error" }
+	},
+	states: {
+		loading: {
+			entry: ["checkImageStatus"],
+			on: {
+				"img.loaded": {
+					target: "loaded",
+					actions: ["invokeOnLoad"]
+				},
+				"img.error": {
+					target: "error",
+					actions: ["invokeOnError"]
+				}
+			}
+		},
+		error: { on: { "img.loaded": {
+			target: "loaded",
+			actions: ["invokeOnLoad"]
+		} } },
+		loaded: { on: { "img.error": {
+			target: "error",
+			actions: ["invokeOnError"]
+		} } }
+	},
+	implementations: {
+		actions: {
+			invokeOnLoad({ prop }) {
+				prop("onStatusChange")?.({ status: "loaded" });
+			},
+			invokeOnError({ prop }) {
+				prop("onStatusChange")?.({ status: "error" });
+			},
+			checkImageStatus({ send, scope }) {
+				const imageEl = getImageEl(scope);
+				if (!imageEl?.complete) return;
+				send({
+					type: hasLoaded(imageEl) ? "img.loaded" : "img.error",
+					src: "ssr"
+				});
+			}
+		},
+		effects: {
+			trackImageRemoval({ send, scope }) {
+				return require_dom_query.observeChildren(getRootEl(scope), { callback(records) {
+					if (Array.from(records[0].removedNodes).find((node) => node.nodeType === Node.ELEMENT_NODE && node.matches("[data-scope=avatar][data-part=image]"))) send({ type: "img.unmount" });
+				} });
+			},
+			trackSrcChange({ send, scope }) {
+				return require_dom_query.observeAttributes(getImageEl(scope), {
+					attributes: ["src", "srcset"],
+					callback() {
+						send({ type: "src.change" });
+					}
+				});
+			}
+		}
+	}
+});
+function hasLoaded(image) {
+	return image.complete && image.naturalWidth !== 0 && image.naturalHeight !== 0;
+}
+
+//#endregion
+//#region src/machines/avatar/avatar.props.ts
+const props = require_create_props.createProps()([
+	"dir",
+	"id",
+	"ids",
+	"onStatusChange",
+	"getRootNode"
+]);
+const splitProps = require_utils.createSplitProps(props);
+
+//#endregion
+exports.anatomy = anatomy;
+exports.connect = connect;
+exports.machine = machine;
+exports.props = props;
+exports.splitProps = splitProps;