astro-lqip 1.6.0 → 1.7.1

package/README.md

@@ -62,8 +62,8 @@ Example:
 ---
 import { Image, Picture } from 'astro-lqip/components';
 
-import image from './path/to/image.png';
-import otherImage from './path/to/other-image.png';
+import image from '/src/assets/images/image.png';
+import otherImage from '/src/assets/images/other-image.png';
 ---
 
 <Image src={image} alt="Cover Image" width={220} height={220} />
@@ -80,8 +80,8 @@ Example with absolute path:
 import { Image, Picture } from 'astro-lqip/components';
 ---
 
-<Image src="/src/path/to/image.png" alt="Cover Image" width={220} height={220} />
-<Picture src="/src/path/to/other-image.png" alt="Other Image" width={220} height={220} />
+<Image src="/src/assets/images/image.png" alt="Cover Image" width={220} height={220} />
+<Picture src="/src/assets/images/other-image.png" alt="Other Image" width={220} height={220} />
 ```
 
 Example with relative path:
@@ -91,8 +91,9 @@ Example with relative path:
 import { Image, Picture } from 'astro-lqip/components';
 ---
 
-<Image src="../path/to/image.png" alt="Cover Image" width={220} height={220} />
-<Picture src="../path/to/other-image.png" alt="Other Image" width={220} height={220} />
+<!-- assuming you are on the path `/src/pages/index.astro` -->
+<Image src="../assets/images/image.png" alt="Cover Image" width={220} height={220} />
+<Picture src="../assets/images/other-image.png" alt="Other Image" width={220} height={220} />
 ```
 
 Example with alias:
@@ -102,11 +103,11 @@ Example with alias:
 import { Image, Picture } from 'astro-lqip/components';
 ---
 
-<Image src="@/assets/image.png" alt="Cover Image" width={220} height={220} />
-<Picture src="@/assets/other-image.png" alt="Other Image" width={220} height={220} />
+<Image src="@/assets/images/image.png" alt="Cover Image" width={220} height={220} />
+<Picture src="@/assets/images/other-image.png" alt="Other Image" width={220} height={220} />
 ```
 
-Learn how to configure path aliasing in the [Astro documentation](https://docs.astro.build/en/guides/typescript/#import-aliases).
+Learn how to configure path aliasing in the [Astro documentation](https://docs.astro.build/en/guides/typescript/#import-aliases). If you want more examples of uses you can see the [Usage Tips](https://astro-lqip.web.app/usage-tips/) page.
 
 ## ⚙️ Props
 
@@ -128,8 +129,8 @@ Example:
 ---
 import { Image, Picture } from 'astro-lqip/components';
 
-import image from './path/to/image.png';
-import otherImage from './path/to/other-image.png';
+import image from '/src/assets/images/image.png';
+import otherImage from '/src/assets/images/other-image.png';
 ---
 
 <Image src={image} alt="Cover Image" width={220} height={220} lqip="svg" lqipSize={10} />
@@ -143,6 +144,8 @@ import otherImage from './path/to/other-image.png';
 
 Since this integration is built on top of Astro native `<Image>` and `<Picture>` components, you can refer to the [Astro documentation](https://docs.astro.build/en/guides/images/) for more information on how to use it.
 
+For some simple tips, visit the [Usage Tips](https://astro-lqip.web.app/usage-tips/) page.
+
 ## 🤝 Contributing
 If you wish to contribute to this project, you can do so by reading the [contribution guide](https://github.com/felixicaza/astro-lqip/blob/main/CONTRIBUTING.md).
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-lqip",
-  "version": "1.6.0",
+  "version": "1.7.1",
   "description": "Native extended Astro components for generating low quality image placeholders (LQIP).",
   "keywords": [
     "astro",
@@ -37,17 +37,17 @@
     "plaiceholder": "3.0.0"
   },
   "devDependencies": {
-    "@eslint/js": "9.37.0",
-    "@typescript-eslint/parser": "8.46.1",
-    "astro": "5.14.5",
+    "@eslint/js": "9.39.1",
+    "@typescript-eslint/parser": "8.46.4",
+    "astro": "5.15.5",
     "bumpp": "10.3.1",
-    "eslint": "9.37.0",
-    "eslint-plugin-astro": "1.3.1",
+    "eslint": "9.39.1",
+    "eslint-plugin-astro": "1.5.0",
     "eslint-plugin-jsonc": "2.21.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-package-json": "0.56.4",
+    "eslint-plugin-package-json": "0.71.0",
     "eslint-plugin-yml": "1.19.0",
-    "globals": "16.4.0",
+    "globals": "16.5.0",
     "jiti": "2.6.1",
     "nano-staged": "0.8.0",
     "neostandard": "0.12.2",

package/src/components/Image.astro

@@ -16,7 +16,6 @@ type Props = (LocalImageProps | RemoteImageProps) & LqipProps & {
 const { class: className, lqip = 'base64', lqipSize = 4, parentAttributes = {}, ...props } = Astro.props as Props
 
 const isDevelopment = import.meta.env.MODE === 'development'
-const isPrerendered = Astro.isPrerendered
 
 const { combinedStyle, resolvedSrc } = await useLqipImage({
   src: props.src,
@@ -24,8 +23,7 @@ const { combinedStyle, resolvedSrc } = await useLqipImage({
   lqipSize,
   styleProps: (parentAttributes.style ?? {}) as Record<string, string | number | undefined>,
   forbiddenVars: [],
-  isDevelopment,
-  isPrerendered
+  isDevelopment
 })
 
 const componentProps = {

package/src/components/Picture.astro

@@ -13,7 +13,6 @@ type Props = AstroPictureProps & LqipProps
 const { class: className, lqip = 'base64', lqipSize = 4, pictureAttributes = {}, ...props } = Astro.props as Props
 
 const isDevelopment = import.meta.env.MODE === 'development'
-const isPrerendered = Astro.isPrerendered
 
 const { combinedStyle, resolvedSrc } = await useLqipImage({
   src: props.src,
@@ -21,8 +20,7 @@ const { combinedStyle, resolvedSrc } = await useLqipImage({
   lqipSize,
   styleProps: (pictureAttributes.style ?? {}) as Record<string, string | number | undefined>,
   forbiddenVars: [],
-  isDevelopment,
-  isPrerendered
+  isDevelopment
 })
 
 const componentProps = {

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

@@ -7,5 +7,4 @@ export type ComponentsOptions = {
   styleProps: Record<string, string | number | undefined>
   forbiddenVars: string[]
   isDevelopment: boolean | undefined
-  isPrerendered: boolean | undefined
 }

package/src/utils/generateLqip.ts

@@ -6,6 +6,26 @@ import { PREFIX } from '../constants'
 
 import { getPlaiceholder } from 'plaiceholder'
 
+function normalizeFsPath(path: string) {
+  if (process.platform === 'win32' && /^\/[A-Za-z]:\//.test(path)) {
+    return path.slice(1)
+  }
+  return path
+}
+
+function isNode() {
+  return typeof process !== 'undefined' && !!process.versions?.node
+}
+
+async function readIfExists(path: string): Promise<Buffer | undefined> {
+  if (!isNode()) return undefined
+  try {
+    return await readFile(path)
+  } catch {
+    return undefined
+  }
+}
+
 export async function generateLqip(
   imagePath: string,
   lqipType: LqipType,
@@ -13,7 +33,15 @@ export async function generateLqip(
   isDevelopment: boolean | undefined
 ) {
   try {
-    const buffer = await readFile(imagePath)
+    const normalizedPath = normalizeFsPath(imagePath)
+
+    const buffer = await readIfExists(normalizedPath)
+
+    if (!buffer) {
+      console.warn(`${PREFIX} image not found for:`, imagePath)
+      return undefined
+    }
+
     const plaiceholderResult = await getPlaiceholder(buffer, { size: lqipSize })
     let lqipValue: string | GetSVGReturn | undefined
 

package/src/utils/getLqip.ts

@@ -1,16 +1,22 @@
 import { join } from 'node:path'
-import { mkdir, writeFile, unlink } from 'node:fs/promises'
-import { existsSync } from 'node:fs'
+import { mkdir, writeFile, unlink, readdir } from 'node:fs/promises'
+import { existsSync, statSync } from 'node:fs'
 
 import type { LqipType } from '../types'
 
 import { generateLqip } from './generateLqip'
 
+import { PREFIX } from '../constants'
+
 function isRemoteUrl(url: string) {
   return /^https?:\/\//.test(url)
 }
 
 const CACHE_DIR = join(process.cwd(), 'node_modules', '.cache', 'astro-lqip')
+const EXTENSIONS = ['jpg', 'jpeg', 'png', 'webp', 'avif']
+const SEARCH_ROOT = ['src']
+
+const searchCache = new Map<string, string | null>()
 
 async function ensureCacheDir() {
   if (!existsSync(CACHE_DIR)) {
@@ -18,12 +24,80 @@ async function ensureCacheDir() {
   }
 }
 
+function extractOriginalFileName(filename: string) {
+  const file = filename.split('/').pop() || ''
+
+  const match = file.match(/^(.+?)\.[A-Za-z0-9_-]{5,}\.[A-Za-z0-9]+$/)
+  if (match) return match[1]
+
+  const parts = file.split('.')
+  if (parts.length >= 3) return parts.slice(0, parts.length - 2).join('.')
+
+  return parts[0]
+}
+
+async function recursiveFind(basename: string): Promise<string | undefined> {
+  if (!basename) return
+
+  if (searchCache.has(basename)) {
+    const cached = searchCache.get(basename)
+    return cached || undefined
+  }
+
+  const ignoreDirs = new Set(['node_modules', 'dist', '.astro'])
+
+  async function walk(dir: string): Promise<string | undefined> {
+    let entries: string[]
+
+    try {
+      entries = await readdir(dir)
+    } catch {
+      return
+    }
+
+    for (const entry of entries) {
+      const full = join(dir, entry)
+      let st: ReturnType<typeof statSync>
+
+      try {
+        st = statSync(full)
+      } catch {
+        continue
+      }
+
+      if (st.isDirectory()) {
+        if (ignoreDirs.has(entry)) continue
+        const found = await walk(full)
+        if (found) return found
+      } else {
+        // match by basename and extension
+        if (EXTENSIONS.some((ext) => entry === `${basename}.${ext}`)) {
+          return full
+        }
+      }
+    }
+  }
+
+  for (const rootRel of SEARCH_ROOT) {
+    const rootAbs = join(process.cwd(), rootRel)
+
+    if (existsSync(rootAbs)) {
+      const found = await walk(rootAbs)
+      if (found) {
+        searchCache.set(basename, found)
+        return found
+      }
+    }
+  }
+
+  searchCache.set(basename, null)
+}
+
 export async function getLqip(
   imagePath: { src: string },
   lqipType: LqipType,
   lqipSize: number,
-  isDevelopment: boolean | undefined,
-  isPrerendered: boolean | undefined
+  isDevelopment: boolean | undefined
 ) {
   if (!imagePath?.src) return undefined
 
@@ -39,8 +113,7 @@ export async function getLqip(
     await writeFile(tempPath, buffer)
 
     try {
-      const lqip = await generateLqip(tempPath, lqipType, lqipSize, isDevelopment)
-      return lqip
+      return await generateLqip(tempPath, lqipType, lqipSize, isDevelopment)
     } finally {
       await unlink(tempPath)
     }
@@ -51,14 +124,35 @@ export async function getLqip(
     return await generateLqip(filePath, lqipType, lqipSize, isDevelopment)
   }
 
-  if (!isPrerendered && !isDevelopment) {
-    const filePath = join(process.cwd(), 'dist', 'client', imagePath.src)
-    return await generateLqip(filePath, lqipType, lqipSize, isDevelopment)
-  }
+  if (!isDevelopment) {
+    const src = imagePath.src
+
+    const clean = src.replace(/^\//, '')
+
+    const candidatePaths = [
+      join(process.cwd(), 'dist', 'client', clean),
+      join(process.cwd(), 'dist', clean),
+      join(process.cwd(), 'dist', '_astro', clean.replace(/^_astro\//, ''))
+    ]
 
-  if (!isDevelopment && imagePath.src.startsWith('/_astro/')) {
-    const buildPath = join(process.cwd(), 'dist', imagePath.src)
-    return await generateLqip(buildPath, lqipType, lqipSize, isDevelopment)
+    for (const path of candidatePaths) {
+      if (existsSync(path)) {
+        return await generateLqip(path, lqipType, lqipSize, isDevelopment)
+      }
+    }
+
+    // if not found, try to recursively find the original source
+    if (src.startsWith('/_astro/')) {
+      const originalBase = extractOriginalFileName(src)
+      const originalSource = await recursiveFind(originalBase)
+
+      if (originalSource) {
+        console.log(`${PREFIX} fallback recursive source found:`, originalSource)
+        return await generateLqip(originalSource, lqipType, lqipSize, isDevelopment)
+      } else {
+        console.warn(`${PREFIX} original source not found recursively for basename:`, originalBase)
+      }
+    }
   }
 
   return undefined

package/src/utils/useLqipImage.ts

@@ -13,8 +13,7 @@ export async function useLqipImage({
   lqipSize = 4,
   styleProps = {},
   forbiddenVars = ['--lqip-background', '--z-index', '--opacity'],
-  isDevelopment,
-  isPrerendered
+  isDevelopment
 }: ComponentsOptions) {
   // resolve any kind of src (string, alias, import result, dynamic import)
   const resolved = await resolveImagePath(src as unknown as ImagePath)
@@ -24,7 +23,7 @@ export async function useLqipImage({
   let lqipImage
   if (resolvedSrc) {
     const lqipInput = typeof resolvedSrc === 'string' ? { src: resolvedSrc } : resolvedSrc
-    lqipImage = await getLqip(lqipInput, lqip, lqipSize, isDevelopment, isPrerendered)
+    lqipImage = await getLqip(lqipInput, lqip, lqipSize, isDevelopment)
   }
 
   let svgHTML = ''