@highlight-run/react - npm Package Compare versions

Comparing version 12.0.1 to 12.1.0

CHANGELOG.md

 # @highlight-run/react
 
+## 12.1.0
+
+### Minor Changes
+
+-   31dc610: ensure correct version of @types/react is installed
+
+### Patch Changes
+
+-   31dc610: ensure ErrorBoundary component is compatible with react 18 and react 19
+
 ## 12.0.1
@@ -4,0 +14,0 @@

dist/index.d.ts

 import React, { ErrorInfo } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -26,3 +27,3 @@ interface ReportDialogOptions {
 };
-declare function ReportDialog({ labelClose, labelComments, labelName, labelEmail, labelSubmit, subtitle2, subtitle, successMessage, successSubtitle, title, placeholderComments, user, onCloseHandler, onSubmitHandler, hideHighlightBranding, error, }: ReportDialogProps): React.JSX.Element;
+declare function ReportDialog({ labelClose, labelComments, labelName, labelEmail, labelSubmit, subtitle2, subtitle, successMessage, successSubtitle, title, placeholderComments, user, onCloseHandler, onSubmitHandler, hideHighlightBranding, error, }: ReportDialogProps): react_jsx_runtime.JSX.Element;
 
@@ -75,2 +76,5 @@ type FallbackRender = (errorData: {
 declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    refs: {
+        [key: string]: any;
+    };
     state: ErrorBoundaryState;
@@ -86,4 +90,4 @@ componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
 
-declare const SampleBuggyButton: ({ children, }: React.PropsWithChildren<{}>) => React.JSX.Element;
+declare const SampleBuggyButton: ({ children, }: React.PropsWithChildren<{}>) => react_jsx_runtime.JSX.Element;
 
-export { ErrorBoundary, type ErrorBoundaryProps, type FallbackRender, ReportDialog, type ReportDialogOptions, SampleBuggyButton };
+export { ErrorBoundary, type ErrorBoundaryProps, type ErrorBoundaryState, type FallbackRender, ReportDialog, type ReportDialogOptions, SampleBuggyButton };

dist/index.js

@@ -1,2 +0,2 @@
-"use strict";var K=Object.create;var m=Object.defineProperty,Q=Object.defineProperties,X=Object.getOwnPropertyDescriptor,oo=Object.getOwnPropertyDescriptors,eo=Object.getOwnPropertyNames,H=Object.getOwnPropertySymbols,to=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty,ro=Object.prototype.propertyIsEnumerable;var A=(t,e,o)=>e in t?m(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,g=(t,e)=>{for(var o in e||(e={}))z.call(e,o)&&A(t,o,e[o]);if(H)for(var o of H(e))ro.call(e,o)&&A(t,o,e[o]);return t},h=(t,e)=>Q(t,oo(e));var no=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),io=(t,e)=>{for(var o in e)m(t,o,{get:e[o],enumerable:!0})},O=(t,e,o,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of eo(e))!z.call(t,n)&&n!==o&&m(t,n,{get:()=>e[n],enumerable:!(i=X(e,n))||i.enumerable});return t};var v=(t,e,o)=>(o=t!=null?K(to(t)):{},O(e||!t||!t.__esModule?m(o,"default",{value:t,enumerable:!0}):o,t)),ao=t=>O(m({},"__esModule",{value:!0}),t);var R=no((mo,w)=>{"use strict";(function(){"use strict";var t={}.hasOwnProperty;function e(){for(var n="",a=0;a<arguments.length;a++){var s=arguments[a];s&&(n=i(n,o(s)))}return n}function o(n){if(typeof n=="string"||typeof n=="number")return n;if(typeof n!="object")return"";if(Array.isArray(n))return e.apply(null,n);if(n.toString!==Object.prototype.toString&&!n.toString.toString().includes("[native code]"))return n.toString();var a="";for(var s in n)t.call(n,s)&&n[s]&&(a=i(a,s));return a}function i(n,a){return a?n?n+" "+a:n+a:n}typeof w!="undefined"&&w.exports?(e.default=e,w.exports=e):typeof define=="function"&&typeof define.amd=="object"&&define.amd?define("classnames",[],function(){return e}):window.classNames=e})()});var uo={};io(uo,{ErrorBoundary:()=>E,ReportDialog:()=>S,SampleBuggyButton:()=>fo});module.exports=ao(uo);var u=v(require("react"));var r=v(require("react")),F=v(R());var M="1de786bb5151506838f6d20ce9ae3d134c2c6d2d2bce1c96c1816a29fb4c2126",lo=`._container_18f8u_1 {
+'use strict';var C=require('react'),jsxRuntime=require('react/jsx-runtime');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var C__default=/*#__PURE__*/_interopDefault(C);var W=Object.create;var S=Object.defineProperty;var Y=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,J=Object.prototype.hasOwnProperty;var G=(t,o)=>()=>(o||t((o={exports:{}}).exports,o),o.exports);var K=(t,o,r,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of $(o))!J.call(t,e)&&e!==r&&S(t,e,{get:()=>o[e],enumerable:!(n=Y(o,e))||n.enumerable});return t};var Q=(t,o,r)=>(r=t!=null?W(q(t)):{},K(!t||!t.__esModule?S(r,"default",{value:t,enumerable:true}):r,t));var k=G((uo,h)=>{(function(){var t={}.hasOwnProperty;function o(){for(var e="",i=0;i<arguments.length;i++){var s=arguments[i];s&&(e=n(e,r(s)));}return e}function r(e){if(typeof e=="string"||typeof e=="number")return e;if(typeof e!="object")return "";if(Array.isArray(e))return o.apply(null,e);if(e.toString!==Object.prototype.toString&&!e.toString.toString().includes("[native code]"))return e.toString();var i="";for(var s in e)t.call(e,s)&&e[s]&&(i=n(i,s));return i}function n(e,i){return i?e?e+" "+i:e+i:e}typeof h<"u"&&h.exports?(o.default=o,h.exports=o):typeof define=="function"&&typeof define.amd=="object"&&define.amd?define("classnames",[],function(){return o}):window.classNames=o;})();});var R=Q(k());var E="1de786bb5151506838f6d20ce9ae3d134c2c6d2d2bce1c96c1816a29fb4c2126",X=`._container_18f8u_1 {
 	--brand-color: #744ed4;
@@ -225,3 +225,3 @@ --brand-color-dark: #5629c6;
 }
-`;(function(){if(typeof document!="undefined"&&!document.getElementById(M)){var t=document.createElement("style");t.id=M,t.textContent=lo,document.head.appendChild(t)}})();var l={container:"_container_18f8u_1",card:"_card_18f8u_41",cardContents:"_cardContents_18f8u_47",form:"_form_18f8u_53",textareaLabel:"_textareaLabel_18f8u_57",ad:"_ad_18f8u_65",title:"_title_18f8u_78",subtitle:"_subtitle_18f8u_83",closeButton:"_closeButton_18f8u_154",confirmationButton:"_confirmationButton_18f8u_167",formFooter:"_formFooter_18f8u_172",formActionsContainer:"_formActionsContainer_18f8u_180",logoContainer:"_logoContainer_18f8u_190",logo:"_logo_18f8u_190",buggyButton:"_buggyButton_18f8u_206"};function S({labelClose:t="Cancel",labelComments:e="Message",labelName:o="Name",labelEmail:i="Email",labelSubmit:n="Submit",subtitle2:a="If you\u2019d like to help, tell us what happened below.",subtitle:s="Our team has been notified.",successMessage:f="Your feedback has been sent. Thank you!",successSubtitle:d="Thank you for sending us feedback. If you have any other concerns/questions, reach out to this application's support email.",title:_="It looks like we\u2019re having issues.",placeholderComments:T="I typed in a name then clicked the button",user:p,onCloseHandler:D,onSubmitHandler:B,hideHighlightBranding:U=!1,error:k}){let[b,L]=(0,r.useState)((p==null?void 0:p.name)||""),[y,P]=(0,r.useState)((p==null?void 0:p.email)||""),[x,V]=(0,r.useState)(""),[Z,N]=(0,r.useState)(!1),[W,Y]=(0,r.useState)(!1),$=(0,r.useRef)(new Date().toISOString()),q=(0,r.useMemo)(()=>{let c=!!y.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i);return!!b&&c&&!!x},[b,y,x]);r.default.useEffect(()=>{var c;(c=window==null?void 0:window.H)!=null&&c.consumeError&&k&&window.H.consumeError(k)},[k]);let J=c=>{var I;c.preventDefault(),N(!0),(I=window==null?void 0:window.H)!=null&&I.addSessionFeedback?window.H.addSessionFeedback({verbatim:x,userName:b,userEmail:y,timestampOverride:$.current}):console.warn("Highlight is not initialized. Make sure highlight.run is installed and running."),new Promise(G=>window.setTimeout(G,300)).then(()=>{N(!1),Y(!0),B&&B()})};return r.default.createElement(r.default.Fragment,null,r.default.createElement("style",{dangerouslySetInnerHTML:{__html:`
+`;(function(){if(!(typeof document>"u")&&!document.getElementById(E)){var t=document.createElement("style");t.id=E,t.textContent=X,document.head.appendChild(t);}})();var a={container:"_container_18f8u_1",card:"_card_18f8u_41",cardContents:"_cardContents_18f8u_47",form:"_form_18f8u_53",textareaLabel:"_textareaLabel_18f8u_57",ad:"_ad_18f8u_65",title:"_title_18f8u_78",subtitle:"_subtitle_18f8u_83",closeButton:"_closeButton_18f8u_154",confirmationButton:"_confirmationButton_18f8u_167",formFooter:"_formFooter_18f8u_172",formActionsContainer:"_formActionsContainer_18f8u_180",logoContainer:"_logoContainer_18f8u_190",logo:"_logo_18f8u_190"};function b({labelClose:t="Cancel",labelComments:o="Message",labelName:r="Name",labelEmail:n="Email",labelSubmit:e="Submit",subtitle2:i="If you\u2019d like to help, tell us what happened below.",subtitle:s="Our team has been notified.",successMessage:f="Your feedback has been sent. Thank you!",successSubtitle:I="Thank you for sending us feedback. If you have any other concerns/questions, reach out to this application's support email.",title:H="It looks like we\u2019re having issues.",placeholderComments:A="I typed in a name then clicked the button",user:y,onCloseHandler:x,onSubmitHandler:v,hideHighlightBranding:z=false,error:_}){let[p,O]=C.useState(y?.name||""),[m,M]=C.useState(y?.email||""),[g,F]=C.useState(""),[T,w]=C.useState(false),[U,j]=C.useState(false),L=C.useRef(new Date().toISOString()),P=C.useMemo(()=>{let d=!!m.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i);return !!p&&d&&!!g},[p,m,g]);C__default.default.useEffect(()=>{window?.H?.consumeError&&_&&window.H.consumeError(_);},[_]);let V=d=>{d.preventDefault(),w(true),window?.H?.addSessionFeedback?window.H.addSessionFeedback({verbatim:g,userName:p,userEmail:m,timestampOverride:L.current}):console.warn("Highlight is not initialized. Make sure highlight.run is installed and running."),new Promise(Z=>window.setTimeout(Z,300)).then(()=>{w(false),j(true),v&&v();});};return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("style",{dangerouslySetInnerHTML:{__html:`
 					@font-face {
@@ -249,5 +249,4 @@ font-display: swap;
 					}
-			`}}),r.default.createElement("main",{className:l.container},r.default.createElement("div",{className:l.card},W?r.default.createElement("div",{className:l.cardContents},r.default.createElement("h1",{className:l.title},f),r.default.createElement("h4",{className:l.subtitle},d),r.default.createElement("div",null,r.default.createElement("button",{className:(0,F.default)(l.button,l.confirmationButton),onClick:D},"Close"))):r.default.createElement("div",{className:l.cardContents},r.default.createElement("div",null,r.default.createElement("h1",{className:l.title},_),r.default.createElement("h2",{className:l.subtitle},s," ",a)),r.default.createElement("form",{className:l.form,onSubmit:J},r.default.createElement("label",null,o,r.default.createElement("input",{type:"text",value:b,name:"name",autoFocus:!0,onChange:c=>{L(c.target.value)},placeholder:"Tom Jerry"})),r.default.createElement("label",null,i,r.default.createElement("input",{type:"email",value:y,name:"email",onChange:c=>{P(c.target.value)},placeholder:"[e-mail]"})),r.default.createElement("label",{className:l.textareaLabel},e,r.default.createElement("textarea",{value:x,placeholder:T,name:"verbatim",rows:3,onChange:c=>{V(c.target.value)}})),r.default.createElement("div",{className:l.formFooter},r.default.createElement("div",{className:l.formActionsContainer},r.default.createElement("button",{type:"submit",disabled:!q||Z},n),r.default.createElement("button",{className:l.closeButton,onClick:D,type:"button"},t)),!U&&r.default.createElement("div",{className:l.ad},r.default.createElement("a",{href:"https://highlight.io",target:"_blank"},r.default.createElement("div",{className:l.logoContainer},r.default.createElement("img",{src:"https://www.highlight.io/images/logo-on-dark.png",alt:"Highlight",className:l.logo}),r.default.createElement("span",null,"Powered by highlight.io"))))))))))}var j={componentStack:null,error:null,showingDialog:!1},E=class extends u.default.Component{constructor(){super(...arguments);this.state=j;this.resetErrorBoundary=()=>{let{onReset:o}=this.props,{error:i,componentStack:n}=this.state;o&&o(i,n),this.setState(j)};this.hideDialog=()=>{this.setState(h(g({},this.state),{showingDialog:!1})),(this.props.onAfterReportDialogCancelHandler||(()=>{window.location.href=window.location.origin}))()};this.onReportDialogSubmitHandler=()=>{this.props.onAfterReportDialogSubmitHandler&&this.props.onAfterReportDialogSubmitHandler()}}componentDidCatch(o,i){var f,d,_;let{beforeCapture:n,onError:a,showDialog:s}=this.props;n&&n(o,(f=i.componentStack)!=null?f:null),so(o,i),a&&a(o,(d=i.componentStack)!=null?d:""),s!==!1&&this.setState(h(g({},this.state),{showingDialog:!0})),this.setState({error:o,componentStack:(_=i.componentStack)!=null?_:null})}componentDidMount(){let{onMount:o}=this.props;o&&o()}componentWillUnmount(){let{error:o,componentStack:i}=this.state,{onUnmount:n}=this.props;n&&n(o,i)}render(){let{fallback:o,children:i,customDialog:n}=this.props,{error:a,componentStack:s,showingDialog:f}=this.state;if(a){let d;return typeof o=="function"?d=o({error:a,componentStack:s,resetError:this.resetErrorBoundary}):d=o,u.default.isValidElement(d)?u.default.createElement(u.default.Fragment,null,f&&u.default.createElement(S,h(g({},this.props.dialogOptions),{onCloseHandler:this.hideDialog,onSubmitHandler:this.onReportDialogSubmitHandler})),d):(o&&console.warn("fallback did not produce a valid ReactElement"),f&&n?n:f&&u.default.createElement(S,h(g({},this.props.dialogOptions),{onCloseHandler:this.hideDialog,onSubmitHandler:this.onReportDialogSubmitHandler})))}return typeof i=="function"?i():i}};function so(t,e){var i;let o=co((i=e.componentStack)!=null?i:"");window.H?(console.error("Highlight ErrorBoundary caught an exception while rendering React component",{error:t}),window.H.consume(t,{payload:{component:o},source:o,type:"React.ErrorBoundary"})):console.warn("You need to install highlight.run.")}function co(t){let e=t.split(`
-`);if(e.length<1)return;let i=e[1].trim().split(" ");if(i.length===4)return`<${i[1]}>`}var C=v(require("react")),fo=({children:t})=>{let[e,o]=C.default.useState(!1);if(e)throw new Error("something bad happened - this is a sample test error");return C.default.createElement("button",{type:"button",className:"buggyButton",onClick:()=>o(!0)},t!=null?t:"Throw an Error")};0&&(module.exports={ErrorBoundary,ReportDialog,SampleBuggyButton});
-/*! Bundled license information:
+			`}}),jsxRuntime.jsx("main",{className:a.container,children:jsxRuntime.jsx("div",{className:a.card,children:U?jsxRuntime.jsxs("div",{className:a.cardContents,children:[jsxRuntime.jsx("h1",{className:a.title,children:f}),jsxRuntime.jsx("h4",{className:a.subtitle,children:I}),jsxRuntime.jsx("div",{children:jsxRuntime.jsx("button",{className:(0, R.default)(a.button,a.confirmationButton),onClick:x,children:"Close"})})]}):jsxRuntime.jsxs("div",{className:a.cardContents,children:[jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx("h1",{className:a.title,children:H}),jsxRuntime.jsxs("h2",{className:a.subtitle,children:[s," ",i]})]}),jsxRuntime.jsxs("form",{className:a.form,onSubmit:V,children:[jsxRuntime.jsxs("label",{children:[r,jsxRuntime.jsx("input",{type:"text",value:p,name:"name",autoFocus:true,onChange:d=>{O(d.target.value);},placeholder:"Tom Jerry"})]}),jsxRuntime.jsxs("label",{children:[n,jsxRuntime.jsx("input",{type:"email",value:m,name:"email",onChange:d=>{M(d.target.value);},placeholder:"[e-mail]"})]}),jsxRuntime.jsxs("label",{className:a.textareaLabel,children:[o,jsxRuntime.jsx("textarea",{value:g,placeholder:A,name:"verbatim",rows:3,onChange:d=>{F(d.target.value);}})]}),jsxRuntime.jsxs("div",{className:a.formFooter,children:[jsxRuntime.jsxs("div",{className:a.formActionsContainer,children:[jsxRuntime.jsx("button",{type:"submit",disabled:!P||T,children:e}),jsxRuntime.jsx("button",{className:a.closeButton,onClick:x,type:"button",children:t})]}),!z&&jsxRuntime.jsx("div",{className:a.ad,children:jsxRuntime.jsx("a",{href:"https://highlight.io",target:"_blank",children:jsxRuntime.jsxs("div",{className:a.logoContainer,children:[jsxRuntime.jsx("img",{src:"https://www.highlight.io/images/logo-on-dark.png",alt:"Highlight",className:a.logo}),jsxRuntime.jsx("span",{children:"Powered by highlight.io"})]})})})]})]})]})})})]})}var D={componentStack:null,error:null,showingDialog:false},B=class extends C__default.default.Component{refs={};state=D;componentDidCatch(o,r){let{beforeCapture:n,onError:e,showDialog:i}=this.props;n&&n(o,r.componentStack??null),no(o,r),e&&e(o,r.componentStack??""),i!==false&&this.setState({...this.state,showingDialog:true}),this.setState({error:o,componentStack:r.componentStack??null});}componentDidMount(){let{onMount:o}=this.props;o&&o();}componentWillUnmount(){let{error:o,componentStack:r}=this.state,{onUnmount:n}=this.props;n&&n(o,r);}resetErrorBoundary=()=>{let{onReset:o}=this.props,{error:r,componentStack:n}=this.state;o&&o(r,n),this.setState(D);};hideDialog=()=>{this.setState({...this.state,showingDialog:false}),(this.props.onAfterReportDialogCancelHandler||(()=>{window.location.href=window.location.origin;}))();};onReportDialogSubmitHandler=()=>{this.props.onAfterReportDialogSubmitHandler&&this.props.onAfterReportDialogSubmitHandler();};render(){let{fallback:o,children:r,customDialog:n}=this.props,{error:e,componentStack:i,showingDialog:s}=this.state;if(e){let f;return typeof o=="function"?f=o({error:e,componentStack:i,resetError:this.resetErrorBoundary}):f=o,C__default.default.isValidElement(f)?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[s&&jsxRuntime.jsx(b,{...this.props.dialogOptions,onCloseHandler:this.hideDialog,onSubmitHandler:this.onReportDialogSubmitHandler}),f]}):(o&&console.warn("fallback did not produce a valid ReactElement"),s&&n?n:s&&jsxRuntime.jsx(b,{...this.props.dialogOptions,onCloseHandler:this.hideDialog,onSubmitHandler:this.onReportDialogSubmitHandler}))}return typeof r=="function"?r():r}};function no(t,o){let r=ao(o.componentStack??"");window.H?(console.error("Highlight ErrorBoundary caught an exception while rendering React component",{error:t}),window.H.consume(t,{payload:{component:r},source:r,type:"React.ErrorBoundary"})):console.warn("You need to install highlight.run.");}function ao(t){let o=t.split(`
+`);if(o.length<1)return;let n=o[1].trim().split(" ");if(n.length===4)return `<${n[1]}>`}var Eo=({children:t})=>{let[o,r]=C__default.default.useState(false);if(o)throw new Error("something bad happened - this is a sample test error");return jsxRuntime.jsx("button",{type:"button",className:"buggyButton",onClick:()=>r(true),children:t??"Throw an Error"})};/*! Bundled license information:
 
@@ -260,2 +259,3 @@ classnames/index.js:
   *)
-*/
+*/exports.ErrorBoundary=B;exports.ReportDialog=b;exports.SampleBuggyButton=Eo;//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package.json

 {
   "name": "@highlight-run/react",
-  "version": "12.0.1",
+  "version": "12.1.0",
   "description": "The official Highlight SDK for React",
@@ -24,4 +24,4 @@ "license": "Apache-2.0",
     "@types/node": "^20.14.7",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
     "classnames": "^2.5.1",
@@ -31,3 +31,4 @@ "css-tree": "^2.3.1",
     "react": "^19.0.0",
-    "tsup": "^8.3.5",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.3.6",
     "typescript": "^5.7.3"
@@ -34,0 +35,0 @@ },

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

111233

increased by183.55%

Number of package files

9

increased by28.57%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Dev dependency count

10

increased by11.11%

Lines of code

588

decreased by-0.84%

No dependency changes