disable dev overlay, remove validation TODOs, add error boundary, ref…

…actor

demo/src/App.tsx

@@ -24,20 +24,8 @@ export default function App() {
     const [formData, setFormData] = useState("");
     const [jsonResult, setJsonResult] = useState([]);
 
-    //TODO: finish
-    function isMemoryModel(obj: any): obj is MemoryModel {
-        return (
-            (typeof obj.isClass === "boolean" &&
-                typeof obj.name === "string" &&
-                obj.isClass &&
-                obj.id === null) ||
-            (!obj.isClass &&
-                (typeof obj.id === "string" || typeof obj.id === "number"))
-        );
-    }
     const onSubmit = async (event) => {
         event.preventDefault();
-        //TODO: use isMemoryModel for input validation
         setJsonResult(JSON.parse(formData));
     };
 

demo/src/MemoryModels.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { Button, Card, CardContent, TextField, Grid } from "@mui/material";
 
-//TODO: might use for input validation, double check the type definitions
 interface MemoryModel {
     isClass: boolean;
     name: string;

demo/src/SvgDisplay.tsx

@@ -1,23 +1,23 @@
 import React, { useRef, useEffect } from "react";
 import mem from "../../src/index"; // TODO: replace with import of the package after it's been published
 
-const DEMO_OBJECTS = [
-    {
-        isClass: true,
-        name: "__main__",
-        id: null,
-        value: { lst1: 82, lst2: 84, p: 99, d: 10, t: 11 },
-        stack_frame: true,
-    },
-    {
-        isClass: false,
-        name: "str",
-        id: 19,
-        value: "David is cool!",
-        style: ["highlight"],
-    },
-    { isClass: false, name: "int", id: 13, value: 7 },
-];
+// const DEMO_OBJECTS = [
+//     {
+//         isClass: true,
+//         name: "__main__",
+//         id: null,
+//         value: { lst1: 82, lst2: 84, p: 99, d: 10, t: 11 },
+//         stack_frame: true,
+//     },
+//     {
+//         isClass: false,
+//         name: "str",
+//         id: 19,
+//         value: "David is cool!",
+//         style: ["highlight"],
+//     },
+//     { isClass: false, name: "int", id: 13, value: 7 },
+// ];
 
 export default function SvgDisplay(props) {
     const canvasRef = useRef(null);

demo/src/index.tsx

@@ -3,10 +3,14 @@ import { createRoot } from "react-dom/client";
 import App from "./App";
 import "@picocss/pico";
 import "./css/styles";
+("use client");
+import { ErrorBoundary } from "react-error-boundary";
 
 const root = createRoot(document.getElementById("app"));
 root.render(
     <StrictMode>
-        <App />
+        <ErrorBoundary fallback={<div>Something went wrong</div>}>
+            <App />
+        </ErrorBoundary>
     </StrictMode>
 );

demo/webpack.config.js

@@ -14,6 +14,9 @@ module.exports = [
             },
             compress: true,
             port: 9000,
+            client: {
+                overlay: false,
+            },
         },
         module: {
             rules: [

package.json

@@ -26,6 +26,7 @@
     "dependencies": {
         "@xmldom/xmldom": "^0.8.6",
         "deepmerge": "^4.3.1",
+        "react-error-boundary": "^4.0.12",
         "roughjs": "^4.5.0"
     },
     "devDependencies": {