@nuraly/runtime 0.1.7 → 0.1.8

package/micro-app/README.md

@@ -114,7 +114,7 @@ Vars['app.selectedFile'] = '/src/App.tsx'
 Vars['global.userName'] = 'John Doe'
 
 // Auto-resolution (searches local → app → global)
-const userName = Vars.userName
+const userName = $userName
 
 // Publish local variable to higher scope
 ExecuteInstance.publishToApp('tempData')
@@ -219,7 +219,7 @@ const result = executor.executeHandler(
 
 // Execute expression
 const value = executor.executeExpression(
-  'Vars.userName + " - " + Current.name',
+  '$userName + " - " + Current.name',
   component
 )
 
@@ -301,7 +301,7 @@ From within handler code in an isolated micro-app:
 
 ```javascript
 // Access variables (with scope resolution)
-Vars.myLocalVar = 'value'
+$myLocalVar = 'value'
 const sharedVar = Vars['app.sharedData']
 const globalVar = Vars['global.userName']
 
@@ -330,8 +330,8 @@ sendMessage({
 
 ```javascript
 // In Files micro-app
-Vars.currentFile = '/src/App.tsx'  // Local scope
-Vars.selectedFiles = [...]          // Local scope
+$currentFile = '/src/App.tsx'  // Local scope
+$selectedFiles = [...]          // Local scope
 
 // NOT accessible in Functions micro-app
 ```
@@ -340,11 +340,11 @@ Vars.selectedFiles = [...]          // Local scope
 
 ```javascript
 // In Files micro-app
-Vars.currentFile = '/src/App.tsx'
+$currentFile = '/src/App.tsx'
 ExecuteInstance.publishToApp('currentFile')
 
 // In Functions micro-app - now accessible
-const file = Vars['app.currentFile']  // or Vars.currentFile (auto-resolves)
+const file = Vars['app.currentFile']  // or $currentFile (auto-resolves)
 console.log('Editing file:', file)
 ```
 
@@ -359,7 +359,7 @@ Vars['global.isAuthenticated'] = true
 // Accessible in ALL apps and micro-apps
 const userName = Vars['global.userName']
 // or
-const userName = Vars.userName  // Auto-resolves to global
+const userName = $userName  // Auto-resolves to global
 ```
 
 ### Example 4: Explicit Scope Access
@@ -371,7 +371,7 @@ const appValue = Vars['app.selectedFile']
 const globalValue = Vars['global.userName']
 
 // Auto-resolution priority: local → app → global
-const value = Vars.someVar
+const value = $someVar
 // Searches local first, then app, then global
 ```
 
@@ -474,7 +474,7 @@ const components = this.storeContext.getComponents()
 this.runtimeContext.VarsProxy.myVar = 'value'
 
 // Or in handler code (automatic)
-Vars.myVar = 'value'  // Uses isolated context
+$myVar = 'value'  // Uses isolated context
 ```
 
 ### Enabling Isolated Context

package/micro-app/state/MicroAppRuntimeContext.ts

@@ -12,8 +12,6 @@ import { VariableScope } from './VariableScopeManager'
 import { eventDispatcher } from '../../utils/change-detection'
 import { RuntimeContextHelpers } from '../../utils/RuntimeContextHelpers'
 
-const DEBUG = false
-
 export class MicroAppRuntimeContext {
   // Store context reference
   private storeContext: MicroAppStoreContext
@@ -64,18 +62,10 @@ export class MicroAppRuntimeContext {
 
     return new Proxy(this.Vars, {
       get(target, prop: string) {
-        if (DEBUG) {
-          console.log(`[MicroApp ${self.eventNamespace}] Getting var: ${String(prop)}`)
-        }
-
         // Use scope manager for variable access
         return scopeManager.get(String(prop))
       },
       set(target, prop: string, value) {
-        if (DEBUG) {
-          console.log(`[MicroApp ${self.eventNamespace}] Setting var: ${String(prop)} = ${value}`)
-        }
-
         const oldValue = scopeManager.get(String(prop))
 
         // Parse to determine target scope (check if prop starts with 'global.' or 'local.')
@@ -108,7 +98,6 @@ export class MicroAppRuntimeContext {
 
           // For GLOBAL variables, emit a global event that all micro-apps can listen to
           if (targetScope === VariableScope.GLOBAL) {
-            console.log(`[MicroApp ${self.eventNamespace}] Emitting global variable change: ${propStr}`)
             eventDispatcher.emit('global:variable:changed', {
               varName: propStr, // Use full prop name with 'global.' prefix
               name: varName, // Just the variable name without prefix
@@ -155,8 +144,7 @@ export class MicroAppRuntimeContext {
             ctx: this.Current
           })
         })
-      },
-      debug: DEBUG
+      }
     })
   }
 
@@ -173,11 +161,8 @@ export class MicroAppRuntimeContext {
     // Subscribe to generic GLOBAL variable change events (emitted by any micro-app)
     // This ensures that when one micro-app changes a global variable, all micro-apps update
     const globalVarUnsub = eventDispatcher.on('global:variable:changed', (data: any) => {
-      console.log(`[MicroApp ${this.eventNamespace}] Received global variable change: ${data.varName} = ${data.value}`)
-
       // Trigger component input refresh for all components in this micro-app
       const components = this.storeContext.getComponents()
-      console.log(`[MicroApp ${this.eventNamespace}] Refreshing ${components.length} components`)
 
       components.forEach((component: any) => {
         eventDispatcher.emit(`component-input-refresh-request:${component.uuid}`, {
@@ -202,10 +187,6 @@ export class MicroAppRuntimeContext {
     const appUUID = this.storeContext.appUUID
     const runtimeValues = this.storeContext.$runtimeValues.get()
 
-    if (DEBUG) {
-      console.log(`[MicroApp ${this.eventNamespace}] Registering ${components.length} components`)
-    }
-
     // Initialize registry for this app
     if (!this.applications[appUUID]) {
       this.applications[appUUID] = {}
@@ -255,10 +236,6 @@ export class MicroAppRuntimeContext {
         })
       }
     })
-
-    if (DEBUG) {
-      console.log(`[MicroApp ${this.eventNamespace}] Registration complete`)
-    }
   }
 
   /**
@@ -415,9 +392,5 @@ export class MicroAppRuntimeContext {
     this.styleProxyCache = new WeakMap()
     this.valuesProxyCache = new WeakMap()
     this.listeners = {}
-
-    if (DEBUG) {
-      console.log(`[MicroApp ${this.eventNamespace}] Cleaned up`)
-    }
   }
 }

package/micro-app-entry.ts

@@ -26,9 +26,4 @@ export { MicroAppMessageBus } from './micro-app/messaging/MicroAppMessageBus';
 if (typeof window !== 'undefined') {
   // Touch the class to ensure it's not tree-shaken
   void MicroApp;
-
-  console.log('[MicroApp Bundle] Loaded. MicroApp registered:', customElements.get('micro-app') !== undefined);
-  console.log('[MicroApp Bundle] ButtonBlock registered:', customElements.get('button-block') !== undefined);
-  console.log('[MicroApp Bundle] TextLabelBlock registered:', customElements.get('text-label-block') !== undefined);
-  console.log('[MicroApp Bundle] Container registered:', customElements.get('vertical-container-block') !== undefined);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuraly/runtime",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Nuraly Visual App Builder Runtime - State management, handler execution, and component system with bundled micro-app support",
   "type": "module",
   "main": "./index.ts",
@@ -91,6 +91,24 @@
     "build:all": "npm run build && npm run build:bundle",
     "prepublishOnly": "npm run build:all"
   },
+  "devDependencies": {
+    "vite": "^5.0.0",
+    "typescript": "^5.0.0",
+    "@vitejs/plugin-legacy": "^5.0.0",
+    "monaco-editor": "^0.52.0",
+    "monacopilot": "^0.12.0"
+  },
+  "dependencies": {
+    "lit": "^3.0.0",
+    "nanostores": "^0.10.0",
+    "@nanostores/persistent": "^0.10.0",
+    "rxjs": "^7.0.0",
+    "immer": "^10.0.0",
+    "fast-deep-equal": "^3.1.3",
+    "uuid": "^9.0.0",
+    "acorn": "^8.11.0",
+    "acorn-walk": "^8.3.0"
+  },
   "peerDependencies": {
     "lit": "^3.0.0",
     "nanostores": "^0.10.0",

package/redux/actions/application/index.ts

@@ -9,7 +9,6 @@
 export { addPageToApplicationAction } from './addPageToApplicationAction';
 export { addTempApplication } from './addTempApplication';
 export { closeShareApplicationModalAction } from './closeShareApplicationModalAction';
-export { loadApplicationPermissionAction } from './loadApplicationPermissionAction';
 export { resetPermissionMessage } from './resetPermissionMessage';
 export { setApplication } from './setApplication';
 export { setApplicationPermissionAction } from './setApplicationPermissionAction';

package/redux/actions/component/addComponentAction.ts

@@ -29,11 +29,19 @@ export const addComponentAction = (
     childrenIds: component.childrenIds ?? [], // Initialize childrenIds if necessary
   };
 
+  // Container types that can have children
+  const containerTypes = [
+    ComponentType.Container,
+    ComponentType.Collection,
+    ComponentType.Link,
+    ComponentType.GridRow,
+    ComponentType.GridCol,
+    ComponentType.Form,
+  ];
+
   if (
     !currentComponentId ||
-    (currentComponent?.component_type !== ComponentType.Container &&
-      currentComponent?.component_type !== ComponentType.Collection&&
-      currentComponent?.component_type !== ComponentType.Link)
+    !containerTypes.includes(currentComponent?.component_type)
   ) {
     newComponent.root = true;
   }
@@ -43,7 +51,10 @@ export const addComponentAction = (
       currentComponent?.component_type === ComponentType.Container ||
       currentComponent?.component_type === ComponentType.Dropdown ||
       currentComponent?.component_type === ComponentType.Link ||
-      currentComponent?.component_type === ComponentType.Collection
+      currentComponent?.component_type === ComponentType.Collection ||
+      currentComponent?.component_type === ComponentType.GridRow ||
+      currentComponent?.component_type === ComponentType.GridCol ||
+      currentComponent?.component_type === ComponentType.Form
     ) {
       // Add as child of the current component
       //addComponentAsChildOf(componentId, currentComponentId, currentApplicationId);

package/redux/actions/component/moveDraggedComponent.ts

@@ -125,6 +125,5 @@ export function moveDraggedComponent(
   $components.setKey(appUUID, components);
   updatePageAction(page, appUUID);
   updatePageHandler(page);
-    eventDispatcher.emit("component:refresh");
-  console.log(`Moved ${draggedComponent.uuid} to ${position} ${dropInComponentId}`, draggedComponent);
+  eventDispatcher.emit("component:refresh");
 }

package/redux/actions/component/update-component-name.ts

@@ -53,7 +53,7 @@ export function updateComponentName(
       });
 
       // Trigger a refresh event for any listeners - ONLY when actual update occurred
-      eventDispatcher.emit("component:updated");
+      eventDispatcher.emit("component:updated", { uuid: componentId });
       refreshPageStoreVar()
     } else {
       // No update needed, log a message or handle accordingly

package/redux/actions/component/updateComponentAttributes.ts

@@ -83,7 +83,12 @@ export function updateComponentAttributes(
       };
 
       // SECOND: Apply the updates directly to the component
-      if ((updateType === "style" || (updateType === "input" && updatedAttributes.type !=="handler")) && currentPlatform.platform !== "desktop") {
+      //@todo: need more tests here.
+      // Check if any of the updated attributes is a handler (nested: { propName: { type: 'handler', value: '...' } })
+      const hasHandlerAttribute = updateType === "input" &&
+        Object.values(updatedAttributes).some((attr: any) => attr && typeof attr === 'object' && attr.type === 'handler');
+
+      if ((updateType === "style" || (updateType === "input" && !hasHandlerAttribute)) && currentPlatform.platform !== "desktop") {
         // Initialize breakpoints if not already
         componentToUpdate.breakpoints = componentToUpdate.breakpoints || {};
         componentToUpdate.breakpoints[currentPlatform.width] =
@@ -182,7 +187,7 @@ export function updateComponentAttributes(
       }
 
       // Trigger a refresh event for any listeners - ONLY when actual update occurred
-      eventDispatcher.emit("component:updated");
+      eventDispatcher.emit("component:updated", { uuid: componentId });
       eventDispatcher.emit(`component-updated:${String(componentId)}`);
     } else {
       // No update needed

package/redux/handlers/functions/build-function-handler.ts

@@ -1,10 +1,18 @@
 import { FRONT_API_URLS } from '../api-urls';
 
-export const buildFunctionHandler = (functionId:any) => {
-  return fetch(`${FRONT_API_URLS.FUNCTIONS}/build/${functionId}`, {
+export const buildFunctionHandler = async (functionId: any) => {
+  const response = await fetch(`${FRONT_API_URLS.FUNCTIONS}/build/${functionId}`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json"
     },
-  })
+    credentials: "include",
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(errorText || `Build failed with status ${response.status}`);
+  }
+
+  return response;
 };

package/redux/handlers/functions/deploy-function-handler.ts

@@ -1,10 +1,18 @@
 import { FRONT_API_URLS } from '../api-urls';
 
-export const deployFunctionHandler = (functionId:any) => {
-  return fetch(`${FRONT_API_URLS.FUNCTIONS}/deploy/${functionId}`, {
+export const deployFunctionHandler = async (functionId: any) => {
+  const response = await fetch(`${FRONT_API_URLS.FUNCTIONS}/deploy/${functionId}`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json"
     },
-  })
+    credentials: "include",
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(errorText || `Deploy failed with status ${response.status}`);
+  }
+
+  return response;
 };

package/redux/handlers/functions/invoke-function-handler.ts

@@ -1,13 +1,21 @@
 import { FRONT_API_URLS } from '../api-urls';
 
-export const invokeFunctionHandler = (functionId:any, data) => {
-  return fetch(`${FRONT_API_URLS.FUNCTIONS}/invoke/${functionId}`, {
+export const invokeFunctionHandler = async (functionId: any, data: any) => {
+  const response = await fetch(`${FRONT_API_URLS.FUNCTIONS}/invoke/${functionId}`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json"
     },
+    credentials: "include",
     body: JSON.stringify({
       data
     })
-  })
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(errorText || `Invoke failed with status ${response.status}`);
+  }
+
+  return response;
 };

package/redux/handlers/functions/load-functions-handler.ts

@@ -6,5 +6,6 @@ export const loadFunctionsHandler = async () => {
     headers: {
       "Content-Type": "application/json"
     },
-  }).then(res=>res.json())
+    credentials: "include",
+  }).then(res => res.json())
 };

package/redux/handlers/functions/update-function-handler.ts

@@ -6,8 +6,9 @@ export const updateFunctionHandler = (functionElement:any) => {
     headers: {
       "Content-Type": "application/json"
     },
+    credentials: "include",
     body: JSON.stringify({
-  ...functionElement
+      ...functionElement
     })
   })
 };

package/redux/store/component/component.interface.ts

@@ -49,6 +49,13 @@ export const enum ComponentType {
   Modal = "Modal",
   Toast = "Toast",
   Panel = "Panel",
+  GridRow = "grid-row-block",
+  GridCol = "grid-col-block",
+  Form = "form",
+  ValidationRules = "validation_rules",
+  BorderManager = "border_manager",
+  AccessRoles = "access_roles",
+  FunctionsPanel = "FunctionsPanel",
 }
 
 export interface DraggingComponentInfo {
@@ -65,11 +72,10 @@ export interface ComponentElement {
   values?: any;
   uuid: string;
   name: string;
-  component_type: ComponentType;
+  component_type: ComponentType | string;  // Allow string for custom component types
   style?: { [key: string]: string };
   breakpoints?: any;
   styleHandlers: { [key: string]: string };
-  inputHandlers: { [key: string]: string };
   parameters?: { [key: string]: string };
   event?: { [key: string]: string };
   input?: { [key: string]: any };

package/redux/store/component/store.ts

@@ -13,7 +13,7 @@ const isServer = typeof window === "undefined";
 const initialStates = isServer ? [] : JSON.parse(window["__INITIAL_COMPONENT_STATE__"] ?? "[]");
 
 // Initialize with empty object
-const initialState: ComponentStore = isServer ? {} : {};
+const initialState: ComponentStore = {};
 
 if (currentLoadedApplication) {
   initialState[currentLoadedApplication.uuid] = initialStates;
@@ -113,14 +113,11 @@ export const setComponentRuntimeValue = (componentId: string, key: string, value
   if (!componentId) {
     console.error('Cannot set runtime value: componentId is undefined');
     return;
-  }else{
-    console.log('setComponentRuntimeValue', componentId, key, value)
   }
   $runtimeValues.setKey(componentId, {
     ...$runtimeValues.get()[componentId],
     [key]: value
   });
-  console.log( $runtimeValues.get()[componentId])
   
   // Emit an event to notify subscribers about the change
   eventDispatcher.emit('component:value:change', {

package/state/runtime-context.ts

@@ -191,19 +191,6 @@ import { executeHandler } from "../handlers/handler-executor";
 import type { IRuntimeContext } from "../types/IRuntimeContext";
 import { RuntimeContextHelpers } from "../utils/RuntimeContextHelpers";
 
-/**
- * Debug flag for verbose logging.
- * Set to `true` to enable detailed console logs for:
- * - Property access and mutations
- * - Proxy creation and caching
- * - Component registration steps
- * - Event emissions
- * 
- * @constant
- * @type {boolean}
- * @default false
- */
-const DEBUG = false;
 
 /**
  * @class RuntimeContext
@@ -430,10 +417,6 @@ class RuntimeContext implements IRuntimeContext {
     $components.subscribe(() => this.registerApplications());
     eventDispatcher.on("component:refresh", () => this.registerApplications())
     eventDispatcher.on("component:updated", () => this.registerApplications())
-
-    if (DEBUG) {
-      console.log("Executor initialized with debug mode enabled.");
-    }
   }
 
   /**
@@ -476,9 +459,6 @@ class RuntimeContext implements IRuntimeContext {
         // IMPORTANT: Emit global variable change events for micro-apps to listen to
         // This ensures that when global RuntimeContext changes a variable, all micro-apps are notified
         if (scope === 'Vars') {
-          if (DEBUG) {
-            console.log(`[RuntimeContext] Emitting global variable change: ${prop} = ${value}`);
-          }
           eventDispatcher.emit('global:variable:changed', {
             varName: prop,
             name: prop,
@@ -486,8 +466,7 @@ class RuntimeContext implements IRuntimeContext {
             oldValue: undefined // Global context doesn't track oldValue
           });
         }
-      },
-      debug: DEBUG
+      }
     });
   }
 
@@ -569,7 +548,6 @@ class RuntimeContext implements IRuntimeContext {
     const proxy = new Proxy(target, {
       set(obj, prop: any, value) {
         if (obj[prop] !== value) {
-          console.log(`Style property changed: ${prop} = ${value}`);
           callback(prop, value);
         }
         obj[prop] = value;