@wular/pnext 0.0.4 → 0.0.7

package/src/compat/next/image/shared.ts

@@ -5,10 +5,10 @@
 // markup matches Next byte-for-byte where the e2e suites snapshot it.
 // ---------------------------------------------------------------------------
 
-import type { ResolvedImagesConfig } from './config';
+import type { ResolvedImagesConfig } from './config'
 
-export const BLUR_IMG_SIZE = 8;
-export const BLUR_QUALITY = 70;
+export const BLUR_IMG_SIZE = 8
+export const BLUR_QUALITY = 70
 
 /** Default loader: build the /_next/image optimizer URL. */
 export function defaultLoader(
@@ -17,8 +17,8 @@ export function defaultLoader(
   width: number,
   quality?: number,
 ): string {
-  const q = findClosestQuality(config, quality);
-  return `${config.path}?url=${encodeURIComponent(src)}&w=${width}&q=${q}`;
+  const q = findClosestQuality(config, quality)
+  return `${config.path}?url=${encodeURIComponent(src)}&w=${width}&q=${q}`
 }
 
 /**
@@ -26,37 +26,37 @@ export function defaultLoader(
  * out-of-list qualities to the nearest configured one; default 75).
  */
 export function findClosestQuality(config: ResolvedImagesConfig, quality?: number): number {
-  const qualities = config.qualities;
-  if (!qualities || qualities.length === 0) return quality ?? 75;
+  const qualities = config.qualities
+  if (!qualities || qualities.length === 0) return quality ?? 75
   if (quality === undefined) {
     // Next's default when qualities is configured: 75 if present, else closest to 75.
-    return closest(qualities, 75);
+    return closest(qualities, 75)
   }
-  return closest(qualities, quality);
+  return closest(qualities, quality)
 }
 
 function closest(values: number[], target: number): number {
-  let best = values[0]!;
-  let bestDelta = Math.abs(best - target);
+  let best = values[0]!
+  let bestDelta = Math.abs(best - target)
   for (const value of values) {
-    const delta = Math.abs(value - target);
+    const delta = Math.abs(value - target)
     if (delta < bestDelta) {
-      best = value;
-      bestDelta = delta;
+      best = value
+      bestDelta = delta
     }
   }
-  return best;
+  return best
 }
 
 export interface GenImgAttrsResult {
-  src: string;
-  srcSet: string | undefined;
-  sizes: string | undefined;
+  src: string
+  srcSet: string | undefined
+  sizes: string | undefined
 }
 
 interface GetWidthsResult {
-  widths: number[];
-  kind: 'w' | 'x';
+  widths: number[]
+  kind: 'w' | 'x'
 }
 
 function getWidths(
@@ -64,78 +64,86 @@ function getWidths(
   width: number | undefined,
   sizes: string | undefined,
 ): GetWidthsResult {
-  const { deviceSizes, allSizes } = config;
+  const { deviceSizes, allSizes } = config
   if (sizes) {
-    const viewportWidthRe = /(^|\s)(1?\d?\d)vw/g;
-    const percentSizes: number[] = [];
-    for (let match; (match = viewportWidthRe.exec(sizes)); ) {
-      percentSizes.push(parseInt(match[2]!, 10));
+    const viewportWidthRe = /(^|\s)(1?\d?\d)vw/g
+    const percentSizes: number[] = []
+    for (let match; (match = viewportWidthRe.exec(sizes));) {
+      percentSizes.push(parseInt(match[2]!, 10))
     }
     if (percentSizes.length) {
-      const smallestRatio = Math.min(...percentSizes) * 0.01;
+      const smallestRatio = Math.min(...percentSizes) * 0.01
       return {
         widths: allSizes.filter(s => s >= deviceSizes[0]! * smallestRatio),
         kind: 'w',
-      };
+      }
     }
-    return { widths: allSizes, kind: 'w' };
+    return { widths: allSizes, kind: 'w' }
   }
   if (typeof width !== 'number') {
-    return { widths: deviceSizes, kind: 'w' };
+    return { widths: deviceSizes, kind: 'w' }
   }
   const widths = [
     ...new Set(
       [width, width * 2].map(w => allSizes.find(p => p >= w) || allSizes[allSizes.length - 1]!),
     ),
-  ];
-  return { widths, kind: 'x' };
+  ]
+  return { widths, kind: 'x' }
 }
 
 /** Build src/srcSet/sizes exactly as Next's generateImgAttrs. */
 export function generateImgAttrs(params: {
-  config: ResolvedImagesConfig;
-  src: string;
-  unoptimized: boolean;
-  width: number | undefined;
-  quality: number | undefined;
-  sizes: string | undefined;
-  loader: (args: { config: ResolvedImagesConfig; src: string; width: number; quality?: number }) => string;
+  config: ResolvedImagesConfig
+  src: string
+  unoptimized: boolean
+  width: number | undefined
+  quality: number | undefined
+  sizes: string | undefined
+  loader: (args: {
+    config: ResolvedImagesConfig
+    src: string
+    width: number
+    quality?: number
+  }) => string
 }): GenImgAttrsResult {
-  const { config, src, unoptimized, width, quality, sizes, loader } = params;
+  const { config, src, unoptimized, width, quality, sizes, loader } = params
   if (unoptimized) {
-    return { src, srcSet: undefined, sizes: undefined };
+    return { src, srcSet: undefined, sizes: undefined }
   }
-  const { widths, kind } = getWidths(config, width, sizes);
-  const last = widths.length - 1;
+  const { widths, kind } = getWidths(config, width, sizes)
+  const last = widths.length - 1
   return {
     sizes: !sizes && kind === 'w' ? '100vw' : sizes,
     srcSet: widths
-      .map((w, i) => `${loader({ config, src, quality, width: w })} ${kind === 'w' ? w : i + 1}${kind}`)
+      .map(
+        (w, i) =>
+          `${loader({ config, src, quality, width: w })} ${kind === 'w' ? w : i + 1}${kind}`,
+      )
       .join(', '),
     src: loader({ config, src, quality, width: widths[last]! }),
-  };
+  }
 }
 
 /** Next's getImageBlurSvg — the inline feGaussianBlur SVG placeholder. */
 export function getImageBlurSvg(params: {
-  widthInt?: number;
-  heightInt?: number;
-  blurWidth?: number;
-  blurHeight?: number;
-  blurDataURL: string;
-  objectFit?: string;
+  widthInt?: number
+  heightInt?: number
+  blurWidth?: number
+  blurHeight?: number
+  blurDataURL: string
+  objectFit?: string
 }): string {
-  const { widthInt, heightInt, blurWidth, blurHeight, blurDataURL, objectFit } = params;
-  const std = 20;
-  const svgWidth = blurWidth ? blurWidth * 40 : widthInt;
-  const svgHeight = blurHeight ? blurHeight * 40 : heightInt;
-  const viewBox = svgWidth && svgHeight ? `viewBox='0 0 ${svgWidth} ${svgHeight}'` : '';
+  const { widthInt, heightInt, blurWidth, blurHeight, blurDataURL, objectFit } = params
+  const std = 20
+  const svgWidth = blurWidth ? blurWidth * 40 : widthInt
+  const svgHeight = blurHeight ? blurHeight * 40 : heightInt
+  const viewBox = svgWidth && svgHeight ? `viewBox='0 0 ${svgWidth} ${svgHeight}'` : ''
   const preserveAspectRatio = viewBox
     ? 'none'
     : objectFit === 'contain'
       ? 'xMidYMid'
       : objectFit === 'cover'
         ? 'xMidYMid slice'
-        : 'none';
-  return `%3Csvg xmlns='http://www.w3.org/2000/svg' ${viewBox}%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='${std}'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='${std}'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='${preserveAspectRatio}' style='filter: url(%23b);' href='${blurDataURL}'/%3E%3C/svg%3E`;
+        : 'none'
+  return `%3Csvg xmlns='http://www.w3.org/2000/svg' ${viewBox}%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='${std}'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/%3E%3CfeFlood x='0' y='0' width='100%25' height='100%25'/%3E%3CfeComposite operator='out' in='s'/%3E%3CfeComposite in2='SourceGraphic'/%3E%3CfeGaussianBlur stdDeviation='${std}'/%3E%3C/filter%3E%3Cimage width='100%25' height='100%25' x='0' y='0' preserveAspectRatio='${preserveAspectRatio}' style='filter: url(%23b);' href='${blurDataURL}'/%3E%3C/svg%3E`
 }

package/src/compat/next/image/static-metadata.ts

@@ -8,25 +8,25 @@
 // Registered into core's `staticAssetModule` seam so the server module pipeline picks it up. A
 // pure-core app keeps core's generic asset behavior instead.
 
-import { createHash } from 'node:crypto';
-import path from 'node:path';
-import type { StaticAssetModuleContext } from '../../../extensions';
-import { isSvgAsComponentEnabled, svgComponentModule } from '../svgr';
-import { generateBlurDataURL } from './optimizer';
+import { createHash } from 'node:crypto'
+import path from 'node:path'
+import type { StaticAssetModuleContext } from '../../../extensions'
+import { isSvgAsComponentEnabled, svgComponentModule } from '../svgr'
+import { generateBlurDataURL } from './optimizer'
 
 export interface ImageDimensions {
-  width: number;
-  height: number;
+  width: number
+  height: number
 }
 
 /** The `{src,width,height,blurDataURL,blurWidth,blurHeight}` shape next/image consumes. */
 export interface StaticImageData {
-  src: string;
-  width: number;
-  height: number;
-  blurDataURL: string;
-  blurWidth: number;
-  blurHeight: number;
+  src: string
+  width: number
+  height: number
+  blurDataURL: string
+  blurWidth: number
+  blurHeight: number
 }
 
 const STATIC_IMAGE_EXTENSIONS = new Set([
@@ -39,7 +39,7 @@ const STATIC_IMAGE_EXTENSIONS = new Set([
   '.svg',
   '.ico',
   '.bmp',
-]);
+])
 
 /**
  * Core `staticAssetModule` seam implementation for next/image. Given the source file and bytes plus
@@ -49,23 +49,20 @@ const STATIC_IMAGE_EXTENSIONS = new Set([
 export async function staticImageModule(
   context: StaticAssetModuleContext,
 ): Promise<string | undefined> {
-  const ext = path.extname(context.sourcePath).toLowerCase();
-  if (ext === '.svg' && isSvgAsComponentEnabled()) return svgComponentModule(context.bytes);
-  if (!STATIC_IMAGE_EXTENSIONS.has(ext)) return undefined;
-  const src = context.emit(staticMediaRelative(context.sourcePath, context.bytes), context.bytes);
-  const data = await staticImageData(src, context.sourcePath, context.bytes);
-  return staticImageModuleText(data);
+  const ext = path.extname(context.sourcePath).toLowerCase()
+  if (ext === '.svg' && isSvgAsComponentEnabled()) return svgComponentModule(context.bytes)
+  if (!STATIC_IMAGE_EXTENSIONS.has(ext)) return undefined
+  const src = context.emit(staticMediaRelative(context.sourcePath, context.bytes), context.bytes)
+  const data = await staticImageData(src, context.sourcePath, context.bytes)
+  return staticImageModuleText(data)
 }
 
 /** POSIX-relative `_next/static/media/<name>.<hash>.<ext>` path for an imported image. */
 export function staticMediaRelative(sourcePath: string, bytes: Uint8Array): string {
-  const ext = path.extname(sourcePath).toLowerCase() || '.bin';
-  const hash = createHash('sha256')
-    .update(bytes)
-    .digest('hex')
-    .slice(0, 8);
-  const base = path.basename(sourcePath, path.extname(sourcePath)).replace(/[^A-Za-z0-9_-]+/g, '-');
-  return path.posix.join('_next', 'static', 'media', `${base}.${hash}${ext}`);
+  const ext = path.extname(sourcePath).toLowerCase() || '.bin'
+  const hash = createHash('sha256').update(bytes).digest('hex').slice(0, 8)
+  const base = path.basename(sourcePath, path.extname(sourcePath)).replace(/[^A-Za-z0-9_-]+/g, '-')
+  return path.posix.join('_next', 'static', 'media', `${base}.${hash}${ext}`)
 }
 
 /** Build the full static-image descriptor (real dimensions + blur placeholder). */
@@ -74,11 +71,11 @@ export async function staticImageData(
   sourcePath: string,
   bytes: Uint8Array,
 ): Promise<StaticImageData> {
-  const ext = path.extname(sourcePath).toLowerCase() || '.bin';
-  const dimensions = imageDimensions(bytes, ext);
-  const { blurWidth, blurHeight } = blurDimensions(dimensions);
+  const ext = path.extname(sourcePath).toLowerCase() || '.bin'
+  const dimensions = imageDimensions(bytes, ext)
+  const { blurWidth, blurHeight } = blurDimensions(dimensions)
   const blurDataURL =
-    (await generateBlurDataURL(Buffer.from(bytes), ext.slice(1), blurWidth, blurHeight)) ?? '';
+    (await generateBlurDataURL(Buffer.from(bytes), ext.slice(1), blurWidth, blurHeight)) ?? ''
   return {
     src,
     width: dimensions?.width ?? 0,
@@ -86,7 +83,7 @@ export async function staticImageData(
     blurDataURL,
     blurWidth: blurDataURL ? blurWidth : 0,
     blurHeight: blurDataURL ? blurHeight : 0,
-  };
+  }
 }
 
 /** ESM module text for a static-image import (default + named field exports). */
@@ -99,125 +96,119 @@ export const height = image.height;
 export const blurDataURL = image.blurDataURL;
 export const blurWidth = image.blurWidth;
 export const blurHeight = image.blurHeight;
-`;
+`
 }
 
-const textDecoder = new TextDecoder();
+const textDecoder = new TextDecoder()
 
 /** Parse intrinsic pixel dimensions from an image file's header bytes. */
 export function imageDimensions(bytes: Uint8Array, ext: string): ImageDimensions | undefined {
-  const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+  const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength)
   switch (ext) {
     case '.png':
-      return pngDimensions(view);
+      return pngDimensions(view)
     case '.jpg':
     case '.jpeg':
-      return jpegDimensions(view);
+      return jpegDimensions(view)
     case '.gif':
-      return gifDimensions(view);
+      return gifDimensions(view)
     case '.webp':
-      return webpDimensions(view, bytes);
+      return webpDimensions(view, bytes)
     case '.bmp':
-      return bmpDimensions(view);
+      return bmpDimensions(view)
     case '.avif':
-      return avifDimensions(bytes);
+      return avifDimensions(bytes)
     case '.svg':
-      return svgDimensions(bytes);
+      return svgDimensions(bytes)
     case '.ico':
-      return icoDimensions(view);
+      return icoDimensions(view)
     default:
-      return undefined;
+      return undefined
   }
 }
 
 function pngDimensions(view: DataView): ImageDimensions | undefined {
   // PNG signature (8 bytes) + IHDR chunk: length(4) + 'IHDR'(4) + width(4) + height(4).
-  if (view.byteLength < 24) return undefined;
-  if (view.getUint32(0) !== 0x89504e47) return undefined;
-  return { width: view.getUint32(16), height: view.getUint32(20) };
+  if (view.byteLength < 24) return undefined
+  if (view.getUint32(0) !== 0x89504e47) return undefined
+  return { width: view.getUint32(16), height: view.getUint32(20) }
 }
 
 function jpegDimensions(view: DataView): ImageDimensions | undefined {
-  if (view.byteLength < 4 || view.getUint16(0) !== 0xffd8) return undefined;
-  let offset = 2;
+  if (view.byteLength < 4 || view.getUint16(0) !== 0xffd8) return undefined
+  let offset = 2
   while (offset + 9 < view.byteLength) {
     if (view.getUint8(offset) !== 0xff) {
-      offset += 1;
-      continue;
+      offset += 1
+      continue
     }
-    const marker = view.getUint8(offset + 1);
+    const marker = view.getUint8(offset + 1)
     // SOF0..SOF15 (baseline / progressive) carry the frame dimensions; skip the
     // RST/standalone markers that have no length field.
-    if (
-      marker >= 0xc0 &&
-      marker <= 0xcf &&
-      marker !== 0xc4 &&
-      marker !== 0xc8 &&
-      marker !== 0xcc
-    ) {
-      return { height: view.getUint16(offset + 5), width: view.getUint16(offset + 7) };
+    if (marker >= 0xc0 && marker <= 0xcf && marker !== 0xc4 && marker !== 0xc8 && marker !== 0xcc) {
+      return { height: view.getUint16(offset + 5), width: view.getUint16(offset + 7) }
     }
-    const segmentLength = view.getUint16(offset + 2);
-    if (segmentLength < 2) return undefined;
-    offset += 2 + segmentLength;
+    const segmentLength = view.getUint16(offset + 2)
+    if (segmentLength < 2) return undefined
+    offset += 2 + segmentLength
   }
-  return undefined;
+  return undefined
 }
 
 function gifDimensions(view: DataView): ImageDimensions | undefined {
-  if (view.byteLength < 10) return undefined;
+  if (view.byteLength < 10) return undefined
   // 'GIF8' magic; logical screen width/height are little-endian at offset 6/8.
-  if (view.getUint32(0) !== 0x47494638) return undefined;
-  return { width: view.getUint16(6, true), height: view.getUint16(8, true) };
+  if (view.getUint32(0) !== 0x47494638) return undefined
+  return { width: view.getUint16(6, true), height: view.getUint16(8, true) }
 }
 
 function webpDimensions(view: DataView, bytes: Uint8Array): ImageDimensions | undefined {
-  if (view.byteLength < 30) return undefined;
+  if (view.byteLength < 30) return undefined
   // 'RIFF' .... 'WEBP'
-  if (view.getUint32(0) !== 0x52494646 || view.getUint32(8) !== 0x57454250) return undefined;
-  const format = textDecoder.decode(bytes.subarray(12, 16));
+  if (view.getUint32(0) !== 0x52494646 || view.getUint32(8) !== 0x57454250) return undefined
+  const format = textDecoder.decode(bytes.subarray(12, 16))
   if (format === 'VP8 ') {
     // Lossy: 16-bit width/height (14 low bits) at offset 26/28, little-endian.
     return {
       width: view.getUint16(26, true) & 0x3fff,
       height: view.getUint16(28, true) & 0x3fff,
-    };
+    }
   }
   if (format === 'VP8L') {
     // Lossless: 14-bit width-1 / height-1 packed after the 0x2f signature byte.
-    const bits = view.getUint32(21, true);
+    const bits = view.getUint32(21, true)
     return {
       width: (bits & 0x3fff) + 1,
       height: ((bits >> 14) & 0x3fff) + 1,
-    };
+    }
   }
   if (format === 'VP8X') {
     // Extended: 24-bit width-1 / height-1 at offset 24/27, little-endian.
-    const width = (bytes[24]! | (bytes[25]! << 8) | (bytes[26]! << 16)) + 1;
-    const height = (bytes[27]! | (bytes[28]! << 8) | (bytes[29]! << 16)) + 1;
-    return { width, height };
+    const width = (bytes[24]! | (bytes[25]! << 8) | (bytes[26]! << 16)) + 1
+    const height = (bytes[27]! | (bytes[28]! << 8) | (bytes[29]! << 16)) + 1
+    return { width, height }
   }
-  return undefined;
+  return undefined
 }
 
 function bmpDimensions(view: DataView): ImageDimensions | undefined {
-  if (view.byteLength < 26 || view.getUint16(0) !== 0x424d) return undefined;
-  return { width: view.getInt32(18, true), height: Math.abs(view.getInt32(22, true)) };
+  if (view.byteLength < 26 || view.getUint16(0) !== 0x424d) return undefined
+  return { width: view.getInt32(18, true), height: Math.abs(view.getInt32(22, true)) }
 }
 
 function icoDimensions(view: DataView): ImageDimensions | undefined {
   if (view.byteLength < 8 || view.getUint16(0, true) !== 0 || view.getUint16(2, true) !== 1) {
-    return undefined;
+    return undefined
   }
   // First directory entry: width/height bytes (0 means 256).
-  const width = view.getUint8(6) || 256;
-  const height = view.getUint8(7) || 256;
-  return { width, height };
+  const width = view.getUint8(6) || 256
+  const height = view.getUint8(7) || 256
+  return { width, height }
 }
 
 function avifDimensions(bytes: Uint8Array): ImageDimensions | undefined {
   // ISOBMFF: find the 'ispe' box (ImageSpatialExtents) → width(4)/height(4).
-  const marker = [0x69, 0x73, 0x70, 0x65]; // 'ispe'
+  const marker = [0x69, 0x73, 0x70, 0x65] // 'ispe'
   for (let i = 0; i + 12 <= bytes.length; i += 1) {
     if (
       bytes[i] === marker[0] &&
@@ -225,36 +216,36 @@ function avifDimensions(bytes: Uint8Array): ImageDimensions | undefined {
       bytes[i + 2] === marker[2] &&
       bytes[i + 3] === marker[3]
     ) {
-      const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+      const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength)
       // 'ispe' + version/flags(4) then width/height.
-      return { width: view.getUint32(i + 8), height: view.getUint32(i + 12) };
+      return { width: view.getUint32(i + 8), height: view.getUint32(i + 12) }
     }
   }
-  return undefined;
+  return undefined
 }
 
 function svgDimensions(bytes: Uint8Array): ImageDimensions | undefined {
-  const head = textDecoder.decode(bytes.subarray(0, Math.min(bytes.length, 4096)));
-  const svgTag = /<svg[^>]*>/i.exec(head)?.[0];
-  if (!svgTag) return undefined;
-  const width = svgLength(svgTag, 'width');
-  const height = svgLength(svgTag, 'height');
-  if (width && height) return { width, height };
-  const viewBox = /viewBox\s*=\s*["']?\s*[\d.]+[ ,]+[\d.]+[ ,]+([\d.]+)[ ,]+([\d.]+)/i.exec(svgTag);
+  const head = textDecoder.decode(bytes.subarray(0, Math.min(bytes.length, 4096)))
+  const svgTag = /<svg[^>]*>/i.exec(head)?.[0]
+  if (!svgTag) return undefined
+  const width = svgLength(svgTag, 'width')
+  const height = svgLength(svgTag, 'height')
+  if (width && height) return { width, height }
+  const viewBox = /viewBox\s*=\s*["']?\s*[\d.]+[ ,]+[\d.]+[ ,]+([\d.]+)[ ,]+([\d.]+)/i.exec(svgTag)
   if (viewBox?.[1] && viewBox[2]) {
-    return { width: Math.round(Number(viewBox[1])), height: Math.round(Number(viewBox[2])) };
+    return { width: Math.round(Number(viewBox[1])), height: Math.round(Number(viewBox[2])) }
   }
-  return undefined;
+  return undefined
 }
 
 function svgLength(tag: string, attr: string): number | undefined {
-  const match = new RegExp(`${attr}\\s*=\\s*["']?\\s*([\\d.]+)`, 'i').exec(tag);
-  if (!match?.[1]) return undefined;
-  const value = Number(match[1]);
-  return Number.isFinite(value) && value > 0 ? Math.round(value) : undefined;
+  const match = new RegExp(`${attr}\\s*=\\s*["']?\\s*([\\d.]+)`, 'i').exec(tag)
+  if (!match?.[1]) return undefined
+  const value = Number(match[1])
+  return Number.isFinite(value) && value > 0 ? Math.round(value) : undefined
 }
 
-const BLUR_IMG_SIZE = 8;
+const BLUR_IMG_SIZE = 8
 
 /**
  * Blur thumbnail dimensions, matching Next's `getBlurImage`: shrink the
@@ -263,21 +254,21 @@ const BLUR_IMG_SIZE = 8;
  * `blurWidth < 8` thumbnail instead of a squashed one.
  */
 export function blurDimensions(dimensions: ImageDimensions | undefined): {
-  blurWidth: number;
-  blurHeight: number;
+  blurWidth: number
+  blurHeight: number
 } {
   if (!dimensions || dimensions.width <= 0 || dimensions.height <= 0) {
-    return { blurWidth: BLUR_IMG_SIZE, blurHeight: BLUR_IMG_SIZE };
+    return { blurWidth: BLUR_IMG_SIZE, blurHeight: BLUR_IMG_SIZE }
   }
-  const { width, height } = dimensions;
+  const { width, height } = dimensions
   if (width >= height) {
     return {
       blurWidth: BLUR_IMG_SIZE,
       blurHeight: Math.max(Math.round((height / width) * BLUR_IMG_SIZE), 1),
-    };
+    }
   }
   return {
     blurWidth: Math.max(Math.round((width / height) * BLUR_IMG_SIZE), 1),
     blurHeight: BLUR_IMG_SIZE,
-  };
+  }
 }