@livepreso/content-react 0.3.9 → 0.4.0

package/CHANGELOG.json

@@ -1,6 +1,18 @@
 {
   "name": "@livepreso/content-react",
   "entries": [
+    {
+      "version": "0.4.0",
+      "tag": "@livepreso/content-react_v0.4.0",
+      "date": "Tue, 24 Sep 2024 03:37:23 GMT",
+      "comments": {
+        "minor": [
+          {
+            "comment": "Allow overriding react errors"
+          }
+        ]
+      }
+    },
     {
       "version": "0.3.9",
       "tag": "@livepreso/content-react_v0.3.9",

package/CHANGELOG.md

@@ -1,6 +1,13 @@
 # Change Log - @livepreso/content-react
 
-This log was last generated on Fri, 23 Aug 2024 05:02:46 GMT and should not be manually modified.
+This log was last generated on Tue, 24 Sep 2024 03:37:23 GMT and should not be manually modified.
+
+## 0.4.0
+Tue, 24 Sep 2024 03:37:23 GMT
+
+### Minor changes
+
+- Allow overriding react errors
 
 ## 0.3.9
 Fri, 23 Aug 2024 05:02:46 GMT

package/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useContext, useEffect, useRef } from "react";
 
 import { AppBase } from "@livepreso/content-base";
 import { CompanywideJSON } from "./lib/components/CompanywideJSON.js";
@@ -7,6 +7,18 @@ import { createRoot } from "react-dom/client";
 import errorFn from "@livepreso/content-base/error.js";
 import { useRootSlide } from "./lib/hooks/use-root-slide.js";
 
+function DefaultErrorComponent({ error }) {
+	const slideContext = useContext(SlideContext);
+	const ref = useRef();
+
+	useEffect(() => {
+		const errorRenderer = errorFn(error);
+		errorRenderer(ref.current, slideContext.slideKey);
+	}, []);
+
+	return <div ref={ref} />;
+}
+
 class ErrorBoundary extends React.Component {
 	static getDerivedStateFromError(error) {
 		return { error, hasError: true };
@@ -19,8 +31,8 @@ class ErrorBoundary extends React.Component {
 
 	render() {
 		if (this.state.hasError) {
-			errorFn(this.state.error)(this.props.el);
-			return null;
+			const ErrorComponent = this.props.errorComponent;
+			return <ErrorComponent error={this.state.error} />;
 		}
 		return this.props.children;
 	}
@@ -31,6 +43,8 @@ if (module.hot && typeof window.__deck_roots__ === "undefined") {
 }
 
 export class App extends AppBase {
+	// can be overridden in subclass
+	errorComponent = DefaultErrorComponent;
 	static run(rootApp = null) {
 		const base = new App();
 		if (rootApp) {
@@ -57,8 +71,7 @@ export class App extends AppBase {
 		}
 
 		const RootApp = this.rootApp(Slide);
-
-		function App() {
+		const AppComponent = () => {
 			// TODO: Refactor this to be a prop
 			const slideState = useRootSlide(article);
 
@@ -80,15 +93,16 @@ export class App extends AppBase {
 			return (
 				<SlideContext.Provider value={slideState}>
 					{!slideState.transitions.exited && (
-						<ErrorBoundary el={el}>
+						// eslint-disable-next-line react/no-this-in-sfc
+						<ErrorBoundary errorComponent={this.errorComponent}>
 							<CompanywideJSON>{RootApp}</CompanywideJSON>
 						</ErrorBoundary>
 					)}
 				</SlideContext.Provider>
 			);
-		}
+		};
 
-		root.render(<App />);
+		root.render(<AppComponent />);
 	}
 
 	unmountRoot(key) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livepreso/content-react",
-  "version": "0.3.9",
+  "version": "0.4.0",
   "description": "",
   "main": "index.js",
   "publishConfig": {