feat: add support for ipx

data/paths.json

@@ -4,5 +4,6 @@
   "/_next/image": "nextjs",
   "/_next/static": "nextjs",
   "/_vercel/image": "vercel",
-  "/is/image": "scene7"
+  "/is/image": "scene7",
+  "/_ipx/": "ipx"
 }

demo/netlify/functions/ipx.ts

@@ -0,0 +1,28 @@
+import {
+  createIPX,
+  createIPXWebServer,
+  ipxFSStorage,
+  ipxHttpStorage,
+} from "ipx";
+
+const ipx = createIPX({
+  httpStorage: ipxHttpStorage({
+    domains: [
+      "placekitten.com",
+    ],
+  }),
+  storage: ipxFSStorage({ dir: "./public/_ipx" }),
+});
+
+const server = createIPXWebServer(ipx);
+
+export default function handler(request: Request, context) {
+  const url = new URL(request.url);
+  url.pathname = url.pathname.replace(/^\/_ipx/, "");
+
+  return server(new Request(url, request), context);
+}
+
+export const config = {
+  path: "/_ipx/*",
+};

demo/package.json

@@ -3,6 +3,7 @@
   "name": "demo",
   "version": "0.0.0",
   "license": "MIT",
+  "type": "module",
   "scripts": {
     "build": "parcel build src/index.html",
     "dev": "parcel src/index.html",
@@ -15,10 +16,12 @@
     "build/*"
   ],
   "devDependencies": {
+    "@netlify/functions": "^2.3.0",
     "parcel": "^2.8.3"
   },
   "dependencies": {
     "@preact/signals": "^1.1.3",
+    "ipx": "^2.0.0",
     "preact": "^10.1.0",
     "preact-render-to-string": "^5.1.2"
   }

demo/src/examples.json

@@ -59,5 +59,9 @@
   "cloudflare_images": [
     "Cloudflare Images",
     "https://100francisco.com/cdn-cgi/imagedelivery/1aS6NlIe-Sc1o3NhVvy8Qw/2ba36ba9-69f6-41b6-8ff0-2779b41df200"
+  ],
+  "ipx": [
+    "IPX",
+    "https://deploy-preview-85--unpic-playground.netlify.app/_ipx/w_450,f_jpg/https://placekitten.com/1000/1000"
   ]
 }

deno.lock

@@ -1,5 +1,5 @@
 {
-  "version": "2",
+  "version": "3",
   "remote": {
     "https://deno.land/std@0.111.0/_util/assert.ts": "2f868145a042a11d5ad0a3c748dcf580add8a0dbc0e876eaa0026303a5488f58",
     "https://deno.land/std@0.111.0/_util/os.ts": "dfb186cc4e968c770ab6cc3288bd65f4871be03b93beecae57d657232ecffcac",
@@ -157,7 +157,8 @@
     "https://deno.land/x/dnt@0.37.0/lib/utils.ts": "878b7ac7003a10c16e6061aa49dbef9b42bd43174853ebffc9b67ea47eeb11d8",
     "https://deno.land/x/dnt@0.37.0/mod.ts": "37d0c784371cf1750f30203a95de2555ba4c1aa89d826024f14c038f87e0f344",
     "https://deno.land/x/dnt@0.37.0/transform.ts": "1b127c5f22699c8ab2545b98aeca38c4e5c21405b0f5342ea17e9c46280ed277",
-    "https://deno.land/x/get_pixels@1.0.0/mod.ts": "db20f584e1569a522d4fe41a9db879f7b16c8a32d9bdeb74f25a8997994cd593",
+    "https://deno.land/x/get_pixels@v1.2.1/mod.ts": "5710900b4ef304edb0f8621d63419b927340ebdcafe67263cffd76669cfa0db8",
+    "https://deno.land/x/get_pixels@v1.2.1/src/get-pixels.ts": "d2a4ec97dfd2966a50120a3c41c64f8538b2f73433622bf0a25b8cd6480e5c54",
     "https://deno.land/x/jpegts@1.1/lib/decoder.ts": "b8823ee917fc99a1e085c353b2cd4ca1fbaacaaf1f80be94175e42487666c822",
     "https://deno.land/x/jpegts@1.1/lib/encoder.ts": "d75fc5ae88f77e1fa349af08d7a46937add31a03b6d3605ff4d2e3303eb32b3b",
     "https://deno.land/x/jpegts@1.1/lib/image.ts": "32255e99b6c1bf4e72e13367516a0d878ba9d195d81fac1f145ce4c11e951962",

scripts/build_npm.ts

@@ -33,7 +33,7 @@ await build({
     },
   },
   mappings: {
-    "https://deno.land/x/get_pixels@1.0.0/mod.ts": "@unpic/pixels",
+    "https://deno.land/x/get_pixels@v1.2.1/mod.ts": "@unpic/pixels",
   },
 });
 

src/canonical.test.ts

@@ -41,7 +41,7 @@ Deno.test("Canonical", async (t) => {
   );
 
   await t.step(
-    "should fall back to the default CDN for unrecognized image domains",
+    "should fall back to the default CDN for unrecognized image domains - vercel",
     () => {
       const result =
         getCanonicalCdnForUrl("https://placekitten.com/100", "vercel") ||
@@ -58,6 +58,24 @@ Deno.test("Canonical", async (t) => {
     },
   );
 
+  await t.step(
+    "should fall back to the default CDN for unrecognized image domains - ipx",
+    () => {
+      const result =
+        getCanonicalCdnForUrl("https://placekitten.com/100", "ipx") ||
+        undefined;
+      assertExists(result);
+      assertEquals(
+        result?.url,
+        "https://placekitten.com/100",
+      );
+      assertEquals(
+        result?.cdn,
+        "ipx",
+      );
+    },
+  );
+
   await t.step(
     "should fall back to the detected local CDN for unrecognized source image domains",
     () => {

src/e2e.test.ts

@@ -3,7 +3,7 @@ import {
   assertExists,
 } from "https://deno.land/std@0.172.0/testing/asserts.ts";
 import examples from "../demo/src/examples.json" assert { type: "json" };
-import { getPixels } from "https://deno.land/x/get_pixels@1.0.0/mod.ts";
+import { getPixels } from "https://deno.land/x/get_pixels@v1.2.1/mod.ts";
 import { transformUrl } from "./transform.ts";
 import type { ImageCdn } from "./types.ts";
 

src/parse.ts

@@ -17,6 +17,7 @@ import { parse as directus } from "./transformers/directus.ts";
 import { parse as imageengine } from "./transformers/imageengine.ts";
 import { parse as contentstack } from "./transformers/contentstack.ts";
 import { parse as cloudflareImages } from "./transformers/cloudflareimages.ts";
+import { parse as ipx } from "./transformers/ipx.ts";
 import { ImageCdn, ParsedUrl, SupportedImageCdn, UrlParser } from "./types.ts";
 
 export const parsers = {
@@ -38,6 +39,7 @@ export const parsers = {
   imageengine,
   contentstack,
   "cloudflare_images": cloudflareImages,
+  ipx,
 };
 
 export const cdnIsSupportedForParse = (

src/transform.test.ts

@@ -42,10 +42,48 @@ Deno.test("transformer", async (t) => {
       "/_next/image?url=https%3A%2F%2Fplacekitten.com%2F100&w=200&q=75",
     );
   });
+
+  await t.step("should format a remote, no-CDN ipx image", () => {
+    const result = transformUrl({
+      url: "https://placekitten.com/100",
+      width: 200,
+      height: 100,
+      cdn: "ipx",
+    });
+    assertEquals(
+      result?.toString(),
+      "/_ipx/s_200x100/https://placekitten.com/100",
+    );
+  });
+
+  await t.step("should transform a local IPX URL", () => {
+    const result = transformUrl({
+      url: "https://example.com/_ipx/s_800x600/https://placekitten.com/100",
+      width: 200,
+      height: 100,
+    });
+    assertEquals(
+      result?.toString(),
+      "https://example.com/_ipx/s_200x100,f_auto/https://placekitten.com/100",
+    );
+  });
+
+  await t.step("should format a local URL with ipx", () => {
+    const result = transformUrl({
+      url: "/image.png",
+      width: 200,
+      height: 100,
+      cdn: "ipx",
+    });
+    assertEquals(
+      result?.toString(),
+      "/_ipx/s_200x100/image.png",
+    );
+  });
 });
 
 Deno.test("delegation", async (t) => {
-  await t.step("should delegate an image CDN URL", () => {
+  await t.step("should delegate an image CDN URL and nextjs", () => {
     const result = transformUrl({
       url: "https://images.unsplash.com/photo?auto=format&fit=crop&w=2089&q=80",
       width: 200,
@@ -58,6 +96,19 @@ Deno.test("delegation", async (t) => {
     );
   });
 
+  await t.step("should delegate an image CDN URL and ipx", () => {
+    const result = transformUrl({
+      url: "https://images.unsplash.com/photo?auto=format&fit=crop&w=2089&q=80",
+      width: 200,
+      height: 100,
+      cdn: "ipx",
+    });
+    assertEquals(
+      result?.toString(),
+      "https://images.unsplash.com/photo?auto=format&fit=crop&w=200&q=80&h=100",
+    );
+  });
+
   await t.step("should not delegate a local URL", () => {
     const result = transformUrl({
       url: "/_next/static/image.png",

src/transform.ts

@@ -17,6 +17,7 @@ import { transform as directus } from "./transformers/directus.ts";
 import { transform as imageengine } from "./transformers/imageengine.ts";
 import { transform as contentstack } from "./transformers/contentstack.ts";
 import { transform as cloudflareImages } from "./transformers/cloudflareimages.ts";
+import { transform as ipx } from "./transformers/ipx.ts";
 import { ImageCdn, UrlTransformer } from "./types.ts";
 import { getCanonicalCdnForUrl } from "./canonical.ts";
 
@@ -39,6 +40,7 @@ export const getTransformer = (cdn: ImageCdn) => ({
   imageengine,
   contentstack,
   "cloudflare_images": cloudflareImages,
+  ipx,
 }[cdn]);
 
 /**
@@ -59,7 +61,6 @@ export const getTransformerForCdn = (
  */
 export const transformUrl: UrlTransformer = (options) => {
   const cdn = options?.cdn ?? getImageCdnForUrl(options.url);
-
   // Default to recursive
   if (!(options.recursive ?? true)) {
     return getTransformerForCdn(cdn)?.(options);