@lonik/oh-image 1.2.8 → 1.3.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/dist/react.js +47 -10
- package/package.json +1 -1
package/dist/react.js
CHANGED
|
@@ -79,10 +79,14 @@ function useImgLoaded(src) {
|
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
//#endregion
|
|
82
|
-
//#region src/react/
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
82
|
+
//#region src/react/prop-resolvers.ts
|
|
83
|
+
/**
|
|
84
|
+
* RegExpr to determine whether a src in a srcset is using width descriptors.
|
|
85
|
+
* Should match something like: "100w, 200w".
|
|
86
|
+
*/
|
|
87
|
+
const VALID_WIDTH_DESCRIPTOR_SRCSET = /^((\s*\d+w\s*(,|$)){1,})$/;
|
|
88
|
+
function resolveOptions(prop) {
|
|
89
|
+
const { src, ...rest } = prop;
|
|
86
90
|
const resolved = { ...rest };
|
|
87
91
|
if (typeof src === "object") {
|
|
88
92
|
resolved.src = src.src;
|
|
@@ -91,18 +95,46 @@ function resolveOptions(props) {
|
|
|
91
95
|
resolved.srcSet ??= src.srcSets;
|
|
92
96
|
resolved.placeholderUrl ??= src.placeholderUrl;
|
|
93
97
|
} else resolved.src = src;
|
|
94
|
-
if (
|
|
98
|
+
if (prop.asap) {
|
|
95
99
|
resolved.decoding = "async";
|
|
96
100
|
resolved.loading = "eager";
|
|
97
101
|
resolved.fetchPriority = "high";
|
|
98
|
-
if (preload) preload(resolved.src, {
|
|
99
|
-
as: "image",
|
|
100
|
-
fetchPriority: "high"
|
|
101
|
-
});
|
|
102
102
|
}
|
|
103
|
-
|
|
103
|
+
resolved.sizes = resolveSizes(prop);
|
|
104
|
+
resolved.loading = resolveLoading(prop);
|
|
104
105
|
return resolved;
|
|
105
106
|
}
|
|
107
|
+
function resolveLoading(prop) {
|
|
108
|
+
if (!prop.asap && prop.loading !== void 0) return prop.loading;
|
|
109
|
+
return prop.asap ? "eager" : "lazy";
|
|
110
|
+
}
|
|
111
|
+
function resolveSizes(prop) {
|
|
112
|
+
const loading = resolveLoading(prop);
|
|
113
|
+
let sizes = prop.sizes;
|
|
114
|
+
if (prop.fill) sizes ||= "100vw";
|
|
115
|
+
if (sizes) {
|
|
116
|
+
if (loading === "lazy") sizes = "auto, " + sizes;
|
|
117
|
+
} else if (prop.srcSet && VALID_WIDTH_DESCRIPTOR_SRCSET.test(prop.srcSet) && loading === "lazy") sizes = "auto, 100vw";
|
|
118
|
+
return sizes;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
//#endregion
|
|
122
|
+
//#region src/react/prop-asserts.ts
|
|
123
|
+
function assertProps(prop) {
|
|
124
|
+
assertLoadingProp(prop);
|
|
125
|
+
}
|
|
126
|
+
function assert(assertion, message) {
|
|
127
|
+
if (import.meta.env.DEV) {
|
|
128
|
+
if (assertion()) throw new Error(message);
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
function assertLoadingProp(prop) {
|
|
132
|
+
assert(() => prop.loading && prop.asap, `Do not use \`loading\` on a asap image — asap images are always eagerly loaded.`);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
//#endregion
|
|
136
|
+
//#region src/react/image.tsx
|
|
137
|
+
const preload = "preload" in ReactDOM && typeof ReactDOM.preload === "function" ? ReactDOM.preload : null;
|
|
106
138
|
function getPlaceholderStyles(props) {
|
|
107
139
|
if (!props.placeholderUrl) return {};
|
|
108
140
|
return {
|
|
@@ -121,6 +153,7 @@ function getFillStyles(props) {
|
|
|
121
153
|
};
|
|
122
154
|
}
|
|
123
155
|
function Image(props) {
|
|
156
|
+
assertProps(props);
|
|
124
157
|
const options = resolveOptions(props);
|
|
125
158
|
const [imgRef, isLoaded] = useImgLoaded(options.src);
|
|
126
159
|
const placeholderStyles = isLoaded ? {} : getPlaceholderStyles(options);
|
|
@@ -130,6 +163,10 @@ function Image(props) {
|
|
|
130
163
|
...fillStyles,
|
|
131
164
|
...props.style
|
|
132
165
|
};
|
|
166
|
+
if (preload && options.asap) preload(options.src, {
|
|
167
|
+
as: "image",
|
|
168
|
+
fetchPriority: "high"
|
|
169
|
+
});
|
|
133
170
|
return /* @__PURE__ */ jsx("img", {
|
|
134
171
|
ref: imgRef,
|
|
135
172
|
className: props.className,
|
package/package.json
CHANGED