@artsy/img 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v0.1.2 (Fri Dec 09 2022)
+
+#### 🐛  Bug Fix
+
+- fix(gemini): fixes crop url mode [#9](https://github.com/artsy/img/pull/9) ([@dzucconi](https://github.com/dzucconi))
+
+#### Authors: 1
+
+- Damon ([@dzucconi](https://github.com/dzucconi))
+
+---
+
+# v0.1.1 (Fri Dec 09 2022)
+
+#### 🐛  Bug Fix
+
+- fix: removes qs dependency; fixes gemini width/height modes [#8](https://github.com/artsy/img/pull/8) ([@dzucconi](https://github.com/dzucconi))
+
+#### Authors: 1
+
+- Damon ([@dzucconi](https://github.com/dzucconi))
+
+---
+
 # v0.1.0 (Thu Dec 08 2022)
 
 #### 🚀  Enhancement

package/dist/services/gemini.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.gemini = void 0;
-const qs_1 = require("qs");
 const services_1 = require("../services");
+const stringify_1 = require("../utils/stringify");
 const gemini = (config) => {
     return (mode, src, { width, height, quality = services_1.DEFAULT_QUALITY }) => {
         if (!(0, services_1.validate)(mode, { width, height }))
@@ -11,13 +11,16 @@ const gemini = (config) => {
         switch (mode) {
             case "crop": {
                 resizeTo = "fill";
+                break;
             }
             case "resize": {
                 if (width && !height) {
                     resizeTo = "width";
+                    break;
                 }
                 if (height && !width) {
                     resizeTo = "height";
+                    break;
                 }
                 resizeTo = "fit";
             }
@@ -29,11 +32,7 @@ const gemini = (config) => {
             width,
             quality,
         };
-        const query = (0, qs_1.stringify)(params, {
-            arrayFormat: "brackets",
-            skipNulls: true,
-            sort: (a, b) => a.localeCompare(b),
-        });
+        const query = (0, stringify_1.stringify)(params);
         return `${config.endpoint}?${query}`;
     };
 };

package/dist/services/imgix.js

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.imgix = void 0;
 const md5_1 = __importDefault(require("md5"));
-const qs_1 = require("qs");
 const services_1 = require("../services");
+const stringify_1 = require("../utils/stringify");
 const imgix = (config) => {
     return (mode, src, { width, height, quality = services_1.DEFAULT_QUALITY }) => {
         if (!(0, services_1.validate)(mode, { width, height }))
@@ -19,7 +19,7 @@ const imgix = (config) => {
             auto: "format",
         };
         const path = `/${encodeURIComponent(src)}`;
-        const query = `?${(0, qs_1.stringify)(params)}`;
+        const query = `?${(0, stringify_1.stringify)(params)}`;
         const signature = (0, md5_1.default)(config.token + path + query);
         return `${config.endpoint}${path}${query}&s=${signature}`;
     };

package/dist/utils/stringify.d.ts

@@ -0,0 +1 @@
+export declare const stringify: (params: Record<string, string | number | undefined | null | boolean>) => string;

package/dist/utils/stringify.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stringify = void 0;
+const stringify = (params) => {
+    const keys = Object.keys(params)
+        // Alphabetize the keys
+        .sort((a, b) => a.localeCompare(b))
+        // Filter out null or undefined values
+        .filter((key) => params[key] != null);
+    return keys
+        .map((key) => {
+        return `${key}=${encodeURIComponent(`${params[key]}`)}`;
+    })
+        .join("&");
+};
+exports.stringify = stringify;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/img",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Logic for constructing image proxy URLs",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -30,7 +30,6 @@
     "test": "jest"
   },
   "dependencies": {
-    "md5": "^2.3.0",
-    "qs": "^6.11.0"
+    "md5": "^2.3.0"
   }
 }

package/src/__tests__/services.test.ts

@@ -1,5 +1,8 @@
 import { configure } from "../services";
 
+const EXAMPLE_SRC =
+  "https://d32dm0rphc51dk.cloudfront.net/MFFPXvpJSoGzggU8zujwBw/normalized.jpg";
+
 describe("strategies", () => {
   it("only returns the services that are configured", () => {
     const services = configure({ gemini: { endpoint: "https://example.com" } });
@@ -28,63 +31,68 @@ describe("strategies", () => {
 
   describe("gemini", () => {
     it("returns a resized url", () => {
-      const img = gemini.exec(
-        "resize",
-        "https://d32dm0rphc51dk.cloudfront.net/MFFPXvpJSoGzggU8zujwBw/normalized.jpg",
-        { width: 200, height: 200 }
-      );
+      const img = gemini.exec("resize", EXAMPLE_SRC, {
+        width: 200,
+        height: 200,
+      });
 
       expect(img).toEqual(
         "https://d7hftxdivxxvm.cloudfront.net?height=200&quality=80&resize_to=fit&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FMFFPXvpJSoGzggU8zujwBw%2Fnormalized.jpg&width=200"
       );
     });
 
-    it("returns a cropped url", () => {
-      const img = gemini.exec(
-        "crop",
-        "https://d32dm0rphc51dk.cloudfront.net/MFFPXvpJSoGzggU8zujwBw/normalized.jpg",
-        { width: 200, height: 200 }
+    it("returns a resized url with only width specified", () => {
+      const img = gemini.exec("resize", EXAMPLE_SRC, { width: 200 });
+
+      expect(img).toEqual(
+        "https://d7hftxdivxxvm.cloudfront.net?quality=80&resize_to=width&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FMFFPXvpJSoGzggU8zujwBw%2Fnormalized.jpg&width=200"
       );
+    });
+
+    it("returns a resized url with only height specified", () => {
+      const img = gemini.exec("resize", EXAMPLE_SRC, { height: 200 });
 
       expect(img).toEqual(
-        "https://d7hftxdivxxvm.cloudfront.net?height=200&quality=80&resize_to=fit&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FMFFPXvpJSoGzggU8zujwBw%2Fnormalized.jpg&width=200"
+        "https://d7hftxdivxxvm.cloudfront.net?height=200&quality=80&resize_to=height&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FMFFPXvpJSoGzggU8zujwBw%2Fnormalized.jpg"
+      );
+    });
+
+    it("returns a cropped url", () => {
+      const img = gemini.exec("crop", EXAMPLE_SRC, { width: 200, height: 200 });
+
+      expect(img).toEqual(
+        "https://d7hftxdivxxvm.cloudfront.net?height=200&quality=80&resize_to=fill&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FMFFPXvpJSoGzggU8zujwBw%2Fnormalized.jpg&width=200"
       );
     });
   });
 
   describe("imgix", () => {
     it("returns a resized url", () => {
-      const img = imgix.exec(
-        "resize",
-        "https://d32dm0rphc51dk.cloudfront.net/MFFPXvpJSoGzggU8zujwBw/normalized.jpg",
-        { width: 200, height: 200 }
-      );
+      const img = imgix.exec("resize", EXAMPLE_SRC, {
+        width: 200,
+        height: 200,
+      });
 
       expect(img).toEqual(
-        "https://example.imgix.net/https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FMFFPXvpJSoGzggU8zujwBw%2Fnormalized.jpg?fit=clip&height=200&width=200&quality=80&auto=format&s=5cce72615e263db4c22e027d2ae73cd1"
+        "https://example.imgix.net/https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FMFFPXvpJSoGzggU8zujwBw%2Fnormalized.jpg?auto=format&fit=clip&height=200&quality=80&width=200&s=1d931e11fbfb846dbe5f1ffa895017d9"
       );
     });
 
     it("returns a cropped url", () => {
-      const img = imgix.exec(
-        "crop",
-        "https://d32dm0rphc51dk.cloudfront.net/MFFPXvpJSoGzggU8zujwBw/normalized.jpg",
-        { width: 200, height: 200 }
-      );
+      const img = imgix.exec("crop", EXAMPLE_SRC, { width: 200, height: 200 });
 
       expect(img).toEqual(
-        "https://example.imgix.net/https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FMFFPXvpJSoGzggU8zujwBw%2Fnormalized.jpg?fit=crop&height=200&width=200&quality=80&auto=format&s=3fd908feecc9fecb39aebe909071c362"
+        "https://example.imgix.net/https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FMFFPXvpJSoGzggU8zujwBw%2Fnormalized.jpg?auto=format&fit=crop&height=200&quality=80&width=200&s=fd511845304eb4a5cad016b52aee939b"
       );
     });
   });
 
   describe("lambda", () => {
     it("returns a resized url", () => {
-      const img = lambda.exec(
-        "resize",
-        "https://d32dm0rphc51dk.cloudfront.net/MFFPXvpJSoGzggU8zujwBw/normalized.jpg",
-        { width: 200, height: 200 }
-      );
+      const img = lambda.exec("resize", EXAMPLE_SRC, {
+        width: 200,
+        height: 200,
+      });
 
       expect(img).toEqual(
         "https://d1j88w5k23s1nr.cloudfront.net/eyJidWNrZXQiOiJhcnRzeS1tZWRpYS1hc3NldHMiLCJrZXkiOiJNRkZQWHZwSlNvR3pnZ1U4enVqd0J3L25vcm1hbGl6ZWQuanBnIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjoyMDAsImhlaWdodCI6MjAwLCJmaXQiOiJpbnNpZGUifSwid2VicCI6eyJxdWFsaXR5Ijo4MH0sImpwZWciOnsicXVhbGl0eSI6ODB9LCJyb3RhdGUiOm51bGx9fQ=="
@@ -92,11 +100,7 @@ describe("strategies", () => {
     });
 
     it("returns a cropped url", () => {
-      const img = lambda.exec(
-        "crop",
-        "https://d32dm0rphc51dk.cloudfront.net/MFFPXvpJSoGzggU8zujwBw/normalized.jpg",
-        { width: 200, height: 200 }
-      );
+      const img = lambda.exec("crop", EXAMPLE_SRC, { width: 200, height: 200 });
 
       expect(img).toEqual(
         "https://d1j88w5k23s1nr.cloudfront.net/eyJidWNrZXQiOiJhcnRzeS1tZWRpYS1hc3NldHMiLCJrZXkiOiJNRkZQWHZwSlNvR3pnZ1U4enVqd0J3L25vcm1hbGl6ZWQuanBnIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjoyMDAsImhlaWdodCI6MjAwLCJmaXQiOiJjb3ZlciJ9LCJ3ZWJwIjp7InF1YWxpdHkiOjgwfSwianBlZyI6eyJxdWFsaXR5Ijo4MH0sInJvdGF0ZSI6bnVsbH19"

package/src/services/gemini.ts

@@ -1,5 +1,5 @@
-import { stringify } from "qs";
 import { DEFAULT_QUALITY, Exec, validate } from "../services";
+import { stringify } from "../utils/stringify";
 
 export type Gemini = {
   endpoint: string;
@@ -14,15 +14,18 @@ export const gemini = (config: Gemini): Exec => {
     switch (mode) {
       case "crop": {
         resizeTo = "fill";
+        break;
       }
 
       case "resize": {
         if (width && !height) {
           resizeTo = "width";
+          break;
         }
 
         if (height && !width) {
           resizeTo = "height";
+          break;
         }
 
         resizeTo = "fit";
@@ -37,11 +40,7 @@ export const gemini = (config: Gemini): Exec => {
       quality,
     };
 
-    const query = stringify(params, {
-      arrayFormat: "brackets",
-      skipNulls: true,
-      sort: (a, b) => a.localeCompare(b),
-    });
+    const query = stringify(params);
 
     return `${config.endpoint}?${query}`;
   };

package/src/services/imgix.ts

@@ -1,6 +1,6 @@
 import md5 from "md5";
-import { stringify } from "qs";
 import { DEFAULT_QUALITY, Exec, validate } from "../services";
+import { stringify } from "../utils/stringify";
 
 export type Imgix = {
   endpoint: string;

package/src/utils/stringify.ts

@@ -0,0 +1,15 @@
+export const stringify = (
+  params: Record<string, string | number | undefined | null | boolean>
+): string => {
+  const keys = Object.keys(params)
+    // Alphabetize the keys
+    .sort((a, b) => a.localeCompare(b))
+    // Filter out null or undefined values
+    .filter((key) => params[key] != null);
+
+  return keys
+    .map((key) => {
+      return `${key}=${encodeURIComponent(`${params[key]}`)}`;
+    })
+    .join("&");
+};