refactor(core): internal utils

Author: johannschopplich

docs/api/blurhash-create-png-data-uri.md

@@ -1,6 +1,6 @@
 # `createPngDataUri`
 
-Especially when using a server-side rendering framework like [Nuxt](https://nuxt.com), you might want to generate the placeholder images for the `src` attribute with SSR. This can be done with the `createPngDataUri` function:
+Especially when using a server-side rendering framework like [Nuxt](https://nuxt.com), you might want to generate the placeholder images for the `src` attribute during SSR. This can be done with the `createPngDataUri` function:
 
 ```ts
 import { createPngDataUri } from 'unlazy/blurhash'

docs/api/index.md

@@ -8,7 +8,7 @@ unlazy provides a number of methods to help you with lazy loading images. The fo
 
 ## Server-Side Rendering
 
-unlazy supports server-side rendering for BlurHash and ThumbHash strings. This means that you can generate the placeholder images for the `src` attribute with SSR and avoid the [Cumulative Layout Shift](https://web.dev/cls/) (CLS) caused by the images loading after the page has been rendered.
+unlazy supports server-side rendering for BlurHash and ThumbHash strings. This means that you can generate the placeholder images for the `src` attribute during SSR and avoid the [Cumulative Layout Shift](https://web.dev/cls/) (CLS) caused by the images loading after the page has been rendered.
 
 Both the `unlazy/blurhash` and `unlazy/thumbhash` exports provide a `createPngDataUri` function that can be used to generate a PNG data URI for a BlurHash or ThumbHash string, respectively. This function can be used to generate the `src` attribute for the `<img>` element.
 

docs/api/thumbhash-create-png-data-uri.md

@@ -1,6 +1,6 @@
 # `createPngDataUri`
 
-Especially when using a server-side rendering framework like [Nuxt](https://nuxt.com), you might want to generate the placeholder images for the `src` attribute with SSR. This can be done with the `createPngDataUri` function:
+Especially when using a server-side rendering framework like [Nuxt](https://nuxt.com), you might want to generate the placeholder images for the `src` attribute during SSR. This can be done with the `createPngDataUri` function:
 
 ```ts
 import { createPngDataUri } from 'unlazy/thumbhash'

docs/integrations/index.md

@@ -35,7 +35,7 @@ That's it!
 
 ## Server-Side Rendering
 
-unlazy supports server-side rendering for BlurHash and ThumbHash strings. This means that you can generate the placeholder images for the `src` attribute with SSR and avoid the [Cumulative Layout Shift](https://web.dev/cls/) (CLS) caused by the images loading after the page has been rendered.
+unlazy supports server-side rendering for BlurHash and ThumbHash strings. This means that you can generate the placeholder images for the `src` attribute during SSR and avoid the [Cumulative Layout Shift](https://web.dev/cls/) (CLS) caused by the images loading after the page has been rendered.
 
 Both the `unlazy/blurhash` and `unlazy/thumbhash` exports provide a `createPngDataUri` function that can be used to generate a PNG data URI for a BlurHash or ThumbHash string, respectively. This function can be used to generate the `src` attribute for the `<img>` element.
 

packages/core/src/blurhash.ts

@@ -1,6 +1,5 @@
 import { decodeBlurHash } from 'fast-blurhash'
 import { DEFAULT_PLACEHOLDER_SIZE } from './constants'
-import { calculateAspectRatioDimensions } from './utils'
 import { rgbaToDataUri } from './utils/dataUri'
 
 export interface BlurHashOptions {
@@ -27,7 +26,16 @@ export function createPngDataUri(
     size = DEFAULT_PLACEHOLDER_SIZE,
   }: BlurHashOptions = {},
 ) {
-  const { width, height } = calculateAspectRatioDimensions(ratio, size)
+  const { width, height } = getAspectRatioDimensions(ratio, size)
   const rgba = decodeBlurHash(hash, width, height)
   return rgbaToDataUri(width, height, rgba)
 }
+
+function getAspectRatioDimensions(ratio: number, size: number) {
+  const isLandscapeOrSquare = ratio >= 1
+
+  return {
+    width: isLandscapeOrSquare ? size : Math.round(size * ratio),
+    height: isLandscapeOrSquare ? Math.round(size / ratio) : size,
+  }
+}

packages/core/src/lazyLoad.ts

@@ -141,23 +141,23 @@ export function loadImage(
 
 export function createPlaceholderFromHash(
   {
-    /** If given, the hash will be extracted from the image's `data-blurhash` or `data-thumbhash` attribute and ratio will be calculated from the image's actual dimensions */
     image,
     hash,
     hashType = 'blurhash',
-    /** @default 32 */
     size = DEFAULT_PLACEHOLDER_SIZE,
-    /** Will be calculated from the image's actual dimensions if not provided and image is given */
     ratio,
   }: {
+    /** If present, the hash will be extracted from the image's `data-blurhash` or `data-thumbhash` attribute and ratio will be calculated from the image's actual dimensions. */
     image?: HTMLImageElement
     hash?: string
     hashType?: 'blurhash' | 'thumbhash'
+    /** @default 32 */
     size?: number
+    /** Will be calculated from the image's actual dimensions if image is provided and ratio is not. */
     ratio?: number
   } = {},
 ) {
-  if (!hash && image) {
+  if (image && !hash) {
     const { blurhash, thumbhash } = image.dataset
     hash = thumbhash || blurhash
     hashType = thumbhash ? 'thumbhash' : 'blurhash'
@@ -169,9 +169,9 @@ export function createPlaceholderFromHash(
   try {
     if (hashType === 'blurhash') {
       // Preserve the original image's aspect ratio
-      if (!ratio && image) {
-        const actualWidth = image.width ?? image.offsetWidth ?? size
-        const actualHeight = image.height ?? image.offsetHeight ?? size
+      if (image && !ratio) {
+        const actualWidth = image.width || image.offsetWidth || size
+        const actualHeight = image.height || image.offsetHeight || size
         ratio = actualWidth / actualHeight
       }
 

packages/core/src/utils/index.ts

@@ -23,19 +23,6 @@ export function createIndexedImagePlaceholder(index: number) {
   return DEFAULT_IMAGE_PLACEHOLDER.replace(/\s/, ` data-id='${now}-${index}' `)
 }
 
-export function calculateAspectRatioDimensions(aspectRatio: number, referenceSize: number) {
-  const isLandscapeOrSquare = aspectRatio >= 1
-
-  return {
-    width: isLandscapeOrSquare
-      ? referenceSize
-      : Math.round(referenceSize * aspectRatio),
-    height: isLandscapeOrSquare
-      ? Math.round(referenceSize / aspectRatio)
-      : referenceSize,
-  }
-}
-
 export function debounce<T extends (...args: any[]) => void>(
   fn: T,
   delay: number,