feat: __UNLAZY_LOGGING__ build flag (closes #36)

Author: johannschopplich

docs/advanced/build-flags.md

@@ -8,14 +8,6 @@ Most bundlers provide a `define` option to set build flags:
 - [@rollup/plugin-replace](https://www.npmjs.com/package/@rollup/plugin-replace)
 - [esbuild](https://esbuild.github.io/api/#define)
 
-## Disable Hash Decoding <Badge type="info" text="^0.10.0" />
-
-unlazy ships with the [BlurHash](/placeholders/blurhash) and [ThumbHash](/placeholders/thumbhash) decoding algorithms to decode the hash values into images.
-
-In case your project doesn't use these placeholders, you can disable the hash decoding algorithms to reduce the bundle size. Use the following build flags to tree-shake the hash decoding algorithms:
-
-- `__ENABLE_HASH_DECODING__`: This flag is set to `true` by default.
-
 As an example, you can tree-shake the hash decoding algorithms in Vite by setting the `define` option in your `vite.config.ts` file:
 
 ```ts
@@ -24,13 +16,36 @@ import { defineConfig } from 'vite'
 
 export default defineConfig({
   define: {
-    __ENABLE_HASH_DECODING__: false,
+    // Defaults to `true`
+    __UNLAZY_HASH_DECODING__: false,
+    // Defaults to `true`
+    __UNLAZY_LOGGING__: false,
   },
 })
 ```
 
+## Disable Hash Decoding <Badge type="info" text="^0.10.0" />
+
+unlazy ships with the [BlurHash](/placeholders/blurhash) and [ThumbHash](/placeholders/thumbhash) decoding algorithms to decode the hash values into images.
+
+In case your project doesn't use these placeholders, you can disable the hash decoding algorithms to reduce the bundle size. Use the following build flags to tree-shake the hash decoding algorithms:
+
+- `__UNLAZY_HASH_DECODING__`: This flag is set to `true` by default.
+
 ::: warning
 This will only tree-shake the BlurHash and ThumbHash decoding algorithms when using the [`lazyLoad`](/api/lazy-load) method.
 
 If you use either `unlazy/blurhash` or `unlazy/thumbhash` sub-path imports directly, the decoding algorithms will still be bundled.
 :::
+
+## Disable Client Logging <Badge type="info" text="^0.10.2" />
+
+unlazy will help you locate missing `data-src` or `data-srcset` attributes in your project by logging a warning in the browser console. An example warning message looks like this:
+
+```bash
+[unlazy] Missing `data-src` or `data-srcset` attribute: <img>
+```
+
+If you want to disable these warnings, you can use the following build flag:
+
+- `__UNLAZY_LOGGING__`: This flag is set to `true` by default.

packages/core/src/lazyLoad.ts

@@ -29,8 +29,8 @@ export function lazyLoad<T extends HTMLImageElement>(
 
     // Generate the blurry placeholder from a Blurhash or ThumbHash string if applicable
     if (
-      // @ts-expect-error: Compile-time flag to exclude this code from the bundle
-      (typeof __ENABLE_HASH_DECODING__ === 'undefined' || __ENABLE_HASH_DECODING__)
+      // @ts-expect-error: Compile-time flag
+      (typeof __UNLAZY_HASH_DECODING__ === 'undefined' || __UNLAZY_HASH_DECODING__)
       && hash
     ) {
       const placeholder = createPlaceholderFromHash({
@@ -45,7 +45,9 @@ export function lazyLoad<T extends HTMLImageElement>(
 
     // Bail if the image doesn't provide a `data-src` or `data-srcset` attribute
     if (!image.dataset.src && !image.dataset.srcset) {
-      console.error('[unlazy] Missing `data-src` or `data-srcset` attribute', image)
+      // @ts-expect-error: Compile-time flag
+      if (typeof __UNLAZY_LOGGING__ === 'undefined' || __UNLAZY_LOGGING__)
+        console.error('[unlazy] Missing `data-src` or `data-srcset` attribute', image)
       continue
     }
 
@@ -166,7 +168,9 @@ export function createPlaceholderFromHash(
     }
   }
   catch (error) {
-    console.error(`Error generating ${hashType} placeholder:`, error)
+    // @ts-expect-error: Compile-time flag
+    if (typeof __UNLAZY_LOGGING__ === 'undefined' || __UNLAZY_LOGGING__)
+      console.error(`Error generating ${hashType} placeholder:`, error)
   }
 }