Fix repl can be called as a side effect causing infinite recursion

Author: al3xnag

packages/jsrepl/tests/playwright/repl-eval.test.ts

@@ -336,3 +336,62 @@ test('multiline decor', async ({ page }) => {
     `
   )
 })
+
+test(
+  'repl is not called as a side effect of transformPayloadResult',
+  {
+    annotation: {
+      type: 'issue',
+      description: 'https://github.com/jsrepl/jsrepl.io/issues/3',
+    },
+  },
+  async ({ page }) => {
+    await visitPlayground(page, {
+      openedModels: ['/test.ts'],
+      activeModel: '/test.ts',
+      showPreview: false,
+      fs: new ReplFS.FS({
+        kind: ReplFS.Kind.Directory,
+        children: {
+          'test.ts': {
+            kind: ReplFS.Kind.File,
+            content: dedent`
+              const obj2 = {
+                get foo() {
+                  return obj2;
+                },
+              };
+
+              const obj = { a: 20 };
+
+              const proxy = new Proxy(obj, {
+                get(target, p) {
+
+                } 
+              })
+            `,
+          },
+        },
+      }),
+    })
+
+    await assertMonacoContentsWithDecors(
+      page,
+      dedent`
+        const obj2 = { // → obj2 = [ref *1] {foo: [Circular *1]}
+          get foo() {
+            return obj2;
+          },
+        };
+
+        const obj = { a: 20 }; // → obj = {a: 20}
+
+        const proxy = new Proxy(obj, { // → proxy = {a: undefined}
+          get(target, p) {
+
+          } 
+        })
+      `
+    )
+  }
+)

packages/preview-entry/src/repl.ts

@@ -10,6 +10,15 @@ import { transformPayloadResult } from './payload'
 import { postMessage } from './post-message'
 import type { PreviewWindow } from './types'
 
+// Traversing the object props in `transformPayloadResult` can cause calling `repl`
+// again in some cases, which is not desired and may cause infinite recursion which
+// is not handled by circular reference prevention mechanism in `transformPayloadResult`.
+// Although that mechanism can be extended to the entire event loop stack, these
+// side-effects are not the intended behavior anyway: `repl` is intended to be
+// called by user-code only, and not during traversing the object props within `transformPayloadResult`.
+// See https://github.com/jsrepl/jsrepl.io/issues/3 for the reference.
+let skipReplAsSideEffect = false
+
 export function setupRepl(win: PreviewWindow, token: number) {
   win[identifierNameRepl] = repl.bind({ token, win })
   win[identifierNameFunctionMeta] = () => {}
@@ -20,8 +29,18 @@ export function setupRepl(win: PreviewWindow, token: number) {
 }
 
 function repl(this: { token: number; win: PreviewWindow }, ctxId: string | number, value: unknown) {
-  const { token, win } = this
-  postMessageRepl(token, win, value, false, ctxId)
+  if (!skipReplAsSideEffect) {
+    skipReplAsSideEffect = true
+    try {
+      const { token, win } = this
+      postMessageRepl(token, win, value, false, ctxId)
+    } catch (err) {
+      console.error('JSRepl Error: repl failed', err)
+    } finally {
+      skipReplAsSideEffect = false
+    }
+  }
+
   return value
 }