@azerion/bunosaurus-lqip-loader 0.0.0-stage → 4.0.0

package/README.md

@@ -1,3 +1,72 @@
-# Temporary Holding Version
+# `@docusaurus/lqip-loader`
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Low Quality Image Placeholders (LQIP) loader for webpack.
+
+## Installation
+
+```bash
+npm install --save-dev @docusaurus/lqip-loader
+```
+
+## Example
+
+Generating Base64 for a jpeg image imported in your JS bundle:
+
+> The large image file will be emitted & only 400byte of Base64 (if set to true in the loader options) will be bundled.
+
+### `webpack.config.js`
+
+```js
+{
+  // OPTION A: default file-loader fallback
+  test: /\.jpe?g$/,
+  loaders: [
+    {
+      loader: '@docusaurus/lqip-loader',
+      options: {
+        path: '/media', // your image going to be in media folder in the output dir
+        name: '[name].[ext]', // you can use [contenthash].[ext] too if you wish,
+      }
+    }
+  ]
+
+  // OPTION B: Chained with your own url-loader or file-loader
+  test: /\.(png|jpe?g)$/,
+  loaders: [
+    '@docusaurus/lqip-loader',
+    {
+      loader: 'url-loader',
+      options: {
+        limit: 8000
+      }
+    }
+  ]
+}
+```
+
+### `your-app-module.js`
+
+```js
+import banner from './images/banner.jpg';
+
+console.log(banner.preSrc);
+// outputs: "data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhY....
+
+console.log(banner.src); // that's the original image URL to load later!
+```
+
+### Important note
+
+To save memory and improve GPU performance, browsers (including Chrome started from 61.0.3163.38) will now render a slightly more crisp or pixelated Base64 encoded images. If you want the blur to be very intense (smooth), here's a fix!
+
+```css
+img {
+  filter: blur(25px);
+}
+```
+
+More history about the issue can be [found here](https://bugs.chromium.org/p/chromium/issues/detail?id=771110#c3) and [here](https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/6L_3ZZeuA0M).
+
+## Credits
+
+This package has been imported from [`@endiliey/lqip-loader`](https://github.com/endiliey/lqip-loader) which was a fork of the original [`lqip-loader`](https://github.com/zouhir/lqip-loader) created exclusively for Docusaurus.

package/lib/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import type { LoaderContext } from 'webpack';
+type Options = {
+    base64: boolean;
+    palette: boolean;
+};
+declare function lqipLoader(this: LoaderContext<Options>, contentBuffer: Buffer): Promise<void>;
+export default lqipLoader;
+declare namespace lqipLoader {
+    var raw: boolean;
+}

package/lib/index.js

@@ -0,0 +1,43 @@
+"use strict";
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = lqipLoader;
+const tslib_1 = require("tslib");
+const lqip = tslib_1.__importStar(require("./lqip"));
+async function lqipLoader(contentBuffer) {
+    this.cacheable();
+    const callback = this.async();
+    const imgPath = this.resourcePath;
+    let content = contentBuffer.toString('utf8');
+    const contentIsUrlExport = /^(?:export default|module.exports =) "data:.*base64,.*/.test(content);
+    const contentIsFileExport = /^(?:export default|module.exports =) .*/.test(content);
+    let source;
+    if (contentIsUrlExport) {
+        source = content.match(/^(?:export default|module.exports =) (?<source>.*)/).groups.source;
+    }
+    else {
+        if (!contentIsFileExport) {
+            // eslint-disable-next-line @typescript-eslint/no-require-imports
+            const fileLoader = require('file-loader');
+            // @ts-expect-error: type is a bit unwieldy...
+            content = fileLoader.call(this, contentBuffer);
+        }
+        source = content.match(/^(?:export default|module.exports =) (?<source>.*);/).groups.source;
+    }
+    try {
+        const preSrc = await lqip.base64(imgPath);
+        const finalObject = JSON.stringify({ src: 'STUB', preSrc });
+        const result = `module.exports = ${finalObject.replace('"STUB"', source)};`;
+        callback(null, result);
+    }
+    catch (err) {
+        console.error(err);
+        callback(new Error('ERROR'), undefined);
+    }
+}
+lqipLoader.raw = true;

package/lib/lqip.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export declare function base64(file: string): Promise<string>;

package/lib/lqip.js

@@ -0,0 +1,42 @@
+"use strict";
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.base64 = base64;
+const tslib_1 = require("tslib");
+const node_path_1 = tslib_1.__importDefault(require("node:path"));
+const logger_1 = tslib_1.__importDefault(require("@docusaurus/logger"));
+const sharp_1 = tslib_1.__importDefault(require("sharp"));
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const { version } = require('../package.json');
+const ERROR_EXT = `Error: Input file is missing or uses unsupported image format, lqip v${version}`;
+const SUPPORTED_MIMES = {
+    jpeg: 'image/jpeg',
+    jpg: 'image/jpeg',
+    png: 'image/png',
+};
+/**
+ * It returns a Base64 image string with required formatting to work on the web
+ * (<img src=".." /> or in CSS url('..'))
+ */
+const toBase64 = (extMimeType, data) => `data:${extMimeType};base64,${data.toString('base64')}`;
+async function base64(file) {
+    let extension = node_path_1.default.extname(file);
+    extension = extension.split('.').pop();
+    const mime = SUPPORTED_MIMES[extension];
+    if (!mime) {
+        throw new Error(ERROR_EXT);
+    }
+    try {
+        const data = await (0, sharp_1.default)(file).resize(10).toBuffer();
+        return toBase64(mime, data);
+    }
+    catch (err) {
+        logger_1.default.error `Generation of base64 failed for image path=${file}.`;
+        throw err;
+    }
+}

package/package.json

@@ -1,6 +1,32 @@
 {
   "name": "@azerion/bunosaurus-lqip-loader",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "4.0.0",
+  "description": "Low Quality Image Placeholders (LQIP) loader for webpack.",
+  "main": "lib/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "watch": "tsc --watch"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/azerion/bunosaurus.git",
+    "directory": "packages/lqip-loader"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@docusaurus/logger": "npm:@azerion/bunosaurus-logger@4.0.0",
+    "file-loader": "^6.2.0",
+    "sharp": "^0.35.1",
+    "tslib": "^2.8.1"
+  },
+  "engines": {
+    "bun": ">=1.4.1"
+  },
+  "devDependencies": {
+    "@types/file-loader": "^5.0.4",
+    "webpack": "^5.111.0"
+  }
+}