feat: separate global build without blurhash

Author: johannschopplich

docs/guide/installation.md

@@ -38,6 +38,13 @@ unlazy can be used without a build step. Useful for prototyping or when you don'
 - ESM build: <CdnLink name="unlazy.js" />
   - Must be used with `<script type="module">`
 
+:::info
+To keep the size of the bundle small, the global build does not include BlurHash decoding. If you want to use BlurHash, you must import the `unlazy.blurhash.iife.js` or `unlazy.blurhash.js` files instead:
+
+- Global build: <CdnLink name="unlazy.blurhash.iife.js" />
+- ESM build: <CdnLink name="unlazy.blurhash.js" />
+:::
+
 ### Auto-Initialization
 
 When using the global build, you can use the `init` attribute to automatically initialize and watch all elements that have a `loading="lazy"` attribute:

package.json

@@ -18,14 +18,14 @@
   "devDependencies": {
     "@antfu/eslint-config": "^0.38.5",
     "@antfu/eslint-config-react": "^0.38.5",
-    "@types/node": "^18.15.12",
+    "@types/node": "^18.15.13",
     "bumpp": "^9.1.0",
     "eslint": "^8.38.0",
     "happy-dom": "^9.8.4",
     "typescript": "^5.0.4",
     "unbuild": "^1.2.1",
-    "vite": "^4.3.0",
+    "vite": "^4.3.1",
     "vitest": "^0.30.1",
-    "vue-tsc": "^1.4.0"
+    "vue-tsc": "^1.4.1"
   }
 }

packages/core/src/blurhash.ts

@@ -1,6 +1,6 @@
 import { decodeBlurHash } from 'fast-blurhash'
 import { DEFAULT_BLURHASH_SIZE } from './constants'
-import { calculateDimensions, isSSR } from './utils'
+import { calculateDimensions, getDataUriFromArr, isSSR } from './utils'
 import { createBlurryImageSvg, encodeSvgAsDataUri } from './utils/image/svg'
 import type { UnLazyLoadOptions } from './types'
 import { getPngFromRgbaArr } from './utils/image'
@@ -51,3 +51,27 @@ export function createSvgDataUri(
 
   return encodeSvgAsDataUri(svg)
 }
+
+export function applyBlurhashPlaceholder(
+  image: HTMLImageElement,
+  blurhash: string,
+  blurhashSize: number,
+) {
+  // Preserve the original image's aspect ratio
+  const actualWidth = image.width || image.offsetWidth || blurhashSize
+  const actualHeight = image.height || image.offsetHeight || blurhashSize
+  const { width, height } = calculateDimensions(
+    actualWidth / actualHeight,
+    blurhashSize,
+  )
+
+  // Generate the blurry placeholder
+  try {
+    const pixels = decodeBlurHash(blurhash, width, height)
+    const placeholder = getDataUriFromArr(pixels, width, height)
+    image.src = placeholder
+  }
+  catch (error) {
+    console.error('Error generating blurry placeholder:', error)
+  }
+}

packages/core/src/lazyLoad.ts

@@ -1,8 +1,11 @@
-import { decodeBlurHash } from 'fast-blurhash'
 import { DEFAULT_BLURHASH_SIZE } from './constants'
-import { calculateDimensions, getDataUriFromArr, isCrawler, isLazyLoadingSupported, toElementsArr } from './utils'
+import { isCrawler, isLazyLoadingSupported, isSSR, toElementsArr } from './utils'
+import { applyBlurhashPlaceholder } from './blurhash'
 import type { UnLazyLoadOptions } from './types'
 
+// Compile-time flag to exclude blurhash from IIFE bundle
+const __ENABLE_BLURHASH__ = true
+
 export function lazyLoad<T extends HTMLImageElement>(
   /**
    * A CSS selector, a DOM element, a list of DOM elements, or an array of DOM elements to lazy-load.
@@ -23,9 +26,11 @@ export function lazyLoad<T extends HTMLImageElement>(
     updateSizesAttribute(image)
 
     // Generate the blurry placeholder from a Blurhash string if applicable
-    const _blurhash = blurhash === true ? image.dataset.blurhash : blurhash
-    if (_blurhash)
-      applyBlurhashPlaceholder(image, _blurhash, blurhashSize)
+    if (__ENABLE_BLURHASH__) {
+      const _blurhash = blurhash === true ? image.dataset.blurhash : blurhash
+      if (_blurhash && !isSSR)
+        applyBlurhashPlaceholder(image, _blurhash, blurhashSize)
+    }
 
     // Bail if the image doesn't provide a `data-src` or `data-srcset` attribute
     if (!image.dataset.src && !image.dataset.srcset)
@@ -122,27 +127,3 @@ function updatePictureSources(image: HTMLImageElement) {
   if (picture?.tagName.toLowerCase() === 'picture')
     [...picture.querySelectorAll<HTMLSourceElement>('source[data-srcset]')].forEach(updateImageSrcset)
 }
-
-function applyBlurhashPlaceholder(
-  image: HTMLImageElement,
-  blurhash: string,
-  blurhashSize: number,
-) {
-  // Preserve the original image's aspect ratio
-  const actualWidth = image.width || image.offsetWidth || blurhashSize
-  const actualHeight = image.height || image.offsetHeight || blurhashSize
-  const { width, height } = calculateDimensions(
-    actualWidth / actualHeight,
-    blurhashSize,
-  )
-
-  // Generate the blurry placeholder
-  try {
-    const pixels = decodeBlurHash(blurhash, width, height)
-    const placeholder = getDataUriFromArr(pixels, width, height)
-    image.src = placeholder
-  }
-  catch (error) {
-    console.error('Error generating blurry placeholder:', error)
-  }
-}

packages/nuxt/package.json

@@ -58,7 +58,7 @@
   "devDependencies": {
     "@nuxt/module-builder": "^0.3.0",
     "@nuxt/schema": "^3.4.2",
-    "@types/node": "^18.15.12",
+    "@types/node": "^18.15.13",
     "@unhead/vue": "^1.1.26",
     "@unocss/nuxt": "^0.51.5",
     "@unocss/reset": "^0.51.5",

packages/react/package.json

@@ -53,7 +53,7 @@
     "unlazy": "workspace:*"
   },
   "devDependencies": {
-    "@types/node": "^18.15.12",
+    "@types/node": "^18.15.13",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react": "^4.0.0",

packages/solid/package.json

@@ -54,7 +54,7 @@
     "unlazy": "workspace:*"
   },
   "devDependencies": {
-    "@types/node": "^18.15.12",
+    "@types/node": "^18.15.13",
     "fast-blurhash": "^1.1.2",
     "solid-js": "^1.7.3",
     "vite-plugin-solid": "^2.7.0"

packages/unlazy/package.json

@@ -46,7 +46,7 @@
   "scripts": {
     "jiti-fix": "find ./dist -type f -exec sed -i '' 's|file://||g' {} \\;",
     "dev": "unbuild --stub && npm run jiti-fix",
-    "build": "unbuild && vite build",
+    "build": "unbuild && vite build -c vite.config.bundle.ts && vite build -c vite.config.bundle.blurhash.ts",
     "test:types": "tsc --noEmit"
   },
   "peerDependencies": {

packages/unlazy/src/blurhash.ts

@@ -1 +1 @@
-export * from '@unlazy/core/blurhash'
+export { createPngDataUri, createSvgDataUri } from '@unlazy/core/blurhash'

packages/unlazy/src/index.iife.ts renamed to packages/unlazy/src/bundle/index.iife.ts

@@ -1,6 +1,6 @@
-import { autoSizes, lazyLoad, loadImage } from '@unlazy/core'
+import { autoSizes, lazyLoad, loadImage } from '../../../core/src'
 
-export { autoSizes, lazyLoad, loadImage } from '@unlazy/core'
+export { autoSizes, lazyLoad, loadImage } from '../../../core/src'
 
 // Default export for IIFE bundle
 export default Object.freeze({