fix: add global or import scripts into DOM

apps/kitchen-sink/src/ensemble/scripts/common.js

@@ -1,5 +1,5 @@
 const productTitleName = "SgrDvr";
 
-const getDateLabel = (val) => {
-  return `i am a date label ${val}`
-}
+getDateLabel = (val) => {
+  return `i am a date label ${val}`;
+};

packages/framework/src/evaluate/evaluate.ts

@@ -38,14 +38,17 @@ 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 args = Object.keys(invokableObj).join(",");
+
+  const combinedJs = `
+      return myScreenScope(() => {
+        ${formatJs(js)};
+      }, {${args}});
+  `;
 
   // eslint-disable-next-line @typescript-eslint/no-implied-eval, no-new-func
-  const jsFunc = new Function(
-    ...Object.keys(invokableObj),
-    addScriptBlock(formatJs(js), globalBlock, importedScriptBlock),
-  );
+  const jsFunc = new Function(...Object.keys(invokableObj), combinedJs);
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-return
   return () => jsFunc(...Object.values(invokableObj));
@@ -80,24 +83,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

packages/runtime/src/runtime/screen.tsx

@@ -91,6 +91,35 @@ export const EnsembleScreen: React.FC<EnsembleScreenProps> = ({
     };
   }, [screen.customWidgets]);
 
+  useEffect(() => {
+    const globalBlock = screen.global;
+    const importedScripts = screen.importedScripts;
+
+    const isScriptExist = document.getElementById("custom-scope-script");
+
+    const jsString = `
+      const myScreenScope = function(scriptToExecute, context) {
+        with (context) {
+          ${importedScripts || ""}
+          ${globalBlock || ""}
+
+          return eval('(' + scriptToExecute.toString() + ')()');
+        }    
+      }
+    `;
+
+    if (isScriptExist) {
+      isScriptExist.textContent = jsString;
+    } else {
+      const script = document.createElement("script");
+      script.id = "custom-scope-script";
+      script.type = "text/javascript";
+      script.textContent = jsString;
+
+      document.body.appendChild(script);
+    }
+  }, [screen.global, screen.importedScripts]);
+
   if (!isInitialized) {
     return null;
   }