@pyreon/zero 0.14.0 → 0.16.0

package/lib/image.js

@@ -1,5 +1,6 @@
 import { createRef, onMount, onUnmount } from "@pyreon/core";
 import { signal } from "@pyreon/reactivity";
+import { jsx, jsxs } from "@pyreon/core/jsx-runtime";
 
 //#region src/utils/use-intersection-observer.ts
 /**
@@ -25,83 +26,37 @@ function useIntersectionObserver(getElement, onIntersect, rootMargin = "200px")
 	});
 }
 
-//#endregion
-//#region ../../core/core/lib/jsx-runtime.js
-/**
-* Hyperscript function — the compiled output of JSX.
-* `<div class="x">hello</div>` → `h("div", { class: "x" }, "hello")`
-*
-* Generic on P so TypeScript validates props match the component's signature
-* at the call site, then stores the result in the loosely-typed VNode.
-*/
-/** Shared empty props sentinel — identity-checked in mountElement to skip applyProps. */
-const EMPTY_PROPS = {};
-function h(type, props, ...children) {
-	return {
-		type,
-		props: props ?? EMPTY_PROPS,
-		children: normalizeChildren(children),
-		key: props?.key ?? null
-	};
-}
-function normalizeChildren(children) {
-	for (let i = 0; i < children.length; i++) if (Array.isArray(children[i])) return flattenChildren(children);
-	return children;
-}
-function flattenChildren(children) {
-	const result = [];
-	for (const child of children) if (Array.isArray(child)) result.push(...flattenChildren(child));
-	else result.push(child);
-	return result;
-}
-/**
-* JSX automatic runtime.
-*
-* When tsconfig has `"jsxImportSource": "@pyreon/core"`, the TS/bundler compiler
-* rewrites JSX to imports from this file automatically:
-*   <div class="x" />  →  jsx("div", { class: "x" })
-*/
-function jsx(type, props, key) {
-	const { children, ...rest } = props;
-	const propsWithKey = key != null ? {
-		...rest,
-		key
-	} : rest;
-	if (typeof type === "function") return h(type, children !== void 0 ? {
-		...propsWithKey,
-		children
-	} : propsWithKey);
-	return h(type, propsWithKey, ...children === void 0 ? [] : Array.isArray(children) ? children : [children]);
-}
-const jsxs = jsx;
-
 //#endregion
 //#region src/image.tsx
 /**
-* Optimized image component with lazy loading, responsive images,
-* multi-format <picture> support, and blur-up placeholders.
+* Composable that provides all image optimization behavior — lazy loading,
+* srcset/sizes resolution, format selection, blur-placeholder state,
+* load tracking.
 *
-* @example
-* // With imagePlugin — spread the import directly
-* import hero from "./hero.jpg?optimize"
-* <Image {...hero} alt="Hero" priority />
+* Use this for full control when `createImage` is too opinionated about
+* the surrounding markup (e.g. custom container layouts, non-`<div>`
+* wrappers, additional overlay elements).
 *
 * @example
-* // Manual usage
-* <Image src="/hero.jpg" alt="Hero" width={1200} height={630} />
+* function MyImage(props: ImageProps) {
+*   const img = useImage(props)
+*   return (
+*     <figure ref={img.containerRef} style={img.containerStyle}>
+*       <img
+*         src={img.src}
+*         srcSet={img.srcSet}
+*         sizes={img.sizes}
+*         alt={props.alt}
+*         loading={img.loading}
+*         onLoad={img.handleLoad}
+*         style={img.imageStyle}
+*       />
+*       <figcaption>{props.alt}</figcaption>
+*     </figure>
+*   )
+* }
 */
-function Image(props) {
-	if (props.raw) return /* @__PURE__ */ jsx("img", {
-		src: props.src,
-		alt: props.alt,
-		width: props.width,
-		height: props.height,
-		class: props.class,
-		style: props.style,
-		decoding: props.decoding ?? "async",
-		loading: props.loading ?? "lazy",
-		fetchPriority: props.priority ? "high" : void 0
-	});
+function useImage(props) {
 	const isEager = props.priority || props.loading === "eager";
 	const loaded = signal(isEager);
 	const inView = signal(isEager);
@@ -109,7 +64,7 @@ function Image(props) {
 	const resolvedSrcset = typeof props.srcset === "string" ? props.srcset : props.srcset?.map((s) => `${s.src} ${s.width}w`).join(", ");
 	const sizes = props.sizes ?? "100vw";
 	const fit = props.fit ?? "cover";
-	const hasFormats = props.formats && props.formats.length > 0;
+	const hasFormats = !!(props.formats && props.formats.length > 0);
 	const aspectRatio = `${props.width} / ${props.height}`;
 	if (!isEager) useIntersectionObserver(() => containerRef.current ?? void 0, () => inView.set(true));
 	const containerStyle = [
@@ -120,54 +75,132 @@ function Image(props) {
 		"width: 100%",
 		props.style
 	].filter(Boolean).join("; ");
-	const imgEl = /* @__PURE__ */ jsx("img", {
+	const imageStyle = () => [
+		"display: block",
+		"width: 100%",
+		"height: 100%",
+		`object-fit: ${fit}`,
+		"transition: opacity 0.3s ease",
+		props.placeholder && !loaded() ? "opacity: 0" : "opacity: 1"
+	].join("; ");
+	const placeholderStyle = () => [
+		"position: absolute",
+		"inset: 0",
+		"width: 100%",
+		"height: 100%",
+		"object-fit: cover",
+		"filter: blur(20px)",
+		"transform: scale(1.1)",
+		"transition: opacity 0.4s ease",
+		loaded() ? "opacity: 0; pointer-events: none" : "opacity: 1"
+	].join("; ");
+	return {
+		containerRef,
+		inView,
+		loaded,
 		src: () => inView() ? props.src : "",
 		srcSet: () => !hasFormats && inView() && resolvedSrcset ? resolvedSrcset : "",
 		sizes: resolvedSrcset ? sizes : void 0,
-		alt: props.alt,
-		width: props.width,
-		height: props.height,
+		aspectRatio,
+		containerStyle,
+		imageStyle,
+		placeholderStyle,
 		loading: isEager ? "eager" : "lazy",
-		decoding: props.decoding ?? "async",
 		fetchPriority: props.priority ? "high" : void 0,
-		onLoad: () => loaded.set(true),
-		style: () => [
-			"display: block",
-			"width: 100%",
-			"height: 100%",
-			`object-fit: ${fit}`,
-			"transition: opacity 0.3s ease",
-			props.placeholder && !loaded() ? "opacity: 0" : "opacity: 1"
-		].join("; ")
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		ref: containerRef,
-		class: props.class,
-		style: containerStyle,
-		children: [props.placeholder && /* @__PURE__ */ jsx("img", {
+		handleLoad: () => loaded.set(true),
+		formats: props.formats,
+		hasFormats
+	};
+}
+/**
+* Higher-order component that wraps any component with image optimization.
+*
+* The wrapped component receives {@link ImageRenderProps} with the pre-rendered
+* `image` JSX (bare `<img>` OR `<picture>` tree depending on formats), the
+* pre-rendered `placeholder` JSX, and the container ref + styles. Consumers
+* compose those pieces with whatever wrapper element / layout they want.
+*
+* @example
+* // Custom figure-based image with caption
+* const FigureImage = createImage((props) => (
+*   <figure ref={props.containerRef} class={props.class} style={props.containerStyle}>
+*     {props.placeholder}
+*     {props.image}
+*     <figcaption>Caption goes here</figcaption>
+*   </figure>
+* ))
+*
+* // Usage — identical to default <Image>
+* <FigureImage src="/hero.jpg" alt="Hero" width={1200} height={630} />
+*/
+function createImage(Component) {
+	return function WrappedImage(props) {
+		if (props.raw) return /* @__PURE__ */ jsx("img", {
+			src: props.src,
+			alt: props.alt,
+			width: props.width,
+			height: props.height,
+			class: props.class,
+			style: props.style,
+			decoding: props.decoding ?? "async",
+			loading: props.loading ?? "lazy",
+			fetchPriority: props.priority ? "high" : void 0
+		});
+		const img = useImage(props);
+		const imgEl = /* @__PURE__ */ jsx("img", {
+			src: img.src,
+			srcSet: img.srcSet,
+			sizes: img.sizes,
+			alt: props.alt,
+			width: props.width,
+			height: props.height,
+			loading: img.loading,
+			decoding: props.decoding ?? "async",
+			fetchPriority: img.fetchPriority,
+			onLoad: img.handleLoad,
+			style: img.imageStyle
+		});
+		const placeholderEl = props.placeholder ? /* @__PURE__ */ jsx("img", {
 			src: props.placeholder,
 			alt: "",
 			"aria-hidden": "true",
 			loading: "eager",
-			style: () => [
-				"position: absolute",
-				"inset: 0",
-				"width: 100%",
-				"height: 100%",
-				"object-fit: cover",
-				"filter: blur(20px)",
-				"transform: scale(1.1)",
-				"transition: opacity 0.4s ease",
-				loaded() ? "opacity: 0; pointer-events: none" : "opacity: 1"
-			].join("; ")
-		}), hasFormats ? /* @__PURE__ */ jsxs("picture", { children: [props.formats?.map((fmt) => /* @__PURE__ */ jsx("source", {
+			style: img.placeholderStyle
+		}) : null;
+		const imageEl = img.hasFormats ? /* @__PURE__ */ jsxs("picture", { children: [img.formats?.map((fmt) => /* @__PURE__ */ jsx("source", {
 			type: fmt.type,
-			srcSet: () => inView() ? fmt.srcset ?? "" : "",
-			sizes
-		})), imgEl] }) : imgEl]
-	});
+			srcSet: () => img.inView() ? fmt.srcset ?? "" : "",
+			sizes: img.sizes
+		})), imgEl] }) : imgEl;
+		return /* @__PURE__ */ jsx(Component, {
+			containerRef: img.containerRef,
+			class: props.class,
+			containerStyle: img.containerStyle,
+			placeholder: placeholderEl,
+			image: imageEl
+		});
+	};
 }
+/**
+* Default optimized image component with lazy loading, responsive srcset,
+* `<picture>` multi-format support, and blur-up placeholders.
+*
+* @example
+* // With imagePlugin — spread the import directly
+* import hero from "./hero.jpg?optimize"
+* <Image {...hero} alt="Hero" priority />
+*
+* @example
+* // Manual usage
+* <Image src="/hero.jpg" alt="Hero" width={1200} height={630} />
+*/
+const Image = createImage((props) => /* @__PURE__ */ jsxs("div", {
+	ref: props.containerRef,
+	class: props.class,
+	style: props.containerStyle,
+	children: [props.placeholder, props.image]
+}));
 
 //#endregion
-export { Image };
+export { Image, createImage, useImage };
 //# sourceMappingURL=image.js.map