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.
Files changed (35) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/babel-helpers.js +67 -67
  3. package/dist/babel-plugin-parse-static-images.js +80 -80
  4. package/dist/components/gatsby-image.browser.js +173 -173
  5. package/dist/components/gatsby-image.server.js +106 -106
  6. package/dist/components/hooks.js +251 -251
  7. package/dist/components/intersection-observer.js +53 -53
  8. package/dist/components/layout-wrapper.js +95 -95
  9. package/dist/components/lazy-hydrate.js +218 -218
  10. package/dist/components/main-image.js +28 -28
  11. package/dist/components/picture.js +103 -103
  12. package/dist/components/placeholder.js +78 -78
  13. package/dist/components/static-image.server.js +111 -111
  14. package/dist/gatsby-image.browser.js +1 -0
  15. package/dist/gatsby-image.browser.modern.js +1 -0
  16. package/dist/gatsby-node.js +58 -58
  17. package/dist/global.js +2 -2
  18. package/dist/image-utils.js +442 -442
  19. package/dist/index.js +32 -32
  20. package/dist/node-apis/image-processing.js +276 -276
  21. package/dist/node-apis/node-utils.js +11 -11
  22. package/dist/node-apis/parser.js +98 -98
  23. package/dist/node-apis/preprocess-source.js +117 -117
  24. package/dist/node-apis/watcher.js +129 -129
  25. package/dist/resolver-utils.js +120 -120
  26. package/dist/src/babel-helpers.d.ts +6 -6
  27. package/dist/src/babel-plugin-parse-static-images.d.ts +10 -10
  28. package/dist/src/gatsby-node.d.ts +5 -5
  29. package/dist/src/node-apis/image-processing.d.ts +29 -29
  30. package/dist/src/node-apis/node-utils.d.ts +1 -1
  31. package/dist/src/node-apis/parser.d.ts +11 -11
  32. package/dist/src/node-apis/preprocess-source.d.ts +2 -2
  33. package/dist/src/node-apis/watcher.d.ts +12 -12
  34. package/dist/src/resolver-utils.d.ts +21 -21
  35. 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)
@@ -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;