@sprawlify/primitives 0.0.1

package/dist/machines/avatar/index.d.cts

@@ -0,0 +1,63 @@
+import { n as AnatomyInstance } from "../../create-anatomy-BGQ8pv8J.cjs";
+import { p as Machine, y as Service } from "../../types-DejIu60O.cjs";
+import { b as NormalizeProps, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-Bqw3r34-.cjs";
+
+//#region src/machines/avatar/avatar.anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "image" | "fallback">;
+//#endregion
+//#region src/machines/avatar/avatar.types.d.ts
+type LoadStatus = "error" | "loaded";
+interface StatusChangeDetails {
+  status: LoadStatus;
+}
+type ElementIds = Partial<{
+  root: string;
+  image: string;
+  fallback: string;
+}>;
+interface AvatarProps extends CommonProperties, DirectionProperty {
+  onStatusChange?: ((details: StatusChangeDetails) => void) | undefined;
+  ids?: ElementIds | undefined;
+}
+interface AvatarSchema {
+  props: AvatarProps;
+  context: any;
+  initial: "loading";
+  effect: "trackImageRemoval" | "trackSrcChange";
+  action: "invokeOnLoad" | "invokeOnError" | "checkImageStatus";
+  event: {
+    type: "img.loaded";
+    src?: string | undefined;
+  } | {
+    type: "img.error";
+    src?: string | undefined;
+  } | {
+    type: "img.unmount";
+  } | {
+    type: "src.change";
+  };
+  state: "loading" | "error" | "loaded";
+}
+type AvatarService = Service<AvatarSchema>;
+type AvatarMachine = Machine<AvatarSchema>;
+interface AvatarApi<T extends PropTypes = PropTypes> {
+  loaded: boolean;
+  setSrc: (src: string) => void;
+  setLoaded: VoidFunction;
+  setError: VoidFunction;
+  getRootProps: () => T["element"];
+  getImageProps: () => T["img"];
+  getFallbackProps: () => T["element"];
+}
+//#endregion
+//#region src/machines/avatar/avatar.connect.d.ts
+declare function connect<T extends PropTypes>(service: Service<AvatarSchema>, normalize: NormalizeProps<T>): AvatarApi<T>;
+//#endregion
+//#region src/machines/avatar/avatar.machine.d.ts
+declare const machine: Machine<AvatarSchema>;
+//#endregion
+//#region src/machines/avatar/avatar.props.d.ts
+declare const props: (keyof AvatarProps)[];
+declare const splitProps: <Props extends Partial<AvatarProps>>(props: Props) => [Partial<AvatarProps>, Omit<Props, keyof AvatarProps>];
+//#endregion
+export { type AvatarApi as Api, type ElementIds, type LoadStatus, type AvatarMachine as Machine, type AvatarProps as Props, type AvatarService as Service, type StatusChangeDetails, anatomy, connect, machine, props, splitProps };

package/dist/machines/avatar/index.d.mts

@@ -0,0 +1,63 @@
+import { n as AnatomyInstance } from "../../create-anatomy-B3XYc-qG.mjs";
+import { p as Machine, y as Service } from "../../types-DDTcG99l.mjs";
+import { b as NormalizeProps, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-C0MKXQmE.mjs";
+
+//#region src/machines/avatar/avatar.anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "image" | "fallback">;
+//#endregion
+//#region src/machines/avatar/avatar.types.d.ts
+type LoadStatus = "error" | "loaded";
+interface StatusChangeDetails {
+  status: LoadStatus;
+}
+type ElementIds = Partial<{
+  root: string;
+  image: string;
+  fallback: string;
+}>;
+interface AvatarProps extends CommonProperties, DirectionProperty {
+  onStatusChange?: ((details: StatusChangeDetails) => void) | undefined;
+  ids?: ElementIds | undefined;
+}
+interface AvatarSchema {
+  props: AvatarProps;
+  context: any;
+  initial: "loading";
+  effect: "trackImageRemoval" | "trackSrcChange";
+  action: "invokeOnLoad" | "invokeOnError" | "checkImageStatus";
+  event: {
+    type: "img.loaded";
+    src?: string | undefined;
+  } | {
+    type: "img.error";
+    src?: string | undefined;
+  } | {
+    type: "img.unmount";
+  } | {
+    type: "src.change";
+  };
+  state: "loading" | "error" | "loaded";
+}
+type AvatarService = Service<AvatarSchema>;
+type AvatarMachine = Machine<AvatarSchema>;
+interface AvatarApi<T extends PropTypes = PropTypes> {
+  loaded: boolean;
+  setSrc: (src: string) => void;
+  setLoaded: VoidFunction;
+  setError: VoidFunction;
+  getRootProps: () => T["element"];
+  getImageProps: () => T["img"];
+  getFallbackProps: () => T["element"];
+}
+//#endregion
+//#region src/machines/avatar/avatar.connect.d.ts
+declare function connect<T extends PropTypes>(service: Service<AvatarSchema>, normalize: NormalizeProps<T>): AvatarApi<T>;
+//#endregion
+//#region src/machines/avatar/avatar.machine.d.ts
+declare const machine: Machine<AvatarSchema>;
+//#endregion
+//#region src/machines/avatar/avatar.props.d.ts
+declare const props: (keyof AvatarProps)[];
+declare const splitProps: <Props extends Partial<AvatarProps>>(props: Props) => [Partial<AvatarProps>, Omit<Props, keyof AvatarProps>];
+//#endregion
+export { type AvatarApi as Api, type ElementIds, type LoadStatus, type AvatarMachine as Machine, type AvatarProps as Props, type AvatarService as Service, type StatusChangeDetails, anatomy, connect, machine, props, splitProps };

package/dist/machines/avatar/index.mjs

@@ -0,0 +1,165 @@
+import { t as createAnatomy } from "../../create-anatomy-BbDZbHpC.mjs";
+import { R as observeAttributes, z as observeChildren } from "../../dom-query-DFCRhyj1.mjs";
+import { u as createSplitProps } from "../../utils-BZyrxWWR.mjs";
+import { a as createMachine } from "../../core-DCFNMTZF.mjs";
+import { t as createProps } from "../../create-props-BnF_vl-E.mjs";
+
+//#region src/machines/avatar/avatar.anatomy.ts
+const 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 = 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 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 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 = createProps()([
+	"dir",
+	"id",
+	"ids",
+	"onStatusChange",
+	"getRootNode"
+]);
+const splitProps = createSplitProps(props);
+
+//#endregion
+export { anatomy, connect, machine, props, splitProps };