kist 0.1.36 → 0.1.37

package/js/actions/SvgToPngAction/SvgToPngAction.d.ts

@@ -2,7 +2,7 @@ import { Action } from "../../core/pipeline/Action";
 import { ActionOptionsType } from "../../types/ActionOptionsType";
 /**
  * SvgToPngAction converts SVG content to PNG format.
- * Uses `resvg-js` for conversion and `jsdom` for SVG element manipulation.
+ * Uses `canvg` for conversion and `jsdom` for SVG element manipulation.
  */
 export declare class SvgToPngAction extends Action {
     /**

package/js/actions/SvgToPngAction/SvgToPngAction.js

@@ -16,21 +16,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SvgToPngAction = void 0;
-const resvg_js_1 = require("@resvg/resvg-js");
+const canvas_1 = require("canvas");
+const canvg_1 = require("canvg");
 const fs_1 = __importDefault(require("fs"));
 const jsdom_1 = require("jsdom");
 const path_1 = __importDefault(require("path"));
 const Action_1 = require("../../core/pipeline/Action");
 // ============================================================================
+// Utilities
+// ============================================================================
+function getSafeRenderingContext(canvas) {
+    return canvas.getContext("2d");
+}
+// ============================================================================
 // Classes
 // ============================================================================
 /**
  * SvgToPngAction converts SVG content to PNG format.
- * Uses `resvg-js` for conversion and `jsdom` for SVG element manipulation.
+ * Uses `canvg` for conversion and `jsdom` for SVG element manipulation.
  */
 class SvgToPngAction extends Action_1.Action {
-    // Methods
-    // ========================================================================
     /**
      * Executes the SVG-to-PNG conversion process.
      * @param options - Options including SVG content, output path, width,
@@ -63,29 +68,27 @@ class SvgToPngAction extends Action_1.Action {
     convert(svgContent, outputPath, width, height) {
         return __awaiter(this, void 0, void 0, function* () {
             try {
-                // Ensure the output directory exists
                 const outputDir = path_1.default.dirname(outputPath);
                 if (!fs_1.default.existsSync(outputDir)) {
                     fs_1.default.mkdirSync(outputDir, { recursive: true });
                 }
-                // Parse SVG and apply width/height
                 const dom = new jsdom_1.JSDOM(svgContent);
                 const svgElement = dom.window.document.querySelector("svg");
                 if (!svgElement) {
                     throw new Error("Invalid SVG content");
                 }
-                if (width)
-                    svgElement.setAttribute("width", width.toString());
-                if (height)
-                    svgElement.setAttribute("height", height.toString());
+                const w = width ||
+                    parseInt(svgElement.getAttribute("width") || "800", 10);
+                const h = height ||
+                    parseInt(svgElement.getAttribute("height") || "600", 10);
+                svgElement.setAttribute("width", w.toString());
+                svgElement.setAttribute("height", h.toString());
                 const updatedSvgContent = svgElement.outerHTML;
-                // Render using Resvg
-                const resvg = new resvg_js_1.Resvg(updatedSvgContent, {
-                    fitTo: width && height
-                        ? { mode: "width", value: width }
-                        : undefined,
-                });
-                const pngBuffer = resvg.render().asPng();
+                const canvas = (0, canvas_1.createCanvas)(w, h);
+                const ctx = getSafeRenderingContext(canvas);
+                const canvg = yield canvg_1.Canvg.from(ctx, updatedSvgContent);
+                yield canvg.render();
+                const pngBuffer = canvas.toBuffer("image/png");
                 fs_1.default.writeFileSync(outputPath, pngBuffer);
             }
             catch (error) {
@@ -98,7 +101,7 @@ class SvgToPngAction extends Action_1.Action {
      * @returns A string description of the action.
      */
     describe() {
-        return "Converts SVG content to PNG format with optional resizing using resvg-js.";
+        return "Converts SVG content to PNG format with optional resizing using canvg and canvas.";
     }
 }
 exports.SvgToPngAction = SvgToPngAction;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kist",
-  "version": "0.1.36",
+  "version": "0.1.37",
   "description": "Package Pipeline Processor",
   "keywords": [
     "kist",
@@ -60,15 +60,14 @@
     "@babel/core": "^7.23.6",
     "@babel/preset-env": "^7.23.6",
     "@babel/preset-typescript": "^7.23.3",
-    "@resvg/resvg-js": "^2.6.2",
     "@types/fs-extra": "^11.0.4",
     "@types/glob": "^8.1.0",
-    "@types/jsdom": "^21.1.6",
     "@types/micromatch": "^4.0.9",
-    "@types/node": "^22.13.0",
     "@types/nunjucks": "^3.2.6",
     "@types/svg-sprite": "^0.0.39",
     "autoprefixer": "^10.4.21",
+    "canvas": "^3.1.0",
+    "canvg": "^4.0.3",
     "chokidar": "^4.0.0",
     "cssnano": "^7.0.4",
     "del": "^8.0.0",
@@ -80,7 +79,7 @@
     "fs-extra": "^11.2.0",
     "glob": "^11.0.0",
     "js-yaml": "^4.1.0",
-    "jsdom": "^26.0.0",
+    "jsdom": "^26.1.0",
     "lodash": "^4.17.21",
     "nunjucks": "^3.2.4",
     "postcss": "^8.4.32",

package/ts/actions/SvgToPngAction/SvgToPngAction.ts

@@ -2,25 +2,31 @@
 // Imports
 // ============================================================================
 
-import { Resvg } from "@resvg/resvg-js";
+import { createCanvas } from "canvas";
+import { Canvg } from "canvg";
 import fs from "fs";
 import { JSDOM } from "jsdom";
 import path from "path";
 import { Action } from "../../core/pipeline/Action";
 import { ActionOptionsType } from "../../types/ActionOptionsType";
 
+// ============================================================================
+// Utilities
+// ============================================================================
+
+function getSafeRenderingContext(canvas: ReturnType<typeof createCanvas>) {
+    return canvas.getContext("2d");
+}
+
 // ============================================================================
 // Classes
 // ============================================================================
 
 /**
  * SvgToPngAction converts SVG content to PNG format.
- * Uses `resvg-js` for conversion and `jsdom` for SVG element manipulation.
+ * Uses `canvg` for conversion and `jsdom` for SVG element manipulation.
  */
 export class SvgToPngAction extends Action {
-    // Methods
-    // ========================================================================
-
     /**
      * Executes the SVG-to-PNG conversion process.
      * @param options - Options including SVG content, output path, width,
@@ -60,13 +66,11 @@ export class SvgToPngAction extends Action {
         height?: number,
     ): Promise<void> {
         try {
-            // Ensure the output directory exists
             const outputDir = path.dirname(outputPath);
             if (!fs.existsSync(outputDir)) {
                 fs.mkdirSync(outputDir, { recursive: true });
             }
 
-            // Parse SVG and apply width/height
             const dom = new JSDOM(svgContent);
             const svgElement = dom.window.document.querySelector("svg");
 
@@ -74,21 +78,25 @@ export class SvgToPngAction extends Action {
                 throw new Error("Invalid SVG content");
             }
 
-            if (width) svgElement.setAttribute("width", width.toString());
-            if (height) svgElement.setAttribute("height", height.toString());
+            const w =
+                width ||
+                parseInt(svgElement.getAttribute("width") || "800", 10);
+            const h =
+                height ||
+                parseInt(svgElement.getAttribute("height") || "600", 10);
+
+            svgElement.setAttribute("width", w.toString());
+            svgElement.setAttribute("height", h.toString());
 
             const updatedSvgContent = svgElement.outerHTML;
 
-            // Render using Resvg
-            const resvg = new Resvg(updatedSvgContent, {
-                fitTo:
-                    width && height
-                        ? { mode: "width", value: width }
-                        : undefined,
-            });
+            const canvas = createCanvas(w, h);
+            const ctx = getSafeRenderingContext(canvas) as unknown as any;
 
-            const pngBuffer = resvg.render().asPng();
+            const canvg = await Canvg.from(ctx, updatedSvgContent);
+            await canvg.render();
 
+            const pngBuffer = canvas.toBuffer("image/png");
             fs.writeFileSync(outputPath, pngBuffer);
         } catch (error) {
             throw new Error(
@@ -102,7 +110,7 @@ export class SvgToPngAction extends Action {
      * @returns A string description of the action.
      */
     describe(): string {
-        return "Converts SVG content to PNG format with optional resizing using resvg-js.";
+        return "Converts SVG content to PNG format with optional resizing using canvg and canvas.";
     }
 }