loadable-image - npm Package Compare versions

Comparing version 3.2.1 to 3.2.2

dist/esnext.esm.js

@@ -1,1 +0,1 @@
-import{jsx as e,Fragment as r,jsxs as t}from"react/jsx-runtime";import{InView as o}from"react-intersection-observer";import{forwardRef as n,useState as i,cloneElement as s}from"react";import{Fade as a}from"transitions-kit";function c(e,r){var t={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&r.indexOf(o)<0&&(t[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)r.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(t[o[n]]=e[o[n]])}return t}"function"==typeof SuppressedError&&SuppressedError;const l=n(((r,t)=>{var{style:o}=r,n=c(r,["style"]);return e("div",Object.assign({ref:t},n,{className:`AsyncImage-root ${n.className}`.trim(),style:Object.assign(Object.assign({},o),{display:"flex",overflow:"hidden",backgroundRepeat:"no-repeat",boxSizing:"border-box",backgroundSize:"cover",position:"relative"})}))})),d={top:0,left:0,width:"100%",height:"100%",position:"absolute",boxSizing:"border-box"},u=e("div",{className:"AsyncImage-loader",style:{backgroundColor:"#eee"}}),b=e("div",{className:"Asyncimage-error",style:{backgroundColor:"#eee"},children:e("svg",{fill:"#00000061",viewBox:"0 0 24 24",style:{position:"absolute",inset:0,width:"50%",height:"50%",margin:"auto"},children:e("path",{d:"M21 5c0-1.1-.9-2-2-2H5.83L21 18.17V5zM2.81 2.81 1.39 4.22 3 5.83V19c0 1.1.9 2 2 2h13.17l1.61 1.61 1.41-1.41L2.81 2.81zM6 17l3-4 2.25 3 .82-1.1 2.1 2.1H6z"})})});var p;!function(e){e[e.LOADING=0]="LOADING",e[e.LOADED=1]="LOADED",e[e.FAILED=2]="FAILED"}(p||(p={}));const g=({sources:t=[]})=>t.length?e(r,{children:t.map(((r,t)=>e("source",Object.assign({},r),r.srcSet)))}):null,m=o=>{var{error:n,loader:l,onLoad:u,onError:b,objectFit:m="cover",Transition:O=a,sources:y=[],inView:j}=o,f=c(o,["error","loader","onLoad","onError","objectFit","Transition","sources","inView"]);const[h,v]=i(p.LOADING);return t(r,{children:[e(a,{appear:!1,in:h===p.LOADING,timeout:1e3,unmountOnExit:!0,children:s(l,{style:Object.assign(Object.assign({},l.props.style),d)})}),j&&e(O,{in:h===p.LOADED,timeout:1e3,children:t("picture",{style:d,children:[e(g,{sources:y}),e("img",Object.assign({},f,{className:"AsyncImage-image",style:Object.assign({objectFit:m},d),onLoad:e=>{v(p.LOADED),null==u||u(e)},onError:e=>{v(p.FAILED),null==b||b(e)}}))]})}),e(O,{in:h===p.FAILED,timeout:1e3,mountOnEnter:!0,unmountOnExit:!0,children:s(n,{style:Object.assign(Object.assign({},n.props.style),d)})})]})},O=r=>{var{loader:t=u,error:n=b,rootMargin:i="600px 0px",objectFit:s="cover",style:a={},className:d=""}=r,p=c(r,["loader","error","rootMargin","objectFit","style","className"]);return e(o,{rootMargin:i,triggerOnce:!0,children:({ref:r,inView:o})=>{var i;return e(l,{ref:r,className:d,style:a,children:e(m,Object.assign({error:n,loader:t,objectFit:null!==(i=a.objectFit)&&void 0!==i?i:s,inView:o},p))})}})};export{O as AsyncImage};
+import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{InView as o}from"react-intersection-observer";import{forwardRef as i,useState as n,cloneElement as s}from"react";import{Fade as a}from"transitions-kit";function c(e,r){var t={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&r.indexOf(o)<0&&(t[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(e);i<o.length;i++)r.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(e,o[i])&&(t[o[i]]=e[o[i]])}return t}"function"==typeof SuppressedError&&SuppressedError;const l=i(((r,t)=>{var{style:o}=r,i=c(r,["style"]);return e("div",Object.assign({ref:t},i,{className:`AsyncImage-root ${i.className}`.trim(),style:Object.assign(Object.assign({},o),{display:"flex",overflow:"hidden",backgroundRepeat:"no-repeat",boxSizing:"border-box",backgroundSize:"cover",position:"relative"})}))})),b={top:0,left:0,width:"100%",height:"100%",position:"absolute",boxSizing:"border-box"},d=e("div",{className:"AsyncImage-loader",style:{backgroundColor:"#eee"}}),p=e("div",{className:"Asyncimage-error",style:{backgroundColor:"#eee"},children:e("svg",{fill:"#00000061",viewBox:"0 0 24 24",style:{position:"absolute",inset:0,width:"50%",height:"50%",margin:"auto"},children:e("path",{d:"M21 5c0-1.1-.9-2-2-2H5.83L21 18.17V5zM2.81 2.81 1.39 4.22 3 5.83V19c0 1.1.9 2 2 2h13.17l1.61 1.61 1.41-1.41L2.81 2.81zM6 17l3-4 2.25 3 .82-1.1 2.1 2.1H6z"})})});var u;!function(e){e[e.LOADING=0]="LOADING",e[e.LOADED=1]="LOADED",e[e.FAILED=2]="FAILED"}(u||(u={}));const g=o=>{var{error:i,loader:l,onLoad:d,onError:p,objectFit:g="cover",Transition:m=a,sources:O=[],inView:y}=o,j=c(o,["error","loader","onLoad","onError","objectFit","Transition","sources","inView"]);const[f,h]=n(u.LOADING);return r(t,{children:[e(a,{appear:!1,in:f===u.LOADING,timeout:1e3,unmountOnExit:!0,children:s(l,{style:Object.assign(Object.assign({},l.props.style),b)})}),y&&e(m,{in:f===u.LOADED,timeout:1e3,children:r("picture",{children:[O.map((r=>e("source",Object.assign({},r),r.srcSet))),e("img",Object.assign({},j,{className:"AsyncImage-image",style:Object.assign({objectFit:g},b),onLoad:e=>{h(u.LOADED),null==d||d(e)},onError:e=>{h(u.FAILED),null==p||p(e)}}))]})}),e(m,{in:f===u.FAILED,timeout:1e3,mountOnEnter:!0,unmountOnExit:!0,children:s(i,{style:Object.assign(Object.assign({},i.props.style),b)})})]})},m=r=>{var{loader:t=d,error:i=p,rootMargin:n="600px 0px",objectFit:s="cover",style:a={},className:b=""}=r,u=c(r,["loader","error","rootMargin","objectFit","style","className"]);return e(o,{rootMargin:n,triggerOnce:!0,children:({ref:r,inView:o})=>{var n;return e(l,{ref:r,className:b,style:a,children:e(g,Object.assign({error:i,loader:t,objectFit:null!==(n=a.objectFit)&&void 0!==n?n:s,inView:o},u))})}})};export{m as AsyncImage};

dist/index.cjs.js

@@ -1,1 +0,1 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react-intersection-observer"),t=require("react"),s=require("transitions-kit");function o(e,r){var t={};for(var s in e)Object.prototype.hasOwnProperty.call(e,s)&&r.indexOf(s)<0&&(t[s]=e[s]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(s=Object.getOwnPropertySymbols(e);o<s.length;o++)r.indexOf(s[o])<0&&Object.prototype.propertyIsEnumerable.call(e,s[o])&&(t[s[o]]=e[s[o]])}return t}"function"==typeof SuppressedError&&SuppressedError;const n=t.forwardRef(((r,t)=>{var{style:s}=r,n=o(r,["style"]);return e.jsx("div",Object.assign({ref:t},n,{className:`AsyncImage-root ${n.className}`.trim(),style:Object.assign(Object.assign({},s),{display:"flex",overflow:"hidden",backgroundRepeat:"no-repeat",boxSizing:"border-box",backgroundSize:"cover",position:"relative"})}))})),i={top:0,left:0,width:"100%",height:"100%",position:"absolute",boxSizing:"border-box"},a=e.jsx("div",{className:"AsyncImage-loader",style:{backgroundColor:"#eee"}}),c=e.jsx("div",{className:"Asyncimage-error",style:{backgroundColor:"#eee"},children:e.jsx("svg",{fill:"#00000061",viewBox:"0 0 24 24",style:{position:"absolute",inset:0,width:"50%",height:"50%",margin:"auto"},children:e.jsx("path",{d:"M21 5c0-1.1-.9-2-2-2H5.83L21 18.17V5zM2.81 2.81 1.39 4.22 3 5.83V19c0 1.1.9 2 2 2h13.17l1.61 1.61 1.41-1.41L2.81 2.81zM6 17l3-4 2.25 3 .82-1.1 2.1 2.1H6z"})})});var l;!function(e){e[e.LOADING=0]="LOADING",e[e.LOADED=1]="LOADED",e[e.FAILED=2]="FAILED"}(l||(l={}));const u=({sources:r=[]})=>r.length?e.jsx(e.Fragment,{children:r.map(((r,t)=>e.jsx("source",Object.assign({},r),r.srcSet)))}):null,d=r=>{var{error:n,loader:a,onLoad:c,onError:d,objectFit:j="cover",Transition:g=s.Fade,sources:b=[],inView:p}=r,m=o(r,["error","loader","onLoad","onError","objectFit","Transition","sources","inView"]);const[O,x]=t.useState(l.LOADING);return e.jsxs(e.Fragment,{children:[e.jsx(s.Fade,{appear:!1,in:O===l.LOADING,timeout:1e3,unmountOnExit:!0,children:t.cloneElement(a,{style:Object.assign(Object.assign({},a.props.style),i)})}),p&&e.jsx(g,{in:O===l.LOADED,timeout:1e3,children:e.jsxs("picture",{style:i,children:[e.jsx(u,{sources:b}),e.jsx("img",Object.assign({},m,{className:"AsyncImage-image",style:Object.assign({objectFit:j},i),onLoad:e=>{x(l.LOADED),null==c||c(e)},onError:e=>{x(l.FAILED),null==d||d(e)}}))]})}),e.jsx(g,{in:O===l.FAILED,timeout:1e3,mountOnEnter:!0,unmountOnExit:!0,children:t.cloneElement(n,{style:Object.assign(Object.assign({},n.props.style),i)})})]})};exports.AsyncImage=t=>{var{loader:s=a,error:i=c,rootMargin:l="600px 0px",objectFit:u="cover",style:j={},className:g=""}=t,b=o(t,["loader","error","rootMargin","objectFit","style","className"]);return e.jsx(r.InView,{rootMargin:l,triggerOnce:!0,children:({ref:r,inView:t})=>{var o;return e.jsx(n,{ref:r,className:g,style:j,children:e.jsx(d,Object.assign({error:i,loader:s,objectFit:null!==(o=j.objectFit)&&void 0!==o?o:u,inView:t},b))})}})};
+"use strict";var e=require("react/jsx-runtime"),r=require("react-intersection-observer"),t=require("react"),o=require("transitions-kit");function s(e,r){var t={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&r.indexOf(o)<0&&(t[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(o=Object.getOwnPropertySymbols(e);s<o.length;s++)r.indexOf(o[s])<0&&Object.prototype.propertyIsEnumerable.call(e,o[s])&&(t[o[s]]=e[o[s]])}return t}"function"==typeof SuppressedError&&SuppressedError;const n=t.forwardRef(((r,t)=>{var{style:o}=r,n=s(r,["style"]);return e.jsx("div",Object.assign({ref:t},n,{className:`AsyncImage-root ${n.className}`.trim(),style:Object.assign(Object.assign({},o),{display:"flex",overflow:"hidden",backgroundRepeat:"no-repeat",boxSizing:"border-box",backgroundSize:"cover",position:"relative"})}))})),i={top:0,left:0,width:"100%",height:"100%",position:"absolute",boxSizing:"border-box"},a=e.jsx("div",{className:"AsyncImage-loader",style:{backgroundColor:"#eee"}}),c=e.jsx("div",{className:"Asyncimage-error",style:{backgroundColor:"#eee"},children:e.jsx("svg",{fill:"#00000061",viewBox:"0 0 24 24",style:{position:"absolute",inset:0,width:"50%",height:"50%",margin:"auto"},children:e.jsx("path",{d:"M21 5c0-1.1-.9-2-2-2H5.83L21 18.17V5zM2.81 2.81 1.39 4.22 3 5.83V19c0 1.1.9 2 2 2h13.17l1.61 1.61 1.41-1.41L2.81 2.81zM6 17l3-4 2.25 3 .82-1.1 2.1 2.1H6z"})})});var l;!function(e){e[e.LOADING=0]="LOADING",e[e.LOADED=1]="LOADED",e[e.FAILED=2]="FAILED"}(l||(l={}));const u=r=>{var{error:n,loader:a,onLoad:c,onError:u,objectFit:d="cover",Transition:b=o.Fade,sources:j=[],inView:g}=r,p=s(r,["error","loader","onLoad","onError","objectFit","Transition","sources","inView"]);const[O,m]=t.useState(l.LOADING);return e.jsxs(e.Fragment,{children:[e.jsx(o.Fade,{appear:!1,in:O===l.LOADING,timeout:1e3,unmountOnExit:!0,children:t.cloneElement(a,{style:Object.assign(Object.assign({},a.props.style),i)})}),g&&e.jsx(b,{in:O===l.LOADED,timeout:1e3,children:e.jsxs("picture",{children:[j.map((r=>e.jsx("source",Object.assign({},r),r.srcSet))),e.jsx("img",Object.assign({},p,{className:"AsyncImage-image",style:Object.assign({objectFit:d},i),onLoad:e=>{m(l.LOADED),null==c||c(e)},onError:e=>{m(l.FAILED),null==u||u(e)}}))]})}),e.jsx(b,{in:O===l.FAILED,timeout:1e3,mountOnEnter:!0,unmountOnExit:!0,children:t.cloneElement(n,{style:Object.assign(Object.assign({},n.props.style),i)})})]})};exports.AsyncImage=t=>{var{loader:o=a,error:i=c,rootMargin:l="600px 0px",objectFit:d="cover",style:b={},className:j=""}=t,g=s(t,["loader","error","rootMargin","objectFit","style","className"]);return e.jsx(r.InView,{rootMargin:l,triggerOnce:!0,children:({ref:r,inView:t})=>{var s;return e.jsx(n,{ref:r,className:j,style:b,children:e.jsx(u,Object.assign({error:i,loader:o,objectFit:null!==(s=b.objectFit)&&void 0!==s?s:d,inView:t},g))})}})};

dist/index.esm.js

@@ -1,1 +0,1 @@
-import{jsx as e,Fragment as r,jsxs as t}from"react/jsx-runtime";import{InView as o}from"react-intersection-observer";import{forwardRef as n,useState as i,cloneElement as s}from"react";import{Fade as a}from"transitions-kit";function c(e,r){var t={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&r.indexOf(o)<0&&(t[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)r.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(t[o[n]]=e[o[n]])}return t}"function"==typeof SuppressedError&&SuppressedError;const l=n(((r,t)=>{var{style:o}=r,n=c(r,["style"]);return e("div",Object.assign({ref:t},n,{className:`AsyncImage-root ${n.className}`.trim(),style:Object.assign(Object.assign({},o),{display:"flex",overflow:"hidden",backgroundRepeat:"no-repeat",boxSizing:"border-box",backgroundSize:"cover",position:"relative"})}))})),d={top:0,left:0,width:"100%",height:"100%",position:"absolute",boxSizing:"border-box"},u=e("div",{className:"AsyncImage-loader",style:{backgroundColor:"#eee"}}),b=e("div",{className:"Asyncimage-error",style:{backgroundColor:"#eee"},children:e("svg",{fill:"#00000061",viewBox:"0 0 24 24",style:{position:"absolute",inset:0,width:"50%",height:"50%",margin:"auto"},children:e("path",{d:"M21 5c0-1.1-.9-2-2-2H5.83L21 18.17V5zM2.81 2.81 1.39 4.22 3 5.83V19c0 1.1.9 2 2 2h13.17l1.61 1.61 1.41-1.41L2.81 2.81zM6 17l3-4 2.25 3 .82-1.1 2.1 2.1H6z"})})});var p;!function(e){e[e.LOADING=0]="LOADING",e[e.LOADED=1]="LOADED",e[e.FAILED=2]="FAILED"}(p||(p={}));const g=({sources:t=[]})=>t.length?e(r,{children:t.map(((r,t)=>e("source",Object.assign({},r),r.srcSet)))}):null,m=o=>{var{error:n,loader:l,onLoad:u,onError:b,objectFit:m="cover",Transition:O=a,sources:y=[],inView:j}=o,f=c(o,["error","loader","onLoad","onError","objectFit","Transition","sources","inView"]);const[h,v]=i(p.LOADING);return t(r,{children:[e(a,{appear:!1,in:h===p.LOADING,timeout:1e3,unmountOnExit:!0,children:s(l,{style:Object.assign(Object.assign({},l.props.style),d)})}),j&&e(O,{in:h===p.LOADED,timeout:1e3,children:t("picture",{style:d,children:[e(g,{sources:y}),e("img",Object.assign({},f,{className:"AsyncImage-image",style:Object.assign({objectFit:m},d),onLoad:e=>{v(p.LOADED),null==u||u(e)},onError:e=>{v(p.FAILED),null==b||b(e)}}))]})}),e(O,{in:h===p.FAILED,timeout:1e3,mountOnEnter:!0,unmountOnExit:!0,children:s(n,{style:Object.assign(Object.assign({},n.props.style),d)})})]})},O=r=>{var{loader:t=u,error:n=b,rootMargin:i="600px 0px",objectFit:s="cover",style:a={},className:d=""}=r,p=c(r,["loader","error","rootMargin","objectFit","style","className"]);return e(o,{rootMargin:i,triggerOnce:!0,children:({ref:r,inView:o})=>{var i;return e(l,{ref:r,className:d,style:a,children:e(m,Object.assign({error:n,loader:t,objectFit:null!==(i=a.objectFit)&&void 0!==i?i:s,inView:o},p))})}})};export{O as AsyncImage};
+import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{InView as o}from"react-intersection-observer";import{forwardRef as i,useState as n,cloneElement as s}from"react";import{Fade as a}from"transitions-kit";function c(e,r){var t={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&r.indexOf(o)<0&&(t[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(e);i<o.length;i++)r.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(e,o[i])&&(t[o[i]]=e[o[i]])}return t}"function"==typeof SuppressedError&&SuppressedError;const l=i(((r,t)=>{var{style:o}=r,i=c(r,["style"]);return e("div",Object.assign({ref:t},i,{className:`AsyncImage-root ${i.className}`.trim(),style:Object.assign(Object.assign({},o),{display:"flex",overflow:"hidden",backgroundRepeat:"no-repeat",boxSizing:"border-box",backgroundSize:"cover",position:"relative"})}))})),b={top:0,left:0,width:"100%",height:"100%",position:"absolute",boxSizing:"border-box"},d=e("div",{className:"AsyncImage-loader",style:{backgroundColor:"#eee"}}),p=e("div",{className:"Asyncimage-error",style:{backgroundColor:"#eee"},children:e("svg",{fill:"#00000061",viewBox:"0 0 24 24",style:{position:"absolute",inset:0,width:"50%",height:"50%",margin:"auto"},children:e("path",{d:"M21 5c0-1.1-.9-2-2-2H5.83L21 18.17V5zM2.81 2.81 1.39 4.22 3 5.83V19c0 1.1.9 2 2 2h13.17l1.61 1.61 1.41-1.41L2.81 2.81zM6 17l3-4 2.25 3 .82-1.1 2.1 2.1H6z"})})});var u;!function(e){e[e.LOADING=0]="LOADING",e[e.LOADED=1]="LOADED",e[e.FAILED=2]="FAILED"}(u||(u={}));const g=o=>{var{error:i,loader:l,onLoad:d,onError:p,objectFit:g="cover",Transition:m=a,sources:O=[],inView:y}=o,j=c(o,["error","loader","onLoad","onError","objectFit","Transition","sources","inView"]);const[f,h]=n(u.LOADING);return r(t,{children:[e(a,{appear:!1,in:f===u.LOADING,timeout:1e3,unmountOnExit:!0,children:s(l,{style:Object.assign(Object.assign({},l.props.style),b)})}),y&&e(m,{in:f===u.LOADED,timeout:1e3,children:r("picture",{children:[O.map((r=>e("source",Object.assign({},r),r.srcSet))),e("img",Object.assign({},j,{className:"AsyncImage-image",style:Object.assign({objectFit:g},b),onLoad:e=>{h(u.LOADED),null==d||d(e)},onError:e=>{h(u.FAILED),null==p||p(e)}}))]})}),e(m,{in:f===u.FAILED,timeout:1e3,mountOnEnter:!0,unmountOnExit:!0,children:s(i,{style:Object.assign(Object.assign({},i.props.style),b)})})]})},m=r=>{var{loader:t=d,error:i=p,rootMargin:n="600px 0px",objectFit:s="cover",style:a={},className:b=""}=r,u=c(r,["loader","error","rootMargin","objectFit","style","className"]);return e(o,{rootMargin:n,triggerOnce:!0,children:({ref:r,inView:o})=>{var n;return e(l,{ref:r,className:b,style:a,children:e(g,Object.assign({error:i,loader:t,objectFit:null!==(n=a.objectFit)&&void 0!==n?n:s,inView:o},u))})}})};export{m as AsyncImage};

package.json

 {
 	"name": "loadable-image",
-	"version": "3.2.1",
+	"version": "3.2.2",
 	"repository": {
@@ -5,0 +5,0 @@ "type": "git",

No alert changes

Worsened metrics

Total package byte prevSize

18735

-2.33%

Number of package files

13

-7.14%

Lines of code

87

-9.37%

No dependency changes