@s-ui/react-atom-image - npm Package Compare versions

Comparing version 2.11.0 to 2.12.0

lib/index.js

 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["placeholder", "skeleton", "bgStyles", "spinner", "errorIcon", "errorText", "onError", "onLoad", "sources", "alt"];
-import { cloneElement, useState, useEffect, useRef, useCallback } from 'react';
+var _excluded = ["alt", "bgStyles", "decoding", "errorIcon", "errorText", "fetchpriority", "loading", "onError", "onLoad", "placeholder", "skeleton", "sources", "spinner"];
+import { cloneElement, useCallback, useEffect, useRef, useState } from 'react';
+import cx from 'classnames';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import ErrorImage from './ErrorImage.js';
+import { BASE_CLASS, BASE_CLASS_FIGURE, CLASS_ERROR, CLASS_IMAGE, CLASS_PLACEHOLDER, CLASS_SKELETON, CLASS_SPINNER, DECODING, FETCHPRIORITY, LOADING } from './settings.js';
 import { htmlImgProps } from './types.js';
-import { BASE_CLASS, BASE_CLASS_FIGURE, CLASS_PLACEHOLDER, CLASS_SKELETON, CLASS_IMAGE, CLASS_SPINNER, CLASS_ERROR } from './settings.js';
-import ErrorImage from './ErrorImage.js';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -14,13 +14,21 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var AtomImage = function AtomImage(_ref) {
-  var placeholder = _ref.placeholder,
-      skeleton = _ref.skeleton,
+  var alt = _ref.alt,
       bgStyles = _ref.bgStyles,
-      Spinner = _ref.spinner,
+      _ref$decoding = _ref.decoding,
+      decoding = _ref$decoding === void 0 ? DECODING.AUTO : _ref$decoding,
       errorIcon = _ref.errorIcon,
       errorText = _ref.errorText,
-      onError = _ref.onError,
-      onLoad = _ref.onLoad,
+      _ref$fetchpriority = _ref.fetchpriority,
+      fetchpriority = _ref$fetchpriority === void 0 ? FETCHPRIORITY.AUTO : _ref$fetchpriority,
+      _ref$loading = _ref.loading,
+      loading = _ref$loading === void 0 ? LOADING.EAGER : _ref$loading,
+      _ref$onError = _ref.onError,
+      onError = _ref$onError === void 0 ? function () {} : _ref$onError,
+      _ref$onLoad = _ref.onLoad,
+      onLoad = _ref$onLoad === void 0 ? function () {} : _ref$onLoad,
+      placeholder = _ref.placeholder,
+      skeleton = _ref.skeleton,
       _ref$sources = _ref.sources,
       sources = _ref$sources === void 0 ? [] : _ref$sources,
-      alt = _ref.alt,
+      Spinner = _ref.spinner,
       imgProps = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -31,4 +39,4 @@
   var _useState = useState(true),
-      loading = _useState[0],
-      setLoading = _useState[1];
+      isLoading = _useState[0],
+      setIsLoading = _useState[1];
 
@@ -41,5 +49,5 @@ var _useState2 = useState(false),
   useEffect(function () {
-    setLoading(true);
+    setIsLoading(true);
     setError(false);
-  }, [src, setLoading, setError]);
+  }, [src, setIsLoading, setError]);
   var handleLoad = useCallback(function () {
@@ -51,14 +59,14 @@ var _imageRef$current;
     if (loadCompleted === true) {
-      setLoading(!loadCompleted);
+      setIsLoading(!loadCompleted);
       onLoad && onLoad();
     }
-  }, [onLoad, setLoading]);
+  }, [onLoad, setIsLoading]);
   useEffect(function () {
     handleLoad();
   }, [handleLoad, imageRef]);
-  var classNames = cx(BASE_CLASS, "is-" + (loading ? 'loading' : 'loaded'), error && "is-error");
+  var classNames = cx(BASE_CLASS, "is-" + (isLoading ? 'isLoading' : 'loaded'), error && "is-error");
   var classNamesFigure = cx(BASE_CLASS_FIGURE, placeholder && CLASS_PLACEHOLDER, skeleton && CLASS_SKELETON);
 
   var handleError = function handleError() {
-    setLoading(false);
+    setIsLoading(false);
     setError(true);
@@ -83,10 +91,13 @@ onError && onError();
         }), /*#__PURE__*/_jsx("img", _extends({
+          alt: alt,
           className: CLASS_IMAGE,
+          decoding: decoding,
+          fetchpriority: fetchpriority,
+          loading: loading,
+          onError: handleError,
           onLoad: handleLoad,
-          onError: handleError,
-          ref: imageRef,
-          alt: alt
+          ref: imageRef
         }, imgProps))]
       })
-    }), !error && loading && SpinnerExtended, error && /*#__PURE__*/_jsx(ErrorImage, {
+    }), !error && isLoading && SpinnerExtended, error && /*#__PURE__*/_jsx(ErrorImage, {
       className: CLASS_ERROR,
@@ -100,2 +111,3 @@ icon: errorIcon,
 AtomImage.displayName = 'AtomImage';
-export default AtomImage;
+export default AtomImage;
+export { DECODING, FETCHPRIORITY, LOADING };

lib/settings.js

@@ -7,2 +7,16 @@ export var BASE_CLASS = 'sui-AtomImage';
 export var CLASS_SPINNER = BASE_CLASS + "-spinner";
-export var CLASS_ERROR = BASE_CLASS + "-error";
+export var CLASS_ERROR = BASE_CLASS + "-error";
+export var DECODING = {
+  AUTO: 'auto',
+  ASYNC: 'async',
+  SYNC: 'sync'
+};
+export var FETCHPRIORITY = {
+  AUTO: 'auto',
+  HIGH: 'high',
+  LOW: 'low'
+};
+export var LOADING = {
+  EAGER: 'eager',
+  LAZY: 'lazy'
+};

package.json

 {
   "name": "@s-ui/react-atom-image",
-  "version": "2.11.0",
+  "version": "2.12.0",
   "description": "",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -83,3 +83,41 @@ # AtomImage
 
+### With Web Performance attributes
 
+Attributes to optimize image that is a [LCP](https://web.dev/lcp) element,
+usually the first image in the viewport
+
+```js
+
+import AtomImage, {DECODING, FETCHPRIORITY, LOADING} from '@s-ui/react-atom-image'
+
+<AtomImage
+  src='https://via.placeholder.com/50'
+  alt='Optimized image for LCP'
+  decoding={DECODING.sync}
+  fetchpriority={FETCHPRIORITY.high}
+  loading={LOADING.eager}
+  sources={[
+    {srcset: 'https://via.placeholder.com/150', media: '(min-width: 480px)'}
+  ]}
+```
+
+Attributes to optimize image that is not a [LCP](https://web.dev/lcp) element,
+usually the the images out of the viewport
+
+```js
+
+import AtomImage, {DECODING, FETCHPRIORITY, LOADING} from '@s-ui/react-atom-image'
+
+<AtomImage
+  src='https://via.placeholder.com/50'
+  alt='Optimized image to lazy load and low the priority'
+  decoding={DECODING.async}
+  fetchpriority={FETCHPRIORITY.low}
+  loading={LOADING.lazy}
+  sources={[
+    {srcset: 'https://via.placeholder.com/150', media: '(min-width: 480px)'}
+  ]}
+```
+
+
 > **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/atom/image/demo).**

No alert changes

Improved metrics

Total package byte prevSize

14644

increased by15.73%

Lines of code

146

increased by21.67%

Number of lines in readme file

123

increased by44.71%

No dependency changes