🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

webpack-image-placeholder-loader

Package Overview
Dependencies
Maintainers
1
Versions
23
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

webpack-image-placeholder-loader - npm Package Compare versions

Comparing version

1.1.18
to
1.1.19

dist/cjs.js.map
dist/helpers/color.js.map
dist/helpers/validation.js.map
dist/index.js.map

60

CHANGELOG.md

@@ -5,71 +5,67 @@ # Changelog

### [1.1.18](https://github.com/CoolCyberBrain/webpack-image-placeholder-loader/compare/v1.1.17...v1.1.18) (2020-11-17)
### [1.1.19](https://github.com/Calvin-LL/webpack-image-placeholder-loader/compare/v1.1.18...v1.1.19) (2020-11-29)
### [1.1.18](https://github.com/Calvin-LL/webpack-image-placeholder-loader/compare/v1.1.17...v1.1.18) (2020-11-17)
### Bug Fixes
* import with query where the value is a number not working ([cebacb4](https://github.com/CoolCyberBrain/webpack-image-placeholder-loader/commit/cebacb4715cc2e77b8eba0ffcd403c3c20c2339d))
- import with query where the value is a number not working ([cebacb4](https://github.com/Calvin-LL/webpack-image-placeholder-loader/commit/cebacb4715cc2e77b8eba0ffcd403c3c20c2339d))
### [1.1.17](https://github.com/CoolCyberBrain/webpack-image-placeholder-loader/compare/v1.1.16...v1.1.17) (2020-11-03)
### [1.1.17](https://github.com/Calvin-LL/webpack-image-placeholder-loader/compare/v1.1.16...v1.1.17) (2020-11-03)
### [1.1.16](https://github.com/CoolCyberBrain/webpack-image-placeholder-loader/compare/v1.1.15...v1.1.16) (2020-10-28)
### [1.1.16](https://github.com/Calvin-LL/webpack-image-placeholder-loader/compare/v1.1.15...v1.1.16) (2020-10-28)
### [1.1.15](https://github.com/CoolCyberBrain/webpack-image-placeholder-loader/compare/v1.1.14...v1.1.15) (2020-09-02)
### [1.1.15](https://github.com/Calvin-LL/webpack-image-placeholder-loader/compare/v1.1.14...v1.1.15) (2020-09-02)
### [1.1.14](https://github.com/CoolCyberBrain/webpack-image-placeholder-loader/compare/v1.1.13...v1.1.14) (2020-08-18)
### [1.1.14](https://github.com/Calvin-LL/webpack-image-placeholder-loader/compare/v1.1.13...v1.1.14) (2020-08-18)
### [1.1.13](https://github.com/CoolCyberBrain/webpack-image-placeholder-loader/compare/v1.1.12...v1.1.13) (2020-06-24)
### [1.1.13](https://github.com/Calvin-LL/webpack-image-placeholder-loader/compare/v1.1.12...v1.1.13) (2020-06-24)
### [1.1.12](https://github.com/CoolCyberBrain/webpack-image-placeholder-loader/compare/v1.1.11...v1.1.12) (2020-06-24)
### [1.1.12](https://github.com/Calvin-LL/webpack-image-placeholder-loader/compare/v1.1.11...v1.1.12) (2020-06-24)
### [1.1.11](https://github.com/CoolCyberBrain/webpack-image-placeholder-loader/compare/v1.1.10...v1.1.11) (2020-06-23)
### [1.1.11](https://github.com/Calvin-LL/webpack-image-placeholder-loader/compare/v1.1.10...v1.1.11) (2020-06-23)
### [1.1.10](https://github.com/CoolCyberBrain/webpack-image-placeholder-loader/compare/v1.1.9...v1.1.10) (2020-06-19)
### [1.1.10](https://github.com/Calvin-LL/webpack-image-placeholder-loader/compare/v1.1.9...v1.1.10) (2020-06-19)
### Bug Fixes
* queries not validated ([b552751](https://github.com/CoolCyberBrain/webpack-image-placeholder-loader/commit/b55275130d0960581d8d682da05dff4d9ac93034))
- queries not validated ([b552751](https://github.com/Calvin-LL/webpack-image-placeholder-loader/commit/b55275130d0960581d8d682da05dff4d9ac93034))
### [1.1.9](https://github.com/CoolCyberBrain/webpack-image-placeholder-loader/compare/v1.1.8...v1.1.9) (2020-06-19)
### [1.1.9](https://github.com/Calvin-LL/webpack-image-placeholder-loader/compare/v1.1.8...v1.1.9) (2020-06-19)
### Bug Fixes
* queries not validated ([0ebf205](https://github.com/CoolCyberBrain/webpack-image-placeholder-loader/commit/0ebf205cef41f2fd36eb52cfd87c09096ec42856))
- queries not validated ([0ebf205](https://github.com/Calvin-LL/webpack-image-placeholder-loader/commit/0ebf205cef41f2fd36eb52cfd87c09096ec42856))
### [1.1.8](https://github.com/CoolCyberBrain/webpack-image-placeholder-loader/compare/v1.1.7...v1.1.8) (2020-06-17)
### [1.1.8](https://github.com/Calvin-LL/webpack-image-placeholder-loader/compare/v1.1.7...v1.1.8) (2020-06-17)
### [1.1.7](https://github.com/CoolCyberBrain/webpack-image-placeholder-loader/compare/v1.1.6...v1.1.7) (2020-06-17)
### [1.1.7](https://github.com/Calvin-LL/webpack-image-placeholder-loader/compare/v1.1.6...v1.1.7) (2020-06-17)
### [1.1.6](https://github.com/CoolCyberBrain/webpack-image-placeholder-loader/compare/v1.1.5...v1.1.6) (2020-06-17)
### [1.1.6](https://github.com/Calvin-LL/webpack-image-placeholder-loader/compare/v1.1.5...v1.1.6) (2020-06-17)
### [1.1.5](https://github.com/CoolCyberBrain/webpack-image-placeholder-loader/compare/v1.1.4...v1.1.5) (2020-06-17)
### [1.1.5](https://github.com/Calvin-LL/webpack-image-placeholder-loader/compare/v1.1.4...v1.1.5) (2020-06-17)
### [1.1.4](https://github.com/CoolCyberBrain/webpack-image-placeholder-loader/compare/v1.1.3...v1.1.4) (2020-06-17)
### [1.1.4](https://github.com/Calvin-LL/webpack-image-placeholder-loader/compare/v1.1.3...v1.1.4) (2020-06-17)
### [1.1.3](https://github.com/CoolCyberBrain/webpack-image-placeholder-loader/compare/v1.1.2...v1.1.3) (2020-06-13)
### [1.1.3](https://github.com/Calvin-LL/webpack-image-placeholder-loader/compare/v1.1.2...v1.1.3) (2020-06-13)
### [1.1.2](https://github.com/CoolCyberBrain/webpack-image-placeholder-loader/compare/v1.1.1...v1.1.2) (2020-06-11)
### [1.1.2](https://github.com/Calvin-LL/webpack-image-placeholder-loader/compare/v1.1.1...v1.1.2) (2020-06-11)
### [1.1.1](https://github.com/CoolCyberBrain/webpack-image-placeholder-loader/compare/v1.1.0...v1.1.1) (2020-06-09)
### [1.1.1](https://github.com/Calvin-LL/webpack-image-placeholder-loader/compare/v1.1.0...v1.1.1) (2020-06-09)
### Bug Fixes
* **resourcequery:** queries not having effect ([48b8913](https://github.com/CoolCyberBrain/webpack-image-placeholder-loader/commit/48b891365d662426dd72dd87f4e2d039f53d619b))
- **resourcequery:** queries not having effect ([48b8913](https://github.com/Calvin-LL/webpack-image-placeholder-loader/commit/48b891365d662426dd72dd87f4e2d039f53d619b))
## 1.1.0 (2020-06-09)
### Features
* **all:** implement all features ([01d2d23](https://github.com/CoolCyberBrain/webpack-image-placeholder-loader/commit/01d2d231b72854a32e127727b3818817fa593a0d))
* **validateoptions:** add validateOptions ([498fbf3](https://github.com/CoolCyberBrain/webpack-image-placeholder-loader/commit/498fbf39c5a17542aa39dcec200522ab2616b663))
- **all:** implement all features ([01d2d23](https://github.com/Calvin-LL/webpack-image-placeholder-loader/commit/01d2d231b72854a32e127727b3818817fa593a0d))
- **validateoptions:** add validateOptions ([498fbf3](https://github.com/Calvin-LL/webpack-image-placeholder-loader/commit/498fbf39c5a17542aa39dcec200522ab2616b663))
### Bug Fixes
* **index.ts:** fix background color handling ([5a50b98](https://github.com/CoolCyberBrain/webpack-image-placeholder-loader/commit/5a50b98167f2a2e3383c27329a4ce9066a84f5a4))
* **index.ts:** fix improper webpack async syntex ([53760bc](https://github.com/CoolCyberBrain/webpack-image-placeholder-loader/commit/53760bcf9749c31da9df89e2e8dfe6560a4e91f1))
* **package.json:** release script ([37877fe](https://github.com/CoolCyberBrain/webpack-image-placeholder-loader/commit/37877fef291ccc7e30fa0785db97f9e674cefad5))
- **index.ts:** fix background color handling ([5a50b98](https://github.com/Calvin-LL/webpack-image-placeholder-loader/commit/5a50b98167f2a2e3383c27329a4ce9066a84f5a4))
- **index.ts:** fix improper webpack async syntex ([53760bc](https://github.com/Calvin-LL/webpack-image-placeholder-loader/commit/53760bcf9749c31da9df89e2e8dfe6560a4e91f1))
- **package.json:** release script ([37877fe](https://github.com/Calvin-LL/webpack-image-placeholder-loader/commit/37877fef291ccc7e30fa0785db97f9e674cefad5))

1

dist/cjs.js

@@ -5,1 +5,2 @@ "use strict";

module.exports.raw = loader.raw;
//# sourceMappingURL=cjs.js.map

15

dist/helpers/color.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.mixColorVale = exports.mixRgbaWithRgb = exports.rgbaToRgb = exports.rgbToRgbArray = exports.rgbToRgbaArray = void 0;
exports.mixColorValues = exports.mixRgbaWithRgb = exports.rgbaToRgb = exports.rgbToRgbArray = exports.rgbToRgbaArray = void 0;
function rgbToRgbaArray(rgb) {

@@ -12,3 +12,3 @@ return [rgb.r, rgb.g, rgb.b, 255];

exports.rgbToRgbArray = rgbToRgbArray;
function rgbaToRgb({ r, g, b }) {
function rgbaToRgb({ r, g, b, }) {
return { r, g, b };

@@ -19,11 +19,12 @@ }

return {
r: mixColorVale(r1, r2, a),
g: mixColorVale(g1, g2, a),
b: mixColorVale(b1, b2, a),
r: mixColorValues(r1, r2, a),
g: mixColorValues(g1, g2, a),
b: mixColorValues(b1, b2, a),
};
}
exports.mixRgbaWithRgb = mixRgbaWithRgb;
function mixColorVale(foregroundColor, backgroundColor, alpha) {
function mixColorValues(foregroundColor, backgroundColor, alpha) {
return Math.max(0, Math.min(Math.round(foregroundColor * alpha + backgroundColor * (1 - alpha)), 255));
}
exports.mixColorVale = mixColorVale;
exports.mixColorValues = mixColorValues;
//# sourceMappingURL=color.js.map

4

dist/helpers/validation.js

@@ -16,3 +16,3 @@ "use strict";

return true;
default:
default: {
const tc = tinycolor2_1.default(color);

@@ -23,2 +23,3 @@ if (tc.isValid())

- options.color ${JSON.stringify(color)} is not a valid color.`;
}
}

@@ -35,1 +36,2 @@ }

exports.validatebackgroundColor = validatebackgroundColor;
//# sourceMappingURL=validation.js.map

86

dist/index.js

@@ -8,6 +8,6 @@ "use strict";

const fast_average_color_1 = __importDefault(require("fast-average-color"));
const loader_utils_1 = __importDefault(require("loader-utils"));
const schema_utils_1 = require("schema-utils");
const sharp_1 = __importDefault(require("sharp"));
const tinycolor2_1 = __importDefault(require("tinycolor2"));
const webpack_loader_util_1 = require("@calvin-l/webpack-loader-util");
const color_1 = require("./helpers/color");

@@ -18,21 +18,19 @@ const validation_1 = require("./helpers/validation");

function default_1(content) {
var _a, _b, _c, _d;
const callback = this.async();
const options = loader_utils_1.default.getOptions(this);
const queryObject = this.resourceQuery
? loader_utils_1.default.parseQuery(this.resourceQuery)
: undefined;
const fullOptions = {
...options,
...attemptToConvertValuesToNumbers(queryObject),
const defaultOptions = {
format: "base64",
size: 1,
color: "sqrt",
backgroundColor: "#FFF",
esModule: true,
};
if (options)
schema_utils_1.validate(options_json_1.default, options, {
name: "Image Placeholder Loader",
baseDataPath: "options",
});
const format = (_a = fullOptions.format) !== null && _a !== void 0 ? _a : "base64";
const size = (_b = fullOptions.size) !== null && _b !== void 0 ? _b : 1;
const color = (_c = fullOptions.color) !== null && _c !== void 0 ? _c : "sqrt";
const backgroundColor = (_d = fullOptions.backgroundColor) !== null && _d !== void 0 ? _d : "#FFF";
const options = {
...defaultOptions,
...webpack_loader_util_1.getOptions(this, true, true),
};
schema_utils_1.validate(options_json_1.default, options, {
name: "Image Placeholder Loader",
baseDataPath: "options",
});
const { format, size, color, backgroundColor, esModule } = options;
validation_1.validateColor(color);

@@ -42,5 +40,3 @@ validation_1.validatebackgroundColor(backgroundColor);

.then((result) => {
var _a, _b;
const esModule = (_b = (_a = queryObject === null || queryObject === void 0 ? void 0 : queryObject.esModule) !== null && _a !== void 0 ? _a : fullOptions === null || fullOptions === void 0 ? void 0 : fullOptions.esModule) !== null && _b !== void 0 ? _b : true;
callback === null || callback === void 0 ? void 0 : callback(null, `${esModule ? "export default" : "module.exports ="} ${JSON.stringify(result)}`);
callback(null, `${esModule ? "export default" : "module.exports ="} ${JSON.stringify(result)}`);
})

@@ -53,16 +49,13 @@ .catch((e) => {

async function processImage(content, { format, size, color, backgroundColor }) {
const { rgb: resultColor, size: imageSize } = await getColor(Buffer.from(content), color, backgroundColor);
const result = await getResult(resultColor, size, format, imageSize);
return result;
const sharpImage = sharp_1.default(Buffer.from(content));
const resultColor = await getColor(sharpImage, color, backgroundColor);
const imageSize = await getSize(sharpImage);
const output = await getOutput(resultColor, size, format, imageSize);
return output;
}
async function getColor(buffer, color, backgroundColor) {
async function getColor(sharpImage, color, backgroundColor) {
const tcColor = tinycolor2_1.default(color);
const backgroundColorRgb = color_1.rgbaToRgb(tinycolor2_1.default(backgroundColor).toRgb());
const sharpImage = sharp_1.default(buffer);
const { height, width } = await sharpImage.metadata();
if (tcColor.isValid())
return {
rgb: color_1.mixRgbaWithRgb(tcColor.toRgb(), backgroundColorRgb),
size: { width, height },
};
return color_1.mixRgbaWithRgb(tcColor.toRgb(), backgroundColorRgb);
const data = await sharpImage

@@ -79,8 +72,12 @@ .flatten({ background: backgroundColorRgb })

fac.destroy();
return {
rgb: { r: resultRgba[0], g: resultRgba[1], b: resultRgba[2] },
size: { width, height },
};
return { r: resultRgba[0], g: resultRgba[1], b: resultRgba[2] };
}
async function getResult(color, size, format, imageSize) {
async function getSize(sharpImage) {
const { height, width } = await sharpImage.metadata();
return { width, height };
}
/**
* combine all the given information to generate the final output of this loader
*/
async function getOutput(color, size, format, imageSize) {
const tcColor = tinycolor2_1.default(color);

@@ -106,17 +103,2 @@ if (format === "rgb")

}
function attemptToConvertValuesToNumbers(object) {
const result = { ...object };
Object.keys(result).forEach((key) => {
if (isNumeric(result[key])) {
result[key] = Number(result[key]);
}
});
return result;
}
// https://stackoverflow.com/a/175787
function isNumeric(string) {
if (typeof string !== "string")
return false;
// @ts-expect-error
return !isNaN(string) && !isNaN(parseFloat(string));
}
//# sourceMappingURL=index.js.map

28

package.json
{
"name": "webpack-image-placeholder-loader",
"version": "1.1.18",
"version": "1.1.19",
"description": "Generate a solid color image as placeholder",

@@ -20,4 +20,5 @@ "keywords": [

"build": "tsc",
"test": "tsc && jest",
"test-no-build": "jest",
"lint": "eslint --ext .ts .",
"lint:fix": "eslint --fix --ext .ts .",
"test": "tsc --project tsconfig.test-build.json && jest",
"release": "HUSKY_SKIP_HOOKS=1 standard-version"

@@ -35,5 +36,5 @@ },

},
"repository": "CoolCyberBrain/webpack-image-placeholder-loader",
"bugs": "https://github.com/CoolCyberBrain/webpack-image-placeholder-loader/issues",
"homepage": "https://github.com/CoolCyberBrain/webpack-image-placeholder-loader",
"repository": "Calvin-LL/webpack-image-placeholder-loader",
"bugs": "https://github.com/Calvin-LL/webpack-image-placeholder-loader/issues",
"homepage": "https://github.com/Calvin-LL/webpack-image-placeholder-loader",
"license": "MIT",

@@ -47,4 +48,4 @@ "engines": {

"dependencies": {
"@calvin-l/webpack-loader-util": "^1.0.2",
"fast-average-color": "^6.2.0",
"loader-utils": "^2.0.0",
"schema-utils": "^3.0.0",

@@ -55,15 +56,19 @@ "sharp": "^0.26.2",

"devDependencies": {
"@calvin-l/webpack-loader-test-util": "^1.3.1",
"@commitlint/cli": "^11.0.0",
"@commitlint/config-conventional": "^11.0.0",
"@types/jest": "^26.0.15",
"@types/loader-utils": "^2.0.1",
"@types/node": "^14.14.6",
"@types/node": "^14.14.10",
"@types/sharp": "^0.26.0",
"@types/tinycolor2": "^1.4.2",
"@types/webpack": "^4.41.24",
"@typescript-eslint/eslint-plugin": "^4.8.2",
"@typescript-eslint/parser": "^4.8.2",
"commitizen": "^4.2.2",
"cz-conventional-changelog": "^3.3.0",
"eslint": "^7.14.0",
"eslint-plugin-import-helpers": "^1.1.0",
"husky": "^4.3.0",
"jest": "^26.6.2",
"memfs": "^3.2.0",
"lint-staged": "^10.5.2",
"prettier": "^2.1.2",

@@ -74,5 +79,4 @@ "pretty-quick": "^3.1.0",

"typescript": "^4.0.5",
"webpack": "^4.44.2",
"webpack5": "npm:webpack@^5.3.2"
"webpack": "^4.44.2"
}
}

68

README.md

@@ -11,2 +11,8 @@ # webpack-image-placeholder-loader

## Examples
[React](https://github.com/Calvin-LL/webpack-image-placeholder-loader/tree/master/examples/react)
[Vue](https://github.com/Calvin-LL/webpack-image-placeholder-loader/tree/master/examples/vue)
## Install

@@ -28,24 +34,4 @@

### Recommanded usage for Webpack v4
#### Step 1
##### Install [webpack-query-loader](https://github.com/CoolCyberBrain/webpack-query-loader)
Install with npm:
```bash
npm install webpack-query-loader --save-dev
```
Install with yarn:
```bash
yarn add webpack-query-loader --dev
```
#### Step 2
##### Configure [webpack-query-loader](https://github.com/CoolCyberBrain/webpack-query-loader)
###### webpack.config.js

@@ -58,29 +44,19 @@

rules: [
...
{
test: /\.(png|jpe?g|svg|gif|webp|tiff?)/i,
use: [
// if import has query "?placeholder"
test: /\.(png|jpe?g|svg|gif|webp|tiff?)$/i,
oneOf: [
{
loader: "webpack-query-loader",
options: {
resourceQuery: "placeholder",
use: {
loader: "webpack-image-placeholder-loader",
options: {
format: "base64",
size: 1,
color: "sqrt",
backgroundColor: "#FFF"
}
}
// if the import url looks like "some.png?placeholder..."
resourceQuery: /placeholder/,
use: {
loader: "webpack-image-placeholder-loader",
options: {
format: "hex",
},
},
},
{
loader: "webpack-query-loader",
options: {
resourceQuery: "!placeholder",
use: {
loader: "file-loader", // or whatever loaders you want to use
}
},
// if no previous resourceQuery match
use: "file-loader",
},

@@ -95,3 +71,3 @@ ],

#### Step 3
#### Step 2

@@ -110,3 +86,3 @@ ##### Use in code

### Other usage for Webpack v4
### Other usage

@@ -125,6 +101,2 @@ With default options:

### Recommanded usage for Webpack v5
Same as Webpack v4 but use resourceQuery instead of webpack-query-loader
## Options

@@ -131,0 +103,0 @@