@ecopages/image-processor 0.2.0-beta.9 → 0.2.0-rc.1
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 +22 -3
- package/package.json +20 -13
- package/src/bun-plugins.js +48 -29
- package/src/component/html.js +12 -6
- package/src/component/jsx.d.ts +12 -0
- package/src/component/jsx.js +18 -0
- package/src/component/react.js +17 -10
- package/src/constants.js +5 -4
- package/src/image-plugins.js +48 -29
- package/src/image-processor.js +147 -135
- package/src/image-renderer.js +222 -220
- package/src/image-runtime-state.d.ts +20 -0
- package/src/image-runtime-state.js +59 -0
- package/src/image-types.d.ts +3 -0
- package/src/image-utils.js +109 -98
- package/src/index.js +3 -3
- package/src/plugin.d.ts +30 -10
- package/src/plugin.js +315 -271
- package/src/types.js +1 -0
- package/src/utils.js +24 -25
package/src/image-processor.js
CHANGED
|
@@ -1,141 +1,153 @@
|
|
|
1
|
-
import path from
|
|
2
|
-
import { mergeProcessorOptions } from
|
|
3
|
-
import { fileSystem } from
|
|
4
|
-
import { Logger } from
|
|
5
|
-
import sharp from
|
|
6
|
-
import { ImageUtils } from
|
|
7
|
-
const appLogger = new Logger(
|
|
8
|
-
|
|
1
|
+
import path from 'node:path';
|
|
2
|
+
import { mergeProcessorOptions } from '@ecopages/core/plugins/processor';
|
|
3
|
+
import { fileSystem } from '@ecopages/file-system';
|
|
4
|
+
import { Logger } from '@ecopages/logger';
|
|
5
|
+
import sharp, {} from 'sharp';
|
|
6
|
+
import { ImageUtils } from './image-utils.js';
|
|
7
|
+
const appLogger = new Logger('[@ecopages/image-processor]', {
|
|
8
|
+
debug: process.env.ECOPAGES_LOGGER_DEBUG === 'true',
|
|
9
9
|
});
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
10
|
+
/**
|
|
11
|
+
* ImageProcessor
|
|
12
|
+
* This is the core class for processing images.
|
|
13
|
+
* It uses the sharp library to resize and optimize images.
|
|
14
|
+
*/
|
|
15
|
+
export class ImageProcessor {
|
|
16
|
+
config;
|
|
17
|
+
cacheManager;
|
|
18
|
+
constructor(config, cacheManager) {
|
|
19
|
+
this.config = mergeProcessorOptions({ cacheEnabled: true }, config);
|
|
20
|
+
this.cacheManager = cacheManager;
|
|
21
|
+
fileSystem.ensureDir(this.config.outputDir);
|
|
22
|
+
}
|
|
23
|
+
async calculateDimensions(metadata, targetWidth) {
|
|
24
|
+
const originalWidth = metadata.width || 0;
|
|
25
|
+
const originalHeight = metadata.height || 0;
|
|
26
|
+
const aspectRatio = originalHeight / originalWidth;
|
|
27
|
+
const width = Math.min(targetWidth, originalWidth);
|
|
28
|
+
const height = Math.round(width * aspectRatio);
|
|
29
|
+
return { width, height };
|
|
30
|
+
}
|
|
31
|
+
getOutputPath(imagePath, width) {
|
|
32
|
+
const hash = fileSystem.hash(imagePath);
|
|
33
|
+
const ext = path.extname(imagePath);
|
|
34
|
+
const base = path.basename(imagePath, ext);
|
|
35
|
+
const filename = `${base}-${hash}-${width}.${this.config.format}`;
|
|
36
|
+
return path.join(this.config.outputDir, filename);
|
|
37
|
+
}
|
|
38
|
+
async processImage(imagePath) {
|
|
39
|
+
try {
|
|
40
|
+
const fileHash = fileSystem.hash(imagePath);
|
|
41
|
+
const cacheKey = `${path.basename(imagePath)}:${fileHash}`;
|
|
42
|
+
if (this.config.cacheEnabled) {
|
|
43
|
+
const cached = await this.cacheManager.readCache(cacheKey);
|
|
44
|
+
if (cached) {
|
|
45
|
+
const mainFilePath = path.join(this.config.outputDir, path.basename(cached.attributes.src));
|
|
46
|
+
const mainFileExists = fileSystem.exists(mainFilePath);
|
|
47
|
+
const variantsExist = cached.variants.every((variant) => fileSystem.exists(path.join(this.config.outputDir, path.basename(variant.src))));
|
|
48
|
+
if (mainFileExists && variantsExist) {
|
|
49
|
+
appLogger.debug(`Cache hit for ${imagePath}`);
|
|
50
|
+
return cached;
|
|
51
|
+
}
|
|
52
|
+
appLogger.debug(`Cache invalid for ${imagePath}, reprocessing`);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
fileSystem.ensureDir(this.config.outputDir);
|
|
56
|
+
const metadata = await sharp(imagePath).metadata();
|
|
57
|
+
const originalWidth = metadata.width || 0;
|
|
58
|
+
const originalHeight = metadata.height || 0;
|
|
59
|
+
if (this.config.sizes.length === 0) {
|
|
60
|
+
const outputPath = this.getOutputPath(imagePath, originalWidth);
|
|
61
|
+
if (fileSystem.exists(outputPath)) {
|
|
62
|
+
appLogger.debug(`Using existing file for ${imagePath}`);
|
|
63
|
+
}
|
|
64
|
+
else {
|
|
65
|
+
await sharp(imagePath)
|
|
66
|
+
.toFormat(this.config.format, { quality: this.config.quality })
|
|
67
|
+
.toFile(outputPath);
|
|
68
|
+
}
|
|
69
|
+
const src = path.join(this.config.publicPath, path.basename(outputPath));
|
|
70
|
+
const imageSpecifications = {
|
|
71
|
+
attributes: {
|
|
72
|
+
src,
|
|
73
|
+
width: originalWidth,
|
|
74
|
+
height: originalHeight,
|
|
75
|
+
sizes: '',
|
|
76
|
+
},
|
|
77
|
+
variants: [],
|
|
78
|
+
cacheKey,
|
|
79
|
+
};
|
|
80
|
+
if (this.config.cacheEnabled) {
|
|
81
|
+
await this.cacheManager.writeCache(cacheKey, imageSpecifications);
|
|
82
|
+
}
|
|
83
|
+
return imageSpecifications;
|
|
84
|
+
}
|
|
85
|
+
let applicableSizes = this.config.sizes
|
|
86
|
+
.filter((size) => size.width <= originalWidth)
|
|
87
|
+
.sort((a, b) => b.width - a.width);
|
|
88
|
+
if (applicableSizes.length === 0) {
|
|
89
|
+
applicableSizes = this.config.sizes.sort((a, b) => b.width - a.width).slice(0, 1);
|
|
90
|
+
}
|
|
91
|
+
const variants = await Promise.all(applicableSizes.map(async ({ width: targetWidth, label }) => {
|
|
92
|
+
const { width, height } = await this.calculateDimensions(metadata, targetWidth);
|
|
93
|
+
const outputPath = this.getOutputPath(imagePath, width);
|
|
94
|
+
if (fileSystem.exists(outputPath)) {
|
|
95
|
+
appLogger.debug(`Variant ${width}px already exists for ${imagePath}`);
|
|
96
|
+
}
|
|
97
|
+
else {
|
|
98
|
+
await sharp(imagePath)
|
|
99
|
+
.resize(width, height)
|
|
100
|
+
.toFormat(this.config.format, { quality: this.config.quality })
|
|
101
|
+
.toFile(outputPath);
|
|
102
|
+
}
|
|
103
|
+
const src = path.join(this.config.publicPath, path.basename(outputPath));
|
|
104
|
+
return {
|
|
105
|
+
width,
|
|
106
|
+
height,
|
|
107
|
+
src,
|
|
108
|
+
label,
|
|
109
|
+
};
|
|
110
|
+
}));
|
|
111
|
+
const mainVariant = variants[0];
|
|
112
|
+
const attributes = {
|
|
113
|
+
src: mainVariant.src,
|
|
114
|
+
width: mainVariant.width,
|
|
115
|
+
height: mainVariant.height,
|
|
116
|
+
sizes: ImageUtils.generateSizes(variants),
|
|
117
|
+
srcset: ImageUtils.generateSrcset(variants),
|
|
118
|
+
};
|
|
119
|
+
const imageSpecifications = {
|
|
120
|
+
attributes,
|
|
121
|
+
variants,
|
|
122
|
+
cacheKey,
|
|
123
|
+
};
|
|
124
|
+
if (this.config.cacheEnabled) {
|
|
125
|
+
await this.cacheManager.writeCache(cacheKey, imageSpecifications);
|
|
126
|
+
}
|
|
127
|
+
return imageSpecifications;
|
|
50
128
|
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
const
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
129
|
+
catch (error) {
|
|
130
|
+
appLogger.error(`Failed to process image ${imagePath}:`, error);
|
|
131
|
+
return null;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
async processDirectory() {
|
|
135
|
+
const acceptedFormats = this.config.acceptedFormats || ['jpg', 'jpeg', 'png', 'webp'];
|
|
136
|
+
const images = await fileSystem.glob([`${this.config.sourceDir}/**/*.{${acceptedFormats.join(',')}}`]);
|
|
137
|
+
appLogger.debugTime('Processing images');
|
|
138
|
+
const results = (await Promise.all(images.map(async (file) => {
|
|
139
|
+
const processed = await this.processImage(file);
|
|
140
|
+
if (!processed)
|
|
141
|
+
return null;
|
|
142
|
+
return [path.basename(file), processed];
|
|
143
|
+
}))).filter(Boolean);
|
|
144
|
+
appLogger.debugTimeEnd('Processing images');
|
|
145
|
+
if (process.env.ECOPAGES_BENCH === '1' && process.env.ECOPAGES_BENCH_VERBOSE !== '1') {
|
|
146
|
+
appLogger.debug(`Processed ${results.length} images`);
|
|
62
147
|
}
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
attributes: {
|
|
66
|
-
src,
|
|
67
|
-
width: originalWidth,
|
|
68
|
-
height: originalHeight,
|
|
69
|
-
sizes: ""
|
|
70
|
-
},
|
|
71
|
-
variants: [],
|
|
72
|
-
cacheKey
|
|
73
|
-
};
|
|
74
|
-
if (this.config.cacheEnabled) {
|
|
75
|
-
await this.cacheManager.writeCache(cacheKey, imageSpecifications2);
|
|
148
|
+
else {
|
|
149
|
+
appLogger.info(`Processed ${results.length} images`);
|
|
76
150
|
}
|
|
77
|
-
return
|
|
78
|
-
}
|
|
79
|
-
let applicableSizes = this.config.sizes.filter((size) => size.width <= originalWidth).sort((a, b) => b.width - a.width);
|
|
80
|
-
if (applicableSizes.length === 0) {
|
|
81
|
-
applicableSizes = this.config.sizes.sort((a, b) => b.width - a.width).slice(0, 1);
|
|
82
|
-
}
|
|
83
|
-
const variants = await Promise.all(
|
|
84
|
-
applicableSizes.map(async ({ width: targetWidth, label }) => {
|
|
85
|
-
const { width, height } = await this.calculateDimensions(metadata, targetWidth);
|
|
86
|
-
const outputPath = this.getOutputPath(imagePath, width);
|
|
87
|
-
if (fileSystem.exists(outputPath)) {
|
|
88
|
-
appLogger.debug(`Variant ${width}px already exists for ${imagePath}`);
|
|
89
|
-
} else {
|
|
90
|
-
await sharp(imagePath).resize(width, height).toFormat(this.config.format, { quality: this.config.quality }).toFile(outputPath);
|
|
91
|
-
}
|
|
92
|
-
const src = path.join(this.config.publicPath, path.basename(outputPath));
|
|
93
|
-
return {
|
|
94
|
-
width,
|
|
95
|
-
height,
|
|
96
|
-
src,
|
|
97
|
-
label
|
|
98
|
-
};
|
|
99
|
-
})
|
|
100
|
-
);
|
|
101
|
-
const mainVariant = variants[0];
|
|
102
|
-
const attributes = {
|
|
103
|
-
src: mainVariant.src,
|
|
104
|
-
width: mainVariant.width,
|
|
105
|
-
height: mainVariant.height,
|
|
106
|
-
sizes: ImageUtils.generateSizes(variants),
|
|
107
|
-
srcset: ImageUtils.generateSrcset(variants)
|
|
108
|
-
};
|
|
109
|
-
const imageSpecifications = {
|
|
110
|
-
attributes,
|
|
111
|
-
variants,
|
|
112
|
-
cacheKey
|
|
113
|
-
};
|
|
114
|
-
if (this.config.cacheEnabled) {
|
|
115
|
-
await this.cacheManager.writeCache(cacheKey, imageSpecifications);
|
|
116
|
-
}
|
|
117
|
-
return imageSpecifications;
|
|
118
|
-
} catch (error) {
|
|
119
|
-
appLogger.error(`Failed to process image ${imagePath}:`, error);
|
|
120
|
-
return null;
|
|
151
|
+
return Object.fromEntries(results);
|
|
121
152
|
}
|
|
122
|
-
}
|
|
123
|
-
async processDirectory() {
|
|
124
|
-
const acceptedFormats = this.config.acceptedFormats || ["jpg", "jpeg", "png", "webp"];
|
|
125
|
-
const images = await fileSystem.glob([`${this.config.sourceDir}/**/*.{${acceptedFormats.join(",")}}`]);
|
|
126
|
-
appLogger.debugTime("Processing images");
|
|
127
|
-
const results = (await Promise.all(
|
|
128
|
-
images.map(async (file) => {
|
|
129
|
-
const processed = await this.processImage(file);
|
|
130
|
-
if (!processed) return null;
|
|
131
|
-
return [path.basename(file), processed];
|
|
132
|
-
})
|
|
133
|
-
)).filter(Boolean);
|
|
134
|
-
appLogger.debugTimeEnd("Processing images");
|
|
135
|
-
appLogger.info(`Processed ${results.length} images`);
|
|
136
|
-
return Object.fromEntries(results);
|
|
137
|
-
}
|
|
138
153
|
}
|
|
139
|
-
export {
|
|
140
|
-
ImageProcessor
|
|
141
|
-
};
|