fix loop protection breaking shader strings and p5.strands functions

client/modules/Preview/EmbedFrame.jsx

@@ -2,8 +2,7 @@ import blobUtil from 'blob-util';
 import PropTypes from 'prop-types';
 import React, { useRef, useEffect, useMemo } from 'react';
 import styled from 'styled-components';
-import loopProtect from 'loop-protect';
-import decomment from 'decomment';
+import { jsPreprocess } from './jsPreprocess';
 import { resolvePathToFile } from '../../../server/utils/filePath';
 import { getConfig } from '../../utils/getConfig';
 import {
@@ -55,47 +54,6 @@ function resolveCSSLinksInString(content, files) {
   return newContent;
 }
 
-function jsPreprocess(jsText) {
-  let newContent = jsText;
-
-  // Skip loop protection if the user explicitly opts out with // noprotect
-  if (/\/\/\s*noprotect/.test(newContent)) {
-    return newContent;
-  }
-
-  // Detect and fix multiple consecutive loops on the same line (e.g. "for(){}for(){}")
-  // which can bypass loop protection. Add semicolons between them so each loop
-  // is properly wrapped by loopProtect. See #3891.
-  // Match: for/while/do-while loops followed immediately by another loop
-  newContent = newContent.replace(
-    /((?:for|while)\s*\([^)]*\)\s*\{[^}]*\})((?:for|while)\s*\([^)]*\)\s*\{[^}]*\})/g,
-    '$1; $2'
-  );
-
-  // Always apply loop protection to prevent infinite loops from crashing
-  // the browser tab. Previously, loop protection was skipped when JSHINT
-  // found errors, but this left users vulnerable to infinite loops in
-  // syntactically imperfect code (common while typing). See #3891.
-  try {
-    newContent = decomment(newContent, {
-      ignore: /\/\/\s*noprotect/g,
-      space: true
-    });
-    newContent = loopProtect(newContent);
-  } catch (e) {
-    // If decomment or loopProtect fails (e.g. due to syntax issues),
-    // still try to apply loop protection on the original code.
-    try {
-      newContent = loopProtect(jsText);
-    } catch (err) {
-      // If loop protection can't be applied at all, return original code.
-      // The sketch will still run, but without loop protection.
-      return jsText;
-    }
-  }
-  return newContent;
-}
-
 function resolveJSLinksInString(content, files) {
   let newContent = content;
   let jsFileStrings = content.match(STRING_REGEX);

client/modules/Preview/jsPreprocess.js

@@ -0,0 +1,132 @@
+import * as acorn from 'acorn';
+import * as walk from 'acorn-walk';
+
+const LOOP_TIMEOUT_MS = 100;
+
+function isShaderCall(node) {
+  const { callee } = node;
+  const isBuildShader =
+    callee.type === 'Identifier' && /^build\w*Shader$/.test(callee.name);
+  const isBaseShaderModify =
+    callee.type === 'MemberExpression' &&
+    callee.property.name === 'modify' &&
+    callee.object.type === 'CallExpression' &&
+    callee.object.callee.type === 'Identifier' &&
+    /^base\w*Shader$/.test(callee.object.callee.name);
+  return isBuildShader || isBaseShaderModify;
+}
+
+function collectShaderFunctionNames(ast) {
+  const names = new Set();
+  walk.simple(ast, {
+    CallExpression(node) {
+      if (isShaderCall(node)) {
+        node.arguments.forEach((arg) => {
+          if (arg.type === 'Identifier') {
+            names.add(arg.name);
+          }
+        });
+      }
+    }
+  });
+  return names;
+}
+
+function collectLoopsToProtect(ast, shaderNames) {
+  const loops = [];
+
+  function visitNode(node, ancestors) {
+    const isInsideShader = ancestors.some((ancestor, idx) => {
+      if (
+        ancestor.type === 'FunctionDeclaration' &&
+        shaderNames.has(ancestor.id?.name)
+      ) {
+        return true;
+      }
+      if (
+        ancestor.type === 'FunctionExpression' ||
+        ancestor.type === 'ArrowFunctionExpression'
+      ) {
+        const parent = ancestors[idx - 1];
+        if (
+          parent?.type === 'CallExpression' &&
+          isShaderCall(parent) &&
+          parent.arguments.includes(ancestor)
+        ) {
+          return true;
+        }
+        if (
+          parent?.type === 'VariableDeclarator' &&
+          shaderNames.has(parent.id?.name)
+        ) {
+          return true;
+        }
+      }
+      return false;
+    });
+
+    if (!isInsideShader) loops.push(node);
+  }
+
+  walk.ancestor(ast, {
+    ForStatement: visitNode,
+    WhileStatement: visitNode,
+    DoWhileStatement: visitNode
+  });
+
+  return loops;
+}
+
+export function jsPreprocess(jsText) {
+  if (/\/\/\s*noprotect/.test(jsText)) {
+    return jsText;
+  }
+
+  let ast;
+  try {
+    ast = acorn.parse(jsText, {
+      ecmaVersion: 'latest',
+      sourceType: 'script',
+      locations: true
+    });
+  } catch (e) {
+    return jsText;
+  }
+
+  const shaderNames = collectShaderFunctionNames(ast);
+  const loops = collectLoopsToProtect(ast, shaderNames);
+
+  if (loops.length === 0) return jsText;
+
+  const insertions = [];
+
+  loops.forEach((loop) => {
+    const { line } = loop.loc.start;
+    const varName = `_LP${loop.start}`;
+
+    const beforeCode = `var ${varName} = Date.now(); `;
+
+    const checkCode =
+      `if (Date.now() - ${varName} > ${LOOP_TIMEOUT_MS}) ` +
+      `{ window.loopProtect.hit(${line}); break; } `;
+
+    const { body } = loop;
+    if (body.type === 'BlockStatement') {
+      insertions.push({ pos: loop.start, code: beforeCode });
+      insertions.push({ pos: body.start + 1, code: checkCode });
+    } else {
+      insertions.push({ pos: loop.start, code: beforeCode });
+      insertions.push({ pos: body.start, code: `{ ${checkCode}` });
+      insertions.push({ pos: body.end, code: ` }` });
+    }
+  });
+
+  insertions.sort((a, b) => b.pos - a.pos);
+
+  let result = jsText;
+  insertions.forEach(({ pos, code }) => {
+    result = result.slice(0, pos) + code + result.slice(pos);
+  });
+
+  return result;
+}

client/modules/Preview/jsPreprocess.unit.test.js

@@ -0,0 +1,129 @@
+import { jsPreprocess } from './jsPreprocess';
+
+describe('jsPreprocess', () => {
+  describe('// noprotect', () => {
+    it('returns code unchanged when // noprotect is present', () => {
+      const code = '// noprotect\nfor (let i = 0; i < 10; i++) {}';
+      expect(jsPreprocess(code)).toBe(code);
+    });
+  });
+
+  describe('regular loop protection', () => {
+    it('adds loop protection to a for loop', () => {
+      const code = 'for (let i = 0; i < 10; i++) {}';
+      const result = jsPreprocess(code);
+      expect(result).toContain('window.loopProtect.hit');
+      expect(result).toContain('Date.now()');
+    });
+
+    it('adds loop protection to a while loop', () => {
+      const code = 'while (true) {}';
+      const result = jsPreprocess(code);
+      expect(result).toContain('window.loopProtect.hit');
+    });
+
+    it('adds loop protection to a do-while loop', () => {
+      const code = 'do {} while (true)';
+      const result = jsPreprocess(code);
+      expect(result).toContain('window.loopProtect.hit');
+    });
+
+    it('returns original code if transform fails', () => {
+      const code = 'this is not valid javascript @@@@';
+      expect(jsPreprocess(code)).toBe(code);
+    });
+  });
+
+  describe('shader strings', () => {
+    it('does not modify for loops inside template literal shader strings', () => {
+      const code = `
+        const shader = \`
+          for (int i = 0; i < 20; i++) {
+            total += texture(tex, uv);
+          }
+        \`;
+      `;
+      const result = jsPreprocess(code);
+      expect(result).not.toContain('window.loopProtect.hit');
+    });
+
+    it('does not modify for loops inside single-quoted strings', () => {
+      const code = "const glsl = 'for (int i = 0; i < 10; i++) {}';";
+      const result = jsPreprocess(code);
+      expect(result).not.toContain('window.loopProtect.hit');
+    });
+
+    it('does not modify GLSL inside buildFilterShader object argument', () => {
+      const code = `
+        blur = buildFilterShader({
+          'vec4 getColor': \`(FilterInputs inputs) {
+            for (int i = 0; i < 20; i++) {
+              total += getTexture(canvasContent, inputs.texCoord);
+            }
+          }\`
+        });
+      `;
+      const result = jsPreprocess(code);
+      expect(result).not.toContain('window.loopProtect.hit');
+    });
+  });
+
+  describe('p5.strands shader functions', () => {
+    it('skips loop protection for named function passed to buildFilterShader', () => {
+      const code = `
+        blur = buildFilterShader(doBlur);
+        function doBlur() {
+          for (let i = 0; i < 20; i++) {}
+        }
+      `;
+      const result = jsPreprocess(code);
+      expect(result).not.toContain('window.loopProtect.hit');
+    });
+
+    it('skips loop protection for arrow function variable passed to buildFilterShader', () => {
+      const code = `
+        const doBlur = () => {
+          for (let i = 0; i < 20; i++) {}
+        };
+        blur = buildFilterShader(doBlur);
+      `;
+      const result = jsPreprocess(code);
+      expect(result).not.toContain('window.loopProtect.hit');
+    });
+
+    it('skips loop protection for inline function passed to buildFilterShader', () => {
+      const code = `
+        blur = buildFilterShader(function() {
+          for (let i = 0; i < 20; i++) {}
+        });
+      `;
+      const result = jsPreprocess(code);
+      expect(result).not.toContain('window.loopProtect.hit');
+    });
+
+    it('skips loop protection for function passed to base*Shader().modify()', () => {
+      const code = `
+        blur = baseFilterShader().modify(doBlur);
+        function doBlur() {
+          for (let i = 0; i < 20; i++) {}
+        }
+      `;
+      const result = jsPreprocess(code);
+      expect(result).not.toContain('window.loopProtect.hit');
+    });
+
+    it('still protects regular loops outside shader functions', () => {
+      const code = `
+        blur = buildFilterShader(doBlur);
+        function doBlur() {
+          for (let i = 0; i < 20; i++) {}
+        }
+        function draw() {
+          for (let j = 0; j < 100; j++) {}
+        }
+      `;
+      const result = jsPreprocess(code);
+      expect(result).toContain('window.loopProtect.hit');
+    });
+  });
+});

client/utils/previewEntry.js

@@ -1,4 +1,3 @@
-import loopProtect from 'loop-protect';
 import { Hook, Decode, Encode } from 'console-feed';
 import StackTrace from 'stacktrace-js';
 import { evaluateExpression } from './evaluateExpression';
@@ -14,16 +13,13 @@ const htmlOffset = 12;
 window.objectUrls[window.location.href] = '/index.html';
 const blobPath = window.location.href.split('/').pop();
 window.objectPaths[blobPath] = 'index.html';
-// Monkey-patch loopProtect to send infinite loop warnings to the in-app console
-window.loopProtect = loopProtect;
-if (window.loopProtect && typeof window.loopProtect.hit === 'function') {
-  let hitCount = 0;
-  let lastHitTime = 0;
-  let firstLine = null;
-  let stopTimeout = null;
-  window.loopProtect.hit = function handleLoopHit(line) {
+let hitCount = 0;
+let lastHitTime = 0;
+let firstLine = null;
+let stopTimeout = null;
+window.loopProtect = {
+  hit: function handleLoopHit(line) {
     const now = Date.now();
-    // Reset counters if more than 1 second has passed
     if (now - lastHitTime > 1000) {
       hitCount = 0;
       firstLine = null;
@@ -35,37 +31,28 @@ if (window.loopProtect && typeof window.loopProtect.hit === 'function') {
     hitCount++;
     lastHitTime = now;
 
-    // Track first line for single loop case
     if (hitCount === 1) {
       firstLine = line;
-      // Wait briefly to see if more loops are detected (minimal delay)
       stopTimeout = setTimeout(() => {
         if (hitCount === 1) {
-          // Only one loop detected - show line number
           const msg = `Infinite loop detected at line ${firstLine}. Stopping execution.`;
           throw new Error(msg);
         }
-        // If hitCount > 1, another loop already threw the error
       }, 30);
     }
 
-    // If multiple loops detected, stop immediately without waiting
     if (hitCount > 1) {
-      // Clear single loop timeout since we have multiple
       if (stopTimeout) {
         clearTimeout(stopTimeout);
         stopTimeout = null;
       }
-      // Stop immediately - multiple loops exist
       const msg = 'Multiple infinite loops detected. Stopping execution.';
       throw new Error(msg);
     }
 
-    // Don't call origHit to prevent duplicate messages
-    // The loop protection still works, we just handle the messaging ourselves
-    return true; // Return true to indicate loop was detected
-  };
-}
+    return true;
+  }
+};
 
 const consoleBuffer = [];
 const LOGWAIT = 500;