@uniformdev/assets 20.12.1-alpha.23 → 20.12.1-alpha.26

package/dist/index.d.mts

@@ -146,7 +146,7 @@ interface components$1 {
             categoryId?: string | null;
             /** @description Description of the component definition */
             description?: string;
-            /** @description Description of the component definition */
+            /** @description Preview image URL for the component definition (shown in the UI) */
             previewImageUrl?: string;
             /**
              * @description if this component uses team permissions or custom permissions
@@ -1602,6 +1602,9 @@ type AssetDefinition = {
 };
 declare const assetDefinitions: Record<AssetDefinitionType, AssetDefinition>;
 
+/**
+ * A union type of possible query parameters for the image delivery API.
+ */
 type ImageDeliveryParams = XOR<{
     format: 'original';
 }, {
@@ -1615,6 +1618,7 @@ type ImageDeliveryParams = XOR<{
      * "cover" additionally supports specifying a focal point via the "focal" parameter
      */
     fit?: 'scale-down' | 'contain' | 'cover';
+    focal?: undefined;
 }, {
     width?: number;
     height?: number;
@@ -1623,6 +1627,32 @@ type ImageDeliveryParams = XOR<{
     /** "string" is in format NxM - N and M are numbers between 0.00 and 1.00, N representing the x-axis and M representing the y-axis */
     focal: 'auto' | 'center' | string;
 }>;
+/**
+ * A union type of possible transformations accepted by the `imageFrom` function.
+ * Differentiates slightly from the `ImageDeliveryParams` type, in that the focal
+ * point is represented by an object { x: number, y: number }, and not a string.
+ */
+type ImageFromTransformProps = XOR<{
+    width?: number;
+    height?: number;
+    fit?: 'scale-down' | 'contain' | 'cover';
+}, {
+    width?: number;
+    height?: number;
+    fit?: 'cover';
+    focal: 'auto' | 'center' | {
+        x: number;
+        y: number;
+    };
+}>;
+/**
+ * A helper function for extracting the image URL from an asset and optionally
+ * applying transformation URL query parameters.
+ */
+declare const imageFrom: (asset: Asset | AssetParamValueItem | string) => {
+    url: () => string;
+    transform: (transformProps: ImageFromTransformProps) => /*elided*/ any;
+};
 
 /**
  * Converts a content asset to a put content asset body that has only the properties expected to the PUT API.
@@ -1630,4 +1660,4 @@ type ImageDeliveryParams = XOR<{
  */
 declare function convertAssetToPutAsset(asset: AssetGetResponseSingle): AssetUpsertRequest;
 
-export { type Asset, AssetClient, type AssetDefinitionType, type AssetDeleteRequest, type AssetGetRequest, type AssetGetRequestList, type AssetGetRequestSingle, type AssetGetResponse, type AssetGetResponseList, type AssetGetResponseSingle, type AssetParamValue, type AssetParamValueItem, type AssetUpsertRequest, type ImageDeliveryParams, UncachedAssetClient, assetDefinitions, convertAssetToPutAsset };
+export { type Asset, AssetClient, type AssetDefinitionType, type AssetDeleteRequest, type AssetGetRequest, type AssetGetRequestList, type AssetGetRequestSingle, type AssetGetResponse, type AssetGetResponseList, type AssetGetResponseSingle, type AssetParamValue, type AssetParamValueItem, type AssetUpsertRequest, type ImageDeliveryParams, type ImageFromTransformProps, UncachedAssetClient, assetDefinitions, convertAssetToPutAsset, imageFrom };

package/dist/index.d.ts

@@ -146,7 +146,7 @@ interface components$1 {
             categoryId?: string | null;
             /** @description Description of the component definition */
             description?: string;
-            /** @description Description of the component definition */
+            /** @description Preview image URL for the component definition (shown in the UI) */
             previewImageUrl?: string;
             /**
              * @description if this component uses team permissions or custom permissions
@@ -1602,6 +1602,9 @@ type AssetDefinition = {
 };
 declare const assetDefinitions: Record<AssetDefinitionType, AssetDefinition>;
 
+/**
+ * A union type of possible query parameters for the image delivery API.
+ */
 type ImageDeliveryParams = XOR<{
     format: 'original';
 }, {
@@ -1615,6 +1618,7 @@ type ImageDeliveryParams = XOR<{
      * "cover" additionally supports specifying a focal point via the "focal" parameter
      */
     fit?: 'scale-down' | 'contain' | 'cover';
+    focal?: undefined;
 }, {
     width?: number;
     height?: number;
@@ -1623,6 +1627,32 @@ type ImageDeliveryParams = XOR<{
     /** "string" is in format NxM - N and M are numbers between 0.00 and 1.00, N representing the x-axis and M representing the y-axis */
     focal: 'auto' | 'center' | string;
 }>;
+/**
+ * A union type of possible transformations accepted by the `imageFrom` function.
+ * Differentiates slightly from the `ImageDeliveryParams` type, in that the focal
+ * point is represented by an object { x: number, y: number }, and not a string.
+ */
+type ImageFromTransformProps = XOR<{
+    width?: number;
+    height?: number;
+    fit?: 'scale-down' | 'contain' | 'cover';
+}, {
+    width?: number;
+    height?: number;
+    fit?: 'cover';
+    focal: 'auto' | 'center' | {
+        x: number;
+        y: number;
+    };
+}>;
+/**
+ * A helper function for extracting the image URL from an asset and optionally
+ * applying transformation URL query parameters.
+ */
+declare const imageFrom: (asset: Asset | AssetParamValueItem | string) => {
+    url: () => string;
+    transform: (transformProps: ImageFromTransformProps) => /*elided*/ any;
+};
 
 /**
  * Converts a content asset to a put content asset body that has only the properties expected to the PUT API.
@@ -1630,4 +1660,4 @@ type ImageDeliveryParams = XOR<{
  */
 declare function convertAssetToPutAsset(asset: AssetGetResponseSingle): AssetUpsertRequest;
 
-export { type Asset, AssetClient, type AssetDefinitionType, type AssetDeleteRequest, type AssetGetRequest, type AssetGetRequestList, type AssetGetRequestSingle, type AssetGetResponse, type AssetGetResponseList, type AssetGetResponseSingle, type AssetParamValue, type AssetParamValueItem, type AssetUpsertRequest, type ImageDeliveryParams, UncachedAssetClient, assetDefinitions, convertAssetToPutAsset };
+export { type Asset, AssetClient, type AssetDefinitionType, type AssetDeleteRequest, type AssetGetRequest, type AssetGetRequestList, type AssetGetRequestSingle, type AssetGetResponse, type AssetGetResponseList, type AssetGetResponseSingle, type AssetParamValue, type AssetParamValueItem, type AssetUpsertRequest, type ImageDeliveryParams, type ImageFromTransformProps, UncachedAssetClient, assetDefinitions, convertAssetToPutAsset, imageFrom };

package/dist/index.esm.js

@@ -62,6 +62,77 @@ var assetDefinitions = {
   }
 };
 
+// src/imageDelivery.ts
+var isUniformImageUrl = (imageUrl) => {
+  try {
+    if (typeof imageUrl !== "string") {
+      return false;
+    }
+    return /(img).uniform.(rocks|global)$/.test(new URL(imageUrl).hostname);
+  } catch (e) {
+    return false;
+  }
+};
+var imageFrom = (asset) => {
+  var _a, _b, _c, _d;
+  const baseUrl = typeof asset === "string" ? asset : (_b = (_a = asset.fields) == null ? void 0 : _a.url) == null ? void 0 : _b.value;
+  const isUniformHosted = isUniformImageUrl(baseUrl);
+  const deliveryParams = {};
+  if (typeof asset !== "string") {
+    if ((_d = (_c = asset.fields) == null ? void 0 : _c.focalPoint) == null ? void 0 : _d.value) {
+      deliveryParams.focal = `${asset.fields.focalPoint.value.x}x${asset.fields.focalPoint.value.y}`;
+    }
+  }
+  const api = {
+    url: () => {
+      if (!baseUrl) {
+        return "";
+      }
+      if (!isUniformHosted) {
+        return baseUrl;
+      }
+      const url = new URL(baseUrl);
+      const params = deliveryParams;
+      if (params.width !== void 0) {
+        url.searchParams.set("width", params.width.toString());
+      }
+      if (params.height !== void 0) {
+        url.searchParams.set("height", params.height.toString());
+      }
+      if (params.fit !== void 0) {
+        url.searchParams.set("fit", params.fit);
+      } else if (params.width !== void 0 && params.height !== void 0) {
+        url.searchParams.set("fit", "cover");
+        params.fit = "cover";
+      }
+      if (params.width !== void 0 && params.height !== void 0 && params.focal !== void 0 && params.fit === "cover") {
+        url.searchParams.set("focal", params.focal);
+      }
+      return url.toString();
+    },
+    transform: (transformProps) => {
+      if (transformProps.width !== void 0) {
+        deliveryParams.width = transformProps.width;
+      }
+      if (transformProps.height !== void 0) {
+        deliveryParams.height = transformProps.height;
+      }
+      if (transformProps.fit !== void 0) {
+        deliveryParams.fit = transformProps.fit;
+      }
+      if (transformProps.focal !== void 0) {
+        if (typeof transformProps.focal === "string") {
+          deliveryParams.focal = transformProps.focal;
+        } else {
+          deliveryParams.focal = `${transformProps.focal.x}x${transformProps.focal.y}`;
+        }
+      }
+      return api;
+    }
+  };
+  return api;
+};
+
 // src/utils/assetConverter.ts
 function convertAssetToPutAsset(asset) {
   var _a, _b, _c, _d;
@@ -85,5 +156,6 @@ export {
   AssetClient,
   UncachedAssetClient,
   assetDefinitions,
-  convertAssetToPutAsset
+  convertAssetToPutAsset,
+  imageFrom
 };

package/dist/index.js

@@ -23,7 +23,8 @@ __export(src_exports, {
   AssetClient: () => AssetClient,
   UncachedAssetClient: () => UncachedAssetClient,
   assetDefinitions: () => assetDefinitions,
-  convertAssetToPutAsset: () => convertAssetToPutAsset
+  convertAssetToPutAsset: () => convertAssetToPutAsset,
+  imageFrom: () => imageFrom
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -91,6 +92,77 @@ var assetDefinitions = {
   }
 };
 
+// src/imageDelivery.ts
+var isUniformImageUrl = (imageUrl) => {
+  try {
+    if (typeof imageUrl !== "string") {
+      return false;
+    }
+    return /(img).uniform.(rocks|global)$/.test(new URL(imageUrl).hostname);
+  } catch (e) {
+    return false;
+  }
+};
+var imageFrom = (asset) => {
+  var _a, _b, _c, _d;
+  const baseUrl = typeof asset === "string" ? asset : (_b = (_a = asset.fields) == null ? void 0 : _a.url) == null ? void 0 : _b.value;
+  const isUniformHosted = isUniformImageUrl(baseUrl);
+  const deliveryParams = {};
+  if (typeof asset !== "string") {
+    if ((_d = (_c = asset.fields) == null ? void 0 : _c.focalPoint) == null ? void 0 : _d.value) {
+      deliveryParams.focal = `${asset.fields.focalPoint.value.x}x${asset.fields.focalPoint.value.y}`;
+    }
+  }
+  const api = {
+    url: () => {
+      if (!baseUrl) {
+        return "";
+      }
+      if (!isUniformHosted) {
+        return baseUrl;
+      }
+      const url = new URL(baseUrl);
+      const params = deliveryParams;
+      if (params.width !== void 0) {
+        url.searchParams.set("width", params.width.toString());
+      }
+      if (params.height !== void 0) {
+        url.searchParams.set("height", params.height.toString());
+      }
+      if (params.fit !== void 0) {
+        url.searchParams.set("fit", params.fit);
+      } else if (params.width !== void 0 && params.height !== void 0) {
+        url.searchParams.set("fit", "cover");
+        params.fit = "cover";
+      }
+      if (params.width !== void 0 && params.height !== void 0 && params.focal !== void 0 && params.fit === "cover") {
+        url.searchParams.set("focal", params.focal);
+      }
+      return url.toString();
+    },
+    transform: (transformProps) => {
+      if (transformProps.width !== void 0) {
+        deliveryParams.width = transformProps.width;
+      }
+      if (transformProps.height !== void 0) {
+        deliveryParams.height = transformProps.height;
+      }
+      if (transformProps.fit !== void 0) {
+        deliveryParams.fit = transformProps.fit;
+      }
+      if (transformProps.focal !== void 0) {
+        if (typeof transformProps.focal === "string") {
+          deliveryParams.focal = transformProps.focal;
+        } else {
+          deliveryParams.focal = `${transformProps.focal.x}x${transformProps.focal.y}`;
+        }
+      }
+      return api;
+    }
+  };
+  return api;
+};
+
 // src/utils/assetConverter.ts
 function convertAssetToPutAsset(asset) {
   var _a, _b, _c, _d;
@@ -115,5 +187,6 @@ function convertAssetToPutAsset(asset) {
   AssetClient,
   UncachedAssetClient,
   assetDefinitions,
-  convertAssetToPutAsset
+  convertAssetToPutAsset,
+  imageFrom
 });

package/dist/index.mjs

@@ -62,6 +62,77 @@ var assetDefinitions = {
   }
 };
 
+// src/imageDelivery.ts
+var isUniformImageUrl = (imageUrl) => {
+  try {
+    if (typeof imageUrl !== "string") {
+      return false;
+    }
+    return /(img).uniform.(rocks|global)$/.test(new URL(imageUrl).hostname);
+  } catch (e) {
+    return false;
+  }
+};
+var imageFrom = (asset) => {
+  var _a, _b, _c, _d;
+  const baseUrl = typeof asset === "string" ? asset : (_b = (_a = asset.fields) == null ? void 0 : _a.url) == null ? void 0 : _b.value;
+  const isUniformHosted = isUniformImageUrl(baseUrl);
+  const deliveryParams = {};
+  if (typeof asset !== "string") {
+    if ((_d = (_c = asset.fields) == null ? void 0 : _c.focalPoint) == null ? void 0 : _d.value) {
+      deliveryParams.focal = `${asset.fields.focalPoint.value.x}x${asset.fields.focalPoint.value.y}`;
+    }
+  }
+  const api = {
+    url: () => {
+      if (!baseUrl) {
+        return "";
+      }
+      if (!isUniformHosted) {
+        return baseUrl;
+      }
+      const url = new URL(baseUrl);
+      const params = deliveryParams;
+      if (params.width !== void 0) {
+        url.searchParams.set("width", params.width.toString());
+      }
+      if (params.height !== void 0) {
+        url.searchParams.set("height", params.height.toString());
+      }
+      if (params.fit !== void 0) {
+        url.searchParams.set("fit", params.fit);
+      } else if (params.width !== void 0 && params.height !== void 0) {
+        url.searchParams.set("fit", "cover");
+        params.fit = "cover";
+      }
+      if (params.width !== void 0 && params.height !== void 0 && params.focal !== void 0 && params.fit === "cover") {
+        url.searchParams.set("focal", params.focal);
+      }
+      return url.toString();
+    },
+    transform: (transformProps) => {
+      if (transformProps.width !== void 0) {
+        deliveryParams.width = transformProps.width;
+      }
+      if (transformProps.height !== void 0) {
+        deliveryParams.height = transformProps.height;
+      }
+      if (transformProps.fit !== void 0) {
+        deliveryParams.fit = transformProps.fit;
+      }
+      if (transformProps.focal !== void 0) {
+        if (typeof transformProps.focal === "string") {
+          deliveryParams.focal = transformProps.focal;
+        } else {
+          deliveryParams.focal = `${transformProps.focal.x}x${transformProps.focal.y}`;
+        }
+      }
+      return api;
+    }
+  };
+  return api;
+};
+
 // src/utils/assetConverter.ts
 function convertAssetToPutAsset(asset) {
   var _a, _b, _c, _d;
@@ -85,5 +156,6 @@ export {
   AssetClient,
   UncachedAssetClient,
   assetDefinitions,
-  convertAssetToPutAsset
+  convertAssetToPutAsset,
+  imageFrom
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/assets",
-  "version": "20.12.1-alpha.23+36df23cbe9",
+  "version": "20.12.1-alpha.26+727af74745",
   "description": "Uniform Assets",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -36,10 +36,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@uniformdev/context": "20.12.1-alpha.23+36df23cbe9"
+    "@uniformdev/context": "20.12.1-alpha.26+727af74745"
   },
   "devDependencies": {
     "ts-xor": "^1.3.0"
   },
-  "gitHead": "36df23cbe9ca246137efcf2f4a57e04d029406cc"
+  "gitHead": "727af74745bafe690997e093f65e0c3d0aef5a45"
 }