@d3plus/export 3.0.16 → 3.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 D3plus
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,5 +1,5 @@
 # @d3plus/export
-  
+
 Export methods for transforming and downloading SVG.
 
 ## Installing
@@ -7,10 +7,10 @@ Export methods for transforming and downloading SVG.
 If using npm, `npm install @d3plus/export`. Otherwise, you can download the [latest release from GitHub](https://github.com/d3plus/d3plus/releases/latest) or load from a [CDN](https://cdn.jsdelivr.net/npm/@d3plus/export).
 
 ```js
-import modules from "@d3plus/export";
+import {*} from "@d3plus/export";
 ```
 
-In vanilla JavaScript, a `d3plus` global is exported from the pre-bundled version:
+In a vanilla environment, a `d3plus` global is exported from the pre-bundled version:
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/@d3plus/export"></script>
@@ -21,22 +21,34 @@ In vanilla JavaScript, a `d3plus` global is exported from the pre-bundled versio
 
 ## Examples
 
-Live examples can be found on [d3plus.org](https://d3plus.org/), which includes a collection of example visualizations using @d3plus/react.
+Live examples can be found on [d3plus.org](https://d3plus.org/), which includes a collection of example visualizations using [@d3plus/react](https://github.com/d3plus/d3plus/tree/main/packages/react).
 
 ## API Reference
 
-##### 
-* [saveElement](#saveElement) - Downloads an HTML Element as a bitmap PNG image.
+| Functions | Description |
+| --- | --- |
+| [`saveElement`](#saveelement) | Downloads an HTML Element as a bitmap PNG image. |
+
+## Functions
+
+<a id="saveelement"></a>
+
+### saveElement()
 
----
+> **saveElement**(`elem`: `HTMLElement`, `options?`: `SaveElementOptions`, `renderOptions?`: `SaveElementRenderOptions`): `void`
 
-<a name="saveElement"></a>
-#### d3plus.**saveElement**(elem, [options], [renderOptions]) [<>](https://github.com/d3plus/d3plus/blob/main/packages/export/src/saveElement.js#L9)
+Defined in: [saveElement.ts:36](https://github.com/d3plus/d3plus/blob/e9db3c74352143cd7b6bdc8d0786477ea971eb6d/packages/export/src/saveElement.ts#L36)
 
 Downloads an HTML Element as a bitmap PNG image.
 
+#### Parameters
 
-This is a global function
+| Parameter | Type | Description |
+| ------ | ------ | ------ |
+| `elem` | `HTMLElement` | The DOM element or d3 selection to export. |
+| `options` | `SaveElementOptions` | Additional options to specify. |
+| `renderOptions` | `SaveElementRenderOptions` | Custom options to be passed to the html-to-image function. |
 
----
+#### Returns
 
+`void`

package/es/src/saveElement.js

@@ -5,28 +5,27 @@ var defaultOptions = {
     type: "png"
 };
 /**
-    @function saveElement
-    @desc Downloads an HTML Element as a bitmap PNG image.
-    @param {HTMLElement} elem A single element to be saved to one file.
-    @param {Object} [options] Additional options to specify.
-    @param {String} [options.filename = "download"] Filename for the downloaded file, without the extension.
-    @param {String} [options.type = "png"] File type of the saved document. Accepted values are `"png"` and `"jpg"`.
-    @param {Function} [options.callback] Function to be invoked after saving is complete.
-    @param {Object} [renderOptions] Custom options to be passed to the html-to-image function.
+    Downloads an HTML Element as a bitmap PNG image.
+    @param elem The DOM element or d3 selection to export.
+    @param options Additional options to specify.
+    @param options .filename = "download"] Filename for the downloaded file, without the extension.
+    @param options .type = "png"] File type of the saved document. Accepted values are `"png"` and `"jpg"`.
+    @param options .callback] Function to be invoked after saving is complete.
+    @param renderOptions Custom options to be passed to the html-to-image function.
 */ export default function(elem) {
     var options = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, renderOptions = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
     if (!elem) return;
-    options = Object.assign({}, defaultOptions, options);
+    var opts = Object.assign({}, defaultOptions, options);
     // rename renderOptions.background to backgroundColor for backwards compatibility
-    renderOptions = Object.assign({
+    var renderOpts = Object.assign({
         backgroundColor: renderOptions.background
     }, renderOptions);
     function finish(blob) {
-        saveAs(blob, "".concat(options.filename, ".").concat(options.type));
-        if (options.callback) options.callback();
+        saveAs(blob, "".concat(opts.filename, ".").concat(opts.type));
+        if (opts.callback) opts.callback();
     }
-    if (options.type === "svg") {
-        toSvg(elem, renderOptions).then(function(dataUrl) {
+    if (opts.type === "svg") {
+        toSvg(elem, renderOpts).then(function(dataUrl) {
             var xhr = new XMLHttpRequest();
             xhr.open("GET", dataUrl);
             xhr.responseType = "blob";
@@ -36,6 +35,8 @@ var defaultOptions = {
             xhr.send();
         });
     } else {
-        toBlob(elem, renderOptions).then(finish);
+        toBlob(elem, renderOpts).then(function(blob) {
+            if (blob) finish(blob);
+        });
     }
 }

package/package.json

@@ -1,18 +1,25 @@
 {
   "name": "@d3plus/export",
-  "version": "3.0.16",
+  "version": "3.1.0",
   "description": "Export methods for transforming and downloading SVG.",
   "license": "MIT",
   "type": "module",
-  "exports": "./es/index.js",
+  "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "default": "./es/index.js"
+    }
+  },
   "browser": "./umd/d3plus-export.full.js",
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   },
   "sideEffects": false,
   "files": [
     "umd",
-    "es"
+    "es",
+    "types"
   ],
   "homepage": "https://d3plus.org",
   "repository": {
@@ -27,14 +34,15 @@
     "data",
     "visualization"
   ],
+  "dependencies": {
+    "file-saver": "1.3.3",
+    "html-to-image": "^1.11.11"
+  },
   "scripts": {
     "build:esm": "node ../../scripts/build-esm.js",
+    "build:types": "tsc",
     "build:umd": "node ../../scripts/build-umd.js",
     "dev": "node ../../scripts/dev.js",
-    "test": "eslint index.js src/**/*.js && eslint --global=it test && mocha 'test/**/*-test.js'"
-  },
-  "dependencies": {
-    "file-saver": "1.3.3",
-    "html-to-image": "^1.11.11"
+    "test": "eslint index.ts src/**/*.ts && eslint --global=it test && mocha 'test/**/*-test.js'"
   }
 }

package/types/index.d.ts

@@ -0,0 +1 @@
+export { default as saveElement } from "./src/saveElement.js";

package/types/src/saveElement.d.ts

@@ -0,0 +1,25 @@
+export interface SaveElementOptions {
+    /** Filename for the downloaded file, without the extension. */
+    filename?: string;
+    /** File type of the saved document. Accepted values are "png", "jpg", and "svg". */
+    type?: "png" | "jpg" | "svg";
+    /** Function to be invoked after saving is complete. */
+    callback?: () => void;
+}
+export interface SaveElementRenderOptions {
+    /** Background color for the rendered image. */
+    background?: string;
+    /** Background color for the rendered image (alias). */
+    backgroundColor?: string;
+    [key: string]: unknown;
+}
+/**
+    Downloads an HTML Element as a bitmap PNG image.
+    @param elem The DOM element or d3 selection to export.
+    @param options Additional options to specify.
+    @param options .filename = "download"] Filename for the downloaded file, without the extension.
+    @param options .type = "png"] File type of the saved document. Accepted values are `"png"` and `"jpg"`.
+    @param options .callback] Function to be invoked after saving is complete.
+    @param renderOptions Custom options to be passed to the html-to-image function.
+*/
+export default function (elem: HTMLElement, options?: SaveElementOptions, renderOptions?: SaveElementRenderOptions): void;

package/umd/d3plus-export.full.js

@@ -4,110 +4,6 @@
   Copyright (c) 2026 D3plus - https://d3plus.org
   @license MIT
 */
-
-(function (factory) {
-  typeof define === 'function' && define.amd ? define(factory) :
-  factory();
-})((function () { 'use strict';
-
-  if (typeof window !== "undefined") {
-    (function () {
-      try {
-        if (typeof SVGElement === 'undefined' || Boolean(SVGElement.prototype.innerHTML)) {
-          return;
-        }
-      } catch (e) {
-          return;
-      }
-
-      function serializeNode (node) {
-        switch (node.nodeType) {
-          case 1:
-            return serializeElementNode(node);
-          case 3:
-            return serializeTextNode(node);
-          case 8:
-            return serializeCommentNode(node);
-        }
-      }
-
-      function serializeTextNode (node) {
-          return node.textContent.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-      }
-
-      function serializeCommentNode (node) {
-          return '<!--' + node.nodeValue + '-->'
-      }
-
-      function serializeElementNode (node) {
-          var output = '';
-
-          output += '<' + node.tagName;
-
-          if (node.hasAttributes()) {
-              [].forEach.call(node.attributes, function(attrNode) {
-                  output += ' ' + attrNode.name + '="' + attrNode.value + '"';
-              });
-          }
-
-          output += '>';
-
-          if (node.hasChildNodes()) {
-              [].forEach.call(node.childNodes, function(childNode) {
-                  output += serializeNode(childNode);
-              });
-          }
-
-          output += '</' + node.tagName + '>';
-
-          return output;
-      }
-
-      Object.defineProperty(SVGElement.prototype, 'innerHTML', {
-        get: function () {
-          var output = '';
-
-          [].forEach.call(this.childNodes, function(childNode) {
-              output += serializeNode(childNode);
-          });
-
-          return output;
-        },
-        set: function (markup) {
-          while (this.firstChild) {
-            this.removeChild(this.firstChild);
-          }
-
-          try {
-            var dXML = new DOMParser();
-            dXML.async = false;
-
-            var sXML = '<svg xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\'>' + markup + '</svg>';
-            var svgDocElement = dXML.parseFromString(sXML, 'text/xml').documentElement;
-
-            [].forEach.call(svgDocElement.childNodes, function(childNode) {
-                this.appendChild(this.ownerDocument.importNode(childNode, true));
-            }.bind(this));
-          } catch (e) {
-              throw new Error('Error parsing markup string');
-          }
-        }
-      });
-
-      Object.defineProperty(SVGElement.prototype, 'innerSVG', {
-        get: function () {
-          return this.innerHTML;
-        },
-        set: function (markup) {
-          this.innerHTML = markup;
-        }
-      });
-
-    })();
-  }
-
-}));
-
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
     typeof define === 'function' && define.amd ? define('@d3plus/export', ['exports'], factory) :
@@ -1107,27 +1003,26 @@
         type: "png"
     };
     /**
-        @function saveElement
-        @desc Downloads an HTML Element as a bitmap PNG image.
-        @param {HTMLElement} elem A single element to be saved to one file.
-        @param {Object} [options] Additional options to specify.
-        @param {String} [options.filename = "download"] Filename for the downloaded file, without the extension.
-        @param {String} [options.type = "png"] File type of the saved document. Accepted values are `"png"` and `"jpg"`.
-        @param {Function} [options.callback] Function to be invoked after saving is complete.
-        @param {Object} [renderOptions] Custom options to be passed to the html-to-image function.
+        Downloads an HTML Element as a bitmap PNG image.
+        @param elem The DOM element or d3 selection to export.
+        @param options Additional options to specify.
+        @param options .filename = "download"] Filename for the downloaded file, without the extension.
+        @param options .type = "png"] File type of the saved document. Accepted values are `"png"` and `"jpg"`.
+        @param options .callback] Function to be invoked after saving is complete.
+        @param renderOptions Custom options to be passed to the html-to-image function.
     */ function saveElement(elem, options = {}, renderOptions = {}) {
         if (!elem) return;
-        options = Object.assign({}, defaultOptions, options);
+        const opts = Object.assign({}, defaultOptions, options);
         // rename renderOptions.background to backgroundColor for backwards compatibility
-        renderOptions = Object.assign({
+        const renderOpts = Object.assign({
             backgroundColor: renderOptions.background
         }, renderOptions);
         function finish(blob) {
-            FileSaverExports.saveAs(blob, `${options.filename}.${options.type}`);
-            if (options.callback) options.callback();
+            FileSaverExports.saveAs(blob, `${opts.filename}.${opts.type}`);
+            if (opts.callback) opts.callback();
         }
-        if (options.type === "svg") {
-            toSvg(elem, renderOptions).then((dataUrl)=>{
+        if (opts.type === "svg") {
+            toSvg(elem, renderOpts).then((dataUrl)=>{
                 const xhr = new XMLHttpRequest();
                 xhr.open("GET", dataUrl);
                 xhr.responseType = "blob";
@@ -1135,7 +1030,9 @@
                 xhr.send();
             });
         } else {
-            toBlob(elem, renderOptions).then(finish);
+            toBlob(elem, renderOpts).then((blob)=>{
+                if (blob) finish(blob);
+            });
         }
     }