@mkhuda/dom-screenshot 0.0.1

package/.travis.yml

@@ -0,0 +1,23 @@
+language: node_js
+node_js: 16
+jobs:
+  include:
+  - stage: build
+    script:
+    - yarn build
+before_deploy:
+  - yarn build
+deploy:
+  - provider: npm
+    email: "$NPM_EMAIL"
+    api_key: "$NPM_TOKEN"
+    skip_cleanup: true
+    on:
+      branch: main
+  - provider: npm
+    tag: beta
+    email: "$NPM_EMAIL"
+    api_key: "$NPM_TOKEN"
+    skip_cleanup: true
+    on:
+      branch: beta

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Lek Huda
+
+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

@@ -0,0 +1,37 @@
+# dom-screenshot
+DOM screenshot by dom-to-image forked & modified from [dom-to-image](https://github.com/tsayen/dom-to-image)
+
+## Added Fix:
+- Add encodeURIComponent on makeSvgDataUri. Based on (this)[https://github.com/tsayen/dom-to-image/issues/78] issue
+- Add Typescript support, (.d.ts) battery included.
+
+## Usages (React)
+```typescript
+import DomToImage from "@mkhuda/dom-screenshot";
+....
+
+return(
+    <button
+        onClick={() => {
+          const getElement = document.getElementById("root") as HTMLElement;
+          const image = DomToImage.toPng(document.body, {});
+          image.then((generatedImage) => {
+            window.open(generatedImage);
+          });
+        }}
+      >
+        Test
+    </button>
+)
+...
+```
+
+## Contributing
+
+Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
+
+Please make sure to update tests as appropriate.
+
+## License
+
+[MIT](https://choosealicense.com/licenses/mit/)

package/dist/dom-screenshot.d.ts

@@ -0,0 +1,277 @@
+/**
+ * @param {Node} node - The DOM Node object to render
+ * @param {Options} options - Rendering options
+ * @return {Promise} - A promise that is fulfilled with a SVG image data URL
+ * */
+export function toSvg(node: Node, options: {
+    /**
+     * - Should return true if passed node should be included in the output
+     * (excluding node means excluding it's children as well). Not called on the root node.
+     */
+    filter?: Function | undefined;
+    /**
+     * - color for the background, any valid CSS color value.
+     */
+    bgcolor?: string | undefined;
+    /**
+     * - width to be applied to node before rendering.
+     */
+    width?: number | undefined;
+    /**
+     * - height to be applied to node before rendering.
+     */
+    height?: number | undefined;
+    /**
+     * - an object whose properties to be copied to node's style before rendering.
+     */
+    style?: any | undefined;
+    /**
+     * - a Number between 0 and 1 indicating image quality (applicable to JPEG only),
+     * defaults to 1.0.
+     */
+    quality?: number | undefined;
+    /**
+     * - dataURL to use as a placeholder for failed images, default behaviour is to fail fast on images we can't fetch
+     */
+    imagePlaceholder?: string | undefined;
+    /**
+     * - set to true to cache bust by appending the time to the request url
+     */
+    cacheBust?: boolean;
+}): Promise<any>;
+/**
+ * @param {Node} node - The DOM Node object to render
+ * @param {Options} options - Rendering options
+ * @return {Promise} - A promise that is fulfilled with a PNG image data URL
+ * */
+export function toPng(node: Node, options: {
+    /**
+     * - Should return true if passed node should be included in the output
+     * (excluding node means excluding it's children as well). Not called on the root node.
+     */
+    filter?: Function | undefined;
+    /**
+     * - color for the background, any valid CSS color value.
+     */
+    bgcolor?: string | undefined;
+    /**
+     * - width to be applied to node before rendering.
+     */
+    width?: number | undefined;
+    /**
+     * - height to be applied to node before rendering.
+     */
+    height?: number | undefined;
+    /**
+     * - an object whose properties to be copied to node's style before rendering.
+     */
+    style?: any | undefined;
+    /**
+     * - a Number between 0 and 1 indicating image quality (applicable to JPEG only),
+     * defaults to 1.0.
+     */
+    quality?: number | undefined;
+    /**
+     * - dataURL to use as a placeholder for failed images, default behaviour is to fail fast on images we can't fetch
+     */
+    imagePlaceholder?: string | undefined;
+    /**
+     * - set to true to cache bust by appending the time to the request url
+     */
+    cacheBust?: boolean;
+}): Promise<any>;
+/**
+ * @param {Node} node - The DOM Node object to render
+ * @param {Options} options - Rendering options
+ * @return {Promise} - A promise that is fulfilled with a JPEG image data URL
+ * */
+export function toJpeg(node: Node, options: {
+    /**
+     * - Should return true if passed node should be included in the output
+     * (excluding node means excluding it's children as well). Not called on the root node.
+     */
+    filter?: Function | undefined;
+    /**
+     * - color for the background, any valid CSS color value.
+     */
+    bgcolor?: string | undefined;
+    /**
+     * - width to be applied to node before rendering.
+     */
+    width?: number | undefined;
+    /**
+     * - height to be applied to node before rendering.
+     */
+    height?: number | undefined;
+    /**
+     * - an object whose properties to be copied to node's style before rendering.
+     */
+    style?: any | undefined;
+    /**
+     * - a Number between 0 and 1 indicating image quality (applicable to JPEG only),
+     * defaults to 1.0.
+     */
+    quality?: number | undefined;
+    /**
+     * - dataURL to use as a placeholder for failed images, default behaviour is to fail fast on images we can't fetch
+     */
+    imagePlaceholder?: string | undefined;
+    /**
+     * - set to true to cache bust by appending the time to the request url
+     */
+    cacheBust?: boolean;
+}): Promise<any>;
+/**
+ * @param {Node} node - The DOM Node object to render
+ * @param {Options} options - Rendering options
+ * @return {Promise} - A promise that is fulfilled with a Blob image data URL
+ * */
+export function toBlob(node: Node, options: {
+    /**
+     * - Should return true if passed node should be included in the output
+     * (excluding node means excluding it's children as well). Not called on the root node.
+     */
+    filter?: Function | undefined;
+    /**
+     * - color for the background, any valid CSS color value.
+     */
+    bgcolor?: string | undefined;
+    /**
+     * - width to be applied to node before rendering.
+     */
+    width?: number | undefined;
+    /**
+     * - height to be applied to node before rendering.
+     */
+    height?: number | undefined;
+    /**
+     * - an object whose properties to be copied to node's style before rendering.
+     */
+    style?: any | undefined;
+    /**
+     * - a Number between 0 and 1 indicating image quality (applicable to JPEG only),
+     * defaults to 1.0.
+     */
+    quality?: number | undefined;
+    /**
+     * - dataURL to use as a placeholder for failed images, default behaviour is to fail fast on images we can't fetch
+     */
+    imagePlaceholder?: string | undefined;
+    /**
+     * - set to true to cache bust by appending the time to the request url
+     */
+    cacheBust?: boolean;
+}): Promise<any>;
+/**
+ * @param {Node} node - The DOM Node object to render
+ * @param {Options} options - Rendering options
+ * @return {Promise} - A promise that is fulfilled with a PixelData image data URL
+ * */
+export function toPixelData(node: Node, options: {
+    /**
+     * - Should return true if passed node should be included in the output
+     * (excluding node means excluding it's children as well). Not called on the root node.
+     */
+    filter?: Function | undefined;
+    /**
+     * - color for the background, any valid CSS color value.
+     */
+    bgcolor?: string | undefined;
+    /**
+     * - width to be applied to node before rendering.
+     */
+    width?: number | undefined;
+    /**
+     * - height to be applied to node before rendering.
+     */
+    height?: number | undefined;
+    /**
+     * - an object whose properties to be copied to node's style before rendering.
+     */
+    style?: any | undefined;
+    /**
+     * - a Number between 0 and 1 indicating image quality (applicable to JPEG only),
+     * defaults to 1.0.
+     */
+    quality?: number | undefined;
+    /**
+     * - dataURL to use as a placeholder for failed images, default behaviour is to fail fast on images we can't fetch
+     */
+    imagePlaceholder?: string | undefined;
+    /**
+     * - set to true to cache bust by appending the time to the request url
+     */
+    cacheBust?: boolean;
+}): Promise<any>;
+declare namespace fontFaces {
+    export { resolveAll };
+    export namespace impl_1 {
+        export { readAll };
+    }
+    export { impl_1 as impl };
+}
+declare namespace images {
+    export { inlineAll };
+    export namespace impl_2 {
+        export { newImage };
+    }
+    export { impl_2 as impl };
+}
+declare namespace util {
+    export { escapeMain };
+    export { parseExtension };
+    export { mimeType };
+    export { dataAsUrl };
+    export { isDataUrl };
+    export { canvasToBlob };
+    export { resolveUrl };
+    export { getAndEncode };
+    export function uid(): string;
+    export { delay };
+    export { asArray };
+    export { escapeXhtml };
+    export { makeImage };
+    export { width };
+    export { height };
+}
+declare namespace inliner {
+    export { inlineAll };
+    export { shouldProcess };
+    export namespace impl_3 {
+        export { readUrls };
+        export { inline };
+    }
+    export { impl_3 as impl };
+}
+declare function resolveAll(): Promise<string>;
+declare function readAll(): Promise<any>;
+declare function inlineAll(node: any): any;
+declare function newImage(element: any): {
+    inline: (get: any) => Promise<any>;
+};
+declare function escapeMain(string: any): any;
+declare function parseExtension(url: any): string;
+declare function mimeType(url: any): any;
+declare function dataAsUrl(content: any, type: any): string;
+declare function isDataUrl(url: any): boolean;
+declare function canvasToBlob(canvas: any): Promise<any>;
+declare function resolveUrl(url: any, baseUrl: any): string;
+declare function getAndEncode(url: any): Promise<any>;
+declare function delay(ms: any): (arg: any) => Promise<any>;
+declare function asArray(arrayLike: any): any[];
+declare function escapeXhtml(string: any): any;
+declare function makeImage(uri: any): Promise<any>;
+declare function width(node: any): any;
+declare function height(node: any): any;
+declare function inlineAll_1(string: any, baseUrl: any, get: any): Promise<any>;
+declare function shouldProcess(string: any): boolean;
+declare function readUrls(string: any): string[];
+declare function inline(string: any, url: any, baseUrl: any, get: any): Promise<any>;
+export declare namespace impl {
+    export { fontFaces };
+    export { images };
+    export { util };
+    export { inliner };
+    export const options: {};
+}
+export {};

package/dist/dom-screenshot.min.js

@@ -0,0 +1 @@
+!function(){"use strict";!function(e){var t=function(){return{escapeMain:function(e){return e.replace(/([.*+?^${}()|\[\]\/\\])/g,"\\$1")},parseExtension:t,mimeType:function(e){var n=t(e).toLowerCase();return(r="application/font-woff",o="image/jpeg",{woff:r,woff2:r,ttf:"application/font-truetype",eot:"application/vnd.ms-fontobject",png:"image/png",jpg:o,jpeg:o,gif:"image/gif",tiff:"image/tiff",svg:"image/svg+xml"})[n]||"";var r,o},dataAsUrl:function(e,t){return"data:"+t+";base64,"+e},isDataUrl:function(e){return-1!==e.search(/^(data:)/)},canvasToBlob:function(e){return e.toBlob?new Promise((function(t){e.toBlob(t)})):function(e){return new Promise((function(t){for(var n=window.atob(e.toDataURL().split(",")[1]),r=n.length,o=new Uint8Array(r),i=0;i<r;i++)o[i]=n.charCodeAt(i);t(new Blob([o],{type:"image/png"}))}))}(e)},resolveUrl:function(e,t){var n=document.implementation.createHTMLDocument(),r=n.createElement("base");n.head.appendChild(r);var o=n.createElement("a");return n.body.appendChild(o),r.href=t,o.href=e,o.href},getAndEncode:function(e){var t=3e4;u.impl.options.cacheBust&&(e+=(/\?/.test(e)?"&":"?")+(new Date).getTime());return new Promise((function(n){var r,o=new XMLHttpRequest;if(o.onreadystatechange=a,o.ontimeout=c,o.responseType="blob",o.timeout=t,o.open("GET",e,!0),o.send(),u.impl.options.imagePlaceholder){var i=u.impl.options.imagePlaceholder.split(/,/);i&&i[1]&&(r=i[1])}function a(){if(4===o.readyState)if(200===o.status){var t=new FileReader;t.onloadend=function(){var e=t.result.split(/,/)[1];n(e)},t.readAsDataURL(o.response)}else r?n(r):l("cannot fetch resource: "+e+", status: "+o.status)}function c(){r?n(r):l("timeout of "+t+"ms occured while fetching resource: "+e)}function l(e){console.error(e),n("")}}))},uid:(e=0,function(){return"u"+t()+e++;function t(){return("0000"+(Math.random()*Math.pow(36,4)<<0).toString(36)).slice(-4)}}),delay:function(e){return function(t){return new Promise((function(n){setTimeout((function(){n(t)}),e)}))}},asArray:function(e){for(var t=[],n=e.length,r=0;r<n;r++)t.push(e[r]);return t},escapeXhtml:function(e){return e.replace(/#/g,"%23").replace(/\n/g,"%0A")},makeImage:function(e){return new Promise((function(t,n){var r=new Image;r.onload=function(){t(r)},r.onerror=n,r.src=e}))},width:function(e){var t=n(e,"border-left-width"),r=n(e,"border-right-width");return e.scrollWidth+t+r},height:function(e){var t=n(e,"border-top-width"),r=n(e,"border-bottom-width");return e.scrollHeight+t+r}};var e;function t(e){var t=/\.([^\.\/]*?)$/g.exec(e);return t?t[1]:""}function n(e,t){var n=window.getComputedStyle(e).getPropertyValue(t);return parseFloat(n.replace("px",""))}}(),n=function(){var e=/url\(['"]?([^'"]+?)['"]?\)/g;return{inlineAll:function(e,t,i){return u()?Promise.resolve(e):Promise.resolve(e).then(r).then((function(n){var r=Promise.resolve(e);return n.forEach((function(e){r=r.then((function(n){return o(n,e,t,i)}))})),r}));function u(){return!n(e)}},shouldProcess:n,impl:{readUrls:r,inline:o}};function n(t){return-1!==t.search(e)}function r(n){for(var r,o=[];null!==(r=e.exec(n));)o.push(r[1]);return o.filter((function(e){return!t.isDataUrl(e)}))}function o(e,n,r,o){return Promise.resolve(n).then((function(e){return r?t.resolveUrl(e,r):e})).then(o||t.getAndEncode).then((function(e){return t.dataAsUrl(e,t.mimeType(n))})).then((function(r){return e.replace(function(e){return new RegExp("(url\\(['\"]?)("+t.escapeMain(e)+")(['\"]?\\))","g")}(n),"$1"+r+"$3")}))}}(),r=function(){return{resolveAll:function(){return e().then((function(e){return Promise.all(e.map((function(e){return e.resolve()})))})).then((function(e){return e.join("\n")}))},impl:{readAll:e}};function e(){return Promise.resolve(t.asArray(document.styleSheets)).then((function(e){var n=[];return e.forEach((function(e){try{t.asArray(e.cssRules||[]).forEach(n.push.bind(n))}catch(t){console.log("Error while reading CSS rules from "+e.href,t.toString())}})),n})).then((function(e){return e.filter((function(e){return e.type===CSSRule.FONT_FACE_RULE})).filter((function(e){return n.shouldProcess(e.style.getPropertyValue("src"))}))})).then((function(t){return t.map(e)}));function e(e){return{resolve:function(){var t=(e.parentStyleSheet||{}).href;return n.inlineAll(e.cssText,t)},src:function(){return e.style.getPropertyValue("src")}}}}}(),o=function(){return{inlineAll:function r(o){return o instanceof Element?i(o).then((function(){return o instanceof HTMLImageElement?e(o).inline():Promise.all(t.asArray(o.childNodes).map((function(e){return r(e)})))})):Promise.resolve(o);function i(e){var t=e.style.getPropertyValue("background");return t?n.inlineAll(t).then((function(t){e.style.setProperty("background",t,e.style.getPropertyPriority("background"))})).then((function(){return e})):Promise.resolve(e)}},impl:{newImage:e}};function e(e){return{inline:function(n){return t.isDataUrl(e.src)?Promise.resolve():Promise.resolve(e.src).then(n||t.getAndEncode).then((function(n){return t.dataAsUrl(n,t.mimeType(e.src))})).then((function(t){return new Promise((function(n,r){e.onload=n,e.onerror=r,e.src=t}))}))}}}}(),i={imagePlaceholder:void 0,cacheBust:!1},u={toSvg:a,toPng:function(e,t){return c(e,t||{}).then((function(e){return e.toDataURL()}))},toJpeg:function(e,t){return c(e,t=t||{}).then((function(e){return e.toDataURL("image/jpeg",t.quality||1)}))},toBlob:function(e,n){return c(e,n||{}).then(t.canvasToBlob)},toPixelData:function(e,n){return c(e,n||{}).then((function(n){return n.getContext("2d").getImageData(0,0,t.width(e),t.height(e)).data}))},impl:{fontFaces:r,images:o,util:t,inliner:n,options:{}}};function a(e,n){return function(e){void 0===e.imagePlaceholder?u.impl.options.imagePlaceholder=i.imagePlaceholder:u.impl.options.imagePlaceholder=e.imagePlaceholder;void 0===e.cacheBust?u.impl.options.cacheBust=i.cacheBust:u.impl.options.cacheBust=e.cacheBust}(n=n||{}),Promise.resolve(e).then((function(e){return l(e,n.filter,!0)})).then(s).then(f).then((function(e){n.bgcolor&&(e.style.backgroundColor=n.bgcolor);n.width&&(e.style.width=n.width+"px");n.height&&(e.style.height=n.height+"px");n.style&&Object.keys(n.style).forEach((function(t){e.style[t]=n.style[t]}));return e})).then((function(r){return function(e,t,n){return Promise.resolve(e).then((function(e){return e.setAttribute("xmlns","http://www.w3.org/1999/xhtml"),(new XMLSerializer).serializeToString(e)})).then((function(e){return'<foreignObject x="0" y="0" width="100%" height="100%">'+e+"</foreignObject>"})).then((function(e){return'<svg xmlns="http://www.w3.org/2000/svg" width="'+t+'" height="'+n+'">'+e+"</svg>"})).then((function(e){return"data:image/svg+xml;charset=utf-8,"+encodeURIComponent(e)}))}(r,n.width||t.width(e),n.height||t.height(e))}))}function c(e,n){return a(e,n).then(t.makeImage).then(t.delay(100)).then((function(r){var o=function(e){var r=document.createElement("canvas");if(r.width=n.width||t.width(e),r.height=n.height||t.height(e),n.bgcolor){var o=r.getContext("2d");o.fillStyle=n.bgcolor,o.fillRect(0,0,r.width,r.height)}return r}(e);return o.getContext("2d").drawImage(r,0,0),o}))}function l(e,n,r){return r||!n||n(e)?Promise.resolve(e).then((function(e){return e instanceof HTMLCanvasElement?t.makeImage(e.toDataURL()):e.cloneNode(!1)})).then((function(r){return function(e,n,r){var o=e.childNodes;return 0===o.length?Promise.resolve(n):i(n,t.asArray(o),r).then((function(){return n}));function i(e,t,n){var r=Promise.resolve();return t.forEach((function(t){r=r.then((function(){return l(t,n)})).then((function(t){t&&e.appendChild(t)}))})),r}}(e,r,n)})).then((function(n){return function(e,n){var r=n;return r instanceof Element?Promise.resolve().then(o).then(i).then(u).then(a).then(c).then((function(){return r})):r;function o(){if(r instanceof HTMLVideoElement){var t=window.getComputedStyle(e),n=document.createElement("canvas");n.width=parseInt(t.width,10),n.height=parseInt(t.height,10);var o=Math.max(e.videoWidth/n.width,e.videoHeight/n.height),i=e.videoWidth/o,u=e.videoHeight/o,a=n.width/2-i/2,c=n.height/2-u/2;n.getContext("2d").drawImage(e,a,c,i,u),r=new Image;try{r.src=n.toDataURL()}catch(e){r.src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="}}}function i(){function n(e,n){function r(e,n){t.asArray(e).forEach((function(t){n.setProperty(t,e.getPropertyValue(t),e.getPropertyPriority(t))}))}e.cssText?n.cssText=e.cssText:r(e,n)}n(window.getComputedStyle(e),r.style)}function u(){function n(n){var o=window.getComputedStyle(e,n),i=o.getPropertyValue("content");if(""!==i&&"none"!==i){var u=t.uid();r.className=r.className+" "+u;var a=document.createElement("style");a.appendChild(c(u,n,o)),r.appendChild(a)}function c(e,n,r){var o="."+e+":"+n,i=r.cssText?u(r):a(r);return document.createTextNode(o+"{"+i+"}");function u(e){var t=e.getPropertyValue("content");return e.cssText+" content: "+t+";"}function a(e){return t.asArray(e).map(n).join("; ")+";";function n(t){return t+": "+e.getPropertyValue(t)+(e.getPropertyPriority(t)?" !important":"")}}}}[":before",":after"].forEach((function(e){n(e)}))}function a(){e instanceof HTMLTextAreaElement&&(r.innerHTML=e.value),e instanceof HTMLInputElement&&r.setAttribute("value",e.value)}function c(){r instanceof SVGElement&&(r.setAttribute("xmlns","http://www.w3.org/2000/svg"),r instanceof SVGRectElement&&["width","height"].forEach((function(e){var t=r.getAttribute(e);t&&r.style.setProperty(e,t)})))}}(e,n)})):Promise.resolve()}function s(e){return r.resolveAll().then((function(t){var n=document.createElement("style");return e.appendChild(n),n.appendChild(document.createTextNode(t)),e}))}function f(e){return o.inlineAll(e).then((function(){return e}))}"undefined"!=typeof module?module.exports=u:e.domtoimage=u}(void 0)}();

package/package.json

@@ -0,0 +1,46 @@
+{
+    "name": "@mkhuda/dom-screenshot",
+    "version": "0.0.1",
+    "description": "DOM screenshot by dom-to-image",
+    "main": "dist/dom-screenshot.min.js",
+    "types": "dist/dom-screenshot.d.ts",
+    "author": "Muhammad K. Huda",
+    "license": "MIT",
+    "scripts": {
+        "nodeminify": "node ./node_modules/.bin/node-minify",
+        "build": "rimraf dist && rollup -c --perf",
+        "build-dts": "npx -p typescript tsc src/dom-screenshot.js --declaration --allowJs --emitDeclarationOnly --outDir types",
+        "start": "yarn build",
+        "test": "jest",
+        "watch": "rollup -c --watch"
+    },
+    "devDependencies": {
+        "prettier": "^2.3.2",
+        "rimraf": "^3.0.2",
+        "rollup": "^2.56.3",
+        "rollup-plugin-copy": "^3.4.0",
+        "rollup-plugin-terser": "^7.0.2",
+        "tslib": "^2.3.1",
+        "typescript": "^4.3.5"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/mkhuda/dom-screenshot.git"
+    },
+    "bugs": {
+        "url": "https://github.com/mkhuda/dom-screenshot/issues"
+    },
+    "homepage": "https://github.com/mkhuda/dom-screenshot#readme",
+    "publishConfig": {
+        "access": "public",
+        "registry": "https://registry.npmjs.org/"
+    },
+    "keywords": [
+        "dom",
+        "screenshot",
+        "capture",
+        "image",
+        "dom-to-image"
+    ],
+    "dependencies": {}
+}

package/rollup.config.js

@@ -0,0 +1,20 @@
+import { terser } from "rollup-plugin-terser";
+import copy from 'rollup-plugin-copy'
+
+export default {
+  input: "src/dom-screenshot.js",
+  output: [
+    {
+      file: "dist/dom-screenshot.min.js",
+      format: "iife",
+      name: "version",
+      plugins: [
+        terser(),
+        copy({
+          targets: [{ src: "types/dom-screenshot.d.ts", dest: "dist" }],
+          hook: 'writeBundle'
+        }),
+      ],
+    },
+  ],
+};

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+    // Change this to match your project
+    "include": ["src/**/*"],
+    "compilerOptions": {
+      // Tells TypeScript to read JS files, as
+      // normally they are ignored as source files
+      "allowJs": true,
+      // Generate d.ts files
+      "declaration": true,
+      // This compiler run should
+      // only output d.ts files
+      "emitDeclarationOnly": true,
+      // Types should go into this directory.
+      // Removing this would place the .d.ts files
+      // next to the .js files
+      "outDir": "dist",
+      // go to js file when using IDE functions like
+      // "Go to Definition" in VSCode
+      "declarationMap": true
+    }
+  }