From 110f14a025e2f28d1b4e77a633311ef2eb05c56f Mon Sep 17 00:00:00 2001
From: Johann Schopplich <mail@johannschopplich.com>
Date: Mon, 6 Nov 2023 14:24:57 +0100
Subject: [PATCH] feat: `__UNLAZY_LOGGING__` build flag (closes #36)

---
 docs/advanced/build-flags.md  | 33 ++++++++++++++++++++++++---------
 packages/core/src/lazyLoad.ts | 12 ++++++++----
 2 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/docs/advanced/build-flags.md b/docs/advanced/build-flags.md
index 41bf100..4c198e2 100644
--- a/docs/advanced/build-flags.md
+++ b/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.
diff --git a/packages/core/src/lazyLoad.ts b/packages/core/src/lazyLoad.ts
index 0d721c7..c5ada38 100644
--- a/packages/core/src/lazyLoad.ts
+++ b/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)
   }
 }