feat(builder): add Builder.io (#13)

* Add Builder.io

* Fix accidentally checked in file

* Update src/transformers/builder.ts

Co-authored-by: Matt Kane <m@mk.gg>

* PR feedback and aim to get tests to pass

* Small tweaks

* Minor fix

* Fix test

* Tests passing

* Fixes

* Minor CSS suggestion

---------

Co-authored-by: Matt Kane <m@mk.gg>

README.md

@@ -99,6 +99,7 @@ is not auto-detected.
 
 - Imgix, including Unsplash, DatoCMS, Sanity and Prismic
 - Contentful
+- Builder.io
 - Cloudinary
 - Shopify
 - WordPress.com and Jetpack Site Accelerator
@@ -112,7 +113,7 @@ is not auto-detected.
   for transforming images. This is often used to resize images on the fly, but
   can also be used to apply other transforms such as cropping, rotation,
   compression, etc. This includes dedicated image CDNs such as Imgix and
-  Cloudinary, CMSs such as Contentful and Sanity, general CDNs such as Bunny.net
+  Cloudinary, CMSs such as Contentful, Builder.io and Sanity, general CDNs such as Bunny.net
   that provide an image API, but also other service providers such as Shopify.
   The CMSs and other service providers often use a dedicated image CDN to
   provide the image API, most commonly Imgix. In most cases they support the

data/domains.json

@@ -1,6 +1,7 @@
 {
   "res.cloudinary.com": "cloudinary",
   "images.ctfassets.net": "contentful",
+  "cdn.builder.io": "builder.io",
   "images.prismic.io": "imgix",
   "www.datocms-assets.com": "imgix",
   "cdn.sanity.io": "imgix",

demo/src/examples.json

@@ -7,6 +7,10 @@
     "Contentful",
     "https://images.ctfassets.net/yadj1kx9rmg0/wtrHxeu3zEoEce2MokCSi/cf6f68efdcf625fdc060607df0f3baef/quwowooybuqbl6ntboz3.jpg?fm=jpg"
   ],
+  [
+    "Builder.io",
+    "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F462d29d57dda42cb9e26441501db535f?format=webp&fit=cover"
+  ],
   [
     "Cloudinary",
     "https://res.cloudinary.com/demo/image/upload/c_lfill,w_800,h_550,f_auto/dog.webp"

demo/src/style.css

@@ -69,11 +69,14 @@ summary {
 
 
 .imagePanel {
-
 	display: grid;
 	place-items: center;
 }
 
+.imagePanel img {
+	object-fit: cover;
+}
+
 .code {
 	overflow: auto;
 }

src/parse.ts

@@ -1,5 +1,6 @@
 import { getImageCdnForUrl } from "./detect.ts";
 import { parse as contentful } from "./transformers/contentful.ts";
+import { parse as builder } from "./transformers/builder.ts";
 import { parse as imgix } from "./transformers/imgix.ts";
 import { parse as shopify } from "./transformers/shopify.ts";
 import { parse as wordpress } from "./transformers/wordpress.ts";
@@ -12,6 +13,7 @@ import { ImageCdn, ParsedUrl, SupportedImageCdn, UrlParser } from "./types.ts";
 export const parsers = {
   imgix,
   contentful,
+  "builder.io": builder,
   shopify,
   wordpress,
   cloudinary,

src/transform.ts

@@ -1,5 +1,6 @@
 import { getImageCdnForUrl } from "./detect.ts";
 import { transform as contentful } from "./transformers/contentful.ts";
+import { transform as builder } from "./transformers/builder.ts";
 import { transform as imgix } from "./transformers/imgix.ts";
 import { transform as shopify } from "./transformers/shopify.ts";
 import { transform as wordpress } from "./transformers/wordpress.ts";
@@ -12,6 +13,7 @@ import { ImageCdn, SupportedImageCdn, UrlTransformer } from "./types.ts";
 export const transformers = {
   imgix,
   contentful,
+  "builder.io": builder,
   shopify,
   wordpress,
   cloudinary,

src/transformers/builder.test.ts

@@ -0,0 +1,58 @@
+import { assertEquals } from "https://deno.land/std@0.172.0/testing/asserts.ts";
+
+import { transform } from "./builder.ts";
+
+const img =
+  "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F462d29d57dda42cb9e26441501db535f";
+
+Deno.test("builder.io", async (t) => {
+  await t.step("should format a URL", () => {
+    const result = transform({
+      url: img,
+      width: 200,
+      height: 100,
+    });
+    assertEquals(
+      result?.toString(),
+      "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F462d29d57dda42cb9e26441501db535f?fit=cover&width=200&height=100",
+    );
+  });
+  await t.step("should not set height if not provided", () => {
+    const result = transform({ url: img, width: 200 });
+    assertEquals(
+      result?.toString(),
+      "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F462d29d57dda42cb9e26441501db535f?fit=cover&width=200",
+    );
+  });
+  await t.step("should delete height if not set", () => {
+    const url = new URL(img);
+    url.searchParams.set("height", "100");
+    const result = transform({ url, width: 200 });
+    assertEquals(
+      result?.toString(),
+      "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F462d29d57dda42cb9e26441501db535f?fit=cover&width=200",
+    );
+  });
+
+  await t.step("should round non-integer params", () => {
+    const result = transform({
+      url: img,
+      width: 200.6,
+      height: 100.2,
+    });
+    assertEquals(
+      result?.toString(),
+      "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F462d29d57dda42cb9e26441501db535f?fit=cover&width=201&height=100",
+    );
+  });
+
+  await t.step("should not set fit=cover if another value exists", () => {
+    const url = new URL(img);
+    url.searchParams.set("fit", "inside");
+    const result = transform({ url, width: 200 });
+    assertEquals(
+      result?.toString(),
+      "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F462d29d57dda42cb9e26441501db535f?fit=inside&width=200",
+    );
+  });
+});

src/transformers/builder.ts

@@ -0,0 +1,37 @@
+import { UrlParser, UrlTransformer } from "../types.ts";
+import {
+  getNumericParam,
+  setParamIfDefined,
+  setParamIfUndefined,
+} from "../utils.ts";
+
+export const parse: UrlParser<{ fit?: string; quality?: number }> = (url) => {
+  const parsedUrl = new URL(url);
+
+  const width = getNumericParam(parsedUrl, "width");
+  const height = getNumericParam(parsedUrl, "height");
+  const quality = getNumericParam(parsedUrl, "quality");
+  const format = parsedUrl.searchParams.get("format") || undefined;
+  const fit = parsedUrl.searchParams.get("fit") || undefined;
+  parsedUrl.search = "";
+
+  return {
+    width,
+    height,
+    format,
+    base: parsedUrl.toString(),
+    params: { quality, fit },
+    cdn: "builder.io",
+  };
+};
+
+export const transform: UrlTransformer = (
+  { url: originalUrl, width, height, format },
+) => {
+  const url = new URL(originalUrl);
+  setParamIfUndefined(url, "fit", "cover");
+  setParamIfDefined(url, "width", width, true, true);
+  setParamIfDefined(url, "height", height, true, true);
+  setParamIfDefined(url, "format", format);
+  return url;
+};

src/types.ts

@@ -54,6 +54,7 @@ export interface UrlParser<
 
 export type ImageCdn =
   | "contentful"
+  | "builder.io"
   | "cloudinary"
   | "cloudflare"
   | "imgix"