unpic - npm Package Compare versions

Comparing version 3.6.1 to 3.7.0

esm/data/domains.js

@@ -1,13 +0,12 @@
-export default JSON.parse(`{
-  "images.ctfassets.net": "contentful",
-  "cdn.builder.io": "builder.io",
-  "images.prismic.io": "imgix",
-  "www.datocms-assets.com": "imgix",
-  "cdn.sanity.io": "imgix",
-  "images.unsplash.com": "imgix",
-  "cdn.shopify.com": "shopify",
-  "s7d1.scene7.com": "scene7",
-  "ip.keycdn.com": "keycdn",
-  "assets.caisy.io": "bunny"
-}
-`);
+export default {
+    "images.ctfassets.net": "contentful",
+    "cdn.builder.io": "builder.io",
+    "images.prismic.io": "imgix",
+    "www.datocms-assets.com": "imgix",
+    "cdn.sanity.io": "imgix",
+    "images.unsplash.com": "imgix",
+    "cdn.shopify.com": "shopify",
+    "s7d1.scene7.com": "scene7",
+    "ip.keycdn.com": "keycdn",
+    "assets.caisy.io": "bunny"
+};

esm/data/paths.js

@@ -1,8 +0,7 @@
-export default JSON.parse(`{
-  "/cdn-cgi/image/": "cloudflare",
-  "/_next/image": "nextjs",
-  "/_next/static": "nextjs",
-  "/_vercel/image": "vercel",
-  "/is/image": "scene7"
-}
-`);
+export default {
+    "/cdn-cgi/image/": "cloudflare",
+    "/_next/image": "nextjs",
+    "/_next/static": "nextjs",
+    "/_vercel/image": "vercel",
+    "/is/image": "scene7"
+};

esm/data/subdomains.js

@@ -1,10 +0,9 @@
-export default JSON.parse(`{
-  "imgix.net": "imgix",
-  "files.wordpress.com": "wordpress",
-  "b-cdn.net": "bunny",
-  "storyblok.com": "storyblok",
-  "kc-usercontent.com": "kontent.ai",
-  "cloudinary.com": "cloudinary",
-  "kxcdn.com": "keycdn"
-}
-`);
+export default {
+    "imgix.net": "imgix",
+    "files.wordpress.com": "wordpress",
+    "b-cdn.net": "bunny",
+    "storyblok.com": "storyblok",
+    "kc-usercontent.com": "kontent.ai",
+    "cloudinary.com": "cloudinary",
+    "kxcdn.com": "keycdn"
+};

esm/src/detect.js

 import domains from "../data/domains.js";
 import subdomains from "../data/subdomains.js";
 import paths from "../data/paths.js";
+import { toUrl } from "./utils.js";
 const cdnDomains = new Map(Object.entries(domains));
@@ -13,3 +14,3 @@ const cdnSubdomains = Object.entries(subdomains);
     }
-    const { hostname } = new URL(url);
+    const { hostname } = toUrl(url);
     if (cdnDomains.has(hostname)) {
@@ -27,3 +28,3 @@ return cdnDomains.get(hostname);
     // Allow relative URLs
-    const { pathname } = new URL(url, "http://n");
+    const { pathname } = toUrl(url);
     for (const [prefix, cdn] of Object.entries(paths)) {
@@ -30,0 +31,0 @@ if (pathname.startsWith(prefix)) {

esm/src/transformers/builder.js

@@ -1,4 +0,4 @@
-import { getNumericParam, setParamIfDefined, setParamIfUndefined, } from "../utils.js";
+import { getNumericParam, setParamIfDefined, setParamIfUndefined, toUrl, } from "../utils.js";
 export const parse = (url) => {
-    const parsedUrl = new URL(url);
+    const parsedUrl = toUrl(url);
     const width = getNumericParam(parsedUrl, "width");
@@ -20,8 +20,10 @@ const height = getNumericParam(parsedUrl, "height");
 export const transform = ({ url: originalUrl, width, height, format }) => {
-    const url = new URL(originalUrl);
-    setParamIfUndefined(url, "fit", "cover");
+    const url = toUrl(originalUrl);
     setParamIfDefined(url, "width", width, true, true);
     setParamIfDefined(url, "height", height, true, true);
     setParamIfDefined(url, "format", format);
+    if (width && height) {
+        setParamIfUndefined(url, "fit", "cover");
+    }
     return url;
 };

esm/src/transformers/bunny.js

@@ -1,4 +0,4 @@
-import { getNumericParam, setParamIfDefined } from "../utils.js";
+import { getNumericParam, setParamIfDefined, setParamIfUndefined, toUrl, } from "../utils.js";
 export const parse = (url) => {
-    const parsedUrl = new URL(url);
+    const parsedUrl = toUrl(url);
     const width = getNumericParam(parsedUrl, "width");
@@ -20,6 +20,8 @@ const height = getNumericParam(parsedUrl, "height");
 export const transform = ({ url: originalUrl, width, height }) => {
-    const url = new URL(originalUrl);
+    const url = toUrl(originalUrl);
     setParamIfDefined(url, "width", width, true, true);
-    setParamIfDefined(url, "height", height, true, true);
+    if (width && height) {
+        setParamIfUndefined(url, "aspect_ratio", `${width}:${height}`);
+    }
     return url;
 };

esm/src/transformers/cloudflare.js

@@ -0,4 +1,5 @@
+import { toUrl } from "../utils.js";
 const cloudflareRegex = /https?:\/\/(?<host>[^\/]+)\/cdn-cgi\/image\/(?<transformations>[^\/]+)\/(?<path>.*)$/g;
 const parseTransforms = (transformations) => Object.fromEntries(transformations.split(",").map((t) => t.split("=")));
-const formatUrl = ({ host, transformations = {}, path }) => {
+const formatUrl = ({ host, transformations = {}, path, }) => {
     const transformString = Object.entries(transformations).map(([key, value]) => `${key}=${value}`).join(",");
@@ -10,3 +11,3 @@ const pathSegments = [
         transformString,
-        path
+        path,
     ].join("/");
@@ -16,3 +17,3 @@ return `https://${pathSegments}`;
 export const parse = (imageUrl) => {
-    const url = new URL(imageUrl);
+    const url = toUrl(imageUrl);
     const matches = [...url.toString().matchAll(cloudflareRegex)];
@@ -51,2 +52,3 @@ if (!matches.length) {
     }
+    props.transformations.fit ||= "cover";
     return new URL(formatUrl(props));
@@ -53,0 +55,0 @@ };

esm/src/transformers/cloudinary.js

@@ -1,4 +0,4 @@
-import { roundIfNumeric } from "../utils.js";
+import { roundIfNumeric, toUrl } from "../utils.js";
 // Thanks Colby!
-const cloudinaryRegex = /https?:\/\/(?<host>[^\/]+)\/(?<cloudName>[^\/]+)\/(?<assetType>image|video|raw)\/(?<deliveryType>upload|fetch|private|authenticated|sprite|facebook|twitter|youtube|vimeo)\/?(?<signature>s\-\-[a-zA-Z0-9]+\-\-)?\/?(?<transformations>(?:[^_\/]+_[^,\/]+,?)*)?\/(?:(?<version>v\d+)\/)?(?<id>[^\.^\s]+)\.?(?<format>[a-zA-Z]+$)?$/g;
+const cloudinaryRegex = /https?:\/\/(?<host>[^\/]+)\/(?<cloudName>[^\/]+)\/(?<assetType>image|video|raw)\/(?<deliveryType>upload|fetch|private|authenticated|sprite|facebook|twitter|youtube|vimeo)\/?(?<signature>s\-\-[a-zA-Z0-9]+\-\-)?\/?(?<transformations>(?:[^_\/]+_[^,\/]+,?)*)?\/(?:(?<version>v\d+)\/)?(?<idAndFormat>[^\s]+)$/g;
 const parseTransforms = (transformations) => {
@@ -27,3 +27,3 @@ return transformations
 export const parse = (imageUrl) => {
-    const url = new URL(imageUrl);
+    const url = toUrl(imageUrl);
     const matches = [...url.toString().matchAll(cloudinaryRegex)];
@@ -34,6 +34,14 @@ if (!matches.length) {
     const group = matches[0].groups || {};
-    const { transformations: transformString = "", format: originalFormat, ...baseParams } = group;
+    const { transformations: transformString = "", idAndFormat, ...baseParams } = group;
+    delete group.idAndFormat;
+    const lastDotIndex = idAndFormat.lastIndexOf(".");
+    const id = lastDotIndex < 0
+        ? idAndFormat
+        : idAndFormat.slice(0, lastDotIndex);
+    const originalFormat = lastDotIndex < 0
+        ? undefined
+        : idAndFormat.slice(lastDotIndex + 1);
     const { w, h, f, ...transformations } = parseTransforms(transformString);
     const format = (f && f !== "auto") ? f : originalFormat;
-    const base = formatUrl({ ...baseParams, transformations });
+    const base = formatUrl({ ...baseParams, id, transformations });
     return {
@@ -45,3 +53,8 @@ base,
         cdn: "cloudinary",
-        params: { ...group, transformations },
+        params: {
+            ...group,
+            id: group.deliveryType === "fetch" ? idAndFormat : id,
+            format,
+            transformations,
+        },
     };
@@ -48,0 +61,0 @@ };

esm/src/transformers/contentful.js

@@ -1,4 +0,4 @@
-import { getNumericParam, setParamIfDefined, setParamIfUndefined, } from "../utils.js";
+import { getNumericParam, setParamIfDefined, setParamIfUndefined, toUrl, } from "../utils.js";
 export const parse = (url) => {
-    const parsedUrl = new URL(url);
+    const parsedUrl = toUrl(url);
     const fit = parsedUrl.searchParams.get("fit") || undefined;
@@ -20,3 +20,3 @@ const width = getNumericParam(parsedUrl, "w");
 export const transform = ({ url: originalUrl, width, height, format }) => {
-    const url = new URL(originalUrl);
+    const url = toUrl(originalUrl);
     setParamIfDefined(url, "w", width, true, true);
@@ -23,0 +23,0 @@ setParamIfDefined(url, "h", height, true, true);

esm/src/transformers/directus.js

@@ -1,4 +0,4 @@
-import { getNumericParam, setParamIfDefined } from "../utils.js";
+import { getNumericParam, setParamIfDefined, toUrl } from "../utils.js";
 export const parse = (imageUrl) => {
-    const parsedUrl = new URL(imageUrl);
+    const parsedUrl = toUrl(imageUrl);
     const width = getNumericParam(parsedUrl, "width");
@@ -31,3 +31,3 @@ const height = getNumericParam(parsedUrl, "height");
 export const transform = ({ url: originalUrl, width, height, format }) => {
-    const url = new URL(originalUrl);
+    const url = toUrl(originalUrl);
     setParamIfDefined(url, "width", width, true, true);
@@ -34,0 +34,0 @@ setParamIfDefined(url, "height", height, true, true);

esm/src/transformers/imgix.js

@@ -1,4 +0,4 @@
-import { setParamIfDefined, setParamIfUndefined } from "../utils.js";
+import { setParamIfDefined, setParamIfUndefined, toUrl } from "../utils.js";
 export const parse = (url) => {
-    const parsed = new URL(url);
+    const parsed = toUrl(url);
     const width = Number(parsed.searchParams.get("w")) || undefined;
@@ -24,3 +24,3 @@ const height = Number(parsed.searchParams.get("h")) || undefined;
 export const transform = ({ url: originalUrl, width, height, format }) => {
-    const url = new URL(originalUrl);
+    const url = toUrl(originalUrl);
     setParamIfDefined(url, "w", width, true, true);
@@ -27,0 +27,0 @@ setParamIfDefined(url, "h", height, true, true);

esm/src/transformers/keycdn.js

@@ -1,4 +0,4 @@
-import { getNumericParam, setParamIfDefined, setParamIfUndefined, } from "../utils.js";
+import { getNumericParam, setParamIfDefined, setParamIfUndefined, toUrl, } from "../utils.js";
 export const parse = (url) => {
-    const parsedUrl = new URL(url);
+    const parsedUrl = toUrl(url);
     const width = getNumericParam(parsedUrl, "width");
@@ -18,3 +18,3 @@ const height = getNumericParam(parsedUrl, "height");
 export const transform = ({ url: originalUrl, width, height, format }) => {
-    const url = new URL(originalUrl);
+    const url = toUrl(originalUrl);
     setParamIfDefined(url, "width", width, true, true);
@@ -21,0 +21,0 @@ setParamIfDefined(url, "height", height, true, true);

esm/src/transformers/kontentai.js

@@ -1,4 +0,4 @@
-import { getNumericParam, setParamIfDefined, setParamIfUndefined } from "../utils.js";
+import { getNumericParam, setParamIfDefined, setParamIfUndefined, toUrl, } from "../utils.js";
 export const parse = (url) => {
-    const parsedUrl = new URL(url);
+    const parsedUrl = toUrl(url);
     const fit = parsedUrl.searchParams.get("fit") || undefined;
@@ -20,7 +20,7 @@ const width = getNumericParam(parsedUrl, "w");
 export const transform = ({ url: originalUrl, width, height, format }) => {
-    const url = new URL(originalUrl);
+    const url = toUrl(originalUrl);
     setParamIfDefined(url, "w", width, true, true);
     setParamIfDefined(url, "h", height, true, true);
     setParamIfDefined(url, "fm", format, true);
-    if (width || height) {
+    if (width && height) {
         setParamIfUndefined(url, "fit", "crop");
@@ -27,0 +27,0 @@ }

esm/src/transformers/scene7.js

@@ -1,4 +0,4 @@
-import { getNumericParam, setParamIfDefined, setParamIfUndefined } from "../utils.js";
+import { getNumericParam, setParamIfDefined, setParamIfUndefined, toUrl, } from "../utils.js";
 export const parse = (url) => {
-    const parsedUrl = new URL(url);
+    const parsedUrl = toUrl(url);
     const fit = parsedUrl.searchParams.get("fit") || undefined;
@@ -20,8 +20,8 @@ const width = getNumericParam(parsedUrl, "wid");
 export const transform = ({ url: originalUrl, width, height, format }) => {
-    const url = new URL(originalUrl);
+    const url = toUrl(originalUrl);
     setParamIfDefined(url, "wid", width, true, true);
     setParamIfDefined(url, "hei", height, true, true);
     setParamIfDefined(url, "fmt", format, true);
-    setParamIfDefined(url, "qlt", getNumericParam(url, 'qlt'), true);
-    setParamIfDefined(url, "scl", getNumericParam(url, 'scl'), true);
+    setParamIfDefined(url, "qlt", getNumericParam(url, "qlt"), true);
+    setParamIfDefined(url, "scl", getNumericParam(url, "scl"), true);
     setParamIfUndefined(url, "fit", "crop");
@@ -28,0 +28,0 @@ if (!width && !height) {

esm/src/transformers/shopify.js

@@ -1,5 +0,5 @@
-import { setParamIfDefined } from "../utils.js";
+import { setParamIfDefined, toUrl } from "../utils.js";
 const shopifyRegex = /(.+?)(?:_(?:(pico|icon|thumb|small|compact|medium|large|grande|original|master)|(\d*)x(\d*)))?(?:_crop_([a-z]+))?(\.[a-zA-Z]+)(\.png|\.jpg|\.webp|\.avif)?$/;
 export const parse = (imageUrl) => {
-    const url = new URL(imageUrl);
+    const url = toUrl(imageUrl);
     const match = url.pathname.match(shopifyRegex);
@@ -25,3 +25,3 @@ if (!match) {
 export const generate = ({ base, width, height, format, params }) => {
-    const url = new URL(base);
+    const url = toUrl(base);
     setParamIfDefined(url, "width", width, true, true);
@@ -28,0 +28,0 @@ setParamIfDefined(url, "height", height, true, true);

esm/src/transformers/storyblok.js

@@ -0,1 +1,2 @@
+import { toUrl } from "../utils.js";
 const storyBlokAssets = /(?<id>\/f\/\d+\/\d+x\d+\/\w+\/[^\/]+)\/?(?<modifiers>m\/?(?<crop>\d+x\d+:\d+x\d+)?\/?(?<resize>(?<flipx>\-)?(?<width>\d+)x(?<flipy>\-)?(?<height>\d+))?\/?(filters\:(?<filters>[^\/]+))?)?$/g;
@@ -25,3 +26,3 @@ const storyBlokImg2 = /^(?<modifiers>\/(?<crop>\d+x\d+:\d+x\d+)?\/?(?<resize>(?<flipx>\-)?(?<width>\d+)x(?<flipy>\-)?(?<height>\d+))?\/?(filters\:(?<filters>[^\/]+))?\/?)?(?<id>\/f\/.+)$/g;
 export const parse = (imageUrl) => {
-    const url = new URL(imageUrl);
+    const url = toUrl(imageUrl);
     // img2.storyblok.com is the old domain for Storyblok images, which used a
@@ -28,0 +29,0 @@ // different path format. We'll assume custom domains are using the new format.

esm/src/transformers/vercel.js

@@ -1,5 +0,5 @@
-import { setParamIfDefined, setParamIfUndefined, toRelativeUrl, } from "../utils.js";
+import { setParamIfDefined, setParamIfUndefined, toRelativeUrl, toUrl, } from "../utils.js";
 import { getImageCdnForUrlByDomain } from "../detect.js";
 export const parse = (url) => {
-    const parsed = new URL(url);
+    const parsed = toUrl(url);
     const width = Number(parsed.searchParams.get("w")) || undefined;
@@ -15,3 +15,3 @@ const quality = Number(parsed.searchParams.get("q")) || undefined;
 export const delegateUrl = (url) => {
-    const parsed = new URL(url, "http://n");
+    const parsed = toUrl(url);
     const source = parsed.searchParams.get("url");
@@ -41,3 +41,3 @@ if (!source || !source.startsWith("http")) {
     // the URL might be relative, so we need to add a dummy host to it
-    const parsedUrl = new URL(url, "http://n");
+    const parsedUrl = toUrl(url);
     const isNextImage = parsedUrl.pathname.startsWith("/_next/image") ||
@@ -44,0 +44,0 @@ parsedUrl.pathname.startsWith("/_vercel/image");

esm/src/transformers/wordpress.js

@@ -1,4 +0,4 @@
-import { getNumericParam, setParamIfDefined, setParamIfUndefined, } from "../utils.js";
+import { getNumericParam, setParamIfDefined, setParamIfUndefined, toUrl, } from "../utils.js";
 export const transform = ({ url: originalUrl, width, height }) => {
-    const url = new URL(originalUrl);
+    const url = toUrl(originalUrl);
     setParamIfDefined(url, "w", width, true, true);
@@ -10,3 +10,3 @@ setParamIfDefined(url, "h", height, true, true);
 export const parse = (url) => {
-    const parsed = new URL(url);
+    const parsed = toUrl(url);
     const width = getNumericParam(parsed, "w");
@@ -13,0 +13,0 @@ const height = getNumericParam(parsed, "h");

esm/src/utils.js

@@ -32,1 +32,4 @@ export const roundIfNumeric = (value) => {
 };
+export const toUrl = (url, base) => {
+    return typeof url === "string" ? new URL(url, base ?? "http://n/") : url;
+};

package.json

 {
   "module": "./esm/mod.js",
   "main": "./script/mod.js",
-  "types": "./types/mod.d.ts",
   "name": "unpic",
-  "version": "3.6.1",
+  "version": "3.7.0",
   "description": "Universal image CDN translator",
@@ -17,7 +16,12 @@ "license": "MIT",
   },
+  "devDependencies": {
+    "@types/node": "^18.11.9",
+    "picocolors": "^1.0.0",
+    "@deno/shim-deno-test": "~0.4.0",
+    "@unpic/pixels": "latest"
+  },
   "exports": {
     ".": {
       "import": "./esm/mod.js",
-      "require": "./script/mod.js",
-      "types": "./types/mod.d.ts"
+      "require": "./script/mod.js"
     }
@@ -27,9 +31,3 @@ },
     "test": "node test_runner.js"
-  },
-  "dependencies": {},
-  "devDependencies": {
-    "@types/node": "16.11.26",
-    "chalk": "4.1.2",
-    "@deno/shim-deno-test": "~0.3.2"
   }
 }

script/data/domains.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = JSON.parse(`{
-  "images.ctfassets.net": "contentful",
-  "cdn.builder.io": "builder.io",
-  "images.prismic.io": "imgix",
-  "www.datocms-assets.com": "imgix",
-  "cdn.sanity.io": "imgix",
-  "images.unsplash.com": "imgix",
-  "cdn.shopify.com": "shopify",
-  "s7d1.scene7.com": "scene7",
-  "ip.keycdn.com": "keycdn",
-  "assets.caisy.io": "bunny"
-}
-`);
+exports.default = {
+    "images.ctfassets.net": "contentful",
+    "cdn.builder.io": "builder.io",
+    "images.prismic.io": "imgix",
+    "www.datocms-assets.com": "imgix",
+    "cdn.sanity.io": "imgix",
+    "images.unsplash.com": "imgix",
+    "cdn.shopify.com": "shopify",
+    "s7d1.scene7.com": "scene7",
+    "ip.keycdn.com": "keycdn",
+    "assets.caisy.io": "bunny"
+};

script/data/paths.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = JSON.parse(`{
-  "/cdn-cgi/image/": "cloudflare",
-  "/_next/image": "nextjs",
-  "/_next/static": "nextjs",
-  "/_vercel/image": "vercel",
-  "/is/image": "scene7"
-}
-`);
+exports.default = {
+    "/cdn-cgi/image/": "cloudflare",
+    "/_next/image": "nextjs",
+    "/_next/static": "nextjs",
+    "/_vercel/image": "vercel",
+    "/is/image": "scene7"
+};

script/data/subdomains.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = JSON.parse(`{
-  "imgix.net": "imgix",
-  "files.wordpress.com": "wordpress",
-  "b-cdn.net": "bunny",
-  "storyblok.com": "storyblok",
-  "kc-usercontent.com": "kontent.ai",
-  "cloudinary.com": "cloudinary",
-  "kxcdn.com": "keycdn"
-}
-`);
+exports.default = {
+    "imgix.net": "imgix",
+    "files.wordpress.com": "wordpress",
+    "b-cdn.net": "bunny",
+    "storyblok.com": "storyblok",
+    "kc-usercontent.com": "kontent.ai",
+    "cloudinary.com": "cloudinary",
+    "kxcdn.com": "keycdn"
+};

script/src/detect.js

@@ -10,2 +10,3 @@ "use strict";
 const paths_js_1 = __importDefault(require("../data/paths.js"));
+const utils_js_1 = require("./utils.js");
 const cdnDomains = new Map(Object.entries(domains_js_1.default));
@@ -21,3 +22,3 @@ const cdnSubdomains = Object.entries(subdomains_js_1.default);
     }
-    const { hostname } = new URL(url);
+    const { hostname } = (0, utils_js_1.toUrl)(url);
     if (cdnDomains.has(hostname)) {
@@ -36,3 +37,3 @@ return cdnDomains.get(hostname);
     // Allow relative URLs
-    const { pathname } = new URL(url, "http://n");
+    const { pathname } = (0, utils_js_1.toUrl)(url);
     for (const [prefix, cdn] of Object.entries(paths_js_1.default)) {
@@ -39,0 +40,0 @@ if (pathname.startsWith(prefix)) {

script/src/transformers/builder.js

@@ -6,3 +6,3 @@ "use strict";
 const parse = (url) => {
-    const parsedUrl = new URL(url);
+    const parsedUrl = (0, utils_js_1.toUrl)(url);
     const width = (0, utils_js_1.getNumericParam)(parsedUrl, "width");
@@ -25,9 +25,11 @@ const height = (0, utils_js_1.getNumericParam)(parsedUrl, "height");
 const transform = ({ url: originalUrl, width, height, format }) => {
-    const url = new URL(originalUrl);
-    (0, utils_js_1.setParamIfUndefined)(url, "fit", "cover");
+    const url = (0, utils_js_1.toUrl)(originalUrl);
     (0, utils_js_1.setParamIfDefined)(url, "width", width, true, true);
     (0, utils_js_1.setParamIfDefined)(url, "height", height, true, true);
     (0, utils_js_1.setParamIfDefined)(url, "format", format);
+    if (width && height) {
+        (0, utils_js_1.setParamIfUndefined)(url, "fit", "cover");
+    }
     return url;
 };
 exports.transform = transform;

script/src/transformers/bunny.js

@@ -6,3 +6,3 @@ "use strict";
 const parse = (url) => {
-    const parsedUrl = new URL(url);
+    const parsedUrl = (0, utils_js_1.toUrl)(url);
     const width = (0, utils_js_1.getNumericParam)(parsedUrl, "width");
@@ -25,7 +25,9 @@ const height = (0, utils_js_1.getNumericParam)(parsedUrl, "height");
 const transform = ({ url: originalUrl, width, height }) => {
-    const url = new URL(originalUrl);
+    const url = (0, utils_js_1.toUrl)(originalUrl);
     (0, utils_js_1.setParamIfDefined)(url, "width", width, true, true);
-    (0, utils_js_1.setParamIfDefined)(url, "height", height, true, true);
+    if (width && height) {
+        (0, utils_js_1.setParamIfUndefined)(url, "aspect_ratio", `${width}:${height}`);
+    }
     return url;
 };
 exports.transform = transform;

script/src/transformers/cloudflare.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.transform = exports.generate = exports.parse = void 0;
+const utils_js_1 = require("../utils.js");
 const cloudflareRegex = /https?:\/\/(?<host>[^\/]+)\/cdn-cgi\/image\/(?<transformations>[^\/]+)\/(?<path>.*)$/g;
 const parseTransforms = (transformations) => Object.fromEntries(transformations.split(",").map((t) => t.split("=")));
-const formatUrl = ({ host, transformations = {}, path }) => {
+const formatUrl = ({ host, transformations = {}, path, }) => {
     const transformString = Object.entries(transformations).map(([key, value]) => `${key}=${value}`).join(",");
@@ -13,3 +14,3 @@ const pathSegments = [
         transformString,
-        path
+        path,
     ].join("/");
@@ -19,3 +20,3 @@ return `https://${pathSegments}`;
 const parse = (imageUrl) => {
-    const url = new URL(imageUrl);
+    const url = (0, utils_js_1.toUrl)(imageUrl);
     const matches = [...url.toString().matchAll(cloudflareRegex)];
@@ -55,2 +56,3 @@ if (!matches.length) {
     }
+    props.transformations.fit ||= "cover";
     return new URL(formatUrl(props));
@@ -57,0 +59,0 @@ };

script/src/transformers/cloudinary.js

@@ -6,3 +6,3 @@ "use strict";
 // Thanks Colby!
-const cloudinaryRegex = /https?:\/\/(?<host>[^\/]+)\/(?<cloudName>[^\/]+)\/(?<assetType>image|video|raw)\/(?<deliveryType>upload|fetch|private|authenticated|sprite|facebook|twitter|youtube|vimeo)\/?(?<signature>s\-\-[a-zA-Z0-9]+\-\-)?\/?(?<transformations>(?:[^_\/]+_[^,\/]+,?)*)?\/(?:(?<version>v\d+)\/)?(?<id>[^\.^\s]+)\.?(?<format>[a-zA-Z]+$)?$/g;
+const cloudinaryRegex = /https?:\/\/(?<host>[^\/]+)\/(?<cloudName>[^\/]+)\/(?<assetType>image|video|raw)\/(?<deliveryType>upload|fetch|private|authenticated|sprite|facebook|twitter|youtube|vimeo)\/?(?<signature>s\-\-[a-zA-Z0-9]+\-\-)?\/?(?<transformations>(?:[^_\/]+_[^,\/]+,?)*)?\/(?:(?<version>v\d+)\/)?(?<idAndFormat>[^\s]+)$/g;
 const parseTransforms = (transformations) => {
@@ -31,3 +31,3 @@ return transformations
 const parse = (imageUrl) => {
-    const url = new URL(imageUrl);
+    const url = (0, utils_js_1.toUrl)(imageUrl);
     const matches = [...url.toString().matchAll(cloudinaryRegex)];
@@ -38,6 +38,14 @@ if (!matches.length) {
     const group = matches[0].groups || {};
-    const { transformations: transformString = "", format: originalFormat, ...baseParams } = group;
+    const { transformations: transformString = "", idAndFormat, ...baseParams } = group;
+    delete group.idAndFormat;
+    const lastDotIndex = idAndFormat.lastIndexOf(".");
+    const id = lastDotIndex < 0
+        ? idAndFormat
+        : idAndFormat.slice(0, lastDotIndex);
+    const originalFormat = lastDotIndex < 0
+        ? undefined
+        : idAndFormat.slice(lastDotIndex + 1);
     const { w, h, f, ...transformations } = parseTransforms(transformString);
     const format = (f && f !== "auto") ? f : originalFormat;
-    const base = formatUrl({ ...baseParams, transformations });
+    const base = formatUrl({ ...baseParams, id, transformations });
     return {
@@ -49,3 +57,8 @@ base,
         cdn: "cloudinary",
-        params: { ...group, transformations },
+        params: {
+            ...group,
+            id: group.deliveryType === "fetch" ? idAndFormat : id,
+            format,
+            transformations,
+        },
     };
@@ -52,0 +65,0 @@ };

script/src/transformers/contentful.js

@@ -6,3 +6,3 @@ "use strict";
 const parse = (url) => {
-    const parsedUrl = new URL(url);
+    const parsedUrl = (0, utils_js_1.toUrl)(url);
     const fit = parsedUrl.searchParams.get("fit") || undefined;
@@ -25,3 +25,3 @@ const width = (0, utils_js_1.getNumericParam)(parsedUrl, "w");
 const transform = ({ url: originalUrl, width, height, format }) => {
-    const url = new URL(originalUrl);
+    const url = (0, utils_js_1.toUrl)(originalUrl);
     (0, utils_js_1.setParamIfDefined)(url, "w", width, true, true);
@@ -28,0 +28,0 @@ (0, utils_js_1.setParamIfDefined)(url, "h", height, true, true);

script/src/transformers/directus.js

@@ -6,3 +6,3 @@ "use strict";
 const parse = (imageUrl) => {
-    const parsedUrl = new URL(imageUrl);
+    const parsedUrl = (0, utils_js_1.toUrl)(imageUrl);
     const width = (0, utils_js_1.getNumericParam)(parsedUrl, "width");
@@ -36,3 +36,3 @@ const height = (0, utils_js_1.getNumericParam)(parsedUrl, "height");
 const transform = ({ url: originalUrl, width, height, format }) => {
-    const url = new URL(originalUrl);
+    const url = (0, utils_js_1.toUrl)(originalUrl);
     (0, utils_js_1.setParamIfDefined)(url, "width", width, true, true);
@@ -39,0 +39,0 @@ (0, utils_js_1.setParamIfDefined)(url, "height", height, true, true);

script/src/transformers/imgix.js

@@ -6,3 +6,3 @@ "use strict";
 const parse = (url) => {
-    const parsed = new URL(url);
+    const parsed = (0, utils_js_1.toUrl)(url);
     const width = Number(parsed.searchParams.get("w")) || undefined;
@@ -29,3 +29,3 @@ const height = Number(parsed.searchParams.get("h")) || undefined;
 const transform = ({ url: originalUrl, width, height, format }) => {
-    const url = new URL(originalUrl);
+    const url = (0, utils_js_1.toUrl)(originalUrl);
     (0, utils_js_1.setParamIfDefined)(url, "w", width, true, true);
@@ -32,0 +32,0 @@ (0, utils_js_1.setParamIfDefined)(url, "h", height, true, true);

script/src/transformers/keycdn.js

@@ -6,3 +6,3 @@ "use strict";
 const parse = (url) => {
-    const parsedUrl = new URL(url);
+    const parsedUrl = (0, utils_js_1.toUrl)(url);
     const width = (0, utils_js_1.getNumericParam)(parsedUrl, "width");
@@ -23,3 +23,3 @@ const height = (0, utils_js_1.getNumericParam)(parsedUrl, "height");
 const transform = ({ url: originalUrl, width, height, format }) => {
-    const url = new URL(originalUrl);
+    const url = (0, utils_js_1.toUrl)(originalUrl);
     (0, utils_js_1.setParamIfDefined)(url, "width", width, true, true);
@@ -26,0 +26,0 @@ (0, utils_js_1.setParamIfDefined)(url, "height", height, true, true);

script/src/transformers/kontentai.js

@@ -6,3 +6,3 @@ "use strict";
 const parse = (url) => {
-    const parsedUrl = new URL(url);
+    const parsedUrl = (0, utils_js_1.toUrl)(url);
     const fit = parsedUrl.searchParams.get("fit") || undefined;
@@ -25,7 +25,7 @@ const width = (0, utils_js_1.getNumericParam)(parsedUrl, "w");
 const transform = ({ url: originalUrl, width, height, format }) => {
-    const url = new URL(originalUrl);
+    const url = (0, utils_js_1.toUrl)(originalUrl);
     (0, utils_js_1.setParamIfDefined)(url, "w", width, true, true);
     (0, utils_js_1.setParamIfDefined)(url, "h", height, true, true);
     (0, utils_js_1.setParamIfDefined)(url, "fm", format, true);
-    if (width || height) {
+    if (width && height) {
         (0, utils_js_1.setParamIfUndefined)(url, "fit", "crop");
@@ -32,0 +32,0 @@ }

script/src/transformers/scene7.js

@@ -6,3 +6,3 @@ "use strict";
 const parse = (url) => {
-    const parsedUrl = new URL(url);
+    const parsedUrl = (0, utils_js_1.toUrl)(url);
     const fit = parsedUrl.searchParams.get("fit") || undefined;
@@ -25,8 +25,8 @@ const width = (0, utils_js_1.getNumericParam)(parsedUrl, "wid");
 const transform = ({ url: originalUrl, width, height, format }) => {
-    const url = new URL(originalUrl);
+    const url = (0, utils_js_1.toUrl)(originalUrl);
     (0, utils_js_1.setParamIfDefined)(url, "wid", width, true, true);
     (0, utils_js_1.setParamIfDefined)(url, "hei", height, true, true);
     (0, utils_js_1.setParamIfDefined)(url, "fmt", format, true);
-    (0, utils_js_1.setParamIfDefined)(url, "qlt", (0, utils_js_1.getNumericParam)(url, 'qlt'), true);
-    (0, utils_js_1.setParamIfDefined)(url, "scl", (0, utils_js_1.getNumericParam)(url, 'scl'), true);
+    (0, utils_js_1.setParamIfDefined)(url, "qlt", (0, utils_js_1.getNumericParam)(url, "qlt"), true);
+    (0, utils_js_1.setParamIfDefined)(url, "scl", (0, utils_js_1.getNumericParam)(url, "scl"), true);
     (0, utils_js_1.setParamIfUndefined)(url, "fit", "crop");
@@ -33,0 +33,0 @@ if (!width && !height) {

script/src/transformers/shopify.js

@@ -7,3 +7,3 @@ "use strict";
 const parse = (imageUrl) => {
-    const url = new URL(imageUrl);
+    const url = (0, utils_js_1.toUrl)(imageUrl);
     const match = url.pathname.match(shopifyRegex);
@@ -30,3 +30,3 @@ if (!match) {
 const generate = ({ base, width, height, format, params }) => {
-    const url = new URL(base);
+    const url = (0, utils_js_1.toUrl)(base);
     (0, utils_js_1.setParamIfDefined)(url, "width", width, true, true);
@@ -33,0 +33,0 @@ (0, utils_js_1.setParamIfDefined)(url, "height", height, true, true);

script/src/transformers/storyblok.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.transform = exports.generate = exports.parse = exports.generateFilters = exports.splitFilters = void 0;
+const utils_js_1 = require("../utils.js");
 const storyBlokAssets = /(?<id>\/f\/\d+\/\d+x\d+\/\w+\/[^\/]+)\/?(?<modifiers>m\/?(?<crop>\d+x\d+:\d+x\d+)?\/?(?<resize>(?<flipx>\-)?(?<width>\d+)x(?<flipy>\-)?(?<height>\d+))?\/?(filters\:(?<filters>[^\/]+))?)?$/g;
@@ -30,3 +31,3 @@ const storyBlokImg2 = /^(?<modifiers>\/(?<crop>\d+x\d+:\d+x\d+)?\/?(?<resize>(?<flipx>\-)?(?<width>\d+)x(?<flipy>\-)?(?<height>\d+))?\/?(filters\:(?<filters>[^\/]+))?\/?)?(?<id>\/f\/.+)$/g;
 const parse = (imageUrl) => {
-    const url = new URL(imageUrl);
+    const url = (0, utils_js_1.toUrl)(imageUrl);
     // img2.storyblok.com is the old domain for Storyblok images, which used a
@@ -33,0 +34,0 @@ // different path format. We'll assume custom domains are using the new format.

script/src/transformers/vercel.js

@@ -7,3 +7,3 @@ "use strict";
 const parse = (url) => {
-    const parsed = new URL(url);
+    const parsed = (0, utils_js_1.toUrl)(url);
     const width = Number(parsed.searchParams.get("w")) || undefined;
@@ -20,3 +20,3 @@ const quality = Number(parsed.searchParams.get("q")) || undefined;
 const delegateUrl = (url) => {
-    const parsed = new URL(url, "http://n");
+    const parsed = (0, utils_js_1.toUrl)(url);
     const source = parsed.searchParams.get("url");
@@ -48,3 +48,3 @@ if (!source || !source.startsWith("http")) {
     // the URL might be relative, so we need to add a dummy host to it
-    const parsedUrl = new URL(url, "http://n");
+    const parsedUrl = (0, utils_js_1.toUrl)(url);
     const isNextImage = parsedUrl.pathname.startsWith("/_next/image") ||
@@ -51,0 +51,0 @@ parsedUrl.pathname.startsWith("/_vercel/image");

script/src/transformers/wordpress.js

@@ -6,3 +6,3 @@ "use strict";
 const transform = ({ url: originalUrl, width, height }) => {
-    const url = new URL(originalUrl);
+    const url = (0, utils_js_1.toUrl)(originalUrl);
     (0, utils_js_1.setParamIfDefined)(url, "w", width, true, true);
@@ -15,3 +15,3 @@ (0, utils_js_1.setParamIfDefined)(url, "h", height, true, true);
 const parse = (url) => {
-    const parsed = new URL(url);
+    const parsed = (0, utils_js_1.toUrl)(url);
     const width = (0, utils_js_1.getNumericParam)(parsed, "w");
@@ -18,0 +18,0 @@ const height = (0, utils_js_1.getNumericParam)(parsed, "h");

script/src/utils.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.toRelativeUrl = exports.getNumericParam = exports.setParamIfUndefined = exports.setParamIfDefined = exports.roundIfNumeric = void 0;
+exports.toUrl = exports.toRelativeUrl = exports.getNumericParam = exports.setParamIfUndefined = exports.setParamIfDefined = exports.roundIfNumeric = void 0;
 const roundIfNumeric = (value) => {
@@ -40,1 +40,5 @@ if (!value) {
 exports.toRelativeUrl = toRelativeUrl;
+const toUrl = (url, base) => {
+    return typeof url === "string" ? new URL(url, base ?? "http://n/") : url;
+};
+exports.toUrl = toUrl;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

141169

increased by62.71%

Number of package files

154

increased by92.5%

Lines of code

3900

increased by81.23%

Worsened metrics

Dev dependency count

4

increased by33.33%

No dependency changes