Fix crash caused by editor (#173)

* Handle for and if statement correctly

* Fix test

* Handle unexpected error more fridendly

* Update app/Nav.jsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: pearmini

app/Editor.jsx

@@ -9,6 +9,20 @@ const styles = {
   iconButton: "w-4 h-4 hover:scale-110 transition-transform duration-100",
 };
 
+function debounce(fn, delay = 0) {
+  let timeout;
+  return (...args) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => fn(...args), delay);
+  };
+}
+
+const onDefaultError = debounce(() => {
+  setTimeout(() => {
+    alert("Something unexpected happened. Please check the console for details.");
+  }, 100);
+}, 0);
+
 export function Editor({
   initialCode,
   onUserInput = () => {},
@@ -17,6 +31,7 @@ export function Editor({
   toolBarStart = null,
   pinToolbar = true,
   onDuplicate = null,
+  onError = onDefaultError,
 }) {
   const containerRef = useRef(null);
   const editorRef = useRef(null);
@@ -25,7 +40,7 @@ export function Editor({
   useEffect(() => {
     if (containerRef.current) {
       containerRef.current.innerHTML = "";
-      editorRef.current = createEditor(containerRef.current, {code: initialCode});
+      editorRef.current = createEditor(containerRef.current, {code: initialCode, onError});
       if (autoRun) onRun();
     }
     return () => {

app/Nav.jsx

@@ -57,9 +57,9 @@ export function Nav() {
   return (
     <header className={cn("flex justify-between items-center p-4 border-b border-gray-200")}>
       <div className={cn("flex md:gap-2 items-center ")}>
-        <SafeLink href="https://recho.dev">
+        <a href="https://recho.dev" target="_blank" rel="noopener noreferrer">
           <h1 className={cn("text-xl font-extrabold")}>Recho</h1>
-        </SafeLink>
+        </a>
         <SafeLink href="/">
           <h1 className={cn("text-xl hidden md:inline font-medium")}>Notebook</h1>
         </SafeLink>

app/SafeLink.jsx

@@ -14,7 +14,6 @@ export function SafeLink({href, children, className, onClick, ...props}) {
   const handleClick = (e) => {
     e.preventDefault();
     if (isDirty) {
-      e.preventDefault();
       const confirmLeave = window.confirm("Your changes will be lost.");
       if (!confirmLeave) return;
     }

editor/index.js

@@ -33,7 +33,7 @@ const eslintConfig = {
 };
 
 export function createEditor(container, options) {
-  const {code} = options;
+  const {code, onError} = options;
   const dispatcher = d3Dispatch("userInput");
   const runtimeRef = {current: null};
 
@@ -132,8 +132,13 @@ export function createEditor(container, options) {
 
   return {
     run: () => {
-      if (!runtimeRef.current) initRuntime();
-      runtimeRef.current.run();
+      try {
+        if (!runtimeRef.current) initRuntime();
+        runtimeRef.current.run();
+      } catch (error) {
+        console.error(error);
+        onError?.(error);
+      }
     },
     stop: () => {
       runtimeRef.current?.destroy();

runtime/index.js

@@ -24,9 +24,20 @@ function isError(value) {
 }
 
 function safeEval(code, inputs) {
-  const body = `const foo = ${code}; return foo(${inputs.join(",")})`;
-  const fn = new Function(...inputs, body);
-  return fn;
+  const create = (code) => {
+    const body = `const foo = ${code}; return foo(${inputs.join(",")})`;
+    const fn = new Function(...inputs, body);
+    return fn;
+  };
+  try {
+    return create(code);
+  } catch (error) {
+    // For non-function statements, such as for statement, we need to wrap the code in a function.
+    // For example, `for (let i = 0; i < 10; i++) { echo(i); }` will be wrapped in
+    // `() => { for (let i = 0; i < 10; i++) { echo(i); } }` then return the function.
+    const wrapped = `() => {${code}}`;
+    return create(wrapped);
+  }
 }
 
 function debounce(fn, delay = 0) {

test/js/index-tests.js

@@ -9,3 +9,4 @@ export {syntaxError3} from "./syntax-error3.js";
 export {syntaxError4} from "./syntax-error4.js";
 export {nonCallEcho} from "./non-call-echo.js";
 export {echoMultipleValues} from "./echo-multiple-values.js";
+export {specialStatement} from "./special-statement.js";

test/js/index.js

@@ -18,3 +18,4 @@ export {syntaxError3} from "./syntax-error3.js";
 export {syntaxError4} from "./syntax-error4.js";
 export {nonCallEcho} from "./non-call-echo.js";
 export {echoMultipleValues} from "./echo-multiple-values.js";
+export {specialStatement} from "./special-statement.js";

test/js/special-statement.js

@@ -0,0 +1,18 @@
+export const specialStatement = `let height = 5;
+let triangle = '';
+
+for (let i = 1; i <= height; i++) {
+  triangle += ' '.repeat(height - i); 
+  triangle += '*'.repeat(i * 2 - 1); 
+  triangle += '\\n';
+}
+
+echo(triangle);
+
+
+if (true) {
+  echo("true");
+} else {
+  echo("false");
+}
+`;

test/output/specialStatement.js

@@ -0,0 +1,20 @@
+let height = 5;
+let triangle = '';
+
+//✗ [SyntaxError: Assignment to external variable 'triangle' (2:2)]
+for (let i = 1; i <= height; i++) {
+  triangle += ' '.repeat(height - i); 
+  triangle += '*'.repeat(i * 2 - 1); 
+  triangle += '\n';
+}
+
+//➜ ""
+echo(triangle);
+
+
+//➜ "true"
+if (true) {
+  echo("true");
+} else {
+  echo("false");
+}