cache compiled global scripts to cut per-binding overhead

Author: anserwaseem

apps/kitchen-sink/src/ensemble/screens/forms.yaml

@@ -588,3 +588,6 @@ Global: |
       }]
     }
   }
+  const sayHello = () => {
+    window.alert("hello world!");
+  };

apps/kitchen-sink/src/ensemble/screens/home.yaml

@@ -56,6 +56,7 @@ View:
             onTap:
               executeCode: |
                 // Calls a function defined in test.js
+                debugger;
                 sayHello();
 
         - Button:
@@ -402,7 +403,7 @@ View:
                 onResponse:
                   executeCode: |
                     ensemble.storage.set('email', response.body.results[0].email)
-                    ensemble.storage.set('emails', [...ensemble.storage.get("emails"),response.body.results[0].email])
+                    ensemble.storage.set('emails', [...(ensemble.storage.get("emails") || []),response.body.results[0].email])
                     console.log('getData', response.body.results[0].email, ensemble.storage.get('emails'));
         - Column:
             item-template:
@@ -463,7 +464,7 @@ View:
             data: ${ensemble.storage.get('products')}
             onSearch:
               executeCode: |
-                ensemble.invokeAPI('getProducts', { search: search }).then((res) => {
+                ensemble.invokeAPI('getProducts', { search }).then((res) => {
                   const users = res?.body?.users || [];
                   console.log(users , "users");
                   const newUsers = users.map((i) => ({ ...i, label: i.firstName + ' ' + i.lastName, name: i.firstName + ' ' + i.lastName, value: i.email }));
@@ -473,7 +474,7 @@ View:
                 console.log("onSearch values: ", search);
             onChange:
               executeCode: |
-                console.log("onChange values: ", search);
+                console.log("onChange values: ", value);
 
 Global:
   scriptName: test.js

packages/framework/src/evaluate/evaluate.ts

@@ -1,4 +1,5 @@
 import { isEmpty, merge, toString } from "lodash-es";
+import { parse as acornParse } from "acorn";
 import type { ScreenContextDefinition } from "../state/screen";
 import type { InvokableMethods, WidgetState } from "../state/widget";
 import {
@@ -9,6 +10,73 @@ import {
   replace,
 } from "../shared";
 
+/**
+ * Cache of compiled global / imported scripts keyed by the full script string.
+ * Each entry stores the symbol names and their corresponding values so that we
+ * can inject them as parameters when evaluating bindings, removing the need to
+ * re-parse the same script for every binding.
+ */
+interface CachedScriptEntry {
+  symbols: string[];
+  // compiled function that, given a context, returns an object of exports
+  fn: (ctx: { [key: string]: unknown }) => { [key: string]: unknown };
+}
+
+const globalScriptCache = new Map<string, CachedScriptEntry>();
+
+const parseScriptSymbols = (script: string): string[] => {
+  const symbols = new Set<string>();
+  try {
+    const ast: any = acornParse(script, {
+      ecmaVersion: 2020,
+      sourceType: "script",
+    });
+
+    ast.body?.forEach((node: any) => {
+      if (node.type === "FunctionDeclaration" && node.id) {
+        symbols.add(node.id.name);
+      }
+      if (node.type === "VariableDeclaration") {
+        node.declarations.forEach((decl: any) => {
+          if (decl.id?.type === "Identifier") {
+            symbols.add(decl.id.name);
+          }
+        });
+      }
+    });
+  } catch (e) {
+    debug(e);
+  }
+  return Array.from(symbols);
+};
+
+const getCachedGlobals = (
+  script: string,
+  ctx: { [key: string]: unknown },
+): { symbols: string[]; values: unknown[] } => {
+  if (isEmpty(script.trim())) return { symbols: [], values: [] };
+
+  let entry = globalScriptCache.get(script);
+  if (!entry) {
+    const symbols = parseScriptSymbols(script);
+
+    // build a function that executes the script within the provided context using `with`
+    // and returns an object containing the exported symbols
+    // eslint-disable-next-line @typescript-eslint/no-implied-eval, no-new-func
+    const compiled = new Function(
+      "ctx",
+      `with (ctx) {\n${script}\nreturn { ${symbols.join(", ")} };\n}`,
+    ) as CachedScriptEntry["fn"];
+
+    entry = { symbols, fn: compiled };
+    globalScriptCache.set(script, entry);
+  }
+
+  const exportsObj = entry.fn(ctx);
+  const values = entry.symbols.map((name) => exportsObj[name]);
+  return { symbols: entry.symbols, values };
+};
+
 export const widgetStatesToInvokables = (widgets: {
   [key: string]: WidgetState | undefined;
 }): [string, InvokableMethods | undefined][] => {
@@ -38,17 +106,23 @@ export const buildEvaluateFn = (
       // Need to filter out invalid JS identifiers
     ].filter(([key, _]) => !key.includes(".")),
   );
-  const globalBlock = screen.model?.global;
-  const importedScriptBlock = screen.model?.importedScripts;
+  const globalBlock = screen.model?.global ?? "";
+  const importedScriptBlock = screen.model?.importedScripts ?? "";
+  const combinedScript = `${importedScriptBlock}\n${globalBlock}`;
+
+  const { symbols: globalSymbols, values: globalValues } = getCachedGlobals(
+    combinedScript,
+    merge({}, context, invokableObj),
+  );
 
   // eslint-disable-next-line @typescript-eslint/no-implied-eval, no-new-func
   const jsFunc = new Function(
     ...Object.keys(invokableObj),
-    addScriptBlock(formatJs(js), globalBlock, importedScriptBlock),
+    ...globalSymbols,
+    formatJs(js),
   );
 
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-  return () => jsFunc(...Object.values(invokableObj));
+  return () => jsFunc(...Object.values(invokableObj), ...globalValues);
 };
 
 const formatJs = (js?: string): string => {
@@ -96,24 +170,6 @@ const formatJs = (js?: string): string => {
   return `return ${sanitizedJs}`;
 };
 
-const addScriptBlock = (
-  js: string,
-  globalBlock?: string,
-  importedScriptBlock?: string,
-): string => {
-  let jsString = ``;
-
-  if (importedScriptBlock) {
-    jsString += `${importedScriptBlock}\n\n`;
-  }
-
-  if (globalBlock) {
-    jsString += `${globalBlock}\n\n`;
-  }
-
-  return (jsString += `${js}`);
-};
-
 /**
  * @deprecated Consider using useEvaluate or createBinding which will
  * optimize creating the evaluation context