add infinite loop protection

Author: luizbills

package.json

@@ -24,6 +24,7 @@
     "@codemirror/theme-one-dark": "^6.1.2",
     "@litecanvas/plugin-asset-loader": "latest",
     "@litecanvas/utils": "latest",
+    "babel-standalone": "^6.26.0",
     "codemirror": "^6.0.1",
     "eslint-linter-browserify": "9.20.1",
     "litecanvas": "latest",

public/app.js

@@ -65,6 +65,11 @@
       handleError = (e) => {
         if (errorMessage) return;
         errorMessage = e.message || e.reason;
+        if (errorMessage.includes("Potential infinite loop")) {
+          errorMessage = "Error: Potential infinite loop";
+          window["err-tip"].textContent =
+            "Tip: Check your code loops (for, while, etc)";
+        }
         console.error(errorMessage);
         err.prepend(errorMessage);
         err.style.display = "block";

public/preview.html

@@ -1,5 +1,5 @@
 const cacheName = "luizbills.litecanvas-editor-v1";
-const version = "2.58.0";
+const version = "2.59.0";
 
 const precacheResources = [
   "/",

public/sw.js

@@ -12,8 +12,8 @@ import { indentWithTab } from "@codemirror/commands";
 import { oneDark } from "@codemirror/theme-one-dark";
 import * as eslint from "eslint-linter-browserify";
 
+import { show, hide, $, prepareCode } from "./utils";
 import editorSetup from "./editorSetup";
-import { show, hide, $ } from "./utils";
 import demo from "./demo";
 import customCompletions from "./completions";
 import mobileBar from "./mobileBar";
@@ -157,7 +157,8 @@ function runCode() {
 
 function loadCode() {
   const code = window.codeEditor.state.doc.toString();
-  getIframe().contentDocument.querySelector("#code").innerHTML = code;
+  getIframe().contentDocument.querySelector("#code").innerHTML =
+    prepareCode(code);
 }
 
 /**

src/index.js

@@ -0,0 +1,104 @@
+/**
+ * Based on https://github.com/jsbin/loop-protect/blob/master/lib/index.js | License: http://jsbin.mit-license.org
+ */
+const generateBefore = (t, id) =>
+  t.variableDeclaration("let", [
+    t.variableDeclarator(
+      id,
+      t.callExpression(
+        t.memberExpression(t.identifier("Date"), t.identifier("now")),
+        []
+      )
+    ),
+  ]);
+
+const generateInside = ({ t, id, line, ch, timeout, extra } = {}) => {
+  return t.ifStatement(
+    t.binaryExpression(
+      ">",
+      t.binaryExpression(
+        "-",
+        t.callExpression(
+          t.memberExpression(t.identifier("Date"), t.identifier("now")),
+          []
+        ),
+        id
+      ),
+      t.numericLiteral(timeout)
+    ),
+    t.throwStatement(t.stringLiteral("Potential infinite loop"))
+  );
+};
+
+const protect = (t, timeout, extra) => (path) => {
+  if (!path.node.loc) {
+    return;
+  }
+  const id = path.scope.generateUidIdentifier(randomString(16));
+  const before = generateBefore(t, id);
+  const inside = generateInside({
+    t,
+    id,
+    line: path.node.loc.start.line,
+    ch: path.node.loc.start.column,
+    timeout,
+    extra,
+  });
+  const body = path.get("body");
+
+  // if we have an expression statement, convert it to a block
+  if (!t.isBlockStatement(body)) {
+    body.replaceWith(t.blockStatement([body.node]));
+  }
+  path.insertBefore(before);
+  body.unshiftContainer("body", inside);
+};
+
+export default (timeout = 100, extra = null) => {
+  if (typeof extra === "string") {
+    const string = extra;
+    extra = `() => console.error("${string.replace(/"/g, '\\"')}")`;
+  } else if (extra !== null) {
+    extra = extra.toString();
+    if (extra.startsWith("function (")) {
+      // fix anonymous functions as they'll cause
+      // the callback transform to blow up
+      extra = extra.replace(/^function \(/, "function callback(");
+    }
+  }
+
+  return ({ types: t, transform }) => {
+    const node = extra
+      ? transform(extra, { ast: true }).ast.program.body[0]
+      : null;
+
+    let callback = null;
+    if (t.isExpressionStatement(node)) {
+      callback = node.expression;
+    } else if (t.isFunctionDeclaration(node)) {
+      callback = t.functionExpression(null, node.params, node.body);
+    }
+
+    return {
+      visitor: {
+        WhileStatement: protect(t, timeout, callback),
+        ForStatement: protect(t, timeout, callback),
+        DoWhileStatement: protect(t, timeout, callback),
+      },
+    };
+  };
+};
+
+function randomString(length) {
+  const result = [];
+  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+  const charactersLength = characters.length;
+  let counter = 0;
+  while (counter < length) {
+    result.push(
+      characters.charAt(Math.floor(Math.random() * charactersLength))
+    );
+    counter += 1;
+  }
+  return result.join("");
+}

src/loop-protect.js

@@ -1,3 +1,6 @@
+import Babel from "babel-standalone";
+import loopProtection from "./loop-protect";
+
 /**
  * @param {HTMLElement} el
  */
@@ -31,3 +34,16 @@ export function $(selector, parent = document) {
 export function $$(selector, parent = document) {
   return parent.querySelectorAll(selector);
 }
+
+/**
+ * @param {string} code
+ * @returns {string}
+ */
+export function prepareCode(code) {
+  const timeout = 500;
+  Babel.registerPlugin("loopProtection", loopProtection(timeout));
+
+  return Babel.transform(code, {
+    plugins: ["loopProtection"],
+  }).code;
+}