react-to-print - npm Package Compare versions

Comparing version 3.0.0-beta-2 to 3.0.0-beta-3

lib/index.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define("lib",["react"],t):"object"==typeof exports?exports.lib=t(require("react")):e.lib=t(e.react)}("undefined"!=typeof self?self:this,(function(e){return function(){"use strict";var t={496:function(t){t.exports=e}},o={};function n(e){var r=o[e];if(void 0!==r)return r.exports;var s=o[e]={exports:{}};return t[e](s,s.exports,n),s.exports}n.d=function(e,t){for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var r={};return function(){n.r(r),n.d(r,{useReactToPrint:function(){return a}});var e=n(496);function t({level:e="error",messages:t,suppressErrors:o=!1}){o||("error"===e?console.error(t):"warning"===e?console.warn(t):"debug"===e&&console.debug(t))}function o(e,t){if(t||!e){const e=document.getElementById("printWindow");e&&document.body.removeChild(e)}}function s(e,n){const{documentTitle:r,onAfterPrint:s,onPrintError:i,preserveAfterPrint:l,print:a,suppressErrors:c}=n;setTimeout((()=>{var n,d;if(e.contentWindow)if(e.contentWindow.focus(),a)a(e).then((()=>null==s?void 0:s())).then((()=>o(l))).catch((e=>{i?i("print",e):t({messages:["An error was thrown by the specified `print` function"],suppressErrors:c})}));else{if(e.contentWindow.print){const t=null!==(d=null===(n=e.contentDocument)||void 0===n?void 0:n.title)&&void 0!==d?d:"",o=e.ownerDocument.title;r&&(e.ownerDocument.title=r,e.contentDocument&&(e.contentDocument.title=r)),e.contentWindow.print(),r&&(e.ownerDocument.title=o,e.contentDocument&&(e.contentDocument.title=t))}else t({messages:["Printing for this browser is not currently possible: the browser does not have a `print` method available for iframes."],suppressErrors:c});null==s||s(),o(l)}else t({messages:["Printing failed because the `contentWindow` of the print iframe did not load. This is possibly an error with `react-to-print`. Please file an issue: https://github.com/MatthewHerbst/react-to-print/issues/"],suppressErrors:c})}),500)}const i='\n    @page {\n        /* Remove browser default header (title) and footer (url) */\n        margin: 0;\n    }\n    @media print {\n        body {\n            /* Tell browsers to print background colors */\n            color-adjust: exact; /* Firefox. This is an older version of "print-color-adjust" */\n            print-color-adjust: exact; /* Firefox/Safari */\n            -webkit-print-color-adjust: exact; /* Chrome/Safari/Edge/Opera */\n        }\n    }\n';function l(e,o,n,r){e.onload=()=>function(e,o,n,r){var l,a,c;const{clonedContentNode:d,clonedImgNodes:u,clonedVideoNodes:p,numResourcesToLoad:h,originalCanvasNodes:g}=n,{bodyClass:m,fonts:f,ignoreGlobalStyles:b,pageStyle:y,nonce:v,suppressErrors:w}=r;e.onload=null;const E=e.contentDocument||(null===(l=e.contentWindow)||void 0===l?void 0:l.document);if(E){E.body.appendChild(d),f&&((null===(a=e.contentDocument)||void 0===a?void 0:a.fonts)&&(null===(c=e.contentWindow)||void 0===c?void 0:c.FontFace)?f.forEach((t=>{const n=new FontFace(t.family,t.source,{weight:t.weight,style:t.style});e.contentDocument.fonts.add(n),n.loaded.then((()=>{o(n)})).catch((e=>{o(n,["Failed loading the font:",n,"Load error:",e])}))})):(f.forEach((e=>o(e))),t({messages:['"react-to-print" is not able to load custom fonts because the browser does not support the FontFace API but will continue attempting to print the page'],suppressErrors:w})));const n=null!=y?y:i,r=E.createElement("style");v&&(r.setAttribute("nonce",v),E.head.setAttribute("nonce",v)),r.appendChild(E.createTextNode(n)),E.head.appendChild(r),m&&E.body.classList.add(...m.split(" "));const s=E.querySelectorAll("canvas");for(let e=0;e<g.length;++e){const o=g[e],n=s[e];if(void 0===n){t({messages:["A canvas element could not be copied for printing, has it loaded? `onBeforePrint` likely resolved too early.",o],suppressErrors:w});continue}const r=n.getContext("2d");r&&r.drawImage(o,0,0)}for(let e=0;e<u.length;e++){const t=u[e],n=t.getAttribute("src");if(n){const e=new Image;e.onload=()=>o(t),e.onerror=(e,n,r,s,i)=>o(t,["Error loading <img>",t,"Error",i]),e.src=n}else o(t,['Found an <img> tag with an empty "src" attribute. This prevents pre-loading it.',t])}for(let e=0;e<p.length;e++){const t=p[e];t.preload="auto";const n=t.getAttribute("poster");if(n){const e=new Image;e.onload=()=>o(t),e.onerror=(e,r,s,i,l)=>o(t,["Error loading video poster",n,"for video",t,"Error:",l]),e.src=n}else t.readyState>=2?o(t):(t.onloadeddata=()=>o(t),t.onerror=(e,n,r,s,i)=>o(t,["Error loading video",t,"Error",i]),t.onstalled=()=>o(t,["Loading video stalled, skipping",t]))}if(!b){const e=document.querySelectorAll("style, link[rel~='stylesheet'], link[as='style']");for(let n=0,r=e.length;n<r;++n){const r=e[n];if("style"===r.tagName.toLowerCase()){const e=E.createElement(r.tagName),o=r.sheet;if(o){let s="";try{const e=o.cssRules.length;for(let t=0;t<e;++t)"string"==typeof o.cssRules[t].cssText&&(s+=`${o.cssRules[t].cssText}\r\n`)}catch(e){t({messages:["A stylesheet could not be accessed. This is likely due to the stylesheet having cross-origin imports, and many browsers block script access to cross-origin stylesheets. See https://github.com/MatthewHerbst/react-to-print/issues/429 for details. You may be able to load the sheet by both marking the stylesheet with the cross `crossorigin` attribute, and setting the `Access-Control-Allow-Origin` header on the server serving the stylesheet. Alternatively, host the stylesheet on your domain to avoid this issue entirely.",r],level:"warning"})}e.setAttribute("id",`react-to-print-${n}`),v&&e.setAttribute("nonce",v),e.appendChild(E.createTextNode(s)),E.head.appendChild(e)}}else if(r.getAttribute("href"))if(r.hasAttribute("disabled"))t({messages:["`react-to-print` encountered a <link> tag with a `disabled` attribute and will ignore it. Note that the `disabled` attribute is deprecated, and some browsers ignore it. You should stop using it. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-disabled. The <link> is:",r],level:"warning"}),o(r);else{const e=E.createElement(r.tagName);for(let t=0,o=r.attributes.length;t<o;++t){const o=r.attributes[t];o&&e.setAttribute(o.nodeName,o.nodeValue||"")}e.onload=()=>o(e),e.onerror=(t,n,r,s,i)=>o(e,["Failed to load",e,"Error:",i]),v&&e.setAttribute("nonce",v),E.head.appendChild(e)}else t({messages:["`react-to-print` encountered a <link> tag with an empty `href` attribute. In addition to being invalid HTML, this can cause problems in many browsers, and so the <link> was not loaded. The <link> is:",r],level:"warning"}),o(r)}}}0===h&&s(e,r)}(e,o,n,r),document.body.appendChild(e)}function a(n){const{contentRef:r,fonts:i,ignoreGlobalStyles:a,onBeforePrint:c,onPrintError:d,preserveAfterPrint:u,suppressErrors:p}=n,h=(0,e.useCallback)((e=>{o(u,!0);const h=function({contentRef:e,optionalContent:o,suppressErrors:n}){return o?(e&&t({level:"warning",messages:['"react-to-print" received a `contentRef` option and a optional-content param passed to its callback. The `contentRef` option will be ignored.']}),o()):e?e.current:void t({messages:['"react-to-print" did not receive a `contentRef` option or a optional-content param pass to its callback.'],suppressErrors:n})}({contentRef:r,optionalContent:e,suppressErrors:p});if(!h)return void t({messages:["There is nothing to print"],suppressErrors:p});if(!h)return void t({messages:['"react-to-print" could not locate the DOM node corresponding with the `content` prop'],suppressErrors:p});const g=h.cloneNode(!0),m=document.querySelectorAll("link[rel~='stylesheet'], link[as='style']"),f=g.querySelectorAll("img"),b=g.querySelectorAll("video"),y=i?i.length:0,v=(a?0:m.length)+f.length+b.length+y,w=[],E=[],A=function(){const e=document.createElement("iframe");return e.width=`${document.documentElement.clientWidth}px`,e.height=`${document.documentElement.clientHeight}px`,e.style.position="absolute",e.style.top=`-${document.documentElement.clientHeight+100}px`,e.style.left=`-${document.documentElement.clientWidth+100}px`,e.id="printWindow",e.srcdoc="<!DOCTYPE html>",e}(),T=(e,o)=>{w.includes(e)?t({level:"debug",messages:["Tried to mark a resource that has already been handled",e],suppressErrors:p}):(o?(t({messages:['"react-to-print" was unable to load a resource but will continue attempting to print the page',...o],suppressErrors:p}),E.push(e)):w.push(e),w.length+E.length===v&&s(A,n))},x={clonedContentNode:g,clonedImgNodes:f,clonedVideoNodes:b,numResourcesToLoad:v,originalCanvasNodes:h.querySelectorAll("canvas")};c?c().then((()=>l(A,T,x,n))).catch((e=>{null==d||d("onBeforePrint",e)})):l(A,T,x,n)}),[n]);return h}}(),r}()}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define("lib",["react"],t):"object"==typeof exports?exports.lib=t(require("react")):e.lib=t(e.react)}("undefined"!=typeof self?self:this,(function(e){return function(){"use strict";var t={496:function(t){t.exports=e}},o={};function n(e){var r=o[e];if(void 0!==r)return r.exports;var s=o[e]={exports:{}};return t[e](s,s.exports,n),s.exports}n.d=function(e,t){for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var r={};return function(){n.r(r),n.d(r,{useReactToPrint:function(){return u}});var e=n(496);function t({level:e="error",messages:t,suppressErrors:o=!1}){o||("error"===e?console.error(t):"warning"===e?console.warn(t):"debug"===e&&console.debug(t))}function o(e,t){if(t||!e){const e=document.getElementById("printWindow");e&&document.body.removeChild(e)}}function s(e,n){const{documentTitle:r,onAfterPrint:s,onPrintError:i,preserveAfterPrint:l,print:a,suppressErrors:c}=n;setTimeout((()=>{var n,d;if(e.contentWindow)if(e.contentWindow.focus(),a)a(e).then((()=>null==s?void 0:s())).then((()=>o(l))).catch((e=>{i?i("print",e):t({messages:["An error was thrown by the specified `print` function"],suppressErrors:c})}));else{if(e.contentWindow.print){const t=null!==(d=null===(n=e.contentDocument)||void 0===n?void 0:n.title)&&void 0!==d?d:"",o=e.ownerDocument.title;r&&(e.ownerDocument.title=r,e.contentDocument&&(e.contentDocument.title=r)),e.contentWindow.print(),r&&(e.ownerDocument.title=o,e.contentDocument&&(e.contentDocument.title=t))}else t({messages:["Printing for this browser is not currently possible: the browser does not have a `print` method available for iframes."],suppressErrors:c});null==s||s(),o(l)}else t({messages:["Printing failed because the `contentWindow` of the print iframe did not load. This is possibly an error with `react-to-print`. Please file an issue: https://github.com/MatthewHerbst/react-to-print/issues/"],suppressErrors:c})}),500)}function i(e){const t=[],o=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,null);let n=o.nextNode();for(;n;)t.push(n),n=o.nextNode();return t}function l(e,o,n){const r=i(e),s=i(o);if(r.length===s.length)for(let e=0;e<r.length;e++){const t=r[e],o=s[e],i=t.shadowRoot;if(null!==i){const e=o.attachShadow({mode:i.mode});e.innerHTML=i.innerHTML,l(i,e,n)}}else t({messages:["When cloning shadow root content, source and target elements have different size. `onBeforePrint` likely resolved too early.",e,o],suppressErrors:n})}const a='\n    @page {\n        /* Remove browser default header (title) and footer (url) */\n        margin: 0;\n    }\n    @media print {\n        body {\n            /* Tell browsers to print background colors */\n            color-adjust: exact; /* Firefox. This is an older version of "print-color-adjust" */\n            print-color-adjust: exact; /* Firefox/Safari */\n            -webkit-print-color-adjust: exact; /* Chrome/Safari/Edge/Opera */\n        }\n    }\n';function c(e,o,n,r){var i,c,d;const{contentNode:u,clonedContentNode:p,clonedImgNodes:h,clonedVideoNodes:f,numResourcesToLoad:g,originalCanvasNodes:m}=n,{bodyClass:b,fonts:y,ignoreGlobalStyles:v,pageStyle:w,nonce:E,suppressErrors:T,copyShadowRoots:A}=r;e.onload=null;const x=e.contentDocument||(null===(i=e.contentWindow)||void 0===i?void 0:i.document);if(x){const n=x.body.appendChild(p);A&&l(u,n,!!T),y&&((null===(c=e.contentDocument)||void 0===c?void 0:c.fonts)&&(null===(d=e.contentWindow)||void 0===d?void 0:d.FontFace)?y.forEach((t=>{const n=new FontFace(t.family,t.source,{weight:t.weight,style:t.style});e.contentDocument.fonts.add(n),n.loaded.then((()=>{o(n)})).catch((e=>{o(n,["Failed loading the font:",n,"Load error:",e])}))})):(y.forEach((e=>o(e))),t({messages:['"react-to-print" is not able to load custom fonts because the browser does not support the FontFace API but will continue attempting to print the page'],suppressErrors:T})));const r=null!=w?w:a,s=x.createElement("style");E&&(s.setAttribute("nonce",E),x.head.setAttribute("nonce",E)),s.appendChild(x.createTextNode(r)),x.head.appendChild(s),b&&x.body.classList.add(...b.split(" "));const i=x.querySelectorAll("canvas");for(let e=0;e<m.length;++e){const o=m[e],n=i[e];if(void 0===n){t({messages:["A canvas element could not be copied for printing, has it loaded? `onBeforePrint` likely resolved too early.",o],suppressErrors:T});continue}const r=n.getContext("2d");r&&r.drawImage(o,0,0)}for(let e=0;e<h.length;e++){const t=h[e],n=t.getAttribute("src");if(n){const e=new Image;e.onload=()=>o(t),e.onerror=(e,n,r,s,i)=>o(t,["Error loading <img>",t,"Error",i]),e.src=n}else o(t,['Found an <img> tag with an empty "src" attribute. This prevents pre-loading it.',t])}for(let e=0;e<f.length;e++){const t=f[e];t.preload="auto";const n=t.getAttribute("poster");if(n){const e=new Image;e.onload=()=>o(t),e.onerror=(e,r,s,i,l)=>o(t,["Error loading video poster",n,"for video",t,"Error:",l]),e.src=n}else t.readyState>=2?o(t):(t.onloadeddata=()=>o(t),t.onerror=(e,n,r,s,i)=>o(t,["Error loading video",t,"Error",i]),t.onstalled=()=>o(t,["Loading video stalled, skipping",t]))}if(!v){const e=document.querySelectorAll("style, link[rel~='stylesheet'], link[as='style']");for(let n=0,r=e.length;n<r;++n){const r=e[n];if("style"===r.tagName.toLowerCase()){const e=x.createElement(r.tagName),o=r.sheet;if(o){let s="";try{const e=o.cssRules.length;for(let t=0;t<e;++t)"string"==typeof o.cssRules[t].cssText&&(s+=`${o.cssRules[t].cssText}\r\n`)}catch(e){t({messages:["A stylesheet could not be accessed. This is likely due to the stylesheet having cross-origin imports, and many browsers block script access to cross-origin stylesheets. See https://github.com/MatthewHerbst/react-to-print/issues/429 for details. You may be able to load the sheet by both marking the stylesheet with the cross `crossorigin` attribute, and setting the `Access-Control-Allow-Origin` header on the server serving the stylesheet. Alternatively, host the stylesheet on your domain to avoid this issue entirely.",r],level:"warning"})}e.setAttribute("id",`react-to-print-${n}`),E&&e.setAttribute("nonce",E),e.appendChild(x.createTextNode(s)),x.head.appendChild(e)}}else if(r.getAttribute("href"))if(r.hasAttribute("disabled"))t({messages:["`react-to-print` encountered a <link> tag with a `disabled` attribute and will ignore it. Note that the `disabled` attribute is deprecated, and some browsers ignore it. You should stop using it. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-disabled. The <link> is:",r],level:"warning"}),o(r);else{const e=x.createElement(r.tagName);for(let t=0,o=r.attributes.length;t<o;++t){const o=r.attributes[t];o&&e.setAttribute(o.nodeName,o.nodeValue||"")}e.onload=()=>o(e),e.onerror=(t,n,r,s,i)=>o(e,["Failed to load",e,"Error:",i]),E&&e.setAttribute("nonce",E),x.head.appendChild(e)}else t({messages:["`react-to-print` encountered a <link> tag with an empty `href` attribute. In addition to being invalid HTML, this can cause problems in many browsers, and so the <link> was not loaded. The <link> is:",r],level:"warning"}),o(r)}}}0===g&&s(e,r)}function d(e,t,o,n){e.onload=()=>c(e,t,o,n),document.body.appendChild(e)}function u(n){const{contentRef:r,fonts:i,ignoreGlobalStyles:l,onBeforePrint:a,onPrintError:c,preserveAfterPrint:u,suppressErrors:p}=n,h=(0,e.useCallback)((e=>{o(u,!0);const h=function({contentRef:e,optionalContent:o,suppressErrors:n}){return o?(e&&t({level:"warning",messages:['"react-to-print" received a `contentRef` option and a optional-content param passed to its callback. The `contentRef` option will be ignored.']}),o()):e?e.current:void t({messages:['"react-to-print" did not receive a `contentRef` option or a optional-content param pass to its callback.'],suppressErrors:n})}({contentRef:r,optionalContent:e,suppressErrors:p});if(!h)return void t({messages:["There is nothing to print"],suppressErrors:p});if(!h)return void t({messages:['"react-to-print" could not locate the DOM node corresponding with the `content` prop'],suppressErrors:p});const f=h.cloneNode(!0),g=document.querySelectorAll("link[rel~='stylesheet'], link[as='style']"),m=f.querySelectorAll("img"),b=f.querySelectorAll("video"),y=i?i.length:0,v=(l?0:g.length)+m.length+b.length+y,w=[],E=[],T=function(){const e=document.createElement("iframe");return e.width=`${document.documentElement.clientWidth}px`,e.height=`${document.documentElement.clientHeight}px`,e.style.position="absolute",e.style.top=`-${document.documentElement.clientHeight+100}px`,e.style.left=`-${document.documentElement.clientWidth+100}px`,e.id="printWindow",e.srcdoc="<!DOCTYPE html>",e}(),A=(e,o)=>{w.includes(e)?t({level:"debug",messages:["Tried to mark a resource that has already been handled",e],suppressErrors:p}):(o?(t({messages:['"react-to-print" was unable to load a resource but will continue attempting to print the page',...o],suppressErrors:p}),E.push(e)):w.push(e),w.length+E.length===v&&s(T,n))},x={contentNode:h,clonedContentNode:f,clonedImgNodes:m,clonedVideoNodes:b,numResourcesToLoad:v,originalCanvasNodes:h.querySelectorAll("canvas")};a?a().then((()=>d(T,A,x,n))).catch((e=>{null==c||c("onBeforePrint",e)})):d(T,A,x,n)}),[n]);return h}}(),r}()}));

lib/types/UseReactToPrintOptions.d.ts

 import { RefObject } from "react";
-import type { Font } from "./Font";
+import type { Font } from "./font";
 export interface UseReactToPrintOptions {
@@ -17,2 +17,3 @@ bodyClass?: string;
     suppressErrors?: boolean;
+    copyShadowRoots?: boolean;
 }

lib/utils/appendPrintWindow.d.ts

@@ -1,4 +0,4 @@
-import { Font } from "../types/Font";
+import { Font } from "../types/font";
 import { UseReactToPrintOptions } from "../types/UseReactToPrintOptions";
 import { HandlePrintWindowOnLoadData } from "./handlePrintWindowOnLoad";
 export declare function appendPrintWindow(printWindow: HTMLIFrameElement, markLoaded: (resource: Element | Font | FontFace, errorMessages?: unknown[]) => void, data: HandlePrintWindowOnLoadData, options: UseReactToPrintOptions): void;

lib/utils/handlePrintWindowOnLoad.d.ts

@@ -1,4 +0,5 @@
-import { Font } from "../types/Font";
+import { Font } from "../types/font";
 import type { UseReactToPrintOptions } from "../types/UseReactToPrintOptions";
 export type HandlePrintWindowOnLoadData = {
+    contentNode: Node;
     clonedContentNode: Node;
@@ -5,0 +6,0 @@ clonedImgNodes: never[] | NodeListOf<HTMLImageElement>;

package.json

 {
   "name": "react-to-print",
-  "version": "3.0.0-beta-2",
+  "version": "3.0.0-beta-3",
   "description": "Print React components in the browser",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -53,2 +53,3 @@ <p align="center">
 | **`suppressErrors?`** | `boolean` | When passed, prevents `console` logging of errors |
+| **`copyShadowRoots?`** | `boolean` | When passed, shadow root content will be copied to print window. WARNING: Use with care if you print large documents. TreeWalker's are used to traverse source and target documents. |
 
@@ -55,0 +56,0 @@ The hook returns a function that will initiate the print process when called. This function can also be optionally passed the `content` when called, allowing for its use in conditional rendering logic (where hooks are not allowed) and/or in non-React code such as a util function. See the repo examples for more.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

37931

increased by2.65%

Number of package files

19

increased by5.56%

Lines of code

75

increased by4.17%

Number of lines in readme file

429

increased by0.23%

No dependency changes