@flotrace/runtime 0.1.0 → 0.1.2

package/README.md

@@ -5,11 +5,11 @@ Runtime package for FloTrace — enables real-time React component tree visualiz
 ## Installation
 
 ```bash
-npm install @flotrace/runtime
+npm install -D @flotrace/runtime
 # or
-yarn add @flotrace/runtime
+yarn add -D @flotrace/runtime
 # or
-pnpm add @flotrace/runtime
+pnpm add -D @flotrace/runtime
 ```
 
 **Peer dependencies:** React >= 16.9.0 (requires `<Profiler>` API)

package/dist/index.d.mts

@@ -668,6 +668,11 @@ interface TrackingOptions {
  * FloTrace provider configuration
  */
 interface FloTraceConfig {
+    /** WebSocket server host (default: '127.0.0.1').
+     *  React Native users: set to your Mac's LAN IP (e.g. '192.168.1.5') for
+     *  physical devices, or '10.0.2.2' for Android emulator. iOS simulator
+     *  can use the default '127.0.0.1'. */
+    host?: string;
     /** WebSocket server port (default: 3457) */
     port?: number;
     /** App name to display in FloTrace */

package/dist/index.d.ts

@@ -668,6 +668,11 @@ interface TrackingOptions {
  * FloTrace provider configuration
  */
 interface FloTraceConfig {
+    /** WebSocket server host (default: '127.0.0.1').
+     *  React Native users: set to your Mac's LAN IP (e.g. '192.168.1.5') for
+     *  physical devices, or '10.0.2.2' for Android emulator. iOS simulator
+     *  can use the default '127.0.0.1'. */
+    host?: string;
     /** WebSocket server port (default: 3457) */
     port?: number;
     /** App name to display in FloTrace */

package/dist/index.js

@@ -73,6 +73,7 @@ var import_react = __toESM(require("react"));
 
 // src/types.ts
 var DEFAULT_CONFIG = {
+  host: "127.0.0.1",
   port: 3457,
   appName: "React App",
   enabled: process.env.NODE_ENV === "development",
@@ -112,25 +113,31 @@ var _FloTraceWebSocketClient = class _FloTraceWebSocketClient {
       console.log("[FloTrace] Runtime disabled, skipping connection");
       return;
     }
-    if (typeof window === "undefined" || typeof WebSocket === "undefined") {
-      console.log("[FloTrace] Not in browser environment, skipping connection");
+    if (typeof WebSocket === "undefined") {
+      console.log("[FloTrace] WebSocket not available, skipping connection");
       return;
     }
     this.isConnecting = true;
     try {
-      const url = `ws://127.0.0.1:${this.config.port}`;
+      const url = `ws://${this.config.host}:${this.config.port}`;
       console.log(`[FloTrace] Connecting to ${url}...`);
       this.ws = new WebSocket(url);
       this.ws.onopen = () => {
         this.isConnecting = false;
         this.reconnectAttempts = 0;
-        console.log("[FloTrace] Connected to VS Code extension");
+        console.log("[FloTrace] Connected to FloTrace desktop");
         this.notifyConnectionChange(true);
+        let appUrl;
+        try {
+          appUrl = typeof window !== "undefined" && window.location ? window.location.href : void 0;
+        } catch {
+          appUrl = void 0;
+        }
         this.send({
           type: "runtime:ready",
           appName: this.config.appName,
           reactVersion: this.getReactVersion(),
-          appUrl: typeof window !== "undefined" ? window.location.href : void 0
+          appUrl
         });
         this.flush();
       };
@@ -4078,7 +4085,9 @@ function FloTraceProvider({ children, config = {}, stores, reduxStore, queryClie
   reduxStoreRef.current = reduxStore;
   const queryClientRef = (0, import_react.useRef)(queryClient);
   queryClientRef.current = queryClient;
-  if (mergedConfig.enabled && typeof window !== "undefined") {
+  const enabledRef = (0, import_react.useRef)(mergedConfig.enabled);
+  enabledRef.current = mergedConfig.enabled;
+  if (mergedConfig.enabled && typeof WebSocket !== "undefined") {
     getWebSocketClient(mergedConfig);
     installFiberTreeWalker();
     prewarmNetworkTracker();
@@ -4142,56 +4151,44 @@ function FloTraceProvider({ children, config = {}, stores, reduxStore, queryClie
             console.log("[FloTrace] Tree tracking stopped");
             break;
           case "ext:requestNodeProps": {
-            const nodeId = message.nodeId;
-            if (nodeId) {
-              const props = getNodeProps(nodeId);
-              client4.sendImmediate({
-                type: "runtime:nodeProps",
-                nodeId,
-                props: props || {},
-                timestamp: Date.now()
-              });
-            }
+            const props = getNodeProps(message.nodeId);
+            client4.sendImmediate({
+              type: "runtime:nodeProps",
+              nodeId: message.nodeId,
+              props: props || {},
+              timestamp: Date.now()
+            });
             break;
           }
           case "ext:requestNodeHooks": {
-            const hookNodeId = message.nodeId;
-            if (hookNodeId) {
-              const hooks = getNodeHooks(hookNodeId);
-              client4.sendImmediate({
-                type: "runtime:nodeHooks",
-                nodeId: hookNodeId,
-                hooks: hooks || [],
-                timestamp: Date.now()
-              });
-            }
+            const hooks = getNodeHooks(message.nodeId);
+            client4.sendImmediate({
+              type: "runtime:nodeHooks",
+              nodeId: message.nodeId,
+              hooks: hooks || [],
+              timestamp: Date.now()
+            });
             break;
           }
           case "ext:requestNodeEffects": {
-            const effectNodeId = message.nodeId;
-            if (effectNodeId) {
-              const effects = getNodeEffects(effectNodeId);
-              client4.sendImmediate({
-                type: "runtime:nodeEffects",
-                nodeId: effectNodeId,
-                effects: effects || [],
-                timestamp: Date.now()
-              });
-            }
+            const effects = getNodeEffects(message.nodeId);
+            client4.sendImmediate({
+              type: "runtime:nodeEffects",
+              nodeId: message.nodeId,
+              effects: effects || [],
+              timestamp: Date.now()
+            });
             break;
           }
           case "ext:requestDetailedRenderReason": {
-            const reasonNodeId = message.nodeId;
-            if (reasonNodeId) {
-              const reason = getDetailedRenderReason(reasonNodeId);
-              if (reason) {
-                client4.sendImmediate({
-                  type: "runtime:detailedRenderReason",
-                  nodeId: reasonNodeId,
-                  reason,
-                  timestamp: Date.now()
-                });
-              }
+            const reason = getDetailedRenderReason(message.nodeId);
+            if (reason) {
+              client4.sendImmediate({
+                type: "runtime:detailedRenderReason",
+                nodeId: message.nodeId,
+                reason,
+                timestamp: Date.now()
+              });
             }
             break;
           }
@@ -4200,18 +4197,15 @@ function FloTraceProvider({ children, config = {}, stores, reduxStore, queryClie
             console.log("[FloTrace] Full snapshot requested by extension");
             break;
           case "ext:requestTimeline": {
-            const timelineNodeId = message.nodeId;
-            if (timelineNodeId) {
-              const events = getTimeline(timelineNodeId);
-              const componentName = timelineNodeId.split("/").pop()?.replace(/-\d+$/, "") ?? "Unknown";
-              for (const event of events) {
-                client4.sendImmediate({
-                  type: "runtime:timelineEvent",
-                  nodeId: timelineNodeId,
-                  componentName,
-                  event
-                });
-              }
+            const events = getTimeline(message.nodeId);
+            const componentName = message.nodeId.split("/").pop()?.replace(/-\d+$/, "") ?? "Unknown";
+            for (const event of events) {
+              client4.sendImmediate({
+                type: "runtime:timelineEvent",
+                nodeId: message.nodeId,
+                componentName,
+                event
+              });
             }
             break;
           }
@@ -4223,9 +4217,7 @@ function FloTraceProvider({ children, config = {}, stores, reduxStore, queryClie
             break;
           // --- Individual tracker start/stop (sidebar panel show/hide) ---
           case "ext:startReduxTracking":
-            if (reduxStoreRef.current) {
-              safeTrackerOp("Redux install", () => installReduxTracker(reduxStoreRef.current, client4));
-            }
+            if (reduxStoreRef.current) safeTrackerOp("Redux install", () => installReduxTracker(reduxStoreRef.current, client4));
             break;
           case "ext:stopReduxTracking":
             safeTrackerOp("Redux uninstall", uninstallReduxTracker);
@@ -4238,19 +4230,14 @@ function FloTraceProvider({ children, config = {}, stores, reduxStore, queryClie
             break;
           case "ext:startZustandTracking":
             if (storesRef.current && Object.keys(storesRef.current).length > 0) {
-              safeTrackerOp("Zustand install", () => installZustandTracker(
-                storesRef.current,
-                client4
-              ));
+              safeTrackerOp("Zustand install", () => installZustandTracker(storesRef.current, client4));
             }
             break;
           case "ext:stopZustandTracking":
             safeTrackerOp("Zustand uninstall", uninstallZustandTracker);
             break;
           case "ext:startTanstackTracking":
-            if (queryClientRef.current) {
-              safeTrackerOp("TanStack Query install", () => installTanStackQueryTracker(queryClientRef.current, client4));
-            }
+            if (queryClientRef.current) safeTrackerOp("TanStack Query install", () => installTanStackQueryTracker(queryClientRef.current, client4));
             break;
           case "ext:stopTanstackTracking":
             safeTrackerOp("TanStack Query uninstall", uninstallTanStackQueryTracker);
@@ -4279,15 +4266,11 @@ function FloTraceProvider({ children, config = {}, stores, reduxStore, queryClie
       }, 100);
     };
   }, [mergedConfig.enabled, mergedConfig.port, mergedConfig.appName]);
-  const onRenderCallback = (id, phase, actualDuration, baseDuration, startTime, commitTime) => {
+  const onRenderCallback = (0, import_react.useCallback)((id, phase, actualDuration, baseDuration, _startTime, commitTime) => {
     try {
-      if (!mergedConfig.enabled) {
-        return;
-      }
+      if (!enabledRef.current) return;
       const client4 = getWebSocketClient();
-      if (!client4.connected) {
-        return;
-      }
+      if (!client4.connected) return;
       const normalizedPhase = phase === "nested-update" ? "update" : phase;
       client4.send({
         type: "runtime:render",
@@ -4301,7 +4284,7 @@ function FloTraceProvider({ children, config = {}, stores, reduxStore, queryClie
     } catch (error) {
       console.error("[FloTrace] Error in Profiler callback:", error);
     }
-  };
+  }, []);
   const contextValue = {
     connected,
     enabled: mergedConfig.enabled,

package/dist/index.mjs

@@ -1,8 +1,9 @@
 // src/FloTraceProvider.tsx
-import React, { useEffect, useRef, createContext, useContext, Profiler } from "react";
+import React, { useCallback, useEffect, useRef, createContext, useContext, Profiler } from "react";
 
 // src/types.ts
 var DEFAULT_CONFIG = {
+  host: "127.0.0.1",
   port: 3457,
   appName: "React App",
   enabled: process.env.NODE_ENV === "development",
@@ -42,25 +43,31 @@ var _FloTraceWebSocketClient = class _FloTraceWebSocketClient {
       console.log("[FloTrace] Runtime disabled, skipping connection");
       return;
     }
-    if (typeof window === "undefined" || typeof WebSocket === "undefined") {
-      console.log("[FloTrace] Not in browser environment, skipping connection");
+    if (typeof WebSocket === "undefined") {
+      console.log("[FloTrace] WebSocket not available, skipping connection");
       return;
     }
     this.isConnecting = true;
     try {
-      const url = `ws://127.0.0.1:${this.config.port}`;
+      const url = `ws://${this.config.host}:${this.config.port}`;
       console.log(`[FloTrace] Connecting to ${url}...`);
       this.ws = new WebSocket(url);
       this.ws.onopen = () => {
         this.isConnecting = false;
         this.reconnectAttempts = 0;
-        console.log("[FloTrace] Connected to VS Code extension");
+        console.log("[FloTrace] Connected to FloTrace desktop");
         this.notifyConnectionChange(true);
+        let appUrl;
+        try {
+          appUrl = typeof window !== "undefined" && window.location ? window.location.href : void 0;
+        } catch {
+          appUrl = void 0;
+        }
         this.send({
           type: "runtime:ready",
           appName: this.config.appName,
           reactVersion: this.getReactVersion(),
-          appUrl: typeof window !== "undefined" ? window.location.href : void 0
+          appUrl
         });
         this.flush();
       };
@@ -4008,7 +4015,9 @@ function FloTraceProvider({ children, config = {}, stores, reduxStore, queryClie
   reduxStoreRef.current = reduxStore;
   const queryClientRef = useRef(queryClient);
   queryClientRef.current = queryClient;
-  if (mergedConfig.enabled && typeof window !== "undefined") {
+  const enabledRef = useRef(mergedConfig.enabled);
+  enabledRef.current = mergedConfig.enabled;
+  if (mergedConfig.enabled && typeof WebSocket !== "undefined") {
     getWebSocketClient(mergedConfig);
     installFiberTreeWalker();
     prewarmNetworkTracker();
@@ -4072,56 +4081,44 @@ function FloTraceProvider({ children, config = {}, stores, reduxStore, queryClie
             console.log("[FloTrace] Tree tracking stopped");
             break;
           case "ext:requestNodeProps": {
-            const nodeId = message.nodeId;
-            if (nodeId) {
-              const props = getNodeProps(nodeId);
-              client4.sendImmediate({
-                type: "runtime:nodeProps",
-                nodeId,
-                props: props || {},
-                timestamp: Date.now()
-              });
-            }
+            const props = getNodeProps(message.nodeId);
+            client4.sendImmediate({
+              type: "runtime:nodeProps",
+              nodeId: message.nodeId,
+              props: props || {},
+              timestamp: Date.now()
+            });
             break;
           }
           case "ext:requestNodeHooks": {
-            const hookNodeId = message.nodeId;
-            if (hookNodeId) {
-              const hooks = getNodeHooks(hookNodeId);
-              client4.sendImmediate({
-                type: "runtime:nodeHooks",
-                nodeId: hookNodeId,
-                hooks: hooks || [],
-                timestamp: Date.now()
-              });
-            }
+            const hooks = getNodeHooks(message.nodeId);
+            client4.sendImmediate({
+              type: "runtime:nodeHooks",
+              nodeId: message.nodeId,
+              hooks: hooks || [],
+              timestamp: Date.now()
+            });
             break;
           }
           case "ext:requestNodeEffects": {
-            const effectNodeId = message.nodeId;
-            if (effectNodeId) {
-              const effects = getNodeEffects(effectNodeId);
-              client4.sendImmediate({
-                type: "runtime:nodeEffects",
-                nodeId: effectNodeId,
-                effects: effects || [],
-                timestamp: Date.now()
-              });
-            }
+            const effects = getNodeEffects(message.nodeId);
+            client4.sendImmediate({
+              type: "runtime:nodeEffects",
+              nodeId: message.nodeId,
+              effects: effects || [],
+              timestamp: Date.now()
+            });
             break;
           }
           case "ext:requestDetailedRenderReason": {
-            const reasonNodeId = message.nodeId;
-            if (reasonNodeId) {
-              const reason = getDetailedRenderReason(reasonNodeId);
-              if (reason) {
-                client4.sendImmediate({
-                  type: "runtime:detailedRenderReason",
-                  nodeId: reasonNodeId,
-                  reason,
-                  timestamp: Date.now()
-                });
-              }
+            const reason = getDetailedRenderReason(message.nodeId);
+            if (reason) {
+              client4.sendImmediate({
+                type: "runtime:detailedRenderReason",
+                nodeId: message.nodeId,
+                reason,
+                timestamp: Date.now()
+              });
             }
             break;
           }
@@ -4130,18 +4127,15 @@ function FloTraceProvider({ children, config = {}, stores, reduxStore, queryClie
             console.log("[FloTrace] Full snapshot requested by extension");
             break;
           case "ext:requestTimeline": {
-            const timelineNodeId = message.nodeId;
-            if (timelineNodeId) {
-              const events = getTimeline(timelineNodeId);
-              const componentName = timelineNodeId.split("/").pop()?.replace(/-\d+$/, "") ?? "Unknown";
-              for (const event of events) {
-                client4.sendImmediate({
-                  type: "runtime:timelineEvent",
-                  nodeId: timelineNodeId,
-                  componentName,
-                  event
-                });
-              }
+            const events = getTimeline(message.nodeId);
+            const componentName = message.nodeId.split("/").pop()?.replace(/-\d+$/, "") ?? "Unknown";
+            for (const event of events) {
+              client4.sendImmediate({
+                type: "runtime:timelineEvent",
+                nodeId: message.nodeId,
+                componentName,
+                event
+              });
             }
             break;
           }
@@ -4153,9 +4147,7 @@ function FloTraceProvider({ children, config = {}, stores, reduxStore, queryClie
             break;
           // --- Individual tracker start/stop (sidebar panel show/hide) ---
           case "ext:startReduxTracking":
-            if (reduxStoreRef.current) {
-              safeTrackerOp("Redux install", () => installReduxTracker(reduxStoreRef.current, client4));
-            }
+            if (reduxStoreRef.current) safeTrackerOp("Redux install", () => installReduxTracker(reduxStoreRef.current, client4));
             break;
           case "ext:stopReduxTracking":
             safeTrackerOp("Redux uninstall", uninstallReduxTracker);
@@ -4168,19 +4160,14 @@ function FloTraceProvider({ children, config = {}, stores, reduxStore, queryClie
             break;
           case "ext:startZustandTracking":
             if (storesRef.current && Object.keys(storesRef.current).length > 0) {
-              safeTrackerOp("Zustand install", () => installZustandTracker(
-                storesRef.current,
-                client4
-              ));
+              safeTrackerOp("Zustand install", () => installZustandTracker(storesRef.current, client4));
             }
             break;
           case "ext:stopZustandTracking":
             safeTrackerOp("Zustand uninstall", uninstallZustandTracker);
             break;
           case "ext:startTanstackTracking":
-            if (queryClientRef.current) {
-              safeTrackerOp("TanStack Query install", () => installTanStackQueryTracker(queryClientRef.current, client4));
-            }
+            if (queryClientRef.current) safeTrackerOp("TanStack Query install", () => installTanStackQueryTracker(queryClientRef.current, client4));
             break;
           case "ext:stopTanstackTracking":
             safeTrackerOp("TanStack Query uninstall", uninstallTanStackQueryTracker);
@@ -4209,15 +4196,11 @@ function FloTraceProvider({ children, config = {}, stores, reduxStore, queryClie
       }, 100);
     };
   }, [mergedConfig.enabled, mergedConfig.port, mergedConfig.appName]);
-  const onRenderCallback = (id, phase, actualDuration, baseDuration, startTime, commitTime) => {
+  const onRenderCallback = useCallback((id, phase, actualDuration, baseDuration, _startTime, commitTime) => {
     try {
-      if (!mergedConfig.enabled) {
-        return;
-      }
+      if (!enabledRef.current) return;
       const client4 = getWebSocketClient();
-      if (!client4.connected) {
-        return;
-      }
+      if (!client4.connected) return;
       const normalizedPhase = phase === "nested-update" ? "update" : phase;
       client4.send({
         type: "runtime:render",
@@ -4231,7 +4214,7 @@ function FloTraceProvider({ children, config = {}, stores, reduxStore, queryClie
     } catch (error) {
       console.error("[FloTrace] Error in Profiler callback:", error);
     }
-  };
+  }, []);
   const contextValue = {
     connected,
     enabled: mergedConfig.enabled,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flotrace/runtime",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Runtime package for FloTrace - enables real-time render tracking in your React app",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",