astro-lqip 1.3.2 → 1.4.0

package/README.md

@@ -96,7 +96,7 @@ import otherImage from './path/to/other-image.png';
 
 - [x] Add support for Image component.
 - [x] Add support for more lqip techniques.
-- [ ] Test for remote images.
+- [x] Test for remote images.
 - [x] Optimize current CSS usage.
 - [x] Improve docs page.
 - [ ] Test support for SSR mode.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-lqip",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "Native extended Astro components for generating low quality image placeholders (LQIP).",
   "keywords": [
     "astro",
@@ -37,18 +37,18 @@
     "plaiceholder": "3.0.0"
   },
   "devDependencies": {
-    "@eslint/js": "9.33.0",
-    "@typescript-eslint/parser": "8.40.0",
-    "astro": "5.13.2",
+    "@eslint/js": "9.36.0",
+    "@typescript-eslint/parser": "8.44.1",
+    "astro": "5.13.11",
     "bumpp": "10.2.3",
-    "eslint": "9.33.0",
+    "eslint": "9.36.0",
     "eslint-plugin-astro": "1.3.1",
     "eslint-plugin-jsonc": "2.20.1",
     "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-package-json": "0.54.0",
+    "eslint-plugin-package-json": "0.56.3",
     "eslint-plugin-yml": "1.18.0",
-    "globals": "16.3.0",
-    "jiti": "2.5.1",
+    "globals": "16.4.0",
+    "jiti": "2.6.0",
     "nano-staged": "0.8.0",
     "neostandard": "0.12.2",
     "simple-git-hooks": "2.13.1"

package/src/components/Image.astro

@@ -3,12 +3,7 @@ import type { LocalImageProps, RemoteImageProps } from 'astro:assets'
 import type { HTMLAttributes } from 'astro/types'
 import type { Props as LqipProps } from '../types'
 
-import { PREFIX } from '../constants'
-
-import { resolveImageMetadata } from '../utils/resolveImageMetadata'
-import { renderSVGNode } from '../utils/renderSVGNode'
-import { getLqipStyle } from '../utils/getLqipStyle'
-import { getLqip } from '../utils/getLqip'
+import { useLqipImage } from '../utils/useLqipImage'
 
 import { Image as ImageComponent } from 'astro:assets'
 
@@ -22,32 +17,13 @@ const { class: className, lqip = 'base64', lqipSize = 4, parentAttributes = {},
 
 const isDevelopment = import.meta.env.MODE === 'development'
 
-const imageMetadata = await resolveImageMetadata(props.src)
-const lqipImage = await getLqip(imageMetadata, isDevelopment, lqip, lqipSize)
-
-let svgHTML = ''
-
-if (lqip === 'svg' && Array.isArray(lqipImage)) {
-  svgHTML = renderSVGNode(lqipImage as [string, Record<string, any>, any[]])
-}
-
-const lqipStyle = getLqipStyle(lqip, lqipImage, svgHTML)
-
-const forbiddenVars = ['--lqip-background', '--z-index', '--opacity']
-const styleProps = parentAttributes.style ?? {}
-
-for (const key of Object.keys(styleProps)) {
-  if (forbiddenVars.includes(key)) {
-    console.warn(
-      `${PREFIX} The CSS variable “${key}” should not be passed in \`parentAttributes.style\` because it can override the functionality of LQIP.`
-    )
-  }
-}
-
-const combinedStyle = {
-  ...styleProps,
-  ...lqipStyle
-}
+const { combinedStyle } = await useLqipImage({
+  src: props.src,
+  lqip,
+  lqipSize,
+  styleProps: parentAttributes.style ?? {},
+  isDevelopment
+})
 
 const combinedParentAttributes = {
   ...parentAttributes,

package/src/components/Picture.astro

@@ -2,12 +2,7 @@
 import type { Props as AstroPictureProps } from 'astro/components/Picture.astro'
 import type { Props as LqipProps } from '../types'
 
-import { PREFIX } from '../constants'
-
-import { resolveImageMetadata } from '../utils/resolveImageMetadata'
-import { renderSVGNode } from '../utils/renderSVGNode'
-import { getLqipStyle } from '../utils/getLqipStyle'
-import { getLqip } from '../utils/getLqip'
+import { useLqipImage } from '../utils/useLqipImage'
 
 import { Picture as PictureComponent } from 'astro:assets'
 
@@ -19,32 +14,13 @@ const { class: className, lqip = 'base64', lqipSize = 4, pictureAttributes = {},
 
 const isDevelopment = import.meta.env.MODE === 'development'
 
-const imageMetadata = await resolveImageMetadata(props.src)
-const lqipImage = await getLqip(imageMetadata, isDevelopment, lqip, lqipSize)
-
-let svgHTML = ''
-
-if (lqip === 'svg' && Array.isArray(lqipImage)) {
-  svgHTML = renderSVGNode(lqipImage as [string, Record<string, any>, any[]])
-}
-
-const lqipStyle = getLqipStyle(lqip, lqipImage, svgHTML)
-
-const forbiddenVars = ['--lqip-background', '--z-index', '--opacity']
-const styleProps = pictureAttributes.style ?? {}
-
-for (const key of Object.keys(styleProps)) {
-  if (forbiddenVars.includes(key)) {
-    console.warn(
-      `${PREFIX} The CSS variable “${key}” should not be passed in \`pictureAttributes.style\` because it can override the functionality of LQIP.`
-    )
-  }
-}
-
-const combinedStyle = {
-  ...styleProps,
-  ...lqipStyle
-}
+const { combinedStyle } = await useLqipImage({
+  src: props.src,
+  lqip,
+  lqipSize,
+  styleProps: pictureAttributes.style ?? {},
+  isDevelopment
+})
 
 const combinedPictureAttributes = {
   ...pictureAttributes,

package/src/types/components-options.type.ts

@@ -0,0 +1,10 @@
+import type { LqipType } from './lqip.type'
+
+export type ComponentsOptions = {
+  src: string | object
+  lqip?: LqipType
+  lqipSize?: number
+  styleProps?: Record<string, any>
+  forbiddenVars?: string[]
+  isDevelopment?: boolean
+}

package/src/types/index.ts

@@ -1,3 +1,5 @@
-export * from './plaiceholder.type'
+export * from './components-options.type'
 export * from './lqip.type'
+export * from './plaiceholder.type'
 export * from './props.type'
+export * from './svg-node.type'

package/src/types/svg-node.type.ts

@@ -0,0 +1,7 @@
+export type StyleAttrs = Record<string, string | number>
+
+type SVGNodeAttrs = {
+  style?: StyleAttrs
+} & Record<string, string | number>
+
+export type SVGNode = [string, SVGNodeAttrs, SVGNode[]]

package/src/utils/generateLqip.ts

@@ -6,9 +6,9 @@ import { PREFIX } from '../constants'
 
 import { getPlaiceholder } from 'plaiceholder'
 
-export async function generateLqip(filePath: string, isDevelopment: boolean, lqipType: LqipType, lqipSize: number) {
+export async function generateLqip(imagePath: string, isDevelopment: boolean, lqipType: LqipType, lqipSize: number) {
   try {
-    const buffer = await readFile(filePath)
+    const buffer = await readFile(imagePath)
     const plaiceholderResult = await getPlaiceholder(buffer, { size: lqipSize })
     let lqipValue: string | GetSVGReturn | undefined
 
@@ -33,12 +33,12 @@ export async function generateLqip(filePath: string, isDevelopment: boolean, lqi
     if (isDevelopment) {
       console.log(`${PREFIX} LQIP (${lqipType}) successfully generated!`)
     } else {
-      console.log(`${PREFIX} LQIP (${lqipType}) successfully generated for:`, filePath)
+      console.log(`${PREFIX} LQIP (${lqipType}) successfully generated for:`, imagePath)
     }
 
     return lqipValue
   } catch (err) {
-    console.error(`${PREFIX} Error generating LQIP (${lqipType}) in:`, filePath, '\n', err)
+    console.error(`${PREFIX} Error generating LQIP (${lqipType}) in:`, imagePath, '\n', err)
     return undefined
   }
 }

package/src/utils/getLqip.ts

@@ -1,20 +1,54 @@
 import { join } from 'node:path'
+import { mkdir, writeFile, unlink } from 'node:fs/promises'
+import { existsSync } from 'node:fs'
 
-import type { ImageMetadata } from 'astro'
 import type { LqipType } from '../types'
 
 import { generateLqip } from './generateLqip'
 
-export async function getLqip(imageMetadata: ImageMetadata, envMode: boolean, lqipType: LqipType, lqipSize: number) {
-  if (!imageMetadata?.src) return undefined
+function isRemoteUrl(url: string) {
+  return /^https?:\/\//.test(url)
+}
+
+const CACHE_DIR = join(process.cwd(), 'node_modules', '.cache', 'astro-lqip')
+
+async function ensureCacheDir() {
+  if (!existsSync(CACHE_DIR)) {
+    await mkdir(CACHE_DIR, { recursive: true })
+  }
+}
+
+export async function getLqip(imagePath: { src: string }, isDevelopment: boolean, lqipType: LqipType, lqipSize: number) {
+  if (!imagePath?.src) return undefined
 
-  if (envMode && imageMetadata.src.startsWith('/@fs/')) {
-    const filePath = imageMetadata.src.replace(/^\/@fs/, '').split('?')[0]
-    return await generateLqip(filePath, envMode, lqipType, lqipSize)
+  if (isRemoteUrl(imagePath.src)) {
+    await ensureCacheDir()
+
+    const response = await fetch(imagePath.src)
+    if (!response.ok) return undefined
+
+    const arrayBuffer = await response.arrayBuffer()
+    const buffer = Buffer.from(arrayBuffer)
+    const tempPath = join(CACHE_DIR, `astro-lqip-${Math.random().toString(36).slice(2)}.jpg`)
+    await writeFile(tempPath, buffer)
+
+    try {
+      const lqip = await generateLqip(tempPath, isDevelopment, lqipType, lqipSize)
+      return lqip
+    } finally {
+      await unlink(tempPath)
+    }
   }
 
-  if (!envMode && imageMetadata.src.startsWith('/_astro/')) {
-    const buildPath = join(process.cwd(), 'dist', imageMetadata.src)
-    return await generateLqip(buildPath, envMode, lqipType, lqipSize)
+  if (isDevelopment && imagePath.src.startsWith('/@fs/')) {
+    const filePath = imagePath.src.replace(/^\/@fs/, '').split('?')[0]
+    return await generateLqip(filePath, isDevelopment, lqipType, lqipSize)
   }
+
+  if (!isDevelopment && imagePath.src.startsWith('/_astro/')) {
+    const buildPath = join(process.cwd(), 'dist', imagePath.src)
+    return await generateLqip(buildPath, isDevelopment, lqipType, lqipSize)
+  }
+
+  return undefined
 }

package/src/utils/renderSVGNode.ts

@@ -1,20 +1,23 @@
-function styleToString(style: Record<string, string>) {
+import type { StyleAttrs, SVGNode } from '../types'
+
+function styleToString(style: StyleAttrs) {
   return Object.entries(style)
     .map(([key, val]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}:${val}`)
     .join(';')
 }
 
-export function renderSVGNode([tag, attrs, children]: [string, Record<string, any>, any[]]): string {
+export function renderSVGNode([tag, attrs, children = []]: SVGNode): string {
   let attrString = ''
+
   for (const [k, v] of Object.entries(attrs || {})) {
-    if (k === 'style') {
+    if (k === 'style' && v && typeof v === 'object') {
       attrString += ` style="${styleToString(v)}"`
-    } else {
+    } else if (v !== undefined) {
       attrString += ` ${k}="${v}"`
     }
   }
 
-  if (children && children.length > 0) {
+  if (children.length > 0) {
     return `<${tag}${attrString}>${children.map(renderSVGNode).join('')}</${tag}>`
   } else {
     return `<${tag}${attrString} />`

package/src/utils/resolveImagePath.ts

@@ -0,0 +1,6 @@
+export async function resolveImagePath(path: string | { src: string }) {
+  // If it's a string, we can't resolve it here. ex: Remote images URLs
+  if (typeof path === 'string') return null
+  if ('src' in path) return path
+  return null
+}

package/src/utils/useLqipImage.ts

@@ -0,0 +1,55 @@
+import type { ComponentsOptions, SVGNode } from '../types'
+
+import { PREFIX } from '../constants'
+
+import { resolveImagePath } from './resolveImagePath'
+import { renderSVGNode } from './renderSVGNode'
+import { getLqipStyle } from './getLqipStyle'
+import { getLqip } from './getLqip'
+
+export async function useLqipImage({
+  src,
+  lqip = 'base64',
+  lqipSize = 4,
+  styleProps = {},
+  forbiddenVars = ['--lqip-background', '--z-index', '--opacity'],
+  isDevelopment = false
+}: ComponentsOptions) {
+  let getImagePath: string | { src: string } | null
+
+  if (typeof src === 'string') {
+    getImagePath = src
+  } else if (typeof src === 'object' && src !== null) {
+    getImagePath = await resolveImagePath(src as unknown as string)
+  } else {
+    getImagePath = null
+  }
+
+  let lqipImage
+  if (getImagePath) {
+    const lqipInput = typeof getImagePath === 'string' ? { src: getImagePath } : getImagePath
+    lqipImage = await getLqip(lqipInput, isDevelopment, lqip, lqipSize)
+  }
+
+  let svgHTML = ''
+  if (lqip === 'svg' && Array.isArray(lqipImage)) {
+    svgHTML = renderSVGNode(lqipImage as unknown as SVGNode)
+  }
+
+  const lqipStyle = getLqipStyle(lqip, lqipImage, svgHTML)
+
+  for (const key of Object.keys(styleProps)) {
+    if (forbiddenVars.includes(key)) {
+      console.warn(
+        `${PREFIX} The CSS variable “${key}” should not be passed in style because it can override the functionality of LQIP.`
+      )
+    }
+  }
+
+  const combinedStyle = {
+    ...styleProps,
+    ...lqipStyle
+  }
+
+  return { lqipImage, svgHTML, lqipStyle, combinedStyle }
+}

package/src/utils/resolveImageMetadata.ts

@@ -1,6 +0,0 @@
-export async function resolveImageMetadata(src: any) {
-  if (typeof src === 'string') return null
-  if ('then' in src && typeof src.then === 'function') return (await src).default
-  if ('src' in src) return src
-  return null
-}