Htmlparser added #1

lib/imageset/htmlparser.ts

@@ -0,0 +1,157 @@
+import { Cheerio, CheerioAPI, Element, load } from "cheerio";
+import { readFile } from "fs/promises";
+import { dirname, join, resolve } from "path";
+import configurations from "../../configLoader";
+import { ImageAttributes, ImageTagsRecord, SrcRecord } from "../options";
+import { getImageSize } from "./cssrender";
+const {
+	imageSetConfigurations: { screenSizes },
+} = configurations;
+
+/*
+ *@param_1 - tag {Cheerio Elem} => img tag to process
+ *@param_2 - htmlfile {String} => html file url to render and find W & H of img.
+ *@param_3 - htmlTree {Cheerio API} => cheerio html tree
+ */
+/* Responsible to process image tags, one at a time */
+function _processImgTag(
+	tag: Cheerio<Element>,
+	htmlfile: string,
+	htmlTree: CheerioAPI,
+): Promise<SrcRecord> {
+	// extracting src
+	let imageLink: string = htmlTree(tag).attr("src") ?? "";
+	imageLink = join(dirname(htmlfile), imageLink);
+
+	// extracting id
+	let id: string = htmlTree(tag).attr("id") ?? "";
+	id = id ? `#${id}` : "";
+
+	// extracting classes
+	const classes: string = htmlTree(tag).attr("class") ?? "";
+	const classList: string[] = classes
+		? classes.split(/\s+/).map((classname) => `.${classname}`)
+		: [];
+
+	//require attributes for (<picture>)imagesets of per img tag
+	const attributes: ImageAttributes = {
+		id: id,
+		class: classes,
+		alt: htmlTree(tag).attr("alt") ?? "",
+		loading: htmlTree(tag).attr("loading") ?? "",
+		style: htmlTree(tag).attr("style") ?? "",
+	};
+
+	return new Promise((complete, reject) => {
+		const selectors: { id: string; classes: string[] } = {
+			id: id,
+			classes: classList,
+		};
+
+		getImageSize(selectors, htmlfile, screenSizes)
+			.then((imageSizes) => {
+				const imageRecord: SrcRecord = new SrcRecord(
+					imageLink,
+					id,
+					classList,
+					imageSizes,
+					attributes,
+				);
+
+				complete(imageRecord);
+			})
+			.catch((error) => {
+				reject(error);
+			});
+	});
+}
+
+/*
+ *@param_1 - imgTags {Cheerio<Element>[]} => List of Available img tags to process
+ *@param_2 - htmlfile {String} => html file url to render and find W & H of img.
+ *@param_3 - htmlTree {Cheerio} => cheerio html tree
+ */
+//Responsible to process image tags simultaneosly
+function processImgTags(
+	imgTags: Cheerio<Element>[],
+	htmlfile: string,
+	htmlTree: CheerioAPI,
+): Promise<ImageTagsRecord> {
+	const promises: (() => Promise<SrcRecord>)[] = [];
+
+	//Mapping pr to each img-tag.
+	for (let index = 0; index < imgTags.length; index++) {
+		promises.push(() => {
+			return _processImgTag(imgTags[index], htmlfile, htmlTree);
+		});
+	}
+
+	return new Promise((complete, reject) => {
+		//calling all promised functions
+		Promise.all(promises.map((func) => func()))
+			.then((records: SrcRecord[]) => {
+				const imageTagsRecord: ImageTagsRecord = {
+					htmlFile: htmlfile,
+					ImageRecords: records,
+				};
+
+				complete(imageTagsRecord);
+			})
+			.catch((error) => {
+				reject(error);
+			});
+	});
+}
+
+function _extractImagesRecord(htmlfile: string): Promise<ImageTagsRecord> {
+	//Make absolute path
+	htmlfile = resolve(htmlfile);
+
+	return new Promise((complete, reject) => {
+		readFile(htmlfile, { encoding: "utf8" }).then(
+			(htmlContent: string) => {
+				//parse html tree
+				const htmlTree: CheerioAPI = load(htmlContent);
+
+				//find img tags
+				const imgTags: any = htmlTree("img");
+
+				if (!imgTags) {
+					//close if it's no img tag
+					complete({} as ImageTagsRecord);
+				}
+
+				processImgTags(imgTags, htmlfile, htmlTree)
+					.then((recordObjects: ImageTagsRecord) => {
+						complete(recordObjects);
+					})
+					.catch((error) => {
+						reject(error);
+					}); //processImgTags ended
+			},
+		); //readFile ended
+	}); //Promise ended
+}
+
+export async function htmlParser(
+	htmlFiles: string[],
+): Promise<ImageTagsRecord[]> {
+	const htmlParsePromises: (() => Promise<ImageTagsRecord>)[] = [];
+
+	for (const htmlfile of htmlFiles) {
+		htmlParsePromises.push(() => {
+			return _extractImagesRecord(htmlfile);
+		});
+	}
+
+	const recordTable: ImageTagsRecord[] = await Promise.all(
+		htmlParsePromises.map((func) => func()),
+	);
+
+	/* writeFileSync(
+		process.cwd() + "/op.json",
+		JSON.stringify(recordTable, null, 2),
+	); */
+
+	return recordTable;
+}

lib/options.ts

@@ -153,3 +153,38 @@ export interface ConfigurationOptions {
 }
 
 export type ImageWorkerOutputTypes = "jpg" | "avif" | "webp" | "svg";
+
+export interface ImageTagsRecord {
+	htmlFile: string;
+	ImageRecords: SrcRecord[];
+}
+
+export class SrcRecord {
+	imageLink: string;
+	id: string;
+	classes: string[];
+	imageSizes: Record<string, number>;
+	attributes: ImageAttributes;
+
+	constructor(
+		imageLink: string,
+		id: string,
+		classes: string[],
+		imageSizes: Record<string, number>,
+		attributes: ImageAttributes,
+	) {
+		this.imageLink = imageLink; //String
+		this.id = id; //String
+		this.classes = classes; //Array
+		this.imageSizes = imageSizes;
+		this.attributes = attributes;
+	}
+}
+
+export interface ImageAttributes {
+	id: string;
+	class: string;
+	alt: string;
+	loading: string;
+	style: string;
+}

test/samples/webdoc/css/one.css

@@ -0,0 +1,67 @@
+/* Base styles for images */
+img {
+    display: block;
+    width: 1px;
+    height: auto;
+}
+
+/* Screen size 1X: 0px to 600px */
+@media (min-width: 0px) and (max-width: 600px) {
+    #cat, .cat {
+        width: 100px;
+        height: 75px;
+    }
+    #dog, .dog {
+        width: 120px;
+        height: 80px;
+    }
+    #horse, .horse {
+        width: 150px;
+        height: 100px;
+    }
+    #flower, .flower {
+        width: 110px;
+        height: 90px;
+    }
+}
+
+/* Screen size 2X: 601px to 1080px */
+@media (min-width: 601px) and (max-width: 1080px) {
+    #cat, .cat {
+        width: 150px;
+        height: 100px;
+    }
+    #dog, .dog {
+        width: 180px;
+        height: 120px;
+    }
+    #horse, .horse {
+        width: 200px;
+        height: 150px;
+    }
+    #flower, .flower {
+        width: 160px;
+        height: 120px;
+    }
+}
+
+/* Screen size 3X: 1081px to 1920px */
+@media (min-width: 1081px) and (max-width: 1920px) {
+    #cat, .cat {
+        width: 200px;
+        height: 150px;
+    }
+    #dog, .dog {
+        width: 240px;
+        height: 160px;
+    }
+    #horse, .horse {
+        width: 300px;
+        height: 200px;
+    }
+    #flower, .flower {
+        width: 220px;
+        height: 170px;
+    }
+}
+

test/samples/webdoc/css/two.css

@@ -0,0 +1,39 @@
+/* Screen size 4X: 1921px to 2560px */
+@media (min-width: 1921px) and (max-width: 2560px) {
+    #cat, .cat {
+        width: 250px;
+        height: 200px;
+    }
+    #dog, .dog {
+        width: 300px;
+        height: 220px;
+    }
+    #horse, .horse {
+        width: 350px;
+        height: 250px;
+    }
+    #flower, .flower {
+        width: 280px;
+        height: 220px;
+    }
+}
+
+/* Screen size 5X: 2561px to 3840px */
+@media (min-width: 2561px) and (max-width: 3840px) {
+    #cat, .cat {
+        width: 300px;
+        height: 250px;
+    }
+    #dog, .dog {
+        width: 350px;
+        height: 280px;
+    }
+    #horse, .horse {
+        width: 400px;
+        height: 300px;
+    }
+    #flower, .flower {
+        width: 350px;
+        height: 280px;
+    }
+}