@getcronit/pylon 3.0.0-canary-20250303121751.7a1e28546f22cace7b91da6877508f76107e42aa → 3.0.0-canary-20250303143548.bb9615641321063a172cd6af0a5cd52e2a2bc0a1

package/dist/pages/image.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface ImageProps {
+    src: string;
+    alt?: string;
+    className?: string;
+    width?: number;
+    height?: number;
+    blurDataURL?: string;
+}
+export declare const PylonImage: React.FC<ImageProps>;

package/dist/pages/index.d.ts

@@ -1,2 +1,3 @@
 export * as __PYLON_ROUTER_INTERNALS_DO_NOT_USE from 'react-router';
 export { type PageProps, type PageData } from '../plugins/use-pages/index';
+export { PylonImage as Image } from './image';

package/dist/pages/index.js

@@ -1,6 +1,64 @@
 // src/pages/index.ts
 import * as __PYLON_ROUTER_INTERNALS_DO_NOT_USE from "react-router";
+
+// src/pages/image.tsx
+import { useState, useEffect, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var usePylonImageValues = (props) => {
+  return useMemo(() => {
+    const url = new URL(props.src, "http://localhost");
+    const searchParams = new URLSearchParams(url.search);
+    const getValue = (propValue, paramKey) => propValue ?? searchParams.get(paramKey);
+    const width = getValue(props.width, "w");
+    const height = getValue(props.height, "h");
+    const blurDataURL = getValue(props.blurDataURL, "blurDataURL");
+    const pylonMediaSearchParams = new URLSearchParams({
+      src: url.pathname,
+      ...width && { w: width.toString() },
+      ...height && { h: height.toString() }
+    });
+    const finalSrc = `/__pylon/image?${pylonMediaSearchParams.toString()}`;
+    return {
+      width: width ? parseInt(width) : void 0,
+      height: height ? parseInt(height) : void 0,
+      blurDataURL,
+      src: finalSrc
+    };
+  }, [props]);
+};
+var PylonImage = (props) => {
+  console.log("PylonImage", props);
+  const values = usePylonImageValues(props);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const imgRef = useRef(null);
+  console.log("mgRef.current?.complete", imgRef.current?.complete);
+  useEffect(() => {
+    if (imgRef.current?.complete) {
+      setIsLoaded(true);
+    }
+  }, [imgRef.current]);
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      ref: imgRef,
+      src: values.src,
+      alt: props.alt,
+      className: props.className,
+      width: values.width,
+      height: values.height,
+      onLoad: () => setIsLoaded(true),
+      style: {
+        backgroundImage: `url(${values.blurDataURL})`,
+        backgroundSize: "cover",
+        filter: !isLoaded ? "blur(5px)" : "none",
+        transition: "filter 0.3s ease-out, opacity 0.3s ease-out"
+      },
+      loading: "lazy"
+    }
+  );
+};
 export {
+  PylonImage as Image,
   __PYLON_ROUTER_INTERNALS_DO_NOT_USE
 };
 //# sourceMappingURL=index.js.map

package/dist/pages/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/pages/index.ts"],
-  "sourcesContent": ["export * as __PYLON_ROUTER_INTERNALS_DO_NOT_USE from 'react-router'\nexport {type PageProps, type PageData} from '../plugins/use-pages/index'\n"],
-  "mappings": ";AAAA,YAAY,yCAAyC;",
+  "sources": ["../../src/pages/index.ts", "../../src/pages/image.tsx"],
+  "sourcesContent": ["export * as __PYLON_ROUTER_INTERNALS_DO_NOT_USE from 'react-router'\nexport {type PageProps, type PageData} from '../plugins/use-pages/index'\nexport {PylonImage as Image} from './image'\n", "import React, {useState, useEffect, useMemo, useRef} from 'react'\n\nexport interface ImageProps {\n  src: string\n  alt?: string\n  className?: string\n  width?: number\n  height?: number\n  blurDataURL?: string\n}\n\n/**\n * Custom hook to process and extract image properties,\n * ensuring correct values for width, height, and blur data.\n * Generates a final image URL compatible with Pylon's media proxy.\n *\n * @param {ImageProps} props - The image properties including src, width, height, and blurDataURL.\n * @returns {Object} The processed image values: width, height, blurDataURL, and final image source.\n */\nconst usePylonImageValues = (\n  props: ImageProps\n): {\n  src: string\n  width?: number\n  height?: number\n  blurDataURL?: string\n} => {\n  return useMemo(() => {\n    // Parse the image source URL to extract query parameters\n    const url = new URL(props.src, 'http://localhost')\n    const searchParams = new URLSearchParams(url.search)\n\n    // Extract values, prioritizing props over query params\n    const getValue = (propValue, paramKey) =>\n      propValue ?? searchParams.get(paramKey)\n    const width = getValue(props.width, 'w')\n    const height = getValue(props.height, 'h')\n    const blurDataURL = getValue(props.blurDataURL, 'blurDataURL')\n\n    // Prepare Pylon-specific query params\n    const pylonMediaSearchParams = new URLSearchParams({\n      src: url.pathname,\n      ...(width && {w: width.toString()}),\n      ...(height && {h: height.toString()})\n    })\n\n    // Construct the final image source URL\n    const finalSrc = `/__pylon/image?${pylonMediaSearchParams.toString()}`\n\n    return {\n      width: width ? parseInt(width) : undefined,\n      height: height ? parseInt(height) : undefined,\n      blurDataURL,\n      src: finalSrc\n    }\n  }, [props])\n}\n\nexport const PylonImage: React.FC<ImageProps> = props => {\n  console.log('PylonImage', props)\n\n  const values = usePylonImageValues(props)\n  const [isLoaded, setIsLoaded] = useState(false)\n  const imgRef = useRef<HTMLImageElement | null>(null)\n\n  console.log('mgRef.current?.complete', imgRef.current?.complete)\n\n  useEffect(() => {\n    if (imgRef.current?.complete) {\n      setIsLoaded(true)\n    }\n  }, [imgRef.current])\n\n  return (\n    <img\n      ref={imgRef}\n      src={values.src}\n      alt={props.alt}\n      className={props.className}\n      width={values.width}\n      height={values.height}\n      onLoad={() => setIsLoaded(true)}\n      style={{\n        backgroundImage: `url(${values.blurDataURL})`,\n        backgroundSize: 'cover',\n        filter: !isLoaded ? 'blur(5px)' : 'none',\n        transition: 'filter 0.3s ease-out, opacity 0.3s ease-out'\n      }}\n      loading=\"lazy\"\n    />\n  )\n}\n"],
+  "mappings": ";AAAA,YAAY,yCAAyC;;;ACArD,SAAe,UAAU,WAAW,SAAS,cAAa;AA0EtD;AAvDJ,IAAM,sBAAsB,CAC1B,UAMG;AACH,SAAO,QAAQ,MAAM;AAEnB,UAAM,MAAM,IAAI,IAAI,MAAM,KAAK,kBAAkB;AACjD,UAAM,eAAe,IAAI,gBAAgB,IAAI,MAAM;AAGnD,UAAM,WAAW,CAAC,WAAW,aAC3B,aAAa,aAAa,IAAI,QAAQ;AACxC,UAAM,QAAQ,SAAS,MAAM,OAAO,GAAG;AACvC,UAAM,SAAS,SAAS,MAAM,QAAQ,GAAG;AACzC,UAAM,cAAc,SAAS,MAAM,aAAa,aAAa;AAG7D,UAAM,yBAAyB,IAAI,gBAAgB;AAAA,MACjD,KAAK,IAAI;AAAA,MACT,GAAI,SAAS,EAAC,GAAG,MAAM,SAAS,EAAC;AAAA,MACjC,GAAI,UAAU,EAAC,GAAG,OAAO,SAAS,EAAC;AAAA,IACrC,CAAC;AAGD,UAAM,WAAW,kBAAkB,uBAAuB,SAAS,CAAC;AAEpE,WAAO;AAAA,MACL,OAAO,QAAQ,SAAS,KAAK,IAAI;AAAA,MACjC,QAAQ,SAAS,SAAS,MAAM,IAAI;AAAA,MACpC;AAAA,MACA,KAAK;AAAA,IACP;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AACZ;AAEO,IAAM,aAAmC,WAAS;AACvD,UAAQ,IAAI,cAAc,KAAK;AAE/B,QAAM,SAAS,oBAAoB,KAAK;AACxC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,SAAS,OAAgC,IAAI;AAEnD,UAAQ,IAAI,2BAA2B,OAAO,SAAS,QAAQ;AAE/D,YAAU,MAAM;AACd,QAAI,OAAO,SAAS,UAAU;AAC5B,kBAAY,IAAI;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,OAAO,OAAO,CAAC;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,KAAK,OAAO;AAAA,MACZ,KAAK,MAAM;AAAA,MACX,WAAW,MAAM;AAAA,MACjB,OAAO,OAAO;AAAA,MACd,QAAQ,OAAO;AAAA,MACf,QAAQ,MAAM,YAAY,IAAI;AAAA,MAC9B,OAAO;AAAA,QACL,iBAAiB,OAAO,OAAO,WAAW;AAAA,QAC1C,gBAAgB;AAAA,QAChB,QAAQ,CAAC,WAAW,cAAc;AAAA,QAClC,YAAY;AAAA,MACd;AAAA,MACA,SAAQ;AAAA;AAAA,EACV;AAEJ;",
   "names": []
 }

package/dist/plugins/use-pages/setup/app-loader.d.ts

@@ -11,4 +11,4 @@ export declare const AppLoader: (props: {
     }>;
     Router: React.FC<any>;
     routerProps: any;
-}) => any;
+}) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getcronit/pylon",
-  "version": "3.0.0-canary-20250303121751.7a1e28546f22cace7b91da6877508f76107e42aa",
+  "version": "3.0.0-canary-20250303143548.bb9615641321063a172cd6af0a5cd52e2a2bc0a1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -55,6 +55,7 @@
   },
   "devDependencies": {
     "@sentry/types": "^8.54.0",
+    "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.4"
   },
   "peerDependencies": {