@adobe-commerce/elsie 1.3.0-alpha15 → 1.3.0-alpha16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.3.0-alpha15",
+  "version": "1.3.0-alpha16",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {

package/src/lib/aem/assets.ts

@@ -0,0 +1,207 @@
+import { provider as UI, Image } from '@adobe-commerce/elsie/components';
+import { getConfigValue } from '@adobe-commerce/elsie/lib/aem/configs';
+
+interface AemAssetsParams {
+  quality?: number;
+  format?: string;
+  crop?: {
+    xOrigin?: number;
+    yOrigin?: number;
+    width?: number;
+    height?: number;
+  };
+  size?: {
+    width?: number;
+    height?: number;
+  };
+  width?: number;
+  height?: number;
+  [key: string]: any;
+}
+
+interface AemAssetsImageConfig {
+  wrapper?: HTMLElement;
+  alias: string;
+  params: AemAssetsParams;
+  imageProps: {
+    src: string;
+    width?: number;
+    height?: number;
+    [key: string]: any;
+  };
+  src?: string;
+}
+
+interface RenderContext {
+  replaceWith: (element: HTMLElement) => void;
+}
+
+export function isAemAssetsEnabled(): boolean {
+  const config = getConfigValue('commerce-assets-enabled');
+
+  return config && (
+    (typeof config === 'string' && config.toLowerCase() === 'true')
+    || (typeof config === 'boolean' && config === true)
+  );
+}
+
+export function getDefaultAemAssetsOptimizationParams(): { quality: number; format: string } {
+  // See: https://adobe-aem-assets-delivery-experimental.redoc.ly/
+  return {
+    quality: 80,
+    format: 'webp',
+  };
+}
+
+/**
+ * Normalizes the given URL to ensure it is a valid URL.
+ * @param {string} url - The URL to normalize.
+ * @returns {string} The normalized URL.
+ */
+function normalizeUrl(url: string): string {
+  let imageUrl = url;
+
+  if (imageUrl.startsWith('//')) {
+    // Use current window's protocol.
+    const { protocol } = window.location;
+    console.log('protocol', protocol);
+    imageUrl = protocol + imageUrl;
+  }
+
+  return imageUrl;
+}
+
+export function isAemAssetsUrl(url: string | URL): boolean {
+  const assetsUrl = typeof url === 'string' ? new URL(normalizeUrl(url)) : url;
+
+  if (!assetsUrl.pathname.startsWith('/adobe/assets/urn:aaid:aem')) {
+    return false;
+  }
+
+  return true;
+}
+
+export function generateAemAssetsOptimizedUrl(url: string, alias: string, params: AemAssetsParams = {}): string {
+  const defaultParams = getDefaultAemAssetsOptimizationParams();
+  const mergedParams: AemAssetsParams = { ...defaultParams, ...params };
+
+  // Destructure the ones that need special handling
+  const {
+    format,
+    crop,
+    size,
+    ...optimizedParams
+  } = mergedParams;
+
+  const searchParams = new URLSearchParams(optimizedParams);
+
+  if (crop) {
+    const [xOrigin, yOrigin] = [crop.xOrigin || 0, crop.yOrigin || 0];
+    const [width, height] = [crop.width || 100, crop.height || 100];
+
+    const cropTransform = `${xOrigin}p,${yOrigin}p,${width}p,${height}p`;
+    searchParams.set('crop', cropTransform);
+  }
+
+  // Both values must be present
+  if (size && size.width && size.height) {
+    searchParams.set('size', `${size.width},${size.height}`);
+  }
+
+  return `${url}/as/${alias}.${format}?${searchParams.toString()}`;
+}
+
+export function tryGenerateAemAssetsOptimizedUrl(url: string, alias: string, params: AemAssetsParams = {}): string {
+  const assetsEnabled = isAemAssetsEnabled();
+
+  if (!(assetsEnabled)) {
+    // No-op, doesn't do anything.
+    return url;
+  }
+
+  const assetsUrl = new URL(normalizeUrl(url));
+
+  if (!isAemAssetsUrl(assetsUrl)) {
+    // Not an AEM Assets URL, so no-op.
+    return url;
+  }
+
+  const base = assetsUrl.origin + assetsUrl.pathname;
+  return generateAemAssetsOptimizedUrl(base, alias, params);
+}
+
+export function makeAemAssetsImageSlot(
+  config: AemAssetsImageConfig,
+) {
+  return (ctx: RenderContext) => {
+    const {
+      wrapper,
+      alias,
+      params,
+      imageProps,
+      src,
+    } = config;
+
+    const container = wrapper ?? document.createElement('div');
+    const imageSrc = generateAemAssetsOptimizedUrl(src || imageProps.src, alias, params);
+
+    UI.render(Image as any, {
+      ...imageProps,
+
+      src: imageSrc,
+      params: {
+        width: params.width,
+
+        // If not null, they will be applied by default.
+        // And they are not compatible with the AEM Assets API.
+        crop: null,
+        fit: null,
+        auto: null,
+      },
+    })(container);
+
+    ctx.replaceWith(container);
+  };
+}
+
+export function tryRenderAemAssetsImage(ctx: RenderContext, config: AemAssetsImageConfig): void {
+  // Renders an equivalent of the default image.
+  function renderDefaultImage(): void {
+    const container = config.wrapper ?? document.createElement('div');
+    const { imageProps } = config;
+
+    (UI.render as any)(Image, imageProps)(container);
+    ctx.replaceWith(container);
+  }
+
+  const assetsEnabled = isAemAssetsEnabled();
+
+  if (!(assetsEnabled)) {
+    // No-op, render the default image.
+    renderDefaultImage();
+    return;
+  }
+
+  const { imageProps, src, ...slotConfig } = config;
+  const assetsUrl = new URL(normalizeUrl(src ?? imageProps.src));
+
+  if (!isAemAssetsUrl(assetsUrl)) {
+    // Not an AEM Assets URL, so render the default image.
+    renderDefaultImage();
+    return;
+  }
+
+  makeAemAssetsImageSlot({
+    // Use the default image props for params and src.
+    // Unless overriden by the slot config.
+    src: assetsUrl.toString(),
+    params: {
+      width: imageProps.width,
+      height: imageProps.height,
+      ...slotConfig.params,
+    },
+    imageProps,
+    alias: slotConfig.alias,
+    wrapper: slotConfig.wrapper,
+  })(ctx);
+}