Refresh Iframe context on runCode (exercism#7883)

* Use srcdoc for iframe updating

* Add code-run version number

* Clear deps array

* Tweak error location

* Update error location, fix error widget

Author: dem4ron

app/javascript/components/bootcamp/FrontendExercisePage/FrontendExercisePage.tsx

@@ -28,6 +28,8 @@ export default function FrontendExercisePage(data: FrontendExercisePageProps) {
     defaultCode,
   } = useSetupEditors(data.exercise.slug, data.code, actualIFrameRef)
 
+  const jsCodeRunId = React.useRef(0)
+
   useRestoreIframeScrollAfterResize()
 
   return (
@@ -39,6 +41,7 @@ export default function FrontendExercisePage(data: FrontendExercisePageProps) {
         htmlEditorRef: htmlEditorViewRef,
         cssEditorRef: cssEditorViewRef,
         jsEditorRef: jsEditorViewRef,
+        jsCodeRunId,
         handleCssEditorDidMount,
         handleHtmlEditorDidMount,
         handleJsEditorDidMount,

app/javascript/components/bootcamp/FrontendExercisePage/FrontendExercisePageContext.ts

@@ -15,6 +15,7 @@ type FrontendExercisePageContextType = {
   htmlEditorRef: React.RefObject<EditorView>
   cssEditorRef: React.RefObject<EditorView>
   jsEditorRef: React.RefObject<EditorView>
+  jsCodeRunId: React.MutableRefObject<number>
   handleHtmlEditorDidMount: (handler: Handler) => void
   handleCssEditorDidMount: (handler: Handler) => void
   handleJsEditorDidMount: (handler: Handler) => void

app/javascript/components/bootcamp/FrontendExercisePage/LHS/LHS.tsx

@@ -36,6 +36,7 @@ export function LHS() {
     exercise,
     code,
     links,
+    jsCodeRunId,
   } = useContext(FrontendExercisePageContext)
 
   const {
@@ -108,7 +109,7 @@ export function LHS() {
       },
       customFunctions: [],
       readonlyRanges: {
-        html: cssReadonlyRanges,
+        html: htmlReadonlyRanges,
         css: cssReadonlyRanges,
         js: jsReadonlyRanges,
       },
@@ -117,12 +118,18 @@ export function LHS() {
     const result = parseJS(jsView.state.doc.toString())
     switch (result.status) {
       case 'success':
-        const fullScript = wrapJSCode(jsCode)
-        const expectedScript = wrapJSCode(exercise.config.expected.js)
+        setLogs([])
+
+        jsCodeRunId.current = (jsCodeRunId.current || 0) + 1
+        const fullScript = wrapJSCode(jsCode, jsCodeRunId.current || 0)
+        const expectedScript = wrapJSCode(
+          exercise.config.expected.js,
+          jsCodeRunId.current || 0
+        )
         // we'll only run the JS code if:
         // 1. someone clicks the `Run Code` button and
         // 2. there are no parsing errors
-        const runCode = updateIFrame(
+        updateIFrame(
           actualIFrameRef,
           {
             script: fullScript,
@@ -132,15 +139,15 @@ export function LHS() {
           code
         )
 
-        const runRefCode = updateIFrame(
+        updateIFrame(
           expectedIFrameRef,
           {
             ...exercise.config.expected,
             script: expectedScript,
           },
           code
         )
-        const runExpectedCode = updateIFrame(
+        updateIFrame(
           expectedReferenceIFrameRef,
           {
             ...exercise.config.expected,
@@ -152,10 +159,6 @@ export function LHS() {
         if (RHSActiveTab === 'instructions') {
           setRHSActiveTab('output')
         }
-        setLogs([])
-        runCode?.()
-        runRefCode?.()
-        runExpectedCode?.()
         break
       case 'error':
         setTab('javascript')

app/javascript/components/bootcamp/FrontendExercisePage/LHS/showJsError.ts

@@ -1,5 +1,4 @@
 import { EditorView } from 'codemirror'
-import { result } from 'lodash'
 import {
   showInfoWidgetEffect,
   informationWidgetDataEffect,
@@ -18,7 +17,7 @@ export function showJsError(
 ) {
   if (!view) return
 
-  scrollToLine(view, error.lineNumber)
+  setTimeout(() => scrollToLine(view, error.lineNumber), 50)
 
   const editorLength = view.state.doc.length
   const errorLine = view.state.doc.line(error.lineNumber)

app/javascript/components/bootcamp/FrontendExercisePage/LHS/wrapJSCode.tsx

@@ -1,7 +1,9 @@
 import { scriptPrelude, scriptPostlude } from '../utils/updateIFrame'
 
-export function wrapJSCode(jsCode: string) {
+export function wrapJSCode(jsCode: string, jsCodeRunId: number) {
   return `<script>
-${scriptPrelude}${jsCode || ''}${scriptPostlude}
+window.__runId__ = ${jsCodeRunId};
+${scriptPrelude} ${jsCode || ''} ${scriptPostlude}
+//# sourceURL=exercise.js
 </script>`
 }

app/javascript/components/bootcamp/FrontendExercisePage/RHS/Panels/ConsolePanel/Logger.tsx

@@ -1,20 +1,29 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useContext, useEffect, useRef } from 'react'
 import { renderLog } from '@/components/bootcamp/JikiscriptExercisePage/RHS/Logger/renderLog'
 import { useHighlighting } from '@/utils/highlight'
 import { useFrontendExercisePageStore } from '../../../store/frontendExercisePageStore'
+import { FrontendExercisePageContext } from '../../../FrontendExercisePageContext'
 
 export function Logger() {
   const containerRef = useRef<HTMLDivElement>(null)
 
   const { logs, setLogs } = useFrontendExercisePageStore()
 
+  const { jsCodeRunId } = useContext(FrontendExercisePageContext)
+
   const ref = useHighlighting<HTMLDivElement>()
 
   useEffect(() => {
     const handleMessage = (event: MessageEvent) => {
       if (event.data?.type === 'iframe-log') {
         const newLogs = event.data.logs as unknown[][]
-        setLogs((prev) => [...prev, ...newLogs])
+        const logRunId = event.data.runId
+
+        if (logRunId === jsCodeRunId.current) {
+          setLogs((prev) => [...prev, ...newLogs])
+        } else {
+          console.debug('Ignoring stale logs: ', newLogs)
+        }
       }
     }
 

app/javascript/components/bootcamp/FrontendExercisePage/utils/extractLineColFromStackMessage.ts

@@ -6,7 +6,8 @@ export function extractLineAndColumnFromStack(stack?: string): {
     return { line: 1, column: 1 }
   }
 
-  const match = stack.match(/<anonymous>:(\d+):(\d+)/)
+  const match = stack.match(/(?:\()?(?:\w+\.js|<anonymous>):(\d+):(\d+)\)?/)
+
   if (match) {
     return {
       line: parseInt(match[1], 10),

app/javascript/components/bootcamp/FrontendExercisePage/utils/updateIFrame.ts

@@ -34,6 +34,7 @@ window.log = function (...args) {
 
   window.parent.postMessage({
     type: 'iframe-log',
+    runId: window.__runId__,
     logs: [safeArgs],
   }, '*');
 };
@@ -54,15 +55,17 @@ export const scriptPostlude = `
 `
 
 const jsPreludeLines = scriptPrelude.split('\n')
-export const jsLineOffset = jsPreludeLines.length
+// +1 offset because this line got added to the prelude:
+// window.__runId__ = ${jsCodeRunId};
+export const jsLineOffset = jsPreludeLines.length + 1
 
 export function updateIFrame(
   iframeRef:
     | React.RefObject<HTMLIFrameElement>
     | React.ForwardedRef<HTMLIFrameElement>,
   { html, css, script }: { html?: string; css?: string; script?: string },
   code: FrontendExercisePageCode
-): (() => void) | undefined {
+): void {
   let iframeElement: HTMLIFrameElement | null = null
 
   if (iframeRef) {
@@ -76,30 +79,38 @@ export function updateIFrame(
 
   if (!iframeElement) return
 
-  const iframeDoc =
-    iframeElement.contentDocument || iframeElement.contentWindow?.document
-  if (!iframeDoc) return
-
   const iframeHtml = `
     <!DOCTYPE html>
     <html>
       <head>
         <style>
         ${code.normalizeCss}
-        ${code.default.css} 
+        ${code.default.css}
         ${css || ''}
         </style>
-        </head>
-        <body>
+      </head>
+      <body>
         ${html || ''}
         ${script || ''}
       </body>
     </html>`
 
   try {
-    iframeDoc.open()
-    iframeDoc.write(iframeHtml)
-    iframeDoc.close()
+    iframeElement.onload = () => {
+      try {
+        const runCode = (
+          iframeElement.contentWindow as Window & { runCode?: () => void }
+        )?.runCode
+        if (typeof runCode === 'function') {
+          runCode()
+        } else {
+          console.warn('runCode is not defined on iframe')
+        }
+      } catch (err) {
+        console.error('Failed to execute runCode:', err)
+      }
+    }
+    iframeElement.srcdoc = iframeHtml
   } catch (err) {
     window.postMessage(
       {
@@ -109,20 +120,5 @@ export function updateIFrame(
       },
       '*'
     )
-    return
-  }
-
-  return () => {
-    try {
-      // @ts-ignore
-      const runCode = iframeElement?.contentWindow?.runCode
-      if (typeof runCode === 'function') {
-        runCode()
-      } else {
-        console.warn('runCode is not defined on iframe')
-      }
-    } catch (err) {
-      console.error('Failed to execute runCode:', err)
-    }
   }
 }

app/javascript/components/bootcamp/JikiscriptExercisePage/CodeMirror/extensions/end-line-information/information-widget.ts

@@ -21,7 +21,6 @@ export class InformationWidget extends WidgetType {
   private arrowElement: HTMLElement | null = null
   private observer: MutationObserver | null = null
   private autoUpdateCleanup: (() => void) | null = null
-  private scrollContainer: HTMLElement | null = null
 
   constructor(
     private readonly tooltipHtml: string,
@@ -213,29 +212,39 @@ export class InformationWidget extends WidgetType {
 
   private handleScroll?: EventListener
   private handleStorage?: (e: StorageEvent) => void
+  private scrollContainers: HTMLElement[] = []
 
   private setupScrollListener() {
-    const scrollContainer = document.querySelector('.cm-scroller')
-    if (!scrollContainer) {
-      return
-    }
+    const scrollContainers = document.querySelectorAll('.cm-scroller')
+    if (!scrollContainers) return
 
     this.handleScroll = this.positionTooltip.bind(this)
     this.handleStorage = (e: StorageEvent) => {
-      if (e.key === 'solve-exercise-page-lhs') {
+      if (
+        e.key === 'solve-exercise-page-lhs' ||
+        e.key === 'frontend-training-page-size'
+      ) {
         this.positionTooltip()
       }
     }
 
-    scrollContainer.addEventListener('scroll', this.handleScroll)
-    window.addEventListener('storage', this.handleStorage)
+    this.scrollContainers = []
+
+    for (const scrollContainer of scrollContainers) {
+      if (scrollContainer instanceof HTMLElement) {
+        scrollContainer.addEventListener('scroll', this.handleScroll)
+        this.scrollContainers.push(scrollContainer)
+      }
+    }
 
-    this.scrollContainer = scrollContainer as HTMLElement
+    window.addEventListener('storage', this.handleStorage)
   }
 
   private cleanup() {
-    if (this.scrollContainer && this.handleScroll) {
-      this.scrollContainer.removeEventListener('scroll', this.handleScroll)
+    if (this.handleScroll) {
+      for (const container of this.scrollContainers) {
+        container.removeEventListener('scroll', this.handleScroll)
+      }
     }
 
     if (this.handleStorage) {
@@ -256,5 +265,7 @@ export class InformationWidget extends WidgetType {
       this.observer.disconnect()
       this.observer = null
     }
+
+    this.scrollContainers = []
   }
 }