@tramvai/cli 3.24.1 → 3.25.0

package/README.md

@@ -305,3 +305,4 @@ Documentation:
 
 - [How to use React Profiler](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html)
 - [Introducing a new React profiler (React 18)](https://github.com/reactwg/react-18/discussions/76)
+- [React DevTools tutorial](https://react-devtools-tutorial.vercel.app/)

package/lib/builder/webpack/devServer/setup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../../../src/builder/webpack/devServer/setup.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0CAA0C,CAAC;AACvF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAsC9D,eAAO,MAAM,eAAe;QAMtB,SAAS;cACH,aAAa;mBACR,cAAc,sBAAsB,CAAC;kBACtC,0BAA0B;yBAsCzC,CAAC"}
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../../../src/builder/webpack/devServer/setup.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG7C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0CAA0C,CAAC;AACvF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAsC9D,eAAO,MAAM,eAAe;QAMtB,SAAS;cACH,aAAa;mBACR,cAAc,sBAAsB,CAAC;kBACtC,0BAA0B;yBAyCzC,CAAC"}

package/lib/builder/webpack/devServer/setup.js

@@ -56,7 +56,7 @@ const createDevServer = ({ di, compiler, configManager, staticServer, }) => {
                 },
             });
             if (configManager.hotRefresh.enabled) {
-                app.use(getHotModulePrefix(configManager), (0, webpack_hot_middleware_1.default)(compiler, { log: false }));
+                app.use(getHotModulePrefix(configManager), (0, webpack_hot_middleware_1.default)(compiler, { log: false, statsOptions: { cached: false } }));
             }
             const rootDir = di.get(tokens_1.CONFIG_ROOT_DIR_TOKEN);
             app.use(express_1.default.static(rootDir));

package/lib/builder/webpack/devServer/setup.js.map

@@ -1 +1 @@
-{"version":3,"file":"setup.js","sourceRoot":"","sources":["../../../../src/builder/webpack/devServer/setup.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"setup.js","sourceRoot":"","sources":["../../../../src/builder/webpack/devServer/setup.ts"],"names":[],"mappings":"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"}

package/lib/library/webpack/loaders/image-loader/getImageMiniatureURL.d.ts

@@ -0,0 +1,2 @@
+export declare const getImageMiniatureDataURL: (content: Buffer, width: number, height: number, extension: string) => Promise<string>;
+//# sourceMappingURL=getImageMiniatureURL.d.ts.map

package/lib/library/webpack/loaders/image-loader/getImageMiniatureURL.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getImageMiniatureURL.d.ts","sourceRoot":"","sources":["../../../../../src/library/webpack/loaders/image-loader/getImageMiniatureURL.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,wBAAwB,YAC1B,MAAM,SACR,MAAM,UACL,MAAM,aACH,MAAM,oBAwBlB,CAAC"}

package/lib/library/webpack/loaders/image-loader/getImageMiniatureURL.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getImageMiniatureDataURL = void 0;
+const tslib_1 = require("tslib");
+const BLUR_WIDTH = 10;
+const BLUR_HEIGHT = 10;
+const getImageMiniatureDataURL = (content, width, height, extension) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+    try {
+        const sharp = require('sharp');
+        const image = sharp(content, { sequentialRead: true });
+        // https://sharp.pixelplumbing.com/api-resize#resize
+        image.resize(BLUR_WIDTH, BLUR_HEIGHT, {
+            fit: 'inside',
+        });
+        if (extension === 'jpeg' || extension === 'jpg') {
+            image.jpeg({
+                progressive: true,
+            });
+        }
+        const optimizedBuffer = yield image.toBuffer();
+        const dataURL = `data:image/${extension};base64,${optimizedBuffer.toString('base64')}`;
+        return dataURL;
+    }
+    catch (e) {
+        console.error('image placeholder generation error: ', e);
+    }
+});
+exports.getImageMiniatureDataURL = getImageMiniatureDataURL;
+//# sourceMappingURL=getImageMiniatureURL.js.map

package/lib/library/webpack/loaders/image-loader/getImageMiniatureURL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getImageMiniatureURL.js","sourceRoot":"","sources":["../../../../../src/library/webpack/loaders/image-loader/getImageMiniatureURL.ts"],"names":[],"mappings":";;;;AAEA,MAAM,UAAU,GAAG,EAAE,CAAC;AACtB,MAAM,WAAW,GAAG,EAAE,CAAC;AAEhB,MAAM,wBAAwB,GAAG,CACtC,OAAe,EACf,KAAa,EACb,MAAc,EACd,SAAiB,EACjB,EAAE;IACF,IAAI;QACF,MAAM,KAAK,GAAiB,OAAO,CAAC,OAAO,CAAC,CAAC;QAE7C,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAC;QACvD,oDAAoD;QACpD,KAAK,CAAC,MAAM,CAAC,UAAU,EAAE,WAAW,EAAE;YACpC,GAAG,EAAE,QAAQ;SACd,CAAC,CAAC;QACH,IAAI,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,KAAK,EAAE;YAC/C,KAAK,CAAC,IAAI,CAAC;gBACT,WAAW,EAAE,IAAI;aAClB,CAAC,CAAC;SACJ;QAED,MAAM,eAAe,GAAG,MAAM,KAAK,CAAC,QAAQ,EAAE,CAAC;QAE/C,MAAM,OAAO,GAAG,cAAc,SAAS,WAAW,eAAe,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;QAEvF,OAAO,OAAO,CAAC;KAChB;IAAC,OAAO,CAAC,EAAE;QACV,OAAO,CAAC,KAAK,CAAC,sCAAsC,EAAE,CAAC,CAAC,CAAC;KAC1D;AACH,CAAC,CAAA,CAAC;AA5BW,QAAA,wBAAwB,4BA4BnC"}

package/lib/library/webpack/loaders/image-loader/index.d.ts

@@ -1,7 +1,8 @@
+/// <reference types="node" />
 import type { LoaderContext } from 'webpack';
 /**
  * Reuse file-loader logic, but return a object with src and size of image
  */
-export default function (this: LoaderContext<{}>, content: string): any;
+export default function (this: LoaderContext<{}>, content: Buffer): Promise<any>;
 export declare const raw = true;
 //# sourceMappingURL=index.d.ts.map

package/lib/library/webpack/loaders/image-loader/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/library/webpack/loaders/image-loader/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C;;GAEG;AACH,MAAM,CAAC,OAAO,WAAW,IAAI,EAAE,aAAa,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,OAkBhE;AAED,eAAO,MAAM,GAAG,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/library/webpack/loaders/image-loader/index.ts"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAI7C;;GAEG;AACH,yBAA+B,IAAI,EAAE,aAAa,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,gBA2BtE;AAED,eAAO,MAAM,GAAG,OAAO,CAAC"}

package/lib/library/webpack/loaders/image-loader/index.js

@@ -3,14 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.raw = void 0;
 const tslib_1 = require("tslib");
 const image_size_1 = tslib_1.__importDefault(require("image-size"));
+const loader_utils_1 = require("loader-utils");
+const getImageMiniatureURL_1 = require("./getImageMiniatureURL");
 /**
  * Reuse file-loader logic, but return a object with src and size of image
  */
 function default_1(content) {
-    const result = require('file-loader').call(this, content);
-    const dimensions = (0, image_size_1.default)(this.resourcePath);
-    // @todo: image blur placeholder in Base64, sharp or imagemin or jimp?
-    return result.replace(/^export default (__webpack_public_path__ \+ .+);$/, `const path = $1;
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const result = require('file-loader').call(this, content);
+        const dimensions = (0, image_size_1.default)(this.resourcePath);
+        const options = this.getOptions();
+        const extension = (0, loader_utils_1.interpolateName)(this, '[ext]', options);
+        const dataURL = yield (0, getImageMiniatureURL_1.getImageMiniatureDataURL)(content, dimensions.width, dimensions.height, extension);
+        return result.replace(/^export default (__webpack_public_path__ \+ .+);$/, `const path = $1;
 
 export default path;
 
@@ -18,7 +23,9 @@ export const image = {
   src: $1,
   width: ${JSON.stringify(dimensions.width)},
   height: ${JSON.stringify(dimensions.height)},
+  blurDataURL: ${JSON.stringify(dataURL)},
 };`);
+    });
 }
 exports.default = default_1;
 exports.raw = true;

package/lib/library/webpack/loaders/image-loader/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/library/webpack/loaders/image-loader/index.ts"],"names":[],"mappings":";;;;AAAA,oEAAgC;AAGhC;;GAEG;AACH,mBAAkD,OAAe;IAC/D,MAAM,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAE1D,MAAM,UAAU,GAAG,IAAA,oBAAM,EAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAE7C,sEAAsE;IACtE,OAAO,MAAM,CAAC,OAAO,CACnB,mDAAmD,EACnD;;;;;;WAMO,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC;YAC/B,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,MAAM,CAAC;GAC1C,CACA,CAAC;AACJ,CAAC;AAlBD,4BAkBC;AAEY,QAAA,GAAG,GAAG,IAAI,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/library/webpack/loaders/image-loader/index.ts"],"names":[],"mappings":";;;;AAAA,oEAAgC;AAEhC,+CAA+C;AAC/C,iEAAkE;AAElE;;GAEG;AACH,mBAAwD,OAAe;;QACrE,MAAM,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAC1D,MAAM,UAAU,GAAG,IAAA,oBAAM,EAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC7C,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAElC,MAAM,SAAS,GAAG,IAAA,8BAAe,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;QAE1D,MAAM,OAAO,GAAG,MAAM,IAAA,+CAAwB,EAC5C,OAAO,EACP,UAAU,CAAC,KAAK,EAChB,UAAU,CAAC,MAAM,EACjB,SAAS,CACV,CAAC;QAEF,OAAO,MAAM,CAAC,OAAO,CACnB,mDAAmD,EACnD;;;;;;WAMO,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC;YAC/B,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,MAAM,CAAC;iBAC5B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;GACrC,CACA,CAAC;IACJ,CAAC;CAAA;AA3BD,4BA2BC;AAEY,QAAA,GAAG,GAAG,IAAI,CAAC"}

package/lib/typings/application.d.ts

@@ -2,6 +2,7 @@ interface ImageObject {
     src: string;
     width: number;
     height: number;
+    blurDataURL: string;
 }
 declare module '*.css' {
     interface IClassNames {

package/lib/typings/application.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"application.d.ts","sourceRoot":"","sources":["../../src/typings/application.ts"],"names":[],"mappings":"AAAA,UAAU,WAAW;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,OAAO,QAAQ,OAAO,CAAC;IACrB,UAAU,WAAW;QACnB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;KAC7B;IACD,MAAM,UAAU,EAAE,WAAW,CAAC;IAC9B,SAAS,UAAU,CAAC;CACrB;AAED,OAAO,QAAQ,SAAS,CAAC;IACvB,MAAM,IAAI,EAAE,MAAM,CAAC;IACnB,SAAS,IAAI,CAAC;CACf;AAED,KAAK,WAAW,GAAG,MAAM,CAAC;AAE1B,OAAO,QAAQ,OAAO,CAAC;IACrB,MAAM,GAAG,EAAE,WAAW,CAAC;IACvB,eAAe,GAAG,CAAC;IACnB,MAAM,CAAC,MAAM,KAAK,EAAE,WAAW,CAAC;CACjC;AACD,OAAO,QAAQ,OAAO,CAAC;IACrB,MAAM,GAAG,EAAE,WAAW,CAAC;IACvB,eAAe,GAAG,CAAC;IACnB,MAAM,CAAC,MAAM,KAAK,EAAE,WAAW,CAAC;CACjC;AACD,OAAO,QAAQ,QAAQ,CAAC;IACtB,MAAM,GAAG,EAAE,WAAW,CAAC;IACvB,eAAe,GAAG,CAAC;IACnB,MAAM,CAAC,MAAM,KAAK,EAAE,WAAW,CAAC;CACjC;AACD,OAAO,QAAQ,QAAQ,CAAC;IACtB,MAAM,GAAG,EAAE,WAAW,CAAC;IACvB,eAAe,GAAG,CAAC;IACnB,MAAM,CAAC,MAAM,KAAK,EAAE,WAAW,CAAC;CACjC;AAED,OAAO,QAAQ,OAAO,CAAC;IACrB,MAAM,KAAK,EAAE,WAAW,CAAC;IACzB,SAAS,KAAK,CAAC;CAChB;AACD,OAAO,QAAQ,aAAa,CAAC;IAC3B,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;IAErD,KAAK,YAAY,GAAG,aAAa,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC;IAExD;;OAEG;IACH,MAAM,GAAG,EAAE,YAAY,CAAC;IAExB,SAAS,GAAG,CAAC;CACd"}
+{"version":3,"file":"application.d.ts","sourceRoot":"","sources":["../../src/typings/application.ts"],"names":[],"mappings":"AAAA,UAAU,WAAW;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,OAAO,QAAQ,OAAO,CAAC;IACrB,UAAU,WAAW;QACnB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;KAC7B;IACD,MAAM,UAAU,EAAE,WAAW,CAAC;IAC9B,SAAS,UAAU,CAAC;CACrB;AAED,OAAO,QAAQ,SAAS,CAAC;IACvB,MAAM,IAAI,EAAE,MAAM,CAAC;IACnB,SAAS,IAAI,CAAC;CACf;AAED,KAAK,WAAW,GAAG,MAAM,CAAC;AAE1B,OAAO,QAAQ,OAAO,CAAC;IACrB,MAAM,GAAG,EAAE,WAAW,CAAC;IACvB,eAAe,GAAG,CAAC;IACnB,MAAM,CAAC,MAAM,KAAK,EAAE,WAAW,CAAC;CACjC;AACD,OAAO,QAAQ,OAAO,CAAC;IACrB,MAAM,GAAG,EAAE,WAAW,CAAC;IACvB,eAAe,GAAG,CAAC;IACnB,MAAM,CAAC,MAAM,KAAK,EAAE,WAAW,CAAC;CACjC;AACD,OAAO,QAAQ,QAAQ,CAAC;IACtB,MAAM,GAAG,EAAE,WAAW,CAAC;IACvB,eAAe,GAAG,CAAC;IACnB,MAAM,CAAC,MAAM,KAAK,EAAE,WAAW,CAAC;CACjC;AACD,OAAO,QAAQ,QAAQ,CAAC;IACtB,MAAM,GAAG,EAAE,WAAW,CAAC;IACvB,eAAe,GAAG,CAAC;IACnB,MAAM,CAAC,MAAM,KAAK,EAAE,WAAW,CAAC;CACjC;AAED,OAAO,QAAQ,OAAO,CAAC;IACrB,MAAM,KAAK,EAAE,WAAW,CAAC;IACzB,SAAS,KAAK,CAAC;CAChB;AACD,OAAO,QAAQ,aAAa,CAAC;IAC3B,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;IAErD,KAAK,YAAY,GAAG,aAAa,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC;IAExD;;OAEG;IACH,MAAM,GAAG,EAAE,YAAY,CAAC;IAExB,SAAS,GAAG,CAAC;CACd"}

package/lib/typings/public.d.ts

@@ -3,6 +3,7 @@ export interface ImageObject {
     src: string;
     width: number;
     height: number;
+    blurDataURL: string;
 }
 export type SvgComponent = ComponentType<SVGProps<SVGElement>>;
 export * from './pwa/index';

package/lib/typings/public.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/typings/public.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,YAAY,GAAG,aAAa,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC;AAE/D,cAAc,aAAa,CAAC"}
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/typings/public.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,MAAM,YAAY,GAAG,aAAa,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC;AAE/D,cAAc,aAAa,CAAC"}

package/lib/typings/public.js.map

@@ -1 +1 @@
-{"version":3,"file":"public.js","sourceRoot":"","sources":["../../src/typings/public.ts"],"names":[],"mappings":";;;AAUA,sDAA4B"}
+{"version":3,"file":"public.js","sourceRoot":"","sources":["../../src/typings/public.ts"],"names":[],"mappings":";;;AAWA,sDAA4B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tramvai/cli",
-  "version": "3.24.1",
+  "version": "3.25.0",
   "description": "Cli инструмент для сборки и запуска приложений",
   "files": [
     "src",
@@ -71,7 +71,7 @@
     "@tinkoff/utils": "^2.1.3",
     "@tinkoff/webpack-dedupe-plugin": "2.0.2",
     "@tramvai/build": "4.1.0",
-    "@tramvai/react": "3.24.1",
+    "@tramvai/react": "3.25.0",
     "@tramvai/tools-check-versions": "0.5.3",
     "@tramvai/tools-migrate": "0.7.3",
     "ajv": "^8.12.0",
@@ -119,6 +119,7 @@
     "less": "^3.13.1",
     "less-loader": "^8.1.1",
     "lightning-pool": "^2.4.0",
+    "loader-utils": "^3.2.1",
     "mdtable": "^0.3.1",
     "mini-css-extract-plugin": "2.7.6",
     "node-plop": "^0.26.0",
@@ -163,7 +164,7 @@
     "webpack-bundle-analyzer": "^4.9.0",
     "webpack-chain": "^6.5.1",
     "webpack-dev-middleware": "^6.1.1",
-    "webpack-hot-middleware": "^2.25.4",
+    "webpack-hot-middleware": "^2.26.0",
     "webpack-sources": "^3.2.3",
     "webpack-stats-plugin": "^1.1.3",
     "webpackbar": "^5.0.2",

package/src/builder/webpack/devServer/setup.ts

@@ -82,7 +82,10 @@ export const createDevServer = ({
     });
 
     if (configManager.hotRefresh.enabled) {
-      app.use(getHotModulePrefix(configManager), webpackHotMiddleware(compiler, { log: false }));
+      app.use(
+        getHotModulePrefix(configManager),
+        webpackHotMiddleware(compiler, { log: false, statsOptions: { cached: false } })
+      );
     }
 
     const rootDir = di.get(CONFIG_ROOT_DIR_TOKEN);

package/src/library/webpack/loaders/image-loader/getImageMiniatureURL.ts

@@ -0,0 +1,34 @@
+import type Sharp from 'sharp';
+
+const BLUR_WIDTH = 10;
+const BLUR_HEIGHT = 10;
+
+export const getImageMiniatureDataURL = async (
+  content: Buffer,
+  width: number,
+  height: number,
+  extension: string
+) => {
+  try {
+    const sharp: typeof Sharp = require('sharp');
+
+    const image = sharp(content, { sequentialRead: true });
+    // https://sharp.pixelplumbing.com/api-resize#resize
+    image.resize(BLUR_WIDTH, BLUR_HEIGHT, {
+      fit: 'inside',
+    });
+    if (extension === 'jpeg' || extension === 'jpg') {
+      image.jpeg({
+        progressive: true,
+      });
+    }
+
+    const optimizedBuffer = await image.toBuffer();
+
+    const dataURL = `data:image/${extension};base64,${optimizedBuffer.toString('base64')}`;
+
+    return dataURL;
+  } catch (e) {
+    console.error('image placeholder generation error: ', e);
+  }
+};

package/src/library/webpack/loaders/image-loader/index.ts

@@ -1,15 +1,25 @@
 import sizeOf from 'image-size';
 import type { LoaderContext } from 'webpack';
+import { interpolateName } from 'loader-utils';
+import { getImageMiniatureDataURL } from './getImageMiniatureURL';
 
 /**
  * Reuse file-loader logic, but return a object with src and size of image
  */
-export default function (this: LoaderContext<{}>, content: string) {
+export default async function (this: LoaderContext<{}>, content: Buffer) {
   const result = require('file-loader').call(this, content);
-
   const dimensions = sizeOf(this.resourcePath);
+  const options = this.getOptions();
+
+  const extension = interpolateName(this, '[ext]', options);
+
+  const dataURL = await getImageMiniatureDataURL(
+    content,
+    dimensions.width,
+    dimensions.height,
+    extension
+  );
 
-  // @todo: image blur placeholder in Base64, sharp or imagemin or jimp?
   return result.replace(
     /^export default (__webpack_public_path__ \+ .+);$/,
     `const path = $1;
@@ -20,6 +30,7 @@ export const image = {
   src: $1,
   width: ${JSON.stringify(dimensions.width)},
   height: ${JSON.stringify(dimensions.height)},
+  blurDataURL: ${JSON.stringify(dataURL)},
 };`
   );
 }

package/src/typings/application.ts

@@ -2,6 +2,7 @@ interface ImageObject {
   src: string;
   width: number;
   height: number;
+  blurDataURL: string;
 }
 
 declare module '*.css' {

package/src/typings/public.ts

@@ -4,6 +4,7 @@ export interface ImageObject {
   src: string;
   width: number;
   height: number;
+  blurDataURL: string;
 }
 
 export type SvgComponent = ComponentType<SVGProps<SVGElement>>;