feat: implement importing scripts into ViewGroup (#1070)

Author: justEhmadSaeed

.changeset/wise-cats-melt.md

@@ -0,0 +1,7 @@
+---
+"@ensembleui/react-framework": patch
+"@ensembleui/react-kitchen-sink": patch
+"@ensembleui/react-runtime": patch
+---
+
+feat: allow scripts import into ViewGroup

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

@@ -1,3 +1,5 @@
+Import:
+  - common
 ViewGroup:
   SideBar:
     id: sidebar
@@ -29,7 +31,7 @@ ViewGroup:
               padding: 20px 0
               source: /logo.svg
     items:
-      - label: Home
+      - label: ${getHomeWidgetLabel()}
         icon: HomeOutlined
         page: home
         selected: true

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

@@ -2,4 +2,7 @@ const productTitleName = "SgrDvr";
 
 const getDateLabel = (val) => {
   return `i am a date label ${val}`
+}
+const getHomeWidgetLabel = () => {
+  return 'Home';
 }

packages/framework/src/hooks/useScreenContext.tsx

@@ -24,7 +24,7 @@ import { CustomThemeContext } from "./useThemeContext";
 import { useDeviceObserver } from "./useDeviceObserver";
 
 interface ScreenContextProps {
-  screen: EnsembleScreenModel;
+  screen: Partial<EnsembleScreenModel>;
   context?: Partial<ScreenContextDefinition>;
 }
 

packages/framework/src/parser.ts

@@ -87,7 +87,9 @@ export const EnsembleParser = {
       const screen = parse(yaml) as EnsembleScreenYAML;
       const viewGroup = get(screen, "ViewGroup");
       if (viewGroup) {
-        return EnsembleParser.parseMenu(viewGroup);
+        // add Import block to the viewGroup
+        set(viewGroup, "Import", get(screen, "Import"));
+        return EnsembleParser.parseMenu(viewGroup, app);
       }
 
       const pageScreen = EnsembleParser.parseScreen(id, name, screen, app);
@@ -255,7 +257,7 @@ export const EnsembleParser = {
       global,
       header: unwrapHeader(header),
       footer: unwrapFooter(footer),
-      menu: menu ? EnsembleParser.parseMenu(menu) : undefined,
+      menu: menu ? EnsembleParser.parseMenu(menu, app) : undefined,
       body: viewWidget,
       apis,
       styles: get(view, "styles"),
@@ -293,7 +295,7 @@ export const EnsembleParser = {
     };
   },
 
-  parseMenu: (menu: object): EnsembleMenuModel => {
+  parseMenu: (menu: object, app: ApplicationDTO): EnsembleMenuModel => {
     const menuType = head(Object.keys(menu));
     if (!menuType || !includes(["SideBar", "Drawer"], String(menuType))) {
       throw Error("Invalid ViewGroup definition: invalid menu type");
@@ -305,13 +307,30 @@ export const EnsembleParser = {
     const footerDef = get(menu, [menuType, "footer"]) as
       | { [key: string]: unknown }
       | undefined;
+
+    // handle import block
+    const importBlock = get(menu, "Import") as unknown[] | undefined;
+    let importedScripts: string | undefined;
+    if (isArray(importBlock)) {
+      const matchingScripts = filter(app.scripts, (script) =>
+        includes(importBlock, script.name),
+      );
+      if (!isEmpty(matchingScripts)) {
+        importedScripts = matchingScripts.reduce(
+          (acc, script) => acc.concat(script.content, "\n\n"),
+          "",
+        );
+      }
+    }
+
     return {
       id: get(menu, [menuType, "id"]) as string | undefined,
       type: menuType as EnsembleMenuModelType,
       items: (get(menu, [menuType, "items"]) as []) ?? [],
       header: headerDef ? unwrapWidget(headerDef) : undefined,
       footer: footerDef ? unwrapWidget(footerDef) : undefined,
       styles: get(menu, [menuType, "styles"]) as { [key: string]: unknown },
+      importedScripts,
     };
   },
 };

packages/framework/src/shared/models.ts

@@ -56,6 +56,7 @@ export interface EnsembleMenuModel {
   header?: EnsembleWidget;
   footer?: EnsembleWidget;
   styles: { [key: string]: unknown };
+  importedScripts?: string;
 }
 
 export enum EnsembleMenuModelType {

packages/runtime/src/runtime/entry.tsx

@@ -1,4 +1,5 @@
 import {
+  ScreenContextProvider,
   type EnsembleEntryPoint,
   type EnsembleScreenModel,
 } from "@ensembleui/react-framework";
@@ -50,7 +51,16 @@ export const EnsembleEntry: React.FC<EnsembleEntryProps> = ({
 
   if (hasMenu) {
     const { type: menuType, ...menu } = entry;
-    return <EnsembleMenu type={menuType} menu={menu} />;
+    const screen = {
+      id: entry.id,
+      name: entry.id,
+      importedScripts: menu.importedScripts,
+    };
+    return (
+      <ScreenContextProvider screen={screen}>
+        <EnsembleMenu menu={menu} type={menuType} />
+      </ScreenContextProvider>
+    );
   }
 
   if (location.pathname !== "/") {

packages/runtime/src/runtime/menu.tsx

@@ -72,6 +72,7 @@ interface MenuBaseProps<T> {
   header?: EnsembleWidget;
   footer?: EnsembleWidget;
   onCollapse?: EnsembleAction;
+  importedScripts?: string;
 }
 
 interface MenuStyles {