💝 Performance tweak & prettier

.prettierrc

@@ -1,4 +1,4 @@
 {
-    "tabWidth": 4,
+  "tabWidth": 2,
   "useTabs": false
 }

src/config.ts

@@ -2,13 +2,12 @@ import { resolve } from "path";
 import { readdirSync, existsSync } from "fs";
 
 // Source Directory
-const svgsDir = resolve(__dirname, "svg");
+const staticCursorsDir = resolve(__dirname, "svg", "static");
-if (!existsSync(svgsDir)) {
+const animatedCursorsDir = resolve(__dirname, "svg", "animated");
-  console.log("Source .svg files not found");
-}
 
-const staticCursorsDir = resolve(svgsDir, "static");
+if (!existsSync(staticCursorsDir) || !existsSync(animatedCursorsDir)) {
-const animatedCursorsDir = resolve(svgsDir, "animated");
+  throw new Error("svg directory not found");
+}
 
 // Out Directory
 const bitmapsDir = resolve(__dirname, "../", "bitmaps");

src/index.ts

@@ -1,12 +1,36 @@
+import "module-alias/register";
+
 import fs from "fs";
 import path from "path";
-import puppeteer from "puppeteer";
+import Pixelmatch from "pixelmatch";
 
-import { htmlTemplate } from "./utils/htmlTemplate";
+import { PNG } from "pngjs";
-import { staticCursors, bitmapsDir, animatedCursors } from "./config";
+import puppeteer, { ElementHandle, Page } from "puppeteer";
-import { matchImages } from "./utils/matchImages";
+
-import { saveFrames, Frames } from "./utils/saveFrames";
+import { animatedCursors, bitmapsDir, staticCursors } from "./config";
 import { getFrameName } from "./utils/getFrameName";
+import { toHTML } from "./utils/toHTML";
+
+const getSVGElement = async (page: Page) => {
+  const svg = await page.$("#container svg");
+
+  if (!svg) {
+    throw new Error("svg element not found!");
+  }
+  return svg;
+};
+
+const screenshot = async (element: ElementHandle<Element>): Promise<Buffer> => {
+  return await element.screenshot({
+    omitBackground: true,
+    encoding: "binary",
+  });
+};
+
+const saveFrame = (key: string, frame: Buffer) => {
+  const out_path = path.resolve(bitmapsDir, key);
+  fs.writeFileSync(out_path, frame, { encoding: "binary" });
+};
 
 const main = async () => {
   const browser = await puppeteer.launch({
@@ -18,100 +42,70 @@ const main = async () => {
     fs.mkdirSync(bitmapsDir);
   }
 
-  try {
+  for (const svgFilePath of staticCursors) {
-    console.log("📸 Rendering Static Cursors...");
+    const svgData = fs.readFileSync(svgFilePath, "utf-8");
+    if (!svgData) {
+      throw new Error(`${svgFilePath} File Read error`);
+    }
 
-    for (let svgPath of staticCursors) {
-      const buffer = fs.readFileSync(path.resolve(svgPath), "utf8");
-      if (!buffer) throw new Error(`${svgPath} File Read error`);
-
-      // Generating HTML Template
-      const data = buffer.toString();
-      const template = htmlTemplate(data);
-
-      // config
-      const bitmapName = `${path.basename(svgPath, ".svg")}.png`;
-      const out = path.resolve(bitmapsDir, bitmapName);
-
-      // Render
     const page = await browser.newPage();
-      await page.setContent(template);
+    const html = toHTML(svgData);
 
-      await page.waitForSelector("#container");
+    await page.setContent(html);
-      const svgElement = await page.$("#container svg");
+    const svg = await getSVGElement(page);
-      if (!svgElement) throw new Error("svg element not found");
-      await svgElement.screenshot({ omitBackground: true, path: out });
 
+    const key = `${path.basename(svgFilePath, ".svg")}.png`;
+    const out = path.join(bitmapsDir, key);
+
+    console.log("Saving", key, "...");
+    await svg.screenshot({ omitBackground: true, path: out });
     await page.close();
   }
 
-    console.log("🎥 Rendering Animated Cursors...");
+  for (const svgFilePath of animatedCursors) {
-
+    const svgData = fs.readFileSync(svgFilePath, "utf8");
-    for (let svgPath of animatedCursors) {
+    if (!svgData) {
-      const buffer = fs.readFileSync(svgPath, "utf8");
+      throw new Error(`${svgFilePath} File Read error`);
-      if (!buffer) throw new Error(`${svgPath} File Read error`);
+    }
-
-      // Generating HTML Template
-      const data = buffer.toString();
-      const template = htmlTemplate(data);
 
     const page = await browser.newPage();
-      await page.setContent(template, { waitUntil: "networkidle2" });
+    const html = toHTML(svgData);
 
-      await page.waitForSelector("#container");
+    await page.setContent(html);
-      const svgElement = await page.$("#container svg");
+    const svg = await getSVGElement(page);
-      if (!svgElement) throw new Error("svg element not found");
 
-      // Render Config
     let index = 1;
     let breakRendering = false;
-      const frames: Frames = {};
-      const firstKey = getFrameName(index, svgPath);
 
-      console.log("Rendering", path.basename(svgPath), "...");
+    // Rendering 1st frame
-      console.log(firstKey);
+    const img1 = await screenshot(svg);
+    const key1 = getFrameName(index, svgFilePath);
 
-      // 1st Frame
+    console.log("Saving", key1, "...");
-      frames[firstKey] = {
+    saveFrame(key1, img1);
-        buffer: await svgElement.screenshot({
-          omitBackground: true,
-          encoding: "binary",
-        }),
-      };
 
-      //  Pushing frames until it match to 1st frame
+    // Rendering frames till `imgN` matched to `img1`
-      index++;
     while (!breakRendering) {
-        const newFrame = await svgElement.screenshot({
+      ++index;
-          omitBackground: true,
+      const imgN = await screenshot(svg);
-          encoding: "binary",
+      const keyN = getFrameName(index, svgFilePath);
-        });
-        const key = getFrameName(index, svgPath);
-        console.log(key);
-        const diff = matchImages({
-          img1Buff: frames[firstKey].buffer,
-          img2Buff: newFrame,
-        });
 
-        if (!(diff < 700)) {
+      console.log("Saving", keyN, "...");
-          frames[key] = { buffer: newFrame };
+      saveFrame(keyN, imgN);
-        } else {
-          breakRendering = true;
-        }
-        index++;
-      }
 
-      saveFrames(frames);
+      const { data: img1Data, width, height } = PNG.sync.read(img1);
+      const { data: imgNData } = PNG.sync.read(imgN);
+
+      const diff = Pixelmatch(img1Data, imgNData, null, width, height);
+
+      if (diff <= 100) {
+        breakRendering = !breakRendering;
+      }
+    }
 
     await page.close();
   }
-
+  await browser.close();
-    console.log(`\nBitmaps stored at ${bitmapsDir}\n\n🎉 Render Done.`);
-    process.exit(0);
-  } catch (error) {
-    console.error(error);
-    process.exit(1);
-  }
 };
 
 main();