gatsby-image
Advanced tools
Comparing version 1.1.0-alpha.3f307d61 to 1.1.0-alpha.53bbd4cd
427
index.js
"use strict"; | ||
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); | ||
exports.__esModule = true; | ||
exports.default = void 0; | ||
var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck"); | ||
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose")); | ||
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); | ||
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized")); | ||
var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn"); | ||
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties")); | ||
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); | ||
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); | ||
var _inherits2 = require("babel-runtime/helpers/inherits"); | ||
var _react = _interopRequireDefault(require("react")); | ||
var _inherits3 = _interopRequireDefault(_inherits2); | ||
var _propTypes = _interopRequireDefault(require("prop-types")); | ||
var _objectWithoutProperties2 = require("babel-runtime/helpers/objectWithoutProperties"); | ||
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); | ||
var _extends2 = require("babel-runtime/helpers/extends"); | ||
var _extends3 = _interopRequireDefault(_extends2); | ||
var _react = require("react"); | ||
var _react2 = _interopRequireDefault(_react); | ||
var _propTypes = require("prop-types"); | ||
var _propTypes2 = _interopRequireDefault(_propTypes); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
// Handle legacy names for image queries. | ||
var convertProps = function convertProps(props) { | ||
var convertedProps = (0, _extends3.default)({}, props); | ||
var convertedProps = (0, _extends2.default)({}, props); | ||
if (convertedProps.responsiveResolution) { | ||
@@ -42,2 +28,3 @@ convertedProps.resolutions = convertedProps.responsiveResolution; | ||
} | ||
if (convertedProps.responsiveSizes) { | ||
@@ -49,10 +36,11 @@ convertedProps.sizes = convertedProps.responsiveSizes; | ||
return convertedProps; | ||
}; | ||
}; // Cache if we've seen an image before so we don't both with | ||
// lazy-loading & fading in on subsequent mounts. | ||
// Cache if we've seen an image before so we don't both with | ||
// lazy-loading & fading in on subsequent mounts. | ||
var imageCache = {}; | ||
var inImageCache = function inImageCache(props) { | ||
var convertedProps = convertProps(props); | ||
// Find src | ||
var convertedProps = convertProps(props); // Find src | ||
var src = convertedProps.sizes ? convertedProps.sizes.src : convertedProps.resolutions.src; | ||
@@ -68,3 +56,3 @@ | ||
var io = void 0; | ||
var io; | ||
var listeners = []; | ||
@@ -86,3 +74,5 @@ | ||
}); | ||
}, { rootMargin: "200px" }); | ||
}, { | ||
rootMargin: "200px" | ||
}); | ||
} | ||
@@ -99,2 +89,3 @@ | ||
var isWebpSupportedCache = null; | ||
var isWebpSupported = function isWebpSupported() { | ||
@@ -106,2 +97,3 @@ if (isWebpSupportedCache !== null) { | ||
var elem = typeof window !== "undefined" ? window.document.createElement("canvas") : {}; | ||
if (elem.getContext && elem.getContext("2d")) { | ||
@@ -118,18 +110,17 @@ isWebpSupportedCache = elem.toDataURL("image/webp").indexOf("data:image/webp") === 0; | ||
var _props$opacity = props.opacity, | ||
opacity = _props$opacity === undefined ? "" : _props$opacity, | ||
opacity = _props$opacity === void 0 ? "" : _props$opacity, | ||
src = props.src, | ||
srcSet = props.srcSet, | ||
_props$sizes = props.sizes, | ||
sizes = _props$sizes === undefined ? "" : _props$sizes, | ||
sizes = _props$sizes === void 0 ? "" : _props$sizes, | ||
_props$title = props.title, | ||
title = _props$title === undefined ? "" : _props$title, | ||
title = _props$title === void 0 ? "" : _props$title, | ||
_props$alt = props.alt, | ||
alt = _props$alt === undefined ? "" : _props$alt, | ||
alt = _props$alt === void 0 ? "" : _props$alt, | ||
_props$width = props.width, | ||
width = _props$width === undefined ? "" : _props$width, | ||
width = _props$width === void 0 ? "" : _props$width, | ||
_props$height = props.height, | ||
height = _props$height === undefined ? "" : _props$height, | ||
height = _props$height === void 0 ? "" : _props$height, | ||
_props$transitionDela = props.transitionDelay, | ||
transitionDelay = _props$transitionDela === undefined ? "" : _props$transitionDela; | ||
transitionDelay = _props$transitionDela === void 0 ? "" : _props$transitionDela; | ||
return "<img width=" + width + " height=" + height + " src=\"" + src + "\" srcset=\"" + srcSet + "\" alt=\"" + alt + "\" title=\"" + title + "\" sizes=\"" + sizes + "\" style=\"position:absolute;top:0;left:0;transition:opacity 0.5s;transition-delay:" + transitionDelay + ";opacity:" + opacity + ";width:100%;height:100%;object-fit:cover;objectPosition:center\"/>"; | ||
@@ -142,6 +133,5 @@ }; | ||
_props$transitionDela2 = props.transitionDelay, | ||
transitionDelay = _props$transitionDela2 === undefined ? "" : _props$transitionDela2, | ||
otherProps = (0, _objectWithoutProperties3.default)(props, ["opacity", "onLoad", "transitionDelay"]); | ||
return _react2.default.createElement("img", (0, _extends3.default)({}, otherProps, { | ||
transitionDelay = _props$transitionDela2 === void 0 ? "" : _props$transitionDela2, | ||
otherProps = (0, _objectWithoutProperties2.default)(props, ["opacity", "onLoad", "transitionDelay"]); | ||
return _react.default.createElement("img", (0, _extends2.default)({}, otherProps, { | ||
onLoad: onLoad, | ||
@@ -164,23 +154,23 @@ style: { | ||
Img.propTypes = { | ||
opacity: _propTypes2.default.number, | ||
transitionDelay: _propTypes2.default.string, | ||
onLoad: _propTypes2.default.func | ||
opacity: _propTypes.default.number, | ||
transitionDelay: _propTypes.default.string, | ||
onLoad: _propTypes.default.func | ||
}; | ||
var Image = function (_React$Component) { | ||
(0, _inherits3.default)(Image, _React$Component); | ||
var Image = | ||
/*#__PURE__*/ | ||
function (_React$Component) { | ||
(0, _inheritsLoose2.default)(Image, _React$Component); | ||
function Image(props) { | ||
(0, _classCallCheck3.default)(this, Image); | ||
var _this; | ||
// If this browser doesn't support the IntersectionObserver API | ||
_this = _React$Component.call(this, props) || this; // If this browser doesn't support the IntersectionObserver API | ||
// we default to start downloading the image right away. | ||
var _this = (0, _possibleConstructorReturn3.default)(this, _React$Component.call(this, props)); | ||
var isVisible = true; | ||
var imgLoaded = true; | ||
var IOSupported = false; | ||
var IOSupported = false; // If this image has already been loaded before then we can assume it's | ||
// already in the browser cache so it's cheap to just show directly. | ||
// If this image has already been loaded before then we can assume it's | ||
// already in the browser cache so it's cheap to just show directly. | ||
var seenBefore = inImageCache(props); | ||
@@ -192,5 +182,5 @@ | ||
IOSupported = true; | ||
} | ||
} // Always don't render image while server rendering | ||
// Always don't render image while server rendering | ||
if (typeof window === "undefined") { | ||
@@ -206,8 +196,9 @@ isVisible = false; | ||
}; | ||
_this.handleRef = _this.handleRef.bind(_this); | ||
_this.handleRef = _this.handleRef.bind((0, _assertThisInitialized2.default)(_this)); | ||
return _this; | ||
} | ||
Image.prototype.handleRef = function handleRef(ref) { | ||
var _proto = Image.prototype; | ||
_proto.handleRef = function handleRef(ref) { | ||
var _this2 = this; | ||
@@ -217,3 +208,6 @@ | ||
listenToIntersections(ref, function () { | ||
_this2.setState({ isVisible: true, imgLoaded: false }); | ||
_this2.setState({ | ||
isVisible: true, | ||
imgLoaded: false | ||
}); | ||
}); | ||
@@ -223,3 +217,3 @@ } | ||
Image.prototype.render = function render() { | ||
_proto.render = function render() { | ||
var _this3 = this; | ||
@@ -233,3 +227,3 @@ | ||
_convertProps$style = _convertProps.style, | ||
style = _convertProps$style === undefined ? {} : _convertProps$style, | ||
style = _convertProps$style === void 0 ? {} : _convertProps$style, | ||
sizes = _convertProps.sizes, | ||
@@ -239,3 +233,4 @@ resolutions = _convertProps.resolutions, | ||
var bgColor = void 0; | ||
var bgColor; | ||
if (typeof backgroundColor === "boolean") { | ||
@@ -248,84 +243,75 @@ bgColor = "lightgray"; | ||
if (sizes) { | ||
var image = sizes; | ||
var image = sizes; // Use webp by default if browser supports it | ||
// Use webp by default if browser supports it | ||
if (image.srcWebp && image.srcSetWebp && isWebpSupported()) { | ||
image.src = image.srcWebp; | ||
image.srcSet = image.srcSetWebp; | ||
} | ||
} // The outer div is necessary to reset the z-index to 0. | ||
// The outer div is necessary to reset the z-index to 0. | ||
return _react2.default.createElement( | ||
"div", | ||
{ | ||
className: (outerWrapperClassName ? outerWrapperClassName : "") + " gatsby-image-outer-wrapper", | ||
style: { | ||
zIndex: 0, | ||
// Let users set component to be absolutely positioned. | ||
position: style.position === "absolute" ? "initial" : "relative" | ||
} | ||
}, | ||
_react2.default.createElement( | ||
"div", | ||
{ | ||
className: (className ? className : "") + " gatsby-image-wrapper", | ||
style: (0, _extends3.default)({ | ||
position: "relative", | ||
overflow: "hidden", | ||
zIndex: 1 | ||
}, style), | ||
ref: this.handleRef | ||
}, | ||
_react2.default.createElement("div", { | ||
style: { | ||
width: "100%", | ||
paddingBottom: 100 / image.aspectRatio + "%" | ||
} | ||
}), | ||
image.base64 && _react2.default.createElement(Img, { | ||
return _react.default.createElement("div", { | ||
className: (outerWrapperClassName ? outerWrapperClassName : "") + " gatsby-image-outer-wrapper", | ||
style: { | ||
zIndex: 0, | ||
// Let users set component to be absolutely positioned. | ||
position: style.position === "absolute" ? "initial" : "relative" | ||
} | ||
}, _react.default.createElement("div", { | ||
className: (className ? className : "") + " gatsby-image-wrapper", | ||
style: (0, _extends2.default)({ | ||
position: "relative", | ||
overflow: "hidden", | ||
zIndex: 1 | ||
}, style), | ||
ref: this.handleRef | ||
}, _react.default.createElement("div", { | ||
style: { | ||
width: "100%", | ||
paddingBottom: 100 / image.aspectRatio + "%" | ||
} | ||
}), image.base64 && _react.default.createElement(Img, { | ||
alt: alt, | ||
title: title, | ||
src: image.base64, | ||
opacity: !this.state.imgLoaded ? 1 : 0, | ||
transitionDelay: "0.25s" | ||
}), image.tracedSVG && _react.default.createElement(Img, { | ||
alt: alt, | ||
title: title, | ||
src: image.tracedSVG, | ||
opacity: !this.state.imgLoaded ? 1 : 0, | ||
transitionDelay: "0.25s" | ||
}), bgColor && _react.default.createElement("div", { | ||
title: title, | ||
style: { | ||
backgroundColor: bgColor, | ||
position: "absolute", | ||
top: 0, | ||
bottom: 0, | ||
opacity: !this.state.imgLoaded ? 1 : 0, | ||
transitionDelay: "0.35s", | ||
right: 0, | ||
left: 0 | ||
} | ||
}), this.state.isVisible && _react.default.createElement(Img, { | ||
alt: alt, | ||
title: title, | ||
srcSet: image.srcSet, | ||
src: image.src, | ||
sizes: image.sizes, | ||
opacity: this.state.imgLoaded || this.props.fadeIn === false ? 1 : 0, | ||
onLoad: function onLoad() { | ||
_this3.state.IOSupported && _this3.setState({ | ||
imgLoaded: true | ||
}); | ||
_this3.props.onLoad && _this3.props.onLoad(); | ||
} | ||
}), _react.default.createElement("noscript", { | ||
dangerouslySetInnerHTML: { | ||
__html: noscriptImg((0, _extends2.default)({ | ||
alt: alt, | ||
title: title, | ||
src: image.base64, | ||
opacity: !this.state.imgLoaded ? 1 : 0, | ||
transitionDelay: "0.25s" | ||
}), | ||
image.tracedSVG && _react2.default.createElement(Img, { | ||
alt: alt, | ||
title: title, | ||
src: image.tracedSVG, | ||
opacity: !this.state.imgLoaded ? 1 : 0, | ||
transitionDelay: "0.25s" | ||
}), | ||
bgColor && _react2.default.createElement("div", { | ||
title: title, | ||
style: { | ||
backgroundColor: bgColor, | ||
position: "absolute", | ||
top: 0, | ||
bottom: 0, | ||
opacity: !this.state.imgLoaded ? 1 : 0, | ||
transitionDelay: "0.35s", | ||
right: 0, | ||
left: 0 | ||
} | ||
}), | ||
this.state.isVisible && _react2.default.createElement(Img, { | ||
alt: alt, | ||
title: title, | ||
srcSet: image.srcSet, | ||
src: image.src, | ||
sizes: image.sizes, | ||
opacity: this.state.imgLoaded || this.props.fadeIn === false ? 1 : 0, | ||
onLoad: function onLoad() { | ||
_this3.state.IOSupported && _this3.setState({ imgLoaded: true }); | ||
_this3.props.onLoad && _this3.props.onLoad(); | ||
} | ||
}), | ||
_react2.default.createElement("noscript", { | ||
dangerouslySetInnerHTML: { | ||
__html: noscriptImg((0, _extends3.default)({ alt: alt, title: title }, image)) | ||
} | ||
}) | ||
) | ||
); | ||
title: title | ||
}, image)) | ||
} | ||
}))); | ||
} | ||
@@ -335,3 +321,3 @@ | ||
var _image = resolutions; | ||
var divStyle = (0, _extends3.default)({ | ||
var divStyle = (0, _extends2.default)({ | ||
position: "relative", | ||
@@ -347,77 +333,68 @@ overflow: "hidden", | ||
delete divStyle.display; | ||
} | ||
} // Use webp by default if browser supports it | ||
// Use webp by default if browser supports it | ||
if (_image.srcWebp && _image.srcSetWebp && isWebpSupported()) { | ||
_image.src = _image.srcWebp; | ||
_image.srcSet = _image.srcSetWebp; | ||
} | ||
} // The outer div is necessary to reset the z-index to 0. | ||
// The outer div is necessary to reset the z-index to 0. | ||
return _react2.default.createElement( | ||
"div", | ||
{ | ||
className: (outerWrapperClassName ? outerWrapperClassName : "") + " gatsby-image-outer-wrapper", | ||
style: { | ||
zIndex: 0, | ||
// Let users set component to be absolutely positioned. | ||
position: style.position === "absolute" ? "initial" : "relative" | ||
} | ||
}, | ||
_react2.default.createElement( | ||
"div", | ||
{ | ||
className: (className ? className : "") + " gatsby-image-wrapper", | ||
style: divStyle, | ||
ref: this.handleRef | ||
}, | ||
_image.base64 && _react2.default.createElement(Img, { | ||
return _react.default.createElement("div", { | ||
className: (outerWrapperClassName ? outerWrapperClassName : "") + " gatsby-image-outer-wrapper", | ||
style: { | ||
zIndex: 0, | ||
// Let users set component to be absolutely positioned. | ||
position: style.position === "absolute" ? "initial" : "relative" | ||
} | ||
}, _react.default.createElement("div", { | ||
className: (className ? className : "") + " gatsby-image-wrapper", | ||
style: divStyle, | ||
ref: this.handleRef | ||
}, _image.base64 && _react.default.createElement(Img, { | ||
alt: alt, | ||
title: title, | ||
src: _image.base64, | ||
opacity: !this.state.imgLoaded ? 1 : 0, | ||
transitionDelay: "0.35s" | ||
}), _image.tracedSVG && _react.default.createElement(Img, { | ||
alt: alt, | ||
title: title, | ||
src: _image.tracedSVG, | ||
opacity: !this.state.imgLoaded ? 1 : 0, | ||
transitionDelay: "0.25s" | ||
}), bgColor && _react.default.createElement("div", { | ||
title: title, | ||
style: { | ||
backgroundColor: bgColor, | ||
width: _image.width, | ||
opacity: !this.state.imgLoaded ? 1 : 0, | ||
transitionDelay: "0.25s", | ||
height: _image.height | ||
} | ||
}), this.state.isVisible && _react.default.createElement(Img, { | ||
alt: alt, | ||
title: title, | ||
width: _image.width, | ||
height: _image.height, | ||
srcSet: _image.srcSet, | ||
src: _image.src, | ||
opacity: this.state.imgLoaded || this.props.fadeIn === false ? 1 : 0, | ||
onLoad: function onLoad() { | ||
_this3.setState({ | ||
imgLoaded: true | ||
}); | ||
_this3.props.onLoad && _this3.props.onLoad(); | ||
} | ||
}), _react.default.createElement("noscript", { | ||
dangerouslySetInnerHTML: { | ||
__html: noscriptImg((0, _extends2.default)({ | ||
alt: alt, | ||
title: title, | ||
src: _image.base64, | ||
opacity: !this.state.imgLoaded ? 1 : 0, | ||
transitionDelay: "0.35s" | ||
}), | ||
_image.tracedSVG && _react2.default.createElement(Img, { | ||
alt: alt, | ||
title: title, | ||
src: _image.tracedSVG, | ||
opacity: !this.state.imgLoaded ? 1 : 0, | ||
transitionDelay: "0.25s" | ||
}), | ||
bgColor && _react2.default.createElement("div", { | ||
title: title, | ||
style: { | ||
backgroundColor: bgColor, | ||
width: _image.width, | ||
opacity: !this.state.imgLoaded ? 1 : 0, | ||
transitionDelay: "0.25s", | ||
height: _image.height | ||
} | ||
}), | ||
this.state.isVisible && _react2.default.createElement(Img, { | ||
alt: alt, | ||
title: title, | ||
width: _image.width, | ||
height: _image.height, | ||
srcSet: _image.srcSet, | ||
src: _image.src, | ||
opacity: this.state.imgLoaded || this.props.fadeIn === false ? 1 : 0, | ||
onLoad: function onLoad() { | ||
_this3.setState({ imgLoaded: true }); | ||
_this3.props.onLoad && _this3.props.onLoad(); | ||
} | ||
}), | ||
_react2.default.createElement("noscript", { | ||
dangerouslySetInnerHTML: { | ||
__html: noscriptImg((0, _extends3.default)({ | ||
alt: alt, | ||
title: title, | ||
width: _image.width, | ||
height: _image.height | ||
}, _image)) | ||
} | ||
}) | ||
) | ||
); | ||
height: _image.height | ||
}, _image)) | ||
} | ||
}))); | ||
} | ||
@@ -429,3 +406,3 @@ | ||
return Image; | ||
}(_react2.default.Component); | ||
}(_react.default.Component); | ||
@@ -436,19 +413,19 @@ Image.defaultProps = { | ||
}; | ||
Image.propTypes = { | ||
responsiveResolution: _propTypes2.default.object, | ||
responsiveSizes: _propTypes2.default.object, | ||
resolutions: _propTypes2.default.object, | ||
sizes: _propTypes2.default.object, | ||
fadeIn: _propTypes2.default.bool, | ||
title: _propTypes2.default.string, | ||
alt: _propTypes2.default.string, | ||
className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]), // Support Glamor's css prop. | ||
outerWrapperClassName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]), | ||
style: _propTypes2.default.object, | ||
position: _propTypes2.default.string, | ||
backgroundColor: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.bool]), | ||
onLoad: _propTypes2.default.func | ||
responsiveResolution: _propTypes.default.object, | ||
responsiveSizes: _propTypes.default.object, | ||
resolutions: _propTypes.default.object, | ||
sizes: _propTypes.default.object, | ||
fadeIn: _propTypes.default.bool, | ||
title: _propTypes.default.string, | ||
alt: _propTypes.default.string, | ||
className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]), | ||
// Support Glamor's css prop. | ||
outerWrapperClassName: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]), | ||
style: _propTypes.default.object, | ||
position: _propTypes.default.string, | ||
backgroundColor: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]), | ||
onLoad: _propTypes.default.func | ||
}; | ||
exports.default = Image; | ||
var _default = Image; | ||
exports.default = _default; |
{ | ||
"name": "gatsby-image", | ||
"version": "1.1.0-alpha.3f307d61", | ||
"version": "1.1.0-alpha.53bbd4cd", | ||
"description": "Lazy-loading React image component with optional support for the blur-up effect.", | ||
"main": "index.js", | ||
"scripts": { | ||
"build": "babel src --out-dir . --ignore __tests__", | ||
"watch": "babel -w src --out-dir . --ignore __tests__", | ||
"build": "babel src --out-dir . --ignore **/__tests__/**", | ||
"watch": "babel -w src --out-dir . --ignore **/__tests__/**", | ||
"prepublish": "cross-env NODE_ENV=production npm run build" | ||
@@ -19,9 +19,10 @@ }, | ||
"dependencies": { | ||
"babel-runtime": "^6.26.0", | ||
"@babel/runtime": "^7.0.0-beta.38", | ||
"prop-types": "^15.6.0" | ||
}, | ||
"devDependencies": { | ||
"babel-cli": "^6.26.0", | ||
"@babel/cli": "^7.0.0-beta.38", | ||
"@babel/core": "^7.0.0-beta.38", | ||
"cross-env": "^5.0.5" | ||
} | ||
} |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
24923
3
352
+ Added@babel/runtime@7.25.6(transitive)
+ Addedregenerator-runtime@0.14.1(transitive)
- Removedbabel-runtime@^6.26.0
- Removedbabel-runtime@6.26.0(transitive)
- Removedcore-js@2.6.12(transitive)
- Removedregenerator-runtime@0.11.1(transitive)