@nuraly/runtime 0.1.7 → 0.1.9

package/utils/RuntimeContextHelpers.ts

@@ -22,6 +22,59 @@ import deepEqual from 'fast-deep-equal';
 import { eventDispatcher } from './change-detection';
 import type { ComponentElement } from '../redux/store/component/component.interface';
 
+// ============================================================================
+// Helper Functions (extracted to reduce duplication)
+// ============================================================================
+
+/**
+ * Safely compare two values for equality, handling proxy objects.
+ */
+function safeDeepEqual(oldValue: any, newValue: any): boolean {
+  try {
+    return deepEqual(oldValue, newValue);
+  } catch {
+    // If deepEqual fails (e.g., comparing proxies), assume values are different
+    return false;
+  }
+}
+
+/**
+ * Build a scoped event name with optional prefix.
+ */
+function buildEventName(eventPrefix: string, eventType: string, suffix?: string): string {
+  const base = eventPrefix ? `${eventPrefix}:${eventType}` : eventType;
+  return suffix ? `${base}:${suffix}` : base;
+}
+
+/**
+ * Emit property change events to all listeners.
+ */
+function emitToListeners(
+  listeners: Set<string>,
+  eventPrefix: string,
+  prop: string,
+  data: Record<string, any>
+): void {
+  listeners.forEach((componentName: string) => {
+    const eventName = buildEventName(eventPrefix, 'component-property-changed', componentName);
+    eventDispatcher.emit(eventName, { prop, ...data });
+  });
+}
+
+/**
+ * Emit scope-specific event if scope is provided.
+ */
+function emitScopeEvent(
+  scope: string | undefined,
+  eventPrefix: string,
+  propPath: string,
+  data: Record<string, any>
+): void {
+  if (!scope) return;
+  const eventName = buildEventName(eventPrefix, scope, propPath);
+  eventDispatcher.emit(eventName, data);
+}
+
 /**
  * Configuration for reactive proxy creation
  */
@@ -41,8 +94,6 @@ export interface ReactiveProxyConfig {
   /** Callback when property changes */
   onPropertyChange: (prop: string, value: any, listeners: Set<string>) => void;
 
-  /** Optional debug mode */
-  debug?: boolean;
 }
 
 /**
@@ -110,7 +161,7 @@ export class RuntimeContextHelpers {
     target: T,
     config: ReactiveProxyConfig
   ): T {
-    const { eventPrefix, scope, listeners, current, onPropertyChange, debug = false } = config;
+    const { eventPrefix, scope, listeners, current, onPropertyChange } = config;
 
     if (typeof target !== 'object' || target === null) {
       return target;
@@ -118,11 +169,6 @@ export class RuntimeContextHelpers {
 
     return new Proxy(target, {
       get(proxyTarget, prop, receiver) {
-        if (debug) {
-          const prefix = eventPrefix ? `[${eventPrefix}]` : '[Global]';
-          console.log(`${prefix} Accessing property '${String(prop)}'`);
-        }
-
         const value = Reflect.get(proxyTarget, prop, receiver);
 
         // Track listener for this property
@@ -134,14 +180,22 @@ export class RuntimeContextHelpers {
           listeners[String(prop)].add(current.name);
         }
 
-        // Create nested proxy for object values
-        if (typeof value === 'object' && value !== null) {
+        // Create nested proxy for object values (non-arrays)
+        if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
           return RuntimeContextHelpers.createNestedProxy(value, {
             ...config,
             parentProp: String(prop)
           });
         }
 
+        // Create array proxy for array values
+        if (Array.isArray(value)) {
+          return RuntimeContextHelpers.createArrayProxy(value, {
+            ...config,
+            parentProp: String(prop)
+          });
+        }
+
         return value;
       },
 
@@ -149,45 +203,18 @@ export class RuntimeContextHelpers {
         const oldValue = proxyTarget[prop as keyof T];
 
         // Guard: Don't emit events if value hasn't changed
-        // Wrap in try-catch to handle proxy objects that may not have valueOf
-        let valuesEqual = false;
-        try {
-          valuesEqual = deepEqual(oldValue, value);
-        } catch (e) {
-          // If deepEqual fails (e.g., comparing proxies), assume values are different
-          valuesEqual = false;
-        }
-
-        if (valuesEqual) {
+        if (safeDeepEqual(oldValue, value)) {
           return true;
         }
 
         const result = Reflect.set(proxyTarget, prop, value, receiver);
 
-        if (debug) {
-          const prefix = eventPrefix ? `[${eventPrefix}]` : '[Global]';
-          console.log(`${prefix} Setting property '${String(prop)}' to '${value}'`);
-        }
-
         // Emit property change events
         const propListeners = listeners[String(prop)] || new Set<string>();
         onPropertyChange(String(prop), value, propListeners);
 
         // Emit scope-specific event if scope is provided
-        if (scope) {
-          const eventName = eventPrefix
-            ? `${eventPrefix}:${scope}:${String(prop)}`
-            : `${scope}:${String(prop)}`;
-
-          if (debug || (scope === 'Vars' && String(prop) === 'selectedComponents')) {
-            console.log(`[RuntimeContextHelpers] Emitting event: ${eventName}`, { value, ctx: current });
-          }
-
-          eventDispatcher.emit(eventName, {
-            value,
-            ctx: current // IMPORTANT: Include ctx for scope events (e.g., Vars:selectedComponents)
-          });
-        }
+        emitScopeEvent(scope, eventPrefix, String(prop), { value, ctx: current });
 
         return result;
       }
@@ -208,83 +235,187 @@ export class RuntimeContextHelpers {
     target: T,
     config: NestedProxyConfig
   ): T {
-    const { eventPrefix, scope, listeners, current, parentProp, debug = false } = config;
+    const { eventPrefix, scope, listeners, current, parentProp } = config;
 
     return new Proxy(target, {
+      get(proxyTarget, prop, receiver) {
+        const value = Reflect.get(proxyTarget, prop, receiver);
+
+        // Track listener for nested property access
+        const nestedPropKey = `${parentProp}.${String(prop)}`;
+        if (!listeners[nestedPropKey]) {
+          listeners[nestedPropKey] = new Set<string>();
+        }
+
+        if (current.name) {
+          listeners[nestedPropKey].add(current.name);
+          // Also add to parent property listeners for coarse-grained tracking
+          if (!listeners[parentProp]) {
+            listeners[parentProp] = new Set<string>();
+          }
+          listeners[parentProp].add(current.name);
+        }
+
+        // Recursively proxy deeper nested objects
+        if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+          return RuntimeContextHelpers.createNestedProxy(value, {
+            ...config,
+            parentProp: nestedPropKey
+          });
+        }
+
+        // Handle arrays with mutation tracking
+        if (Array.isArray(value)) {
+          return RuntimeContextHelpers.createArrayProxy(value, {
+            ...config,
+            parentProp: nestedPropKey
+          });
+        }
+
+        return value;
+      },
+
       set(proxyTarget, prop, value, receiver) {
         const oldValue = proxyTarget[prop as keyof T];
         const result = Reflect.set(proxyTarget, prop, value, receiver);
 
-        if (debug) {
-          const prefix = eventPrefix ? `[${eventPrefix}]` : '[Global]';
-          console.log(
-            `${prefix} Updated nested property '${String(prop)}' from '${oldValue}' to '${value}'`
-          );
-        }
+        if (!safeDeepEqual(oldValue, value)) {
+          // Emit to parent property listeners
+          const parentListeners = listeners[parentProp] || new Set<string>();
+          emitToListeners(parentListeners, eventPrefix, parentProp, { value, ctx: current });
 
-        // Check if value changed, with error handling for proxy objects
-        let valuesEqual = false;
-        try {
-          valuesEqual = deepEqual(oldValue, value);
-        } catch (e) {
-          // If deepEqual fails (e.g., comparing proxies), assume values are different
-          valuesEqual = false;
+          // Emit nested scope event if scope is provided
+          emitScopeEvent(scope, eventPrefix, `${parentProp}.${String(prop)}`, {
+            prop,
+            value,
+            oldValue,
+            parent: parentProp
+          });
         }
 
-        if (!valuesEqual) {
-          // Emit to parent property listeners
+        return result;
+      },
+
+      deleteProperty(proxyTarget, prop) {
+        const result = Reflect.deleteProperty(proxyTarget, prop);
+
+        if (result) {
           const parentListeners = listeners[parentProp] || new Set<string>();
-          parentListeners.forEach((componentName: string) => {
-            const eventName = eventPrefix
-              ? `${eventPrefix}:component-property-changed:${componentName}`
-              : `component-property-changed:${componentName}`;
+          emitToListeners(parentListeners, eventPrefix, parentProp, { ctx: current });
+        }
 
-            eventDispatcher.emit(eventName, {
-              prop: parentProp,
-              value,
+        return result;
+      }
+    });
+  }
+
+  /**
+   * Create a proxy for arrays that tracks mutation methods.
+   *
+   * Arrays need special handling because methods like push, pop, splice
+   * mutate the array without triggering the set trap.
+   *
+   * @param target - Array to wrap
+   * @param config - Configuration including parent property name
+   * @returns Reactive proxy for array
+   */
+  private static createArrayProxy<T>(
+    target: T[],
+    config: NestedProxyConfig
+  ): T[] {
+    const { eventPrefix, scope, listeners, current, parentProp } = config;
+
+    // Array mutation methods that need to trigger updates
+    const mutationMethods = new Set(['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse', 'fill', 'copyWithin']);
+
+    return new Proxy(target, {
+      get(proxyTarget, prop, receiver) {
+        const value = Reflect.get(proxyTarget, prop, receiver);
+
+        // Track access for dependency collection
+        if (current.name) {
+          if (!listeners[parentProp]) {
+            listeners[parentProp] = new Set<string>();
+          }
+          listeners[parentProp].add(current.name);
+        }
+
+        // Intercept mutation methods
+        if (typeof prop === 'string' && mutationMethods.has(prop) && typeof value === 'function') {
+          return function (this: T[], ...args: any[]) {
+            const oldArray = [...proxyTarget]; // Snapshot for comparison
+            const result = value.apply(proxyTarget, args);
+
+            // Emit change event after mutation
+            const parentListeners = listeners[parentProp] || new Set<string>();
+            emitToListeners(parentListeners, eventPrefix, parentProp, {
+              value: proxyTarget,
+              oldValue: oldArray,
+              mutation: prop,
               ctx: current
             });
-          });
 
-          // Emit nested scope event if scope is provided
-          if (scope) {
-            const eventName = eventPrefix
-              ? `${eventPrefix}:${scope}:${parentProp}.${String(prop)}`
-              : `${scope}:${parentProp}.${String(prop)}`;
-
-            eventDispatcher.emit(eventName, {
-              prop,
-              value,
-              oldValue,
-              parent: parentProp
+            // Emit scope event if scope is provided
+            emitScopeEvent(scope, eventPrefix, parentProp, {
+              prop: parentProp,
+              value: proxyTarget,
+              oldValue: oldArray,
+              mutation: prop
+            });
+
+            return result;
+          };
+        }
+
+        // Proxy nested objects/arrays within the array
+        if (typeof value === 'object' && value !== null) {
+          const indexKey = `${parentProp}[${String(prop)}]`;
+          if (Array.isArray(value)) {
+            return RuntimeContextHelpers.createArrayProxy(value, {
+              ...config,
+              parentProp: indexKey
             });
           }
+          return RuntimeContextHelpers.createNestedProxy(value, {
+            ...config,
+            parentProp: indexKey
+          });
         }
 
-        return result;
+        return value;
       },
 
-      deleteProperty(proxyTarget, prop) {
-        if (debug) {
-          const prefix = eventPrefix ? `[${eventPrefix}]` : '[Global]';
-          console.log(`${prefix} Deleting nested property '${String(prop)}'`);
+      set(proxyTarget, prop, value, receiver) {
+        const oldValue = proxyTarget[prop as any];
+        const result = Reflect.set(proxyTarget, prop, value, receiver);
+
+        if (!safeDeepEqual(oldValue, value)) {
+          // Emit to parent property listeners
+          const parentListeners = listeners[parentProp] || new Set<string>();
+          emitToListeners(parentListeners, eventPrefix, parentProp, {
+            value: proxyTarget,
+            index: prop,
+            ctx: current
+          });
+
+          // Emit scope event if scope is provided
+          emitScopeEvent(scope, eventPrefix, parentProp, {
+            prop: parentProp,
+            value: proxyTarget,
+            index: prop,
+            oldValue
+          });
         }
 
+        return result;
+      },
+
+      deleteProperty(proxyTarget, prop) {
         const result = Reflect.deleteProperty(proxyTarget, prop);
 
         if (result) {
-          // Emit to parent property listeners
           const parentListeners = listeners[parentProp] || new Set<string>();
-          parentListeners.forEach((componentName: string) => {
-            const eventName = eventPrefix
-              ? `${eventPrefix}:component-property-changed:${componentName}`
-              : `component-property-changed:${componentName}`;
-
-            eventDispatcher.emit(eventName, {
-              prop: parentProp,
-              ctx: current
-            });
-          });
+          emitToListeners(parentListeners, eventPrefix, parentProp, { ctx: current });
         }
 
         return result;

package/utils/change-detection.ts

@@ -1,6 +1,14 @@
 import { Subject, Observable, Subscription } from 'rxjs';
 import { share } from 'rxjs/operators';
 
+/**
+ * Pending event for batched emission
+ */
+interface PendingEvent {
+  event: string;
+  data: any;
+}
+
 class EventDispatcher {
   private static instance: EventDispatcher;
   private subjects: { [key: string]: Subject<any> } = {};
@@ -9,6 +17,21 @@ class EventDispatcher {
   private globalEventSubject = new Subject<{ eventName: string; data: any }>();
   public readonly allEvents$: Observable<{ eventName: string; data: any }>;
 
+  // Batching state
+  private readonly pendingEvents: Map<string, PendingEvent> = new Map();
+  private batchScheduled: boolean = false;
+  private batchingEnabled: boolean = true;
+
+  // Events that should always be batched (high-frequency property changes)
+  private readonly batchableEventPatterns: RegExp[] = [
+    /^component-property-changed:/,
+    /^microapp:.*:component-property-changed:/,
+    /^Vars:/,
+    /^microapp:.*:Vars:/,
+    /^component:value:set:/,
+    /^microapp:.*:component-instance-changed:/
+  ];
+
   private constructor() {
     this.allEvents$ = this.globalEventSubject.asObservable().pipe(share());
   }
@@ -49,10 +72,111 @@ class EventDispatcher {
     }
   }
 
-  public emit(event: string, data?: any): void {
+  /**
+   * Check if an event should be batched based on patterns
+   */
+  private shouldBatch(event: string): boolean {
+    if (!this.batchingEnabled) return false;
+    return this.batchableEventPatterns.some(pattern => pattern.test(event));
+  }
+
+  /**
+   * Flush all pending batched events
+   */
+  private flushBatch(): void {
+    // Process all pending events
+    const events = Array.from(this.pendingEvents.values());
+    this.pendingEvents.clear();
+
+    // Emit all batched events
+    for (const { event, data } of events) {
+      this.emitImmediate(event, data);
+    }
+
+    // Reset flag after emissions complete.
+    // If handlers added new events during emission, they would have been
+    // added to pendingEvents but no microtask scheduled (batchScheduled was true).
+    // Check and schedule if needed.
+    this.batchScheduled = false;
+    if (this.pendingEvents.size > 0) {
+      this.batchScheduled = true;
+      queueMicrotask(() => this.flushBatch());
+    }
+  }
+
+  /**
+   * Emit an event immediately without batching
+   */
+  private emitImmediate(event: string, data?: any): void {
     this.getSubject(event).next(data);
     this.globalEventSubject.next({ eventName: event, data });
   }
+
+  /**
+   * Emit an event, with automatic batching for high-frequency events.
+   *
+   * For events matching batchable patterns (property changes, variable updates),
+   * multiple rapid emissions are coalesced into a single microtask.
+   *
+   * This prevents UI jank when many properties are updated in quick succession.
+   *
+   * @param event - Event name
+   * @param data - Event data
+   */
+  public emit(event: string, data?: any): void {
+    // Check if this event should be batched
+    if (this.shouldBatch(event)) {
+      // Store/overwrite pending event (last value wins for same event)
+      this.pendingEvents.set(event, { event, data });
+
+      // Schedule batch flush if not already scheduled
+      if (!this.batchScheduled) {
+        this.batchScheduled = true;
+        queueMicrotask(() => this.flushBatch());
+      }
+    } else {
+      // Emit immediately for non-batchable events
+      this.emitImmediate(event, data);
+    }
+  }
+
+  /**
+   * Force immediate emission, bypassing batching.
+   * Use this when you need synchronous event delivery.
+   *
+   * @param event - Event name
+   * @param data - Event data
+   */
+  public emitSync(event: string, data?: any): void {
+    this.emitImmediate(event, data);
+  }
+
+  /**
+   * Enable or disable batching globally.
+   * Useful for debugging or when synchronous updates are required.
+   *
+   * @param enabled - Whether batching should be enabled
+   */
+  public setBatchingEnabled(enabled: boolean): void {
+    this.batchingEnabled = enabled;
+  }
+
+  /**
+   * Check if batching is currently enabled
+   */
+  public isBatchingEnabled(): boolean {
+    return this.batchingEnabled;
+  }
+
+  /**
+   * Manually flush any pending batched events.
+   * Useful when you need to force updates before an operation.
+   */
+  public flushPendingEvents(): void {
+    if (this.pendingEvents.size > 0) {
+      this.flushBatch();
+    }
+  }
 }
 
 export const eventDispatcher = EventDispatcher.getInstance();

package/utils/clipboard-utils.ts

@@ -71,13 +71,21 @@ export function generateNuralyClipboardStructure(component, childrenComponents)
 function transformSchemaWithNewUUIDs(schema) {
     const uuidMap = new Map();
 
-    // Function to generate a UUID v4
+
+    // Function to generate a cryptographically secure UUID v4
     function generateUUID() {
-        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-            const r = Math.random() * 16 | 0,
-                v = c === 'x' ? r : (r & 0x3 | 0x8);
-            return v.toString(16);
-        });
+        // Use native crypto.randomUUID if available (modern browsers)
+        if (crypto.randomUUID) {
+            return crypto.randomUUID();
+        }
+
+        // Fallback using crypto.getRandomValues (wider browser support)
+        const bytes = crypto.getRandomValues(new Uint8Array(16));
+        bytes[6] = (bytes[6] & 0x0f) | 0x40; // Version 4
+        bytes[8] = (bytes[8] & 0x3f) | 0x80; // Variant 10
+
+        const hex = Array.from(bytes, byte => byte.toString(16).padStart(2, '0')).join('');
+        return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
     }
 
     // Generate a new UUID for each component and store the old -> new UUID mapping
@@ -91,8 +99,10 @@ function transformSchemaWithNewUUIDs(schema) {
     schema.components.forEach(component => {
         component.childrenIds = component.childrenIds.map(oldUUID => uuidMap.get(oldUUID) || oldUUID);
 
-        // Add a random suffix to the name
-        component.name += `_${Math.random().toString(36).substring(2, 6)}`;
+        // Generate a cryptographically secure random suffix
+        const randomBytes = crypto.getRandomValues(new Uint8Array(2));
+        const suffix = Array.from(randomBytes, byte => byte.toString(36)).join('').substring(0, 4);
+        component.name += `_${suffix}`;
     });
 
     return schema;