add the global and imported scripts to the document per screen

Author: anserwaseem

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

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

packages/framework/src/hooks/useScreenContext.tsx

@@ -1,6 +1,6 @@
 import { Provider, useAtom, useAtomValue, useSetAtom } from "jotai";
-import { useCallback, useContext } from "react";
-import { clone, merge } from "lodash-es";
+import { useCallback, useContext, useEffect } from "react";
+import { clone, isEmpty, merge } from "lodash-es";
 import { useHydrateAtoms } from "jotai/utils";
 import {
   appAtom,
@@ -30,6 +30,24 @@ interface ScreenContextProps {
 
 type ScreenContextProviderProps = React.PropsWithChildren<ScreenContextProps>;
 
+const transformScriptContent = (scriptContent: string): string => {
+  if (isEmpty(scriptContent.trim())) {
+    return "";
+  }
+  let transformed = scriptContent;
+  // 1. Replace 'const VAR = ...' and 'let VAR = ...' with 'window.VAR = ...'
+  transformed = transformed.replace(
+    /(^|\n)(const|let)\s+([a-zA-Z_$][a-zA-Z0-9_$]*)\s*=/g,
+    "$1window.$3 =",
+  );
+  // 2. Replace 'function FUNC_NAME(...){...}' with 'window.FUNC_NAME = function(...){...}'
+  transformed = transformed.replace(
+    /(^|\n)function\s+([a-zA-Z_$][a-zA-Z0-9_$]*)\s*(\([^)]*\))\s*\{/g,
+    "$1window.$2 = function$3 {",
+  );
+  return transformed;
+};
+
 export const ScreenContextProvider: React.FC<ScreenContextProviderProps> = ({
   screen,
   context,
@@ -42,6 +60,37 @@ export const ScreenContextProvider: React.FC<ScreenContextProviderProps> = ({
     throw new Error("Missing application context for screen!");
   }
 
+  useEffect(() => {
+    const screenInstanceId = screen.name || screen.id || "anonymous-screen";
+    const scriptId = `ensemble-screen-script-${screenInstanceId.replace(/[^a-zA-Z0-9]/g, "-")}`;
+    let existingScript = document.getElementById(scriptId);
+
+    const globalScriptContent = screen.global || "";
+    const importedScriptContent = screen.importedScripts || "";
+    let fullScriptContent = `${importedScriptContent}\n\n${globalScriptContent}`;
+
+    fullScriptContent = transformScriptContent(fullScriptContent);
+
+    if (!isEmpty(fullScriptContent.trim())) {
+      if (existingScript) {
+        existingScript.remove();
+      }
+
+      const scriptElement = document.createElement("script");
+      scriptElement.id = scriptId;
+      scriptElement.textContent = fullScriptContent;
+      document.head.appendChild(scriptElement);
+
+      existingScript = scriptElement;
+    }
+
+    return () => {
+      if (existingScript) {
+        existingScript.remove();
+      }
+    };
+  }, [screen.global, screen.importedScripts, screen.name, screen.id]);
+
   return (
     <Provider key={screen.name}>
       <HydrateAtoms