render outdated decors pale

Author: al3xnag

packages/jsrepl/src/app/repl/components/code-editor.module.css

@@ -1,4 +1,11 @@
 .codeEditor {
+  &.jsreplDecorsOutdated .jsreplDecor {
+    &::before,
+    &::after {
+      --opacity: 0.2;
+    }
+  }
+
   /* Fix text clipping due to Tailwind CSS preflight styles: `* { box-sizing: border-box; }` */
   & :global(.monaco-editor .action-widget) {
     box-sizing: content-box;

packages/jsrepl/src/hooks/useReplDecorations.ts

@@ -8,12 +8,14 @@ import { ReplStateContext } from '@/context/repl-state-context'
 import { getEditorContentsWithReplDecors } from '@/lib/code-editor-utils'
 import { createDecorations } from '@/lib/repl-payload/decorations'
 import { renderToHoverContents } from '@/lib/repl-payload/render-hover'
+import useReplDecorationsOutdated from './useReplDecorationsOutdated'
 
 export default function useReplDecorations() {
   const { replState } = useContext(ReplStateContext)!
   const { rewindMode } = useContext(ReplRewindModeContext)!
   const { payloads } = useContext(ReplPayloadsContext)!
   const { editorRef } = useContext(MonacoEditorContext)!
+  const { setDecorationsOutdated } = useReplDecorationsOutdated()
 
   const decorationsDisposable = useRef<() => void>()
   const provideHoverRef = useRef<typeof provideHover>()
@@ -44,6 +46,7 @@ export default function useReplDecorations() {
     }
 
     decorationsDisposable.current?.()
+    setDecorationsOutdated(false)
 
     const payloads = getDisplayedPayloads((payload) => payload.ctx.filePath === activeModel)
     const highlightedPayloadIds =
@@ -59,6 +62,7 @@ export default function useReplDecorations() {
     rewindMode.active,
     rewindMode.currentPayloadId,
     replState.activeModel,
+    setDecorationsOutdated,
   ])
 
   useEffect(() => {

packages/jsrepl/src/hooks/useReplDecorationsOutdated.ts

@@ -0,0 +1,56 @@
+import { useCallback, useContext, useEffect, useRef } from 'react'
+import codeEditorStyles from '@/app/repl/components/code-editor.module.css'
+import { MonacoEditorContext } from '@/context/monaco-editor-context'
+import { ReplModelsContext } from '@/context/repl-models-context'
+
+export default function useReplDecorationsOutdated() {
+  const { editorRef } = useContext(MonacoEditorContext)!
+  const { models } = useContext(ReplModelsContext)!
+
+  const decorationsOutdatedRef = useRef(false)
+  const timeoutIdRef = useRef<NodeJS.Timeout>()
+
+  const setDecorationsOutdated = useCallback(
+    (outdated: boolean) => {
+      if (decorationsOutdatedRef.current === outdated) {
+        return
+      }
+
+      decorationsOutdatedRef.current = outdated
+
+      clearTimeout(timeoutIdRef.current)
+
+      const fn = () => {
+        const domNode = editorRef.current!.getContainerDomNode()
+        domNode.classList.toggle(codeEditorStyles.jsreplDecorsOutdated!, outdated)
+      }
+
+      if (outdated) {
+        timeoutIdRef.current = setTimeout(fn, 700)
+      } else {
+        fn()
+      }
+    },
+    [editorRef]
+  )
+
+  useEffect(() => {
+    const editor = editorRef.current!
+    const disposable = editor.onDidChangeModelContent(() => {
+      if (decorationsOutdatedRef.current) {
+        return
+      }
+
+      const model = editor.getModel()
+      if (model && models.has(model.uri.path)) {
+        setDecorationsOutdated(true)
+      }
+    })
+
+    return () => {
+      disposable.dispose()
+    }
+  }, [models, editorRef, setDecorationsOutdated])
+
+  return { setDecorationsOutdated }
+}