update sketch verifier to use acorn/acorn walk and include line numbers in results

Author: sproutleaf

package-lock.json

@@ -22,8 +22,9 @@
   },
   "version": "1.9.4",
   "dependencies": {
+    "acorn": "^8.12.1",
+    "acorn-walk": "^8.3.4",
     "colorjs.io": "^0.5.2",
-    "espree": "^10.2.0",
     "file-saver": "^1.3.8",
     "gifenc": "^1.0.3",
     "libtess": "^1.2.2",
@@ -83,4 +84,4 @@
       "pre-commit": "lint-staged"
     }
   }
-}
+}

package.json

@@ -1,4 +1,5 @@
-import * as espree from 'espree';
+import * as acorn from 'acorn';
+import * as walk from 'acorn-walk';
 
 /**
  * @for p5
@@ -14,8 +15,14 @@ function sketchVerifier(p5, fn) {
    */
   fn.fetchScript = async function (script) {
     if (script.src) {
-      const contents = await fetch(script.src).then((res) => res.text());
-      return contents;
+      try {
+        const contents = await fetch(script.src).then((res) => res.text());
+        return contents;
+      } catch (error) {
+        // TODO: Handle CORS error here.
+        console.error('Error fetching script:', error);
+        return '';
+      }
     } else {
       return script.textContent;
     }
@@ -30,6 +37,8 @@ function sketchVerifier(p5, fn) {
    * @returns {Promise<string>} The user's code as a string.
    */
   fn.getUserCode = async function () {
+    // TODO: think of a more robust way to get the user's code. Refer to
+    // https://github.com/processing/p5.js/pull/7293.
     const scripts = document.querySelectorAll('script');
     const userCodeScript = scripts[scripts.length - 1];
     const userCode = await fn.fetchScript(userCodeScript);
@@ -42,59 +51,58 @@ function sketchVerifier(p5, fn) {
    * the help of Espree parser.
    * 
    * @method extractUserDefinedVariablesAndFuncs
-   * @param {string} codeStr - The code to extract variables and functions from.
+   * @param {string} code - The code to extract variables and functions from.
    * @returns {Object} An object containing the user's defined variables and functions.
-   * @returns {string[]} [userDefinitions.variables] Array of user-defined variable names.
-   * @returns {strings[]} [userDefinitions.functions] Array of user-defined function names.
+   * @returns {Array<{name: string, line: number}>} [userDefinitions.variables] Array of user-defined variable names and their line numbers.
+   * @returns {Array<{name: string, line: number}>} [userDefinitions.functions] Array of user-defined function names and their line numbers.
    */
-  fn.extractUserDefinedVariablesAndFuncs = function (codeStr) {
+  fn.extractUserDefinedVariablesAndFuncs = function (code) {
     const userDefinitions = {
       variables: [],
       functions: []
     };
+    // The line numbers from the parser are consistently off by one, add
+    // `lineOffset` here to correct them.
+    const lineOffset = -1;
 
     try {
-      const ast = espree.parse(codeStr, {
+      const ast = acorn.parse(code, {
         ecmaVersion: 2021,
         sourceType: 'module',
-        ecmaFeatures: {
-          jsx: true
-        }
+        locations: true  // This helps us get the line number.
       });
 
-      function traverse(node) {
-        const { type, declarations, id, init } = node;
-
-        switch (type) {
-          case 'VariableDeclaration':
-            declarations.forEach(({ id, init }) => {
-              if (id.type === 'Identifier') {
-                const category = init && ['ArrowFunctionExpression', 'FunctionExpression'].includes(init.type)
-                  ? 'functions'
-                  : 'variables';
-                userDefinitions[category].push(id.name);
-              }
+      walk.simple(ast, {
+        VariableDeclarator(node) {
+          if (node.id.type === 'Identifier') {
+            const category = node.init && ['ArrowFunctionExpression', 'FunctionExpression'].includes(node.init.type)
+              ? 'functions'
+              : 'variables';
+            userDefinitions[category].push({
+              name: node.id.name,
+              line: node.loc.start.line + lineOffset
+            });
+          }
+        },
+        FunctionDeclaration(node) {
+          if (node.id && node.id.type === 'Identifier') {
+            userDefinitions.functions.push({
+              name: node.id.name,
+              line: node.loc.start.line + lineOffset
+            });
+          }
+        },
+        // We consider class declarations to be a special form of variable
+        // declaration.
+        ClassDeclaration(node) {
+          if (node.id && node.id.type === 'Identifier') {
+            userDefinitions.variables.push({
+              name: node.id.name,
+              line: node.loc.start.line + lineOffset
             });
-            break;
-          case 'FunctionDeclaration':
-            if (id?.type === 'Identifier') {
-              userDefinitions.functions.push(id.name);
-            }
-            break;
-        }
-
-        for (const key in node) {
-          if (node[key] && typeof node[key] === 'object') {
-            if (Array.isArray(node[key])) {
-              node[key].forEach(child => traverse(child));
-            } else {
-              traverse(node[key]);
-            }
           }
         }
-      }
-
-      traverse(ast);
+      });
     } catch (error) {
       // TODO: Replace this with a friendly error message.
       console.error('Error parsing code:', error);

src/core/friendly_errors/sketch_verifier.js

@@ -74,9 +74,49 @@ suite('Validate Params', function () {
       `;
 
       const result = mockP5Prototype.extractUserDefinedVariablesAndFuncs(code);
-
-      expect(result.variables).toEqual(['x', 'y', 'z', 'v1', 'v2', 'v3']);
-      expect(result.functions).toEqual(['foo', 'bar', 'baz']);
+      const expectedResult = {
+        "functions": [
+          {
+            "line": 5,
+            "name": "foo",
+          },
+          {
+            "line": 6,
+            "name": "bar",
+          },
+          {
+            "line": 7,
+            "name": "baz",
+          },
+        ],
+        "variables": [
+          {
+            "line": 1,
+            "name": "x",
+          },
+          {
+            "line": 2,
+            "name": "y",
+          },
+          {
+            "line": 3,
+            "name": "z",
+          },
+          {
+            "line": 4,
+            "name": "v1",
+          },
+          {
+            "line": 4,
+            "name": "v2",
+          },
+          {
+            "line": 4,
+            "name": "v3",
+          },
+        ],
+      };
+      expect(result).toEqual(expectedResult);
     });
 
     // Sketch verifier should ignore the following types of lines:
@@ -101,9 +141,29 @@ suite('Validate Params', function () {
       `;
 
       const result = mockP5Prototype.extractUserDefinedVariablesAndFuncs(code);
-
-      expect(result.variables).toEqual(['x', 'y', 'z', 'i']);
-      expect(result.functions).toEqual([]);
+      const expectedResult = {
+        "functions": [],
+        "variables": [
+          {
+            "line": 2,
+            "name": "x",
+          },
+          {
+            "line": 6,
+            "name": "y",
+          },
+          {
+            "line": 11,
+            "name": "z",
+          },
+          {
+            "line": 13,
+            "name": "i",
+          },
+        ],
+      };
+
+      expect(result).toEqual(expectedResult);
     });
 
     test('Handles parsing errors', function () {
@@ -130,13 +190,31 @@ suite('Validate Params', function () {
       mockP5Prototype.getUserCode = vi.fn(() => Promise.resolve(mockScript));
 
       const result = await mockP5Prototype.run();
+      const expectedResult = {
+        "functions": [
+          {
+            "line": 3,
+            "name": "foo",
+          },
+          {
+            "line": 4,
+            "name": "bar",
+          },
+        ],
+        "variables": [
+          {
+            "line": 1,
+            "name": "x",
+          },
+          {
+            "line": 2,
+            "name": "y",
+          },
+        ],
+      };
 
       expect(mockP5Prototype.getUserCode).toHaveBeenCalledTimes(1);
-
-      expect(result).toEqual({
-        variables: ['x', 'y'],
-        functions: ['foo', 'bar']
-      });
+      expect(result).toEqual(expectedResult);
     });
   });
 });