gatsby-plugin-image 2.22.0-next.2 → 3.0.0-alpha-v5.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/dist/babel-helpers.js +67 -67
- package/dist/babel-plugin-parse-static-images.js +80 -80
- package/dist/components/gatsby-image.browser.js +173 -173
- package/dist/components/gatsby-image.server.js +106 -106
- package/dist/components/hooks.js +251 -251
- package/dist/components/intersection-observer.js +53 -53
- package/dist/components/layout-wrapper.js +95 -95
- package/dist/components/lazy-hydrate.js +218 -218
- package/dist/components/main-image.js +28 -28
- package/dist/components/picture.js +103 -103
- package/dist/components/placeholder.js +78 -78
- package/dist/components/static-image.server.js +111 -111
- package/dist/gatsby-image.browser.js +1 -0
- package/dist/gatsby-image.browser.modern.js +1 -0
- package/dist/gatsby-node.js +58 -58
- package/dist/global.js +2 -2
- package/dist/image-utils.js +442 -442
- package/dist/index.js +32 -32
- package/dist/node-apis/image-processing.js +276 -276
- package/dist/node-apis/node-utils.js +11 -11
- package/dist/node-apis/parser.js +98 -98
- package/dist/node-apis/preprocess-source.js +117 -117
- package/dist/node-apis/watcher.js +129 -129
- package/dist/resolver-utils.js +120 -120
- package/dist/src/babel-helpers.d.ts +6 -6
- package/dist/src/babel-plugin-parse-static-images.d.ts +10 -10
- package/dist/src/gatsby-node.d.ts +5 -5
- package/dist/src/node-apis/image-processing.d.ts +29 -29
- package/dist/src/node-apis/node-utils.d.ts +1 -1
- package/dist/src/node-apis/parser.d.ts +11 -11
- package/dist/src/node-apis/preprocess-source.d.ts +2 -2
- package/dist/src/node-apis/watcher.d.ts +12 -12
- package/dist/src/resolver-utils.d.ts +21 -21
- package/package.json +7 -5
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [2.21.0](https://github.com/gatsbyjs/gatsby/commits/gatsby-plugin-image@2.21.0/packages/gatsby-plugin-image) (2022-08-16)
|
|
7
|
+
|
|
8
|
+
[🧾 Release notes](https://www.gatsbyjs.com/docs/reference/release-notes/v4.21)
|
|
9
|
+
|
|
10
|
+
#### Bug Fixes
|
|
11
|
+
|
|
12
|
+
- Add `outputPixelDensities` to `SHARP_ATTRIBUTES` [#36203](https://github.com/gatsbyjs/gatsby/issues/36203) ([ae226b5](https://github.com/gatsbyjs/gatsby/commit/ae226b589369e3b724cc3b5ded5b7b1b1a907afb))
|
|
13
|
+
|
|
6
14
|
## [2.20.0](https://github.com/gatsbyjs/gatsby/commits/gatsby-plugin-image@2.20.0/packages/gatsby-plugin-image) (2022-08-02)
|
|
7
15
|
|
|
8
16
|
[🧾 Release notes](https://www.gatsbyjs.com/docs/reference/release-notes/v4.20)
|
package/dist/babel-helpers.js
CHANGED
|
@@ -1,67 +1,67 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
-
};
|
|
16
|
-
exports.__esModule = true;
|
|
17
|
-
exports.hashOptions = exports.evaluateImageAttributes = exports.normalizeProps = exports.SHARP_ATTRIBUTES = void 0;
|
|
18
|
-
var murmur_1 = require("babel-plugin-remove-graphql-queries/murmur");
|
|
19
|
-
var babel_jsx_utils_1 = require("babel-jsx-utils");
|
|
20
|
-
var camelcase_1 = __importDefault(require("camelcase"));
|
|
21
|
-
exports.SHARP_ATTRIBUTES = new Set([
|
|
22
|
-
"src",
|
|
23
|
-
"layout",
|
|
24
|
-
"formats",
|
|
25
|
-
"aspectRatio",
|
|
26
|
-
"quality",
|
|
27
|
-
"avifOptions",
|
|
28
|
-
"jpgOptions",
|
|
29
|
-
"pngOptions",
|
|
30
|
-
"webpOptions",
|
|
31
|
-
"blurredOptions",
|
|
32
|
-
"transformOptions",
|
|
33
|
-
"width",
|
|
34
|
-
"height",
|
|
35
|
-
"placeholder",
|
|
36
|
-
"tracedSVGOptions",
|
|
37
|
-
"sizes",
|
|
38
|
-
"backgroundColor",
|
|
39
|
-
"breakpoints",
|
|
40
|
-
"outputPixelDensities",
|
|
41
|
-
]);
|
|
42
|
-
function normalizeProps(props) {
|
|
43
|
-
var out = __assign({}, props);
|
|
44
|
-
if (out.layout) {
|
|
45
|
-
out.layout = (0, camelcase_1["default"])(out.layout);
|
|
46
|
-
}
|
|
47
|
-
if (out.placeholder) {
|
|
48
|
-
out.placeholder = (0, camelcase_1["default"])(out.placeholder);
|
|
49
|
-
if (out.placeholder === "tracedSvg") {
|
|
50
|
-
out.placeholder = "tracedSVG";
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
if (Array.isArray(out.formats)) {
|
|
54
|
-
out.formats = out.formats.map(function (format) { return format.toLowerCase(); });
|
|
55
|
-
}
|
|
56
|
-
return out;
|
|
57
|
-
}
|
|
58
|
-
exports.normalizeProps = normalizeProps;
|
|
59
|
-
function evaluateImageAttributes(nodePath, onError) {
|
|
60
|
-
// Only get attributes that we need for generating the images
|
|
61
|
-
return normalizeProps((0, babel_jsx_utils_1.getAttributeValues)(nodePath, onError, exports.SHARP_ATTRIBUTES));
|
|
62
|
-
}
|
|
63
|
-
exports.evaluateImageAttributes = evaluateImageAttributes;
|
|
64
|
-
function hashOptions(options) {
|
|
65
|
-
return "".concat((0, murmur_1.murmurhash)(JSON.stringify(options)));
|
|
66
|
-
}
|
|
67
|
-
exports.hashOptions = hashOptions;
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
exports.__esModule = true;
|
|
17
|
+
exports.hashOptions = exports.evaluateImageAttributes = exports.normalizeProps = exports.SHARP_ATTRIBUTES = void 0;
|
|
18
|
+
var murmur_1 = require("babel-plugin-remove-graphql-queries/murmur");
|
|
19
|
+
var babel_jsx_utils_1 = require("babel-jsx-utils");
|
|
20
|
+
var camelcase_1 = __importDefault(require("camelcase"));
|
|
21
|
+
exports.SHARP_ATTRIBUTES = new Set([
|
|
22
|
+
"src",
|
|
23
|
+
"layout",
|
|
24
|
+
"formats",
|
|
25
|
+
"aspectRatio",
|
|
26
|
+
"quality",
|
|
27
|
+
"avifOptions",
|
|
28
|
+
"jpgOptions",
|
|
29
|
+
"pngOptions",
|
|
30
|
+
"webpOptions",
|
|
31
|
+
"blurredOptions",
|
|
32
|
+
"transformOptions",
|
|
33
|
+
"width",
|
|
34
|
+
"height",
|
|
35
|
+
"placeholder",
|
|
36
|
+
"tracedSVGOptions",
|
|
37
|
+
"sizes",
|
|
38
|
+
"backgroundColor",
|
|
39
|
+
"breakpoints",
|
|
40
|
+
"outputPixelDensities",
|
|
41
|
+
]);
|
|
42
|
+
function normalizeProps(props) {
|
|
43
|
+
var out = __assign({}, props);
|
|
44
|
+
if (out.layout) {
|
|
45
|
+
out.layout = (0, camelcase_1["default"])(out.layout);
|
|
46
|
+
}
|
|
47
|
+
if (out.placeholder) {
|
|
48
|
+
out.placeholder = (0, camelcase_1["default"])(out.placeholder);
|
|
49
|
+
if (out.placeholder === "tracedSvg") {
|
|
50
|
+
out.placeholder = "tracedSVG";
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
if (Array.isArray(out.formats)) {
|
|
54
|
+
out.formats = out.formats.map(function (format) { return format.toLowerCase(); });
|
|
55
|
+
}
|
|
56
|
+
return out;
|
|
57
|
+
}
|
|
58
|
+
exports.normalizeProps = normalizeProps;
|
|
59
|
+
function evaluateImageAttributes(nodePath, onError) {
|
|
60
|
+
// Only get attributes that we need for generating the images
|
|
61
|
+
return normalizeProps((0, babel_jsx_utils_1.getAttributeValues)(nodePath, onError, exports.SHARP_ATTRIBUTES));
|
|
62
|
+
}
|
|
63
|
+
exports.evaluateImageAttributes = evaluateImageAttributes;
|
|
64
|
+
function hashOptions(options) {
|
|
65
|
+
return "".concat((0, murmur_1.murmurhash)(JSON.stringify(options)));
|
|
66
|
+
}
|
|
67
|
+
exports.hashOptions = hashOptions;
|
|
@@ -1,80 +1,80 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
-
return cooked;
|
|
5
|
-
};
|
|
6
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
7
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
|
-
};
|
|
9
|
-
exports.__esModule = true;
|
|
10
|
-
var babel_helpers_1 = require("./babel-helpers");
|
|
11
|
-
var fs_extra_1 = __importDefault(require("fs-extra"));
|
|
12
|
-
var path_1 = __importDefault(require("path"));
|
|
13
|
-
var gatsby_core_utils_1 = require("gatsby-core-utils");
|
|
14
|
-
var common_tags_1 = require("common-tags");
|
|
15
|
-
/**
|
|
16
|
-
* This is a plugin that finds StaticImage components and injects the image props into the component.
|
|
17
|
-
* These props contain the image URLs etc, and were created earlier in the build process
|
|
18
|
-
*/
|
|
19
|
-
function attrs(_a) {
|
|
20
|
-
var t = _a.types, template = _a.template;
|
|
21
|
-
return {
|
|
22
|
-
visitor: {
|
|
23
|
-
JSXOpeningElement: function (nodePath) {
|
|
24
|
-
var _a;
|
|
25
|
-
if (!nodePath
|
|
26
|
-
.get("name")
|
|
27
|
-
.referencesImport("gatsby-plugin-image", "StaticImage")) {
|
|
28
|
-
return;
|
|
29
|
-
}
|
|
30
|
-
var unresolvedProps = [];
|
|
31
|
-
var props = (0, babel_helpers_1.evaluateImageAttributes)(nodePath, function (prop) {
|
|
32
|
-
unresolvedProps.push(prop);
|
|
33
|
-
});
|
|
34
|
-
var error;
|
|
35
|
-
if (unresolvedProps.length) {
|
|
36
|
-
// TODO: Add a shortlink to docs on the plugin
|
|
37
|
-
error = "Could not find values for the following props at build time: ".concat(unresolvedProps.join(", "));
|
|
38
|
-
console.warn("[gatsby-plugin-image] ".concat(error));
|
|
39
|
-
}
|
|
40
|
-
var hash = (0, babel_helpers_1.hashOptions)(props);
|
|
41
|
-
var cacheDir = (_a = this.opts) === null || _a === void 0 ? void 0 : _a.cacheDir;
|
|
42
|
-
if (!cacheDir) {
|
|
43
|
-
console.warn("[gatsby-plugin-image] Couldn't find image data cache file");
|
|
44
|
-
}
|
|
45
|
-
var filename = path_1["default"].join(cacheDir, "".concat(hash, ".json"));
|
|
46
|
-
var data;
|
|
47
|
-
// If there's no src prop there's no point in checking if it exists
|
|
48
|
-
if (!unresolvedProps.includes("src")) {
|
|
49
|
-
try {
|
|
50
|
-
data = fs_extra_1["default"].readJSONSync(filename);
|
|
51
|
-
}
|
|
52
|
-
catch (e) {
|
|
53
|
-
// TODO add info about minimum Gatsby version once this is merged
|
|
54
|
-
var msg = (0, common_tags_1.stripIndent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n Could not read image data file \"", "\". \n This may mean that the images in \"", "\" were not processed.\n Please ensure that your gatsby version is at least 2.24.78."], ["\n Could not read image data file \"", "\". \n This may mean that the images in \"", "\" were not processed.\n Please ensure that your gatsby version is at least 2.24.78."])), filename, this.filename);
|
|
55
|
-
error += msg;
|
|
56
|
-
console.warn("[gatsby-plugin-image] ".concat(msg));
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
if (!data) {
|
|
60
|
-
console.warn("[gatsby-plugin-image] No data found for image \"".concat(props.src, "\""));
|
|
61
|
-
// Add the error message to the component so we can show it in the browser
|
|
62
|
-
var newProp_1 = t.jsxAttribute(t.jsxIdentifier("__error"), t.jsxExpressionContainer(t.stringLiteral("No data found for image \"".concat(props.src, "\"\n ").concat(error || ""))));
|
|
63
|
-
nodePath.node.attributes.push(newProp_1);
|
|
64
|
-
return;
|
|
65
|
-
}
|
|
66
|
-
if (error) {
|
|
67
|
-
// Add the error message to the component so we can show it in the browser
|
|
68
|
-
var newProp_2 = t.jsxAttribute(t.jsxIdentifier("__error"), t.stringLiteral(error));
|
|
69
|
-
nodePath.node.attributes.push(newProp_2);
|
|
70
|
-
}
|
|
71
|
-
// `require()` the image data into a component prop
|
|
72
|
-
var makeRequire = template.expression("require(\"".concat((0, gatsby_core_utils_1.slash)(filename), "\")"));
|
|
73
|
-
var newProp = t.jsxAttribute(t.jsxIdentifier("__imageData"), t.jsxExpressionContainer(makeRequire()));
|
|
74
|
-
nodePath.node.attributes.push(newProp);
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
};
|
|
78
|
-
}
|
|
79
|
-
exports["default"] = attrs;
|
|
80
|
-
var templateObject_1;
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
7
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
|
+
};
|
|
9
|
+
exports.__esModule = true;
|
|
10
|
+
var babel_helpers_1 = require("./babel-helpers");
|
|
11
|
+
var fs_extra_1 = __importDefault(require("fs-extra"));
|
|
12
|
+
var path_1 = __importDefault(require("path"));
|
|
13
|
+
var gatsby_core_utils_1 = require("gatsby-core-utils");
|
|
14
|
+
var common_tags_1 = require("common-tags");
|
|
15
|
+
/**
|
|
16
|
+
* This is a plugin that finds StaticImage components and injects the image props into the component.
|
|
17
|
+
* These props contain the image URLs etc, and were created earlier in the build process
|
|
18
|
+
*/
|
|
19
|
+
function attrs(_a) {
|
|
20
|
+
var t = _a.types, template = _a.template;
|
|
21
|
+
return {
|
|
22
|
+
visitor: {
|
|
23
|
+
JSXOpeningElement: function (nodePath) {
|
|
24
|
+
var _a;
|
|
25
|
+
if (!nodePath
|
|
26
|
+
.get("name")
|
|
27
|
+
.referencesImport("gatsby-plugin-image", "StaticImage")) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
var unresolvedProps = [];
|
|
31
|
+
var props = (0, babel_helpers_1.evaluateImageAttributes)(nodePath, function (prop) {
|
|
32
|
+
unresolvedProps.push(prop);
|
|
33
|
+
});
|
|
34
|
+
var error;
|
|
35
|
+
if (unresolvedProps.length) {
|
|
36
|
+
// TODO: Add a shortlink to docs on the plugin
|
|
37
|
+
error = "Could not find values for the following props at build time: ".concat(unresolvedProps.join(", "));
|
|
38
|
+
console.warn("[gatsby-plugin-image] ".concat(error));
|
|
39
|
+
}
|
|
40
|
+
var hash = (0, babel_helpers_1.hashOptions)(props);
|
|
41
|
+
var cacheDir = (_a = this.opts) === null || _a === void 0 ? void 0 : _a.cacheDir;
|
|
42
|
+
if (!cacheDir) {
|
|
43
|
+
console.warn("[gatsby-plugin-image] Couldn't find image data cache file");
|
|
44
|
+
}
|
|
45
|
+
var filename = path_1["default"].join(cacheDir, "".concat(hash, ".json"));
|
|
46
|
+
var data;
|
|
47
|
+
// If there's no src prop there's no point in checking if it exists
|
|
48
|
+
if (!unresolvedProps.includes("src")) {
|
|
49
|
+
try {
|
|
50
|
+
data = fs_extra_1["default"].readJSONSync(filename);
|
|
51
|
+
}
|
|
52
|
+
catch (e) {
|
|
53
|
+
// TODO add info about minimum Gatsby version once this is merged
|
|
54
|
+
var msg = (0, common_tags_1.stripIndent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n Could not read image data file \"", "\". \n This may mean that the images in \"", "\" were not processed.\n Please ensure that your gatsby version is at least 2.24.78."], ["\n Could not read image data file \"", "\". \n This may mean that the images in \"", "\" were not processed.\n Please ensure that your gatsby version is at least 2.24.78."])), filename, this.filename);
|
|
55
|
+
error += msg;
|
|
56
|
+
console.warn("[gatsby-plugin-image] ".concat(msg));
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
if (!data) {
|
|
60
|
+
console.warn("[gatsby-plugin-image] No data found for image \"".concat(props.src, "\""));
|
|
61
|
+
// Add the error message to the component so we can show it in the browser
|
|
62
|
+
var newProp_1 = t.jsxAttribute(t.jsxIdentifier("__error"), t.jsxExpressionContainer(t.stringLiteral("No data found for image \"".concat(props.src, "\"\n ").concat(error || ""))));
|
|
63
|
+
nodePath.node.attributes.push(newProp_1);
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
if (error) {
|
|
67
|
+
// Add the error message to the component so we can show it in the browser
|
|
68
|
+
var newProp_2 = t.jsxAttribute(t.jsxIdentifier("__error"), t.stringLiteral(error));
|
|
69
|
+
nodePath.node.attributes.push(newProp_2);
|
|
70
|
+
}
|
|
71
|
+
// `require()` the image data into a component prop
|
|
72
|
+
var makeRequire = template.expression("require(\"".concat((0, gatsby_core_utils_1.slash)(filename), "\")"));
|
|
73
|
+
var newProp = t.jsxAttribute(t.jsxIdentifier("__imageData"), t.jsxExpressionContainer(makeRequire()));
|
|
74
|
+
nodePath.node.attributes.push(newProp);
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
}
|
|
79
|
+
exports["default"] = attrs;
|
|
80
|
+
var templateObject_1;
|