dom-to-pptx 1.0.0 → 1.0.2

package/eslint.config.js

@@ -0,0 +1,17 @@
+import globals from 'globals';
+import pluginJs from '@eslint/js';
+import pluginPrettier from 'eslint-config-prettier';
+
+export default [
+  { ignores: ['dist/**'] },
+  { files: ['**/*.js'], languageOptions: { sourceType: 'module', globals: globals.browser } },
+  pluginJs.configs.recommended,
+  pluginPrettier,
+  {
+    rules: {
+      // Custom rules or overrides
+      'no-unused-vars': 'warn',
+      'no-undef': 'warn',
+    },
+  },
+];

package/package.json

@@ -1,53 +1,64 @@
-{
-  "name": "dom-to-pptx",
-  "version": "1.0.0",
-  "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": "src/index.js",
-  "type": "module",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "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"
-  },
-  "homepage": "https://github.com/atharva9167j/dom-to-pptx#readme",
-  "dependencies": {
-    "pptxgenjs": "^3.12.0"
-  }
-}
+{
+  "name": "dom-to-pptx",
+  "version": "1.0.2",
+  "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.min.js",
+  "type": "module",
+  "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"
+  },
+  "homepage": "https://github.com/atharva9167j/dom-to-pptx#readme",
+  "dependencies": {
+    "pptxgenjs": "^3.12.0"
+  },
+  "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"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,17 @@
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+
+export default {
+  input: 'src/index.js',
+  output: {
+    file: 'dist/dom-to-pptx.min.js',
+    format: 'umd',
+    name: 'domToPptx',
+    esModule: false,
+    globals: {
+      pptxgenjs: 'PptxGenJS',
+    },
+  },
+  plugins: [resolve(), commonjs()],
+  external: ['pptxgenjs'],
+};

package/src/image-processor.js

@@ -1,48 +1,48 @@
-// 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);
-
-       // 1. Draw the Mask (Rounded Rect)
-       ctx.beginPath();
-       if (ctx.roundRect) {
-         ctx.roundRect(0, 0, targetW, targetH, radius);
-       } else {
-         // Fallback for older browsers if needed
-         ctx.rect(0, 0, targetW, targetH);
-       }
-       ctx.fillStyle = '#000';
-       ctx.fill();
-
-       // 2. Composite Source-In
-       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);
+
+      // 1. Draw the Mask (Rounded Rect)
+      ctx.beginPath();
+      if (ctx.roundRect) {
+        ctx.roundRect(0, 0, targetW, targetH, radius);
+      } else {
+        // Fallback for older browsers if needed
+        ctx.rect(0, 0, targetW, targetH);
+      }
+      ctx.fillStyle = '#000';
+      ctx.fill();
+
+      // 2. Composite Source-In
+      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;
+  });
+}