defuss-astro 1.4.9 → 1.5.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/client.cjs +1 -114
- package/dist/client.d.cts +1 -27
- package/dist/client.d.mts +1 -27
- package/dist/client.mjs +2 -112
- package/dist/index.cjs +1 -12
- package/dist/index.mjs +1 -12
- package/package.json +2 -7
- package/dist/endpoint/image-endpoint.cjs +0 -67
- package/dist/endpoint/image-endpoint.d.cts +0 -5
- package/dist/endpoint/image-endpoint.d.mts +0 -5
- package/dist/endpoint/image-endpoint.mjs +0 -65
package/dist/client.cjs
CHANGED
|
@@ -1,121 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var client$1 = require('defuss/client');
|
|
6
4
|
var render = require('./render-DkMOLcUd.cjs');
|
|
7
|
-
var jsxRuntime = require('defuss/jsx-runtime');
|
|
8
5
|
require('defuss');
|
|
9
6
|
|
|
10
|
-
const Img = ({
|
|
11
|
-
id,
|
|
12
|
-
src,
|
|
13
|
-
alt,
|
|
14
|
-
height = 100,
|
|
15
|
-
width = 100,
|
|
16
|
-
previewQuality = 5,
|
|
17
|
-
quality = 90,
|
|
18
|
-
className = "",
|
|
19
|
-
class: _class = "",
|
|
20
|
-
style = {},
|
|
21
|
-
format = "webp",
|
|
22
|
-
astroAssetsPath = "_defuss/image"
|
|
23
|
-
}) => {
|
|
24
|
-
const placeholderWidth = Math.round(width / 7);
|
|
25
|
-
const placeholderHeight = Math.round(height / 7);
|
|
26
|
-
const imgRef = client$1.createRef();
|
|
27
|
-
const getTransformOptionsPath = ({
|
|
28
|
-
src: src2,
|
|
29
|
-
height: height2,
|
|
30
|
-
width: width2,
|
|
31
|
-
quality: quality2 = previewQuality,
|
|
32
|
-
format: format2 = "webp"
|
|
33
|
-
}) => {
|
|
34
|
-
const transformOptions = new URLSearchParams({
|
|
35
|
-
href: src2,
|
|
36
|
-
h: height2.toString(),
|
|
37
|
-
w: width2.toString(),
|
|
38
|
-
q: quality2.toString(),
|
|
39
|
-
f: format2
|
|
40
|
-
});
|
|
41
|
-
return `/${astroAssetsPath}?${transformOptions.toString()}`;
|
|
42
|
-
};
|
|
43
|
-
const transformedSrc = getTransformOptionsPath({
|
|
44
|
-
src,
|
|
45
|
-
height: placeholderHeight,
|
|
46
|
-
width: placeholderWidth,
|
|
47
|
-
format
|
|
48
|
-
});
|
|
49
|
-
const whenImageMounts = () => {
|
|
50
|
-
const img = imgRef.current;
|
|
51
|
-
if (!img) return;
|
|
52
|
-
let loaded = false;
|
|
53
|
-
const getTransformOptionsPath2 = ({
|
|
54
|
-
src: src2,
|
|
55
|
-
height: height2,
|
|
56
|
-
width: width2,
|
|
57
|
-
quality: quality2,
|
|
58
|
-
format: format2
|
|
59
|
-
}) => {
|
|
60
|
-
const transformOptions = new URLSearchParams({
|
|
61
|
-
href: src2,
|
|
62
|
-
h: height2.toString(),
|
|
63
|
-
w: width2.toString(),
|
|
64
|
-
q: quality2.toString(),
|
|
65
|
-
f: format2
|
|
66
|
-
});
|
|
67
|
-
return `/${astroAssetsPath}?${transformOptions.toString()}`;
|
|
68
|
-
};
|
|
69
|
-
const lazyLoad = () => {
|
|
70
|
-
if (loaded) return;
|
|
71
|
-
const transformedSrc2 = getTransformOptionsPath2({
|
|
72
|
-
src,
|
|
73
|
-
height,
|
|
74
|
-
width,
|
|
75
|
-
quality,
|
|
76
|
-
format
|
|
77
|
-
});
|
|
78
|
-
img.src = transformedSrc2;
|
|
79
|
-
img.onload = () => {
|
|
80
|
-
img.classList.remove("blur");
|
|
81
|
-
img.classList.add("loaded");
|
|
82
|
-
img.style.filter = "blur(0px)";
|
|
83
|
-
loaded = true;
|
|
84
|
-
};
|
|
85
|
-
};
|
|
86
|
-
const observer = new window.IntersectionObserver(
|
|
87
|
-
(entries, observer2) => {
|
|
88
|
-
entries.forEach((entry) => {
|
|
89
|
-
if (entry.isIntersecting) {
|
|
90
|
-
lazyLoad();
|
|
91
|
-
observer2.unobserve(entry.target);
|
|
92
|
-
}
|
|
93
|
-
});
|
|
94
|
-
},
|
|
95
|
-
{ threshold: 0.1 }
|
|
96
|
-
);
|
|
97
|
-
observer.observe(imgRef.current);
|
|
98
|
-
};
|
|
99
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
100
|
-
"img",
|
|
101
|
-
{
|
|
102
|
-
id,
|
|
103
|
-
ref: imgRef,
|
|
104
|
-
onMount: whenImageMounts,
|
|
105
|
-
alt,
|
|
106
|
-
class: `${className || _class} blur`,
|
|
107
|
-
src: transformedSrc,
|
|
108
|
-
style: {
|
|
109
|
-
filter: "blur(40px)",
|
|
110
|
-
transition: "0.125s filter linear",
|
|
111
|
-
...style
|
|
112
|
-
},
|
|
113
|
-
width,
|
|
114
|
-
height
|
|
115
|
-
}
|
|
116
|
-
);
|
|
117
|
-
};
|
|
118
|
-
|
|
119
7
|
var client = (element) => async (Component, props, { default: children, ...slotted }, { client }) => {
|
|
120
8
|
const isHydrate = element.hasAttribute("ssr") && (client === "visible" || client === "idle" || client === "load" || client === "media");
|
|
121
9
|
if (!element.hasAttribute("ssr")) return;
|
|
@@ -190,5 +78,4 @@ var client = (element) => async (Component, props, { default: children, ...slott
|
|
|
190
78
|
);
|
|
191
79
|
};
|
|
192
80
|
|
|
193
|
-
exports
|
|
194
|
-
exports.default = client;
|
|
81
|
+
module.exports = client;
|
package/dist/client.d.cts
CHANGED
|
@@ -1,29 +1,3 @@
|
|
|
1
|
-
import { Props, CSSProperties } from 'defuss/client';
|
|
2
|
-
|
|
3
|
-
interface ImgProps extends Props {
|
|
4
|
-
id?: string;
|
|
5
|
-
src: string;
|
|
6
|
-
width?: number;
|
|
7
|
-
height?: number;
|
|
8
|
-
alt: string;
|
|
9
|
-
style?: CSSProperties;
|
|
10
|
-
class?: string;
|
|
11
|
-
className?: string;
|
|
12
|
-
format?: string;
|
|
13
|
-
astroAssetsPath?: string;
|
|
14
|
-
previewQuality?: number;
|
|
15
|
-
quality?: number;
|
|
16
|
-
}
|
|
17
|
-
/**
|
|
18
|
-
* Image component for displaying responsive images with automatic format conversion.
|
|
19
|
-
*
|
|
20
|
-
* Default style: {
|
|
21
|
-
* filter: "blur(40px)",
|
|
22
|
-
* transition: "0.125s filter linear",
|
|
23
|
-
* }
|
|
24
|
-
*/
|
|
25
|
-
declare const Img: ({ id, src, alt, height, width, previewQuality, quality, className, class: _class, style, format, astroAssetsPath, }: ImgProps) => any;
|
|
26
|
-
|
|
27
1
|
declare const _default: (element: HTMLElement) => (Component: any, props: Record<string, any>, { default: children, ...slotted }: Record<string, any>, { client }: Record<string, string>) => Promise<void>;
|
|
28
2
|
|
|
29
|
-
export {
|
|
3
|
+
export { _default as default };
|
package/dist/client.d.mts
CHANGED
|
@@ -1,29 +1,3 @@
|
|
|
1
|
-
import { Props, CSSProperties } from 'defuss/client';
|
|
2
|
-
|
|
3
|
-
interface ImgProps extends Props {
|
|
4
|
-
id?: string;
|
|
5
|
-
src: string;
|
|
6
|
-
width?: number;
|
|
7
|
-
height?: number;
|
|
8
|
-
alt: string;
|
|
9
|
-
style?: CSSProperties;
|
|
10
|
-
class?: string;
|
|
11
|
-
className?: string;
|
|
12
|
-
format?: string;
|
|
13
|
-
astroAssetsPath?: string;
|
|
14
|
-
previewQuality?: number;
|
|
15
|
-
quality?: number;
|
|
16
|
-
}
|
|
17
|
-
/**
|
|
18
|
-
* Image component for displaying responsive images with automatic format conversion.
|
|
19
|
-
*
|
|
20
|
-
* Default style: {
|
|
21
|
-
* filter: "blur(40px)",
|
|
22
|
-
* transition: "0.125s filter linear",
|
|
23
|
-
* }
|
|
24
|
-
*/
|
|
25
|
-
declare const Img: ({ id, src, alt, height, width, previewQuality, quality, className, class: _class, style, format, astroAssetsPath, }: ImgProps) => any;
|
|
26
|
-
|
|
27
1
|
declare const _default: (element: HTMLElement) => (Component: any, props: Record<string, any>, { default: children, ...slotted }: Record<string, any>, { client }: Record<string, string>) => Promise<void>;
|
|
28
2
|
|
|
29
|
-
export {
|
|
3
|
+
export { _default as default };
|
package/dist/client.mjs
CHANGED
|
@@ -1,117 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { hydrate, renderSync, DANGEROUSLY_SET_INNER_HTML_ATTRIBUTE, REF_ATTRIBUTE_NAME } from 'defuss/client';
|
|
2
2
|
import { S as StaticHtml } from './render-viAgneG-.mjs';
|
|
3
|
-
import { jsx } from 'defuss/jsx-runtime';
|
|
4
3
|
import 'defuss';
|
|
5
4
|
|
|
6
|
-
const Img = ({
|
|
7
|
-
id,
|
|
8
|
-
src,
|
|
9
|
-
alt,
|
|
10
|
-
height = 100,
|
|
11
|
-
width = 100,
|
|
12
|
-
previewQuality = 5,
|
|
13
|
-
quality = 90,
|
|
14
|
-
className = "",
|
|
15
|
-
class: _class = "",
|
|
16
|
-
style = {},
|
|
17
|
-
format = "webp",
|
|
18
|
-
astroAssetsPath = "_defuss/image"
|
|
19
|
-
}) => {
|
|
20
|
-
const placeholderWidth = Math.round(width / 7);
|
|
21
|
-
const placeholderHeight = Math.round(height / 7);
|
|
22
|
-
const imgRef = createRef();
|
|
23
|
-
const getTransformOptionsPath = ({
|
|
24
|
-
src: src2,
|
|
25
|
-
height: height2,
|
|
26
|
-
width: width2,
|
|
27
|
-
quality: quality2 = previewQuality,
|
|
28
|
-
format: format2 = "webp"
|
|
29
|
-
}) => {
|
|
30
|
-
const transformOptions = new URLSearchParams({
|
|
31
|
-
href: src2,
|
|
32
|
-
h: height2.toString(),
|
|
33
|
-
w: width2.toString(),
|
|
34
|
-
q: quality2.toString(),
|
|
35
|
-
f: format2
|
|
36
|
-
});
|
|
37
|
-
return `/${astroAssetsPath}?${transformOptions.toString()}`;
|
|
38
|
-
};
|
|
39
|
-
const transformedSrc = getTransformOptionsPath({
|
|
40
|
-
src,
|
|
41
|
-
height: placeholderHeight,
|
|
42
|
-
width: placeholderWidth,
|
|
43
|
-
format
|
|
44
|
-
});
|
|
45
|
-
const whenImageMounts = () => {
|
|
46
|
-
const img = imgRef.current;
|
|
47
|
-
if (!img) return;
|
|
48
|
-
let loaded = false;
|
|
49
|
-
const getTransformOptionsPath2 = ({
|
|
50
|
-
src: src2,
|
|
51
|
-
height: height2,
|
|
52
|
-
width: width2,
|
|
53
|
-
quality: quality2,
|
|
54
|
-
format: format2
|
|
55
|
-
}) => {
|
|
56
|
-
const transformOptions = new URLSearchParams({
|
|
57
|
-
href: src2,
|
|
58
|
-
h: height2.toString(),
|
|
59
|
-
w: width2.toString(),
|
|
60
|
-
q: quality2.toString(),
|
|
61
|
-
f: format2
|
|
62
|
-
});
|
|
63
|
-
return `/${astroAssetsPath}?${transformOptions.toString()}`;
|
|
64
|
-
};
|
|
65
|
-
const lazyLoad = () => {
|
|
66
|
-
if (loaded) return;
|
|
67
|
-
const transformedSrc2 = getTransformOptionsPath2({
|
|
68
|
-
src,
|
|
69
|
-
height,
|
|
70
|
-
width,
|
|
71
|
-
quality,
|
|
72
|
-
format
|
|
73
|
-
});
|
|
74
|
-
img.src = transformedSrc2;
|
|
75
|
-
img.onload = () => {
|
|
76
|
-
img.classList.remove("blur");
|
|
77
|
-
img.classList.add("loaded");
|
|
78
|
-
img.style.filter = "blur(0px)";
|
|
79
|
-
loaded = true;
|
|
80
|
-
};
|
|
81
|
-
};
|
|
82
|
-
const observer = new window.IntersectionObserver(
|
|
83
|
-
(entries, observer2) => {
|
|
84
|
-
entries.forEach((entry) => {
|
|
85
|
-
if (entry.isIntersecting) {
|
|
86
|
-
lazyLoad();
|
|
87
|
-
observer2.unobserve(entry.target);
|
|
88
|
-
}
|
|
89
|
-
});
|
|
90
|
-
},
|
|
91
|
-
{ threshold: 0.1 }
|
|
92
|
-
);
|
|
93
|
-
observer.observe(imgRef.current);
|
|
94
|
-
};
|
|
95
|
-
return /* @__PURE__ */ jsx(
|
|
96
|
-
"img",
|
|
97
|
-
{
|
|
98
|
-
id,
|
|
99
|
-
ref: imgRef,
|
|
100
|
-
onMount: whenImageMounts,
|
|
101
|
-
alt,
|
|
102
|
-
class: `${className || _class} blur`,
|
|
103
|
-
src: transformedSrc,
|
|
104
|
-
style: {
|
|
105
|
-
filter: "blur(40px)",
|
|
106
|
-
transition: "0.125s filter linear",
|
|
107
|
-
...style
|
|
108
|
-
},
|
|
109
|
-
width,
|
|
110
|
-
height
|
|
111
|
-
}
|
|
112
|
-
);
|
|
113
|
-
};
|
|
114
|
-
|
|
115
5
|
var client = (element) => async (Component, props, { default: children, ...slotted }, { client }) => {
|
|
116
6
|
const isHydrate = element.hasAttribute("ssr") && (client === "visible" || client === "idle" || client === "load" || client === "media");
|
|
117
7
|
if (!element.hasAttribute("ssr")) return;
|
|
@@ -186,4 +76,4 @@ var client = (element) => async (Component, props, { default: children, ...slott
|
|
|
186
76
|
);
|
|
187
77
|
};
|
|
188
78
|
|
|
189
|
-
export {
|
|
79
|
+
export { client as default };
|
package/dist/index.cjs
CHANGED
|
@@ -161,16 +161,8 @@ function index({
|
|
|
161
161
|
config,
|
|
162
162
|
addRenderer,
|
|
163
163
|
updateConfig,
|
|
164
|
-
command
|
|
165
|
-
injectScript,
|
|
166
|
-
injectRoute
|
|
164
|
+
command
|
|
167
165
|
}) => {
|
|
168
|
-
injectRoute({
|
|
169
|
-
pattern: "/_defuss/image",
|
|
170
|
-
prerender: false,
|
|
171
|
-
entrypoint: "defuss-astro/image-endpoint.js"
|
|
172
|
-
});
|
|
173
|
-
node_url.fileURLToPath(config.publicDir);
|
|
174
166
|
config.compressHTML = true;
|
|
175
167
|
config.scopedStyleStrategy = "class";
|
|
176
168
|
if (!config.vite.build) {
|
|
@@ -183,9 +175,6 @@ function index({
|
|
|
183
175
|
optimizeDeps: {
|
|
184
176
|
include: ["defuss-astro/client.js", "defuss-astro/server.js"]
|
|
185
177
|
},
|
|
186
|
-
ssr: {
|
|
187
|
-
noExternal: ["lightningimg-node"]
|
|
188
|
-
},
|
|
189
178
|
plugins: [defussVitePlugin()]
|
|
190
179
|
}
|
|
191
180
|
});
|
package/dist/index.mjs
CHANGED
|
@@ -157,16 +157,8 @@ function index({
|
|
|
157
157
|
config,
|
|
158
158
|
addRenderer,
|
|
159
159
|
updateConfig,
|
|
160
|
-
command
|
|
161
|
-
injectScript,
|
|
162
|
-
injectRoute
|
|
160
|
+
command
|
|
163
161
|
}) => {
|
|
164
|
-
injectRoute({
|
|
165
|
-
pattern: "/_defuss/image",
|
|
166
|
-
prerender: false,
|
|
167
|
-
entrypoint: "defuss-astro/image-endpoint.js"
|
|
168
|
-
});
|
|
169
|
-
fileURLToPath(config.publicDir);
|
|
170
162
|
config.compressHTML = true;
|
|
171
163
|
config.scopedStyleStrategy = "class";
|
|
172
164
|
if (!config.vite.build) {
|
|
@@ -179,9 +171,6 @@ function index({
|
|
|
179
171
|
optimizeDeps: {
|
|
180
172
|
include: ["defuss-astro/client.js", "defuss-astro/server.js"]
|
|
181
173
|
},
|
|
182
|
-
ssr: {
|
|
183
|
-
noExternal: ["lightningimg-node"]
|
|
184
|
-
},
|
|
185
174
|
plugins: [defussVitePlugin()]
|
|
186
175
|
}
|
|
187
176
|
});
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "defuss-astro",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.5.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
7
7
|
},
|
|
8
8
|
"license": "MIT",
|
|
9
|
-
"description": "
|
|
9
|
+
"description": "defuss integration for Astro",
|
|
10
10
|
"keywords": [
|
|
11
11
|
"jsx",
|
|
12
12
|
"render",
|
|
@@ -56,10 +56,6 @@
|
|
|
56
56
|
"types": "./dist/server.d.mts",
|
|
57
57
|
"default": "./dist/server.mjs"
|
|
58
58
|
}
|
|
59
|
-
},
|
|
60
|
-
"./image-endpoint.js": {
|
|
61
|
-
"types": "./dist/endpoint/image-endpoint.d.mts",
|
|
62
|
-
"default": "./dist/endpoint/image-endpoint.mjs"
|
|
63
59
|
}
|
|
64
60
|
},
|
|
65
61
|
"main": "./dist/index.cjs",
|
|
@@ -83,7 +79,6 @@
|
|
|
83
79
|
"vite": "^6.4.1",
|
|
84
80
|
"fast-glob": "^3.3.3",
|
|
85
81
|
"svgo": "^4.0.0",
|
|
86
|
-
"lightningimg": "^1.0.3",
|
|
87
82
|
"purgecss": "^7.0.2",
|
|
88
83
|
"file-type": "^21.3.0"
|
|
89
84
|
}
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var fileType = require('file-type');
|
|
4
|
-
var lightningimg = require('lightningimg');
|
|
5
|
-
|
|
6
|
-
const GET = async ({ url }) => {
|
|
7
|
-
try {
|
|
8
|
-
const imgHrefRelative = url.searchParams.get("href");
|
|
9
|
-
const height = url.searchParams.get("h");
|
|
10
|
-
const width = url.searchParams.get("w");
|
|
11
|
-
const quality = url.searchParams.get("q");
|
|
12
|
-
if (!imgHrefRelative) {
|
|
13
|
-
return new Response("Image URL is required", { status: 400 });
|
|
14
|
-
}
|
|
15
|
-
const imgHrefAbsolute = `${url.protocol}//${url.host}${imgHrefRelative}`;
|
|
16
|
-
console.log("GET /_defuss/image (transforming: ", imgHrefAbsolute, ")");
|
|
17
|
-
const response = await fetch(imgHrefAbsolute);
|
|
18
|
-
if (!response.ok) {
|
|
19
|
-
console.log("Error fetching image", { imgHrefAbsolute, response });
|
|
20
|
-
return new Response("Error fetching image", { status: 500 });
|
|
21
|
-
}
|
|
22
|
-
const imageBuffer = Buffer.from(await response.arrayBuffer());
|
|
23
|
-
const imageDimensions = await lightningimg.getImageInfo(imageBuffer);
|
|
24
|
-
const fileExtension = (await fileType.fileTypeFromBuffer(imageBuffer))?.ext;
|
|
25
|
-
if (!fileExtension) {
|
|
26
|
-
console.log("Error fetching fileExtension", { fileExtension, response });
|
|
27
|
-
return new Response("Error getting file extension", { status: 500 });
|
|
28
|
-
}
|
|
29
|
-
if (fileExtension === "webp") {
|
|
30
|
-
return new Response(imageBuffer, {
|
|
31
|
-
headers: {
|
|
32
|
-
"Content-Type": "image/webp",
|
|
33
|
-
"Content-Length": imageBuffer.byteLength.toString()
|
|
34
|
-
}
|
|
35
|
-
});
|
|
36
|
-
}
|
|
37
|
-
let convertedImageBuffer;
|
|
38
|
-
try {
|
|
39
|
-
convertedImageBuffer = await lightningimg.convertImageBuffer(
|
|
40
|
-
imageBuffer,
|
|
41
|
-
width ? Number.parseInt(width) : imageDimensions.width,
|
|
42
|
-
height ? Number.parseInt(height) : imageDimensions.height
|
|
43
|
-
);
|
|
44
|
-
if (!convertedImageBuffer) {
|
|
45
|
-
throw new Error("Error converting image: no buffer returned");
|
|
46
|
-
}
|
|
47
|
-
} catch (error) {
|
|
48
|
-
console.log("Error converting image", {
|
|
49
|
-
fileExtension,
|
|
50
|
-
bufferLength: imageBuffer.byteLength,
|
|
51
|
-
error
|
|
52
|
-
});
|
|
53
|
-
return new Response("Error converting image", { status: 500 });
|
|
54
|
-
}
|
|
55
|
-
const mimeType = `image/${fileExtension}`;
|
|
56
|
-
return new Response(convertedImageBuffer, {
|
|
57
|
-
headers: {
|
|
58
|
-
"Content-Type": mimeType,
|
|
59
|
-
"Content-Length": convertedImageBuffer.length.toString()
|
|
60
|
-
}
|
|
61
|
-
});
|
|
62
|
-
} catch (error) {
|
|
63
|
-
return new Response(`Error fetching image: ${error}`, { status: 500 });
|
|
64
|
-
}
|
|
65
|
-
};
|
|
66
|
-
|
|
67
|
-
exports.GET = GET;
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import { fileTypeFromBuffer } from 'file-type';
|
|
2
|
-
import { getImageInfo, convertImageBuffer } from 'lightningimg';
|
|
3
|
-
|
|
4
|
-
const GET = async ({ url }) => {
|
|
5
|
-
try {
|
|
6
|
-
const imgHrefRelative = url.searchParams.get("href");
|
|
7
|
-
const height = url.searchParams.get("h");
|
|
8
|
-
const width = url.searchParams.get("w");
|
|
9
|
-
const quality = url.searchParams.get("q");
|
|
10
|
-
if (!imgHrefRelative) {
|
|
11
|
-
return new Response("Image URL is required", { status: 400 });
|
|
12
|
-
}
|
|
13
|
-
const imgHrefAbsolute = `${url.protocol}//${url.host}${imgHrefRelative}`;
|
|
14
|
-
console.log("GET /_defuss/image (transforming: ", imgHrefAbsolute, ")");
|
|
15
|
-
const response = await fetch(imgHrefAbsolute);
|
|
16
|
-
if (!response.ok) {
|
|
17
|
-
console.log("Error fetching image", { imgHrefAbsolute, response });
|
|
18
|
-
return new Response("Error fetching image", { status: 500 });
|
|
19
|
-
}
|
|
20
|
-
const imageBuffer = Buffer.from(await response.arrayBuffer());
|
|
21
|
-
const imageDimensions = await getImageInfo(imageBuffer);
|
|
22
|
-
const fileExtension = (await fileTypeFromBuffer(imageBuffer))?.ext;
|
|
23
|
-
if (!fileExtension) {
|
|
24
|
-
console.log("Error fetching fileExtension", { fileExtension, response });
|
|
25
|
-
return new Response("Error getting file extension", { status: 500 });
|
|
26
|
-
}
|
|
27
|
-
if (fileExtension === "webp") {
|
|
28
|
-
return new Response(imageBuffer, {
|
|
29
|
-
headers: {
|
|
30
|
-
"Content-Type": "image/webp",
|
|
31
|
-
"Content-Length": imageBuffer.byteLength.toString()
|
|
32
|
-
}
|
|
33
|
-
});
|
|
34
|
-
}
|
|
35
|
-
let convertedImageBuffer;
|
|
36
|
-
try {
|
|
37
|
-
convertedImageBuffer = await convertImageBuffer(
|
|
38
|
-
imageBuffer,
|
|
39
|
-
width ? Number.parseInt(width) : imageDimensions.width,
|
|
40
|
-
height ? Number.parseInt(height) : imageDimensions.height
|
|
41
|
-
);
|
|
42
|
-
if (!convertedImageBuffer) {
|
|
43
|
-
throw new Error("Error converting image: no buffer returned");
|
|
44
|
-
}
|
|
45
|
-
} catch (error) {
|
|
46
|
-
console.log("Error converting image", {
|
|
47
|
-
fileExtension,
|
|
48
|
-
bufferLength: imageBuffer.byteLength,
|
|
49
|
-
error
|
|
50
|
-
});
|
|
51
|
-
return new Response("Error converting image", { status: 500 });
|
|
52
|
-
}
|
|
53
|
-
const mimeType = `image/${fileExtension}`;
|
|
54
|
-
return new Response(convertedImageBuffer, {
|
|
55
|
-
headers: {
|
|
56
|
-
"Content-Type": mimeType,
|
|
57
|
-
"Content-Length": convertedImageBuffer.length.toString()
|
|
58
|
-
}
|
|
59
|
-
});
|
|
60
|
-
} catch (error) {
|
|
61
|
-
return new Response(`Error fetching image: ${error}`, { status: 500 });
|
|
62
|
-
}
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
export { GET };
|