cloudcommerce 0.7.0 → 0.8.0

package/packages/storefront/src/serverless/Picture.runtime.astro

@@ -0,0 +1,90 @@
+---
+import type { PictureComponentRemoteImageProps } from '@astrojs/image/components/';
+import { join as joinPath } from 'node:path';
+import { readFileSync } from 'node:fs';
+import { getPicture } from './get-picture';
+
+export type Props = Omit<PictureComponentRemoteImageProps, 'aspectRatio'> & {
+  aspectRatio?: PictureComponentRemoteImageProps['aspectRatio'],
+  fetchpriority?: 'high' | 'low' | 'auto',
+};
+
+type OriginalImage = { filepath: string, width: number, height: number };
+const originalImages: OriginalImage[] = [];
+const manifestFilepath = joinPath(process.cwd(), 'dist/server/images.src.csv');
+readFileSync(manifestFilepath, 'utf-8').split(/\n/).forEach((line) => {
+  const [filepath, width, height] = line.split(',');
+  originalImages.push({
+    filepath,
+    width: Number(width),
+    height: Number(height),
+  });
+});
+
+const tryImageSize = (src: string) => {
+  let dimensions: { width?: number, height?: number } = {};
+  if (typeof src === 'string' && src.startsWith('/')) {
+    const originalImage = originalImages.find(({ filepath }) => {
+      return new RegExp(`^/${filepath}\\??.*`).test(src);
+    });
+    if (originalImage) {
+      const { width, height } = originalImage;
+      dimensions = { width, height };
+    }
+  }
+  return dimensions;
+};
+
+const getAspectRatio = (src: string | { width?: number, height?: number }) => {
+  if (typeof src === 'string') {
+    src = tryImageSize(src);
+  }
+  if (src.width) {
+    return src.height ? src.width / src.height : 1;
+  }
+  return 0;
+};
+
+const {
+  src,
+  alt,
+  sizes,
+  widths,
+  aspectRatio: propAspectRatio,
+  fit,
+  background,
+  position,
+  formats = ['avif', 'webp'],
+  loading = 'lazy',
+  decoding = 'async',
+  ...attrs
+} = Astro.props;
+
+let aspectRatio = propAspectRatio;
+if ((!attrs.width || !attrs.height) && !aspectRatio && typeof src === 'string') {
+  const { width, height } = tryImageSize(src);
+  if (height) {
+    aspectRatio = getAspectRatio({ width, height });
+    attrs.width = width;
+    attrs.height = height;
+  }
+}
+
+const { image, sources } = await getPicture({
+  src,
+  widths,
+  formats,
+  aspectRatio,
+  fit,
+  background,
+  position,
+  alt,
+});
+delete image.width;
+delete image.height;
+---
+
+<picture>
+  {sources.map((attrs) => <source {...attrs} sizes={sizes} />)}
+  <img {...image} loading={loading} decoding={decoding} {...attrs} />
+</picture>

package/packages/storefront/src/serverless/get-image.ts

@@ -0,0 +1,47 @@
+import type { OutputFormat } from '@astrojs/image/dist/loaders/';
+import { join as joinPath } from 'node:path';
+import { readFileSync } from 'node:fs';
+
+type BuiltImage = { filename: string, width: number, height: number };
+const builtImages: BuiltImage[] = [];
+const manifestFilepath = joinPath(process.cwd(), 'dist/server/images.dist.csv');
+readFileSync(manifestFilepath, 'utf-8').split(/\n/).forEach((line) => {
+  const [filename, width, height] = line.split(',');
+  builtImages.push({
+    filename,
+    width: Number(width),
+    height: Number(height),
+  });
+});
+builtImages.sort((a, b) => {
+  if (a.width < b.width) return -1;
+  return 1;
+});
+
+type ImageOptions = Record<string, any> & {
+  src: string,
+  width: number,
+  format: OutputFormat,
+};
+const getImage = async ({ src, width, format }: ImageOptions) => {
+  const filename = src.replace(/^.*\//, '').replace(/.\w+(\?.*)?$/, '');
+  const matchFilename = (_builtImage: BuiltImage) => {
+    return filename === _builtImage.filename
+      .replace(new RegExp(`[_.][a-z0-9]+\\.${format}$`, 'i'), '');
+  };
+  let builtImage = builtImages.find((_builtImage) => {
+    return _builtImage.width >= width && matchFilename(_builtImage);
+  });
+  if (!builtImage) {
+    builtImage = builtImages.find(matchFilename);
+  }
+  return {
+    src: `/_astro/${builtImage.filename}`,
+    width: builtImage.width,
+    height: builtImage.height,
+  };
+};
+
+export default getImage;
+
+export { getImage };

package/packages/storefront/{ssr-runtime → src/serverless}/get-picture.ts

@@ -1,8 +1,8 @@
 import type { HTMLAttributes } from 'astro/types';
-import type { ImageMetadata } from '@astrojs/image/dist/vite-plugin-astro-image';
+// import type { ImageMetadata } from '@astrojs/image/dist/vite-plugin-astro-image';
 import type { OutputFormat, TransformOptions } from '@astrojs/image/dist/loaders/';
-// eslint-disable-next-line
 import mime from 'mime';
+import getImage from './get-image';
 
 function removeQueryString(src: string) {
   const index = src.lastIndexOf('?');
@@ -36,7 +36,7 @@ function parseAspectRatio(aspectRatio: TransformOptions['aspectRatio']) {
 }
 
 export interface GetPictureParams {
-  src: string | ImageMetadata | Promise<{ default: ImageMetadata }>;
+  src: string /* | ImageMetadata | Promise<{ default: ImageMetadata }> */;
   alt: string;
   widths: number[];
   formats: OutputFormat[];
@@ -55,8 +55,11 @@ async function resolveAspectRatio({ src, aspectRatio }: GetPictureParams) {
   if (typeof src === 'string') {
     return parseAspectRatio(aspectRatio);
   }
+  throw new Error('Custom (faster) `Picture.ssr.astro` works only with string ("remote") src');
+  /*
   const metadata = 'then' in src ? (await src).default : src;
   return parseAspectRatio(aspectRatio) || metadata.width / metadata.height;
+  */
 }
 
 async function resolveFormats({ src, formats }: GetPictureParams) {
@@ -64,8 +67,11 @@ async function resolveFormats({ src, formats }: GetPictureParams) {
   if (typeof src === 'string') {
     unique.add(extname(src).replace('.', '') as OutputFormat);
   } else {
+    throw new Error('Custom `Picture.ssr.astro` works only with string src');
+    /*
     const metadata = 'then' in src ? (await src).default : src;
     unique.add(extname(metadata.src).replace('.', '') as OutputFormat);
+    */
   }
   return Array.from(unique).filter(Boolean);
 }

package/packages/types/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/types",
   "type": "module",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "E-Com Plus Cloud Commerce reusable type definitions",
   "main": "index.ts",
   "repository": {