mui-image-alter 3.1.0 → 3.2.0
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/README.md +21 -18
- package/dist/index.cjs +1 -1
- package/dist/index.js +80 -70
- package/package.json +33 -27
package/README.md
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
</p>
|
|
7
7
|
<div align="center">
|
|
8
8
|
|
|
9
|
-
 [](https://www.npmjs.com/package/mui-image-alter)    [](https://www.buymeacoffee.com/mddanish00)
|
|
9
|
+
 [](https://www.npmjs.com/package/mui-image-alter)    [](https://www.buymeacoffee.com/mddanish00) [](https://ko-fi.com/mddanish00)
|
|
10
10
|
|
|
11
11
|
</div>
|
|
12
12
|
<p align="center">
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
<strong><a href="https://mddanish00.github.io/mui-image-alter/">Demo Playground ↗️</a></strong> <br />
|
|
17
17
|
</p>
|
|
18
18
|
|
|
19
|
-
### If you're already using [Material UI v5](https://material-ui.com), why not display your images according to the Material guidelines too?
|
|
19
|
+
### If you're already using [Material UI v5 or v6](https://material-ui.com), why not display your images according to the Material guidelines too?
|
|
20
20
|
|
|
21
21
|
> Illustrations and photographs may load and transition in three phases at staggered durations, rather than relying on opacity changes alone.
|
|
22
22
|
>
|
|
@@ -28,56 +28,57 @@
|
|
|
28
28
|
|
|
29
29
|
Alter from alternative.
|
|
30
30
|
|
|
31
|
-
I
|
|
31
|
+
I just to make a fork with small modifications for my website but somehow I ended up changing many things... How did it become like this?
|
|
32
32
|
|
|
33
33
|
### Why should I use this?
|
|
34
34
|
|
|
35
|
-
If you satisfied with original project, you probably not need this. This is for users with a specific need.
|
|
35
|
+
If you are satisfied with the original project, you probably not need this. This is for users with a specific need.
|
|
36
36
|
|
|
37
37
|
To put it simply, you only needed this if:
|
|
38
38
|
|
|
39
|
-
- You want to change the component root element, `img` with
|
|
40
|
-
- You want to use `styled` function from `styled-components` or `emotion` or `MUI` on `Image` component but noticed some
|
|
39
|
+
- You want to change the component root element, `img` with another component like `Image` from `next/image`.
|
|
40
|
+
- You want to use `styled` function from `styled-components` or `emotion` or `MUI` on `Image` component but noticed some styles are not working properly.[^1]
|
|
41
41
|
|
|
42
|
-
[^1]: This
|
|
42
|
+
[^1]: This happens on the original project because the styles were set using style props. To correct this for the original project, you need to use style or wrapperStyle or iconWrapperStyle that provided to overwrite the default style.
|
|
43
43
|
|
|
44
44
|
### Changes in this fork
|
|
45
45
|
|
|
46
46
|
- Breaking Changes
|
|
47
|
-
- Height and width prop forwarded to the component root element (by default, `img`) instead of using CSS to set height and width of component wrapper element. Some alternate image components like `next/image` actually need for height and width prop.
|
|
48
|
-
- Put all styles that set
|
|
47
|
+
- Height and width prop forwarded to the component root element (by default, `img`) instead of using CSS to set the height and width of the component wrapper element. Some alternate image components like `next/image` actually need for height and width prop.
|
|
48
|
+
- Put all styles that set through style prop in styled for better compatibility with MUI's styled.
|
|
49
49
|
- No UMD build. Go post an issue if you want UMD to be added.
|
|
50
50
|
- Only named exports. Read this [article](https://esbuild.github.io/content-types/#default-interop).
|
|
51
51
|
|
|
52
52
|
- Other Changes
|
|
53
53
|
- Rewritten fully in Typescript with types built-in based on MUI component types.
|
|
54
|
-
- Add support to MUI's component prop; That
|
|
54
|
+
- Add support to MUI's component prop; That means you can substitute the component root element with `Image` from `next/image` if you want. Components supported are `img`, `img`-derived HTML element and component with `src` prop.
|
|
55
55
|
- Properly export esm and cjs build via package.json exports.
|
|
56
|
+
- (NEW) Support for MUI v6 added.
|
|
56
57
|
|
|
57
58
|
- Development Changes
|
|
58
59
|
- Use Vite instead of nwb for development and building the library for fast and better developer experience for me!
|
|
59
|
-
- Added unit tests for testing mui-image-alter component. Also, added new Github Action that will automatically run these tests every pull request.
|
|
60
|
+
- Added unit tests for testing the mui-image-alter component. Also, added a new Github Action that will automatically run these tests for every pull request.
|
|
60
61
|
|
|
61
62
|
## Simple Q & A
|
|
62
63
|
|
|
63
64
|
- **Q**: Why you created this fork?
|
|
64
|
-
**A**: MUI's styled don't work very well with the original mui-image because some of default styling and it use style prop instead of using styled to set some of the styling. So, I want to modify a little bit... And I end up doing
|
|
65
|
-
Originally, I want to just post an issue for this but I
|
|
65
|
+
**A**: MUI's styled don't work very well with the original mui-image because some of the default styling and it use style prop instead of using styled to set some of the styling. So, I want to modify a little bit... And I end up doing a lot.
|
|
66
|
+
Originally, I want to just post an issue for this but I suck in communication. 😅
|
|
66
67
|
|
|
67
68
|
- **Q**: Why you change nwb to Vite?
|
|
68
|
-
**A**: I just wanted to fork for my own benefit. So, I thought maybe I
|
|
69
|
+
**A**: I just wanted to fork for my own benefit. So, I thought maybe I could write this in TypeScript... but it doesn't work with nwb. I am so frustrated that I cannot find how to do it and try migrating to Vite instead. (Also, looks like nwb is abandoned too...) It took a lot of work but never thought it work so well...
|
|
69
70
|
Maybe there is actually a way to use Typescript with nwb but I never regret switching to Vite.
|
|
70
71
|
|
|
71
72
|
Vite is so fast!!! 😍
|
|
72
73
|
|
|
73
|
-
- **Q**: Will you
|
|
74
|
+
- **Q**: Will you integrate changes from the original project?
|
|
74
75
|
**A**: Yeah. As many as possible. 💪
|
|
75
76
|
|
|
76
77
|
---
|
|
77
78
|
|
|
78
79
|
### 1. Install
|
|
79
80
|
|
|
80
|
-
Install the `mui-image-alter` peer dependencies first. (Can skip if you already done it.)
|
|
81
|
+
Install the `mui-image-alter` peer dependencies first. (Can skip if you have already done it.)
|
|
81
82
|
|
|
82
83
|
If you haven't yet install MUI, please follow the [official guide](https://mui.com/material-ui/getting-started/installation/). Only MUI v5 or v6 are supported.
|
|
83
84
|
|
|
@@ -174,7 +175,7 @@ If you want to get fancy 💃 you can also add inline styles and additional `cla
|
|
|
174
175
|
|
|
175
176
|
### Fork Exclusive Usage
|
|
176
177
|
|
|
177
|
-
With this fork, you can use MUI's styled normally like this. More info on MUI's [official
|
|
178
|
+
With this fork, you can use MUI's styled normally like this. More info on MUI's [official documentation](https://mui.com/system/styled/).
|
|
178
179
|
|
|
179
180
|
```ts
|
|
180
181
|
import { styled } from '@mui/material/styles';
|
|
@@ -328,7 +329,9 @@ Star this project and also the original project too if it is useful for you.
|
|
|
328
329
|
|
|
329
330
|
Also, consider buying me a coffee!
|
|
330
331
|
|
|
331
|
-
[](https://ko-fi.com/mddanish00)
|
|
333
|
+
|
|
334
|
+
[](https://www.buymeacoffee.com/mddanish00)
|
|
332
335
|
|
|
333
336
|
## License
|
|
334
337
|
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),V=require("react"),y=require("@mui/material/styles"),G=require("@mui/material/SvgIcon"),J=require("@mui/material/CircularProgress"),K=require("clsx"),b=t=>t&&t.__esModule?t:{default:t};function Q(t){if(t&&t.__esModule)return t;const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const s=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(i,n,s.get?s:{enumerable:!0,get:()=>t[n]})}}return i.default=t,Object.freeze(i)}const e=Q(V),U=b(G),X=b(J),m=b(K),Y=({observeRef:t})=>{const[i,n]=e.useState(),[s,f]=e.useState(),o=e.useRef(void 0);return e.useEffect(()=>{o.current=new ResizeObserver(r=>{n(r[0].contentRect.height),f(r[0].contentRect.width)})},[]),e.useEffect(()=>(t&&t.current&&o.current&&o.current.observe(t.current),()=>{t&&t.current&&o.current&&o.current.unobserve(t.current)}),[t]),{ref:t,height:i,width:s}},Z=t=>a.jsx(U.default,{...t,children:a.jsx("path",{d:"M21 5v6.59l-2.29-2.3c-.39-.39-1.03-.39-1.42 0L14 12.59 10.71 9.3a.9959.9959 0 0 0-1.41 0L6 12.59 3 9.58V5c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2zm-3 6.42 3 3.01V19c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2v-6.58l2.29 2.29c.39.39 1.02.39 1.41 0l3.3-3.3 3.29 3.29c.39.39 1.02.39 1.41 0l3.3-3.28z"})}),p=e.forwardRef(({src:t,alt:i="",position:n="relative",fit:s="cover",style:f,className:o="",showLoading:r=!1,errorIcon:u=!0,shift:c=!1,distance:w=100,shiftDuration:z=void 0,bgColor:M="inherit",wrapperStyle:k,iconWrapperStyle:C,wrapperClassName:O="",iconWrapperClassName:$="",duration:B=3e3,easing:W="cubic-bezier(0.7, 0, 0.6, 1)",onLoad:h,onError:g,sx:q,component:H="img",...l},P)=>{const[d,x]=e.useState(!1),[j,S]=e.useState(!1),{ref:R,width:I,height:_}=Y({observeRef:P}),D=l.height?l.height:"100%",E=l.width?l.width:"100%",F=e.useCallback(()=>{x(!0),S(!1),h&&h()},[h]),N=e.useCallback(()=>{S(!0),x(!1),g&&g()},[g]),A=c!==void 0&&c!==!1&&c!==null?{[c]:d?0:w}:{},T=typeof u!="boolean"&&u||a.jsx(Z,{sx:{fontSize:56,color:"#bdbdbd"}}),L=typeof r!="boolean"&&r||a.jsx(X.default,{size:56,thickness:6});return a.jsxs(et,{className:m.default("MuiImageAlter-wrapper",O),sx:q,style:k,bgColor:M,rootHeight:_||D,rootWidth:I||E,children:[a.jsx(tt,{ref:R,as:H,src:t,alt:i,style:f,className:m.default("MuiImageAlter-img",o),onLoad:F,onError:N,position:n,fit:s,shift:c,shiftDuration:z,shiftStyles:A,duration:B,easing:W,loaded:d,...l}),(!!r||!!u)&&a.jsxs(it,{className:m.default("MuiImageAlter-iconWrapper",$),style:C,loaded:d,children:[!!u&&j&&T,!!r&&!j&&!d&&L]})]})}),v=(t,i)=>!i.includes(t),tt=e.memo(y.styled("img",{shouldForwardProp:t=>v(t.toString(),["position","fit","shift","shiftDuration","shiftStyles","duration","easing","loaded","sx","as"])})(t=>({"@keyframes materialize":{"0%":{filter:"saturate(20%) contrast(50%) brightness(120%)"},"75%":{filter:"saturate(60%) contrast(100%) brightness(100%)"},"100%":{filter:"saturate(100%) contrast(100%) brightness(100%)"}},position:t.position,objectFit:t.fit,transitionProperty:`${t.shift?`${t.shift}, `:""}opacity`,transitionDuration:`${t.shift?`${t.shiftDuration||t.duration*.3}ms, `:""}${t.duration/2}ms`,transitionTimingFunction:t.easing,opacity:t.loaded?1:0,animation:t.loaded?`materialize ${t.duration}ms 1 ${t.easing}`:"",...!!t.shift&&t.shiftStyles}))),et=e.memo(y.styled("div",{shouldForwardProp:t=>v(t.toString(),["bgColor","sx","rootHeight","rootWidth"])})(t=>({display:"flex",justifyContent:"center",alignItems:"center",backgroundColor:t.bgColor,height:`${t.rootHeight}px`,width:`${t.rootWidth}px`}))),it=e.memo(y.styled("div",{shouldForwardProp:t=>t!=="loaded"})(t=>({width:"100%",marginLeft:"-100%",display:"flex",justifyContent:"center",alignItems:"center",opacity:t.loaded?0:1})));exports.Image=p;
|
package/dist/index.js
CHANGED
|
@@ -1,86 +1,96 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs as
|
|
2
|
+
import { jsxs as z, jsx as s } from "react/jsx-runtime";
|
|
3
3
|
import * as e from "react";
|
|
4
|
-
import { styled as
|
|
4
|
+
import { styled as y } from "@mui/material/styles";
|
|
5
5
|
import G from "@mui/material/SvgIcon";
|
|
6
6
|
import J from "@mui/material/CircularProgress";
|
|
7
|
-
import
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
import g from "clsx";
|
|
8
|
+
const K = ({
|
|
9
|
+
observeRef: t
|
|
10
|
+
}) => {
|
|
11
|
+
const [n, d] = e.useState(), [u, h] = e.useState(), i = e.useRef(void 0);
|
|
12
|
+
return e.useEffect(() => {
|
|
13
|
+
i.current = new ResizeObserver((o) => {
|
|
14
|
+
d(o[0].contentRect.height), h(o[0].contentRect.width);
|
|
15
|
+
});
|
|
16
|
+
}, []), e.useEffect(() => (t && t.current && i.current && i.current.observe(t.current), () => {
|
|
17
|
+
t && t.current && i.current && i.current.unobserve(t.current);
|
|
18
|
+
}), [t]), { ref: t, height: n, width: u };
|
|
19
|
+
}, Q = (t) => /* @__PURE__ */ s(G, { ...t, children: /* @__PURE__ */ s("path", { d: "M21 5v6.59l-2.29-2.3c-.39-.39-1.03-.39-1.42 0L14 12.59 10.71 9.3a.9959.9959 0 0 0-1.41 0L6 12.59 3 9.58V5c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2zm-3 6.42 3 3.01V19c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2v-6.58l2.29 2.29c.39.39 1.02.39 1.41 0l3.3-3.3 3.29 3.29c.39.39 1.02.39 1.41 0l3.3-3.28z" }) }), it = e.forwardRef(
|
|
10
20
|
({
|
|
11
21
|
src: t,
|
|
12
|
-
alt:
|
|
13
|
-
position:
|
|
14
|
-
fit:
|
|
15
|
-
style:
|
|
16
|
-
className:
|
|
17
|
-
showLoading:
|
|
18
|
-
errorIcon:
|
|
19
|
-
shift:
|
|
20
|
-
distance:
|
|
21
|
-
shiftDuration:
|
|
22
|
-
bgColor:
|
|
23
|
-
wrapperStyle:
|
|
22
|
+
alt: n = "",
|
|
23
|
+
position: d = "relative",
|
|
24
|
+
fit: u = "cover",
|
|
25
|
+
style: h,
|
|
26
|
+
className: i = "",
|
|
27
|
+
showLoading: o = !1,
|
|
28
|
+
errorIcon: c = !0,
|
|
29
|
+
shift: a = !1,
|
|
30
|
+
distance: $ = 100,
|
|
31
|
+
shiftDuration: k = void 0,
|
|
32
|
+
bgColor: B = "inherit",
|
|
33
|
+
wrapperStyle: C,
|
|
24
34
|
iconWrapperStyle: W,
|
|
25
|
-
wrapperClassName:
|
|
26
|
-
iconWrapperClassName:
|
|
27
|
-
duration:
|
|
28
|
-
easing:
|
|
35
|
+
wrapperClassName: M = "",
|
|
36
|
+
iconWrapperClassName: H = "",
|
|
37
|
+
duration: j = 3e3,
|
|
38
|
+
easing: E = "cubic-bezier(0.7, 0, 0.6, 1)",
|
|
29
39
|
// "heavy move" from https://sprawledoctopus.com/easing/,
|
|
30
|
-
onLoad:
|
|
31
|
-
onError:
|
|
32
|
-
sx:
|
|
33
|
-
component:
|
|
34
|
-
...
|
|
35
|
-
},
|
|
36
|
-
const [
|
|
37
|
-
|
|
38
|
-
}, [
|
|
39
|
-
|
|
40
|
-
}, [
|
|
41
|
-
[
|
|
42
|
-
} : {}, T = typeof
|
|
43
|
-
return /* @__PURE__ */
|
|
40
|
+
onLoad: m,
|
|
41
|
+
onError: f,
|
|
42
|
+
sx: F,
|
|
43
|
+
component: R = "img",
|
|
44
|
+
...r
|
|
45
|
+
}, A) => {
|
|
46
|
+
const [l, b] = e.useState(!1), [I, w] = e.useState(!1), { ref: D, width: x, height: S } = K({ observeRef: A }), N = r.height ? r.height : "100%", O = r.width ? r.width : "100%", L = e.useCallback(() => {
|
|
47
|
+
b(!0), w(!1), m && m();
|
|
48
|
+
}, [m]), P = e.useCallback(() => {
|
|
49
|
+
w(!0), b(!1), f && f();
|
|
50
|
+
}, [f]), V = a !== void 0 && a !== !1 && a !== null ? {
|
|
51
|
+
[a]: l ? 0 : $
|
|
52
|
+
} : {}, T = typeof c != "boolean" && c || /* @__PURE__ */ s(Q, { sx: { fontSize: 56, color: "#bdbdbd" } }), q = typeof o != "boolean" && o || /* @__PURE__ */ s(J, { size: 56, thickness: 6 });
|
|
53
|
+
return /* @__PURE__ */ z(
|
|
44
54
|
X,
|
|
45
55
|
{
|
|
46
|
-
className:
|
|
47
|
-
sx:
|
|
48
|
-
style:
|
|
49
|
-
bgColor:
|
|
50
|
-
rootHeight:
|
|
51
|
-
rootWidth:
|
|
56
|
+
className: g("MuiImageAlter-wrapper", M),
|
|
57
|
+
sx: F,
|
|
58
|
+
style: C,
|
|
59
|
+
bgColor: B,
|
|
60
|
+
rootHeight: S || N,
|
|
61
|
+
rootWidth: x || O,
|
|
52
62
|
children: [
|
|
53
|
-
/* @__PURE__ */
|
|
63
|
+
/* @__PURE__ */ s(
|
|
54
64
|
U,
|
|
55
65
|
{
|
|
56
|
-
ref:
|
|
57
|
-
as:
|
|
66
|
+
ref: D,
|
|
67
|
+
as: R,
|
|
58
68
|
src: t,
|
|
59
|
-
alt:
|
|
60
|
-
style:
|
|
61
|
-
className:
|
|
62
|
-
onLoad:
|
|
63
|
-
onError:
|
|
64
|
-
position:
|
|
65
|
-
fit:
|
|
66
|
-
shift:
|
|
67
|
-
shiftDuration:
|
|
68
|
-
shiftStyles:
|
|
69
|
-
duration:
|
|
70
|
-
easing:
|
|
71
|
-
loaded:
|
|
72
|
-
...
|
|
69
|
+
alt: n,
|
|
70
|
+
style: h,
|
|
71
|
+
className: g("MuiImageAlter-img", i),
|
|
72
|
+
onLoad: L,
|
|
73
|
+
onError: P,
|
|
74
|
+
position: d,
|
|
75
|
+
fit: u,
|
|
76
|
+
shift: a,
|
|
77
|
+
shiftDuration: k,
|
|
78
|
+
shiftStyles: V,
|
|
79
|
+
duration: j,
|
|
80
|
+
easing: E,
|
|
81
|
+
loaded: l,
|
|
82
|
+
...r
|
|
73
83
|
}
|
|
74
84
|
),
|
|
75
|
-
(!!
|
|
85
|
+
(!!o || !!c) && /* @__PURE__ */ z(
|
|
76
86
|
Y,
|
|
77
87
|
{
|
|
78
|
-
className:
|
|
88
|
+
className: g("MuiImageAlter-iconWrapper", H),
|
|
79
89
|
style: W,
|
|
80
|
-
loaded:
|
|
90
|
+
loaded: l,
|
|
81
91
|
children: [
|
|
82
|
-
!!
|
|
83
|
-
!!
|
|
92
|
+
!!c && I && T,
|
|
93
|
+
!!o && !I && !l && q
|
|
84
94
|
]
|
|
85
95
|
}
|
|
86
96
|
)
|
|
@@ -88,8 +98,8 @@ const Q = (t) => /* @__PURE__ */ a(G, { ...t, children: /* @__PURE__ */ a("path"
|
|
|
88
98
|
}
|
|
89
99
|
);
|
|
90
100
|
}
|
|
91
|
-
), v = (t,
|
|
92
|
-
|
|
101
|
+
), v = (t, n) => !n.includes(t), U = e.memo(
|
|
102
|
+
y("img", {
|
|
93
103
|
shouldForwardProp: (t) => v(t.toString(), [
|
|
94
104
|
"position",
|
|
95
105
|
"fit",
|
|
@@ -124,18 +134,18 @@ const Q = (t) => /* @__PURE__ */ a(G, { ...t, children: /* @__PURE__ */ a("path"
|
|
|
124
134
|
...!!t.shift && t.shiftStyles
|
|
125
135
|
}))
|
|
126
136
|
), X = e.memo(
|
|
127
|
-
|
|
137
|
+
y("div", {
|
|
128
138
|
shouldForwardProp: (t) => v(t.toString(), ["bgColor", "sx", "rootHeight", "rootWidth"])
|
|
129
139
|
})((t) => ({
|
|
130
140
|
display: "flex",
|
|
131
141
|
justifyContent: "center",
|
|
132
142
|
alignItems: "center",
|
|
133
143
|
backgroundColor: t.bgColor,
|
|
134
|
-
height: t.rootHeight
|
|
135
|
-
width: t.rootWidth
|
|
144
|
+
height: `${t.rootHeight}px`,
|
|
145
|
+
width: `${t.rootWidth}px`
|
|
136
146
|
}))
|
|
137
147
|
), Y = e.memo(
|
|
138
|
-
|
|
148
|
+
y("div", {
|
|
139
149
|
shouldForwardProp: (t) => t !== "loaded"
|
|
140
150
|
})((t) => ({
|
|
141
151
|
width: "100%",
|
|
@@ -147,5 +157,5 @@ const Q = (t) => /* @__PURE__ */ a(G, { ...t, children: /* @__PURE__ */ a("path"
|
|
|
147
157
|
}))
|
|
148
158
|
);
|
|
149
159
|
export {
|
|
150
|
-
|
|
160
|
+
it as Image
|
|
151
161
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mui-image-alter",
|
|
3
|
-
"version": "3.
|
|
4
|
-
"description": "Fork of mui-image. Display images as per the Material guidelines using Material-UI v5. With component prop support.",
|
|
3
|
+
"version": "3.2.0",
|
|
4
|
+
"description": "Fork of mui-image. Display images as per the Material guidelines using Material-UI v5 or v6. With component prop support.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
7
7
|
"types": "./dist/index.d.cts",
|
|
@@ -29,42 +29,42 @@
|
|
|
29
29
|
"format": "prettier {demo,src}/**/*.{js,jsx,ts,tsx,json} --write",
|
|
30
30
|
"clean": "rimraf dist es lib umd coverage jest-setup.d.ts mui-image-alter-*",
|
|
31
31
|
"prepare": "npm run build",
|
|
32
|
-
"preversion": "npm run clean && npm run format",
|
|
33
|
-
"postversion": "git push && git push --tags",
|
|
34
32
|
"test": "vitest run",
|
|
35
33
|
"test:watch": "vitest",
|
|
36
34
|
"test:coverage": "vitest run --coverage",
|
|
37
35
|
"test:coverage-ci": "vitest run --coverage.enabled --coverage.reporter='text-summary'"
|
|
38
36
|
},
|
|
39
37
|
"dependencies": {
|
|
40
|
-
"clsx": "^2.1.1"
|
|
41
|
-
"use-resize-observer": "^9.1.0"
|
|
38
|
+
"clsx": "^2.1.1"
|
|
42
39
|
},
|
|
43
40
|
"peerDependencies": {
|
|
44
41
|
"@mui/material": "^5.0.0 || ^6.0.0",
|
|
45
|
-
"react": "^17.0.0 || ^18.0.0",
|
|
46
|
-
"react-dom": "^17.0.0 || ^18.0.0"
|
|
42
|
+
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
43
|
+
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
|
47
44
|
},
|
|
48
45
|
"devDependencies": {
|
|
49
|
-
"@emotion/react": "^11.
|
|
50
|
-
"@emotion/styled": "^11.
|
|
51
|
-
"@fontsource/fira-code": "^5.0
|
|
52
|
-
"@
|
|
53
|
-
"@
|
|
54
|
-
"@testing-library/
|
|
55
|
-
"@
|
|
56
|
-
"@types/
|
|
57
|
-
"@
|
|
58
|
-
"@
|
|
59
|
-
"
|
|
60
|
-
"
|
|
46
|
+
"@emotion/react": "^11.14.0",
|
|
47
|
+
"@emotion/styled": "^11.14.0",
|
|
48
|
+
"@fontsource/fira-code": "^5.1.0",
|
|
49
|
+
"@mui/material": "^6.1.10",
|
|
50
|
+
"@size-limit/preset-small-lib": "^11.1.6",
|
|
51
|
+
"@testing-library/jest-dom": "^6.6.3",
|
|
52
|
+
"@testing-library/react": "^16.1.0",
|
|
53
|
+
"@types/node": "^20.17.9",
|
|
54
|
+
"@types/react": "^19.0.1",
|
|
55
|
+
"@types/react-dom": "^19.0.1",
|
|
56
|
+
"@vitejs/plugin-react": "^4.3.4",
|
|
57
|
+
"@vitest/coverage-v8": "^2.1.8",
|
|
58
|
+
"jsdom": "^25.0.1",
|
|
59
|
+
"prettier": "^3.4.2",
|
|
60
|
+
"react": "^19.0.0",
|
|
61
|
+
"react-dom": "^19.0.0",
|
|
61
62
|
"rimraf": "^6.0.1",
|
|
62
|
-
"size-limit": "^11.1.
|
|
63
|
-
"
|
|
64
|
-
"
|
|
65
|
-
"vite": "^
|
|
66
|
-
"
|
|
67
|
-
"vitest": "^2.0.5"
|
|
63
|
+
"size-limit": "^11.1.6",
|
|
64
|
+
"typescript": "^5.7.2",
|
|
65
|
+
"vite": "^6.0.3",
|
|
66
|
+
"vite-plugin-dts": "^4.3.0",
|
|
67
|
+
"vitest": "^2.1.8"
|
|
68
68
|
},
|
|
69
69
|
"size-limit": [
|
|
70
70
|
{
|
|
@@ -95,5 +95,11 @@
|
|
|
95
95
|
"material design",
|
|
96
96
|
"react",
|
|
97
97
|
"loading image"
|
|
98
|
+
],
|
|
99
|
+
"funding": [
|
|
100
|
+
{
|
|
101
|
+
"type": "github",
|
|
102
|
+
"url": "https://github.com/mddanish00/mui-image-alter?sponsor=1"
|
|
103
|
+
}
|
|
98
104
|
]
|
|
99
|
-
}
|
|
105
|
+
}
|