Task update2024

core/modules/inline-svg/index.js

@@ -8,6 +8,7 @@ import _ from 'underscore';
 import svgToMiniDataURI from 'mini-svg-data-uri';
 import imagemin from 'imagemin';
 import imageminSvgo from 'imagemin-svgo';
+import { Buffer } from 'node:buffer';
 
 export class InlineSvg {
 	/**
@@ -15,7 +16,6 @@ export class InlineSvg {
 	 *
 	 * @param {String} _svgFilePath The path to the folder containing the SVGs
 	 * @param {Object} _options Configuration object
-	 * @returns {Promise}
 	 */
 	constructor(_svgFilePath, _options) {
 		let defaultOptions = {
@@ -26,40 +26,41 @@ export class InlineSvg {
 		this._files = {};
 		this._svgs = [];
 		this._options = _.extend(defaultOptions, _options);
-		return this._process(_svgFilePath);
+		this._svgFilePath = _svgFilePath;
+	}
+
+	static async create(_svgFilePath, _options) {
+		const instance = new InlineSvg(_svgFilePath, _options);
+		return instance._process(_svgFilePath);
 	}
 
 	/**
 	 * Process all SVG files
 	 *
-	 * @param {String} _svgFilePath The path to the folder containing the SVGs
+	 * @param {string} _svgFilePath The path to the folder containing the SVGs
 	 */
 	async _process(_svgFilePath) {
-		return new Promise(async (_resolve, _reject) => {
-			try {
-				let svgs = await this._readFiles(_svgFilePath);
-				let templateContent = this._getTemplateContent();
+		try {
+			let svgs = await this._readFiles(_svgFilePath);
+			let templateContent = this._getTemplateContent();
 
-				// Skip the imagemin optimization for now to see if that's causing the issue
-				/*let optimizedTemplate = await imagemin.buffer(Buffer.from(templateContent), {
-					plugins: [
-						imageminSvgo()
-					]
-				});*/
+			// Convert string to Buffer before passing to imagemin
+			let optimizedTemplateBuffer = await imagemin.buffer(Buffer.from(templateContent), {
+				plugins: [imageminSvgo()],
+			});
 
-				svgs.forEach((svg) => this._processSvg(svg, _svgFilePath));
-				let template = mustache.render(
-					templateContent, // Use raw template content instead of optimizedTemplate
-					_.extend({}, this._options.context, {
-						svgs: this._svgs,
-					}),
-				);
-				_resolve(template);
-			} catch (error) {
-				_reject(error); // Add proper error handling
-				console.error('Template processing error:', error);
-			}
-		});
+			svgs.forEach((svg) => this._processSvg(svg, _svgFilePath));
+			let template = mustache.render(
+				Buffer.from(optimizedTemplateBuffer).toString('utf8'),
+				_.extend({}, this._options.context, {
+					svgs: this._svgs,
+				}),
+			);
+			return template;
+		} catch (error) {
+			console.error('Template processing error:', error);
+			throw error;
+		}
 	}
 
 	/**
@@ -84,6 +85,7 @@ export class InlineSvg {
 				.replaceAll('/', '-')
 				.replace('.svg', '')
 				.replace('fontawesome-', ''),
+			// add fill="white" to allow later color changes based on this value
 			inline: svgToMiniDataURI(
 				_data.content.includes('fill=')
 					? _data.content
@@ -139,18 +141,16 @@ export class InlineSvg {
 	 * @returns {Promise}
 	 */
 	async _readFiles(_path) {
-		return new Promise(async (resolve, reject) => {
-			let files = await globby.globby(path.join(_path, '*.svg'));
-			let svgs = [];
-			await files.forEach(async (_file) => {
-				let content = fs.readFileSync(_file, 'utf8');
-				svgs.push({
-					fileName: _file,
-					content: content,
-				});
+		const files = await globby.globby(path.join(_path, '*.svg'));
+		const svgs = [];
+		files.forEach((_file) => {
+			const content = fs.readFileSync(_file, 'utf8');
+			svgs.push({
+				fileName: _file,
+				content: content,
 			});
-			resolve(svgs);
 		});
+		return svgs;
 	}
 
 	/**