@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/presence/index.cjs

@@ -0,0 +1,193 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_dom_query = require("../../dom-query-CQzY93XU.cjs");
+const require_computed_style = require("../../computed-style-DLArEFNw.cjs");
+const require_event = require("../../event-DDz-mMhM.cjs");
+const require_raf = require("../../raf-BSDcY4UD.cjs");
+const require_set = require("../../set-DrtWCLFb.cjs");
+const require_core = require("../../core-BNMw-JId.cjs");
+const require_create_props = require("../../create-props-CjLx2oS8.cjs");
+//#region src/machines/presence/connect.ts
+function connect(service, _normalize) {
+	const { state, send, context } = service;
+	const present = state.matches("mounted", "unmountSuspended");
+	return {
+		skip: !context.get("initial"),
+		present,
+		setNode(node) {
+			if (!node) return;
+			send({
+				type: "NODE.SET",
+				node
+			});
+		},
+		unmount() {
+			send({ type: "UNMOUNT" });
+		}
+	};
+}
+//#endregion
+//#region src/machines/presence/machine.ts
+const machine = require_core.createMachine({
+	props({ props }) {
+		return {
+			...props,
+			present: !!props.present
+		};
+	},
+	initialState({ prop }) {
+		return prop("present") ? "mounted" : "unmounted";
+	},
+	refs() {
+		return {
+			node: null,
+			styles: null
+		};
+	},
+	context({ bindable }) {
+		return {
+			unmountAnimationName: bindable(() => ({ defaultValue: null })),
+			prevAnimationName: bindable(() => ({ defaultValue: null })),
+			present: bindable(() => ({ defaultValue: false })),
+			initial: bindable(() => ({
+				sync: true,
+				defaultValue: false
+			}))
+		};
+	},
+	exit: ["cleanupNode"],
+	watch({ track, prop, send }) {
+		track([() => prop("present")], () => {
+			send({ type: "PRESENCE.CHANGED" });
+		});
+	},
+	on: {
+		"NODE.SET": { actions: ["setupNode"] },
+		"PRESENCE.CHANGED": { actions: ["setInitial", "syncPresence"] }
+	},
+	states: {
+		mounted: { on: {
+			UNMOUNT: {
+				target: "unmounted",
+				actions: ["clearPrevAnimationName", "invokeOnExitComplete"]
+			},
+			"UNMOUNT.SUSPEND": { target: "unmountSuspended" }
+		} },
+		unmountSuspended: {
+			effects: ["trackAnimationEvents"],
+			on: {
+				MOUNT: {
+					target: "mounted",
+					actions: ["setPrevAnimationName"]
+				},
+				UNMOUNT: {
+					target: "unmounted",
+					actions: ["clearPrevAnimationName", "invokeOnExitComplete"]
+				}
+			}
+		},
+		unmounted: { on: { MOUNT: {
+			target: "mounted",
+			actions: ["setPrevAnimationName"]
+		} } }
+	},
+	implementations: {
+		actions: {
+			setInitial: ({ context }) => {
+				if (context.get("initial")) return;
+				queueMicrotask(() => {
+					context.set("initial", true);
+				});
+			},
+			invokeOnExitComplete: ({ prop, refs }) => {
+				prop("onExitComplete")?.();
+				const node = refs.get("node");
+				if (!node) return;
+				const event = new (require_dom_query.getWindow(node)).CustomEvent("exitcomplete", { bubbles: false });
+				node.dispatchEvent(event);
+			},
+			setupNode: ({ refs, event }) => {
+				if (refs.get("node") === event.node) return;
+				refs.set("node", event.node);
+				refs.set("styles", require_computed_style.getComputedStyle(event.node));
+			},
+			cleanupNode: ({ refs }) => {
+				refs.set("node", null);
+				refs.set("styles", null);
+			},
+			syncPresence: ({ context, refs, send, prop }) => {
+				const presentProp = prop("present");
+				if (presentProp) return send({
+					type: "MOUNT",
+					src: "presence.changed"
+				});
+				const node = refs.get("node");
+				if (!presentProp && node?.ownerDocument.visibilityState === "hidden") return send({
+					type: "UNMOUNT",
+					src: "visibilitychange"
+				});
+				require_raf.raf(() => {
+					if (prop("present")) return;
+					const animationName = getAnimationName(refs.get("styles"));
+					context.set("unmountAnimationName", animationName);
+					if (animationName === "none" || animationName === context.get("prevAnimationName") || refs.get("styles")?.display === "none" || refs.get("styles")?.animationDuration === "0s") send({
+						type: "UNMOUNT",
+						src: "presence.changed"
+					});
+					else send({ type: "UNMOUNT.SUSPEND" });
+				});
+			},
+			setPrevAnimationName: ({ context, refs }) => {
+				require_raf.raf(() => {
+					context.set("prevAnimationName", getAnimationName(refs.get("styles")));
+				});
+			},
+			clearPrevAnimationName: ({ context }) => {
+				context.set("prevAnimationName", null);
+			}
+		},
+		effects: { trackAnimationEvents: ({ context, refs, send, prop }) => {
+			const node = refs.get("node");
+			if (!node) return;
+			const onStart = (event) => {
+				if ((event.composedPath?.()?.[0] ?? event.target) === node) context.set("prevAnimationName", getAnimationName(refs.get("styles")));
+			};
+			const onEnd = (event) => {
+				const animationName = getAnimationName(refs.get("styles"));
+				if (require_event.getEventTarget(event) === node && animationName === context.get("unmountAnimationName") && !prop("present")) send({
+					type: "UNMOUNT",
+					src: "animationend"
+				});
+			};
+			const onCancel = (event) => {
+				if (require_event.getEventTarget(event) === node && !prop("present")) send({
+					type: "UNMOUNT",
+					src: "animationcancel"
+				});
+			};
+			node.addEventListener("animationstart", onStart);
+			node.addEventListener("animationcancel", onCancel);
+			node.addEventListener("animationend", onEnd);
+			const cleanupStyles = require_set.setStyle(node, { animationFillMode: "forwards" });
+			return () => {
+				node.removeEventListener("animationstart", onStart);
+				node.removeEventListener("animationcancel", onCancel);
+				node.removeEventListener("animationend", onEnd);
+				require_raf.nextTick(() => cleanupStyles());
+			};
+		} }
+	}
+});
+function getAnimationName(styles) {
+	return styles?.animationName || "none";
+}
+//#endregion
+//#region src/machines/presence/props.ts
+const props = require_create_props.createProps()([
+	"onExitComplete",
+	"present",
+	"immediate"
+]);
+//#endregion
+exports.connect = connect;
+exports.machine = machine;
+exports.props = props;

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

@@ -0,0 +1,44 @@
+import { M as Service, S as EventObject, T as Machine } from "../../index-BKgxIVbE.cjs";
+import { b as PropTypes, y as NormalizeProps } from "../../index-BXfunVyD.cjs";
+import "../../index-BF6G2RiC.cjs";
+//#region src/machines/presence/types.d.ts
+interface PresenceProps {
+  present?: boolean | undefined;
+  onExitComplete?: VoidFunction | undefined;
+  immediate?: boolean | undefined;
+}
+interface PresenceSchema {
+  refs: {
+    node: HTMLElement | null;
+    styles: CSSStyleDeclaration | null;
+  };
+  props: PresenceProps;
+  context: {
+    initial: boolean;
+    unmountAnimationName: string | null;
+    prevAnimationName: string | null;
+  };
+  state: "unmounted" | "unmountSuspended" | "mounted";
+  action: string;
+  effect: string;
+  event: EventObject;
+}
+type PresenceService = Service<PresenceSchema>;
+type PresenceMachine = Machine<PresenceSchema>;
+interface PresenceApi {
+  skip: boolean;
+  present: boolean;
+  setNode: (node: HTMLElement | null) => void;
+  unmount: VoidFunction;
+}
+//#endregion
+//#region src/machines/presence/connect.d.ts
+declare function connect<T extends PropTypes>(service: Service<PresenceSchema>, _normalize: NormalizeProps<T>): PresenceApi;
+//#endregion
+//#region src/machines/presence/machine.d.ts
+declare const machine: Machine<PresenceSchema>;
+//#endregion
+//#region src/machines/presence/props.d.ts
+declare const props: (keyof PresenceProps)[];
+//#endregion
+export { type PresenceApi as Api, type PresenceMachine as Machine, type PresenceProps as Props, type PresenceService as Service, connect, machine, props };

package/dist/machines/presence/index.d.ts

@@ -0,0 +1,44 @@
+import { M as Service, S as EventObject, T as Machine } from "../../index-CFoN0L3C.js";
+import { b as PropTypes, y as NormalizeProps } from "../../index-BXfunVyD.js";
+import "../../index-BdeZuSX6.js";
+//#region src/machines/presence/types.d.ts
+interface PresenceProps {
+  present?: boolean | undefined;
+  onExitComplete?: VoidFunction | undefined;
+  immediate?: boolean | undefined;
+}
+interface PresenceSchema {
+  refs: {
+    node: HTMLElement | null;
+    styles: CSSStyleDeclaration | null;
+  };
+  props: PresenceProps;
+  context: {
+    initial: boolean;
+    unmountAnimationName: string | null;
+    prevAnimationName: string | null;
+  };
+  state: "unmounted" | "unmountSuspended" | "mounted";
+  action: string;
+  effect: string;
+  event: EventObject;
+}
+type PresenceService = Service<PresenceSchema>;
+type PresenceMachine = Machine<PresenceSchema>;
+interface PresenceApi {
+  skip: boolean;
+  present: boolean;
+  setNode: (node: HTMLElement | null) => void;
+  unmount: VoidFunction;
+}
+//#endregion
+//#region src/machines/presence/connect.d.ts
+declare function connect<T extends PropTypes>(service: Service<PresenceSchema>, _normalize: NormalizeProps<T>): PresenceApi;
+//#endregion
+//#region src/machines/presence/machine.d.ts
+declare const machine: Machine<PresenceSchema>;
+//#endregion
+//#region src/machines/presence/props.d.ts
+declare const props: (keyof PresenceProps)[];
+//#endregion
+export { type PresenceApi as Api, type PresenceMachine as Machine, type PresenceProps as Props, type PresenceService as Service, connect, machine, props };

package/dist/machines/presence/index.js

@@ -0,0 +1,190 @@
+import { S as getWindow } from "../../dom-query-e7fh0TEH.js";
+import { t as getComputedStyle } from "../../computed-style-B1MKlCoo.js";
+import { s as getEventTarget } from "../../event-bTItRgiw.js";
+import { i as raf, n as nextTick } from "../../raf-Dhvm7f1e.js";
+import { r as setStyle } from "../../set-CFNGOW5W.js";
+import { r as createMachine } from "../../core-CJ0MZr3D.js";
+import { t as createProps } from "../../create-props-CgtcN_Qu.js";
+//#region src/machines/presence/connect.ts
+function connect(service, _normalize) {
+	const { state, send, context } = service;
+	const present = state.matches("mounted", "unmountSuspended");
+	return {
+		skip: !context.get("initial"),
+		present,
+		setNode(node) {
+			if (!node) return;
+			send({
+				type: "NODE.SET",
+				node
+			});
+		},
+		unmount() {
+			send({ type: "UNMOUNT" });
+		}
+	};
+}
+//#endregion
+//#region src/machines/presence/machine.ts
+const machine = createMachine({
+	props({ props }) {
+		return {
+			...props,
+			present: !!props.present
+		};
+	},
+	initialState({ prop }) {
+		return prop("present") ? "mounted" : "unmounted";
+	},
+	refs() {
+		return {
+			node: null,
+			styles: null
+		};
+	},
+	context({ bindable }) {
+		return {
+			unmountAnimationName: bindable(() => ({ defaultValue: null })),
+			prevAnimationName: bindable(() => ({ defaultValue: null })),
+			present: bindable(() => ({ defaultValue: false })),
+			initial: bindable(() => ({
+				sync: true,
+				defaultValue: false
+			}))
+		};
+	},
+	exit: ["cleanupNode"],
+	watch({ track, prop, send }) {
+		track([() => prop("present")], () => {
+			send({ type: "PRESENCE.CHANGED" });
+		});
+	},
+	on: {
+		"NODE.SET": { actions: ["setupNode"] },
+		"PRESENCE.CHANGED": { actions: ["setInitial", "syncPresence"] }
+	},
+	states: {
+		mounted: { on: {
+			UNMOUNT: {
+				target: "unmounted",
+				actions: ["clearPrevAnimationName", "invokeOnExitComplete"]
+			},
+			"UNMOUNT.SUSPEND": { target: "unmountSuspended" }
+		} },
+		unmountSuspended: {
+			effects: ["trackAnimationEvents"],
+			on: {
+				MOUNT: {
+					target: "mounted",
+					actions: ["setPrevAnimationName"]
+				},
+				UNMOUNT: {
+					target: "unmounted",
+					actions: ["clearPrevAnimationName", "invokeOnExitComplete"]
+				}
+			}
+		},
+		unmounted: { on: { MOUNT: {
+			target: "mounted",
+			actions: ["setPrevAnimationName"]
+		} } }
+	},
+	implementations: {
+		actions: {
+			setInitial: ({ context }) => {
+				if (context.get("initial")) return;
+				queueMicrotask(() => {
+					context.set("initial", true);
+				});
+			},
+			invokeOnExitComplete: ({ prop, refs }) => {
+				prop("onExitComplete")?.();
+				const node = refs.get("node");
+				if (!node) return;
+				const event = new (getWindow(node)).CustomEvent("exitcomplete", { bubbles: false });
+				node.dispatchEvent(event);
+			},
+			setupNode: ({ refs, event }) => {
+				if (refs.get("node") === event.node) return;
+				refs.set("node", event.node);
+				refs.set("styles", getComputedStyle(event.node));
+			},
+			cleanupNode: ({ refs }) => {
+				refs.set("node", null);
+				refs.set("styles", null);
+			},
+			syncPresence: ({ context, refs, send, prop }) => {
+				const presentProp = prop("present");
+				if (presentProp) return send({
+					type: "MOUNT",
+					src: "presence.changed"
+				});
+				const node = refs.get("node");
+				if (!presentProp && node?.ownerDocument.visibilityState === "hidden") return send({
+					type: "UNMOUNT",
+					src: "visibilitychange"
+				});
+				raf(() => {
+					if (prop("present")) return;
+					const animationName = getAnimationName(refs.get("styles"));
+					context.set("unmountAnimationName", animationName);
+					if (animationName === "none" || animationName === context.get("prevAnimationName") || refs.get("styles")?.display === "none" || refs.get("styles")?.animationDuration === "0s") send({
+						type: "UNMOUNT",
+						src: "presence.changed"
+					});
+					else send({ type: "UNMOUNT.SUSPEND" });
+				});
+			},
+			setPrevAnimationName: ({ context, refs }) => {
+				raf(() => {
+					context.set("prevAnimationName", getAnimationName(refs.get("styles")));
+				});
+			},
+			clearPrevAnimationName: ({ context }) => {
+				context.set("prevAnimationName", null);
+			}
+		},
+		effects: { trackAnimationEvents: ({ context, refs, send, prop }) => {
+			const node = refs.get("node");
+			if (!node) return;
+			const onStart = (event) => {
+				if ((event.composedPath?.()?.[0] ?? event.target) === node) context.set("prevAnimationName", getAnimationName(refs.get("styles")));
+			};
+			const onEnd = (event) => {
+				const animationName = getAnimationName(refs.get("styles"));
+				if (getEventTarget(event) === node && animationName === context.get("unmountAnimationName") && !prop("present")) send({
+					type: "UNMOUNT",
+					src: "animationend"
+				});
+			};
+			const onCancel = (event) => {
+				if (getEventTarget(event) === node && !prop("present")) send({
+					type: "UNMOUNT",
+					src: "animationcancel"
+				});
+			};
+			node.addEventListener("animationstart", onStart);
+			node.addEventListener("animationcancel", onCancel);
+			node.addEventListener("animationend", onEnd);
+			const cleanupStyles = setStyle(node, { animationFillMode: "forwards" });
+			return () => {
+				node.removeEventListener("animationstart", onStart);
+				node.removeEventListener("animationcancel", onCancel);
+				node.removeEventListener("animationend", onEnd);
+				nextTick(() => cleanupStyles());
+			};
+		} }
+	}
+});
+function getAnimationName(styles) {
+	return styles?.animationName || "none";
+}
+//#endregion
+//#region src/machines/presence/props.ts
+const props = createProps()([
+	"onExitComplete",
+	"present",
+	"immediate"
+]);
+//#endregion
+export { connect, machine, props };