kist 0.1.34 → 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 `sharp` 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 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 sharp_1 = __importDefault(require("sharp"));
 const Action_1 = require("../../core/pipeline/Action");
 // ============================================================================
+// Utilities
+// ============================================================================
+function getSafeRenderingContext(canvas) {
+    return canvas.getContext("2d");
+}
+// ============================================================================
 // Classes
 // ============================================================================
 /**
  * SvgToPngAction converts SVG content to PNG format.
- * Uses `sharp` 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,30 +68,28 @@ 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 });
                 }
-                // Create a JSDOM instance to parse the SVG
                 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());
-                }
-                // Serialize the updated SVG content
+                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;
-                // Convert SVG to PNG using Sharp
-                const pngBuffer = yield (0, sharp_1.default)(Buffer.from(updatedSvgContent))
-                    .png()
-                    .toBuffer();
-                yield (0, sharp_1.default)(pngBuffer).toFile(outputPath);
+                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) {
                 throw new Error(`Error converting SVG to PNG: ${error.message}`);
@@ -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.";
+        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.34",
+  "version": "0.1.37",
   "description": "Package Pipeline Processor",
   "keywords": [
     "kist",
@@ -62,12 +62,12 @@
     "@babel/preset-typescript": "^7.23.3",
     "@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",
@@ -79,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",
@@ -88,7 +88,6 @@
     "sass": "^1.69.7",
     "sassdoc": "^2.7.4",
     "semver": "^7.5.4",
-    "sharp": "^0.34.1",
     "svg-sprite": "^2.0.2",
     "svgo": "^3.1.0",
     "terser": "^5.26.0",

package/ts/actions/SvgToPngAction/SvgToPngAction.ts

@@ -2,25 +2,31 @@
 // Imports
 // ============================================================================
 
+import { createCanvas } from "canvas";
+import { Canvg } from "canvg";
 import fs from "fs";
 import { JSDOM } from "jsdom";
 import path from "path";
-import sharp from "sharp";
 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 `sharp` 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 });
             }
 
-            // Create a JSDOM instance to parse the SVG
             const dom = new JSDOM(svgContent);
             const svgElement = dom.window.document.querySelector("svg");
 
@@ -74,22 +78,26 @@ export class SvgToPngAction extends Action {
                 throw new Error("Invalid SVG content");
             }
 
-            if (width) {
-                svgElement.setAttribute("width", width.toString());
-            }
+            const w =
+                width ||
+                parseInt(svgElement.getAttribute("width") || "800", 10);
+            const h =
+                height ||
+                parseInt(svgElement.getAttribute("height") || "600", 10);
 
-            if (height) {
-                svgElement.setAttribute("height", height.toString());
-            }
+            svgElement.setAttribute("width", w.toString());
+            svgElement.setAttribute("height", h.toString());
 
-            // Serialize the updated SVG content
             const updatedSvgContent = svgElement.outerHTML;
 
-            // Convert SVG to PNG using Sharp
-            const pngBuffer = await sharp(Buffer.from(updatedSvgContent))
-                .png()
-                .toBuffer();
-            await sharp(pngBuffer).toFile(outputPath);
+            const canvas = createCanvas(w, h);
+            const ctx = getSafeRenderingContext(canvas) as unknown as any;
+
+            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(
                 `Error converting SVG to PNG: ${(error as Error).message}`,
@@ -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.";
+        return "Converts SVG content to PNG format with optional resizing using canvg and canvas.";
     }
 }