Fix GLSL parsing issue due to a RegExp object being reused, resulting in function names sometimes not being decorated, and add UT launch.json config (#128)

Author: AmoebaChant

.vscode/launch.json

@@ -4,7 +4,6 @@
     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
     "configurations": [
-        
         {
             "type": "msedge",
             "request": "launch",
@@ -40,21 +39,33 @@
             "outFiles": ["!**/node_modules/**"],
             "preLaunchTask": "Serve and watch SFE (Dev)"
         },
-        // {
-        //     /*
-        //     Launch tests
-        //     https://jestjs.io/docs/troubleshooting#debugging-in-vs-code
-        //     */
-        //     "type": "node",
-        //     "request": "launch",
-        //     "name": "Run and Debug unit tests (Dev)",
-        //     "runtimeArgs": ["--inspect-brk", "${workspaceRoot}/node_modules/jest/bin/jest.js", "--runInBand", "--selectProjects", "unit"],
-        //     "console": "integratedTerminal",
-        //     "internalConsoleOptions": "neverOpen",
-        //     "port": 9229,
-        //     // "outFiles": ["${workspaceRoot}/**/dist/**/*"], // debugging sources
-        //     // "envFile": "${workspaceRoot}/.env",
-        //     "preLaunchTask": "Build (Dev)"
-        // },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Run and Debug unit tests",
+            "runtimeArgs": [
+                "--inspect-brk",
+                "${workspaceRoot}/node_modules/jest/bin/jest.js",
+                "--runInBand",
+                "--selectProjects",
+                "unit"
+            ],
+            "console": "integratedTerminal",
+            "internalConsoleOptions": "neverOpen"
+        },
+        {
+            "type": "node",
+            "request": "launch",
+            "name": "Run and Debug current unit test file",
+            "runtimeArgs": [
+                "--inspect-brk",
+                "${workspaceRoot}/node_modules/jest/bin/jest.js",
+                "--runInBand",
+                "--testPathPattern",
+                "${fileBasename}" // Run only the currently open file
+            ],
+            "console": "integratedTerminal",
+            "internalConsoleOptions": "neverOpen"
+        }
     ]
 }

packages/core/src/utils/buildTools/shaderConverter.ts

@@ -4,8 +4,19 @@ import type { ShaderCode, ShaderFunction } from "./shaderCode.types";
 import { ConnectionPointType } from "../../connection/connectionPointType.js";
 import { BlockDisableStrategy } from "../../blockFoundation/disableableShaderBlock.js";
 
-const GetFunctionHeaderRegEx = /\S*\w+\s+(\w+)\s*\((.*?)\)\s*\{/g; // Matches a function's name and its parameters
-const GetDefineRegEx = /^\S*#define\s+(\w+).*$/gm; // Matches a #define statement line, capturing its name
+// Note: creating a global RegExp object is risky, because it holds state (e.g. lastIndex) that has to be
+// cleared at the right time to ensure correctness, which is easy to forget to do.
+// Instead, for regular expressions used in multiple places, we define the string and options once, and create
+// a new RegExp object from them when needed, to ensure state isn't accidentally reused.
+
+// Matches a function's name and its parameters
+const GetFunctionHeaderRegExString = `\\S*\\w+\\s+(\\w+)\\s*\\((.*?)\\)\\s*\\{`;
+const GetFunctionHeaderRegExOptions = "g";
+
+// Matches a #define statement line, capturing its name
+const GetDefineRegExString = `^\\S*#define\\s+(\\w+).*$`;
+const GetDefineRegExOptions = "gm";
+
 const ReservedSymbols = ["main"];
 
 /**
@@ -161,11 +172,15 @@ export function parseFragmentShader(fragmentShader: string): FragmentShaderInfo
     Logger.Log(`Uniforms found: ${JSON.stringify(uniforms)}`);
     const consts = [...fragmentShader.matchAll(/\S*const\s+\w*\s+(\w*)\s*=.*;/g)].map((match) => match[1]);
     Logger.Log(`Consts found: ${JSON.stringify(consts)}`);
-    const defineNames = [...fragmentShader.matchAll(GetDefineRegEx)].map((match) => match[1]);
-    Logger.Log(`Defines found: ${JSON.stringify(defineNames)}`);
-    const functionNames = [...fragmentShaderWithNoFunctionBodies.matchAll(GetFunctionHeaderRegEx)].map(
+    const defineNames = [...fragmentShader.matchAll(new RegExp(GetDefineRegExString, GetDefineRegExOptions))].map(
         (match) => match[1]
     );
+    Logger.Log(`Defines found: ${JSON.stringify(defineNames)}`);
+    const functionNames = [
+        ...fragmentShaderWithNoFunctionBodies.matchAll(
+            new RegExp(GetFunctionHeaderRegExString, GetFunctionHeaderRegExOptions)
+        ),
+    ].map((match) => match[1]);
     Logger.Log(`Functions found: ${JSON.stringify(functionNames)}`);
 
     // Decorate the uniforms, consts, defines, and functions
@@ -192,7 +207,9 @@ export function parseFragmentShader(fragmentShader: string): FragmentShaderInfo
     const finalConsts = [...fragmentShaderWithRenamedSymbols.matchAll(/^\s*(const\s.*)/gm)].map((match) => match[1]);
 
     // Extract all the defines
-    const finalDefines = [...fragmentShaderWithRenamedSymbols.matchAll(GetDefineRegEx)].map((match) => match[0]);
+    const finalDefines = [
+        ...fragmentShaderWithRenamedSymbols.matchAll(new RegExp(GetDefineRegExString, GetDefineRegExOptions)),
+    ].map((match) => match[0]);
 
     // Find the main input
     const mainInputs = [...fragmentShaderWithRenamedSymbols.matchAll(/\S*uniform.*\s(\w*);\s*\/\/\s*main/gm)].map(
@@ -248,10 +265,12 @@ function extractFunctions(fragment: string): {
     let mainFunctionName: string | undefined;
     let pos = 0;
 
+    const getFunctionHeaderRegEx = new RegExp(GetFunctionHeaderRegExString, GetFunctionHeaderRegExOptions);
+
     while (pos < fragment.length) {
         // Match the next available function header in the fragment code
-        GetFunctionHeaderRegEx.lastIndex = pos;
-        const match = GetFunctionHeaderRegEx.exec(fragment);
+        getFunctionHeaderRegEx.lastIndex = pos;
+        const match = getFunctionHeaderRegEx.exec(fragment);
         if (!match) {
             break;
         }

packages/core/test/unit/importCustomBlockDefinition.test.js

@@ -0,0 +1,59 @@
+import { importCustomBlockDefinition } from "../../dist/serialization/importCustomBlockDefinition.js";
+import { CustomShaderBlock } from "../../dist/blockFoundation/customShaderBlock.js";
+import { SmartFilter } from "../../dist/smartFilter.js";
+import { InputBlock } from "../../dist/blockFoundation/inputBlock.js";
+import { ConnectionPointType } from "../../dist/connection/connectionPointType.js";
+import { SmartFilterOptimizer } from "../../dist/optimization/smartFilterOptimizer.js";
+
+const annotatedFragmentGeneral = `
+// { "smartFilterBlockType": "GeneralBlock", "namespace": "UnitTests" }
+uniform sampler2D input; // main
+uniform float intensity;
+
+vec4 apply2(vec2 vUV){ // main
+    vec4 color = texture2D(input, vUV);
+    return color * intensity;
+}
+`;
+
+describe("importCustomBlockDefinition", () => {
+    describe("a block is parsed after a block where the string ends exactly at the end of the function definition", () => {
+        const annotatedFragmentEndOfFunctionDefinitionIsEndOfString = `
+            // { "smartFilterBlockType": "BlockWhereFunctionEndsAtEndOfString", "namespace": "UnitTests" }
+            uniform sampler2D input; // main
+            uniform float amount;
+
+            vec4 apply1(vec2 vUV){ // main
+                vec4 color = texture2D(input, vUV);
+                return color + amount;
+            }`;
+
+        const customBlockDefinition1 = importCustomBlockDefinition(
+            annotatedFragmentEndOfFunctionDefinitionIsEndOfString
+        );
+        const customBlockDefinition2 = importCustomBlockDefinition(annotatedFragmentGeneral);
+        let smartFilter;
+
+        beforeEach(() => {
+            smartFilter = new SmartFilter("test");
+            const customBlock1 = CustomShaderBlock.Create(smartFilter, "block1", customBlockDefinition1);
+            const customBlock2 = CustomShaderBlock.Create(smartFilter, "block2", customBlockDefinition2);
+
+            const inputTexture = new InputBlock(smartFilter, "inputTexture", ConnectionPointType.Texture, null);
+            const inputFloat = new InputBlock(smartFilter, "inputFloat", ConnectionPointType.Float, 1.0);
+
+            inputTexture.output.connectTo(customBlock1.findInput("input"));
+            inputFloat.output.connectTo(customBlock1.findInput("amount"));
+
+            customBlock1.output.connectTo(customBlock2.findInput("input"));
+            inputFloat.output.connectTo(customBlock2.findInput("intensity"));
+
+            customBlock2.output.connectTo(smartFilter.output);
+        });
+
+        it("a smart filter using those blocks can be optimized without error", () => {
+            const optimizer = new SmartFilterOptimizer(smartFilter);
+            expect(optimizer.optimize()).not.toBeNull();
+        });
+    });
+});