@getlimelight/sdk 0.4.5 → 0.5.1

package/dist/index.d.mts

@@ -210,6 +210,17 @@ declare enum GraphqlOprtation {
     SUB = "SUBSCRIPTION"
 }
 
+declare enum CommandType {
+    CLEAR_RENDERS = "CLEAR_RENDERS",
+    ACK = "ACK"
+}
+interface CommandAckEvent {
+    phase: CommandType.ACK;
+    commandId: string;
+    type: CommandType;
+    success: boolean;
+}
+
 /**
  * Render lifecycle phases
  */
@@ -450,7 +461,7 @@ interface ConnectionEvent {
 /**
  * Union type representing all possible Limelight messages.
  */
-type LimelightMessage = NetworkRequest | NetworkResponse | NetworkErrorEvent | ConsoleEvent | ConnectionEvent | RenderSnapshot | TransactionEvent | StateInitEvent | StateUpdateEvent;
+type LimelightMessage = NetworkRequest | NetworkResponse | NetworkErrorEvent | ConsoleEvent | ConnectionEvent | RenderSnapshot | TransactionEvent | StateInitEvent | StateUpdateEvent | CommandAckEvent;
 
 /**
  * Represents a single frame in a stack trace.
@@ -512,6 +523,7 @@ declare class LimelightClient {
     private renderInterceptor;
     private stateInterceptor;
     private requestBridge;
+    private commandHandler;
     constructor();
     /**
      * Configures the Limelight client with the provided settings.

package/dist/index.d.ts

@@ -210,6 +210,17 @@ declare enum GraphqlOprtation {
     SUB = "SUBSCRIPTION"
 }
 
+declare enum CommandType {
+    CLEAR_RENDERS = "CLEAR_RENDERS",
+    ACK = "ACK"
+}
+interface CommandAckEvent {
+    phase: CommandType.ACK;
+    commandId: string;
+    type: CommandType;
+    success: boolean;
+}
+
 /**
  * Render lifecycle phases
  */
@@ -450,7 +461,7 @@ interface ConnectionEvent {
 /**
  * Union type representing all possible Limelight messages.
  */
-type LimelightMessage = NetworkRequest | NetworkResponse | NetworkErrorEvent | ConsoleEvent | ConnectionEvent | RenderSnapshot | TransactionEvent | StateInitEvent | StateUpdateEvent;
+type LimelightMessage = NetworkRequest | NetworkResponse | NetworkErrorEvent | ConsoleEvent | ConnectionEvent | RenderSnapshot | TransactionEvent | StateInitEvent | StateUpdateEvent | CommandAckEvent;
 
 /**
  * Represents a single frame in a stack trace.
@@ -512,6 +523,7 @@ declare class LimelightClient {
     private renderInterceptor;
     private stateInterceptor;
     private requestBridge;
+    private commandHandler;
     constructor();
     /**
      * Configures the Limelight client with the provided settings.

package/dist/index.js

@@ -267,7 +267,7 @@ var SENSITIVE_HEADERS = [
 var LIMELIGHT_WEB_WSS_URL = "wss://api.getlimelight.io";
 var LIMELIGHT_DESKTOP_WSS_URL = "ws://localhost:8484";
 var WS_PATH = "/limelight";
-var SDK_VERSION = true ? "0.4.5" : "test-version";
+var SDK_VERSION = true ? "0.5.1" : "test-version";
 var RENDER_THRESHOLDS = {
   HOT_VELOCITY: 5,
   HIGH_RENDER_COUNT: 50,
@@ -1162,12 +1162,10 @@ var RenderInterceptor = class {
     }, RENDER_THRESHOLDS.SNAPSHOT_INTERVAL_MS);
     this.isSetup = true;
   }
-  resetProfiles() {
-    this.profiles.clear();
-    this.pendingUnmounts = [];
-    this.currentCommitComponents.clear();
-    this.componentIdCounter = 0;
-  }
+  /**
+   * Installs or wraps the React DevTools global hook.
+   * Returns true if successful, false otherwise.
+   */
   installHook() {
     const globalObj = typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : null;
     if (!globalObj) return false;
@@ -1180,6 +1178,11 @@ var RenderInterceptor = class {
     }
     return true;
   }
+  /**
+   * Wraps an existing React DevTools hook to intercept render events.
+   * Preserves original functionality.
+   * @param hook - The existing React DevTools hook
+   */
   wrapExistingHook(hook) {
     this.originalHook = hook;
     this.originalOnCommitFiberRoot = hook.onCommitFiberRoot?.bind(hook);
@@ -1193,6 +1196,11 @@ var RenderInterceptor = class {
       this.handleCommitFiberUnmount(rendererID, fiber);
     };
   }
+  /**
+   * Creates a new React DevTools hook to intercept render events.
+   * @param globalObj - The global object (window or global)
+   * @param hookKey - The key for the React DevTools hook
+   */
   createHook(globalObj, hookKey) {
     const renderers = /* @__PURE__ */ new Map();
     let rendererIdCounter = 0;
@@ -1215,6 +1223,8 @@ var RenderInterceptor = class {
   /**
    * Handles a fiber root commit - walks tree and ACCUMULATES into profiles.
    * Two-pass: first count components, then accumulate with distributed cost.
+   * @param rendererID - The renderer ID
+   * @param root - The fiber root
    */
   handleCommitFiberRoot(_rendererID, root) {
     this.currentCommitComponents.clear();
@@ -1230,6 +1240,7 @@ var RenderInterceptor = class {
   }
   /**
    * First pass: count rendered components for cost distribution.
+   * @param fiber - The current fiber node
    */
   countRenderedComponents(fiber) {
     if (!fiber) return;
@@ -1239,6 +1250,11 @@ var RenderInterceptor = class {
     this.countRenderedComponents(fiber.child);
     this.countRenderedComponents(fiber.sibling);
   }
+  /**
+   * Handles a fiber unmount - marks component as unmounted.
+   * @param rendererID - The renderer ID
+   * @param fiber - The fiber being unmounted
+   */
   handleCommitFiberUnmount(_rendererID, fiber) {
     if (!this.isUserComponent(fiber)) return;
     const componentId = this.fiberToComponentId.get(fiber);
@@ -1252,6 +1268,9 @@ var RenderInterceptor = class {
   }
   /**
    * Walks fiber tree and accumulates render stats into profiles.
+   * @param fiber - The current fiber node
+   * @param parentComponentId - The parent component ID
+   * @param depth - The current depth in the tree
    */
   walkFiberTree(fiber, parentComponentId, depth) {
     if (!fiber) return;
@@ -1266,6 +1285,10 @@ var RenderInterceptor = class {
   }
   /**
    * Core accumulation logic - this is where we build up the profile.
+   * @param fiber - The current fiber node
+   * @param componentId - The component ID
+   * @param parentComponentId - The parent component ID
+   * @param depth - The current depth in the tree
    */
   accumulateRender(fiber, componentId, parentComponentId, depth) {
     const now = Date.now();
@@ -1326,7 +1349,9 @@ var RenderInterceptor = class {
     this.updateSuspiciousFlag(profile);
   }
   /**
-   * NEW: Accumulate prop change details into the profile.
+   * Accumulate prop change details into the profile.
+   * @param profile - The component profile
+   * @param changes - The list of prop change details
    */
   accumulatePropChanges(profile, changes) {
     const stats = profile.propChangeStats;
@@ -1355,7 +1380,9 @@ var RenderInterceptor = class {
     }
   }
   /**
-   *  Build prop change snapshot for emission.
+   * Build prop change snapshot for emission.
+   * @param profile - The component profile
+   * @returns The prop change snapshot or undefined
    */
   buildPropChangeSnapshot(profile) {
     const stats = profile.propChangeStats;
@@ -1373,6 +1400,10 @@ var RenderInterceptor = class {
     });
     return { topChangedProps };
   }
+  /**
+   * Updates the suspicious flag based on render velocity and count.
+   * @param profile - The component profile
+   */
   updateSuspiciousFlag(profile) {
     const velocity = this.calculateVelocity(profile);
     if (velocity > RENDER_THRESHOLDS.HOT_VELOCITY) {
@@ -1391,6 +1422,8 @@ var RenderInterceptor = class {
   /**
    * Calculates renders per second from velocity window.
    * Cheap: just count / window duration, no array operations.
+   * @param profile - The component profile
+   * @returns The calculated velocity
    */
   calculateVelocity(profile) {
     const now = Date.now();
@@ -1403,6 +1436,8 @@ var RenderInterceptor = class {
   }
   /**
    * Emits a snapshot of all profiles with deltas.
+   * Only emits profiles that have significant changes since last emit.
+   * Also emits unmounts.
    */
   emitSnapshot() {
     const now = Date.now();
@@ -1486,7 +1521,11 @@ var RenderInterceptor = class {
     this.sendMessage(message);
   }
   /**
-   *  Now returns prop change details when applicable.
+   * Now returns prop change details when applicable.
+   * Infers the cause of the render by comparing current and previous fiber states.
+   * @param fiber - The current fiber node
+   * @param parentComponentId - The parent component ID
+   * @returns The inferred render cause
    */
   inferRenderCause(fiber, parentComponentId) {
     const alternate = fiber.alternate;
@@ -1535,6 +1574,9 @@ var RenderInterceptor = class {
   /**
    * Diff props to find which keys changed and whether it's reference-only.
    * This is the key insight generator.
+   * @param prevProps - The previous props
+   * @param nextProps - The next props
+   * @returns List of prop change details
    */
   diffProps(prevProps, nextProps) {
     if (!prevProps || !nextProps) {
@@ -1562,8 +1604,11 @@ var RenderInterceptor = class {
     return changes;
   }
   /**
-   *  Shallow equality check to determine if a prop is reference-only change.
+   * Shallow equality check to determine if a prop is reference-only change.
    * We only go one level deep to keep it fast.
+   * @param a - The first value
+   * @param b - The second value
+   * @returns True if shallow equal, false otherwise
    */
   isShallowEqual(a, b) {
     if (a === b) return true;
@@ -1590,13 +1635,28 @@ var RenderInterceptor = class {
     }
     return a === b;
   }
+  /**
+   * Determines if a fiber represents a user-defined component.
+   * @param fiber - The fiber node
+   * @returns True if user component, false otherwise
+   */
   isUserComponent(fiber) {
     const tag = fiber.tag;
     return tag === 0 /* FunctionComponent */ || tag === 1 /* ClassComponent */ || tag === 11 /* ForwardRef */ || tag === 14 /* MemoComponent */ || tag === 15 /* SimpleMemoComponent */;
   }
+  /**
+   * Determines if a fiber performed work during the commit.
+   * @param fiber - The fiber node
+   * @returns True if performed work, false otherwise
+   */
   didFiberRender(fiber) {
     return (fiber.flags & 1 /* PerformedWork */) !== 0;
   }
+  /**
+   * Gets or creates a unique component ID for a fiber.
+   * @param fiber - The fiber node
+   * @returns The unique component ID
+   */
   getOrCreateComponentId(fiber) {
     let id = this.fiberToComponentId.get(fiber);
     if (id) return id;
@@ -1611,6 +1671,11 @@ var RenderInterceptor = class {
     this.fiberToComponentId.set(fiber, id);
     return id;
   }
+  /**
+   * Gets the display name of a component from a fiber.
+   * @param fiber - The fiber node
+   * @returns The component name
+   */
   getComponentName(fiber) {
     const type = fiber.type;
     if (!type) return "Unknown";
@@ -1628,6 +1693,11 @@ var RenderInterceptor = class {
     }
     return "Unknown";
   }
+  /**
+   * Gets the component type from a fiber.
+   * @param fiber - The fiber node
+   * @returns The component type
+   */
   getComponentType(fiber) {
     switch (fiber.tag) {
       case 0 /* FunctionComponent */:
@@ -1661,6 +1731,9 @@ var RenderInterceptor = class {
   getSuspiciousComponents() {
     return Array.from(this.profiles.values()).filter((p) => p.isSuspicious);
   }
+  /**
+   * Cleans up and restores original hook behavior.
+   */
   cleanup() {
     if (!this.isSetup) return;
     this.emitSnapshot();
@@ -1686,6 +1759,16 @@ var RenderInterceptor = class {
     this.config = null;
     this.isSetup = false;
   }
+  /**
+   * Resets all collected profiles
+   */
+  resetProfiles() {
+    this.profiles.clear();
+    this.fiberToComponentId = /* @__PURE__ */ new WeakMap();
+    this.pendingUnmounts = [];
+    this.currentCommitComponents.clear();
+    this.componentIdCounter = 0;
+  }
 };
 
 // src/limelight/interceptors/StateInterceptor.ts
@@ -1712,7 +1795,9 @@ var StateInterceptor = class {
    */
   registerStore(name, store) {
     if (this.stores.has(name)) {
-      console.warn(`[Limelight] Store "${name}" already registered`);
+      if (this.config?.enableInternalLogging) {
+        console.warn(`[Limelight] Store "${name}" already registered`);
+      }
       return;
     }
     const library = this.detectLibrary(store);
@@ -1722,7 +1807,7 @@ var StateInterceptor = class {
       );
       return;
     }
-    const state = this.getState(store, library);
+    const state = this.getState(store);
     const initEvent = {
       phase: "STATE:INIT" /* INIT */,
       sessionId: this.getSessionId(),
@@ -1739,6 +1824,8 @@ var StateInterceptor = class {
   }
   /**
    * Unregister a store and stop listening to changes.
+   * Can be called manually via Limelight.removeStore().
+   * @param name The name of the store to unregister
    */
   unregisterStore(name) {
     const store = this.stores.get(name);
@@ -1749,6 +1836,7 @@ var StateInterceptor = class {
   }
   /**
    * Emit an event, applying beforeSend hook if configured
+   * @param event The event to emit
    */
   emitEvent(event) {
     if (this.config?.beforeSend) {
@@ -1767,6 +1855,8 @@ var StateInterceptor = class {
   }
   /**
    * Detect whether a store is Zustand or Redux
+   * @param store The store to inspect
+   * @return StateLibrary or null if unknown
    */
   detectLibrary(store) {
     if (!store || typeof store !== "function" && typeof store !== "object") {
@@ -1785,13 +1875,19 @@ var StateInterceptor = class {
   }
   /**
    * Get current state from a store
+   * @param store The store to get state from
+   * @return The current state
    */
-  getState(store, library) {
+  getState(store) {
     const storeAny = store;
     return storeAny.getState();
   }
   /**
    * Subscribe to store changes
+   * @param store The store to subscribe to
+   * @param library The detected state library
+   * @param storeName The name of the store
+   * @return Unsubscribe function
    */
   subscribe(store, library, storeName) {
     const storeAny = store;
@@ -1803,6 +1899,9 @@ var StateInterceptor = class {
   }
   /**
    * Subscribe to Zustand store changes
+   * @param store The Zustand store
+   * @param storeName The name of the store
+   * @return Unsubscribe function
    */
   subscribeZustand(store, storeName) {
     return store.subscribe((state, prevState) => {
@@ -1825,6 +1924,9 @@ var StateInterceptor = class {
   }
   /**
    * Subscribe to Redux store changes
+   * @param store The Redux store
+   * @param storeName The name of the store
+   * @return Unsubscribe function
    */
   subscribeRedux(store, storeName) {
     let lastAction = { type: "@@INIT" };
@@ -1860,6 +1962,9 @@ var StateInterceptor = class {
   }
   /**
    * Infer action name from stack trace for Zustand
+   * @param state The new state
+   * @param prevState The previous state
+   * @return Inferred StateAction
    */
   inferZustandAction(state, prevState) {
     const actionType = this.parseActionFromStack(this.captureStackTrace());
@@ -1871,6 +1976,8 @@ var StateInterceptor = class {
   }
   /**
    * Parse function name from stack trace
+   * @param stack The stack trace string
+   * @return The inferred action name
    */
   parseActionFromStack(stack) {
     if (!stack) return "set";
@@ -1901,6 +2008,9 @@ var StateInterceptor = class {
   }
   /**
    * Compute what keys changed between states (shallow)
+   * @param state The new state
+   * @param prevState The previous state
+   * @return Partial state with only changed keys
    */
   computePartialState(state, prevState) {
     if (typeof state !== "object" || state === null || typeof prevState !== "object" || prevState === null) {
@@ -1941,7 +2051,7 @@ var StateInterceptor = class {
   }
 };
 
-// src/limelight/interceptors/RequestBridge.ts
+// src/limelight/bridges/RequestBridge.ts
 var RequestBridge = class {
   constructor(sendMessage, getSessionId) {
     this.sendMessage = sendMessage;
@@ -2108,6 +2218,42 @@ var RequestBridge = class {
   }
 };
 
+// src/limelight/handlers/CommandHandler.ts
+var CommandHandler = class {
+  constructor(interceptors, sendMessage, getConfig) {
+    this.interceptors = interceptors;
+    this.sendMessage = sendMessage;
+    this.getConfig = getConfig;
+  }
+  /**
+   * Handles an incoming command.
+   * @param command - The command to handle
+   */
+  handle(command) {
+    const config = this.getConfig();
+    if (config?.enableInternalLogging) {
+      console.log("[Limelight] Received command:", command.type);
+    }
+    switch (command.type) {
+      case "CLEAR_RENDERS" /* CLEAR_RENDERS */:
+        this.interceptors.render.resetProfiles();
+        break;
+      default:
+        if (config?.enableInternalLogging) {
+          console.warn("[Limelight] Unknown command:", command.type);
+        }
+    }
+    if (command.id) {
+      this.sendMessage({
+        phase: "ACK" /* ACK */,
+        commandId: command.id,
+        type: command.type,
+        success: true
+      });
+    }
+  }
+};
+
 // src/limelight/LimelightClient.ts
 var LimelightClient = class {
   ws = null;
@@ -2125,6 +2271,7 @@ var LimelightClient = class {
   renderInterceptor;
   stateInterceptor;
   requestBridge;
+  commandHandler = null;
   constructor() {
     this.networkInterceptor = new NetworkInterceptor(
       this.sendMessage.bind(this),
@@ -2150,6 +2297,11 @@ var LimelightClient = class {
       this.sendMessage.bind(this),
       () => this.sessionId
     );
+    this.commandHandler = new CommandHandler(
+      { render: this.renderInterceptor },
+      this.sendMessage.bind(this),
+      () => this.config
+    );
   }
   /**
    * Configures the Limelight client with the provided settings.
@@ -2256,6 +2408,16 @@ var LimelightClient = class {
         this.flushMessageQueue();
         this.sendMessage(message);
       };
+      this.ws.onmessage = (event) => {
+        try {
+          const command = JSON.parse(event.data);
+          this.commandHandler?.handle(command);
+        } catch (error) {
+          if (this.config?.enableInternalLogging) {
+            console.error("[Limelight] Failed to parse command:", error);
+          }
+        }
+      };
       this.ws.onerror = (error) => {
         if (this.config?.enableInternalLogging) {
           console.error("[Limelight] WebSocket error:", error);