fix: wrap preview in boundary

packages/react-live/src/components/Live/LiveContext.ts

@@ -5,6 +5,7 @@ type ContextValue = {
   error?: string;
   element?: ComponentType | null;
   code: string;
+  newCode?: string;
   disabled: boolean;
   language: string;
   theme?: typeof themes.nightOwl;

packages/react-live/src/components/Live/LivePreview.tsx

@@ -1,17 +1,59 @@
-import React, { useContext } from "react";
+import React, { useContext, Component } from "react";
 import LiveContext from "./LiveContext";
 
 type Props<T extends React.ElementType = React.ElementType> = {
   Component?: T;
 } & React.ComponentPropsWithoutRef<T>;
 
+class ErrorBoundary extends Component<
+  {
+    children: React.ReactNode;
+    onError?: (error: Error) => void;
+  },
+  { hasError: boolean }
+> {
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  constructor(props: {
+    children: React.ReactNode;
+    onError: (error: Error) => void;
+  }) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  componentDidCatch(err: Error): void {
+    this.props.onError?.(err);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return null;
+    }
+
+    return this.props.children;
+  }
+}
+
 function LivePreview<T extends keyof JSX.IntrinsicElements>(
   props: Props<T>
 ): JSX.Element;
 function LivePreview<T extends React.ElementType>(props: Props<T>): JSX.Element;
 
 function LivePreview({ Component = "div", ...rest }: Props): JSX.Element {
-  const { element: Element } = useContext(LiveContext);
-  return <Component {...rest}>{Element ? <Element /> : null}</Component>;
+  const { element: Element, onError, newCode } = useContext(LiveContext);
+
+  return (
+    <ErrorBoundary
+      key={newCode}
+      onError={(err) => {
+        onError(err);
+      }}
+    >
+      <Component {...rest}>{Element ? <Element /> : null}</Component>
+    </ErrorBoundary>
+  );
 }
 export default LivePreview;

packages/react-live/src/components/Live/LiveProvider.tsx

@@ -6,6 +6,7 @@ import { themes } from "prism-react-renderer";
 type ProviderState = {
   element?: ComponentType | null;
   error?: string;
+  newCode?: string;
 };
 
 type Props = {
@@ -37,7 +38,11 @@ function LiveProvider({
 
   async function transpileAsync(newCode: string) {
     const errorCallback = (error: Error) => {
-      setState({ error: error.toString(), element: undefined });
+      setState((previousState) => ({
+        ...previousState,
+        error: error.toString(),
+        element: undefined,
+      }));
     };
 
     // - transformCode may be synchronous or asynchronous.
@@ -51,7 +56,7 @@ function LiveProvider({
       try {
         const transformedCode = await Promise.resolve(transformResult);
         const renderElement = (element: ComponentType) =>
-          setState({ error: undefined, element });
+          setState({ error: undefined, element, newCode });
 
         if (typeof transformedCode !== "string") {
           throw new Error("Code failed to transform");
@@ -65,7 +70,11 @@ function LiveProvider({
         };
 
         if (noInline) {
-          setState({ error: undefined, element: null }); // Reset output for async (no inline) evaluation
+          setState((previousState) => ({
+            ...previousState,
+            error: undefined,
+            element: null,
+          })); // Reset output for async (no inline) evaluation
           renderElementAsync(input, renderElement, errorCallback);
         } else {
           renderElement(generateElement(input, errorCallback));