@emasoft/svg-matrix 1.1.0 → 1.2.0

package/src/svg2-polyfills.js

@@ -13,25 +13,26 @@
  * @module svg2-polyfills
  */
 
-import { SVGElement } from './svg-parser.js';
+import { SVGElement } from "./svg-parser.js";
 
 // Environment detection
-const IS_NODE = typeof process !== 'undefined' && process.versions && process.versions.node;
-const IS_BROWSER = typeof window !== 'undefined';
+const IS_NODE =
+  typeof process !== "undefined" && process.versions && process.versions.node;
+const IS_BROWSER = typeof window !== "undefined";
 
 // Load Inkscape polyfills at module initialization (minified + full versions)
-let INKSCAPE_MESH_POLYFILL_MIN = '';
-let INKSCAPE_MESH_POLYFILL_FULL = '';
-let INKSCAPE_HATCH_POLYFILL_MIN = '';
-let INKSCAPE_HATCH_POLYFILL_FULL = '';
+let INKSCAPE_MESH_POLYFILL_MIN = "";
+let INKSCAPE_MESH_POLYFILL_FULL = "";
+let INKSCAPE_HATCH_POLYFILL_MIN = "";
+let INKSCAPE_HATCH_POLYFILL_FULL = "";
 
 // In Node.js, load polyfills from filesystem
 if (IS_NODE) {
   try {
     // Dynamic imports for Node.js-only modules
-    const fs = await import('fs');
-    const url = await import('url');
-    const path = await import('path');
+    const fs = await import("fs");
+    const url = await import("url");
+    const path = await import("path");
 
     const __filename = url.fileURLToPath(import.meta.url);
     const __dirname = path.dirname(__filename);
@@ -39,32 +40,36 @@ if (IS_NODE) {
     // Load mesh gradient polyfills (GPLv3 by Tavmjong Bah)
     // Minified version (default, ~16KB)
     INKSCAPE_MESH_POLYFILL_MIN = fs.readFileSync(
-      path.join(__dirname, 'vendor', 'inkscape-mesh-polyfill.min.js'),
-      'utf-8'
+      path.join(__dirname, "vendor", "inkscape-mesh-polyfill.min.js"),
+      "utf-8",
     );
     // Full version (~35KB, for debugging or when --no-minify-polyfills is used)
     INKSCAPE_MESH_POLYFILL_FULL = fs.readFileSync(
-      path.join(__dirname, 'vendor', 'inkscape-mesh-polyfill.js'),
-      'utf-8'
+      path.join(__dirname, "vendor", "inkscape-mesh-polyfill.js"),
+      "utf-8",
     );
 
     // Load hatch polyfills (CC0/Public Domain by Valentin Ionita)
     // Minified version (default, ~5KB)
     INKSCAPE_HATCH_POLYFILL_MIN = fs.readFileSync(
-      path.join(__dirname, 'vendor', 'inkscape-hatch-polyfill.min.js'),
-      'utf-8'
+      path.join(__dirname, "vendor", "inkscape-hatch-polyfill.min.js"),
+      "utf-8",
     );
     // Full version (~10KB, for debugging)
     INKSCAPE_HATCH_POLYFILL_FULL = fs.readFileSync(
-      path.join(__dirname, 'vendor', 'inkscape-hatch-polyfill.js'),
-      'utf-8'
+      path.join(__dirname, "vendor", "inkscape-hatch-polyfill.js"),
+      "utf-8",
     );
   } catch (e) {
-    throw new Error(`Failed to load SVG2 polyfill files from vendor/ directory: ${e.message}. Ensure all vendor files are present.`);
+    throw new Error(
+      `Failed to load SVG2 polyfill files from vendor/ directory: ${e.message}. Ensure all vendor files are present.`,
+    );
   }
 } else if (IS_BROWSER) {
   // In browser, polyfills must be set via setPolyfillContent() or loaded separately
-  console.warn('SVG2 polyfills: Running in browser mode. Use setPolyfillContent() to provide polyfill scripts.');
+  console.warn(
+    "SVG2 polyfills: Running in browser mode. Use setPolyfillContent() to provide polyfill scripts.",
+  );
 }
 
 // Module-level option for minification (default: true)
@@ -75,8 +80,10 @@ let useMinifiedPolyfills = true;
  * @param {boolean} minify - True to use minified (default), false for full version
  */
 export function setPolyfillMinification(minify) {
-  if (typeof minify !== 'boolean') {
-    throw new Error('setPolyfillMinification: minify parameter must be a boolean');
+  if (typeof minify !== "boolean") {
+    throw new Error(
+      "setPolyfillMinification: minify parameter must be a boolean",
+    );
   }
   useMinifiedPolyfills = minify;
 }
@@ -92,32 +99,34 @@ export function setPolyfillMinification(minify) {
  */
 export function setPolyfillContent(polyfills) {
   // Validate input - polyfills must be an object with string values
-  if (!polyfills || typeof polyfills !== 'object') {
-    throw new Error('setPolyfillContent: polyfills parameter must be an object');
+  if (!polyfills || typeof polyfills !== "object") {
+    throw new Error(
+      "setPolyfillContent: polyfills parameter must be an object",
+    );
   }
 
   // Validate and set each polyfill if provided
   if (polyfills.meshMin !== undefined) {
-    if (typeof polyfills.meshMin !== 'string') {
-      throw new Error('setPolyfillContent: meshMin must be a string');
+    if (typeof polyfills.meshMin !== "string") {
+      throw new Error("setPolyfillContent: meshMin must be a string");
     }
     INKSCAPE_MESH_POLYFILL_MIN = polyfills.meshMin;
   }
   if (polyfills.meshFull !== undefined) {
-    if (typeof polyfills.meshFull !== 'string') {
-      throw new Error('setPolyfillContent: meshFull must be a string');
+    if (typeof polyfills.meshFull !== "string") {
+      throw new Error("setPolyfillContent: meshFull must be a string");
     }
     INKSCAPE_MESH_POLYFILL_FULL = polyfills.meshFull;
   }
   if (polyfills.hatchMin !== undefined) {
-    if (typeof polyfills.hatchMin !== 'string') {
-      throw new Error('setPolyfillContent: hatchMin must be a string');
+    if (typeof polyfills.hatchMin !== "string") {
+      throw new Error("setPolyfillContent: hatchMin must be a string");
     }
     INKSCAPE_HATCH_POLYFILL_MIN = polyfills.hatchMin;
   }
   if (polyfills.hatchFull !== undefined) {
-    if (typeof polyfills.hatchFull !== 'string') {
-      throw new Error('setPolyfillContent: hatchFull must be a string');
+    if (typeof polyfills.hatchFull !== "string") {
+      throw new Error("setPolyfillContent: hatchFull must be a string");
     }
     INKSCAPE_HATCH_POLYFILL_FULL = polyfills.hatchFull;
   }
@@ -127,10 +136,10 @@ export function setPolyfillContent(polyfills) {
  * SVG 2.0 features that can be polyfilled
  */
 export const SVG2_FEATURES = {
-  MESH_GRADIENT: 'meshGradient',
-  HATCH: 'hatch',
-  CONTEXT_PAINT: 'context-paint',
-  AUTO_START_REVERSE: 'auto-start-reverse'
+  MESH_GRADIENT: "meshGradient",
+  HATCH: "hatch",
+  CONTEXT_PAINT: "context-paint",
+  AUTO_START_REVERSE: "auto-start-reverse",
 };
 
 /**
@@ -141,15 +150,20 @@ export const SVG2_FEATURES = {
  */
 export function detectSVG2Features(doc) {
   // WHY: Validate doc is an object before attempting to traverse it
-  if (!doc || typeof doc !== 'object') {
-    return { meshGradients: [], hatches: [], contextPaint: false, autoStartReverse: false };
+  if (!doc || typeof doc !== "object") {
+    return {
+      meshGradients: [],
+      hatches: [],
+      contextPaint: false,
+      autoStartReverse: false,
+    };
   }
 
   const features = {
     meshGradients: [],
     hatches: [],
     contextPaint: false,
-    autoStartReverse: false
+    autoStartReverse: false,
   };
 
   const walk = (el) => {
@@ -157,44 +171,62 @@ export function detectSVG2Features(doc) {
 
     // Check tag name for mesh gradient (case-insensitive)
     const tagName = el.tagName?.toLowerCase();
-    if (tagName === 'meshgradient') {
-      const id = el.getAttribute('id');
+    if (tagName === "meshgradient") {
+      const id = el.getAttribute("id");
       // WHY: Validate ID is non-empty string and not already in array to prevent duplicates
-      if (id && typeof id === 'string' && id.trim() && !features.meshGradients.includes(id)) {
+      if (
+        id &&
+        typeof id === "string" &&
+        id.trim() &&
+        !features.meshGradients.includes(id)
+      ) {
         features.meshGradients.push(id);
       }
     }
 
     // Check for hatch element
-    if (tagName === 'hatch') {
-      const id = el.getAttribute('id');
+    if (tagName === "hatch") {
+      const id = el.getAttribute("id");
       // WHY: Validate ID is non-empty string and not already in array to prevent duplicates
-      if (id && typeof id === 'string' && id.trim() && !features.hatches.includes(id)) {
+      if (
+        id &&
+        typeof id === "string" &&
+        id.trim() &&
+        !features.hatches.includes(id)
+      ) {
         features.hatches.push(id);
       }
     }
 
     // Check for context-paint in fill/stroke attributes and style attribute
-    const fill = el.getAttribute('fill');
-    const stroke = el.getAttribute('stroke');
-    const style = el.getAttribute('style');
+    const fill = el.getAttribute("fill");
+    const stroke = el.getAttribute("stroke");
+    const style = el.getAttribute("style");
     // WHY: context-paint can appear in style attribute, not just fill/stroke attributes
-    if (fill === 'context-fill' || fill === 'context-stroke' ||
-        stroke === 'context-fill' || stroke === 'context-stroke' ||
-        (style && (style.includes('context-fill') || style.includes('context-stroke')))) {
+    if (
+      fill === "context-fill" ||
+      fill === "context-stroke" ||
+      stroke === "context-fill" ||
+      stroke === "context-stroke" ||
+      (style &&
+        (style.includes("context-fill") || style.includes("context-stroke")))
+    ) {
       features.contextPaint = true;
     }
 
     // WHY: Check <style> elements for context-paint in CSS rules
-    if (tagName === 'style' && el.textContent) {
-      if (el.textContent.includes('context-fill') || el.textContent.includes('context-stroke')) {
+    if (tagName === "style" && el.textContent) {
+      if (
+        el.textContent.includes("context-fill") ||
+        el.textContent.includes("context-stroke")
+      ) {
         features.contextPaint = true;
       }
     }
 
     // Check for auto-start-reverse in markers
-    const orient = el.getAttribute('orient');
-    if (orient === 'auto-start-reverse') {
+    const orient = el.getAttribute("orient");
+    if (orient === "auto-start-reverse") {
       features.autoStartReverse = true;
     }
 
@@ -220,10 +252,12 @@ export function needsPolyfills(doc) {
   if (!doc) return false;
 
   const features = detectSVG2Features(doc);
-  return features.meshGradients.length > 0 ||
-         features.hatches.length > 0 ||
-         features.contextPaint ||
-         features.autoStartReverse;
+  return (
+    features.meshGradients.length > 0 ||
+    features.hatches.length > 0 ||
+    features.contextPaint ||
+    features.autoStartReverse
+  );
 }
 
 /**
@@ -242,10 +276,14 @@ export function needsPolyfills(doc) {
  */
 function generateMeshPolyfillCode() {
   // Return minified or full Inkscape mesh.js polyfill based on setting
-  const polyfill = useMinifiedPolyfills ? INKSCAPE_MESH_POLYFILL_MIN : INKSCAPE_MESH_POLYFILL_FULL;
+  const polyfill = useMinifiedPolyfills
+    ? INKSCAPE_MESH_POLYFILL_MIN
+    : INKSCAPE_MESH_POLYFILL_FULL;
   // WHY: Throw error instead of silently returning empty string to prevent broken SVG output
-  if (!polyfill || polyfill.trim() === '') {
-    throw new Error('svg2-polyfills: Inkscape mesh polyfill not available. Ensure vendor/inkscape-mesh-polyfill files are present.');
+  if (!polyfill || polyfill.trim() === "") {
+    throw new Error(
+      "svg2-polyfills: Inkscape mesh polyfill not available. Ensure vendor/inkscape-mesh-polyfill files are present.",
+    );
   }
   return polyfill;
 }
@@ -265,10 +303,14 @@ function generateMeshPolyfillCode() {
  */
 function generateHatchPolyfillCode() {
   // Return minified or full Inkscape hatch polyfill based on setting
-  const polyfill = useMinifiedPolyfills ? INKSCAPE_HATCH_POLYFILL_MIN : INKSCAPE_HATCH_POLYFILL_FULL;
+  const polyfill = useMinifiedPolyfills
+    ? INKSCAPE_HATCH_POLYFILL_MIN
+    : INKSCAPE_HATCH_POLYFILL_FULL;
   // WHY: Throw error instead of silently returning empty string to prevent broken SVG output
-  if (!polyfill || polyfill.trim() === '') {
-    throw new Error('svg2-polyfills: Inkscape hatch polyfill not available. Ensure vendor/inkscape-hatch-polyfill files are present.');
+  if (!polyfill || polyfill.trim() === "") {
+    throw new Error(
+      "svg2-polyfills: Inkscape hatch polyfill not available. Ensure vendor/inkscape-hatch-polyfill files are present.",
+    );
   }
   return polyfill;
 }
@@ -281,33 +323,47 @@ function generateHatchPolyfillCode() {
  */
 export function generatePolyfillScript(features) {
   // WHY: Explicit null check before typeof check prevents null passing as object
-  if (!features || typeof features !== 'object') {
-    throw new Error('generatePolyfillScript: features parameter must be an object');
+  if (!features || typeof features !== "object") {
+    throw new Error(
+      "generatePolyfillScript: features parameter must be an object",
+    );
   }
   if (!Array.isArray(features.meshGradients)) {
-    throw new Error('generatePolyfillScript: features.meshGradients must be an array');
+    throw new Error(
+      "generatePolyfillScript: features.meshGradients must be an array",
+    );
   }
   if (!Array.isArray(features.hatches)) {
-    throw new Error('generatePolyfillScript: features.hatches must be an array');
+    throw new Error(
+      "generatePolyfillScript: features.hatches must be an array",
+    );
   }
   // WHY: Validate array contents are all strings to prevent type errors
-  if (!features.meshGradients.every(id => typeof id === 'string')) {
-    throw new Error('generatePolyfillScript: features.meshGradients must contain only strings');
+  if (!features.meshGradients.every((id) => typeof id === "string")) {
+    throw new Error(
+      "generatePolyfillScript: features.meshGradients must contain only strings",
+    );
   }
-  if (!features.hatches.every(id => typeof id === 'string')) {
-    throw new Error('generatePolyfillScript: features.hatches must contain only strings');
+  if (!features.hatches.every((id) => typeof id === "string")) {
+    throw new Error(
+      "generatePolyfillScript: features.hatches must contain only strings",
+    );
   }
   // WHY: Validate boolean properties to prevent undefined/wrong type usage
-  if (typeof features.contextPaint !== 'boolean') {
-    throw new Error('generatePolyfillScript: features.contextPaint must be a boolean');
+  if (typeof features.contextPaint !== "boolean") {
+    throw new Error(
+      "generatePolyfillScript: features.contextPaint must be a boolean",
+    );
   }
-  if (typeof features.autoStartReverse !== 'boolean') {
-    throw new Error('generatePolyfillScript: features.autoStartReverse must be a boolean');
+  if (typeof features.autoStartReverse !== "boolean") {
+    throw new Error(
+      "generatePolyfillScript: features.autoStartReverse must be a boolean",
+    );
   }
 
   const parts = [];
 
-  parts.push('/* SVG 2.0 Polyfills - Generated by svg-matrix */');
+  parts.push("/* SVG 2.0 Polyfills - Generated by svg-matrix */");
 
   if (features.meshGradients.length > 0) {
     parts.push(generateMeshPolyfillCode());
@@ -321,7 +377,7 @@ export function generatePolyfillScript(features) {
     return null; // Only header, no actual polyfills
   }
 
-  return parts.join('\n');
+  return parts.join("\n");
 }
 
 /**
@@ -340,9 +396,11 @@ export function injectPolyfills(doc, options = {}) {
   const features = options.features || detectSVG2Features(doc);
 
   // Check if polyfills are needed
-  if (!options.force &&
-      features.meshGradients.length === 0 &&
-      features.hatches.length === 0) {
+  if (
+    !options.force &&
+    features.meshGradients.length === 0 &&
+    features.hatches.length === 0
+  ) {
     return doc;
   }
 
@@ -357,10 +415,15 @@ export function injectPolyfills(doc, options = {}) {
   const wrappedScript = `\n// <![CDATA[\n${script}\n// ]]>\n`;
 
   // Create a proper SVGElement for the script
-  const scriptEl = new SVGElement('script', {
-    type: 'text/javascript',
-    id: 'svg-matrix-polyfill'
-  }, [], wrappedScript);
+  const scriptEl = new SVGElement(
+    "script",
+    {
+      type: "text/javascript",
+      id: "svg-matrix-polyfill",
+    },
+    [],
+    wrappedScript,
+  );
 
   // Insert script at beginning of SVG (after defs if present, else at start)
   if (!Array.isArray(svg.children)) {
@@ -373,7 +436,7 @@ export function injectPolyfills(doc, options = {}) {
     let insertIdx = 0;
     for (let i = 0; i < svg.children.length; i++) {
       // WHY: Optional chaining prevents errors if array contains null/undefined elements
-      if (svg.children[i]?.tagName === 'defs') {
+      if (svg.children[i]?.tagName === "defs") {
         insertIdx = i + 1; // Position after this defs (don't break - continue to find last defs)
       }
     }
@@ -398,17 +461,17 @@ export function removePolyfills(doc) {
     if (!el || !el.children || !Array.isArray(el.children)) return;
 
     // Remove script elements that are svg-matrix polyfills
-    el.children = el.children.filter(child => {
+    el.children = el.children.filter((child) => {
       // WHY: Optional chaining prevents errors if child is null/undefined
-      if (child?.tagName === 'script') {
+      if (child?.tagName === "script") {
         // WHY: Check id attribute first (more reliable), then fallback to content check
-        const id = child.getAttribute?.('id');
-        if (id === 'svg-matrix-polyfill') {
+        const id = child.getAttribute?.("id");
+        if (id === "svg-matrix-polyfill") {
           return false;
         }
         // WHY: Fallback for older polyfills without id attribute
-        const content = child.textContent || '';
-        if (content.includes('SVG 2.0 Polyfills - Generated by svg-matrix')) {
+        const content = child.textContent || "";
+        if (content.includes("SVG 2.0 Polyfills - Generated by svg-matrix")) {
           return false;
         }
       }

package/src/svgm-lib.js

@@ -5,7 +5,7 @@
  * comprehensive SVG manipulation (SVGToolbox). Works in Node.js and browser.
  *
  * @module svgm-lib
- * @version 1.1.0
+ * @version 1.2.0
  * @license MIT
  *
  * @example Browser usage:
@@ -49,7 +49,7 @@ Decimal.set({ precision: 80 });
 /**
  * Library version
  */
-export const VERSION = "1.1.0";
+export const VERSION = "1.2.0";
 
 // Export math classes
 export { Decimal, Matrix, Vector };
@@ -63,8 +63,12 @@ export * from "./svg-toolbox.js";
 export const { parseSVG, serializeSVG } = SVGParser;
 
 // Export polyfills
-export const { detectSVG2Features, injectPolyfills, setPolyfillMinification, setPolyfillContent } =
-  SVG2Polyfills;
+export const {
+  detectSVG2Features,
+  injectPolyfills,
+  setPolyfillMinification,
+  setPolyfillContent,
+} = SVG2Polyfills;
 
 /**
  * High-level process function - load, optimize, save in one call.