Playground preview

Author: pomber

packages/mdx/src/remark/transform.preview.ts

@@ -1,4 +1,3 @@
-import fetch from "node-fetch"
 import { visitAsync, toJSX } from "./unist-utils"
 import { JsxNode, SuperNode } from "./nodes"
 
@@ -14,6 +13,7 @@ export async function getPresetConfig(
   const prefix = "https://codesandbox.io/s/"
   const csbid = url.slice(prefix.length)
   const configUrl = `https://codesandbox.io/api/v1/sandboxes/${csbid}/sandpack`
+  const { default: fetch } = await import("node-fetch")
   const res = await fetch(configUrl)
   return await res.json()
 }

playground/package.json

@@ -9,15 +9,11 @@
   },
   "dependencies": {
     "@code-hike/mdx": "^0.5.1",
-    "@codemirror/basic-setup": "^0.20.0",
-    "@codemirror/commands": "^0.20.0",
-    "@codemirror/lang-markdown": "^0.20.1",
-    "@codemirror/state": "^0.20.0",
-    "@codemirror/view": "^0.20.5",
     "@mdx-js/mdx": "^2.1.1",
     "@monaco-editor/react": "^4.4.5",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-error-boundary": "^3.1.4"
   },
   "devDependencies": {
     "@types/react": "^17.0.2",

playground/src/app.jsx

@@ -1,33 +1,28 @@
-import { useRef, useEffect } from "react";
-import * as runtime from "react/jsx-runtime.js";
 import Editor from "@monaco-editor/react";
 import { useState } from "react";
-
-import { compile, run } from "@mdx-js/mdx";
+import { Preview } from "./preview";
 
 const defaultCode = `
 # Hello
 
 This is a markdown editor.
 
+<CH.Code style={{height: 200}}>
+
 ~~~py foo.py
 print "Hello, world!";
 ~~~
 
+</CH.Code>
+
 `;
 
 function App() {
   const [code, setCode] = useState(defaultCode);
-  const [Content, setContent] = useState(undefined);
   function handleEditorChange(value, event) {
     setCode(value);
   }
 
-  useEffect(() => {
-    compile(code, { outputFormat: "function-body" })
-      .then((c) => run(String(c), runtime))
-      .then((x) => setContent(x.default));
-  }, [code]);
   return (
     <div className="app">
       <header>
@@ -55,7 +50,7 @@ function App() {
             tabSize: 2,
           }}
         />
-        <div className="preview">{Content}</div>
+        <Preview code={code} />
       </main>
     </div>
   );

playground/src/index.css

@@ -48,3 +48,7 @@ main {
   border-left: 2px solid cadetblue;
   padding: 1em;
 }
+
+.preview-error {
+  border: 1px solid red;
+}

playground/src/preview.jsx

@@ -0,0 +1,54 @@
+import React, { useRef, useEffect, useState } from "react";
+import * as runtime from "react/jsx-runtime.js";
+import { compile, run } from "@mdx-js/mdx";
+import { remarkCodeHike } from "@code-hike/mdx";
+import { CH } from "@code-hike/mdx/components";
+import "@code-hike/mdx/styles.css";
+import { ErrorBoundary } from "react-error-boundary";
+
+export function Preview(props) {
+  return (
+    <div className="preview">
+      <ErrorBoundary resetKeys={[props.code]} FallbackComponent={ErrorFallback}>
+        <InnerPreview {...props} />
+      </ErrorBoundary>
+    </div>
+  );
+}
+function ErrorFallback({ error }) {
+  return (
+    <div className="preview-error">
+      <p>Something went wrong:</p>
+      <pre>{String(error)}</pre>
+    </div>
+  );
+}
+
+function InnerPreview({ code }) {
+  const [Content, setContent] = useState(undefined);
+  const [error, setError] = useState(undefined);
+  useEffect(() => {
+    compile(code, {
+      outputFormat: "function-body",
+      remarkPlugins: [[remarkCodeHike, { autoImport: false }]],
+    })
+      .then((c) => {
+        return run(String(c), runtime);
+      })
+      .then((x) => {
+        setContent(() => x.default);
+        setError(undefined);
+      })
+      .catch((e) => {
+        setError(e.message);
+        console.error({ e });
+      });
+  }, [code]);
+  // console.log(error);
+  return (
+    <>
+      {Content ? Content({ components: { CH } }) : null}
+      {error ? <div className="preview-error">{error}</div> : null}
+    </>
+  );
+}

playground/vite.config.js

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()]
-})
+  plugins: [react()],
+});