dom-to-pptx 1.0.5 → 1.0.6

package/package.json

@@ -1,73 +1,73 @@
-{
-  "name": "dom-to-pptx",
-  "version": "1.0.5",
-  "description": "A client-side library that converts any HTML element into a fully editable PowerPoint slide. **dom-to-pptx** transforms DOM structures into pixel-accurate `.pptx` content, preserving gradients, shadows, rounded images, and responsive layouts. It translates CSS Flexbox/Grid, linear-gradients, box-shadows, and typography into native PowerPoint shapes, enabling precise, design-faithful slide generation directly from the browser.",
-  "main": "dist/dom-to-pptx.cjs",
-  "module": "dist/dom-to-pptx.mjs",
-  "browser": "dist/dom-to-pptx.bundle.js",
-  "exports": {
-    ".": {
-      "import": "./dist/dom-to-pptx.mjs",
-      "require": "./dist/dom-to-pptx.cjs",
-      "default": "./dist/dom-to-pptx.cjs"
-    }
-  },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "npx rollup -c",
-    "lint": "eslint .",
-    "format": "prettier --write ."
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/atharva9167j/dom-to-pptx.git"
-  },
-  "keywords": [
-    "pptx",
-    "html-to-pptx",
-    "powerpoint",
-    "pptx-generator",
-    "slide-generator",
-    "presentation-generator",
-    "dom",
-    "dom-to-pptx",
-    "export",
-    "browser-export",
-    "client-side-pptx",
-    "html-to-powerpoint",
-    "convert-html",
-    "css-to-pptx",
-    "css-to-powerpoint",
-    "pptx-creator",
-    "presentation-tools",
-    "slides",
-    "slide-creation",
-    "web-to-pptx",
-    "web-to-powerpoint",
-    "frontend-pptx",
-    "html-rendering",
-    "layout-engine",
-    "gradient-support",
-    "flexbox",
-    "css-grid",
-    "typography"
-  ],
-  "author": "Atharva Dharmendra Jagtap <atharvaj321@gmail.com>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/atharva9167j/dom-to-pptx/issues"
-  },
-  
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^29.0.0",
-    "@rollup/plugin-node-resolve": "^16.0.3",
-    "eslint": "^9.39.1",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-prettier": "^5.5.4",
-    "prettier": "^3.7.3"
-  },
-  "dependencies": {
-    "html2canvas": "^1.4.1",
-    "pptxgenjs": "^3.12.0"
-  }
-}
+{
+  "name": "dom-to-pptx",
+  "version": "1.0.6",
+  "description": "A client-side library that converts any HTML element into a fully editable PowerPoint slide. **dom-to-pptx** transforms DOM structures into pixel-accurate `.pptx` content, preserving gradients, shadows, rounded images, and responsive layouts. It translates CSS Flexbox/Grid, linear-gradients, box-shadows, and typography into native PowerPoint shapes, enabling precise, design-faithful slide generation directly from the browser.",
+  "main": "dist/dom-to-pptx.cjs",
+  "module": "dist/dom-to-pptx.mjs",
+  "browser": "dist/dom-to-pptx.bundle.js",
+  "exports": {
+    ".": {
+      "import": "./dist/dom-to-pptx.mjs",
+      "require": "./dist/dom-to-pptx.cjs",
+      "default": "./dist/dom-to-pptx.cjs"
+    }
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "npx rollup -c",
+    "lint": "eslint .",
+    "format": "prettier --write ."
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/atharva9167j/dom-to-pptx.git"
+  },
+  "keywords": [
+    "pptx",
+    "html-to-pptx",
+    "powerpoint",
+    "pptx-generator",
+    "slide-generator",
+    "presentation-generator",
+    "dom",
+    "dom-to-pptx",
+    "export",
+    "browser-export",
+    "client-side-pptx",
+    "html-to-powerpoint",
+    "convert-html",
+    "css-to-pptx",
+    "css-to-powerpoint",
+    "pptx-creator",
+    "presentation-tools",
+    "slides",
+    "slide-creation",
+    "web-to-pptx",
+    "web-to-powerpoint",
+    "frontend-pptx",
+    "html-rendering",
+    "layout-engine",
+    "gradient-support",
+    "flexbox",
+    "css-grid",
+    "typography"
+  ],
+  "author": "Atharva Dharmendra Jagtap <atharvaj321@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/atharva9167j/dom-to-pptx/issues"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "rollup-plugin-polyfill-node": "^0.10.1",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "prettier": "^3.7.3"
+  },
+  "dependencies": {
+    "html2canvas": "^1.4.1",
+    "pptxgenjs": "^3.12.0"
+  }
+}

package/rollup.config.js

@@ -1,53 +1,56 @@
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-
-const input = 'src/index.js';
-
-// Config A: produce module (mjs), cjs and a lightweight UMD that keeps `pptxgenjs` external.
-const configModules = {
-  input,
-  output: [
-    {
-      file: 'dist/dom-to-pptx.mjs',
-      format: 'es',
-      sourcemap: false,
-    },
-    {
-      file: 'dist/dom-to-pptx.cjs',
-      format: 'cjs',
-      sourcemap: false,
-      exports: 'named',
-    },
-    {
-      file: 'dist/dom-to-pptx.min.js',
-      format: 'umd',
-      name: 'domToPptx',
-      esModule: false,
-      globals: {
-        pptxgenjs: 'PptxGenJS',
-      },
-    },
-  ],
-  plugins: [resolve(), commonjs()],
-  // Keep pptxgenjs external for module builds so bundlers like Vite don't attempt to resolve Node-only
-  // builtins that may be present in pptxgenjs; consumers should install `pptxgenjs` alongside this package
-  // when using ESM/CJS builds.
-  external: ['pptxgenjs'],
-};
-
-// Config B: produce a single standalone UMD bundle that includes dependencies (for script-tag consumers).
-const configBundle = {
-  input,
-  output: {
-    file: 'dist/dom-to-pptx.bundle.js',
-    format: 'umd',
-    name: 'domToPptx',
-    esModule: false,
-    sourcemap: false,
-  },
-  plugins: [resolve(), commonjs()],
-  // Bundle everything for the standalone artifact.
-  external: [],
-};
-
-export default [configModules, configBundle];
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import polyfillNode from 'rollup-plugin-polyfill-node';
+
+const input = 'src/index.js';
+
+// Config A: produce module (mjs), cjs and a lightweight UMD that keeps `pptxgenjs` external.
+const configModules = {
+  input,
+  output: [
+    {
+      file: 'dist/dom-to-pptx.mjs',
+      format: 'es',
+      sourcemap: false,
+    },
+    {
+      file: 'dist/dom-to-pptx.cjs',
+      format: 'cjs',
+      sourcemap: false,
+      exports: 'named',
+    },
+    {
+      file: 'dist/dom-to-pptx.min.js',
+      format: 'umd',
+      name: 'domToPptx',
+      esModule: false,
+      globals: {
+        pptxgenjs: 'PptxGenJS',
+      },
+    },
+  ],
+  plugins: [resolve(), commonjs()],
+  // Keep pptxgenjs external for module builds so bundlers like Vite don't attempt to resolve Node-only
+  // builtins that may be present in pptxgenjs; consumers should install `pptxgenjs` alongside this package
+  // when using ESM/CJS builds.
+  external: ['pptxgenjs'],
+};
+
+// Config B: produce a single standalone UMD bundle that includes dependencies (for script-tag consumers).
+const configBundle = {
+  input,
+  output: {
+    file: 'dist/dom-to-pptx.bundle.js',
+    format: 'umd',
+    name: 'domToPptx',
+    esModule: false,
+    sourcemap: false,
+  },
+  // Use a node polyfill plugin first so Node built-ins (stream, buffer, util, events, etc.)
+  // are shimmed for browser environments when creating the standalone bundle.
+  plugins: [polyfillNode(), resolve(), commonjs()],
+  // Bundle everything for the standalone artifact.
+  external: [],
+};
+
+export default [configModules, configBundle];

package/src/image-processor.js

@@ -1,76 +1,79 @@
-// src/image-processor.js
-
-export async function getProcessedImage(src, targetW, targetH, radius) {
-  return new Promise((resolve) => {
-    const img = new Image();
-    img.crossOrigin = 'Anonymous'; // Critical for canvas manipulation
-
-    img.onload = () => {
-      const canvas = document.createElement('canvas');
-      // Double resolution for better quality
-      const scale = 2;
-      canvas.width = targetW * scale;
-      canvas.height = targetH * scale;
-      const ctx = canvas.getContext('2d');
-      ctx.scale(scale, scale);
-
-      // Normalize radius input to an object { tl, tr, br, bl }
-      let r = { tl: 0, tr: 0, br: 0, bl: 0 };
-      if (typeof radius === 'number') {
-        r = { tl: radius, tr: radius, br: radius, bl: radius };
-      } else if (typeof radius === 'object' && radius !== null) {
-        r = { ...r, ...radius }; // Merge with defaults
-      }
-
-      // 1. Draw the Mask (Custom Shape with specific corners)
-      ctx.beginPath();
-      
-      // Border Radius Clamping Logic (CSS Spec)
-      // Prevents corners from overlapping if radii are too large for the container
-      const factor = Math.min(
-        (targetW / (r.tl + r.tr)) || Infinity,
-        (targetH / (r.tr + r.br)) || Infinity,
-        (targetW / (r.br + r.bl)) || Infinity,
-        (targetH / (r.bl + r.tl)) || Infinity
-      );
-
-      if (factor < 1) {
-        r.tl *= factor; r.tr *= factor; r.br *= factor; r.bl *= factor;
-      }
-
-      // Draw path: Top-Left -> Top-Right -> Bottom-Right -> Bottom-Left
-      ctx.moveTo(r.tl, 0);
-      ctx.lineTo(targetW - r.tr, 0);
-      ctx.arcTo(targetW, 0, targetW, r.tr, r.tr);
-      ctx.lineTo(targetW, targetH - r.br);
-      ctx.arcTo(targetW, targetH, targetW - r.br, targetH, r.br);
-      ctx.lineTo(r.bl, targetH);
-      ctx.arcTo(0, targetH, 0, targetH - r.bl, r.bl);
-      ctx.lineTo(0, r.tl);
-      ctx.arcTo(0, 0, r.tl, 0, r.tl);
-      
-      ctx.closePath();
-      ctx.fillStyle = '#000';
-      ctx.fill();
-
-      // 2. Composite Source-In (Crops the next image draw to the mask)
-      ctx.globalCompositeOperation = 'source-in';
-
-      // 3. Draw Image (Object Cover Logic)
-      const wRatio = targetW / img.width;
-      const hRatio = targetH / img.height;
-      const maxRatio = Math.max(wRatio, hRatio);
-      const renderW = img.width * maxRatio;
-      const renderH = img.height * maxRatio;
-      const renderX = (targetW - renderW) / 2;
-      const renderY = (targetH - renderH) / 2;
-
-      ctx.drawImage(img, renderX, renderY, renderW, renderH);
-
-      resolve(canvas.toDataURL('image/png'));
-    };
-
-    img.onerror = () => resolve(null);
-    img.src = src;
-  });
-}
+// src/image-processor.js
+
+export async function getProcessedImage(src, targetW, targetH, radius) {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.crossOrigin = 'Anonymous'; // Critical for canvas manipulation
+
+    img.onload = () => {
+      const canvas = document.createElement('canvas');
+      // Double resolution for better quality
+      const scale = 2;
+      canvas.width = targetW * scale;
+      canvas.height = targetH * scale;
+      const ctx = canvas.getContext('2d');
+      ctx.scale(scale, scale);
+
+      // Normalize radius input to an object { tl, tr, br, bl }
+      let r = { tl: 0, tr: 0, br: 0, bl: 0 };
+      if (typeof radius === 'number') {
+        r = { tl: radius, tr: radius, br: radius, bl: radius };
+      } else if (typeof radius === 'object' && radius !== null) {
+        r = { ...r, ...radius }; // Merge with defaults
+      }
+
+      // 1. Draw the Mask (Custom Shape with specific corners)
+      ctx.beginPath();
+
+      // Border Radius Clamping Logic (CSS Spec)
+      // Prevents corners from overlapping if radii are too large for the container
+      const factor = Math.min(
+        targetW / (r.tl + r.tr) || Infinity,
+        targetH / (r.tr + r.br) || Infinity,
+        targetW / (r.br + r.bl) || Infinity,
+        targetH / (r.bl + r.tl) || Infinity
+      );
+
+      if (factor < 1) {
+        r.tl *= factor;
+        r.tr *= factor;
+        r.br *= factor;
+        r.bl *= factor;
+      }
+
+      // Draw path: Top-Left -> Top-Right -> Bottom-Right -> Bottom-Left
+      ctx.moveTo(r.tl, 0);
+      ctx.lineTo(targetW - r.tr, 0);
+      ctx.arcTo(targetW, 0, targetW, r.tr, r.tr);
+      ctx.lineTo(targetW, targetH - r.br);
+      ctx.arcTo(targetW, targetH, targetW - r.br, targetH, r.br);
+      ctx.lineTo(r.bl, targetH);
+      ctx.arcTo(0, targetH, 0, targetH - r.bl, r.bl);
+      ctx.lineTo(0, r.tl);
+      ctx.arcTo(0, 0, r.tl, 0, r.tl);
+
+      ctx.closePath();
+      ctx.fillStyle = '#000';
+      ctx.fill();
+
+      // 2. Composite Source-In (Crops the next image draw to the mask)
+      ctx.globalCompositeOperation = 'source-in';
+
+      // 3. Draw Image (Object Cover Logic)
+      const wRatio = targetW / img.width;
+      const hRatio = targetH / img.height;
+      const maxRatio = Math.max(wRatio, hRatio);
+      const renderW = img.width * maxRatio;
+      const renderH = img.height * maxRatio;
+      const renderX = (targetW - renderW) / 2;
+      const renderY = (targetH - renderH) / 2;
+
+      ctx.drawImage(img, renderX, renderY, renderW, renderH);
+
+      resolve(canvas.toDataURL('image/png'));
+    };
+
+    img.onerror = () => resolve(null);
+    img.src = src;
+  });
+}