@getlimelight/sdk 0.3.0 → 0.4.0

package/README.md

@@ -6,8 +6,13 @@
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.3-blue)](https://www.typescriptlang.org/)
 
+## Official documentation
+
+Read the full docs at **[docs.getlimelight.io](https://docs.getlimelight.io)**.
+
 ## Features
 
+- 🙂 **Find why things re-render** - Get detailed information on what is causing your app to render
 - 🔍 **Network Inspection** - Capture and analyze all network requests (fetch & XMLHttpRequest)
 - 🎯 **GraphQL-First** - Automatic GraphQL operation detection, complexity analysis, and query parsing
 - 📊 **Console Streaming** - Real-time console logs with source detection and stack traces
@@ -32,16 +37,16 @@ pnpm add @getlimelight/sdk
 
 ## Quick Start
 
-### Basic Usage
+### Basic Usage for the desktop app
 
 ```typescript
 import { Limelight } from "@getlimelight/sdk";
 
 // That's it! One line to start debugging
-Limelight.connect({ projectKey: "project-123" });
+Limelight.connect();
 ```
 
-### React Native
+### Provide your projectKey to use the web Limelight app
 
 ```typescript
 import { Limelight } from "@getlimelight/sdk";
@@ -49,19 +54,6 @@ import { Limelight } from "@getlimelight/sdk";
 Limelight.connect({ projectKey: "project-123" });
 ```
 
-### Expo
-
-```typescript
-import { Limelight } from "@getlimelight/sdk";
-import Constants from "expo-constants";
-
-Limelight.connect({
-  projectKey: "project-123",
-  enabled: __DEV__,
-  appName: Constants.expoConfig?.name,
-});
-```
-
 ## Configuration
 
 ### Configuration Options
@@ -70,8 +62,8 @@ Limelight.connect({
 import { Limelight } from '@getlimelight/sdk';
 
 Limelight.connect({
-  // The only required field: project Id:
-  projectKey: string;
+  // Required to connect to the Limelight web app. Your project key can be found in organization settings.
+  projectKey?: string;
 
   // Optional: Platform identifier (auto-detected)
   platform?: string;
@@ -120,7 +112,6 @@ Limelight.connect({
 import { Limelight } from "@getlimelight/sdk";
 
 Limelight.connect({
-  projectKey: "project-123",
   serverUrl: "ws://192.168.1.100:8080", // Your computer's IP
   appName: "MyApp",
 });

package/dist/index.d.mts

@@ -286,6 +286,70 @@ interface ComponentProfileSnapshot {
     propChanges?: PropChangeSnapshot;
 }
 
+/**
+ * Supported state management libraries
+ */
+declare enum StateLibrary {
+    ZUSTAND = "zustand",
+    REDUX = "redux"
+}
+/**
+ * State event phases
+ */
+declare enum StatePhase {
+    INIT = "STATE:INIT",
+    UPDATE = "STATE:UPDATE"
+}
+/**
+ * Action info captured during state updates
+ */
+interface StateAction {
+    /**
+     * Action type/name
+     * - Redux: action.type
+     * - Zustand: inferred from stack trace or 'set'
+     */
+    type: string;
+    /**
+     * Action payload
+     * - Redux: action.payload
+     * - Zustand: partial state passed to set()
+     */
+    payload?: unknown;
+}
+/**
+ * Base shape for state events
+ */
+interface BaseStateEvent {
+    phase: StatePhase;
+    sessionId: string;
+    timestamp: number;
+}
+/**
+ * Initial state snapshot sent when store is registered
+ */
+interface StateInitEvent extends BaseStateEvent {
+    phase: StatePhase.INIT;
+    data: {
+        storeId: string;
+        library: StateLibrary;
+        state: unknown;
+    };
+}
+/**
+ * State update event sent on every state change
+ */
+interface StateUpdateEvent extends BaseStateEvent {
+    phase: StatePhase.UPDATE;
+    data: {
+        storeId: string;
+        library: StateLibrary;
+        state: unknown;
+        action: StateAction;
+        stackTrace?: string;
+    };
+}
+
 /**
  * Configuration options for Limelight SDK.
  *
@@ -349,6 +413,20 @@ interface LimelightConfig {
      * Flag to enable or disable render inspection.
      */
     enableRenderInspector?: boolean;
+    /**
+     * Zustand store hooks or Redux stores, keyed by display name
+     * @example { user: useUserStore, cart: useCartStore }
+     */
+    stores?: Record<string, unknown>;
+    /**
+     * Flag to enable or disable state inspection
+     * @default true (if stores are provided)
+     */
+    enableStateInspector?: boolean;
+    /**
+     * Flag to enable or disable internal logging for the Limelight SDK
+     */
+    internalLoggingEnabled?: boolean;
     /**
      * A callback function to modify or filter events before they are sent to the server
      */
@@ -372,7 +450,7 @@ interface ConnectionEvent {
 /**
  * Union type representing all possible Limelight messages.
  */
-type LimelightMessage = NetworkRequest | NetworkResponse | NetworkErrorEvent | ConsoleEvent | ConnectionEvent | RenderSnapshot | TransactionEvent;
+type LimelightMessage = NetworkRequest | NetworkResponse | NetworkErrorEvent | ConsoleEvent | ConnectionEvent | RenderSnapshot | TransactionEvent | StateInitEvent | StateUpdateEvent;
 
 /**
  * Represents a single frame in a stack trace.
@@ -406,6 +484,7 @@ declare class LimelightClient {
     private xhrInterceptor;
     private consoleInterceptor;
     private renderInterceptor;
+    private stateInterceptor;
     constructor();
     /**
      * Configures the Limelight client with the provided settings.

package/dist/index.d.ts

@@ -286,6 +286,70 @@ interface ComponentProfileSnapshot {
     propChanges?: PropChangeSnapshot;
 }
 
+/**
+ * Supported state management libraries
+ */
+declare enum StateLibrary {
+    ZUSTAND = "zustand",
+    REDUX = "redux"
+}
+/**
+ * State event phases
+ */
+declare enum StatePhase {
+    INIT = "STATE:INIT",
+    UPDATE = "STATE:UPDATE"
+}
+/**
+ * Action info captured during state updates
+ */
+interface StateAction {
+    /**
+     * Action type/name
+     * - Redux: action.type
+     * - Zustand: inferred from stack trace or 'set'
+     */
+    type: string;
+    /**
+     * Action payload
+     * - Redux: action.payload
+     * - Zustand: partial state passed to set()
+     */
+    payload?: unknown;
+}
+/**
+ * Base shape for state events
+ */
+interface BaseStateEvent {
+    phase: StatePhase;
+    sessionId: string;
+    timestamp: number;
+}
+/**
+ * Initial state snapshot sent when store is registered
+ */
+interface StateInitEvent extends BaseStateEvent {
+    phase: StatePhase.INIT;
+    data: {
+        storeId: string;
+        library: StateLibrary;
+        state: unknown;
+    };
+}
+/**
+ * State update event sent on every state change
+ */
+interface StateUpdateEvent extends BaseStateEvent {
+    phase: StatePhase.UPDATE;
+    data: {
+        storeId: string;
+        library: StateLibrary;
+        state: unknown;
+        action: StateAction;
+        stackTrace?: string;
+    };
+}
+
 /**
  * Configuration options for Limelight SDK.
  *
@@ -349,6 +413,20 @@ interface LimelightConfig {
      * Flag to enable or disable render inspection.
      */
     enableRenderInspector?: boolean;
+    /**
+     * Zustand store hooks or Redux stores, keyed by display name
+     * @example { user: useUserStore, cart: useCartStore }
+     */
+    stores?: Record<string, unknown>;
+    /**
+     * Flag to enable or disable state inspection
+     * @default true (if stores are provided)
+     */
+    enableStateInspector?: boolean;
+    /**
+     * Flag to enable or disable internal logging for the Limelight SDK
+     */
+    internalLoggingEnabled?: boolean;
     /**
      * A callback function to modify or filter events before they are sent to the server
      */
@@ -372,7 +450,7 @@ interface ConnectionEvent {
 /**
  * Union type representing all possible Limelight messages.
  */
-type LimelightMessage = NetworkRequest | NetworkResponse | NetworkErrorEvent | ConsoleEvent | ConnectionEvent | RenderSnapshot | TransactionEvent;
+type LimelightMessage = NetworkRequest | NetworkResponse | NetworkErrorEvent | ConsoleEvent | ConnectionEvent | RenderSnapshot | TransactionEvent | StateInitEvent | StateUpdateEvent;
 
 /**
  * Represents a single frame in a stack trace.
@@ -406,6 +484,7 @@ declare class LimelightClient {
     private xhrInterceptor;
     private consoleInterceptor;
     private renderInterceptor;
+    private stateInterceptor;
     constructor();
     /**
      * Configures the Limelight client with the provided settings.