astro-lqip 1.4.0 → 1.5.0

package/README.md

@@ -9,6 +9,14 @@
 
 Native extended Astro components for generating low quality image placeholders (LQIP).
 
+## ✨ Features
+- 🖼️ Supports both `<Image>` and `<Picture>` components.
+- 🎨 Multiple LQIP techniques: base64, solid color, CSS via gradients and SVG.
+- 🚀 Easy to use, just replace the native Astro components with the ones from [astro-lqip](https://astro-lqip.web.app/).
+- 🔧 Fully compatible with [Astro's image optimization features](https://docs.astro.build/en/guides/images/).
+- 🌍 Supports both local and remote images.
+- ⚙️ Supports SSR mode with [Node Adapter](https://docs.astro.build/en/guides/integrations-guide/node/).
+
 ## ⬇️ Installation
 
 NPM:
@@ -73,7 +81,7 @@ Both `<Image>` and `<Picture>` components support all the props of the [native A
 - `lqipSize`: The size of the LQIP image, which can be any number from `4` to `64`. (default is 4)
 
 > [!WARNING]
-> A major size in the `lqipSize` prop can significantly impact the performance of your application.
+> A high value for `lqipSize` can significantly increase the total size of your website.
 
 Example:
 
@@ -92,15 +100,6 @@ import otherImage from './path/to/other-image.png';
 > [!TIP]
 > For the `<Image>` component, a `parentAttributes` prop similar to `pictureAttributes` has been added.
 
-## 📝 ToDo
-
-- [x] Add support for Image component.
-- [x] Add support for more lqip techniques.
-- [x] Test for remote images.
-- [x] Optimize current CSS usage.
-- [x] Improve docs page.
-- [ ] Test support for SSR mode.
-
 ## 💡 Knowledge
 
 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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-lqip",
-  "version": "1.4.0",
+  "version": "1.5.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.36.0",
-    "@typescript-eslint/parser": "8.44.1",
-    "astro": "5.13.11",
-    "bumpp": "10.2.3",
-    "eslint": "9.36.0",
+    "@eslint/js": "9.37.0",
+    "@typescript-eslint/parser": "8.46.1",
+    "astro": "5.14.5",
+    "bumpp": "10.3.1",
+    "eslint": "9.37.0",
     "eslint-plugin-astro": "1.3.1",
-    "eslint-plugin-jsonc": "2.20.1",
+    "eslint-plugin-jsonc": "2.21.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-package-json": "0.56.3",
-    "eslint-plugin-yml": "1.18.0",
+    "eslint-plugin-package-json": "0.56.4",
+    "eslint-plugin-yml": "1.19.0",
     "globals": "16.4.0",
-    "jiti": "2.6.0",
+    "jiti": "2.6.1",
     "nano-staged": "0.8.0",
     "neostandard": "0.12.2",
     "simple-git-hooks": "2.13.1"

package/src/components/Image.astro

@@ -16,13 +16,15 @@ 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 } = await useLqipImage({
   src: props.src,
   lqip,
   lqipSize,
   styleProps: parentAttributes.style ?? {},
-  isDevelopment
+  isDevelopment,
+  isPrerendered
 })
 
 const combinedParentAttributes = {

package/src/components/Picture.astro

@@ -13,13 +13,15 @@ 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 } = await useLqipImage({
   src: props.src,
   lqip,
   lqipSize,
   styleProps: pictureAttributes.style ?? {},
-  isDevelopment
+  isDevelopment,
+  isPrerendered
 })
 
 const combinedPictureAttributes = {

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

@@ -2,9 +2,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
+  lqip: LqipType
+  lqipSize: number
+  styleProps: Record<string, any>
+  forbiddenVars: string[]
+  isDevelopment: boolean | undefined
+  isPrerendered: boolean | undefined
 }

package/src/types/image-path.type.ts

@@ -0,0 +1 @@
+export type ImagePath = string | { src: string } | Promise<{ default: { src: string } }>

package/src/types/index.ts

@@ -1,4 +1,5 @@
 export * from './components-options.type'
+export * from './image-path.type'
 export * from './lqip.type'
 export * from './plaiceholder.type'
 export * from './props.type'

package/src/utils/generateLqip.ts

@@ -6,7 +6,12 @@ import { PREFIX } from '../constants'
 
 import { getPlaiceholder } from 'plaiceholder'
 
-export async function generateLqip(imagePath: string, isDevelopment: boolean, lqipType: LqipType, lqipSize: number) {
+export async function generateLqip(
+  imagePath: string,
+  lqipType: LqipType,
+  lqipSize: number,
+  isDevelopment: boolean | undefined
+) {
   try {
     const buffer = await readFile(imagePath)
     const plaiceholderResult = await getPlaiceholder(buffer, { size: lqipSize })

package/src/utils/getLqip.ts

@@ -18,7 +18,13 @@ async function ensureCacheDir() {
   }
 }
 
-export async function getLqip(imagePath: { src: string }, isDevelopment: boolean, lqipType: LqipType, lqipSize: number) {
+export async function getLqip(
+  imagePath: { src: string },
+  lqipType: LqipType,
+  lqipSize: number,
+  isDevelopment: boolean | undefined,
+  isPrerendered: boolean | undefined
+) {
   if (!imagePath?.src) return undefined
 
   if (isRemoteUrl(imagePath.src)) {
@@ -33,7 +39,7 @@ export async function getLqip(imagePath: { src: string }, isDevelopment: boolean
     await writeFile(tempPath, buffer)
 
     try {
-      const lqip = await generateLqip(tempPath, isDevelopment, lqipType, lqipSize)
+      const lqip = await generateLqip(tempPath, lqipType, lqipSize, isDevelopment)
       return lqip
     } finally {
       await unlink(tempPath)
@@ -42,12 +48,17 @@ export async function getLqip(imagePath: { src: string }, isDevelopment: boolean
 
   if (isDevelopment && imagePath.src.startsWith('/@fs/')) {
     const filePath = imagePath.src.replace(/^\/@fs/, '').split('?')[0]
-    return await generateLqip(filePath, isDevelopment, lqipType, lqipSize)
+    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 && imagePath.src.startsWith('/_astro/')) {
     const buildPath = join(process.cwd(), 'dist', imagePath.src)
-    return await generateLqip(buildPath, isDevelopment, lqipType, lqipSize)
+    return await generateLqip(buildPath, lqipType, lqipSize, isDevelopment)
   }
 
   return undefined

package/src/utils/resolveImagePath.ts

@@ -1,6 +1,10 @@
-export async function resolveImagePath(path: string | { src: string }) {
+import type { ImagePath } from '../types'
+
+export async function resolveImagePath(path: ImagePath) {
   // If it's a string, we can't resolve it here. ex: Remote images URLs
   if (typeof path === 'string') return null
+  // Handle dynamic imports
+  if ('then' in path && typeof path.then === 'function') return (await path).default
   if ('src' in path) return path
   return null
 }

package/src/utils/useLqipImage.ts

@@ -13,7 +13,8 @@ export async function useLqipImage({
   lqipSize = 4,
   styleProps = {},
   forbiddenVars = ['--lqip-background', '--z-index', '--opacity'],
-  isDevelopment = false
+  isDevelopment,
+  isPrerendered
 }: ComponentsOptions) {
   let getImagePath: string | { src: string } | null
 
@@ -28,7 +29,7 @@ export async function useLqipImage({
   let lqipImage
   if (getImagePath) {
     const lqipInput = typeof getImagePath === 'string' ? { src: getImagePath } : getImagePath
-    lqipImage = await getLqip(lqipInput, isDevelopment, lqip, lqipSize)
+    lqipImage = await getLqip(lqipInput, lqip, lqipSize, isDevelopment, isPrerendered)
   }
 
   let svgHTML = ''