fix: wrap preview in boundary (#392)

Co-authored-by: Charles Brown <carbonrobot@gmail.com>

Author: r281GQ

.changeset/silent-ads-sell.md

@@ -0,0 +1,5 @@
+---
+"react-live": patch
+---
+
+Wrap preview in error boundary

.github/workflows/code-check.yml

@@ -1,9 +1,6 @@
 name: Code Check
 
 on:
- push:
- branches:
- - master
  pull_request:
  branches:
  - master
@@ -16,8 +13,11 @@ jobs:
  - uses: actions/checkout@v4
  - uses: ./.github/actions/setup
 
- - name: Check Code ${{ matrix.node-version }}
+ - name: Check Code
  run: pnpm lint
 
- - name: Build ${{ matrix.node-version }}
+ - name: Test
+ run: pnpm test
+
+ - name: Build
  run: pnpm build

.github/workflows/release.yml

@@ -1,4 +1,4 @@
-name: react-live Release Workflow
+name: Release Workflow
 
 on:
  push:
@@ -21,6 +21,12 @@ jobs:
  - uses: actions/checkout@v4
  - uses: ./.github/actions/setup
 
+ - name: Check Code
+ run: pnpm lint
+
+ - name: Test
+ run: pnpm test
+
  - name: Build packages
  run: pnpm run build
 

package.json

@@ -13,6 +13,7 @@
  "build:lib": "pnpm run --filter react-live build",
  "lint": "pnpm run --parallel lint",
  "lint:fix": "pnpm run --parallel lint --fix",
+ "test": "pnpm run --filter react-live test",
  "changeset": "changeset",
  "version": "pnpm changeset version && pnpm install --no-frozen-lockfile"
  },

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

@@ -0,0 +1,33 @@
+import { Component, ReactNode } from "react";
+
+type Props = {
+ children: ReactNode;
+ onError?: (error: Error) => void;
+};
+
+type State = {
+ hasError: boolean;
+};
+
+export class ErrorBoundary extends Component<Props, State> {
+ static getDerivedStateFromError() {
+ return { hasError: true };
+ }
+
+ constructor(props: Props) {
+ 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;
+ }
+}

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,4 +1,6 @@
 import React, { useContext } from "react";
+
+import { ErrorBoundary } from "./ErrorBoundary";
 import LiveContext from "./LiveContext";
 
 type Props<T extends React.ElementType = React.ElementType> = {
@@ -11,7 +13,12 @@ function LivePreview<T extends keyof JSX.IntrinsicElements>(
 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={onError}>
+ <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));

website/package.json

@@ -11,7 +11,7 @@
  "lint": "eslint --ext .js,.ts,.tsx src",
  "deploy": "docusaurus deploy",
  "clear": "docusaurus clear",
- "serve": "docusaurus serve",
+ "serve": "docusaurus serve --config ./docusaurus.config.js --dir ./build/open-source/react-live --port 3565 --no-open",
  "write-translations": "docusaurus write-translations",
  "write-heading-ids": "docusaurus write-heading-ids",
  "typecheck": "tsc"