chore: install reactotron-core-types and update usage (#48)

* Update package dependencies to include reactotron-core-contract version 0.2.5 in package.json and package-lock.json

* Refactor timeline item types to use CommandType constants from reactotron-core-contract

- Updated TimelineItem types in various components to utilize CommandType for better type safety and consistency.
- Re-exported types from reactotron-core-contract in app/types.ts for convenience.
- Adjusted type guards in Timeline components to check against CommandType values instead of string literals.
- Enhanced StateSubscription type to align with the contract's structure.

Author: joshuayoes

app/components/DetailPanel.tsx

@@ -10,7 +10,8 @@ import {
   Linking,
 } from "react-native"
 import { themed } from "../theme/theme"
-import { TimelineItem } from "../types"
+import { CommandType } from "reactotron-core-contract"
+import type { TimelineItem } from "../types"
 import { TreeViewWithProvider } from "./TreeView"
 import ActionButton from "./ActionButton"
 import { Tooltip } from "./Tooltip"
@@ -44,9 +45,9 @@ export function DetailPanel({ selectedItem, onClose }: DetailPanelProps) {
 
   const getHeaderTitle = () => {
     switch (selectedItem.type) {
-      case "log":
+      case CommandType.Log:
         return "Log Details"
-      case "display":
+      case CommandType.Display:
         return "Display Details"
       default:
         return "Network Details"
@@ -55,12 +56,11 @@ export function DetailPanel({ selectedItem, onClose }: DetailPanelProps) {
 
   const renderDetailContent = () => {
     switch (selectedItem.type) {
-      case "log":
+      case CommandType.Log:
         return <LogDetailContent item={selectedItem} />
-      case "display":
+      case CommandType.Display:
         return <DisplayDetailContent item={selectedItem} />
-      case "api.request":
-      case "api.response":
+      case CommandType.ApiResponse:
         return <NetworkDetailContent item={selectedItem} />
       default:
         return null
@@ -113,7 +113,11 @@ export function DetailPanel({ selectedItem, onClose }: DetailPanelProps) {
   )
 }
 
-function DisplayDetailContent({ item }: { item: TimelineItem & { type: "display" } }) {
+function DisplayDetailContent({
+  item,
+}: {
+  item: TimelineItem & { type: typeof CommandType.Display }
+}) {
   const { payload } = item
   const { name, image, preview, ...rest } = payload
 
@@ -183,7 +187,7 @@ function DisplayDetailContent({ item }: { item: TimelineItem & { type: "display"
 /**
  * Renders detailed content for log timeline items including level, message, stack trace, and metadata.
  */
-function LogDetailContent({ item }: { item: TimelineItem & { type: "log" } }) {
+function LogDetailContent({ item }: { item: TimelineItem & { type: typeof CommandType.Log } }) {
   const { payload } = item
 
   return (
@@ -234,7 +238,7 @@ function LogDetailContent({ item }: { item: TimelineItem & { type: "log" } }) {
 function NetworkDetailContent({
   item,
 }: {
-  item: TimelineItem & { type: "api.request" | "api.response" }
+  item: TimelineItem & { type: typeof CommandType.ApiResponse }
 }) {
   const { payload } = item
 

app/components/TimelineDisplayItem.tsx

@@ -1,4 +1,5 @@
-import { TimelineItemDisplay } from "../types"
+import { CommandType } from "reactotron-core-contract"
+import type { TimelineItemDisplay } from "../types"
 import { TimelineItem } from "./TimelineItem"
 
 type TimelineDisplayItemProps = {
@@ -18,7 +19,7 @@ export function TimelineDisplayItem({
   const { payload, date, deltaTime, important } = item
 
   // Type guard to ensure this is a display item
-  if (item.type !== "display") return null
+  if (item.type !== CommandType.Display) return null
 
   return (
     <TimelineItem

app/components/TimelineLogItem.tsx

@@ -1,5 +1,6 @@
 import { MenuListEntry } from "../utils/useActionMenu"
-import { TimelineItemLog } from "../types"
+import { CommandType } from "reactotron-core-contract"
+import type { TimelineItemLog } from "../types"
 import { TimelineItem } from "./TimelineItem"
 import IRClipboard from "../native/IRClipboard/NativeIRClipboard"
 
@@ -16,7 +17,7 @@ export function TimelineLogItem({ item, isSelected = false, onSelect }: Timeline
   const { payload, date, deltaTime, important } = item
 
   // Type guard to ensure this is a log item
-  if (item.type !== "log") return null
+  if (item.type !== CommandType.Log) return null
 
   // Determine log level and color
   let level: string = "DEBUG"

app/components/TimelineNetworkItem.tsx

@@ -1,4 +1,5 @@
-import { TimelineItemNetwork } from "../types"
+import { CommandType } from "reactotron-core-contract"
+import type { TimelineItemNetwork } from "../types"
 import { TimelineItem } from "./TimelineItem"
 import { useTheme } from "../theme/theme"
 import type { MenuListEntry } from "../utils/useActionMenu"
@@ -19,7 +20,7 @@ export function TimelineNetworkItem({
   onSelect,
 }: TimelineNetworkItemProps) {
   // Type guard to ensure this is a network item
-  if (item.type !== "api.response") return null
+  if (item.type !== CommandType.ApiResponse) return null
 
   const { payload, date, deltaTime, important } = item
 

app/components/TimelineToolbar.tsx

@@ -1,4 +1,10 @@
-export type FilterType = "all" | "log" | "display" | "api.request" | "api.response"
+import { CommandType } from "reactotron-core-contract"
+
+export type FilterType =
+  | "all"
+  | typeof CommandType.Log
+  | typeof CommandType.Display
+  | typeof CommandType.ApiResponse
 // export type LogLevel = "all" | "debug" | "warn" | "error"
 // export type SortBy = "time-newest" | "time-oldest" | "type" | "level"
 

app/screens/StateScreen.tsx

@@ -6,7 +6,7 @@ import { TreeViewWithProvider } from "../components/TreeView"
 import { useState } from "react"
 import { Divider } from "../components/Divider"
 import { useKeyboardEvents } from "../utils/system"
-import { StateSubscription } from "app/types"
+import type { StateSubscription } from "app/types"
 import { Icon } from "../components/Icon"
 
 export function StateScreen() {

app/screens/TimelineScreen.tsx

@@ -1,5 +1,6 @@
 import { useGlobal } from "../state/useGlobal"
-import { TimelineItem } from "../types"
+import { CommandType } from "reactotron-core-contract"
+import type { TimelineItem } from "../types"
 import { TimelineLogItem } from "../components/TimelineLogItem"
 import { TimelineNetworkItem } from "../components/TimelineNetworkItem"
 import { TimelineDisplayItem } from "../components/TimelineDisplayItem"
@@ -37,13 +38,13 @@ const TimelineItemRenderer = ({
     onSelectItem(item)
   }
 
-  if (item.type === "log") {
+  if (item.type === CommandType.Log) {
     return <TimelineLogItem item={item} isSelected={isSelected} onSelect={handleSelectItem} />
   }
-  if (item.type === "display") {
+  if (item.type === CommandType.Display) {
     return <TimelineDisplayItem item={item} isSelected={isSelected} onSelect={handleSelectItem} />
   }
-  if (item.type === "api.response") {
+  if (item.type === CommandType.ApiResponse) {
     return <TimelineNetworkItem item={item} isSelected={isSelected} onSelect={handleSelectItem} />
   }
   console.tron.log("Unknown item", item)
@@ -53,11 +54,11 @@ const TimelineItemRenderer = ({
 function getTimelineTypes(activeItem: MenuItemId): FilterType[] {
   switch (activeItem) {
     case "logs":
-      return ["log", "display"]
+      return [CommandType.Log, CommandType.Display]
     case "network":
-      return ["api.request", "api.response"]
+      return [CommandType.ApiResponse]
     default:
-      return ["log", "display", "api.request", "api.response"]
+      return [CommandType.Log, CommandType.Display, CommandType.ApiResponse]
   }
 }
 

app/state/connectToServer.ts

@@ -1,5 +1,6 @@
 import { getUUID } from "../utils/random/getUUID"
-import { StateSubscription, TimelineItem } from "../types"
+import { CommandType } from "reactotron-core-contract"
+import type { StateSubscription, TimelineItem } from "../types"
 import { withGlobal } from "./useGlobal"
 import { isSafeKey, sanitizeValue } from "../utils/sanitize"
 
@@ -86,12 +87,12 @@ export function connectToServer(props: { port: number } = { port: 9292 }): Unsub
     }
 
     if (data.type === "command" && data.cmd) {
-      if (data.cmd.type === "clear") setTimelineItems([])
+      if (data.cmd.type === CommandType.Clear) setTimelineItems([])
 
       if (
-        data.cmd.type === "log" ||
-        data.cmd.type === "api.response" ||
-        data.cmd.type === "display"
+        data.cmd.type === CommandType.Log ||
+        data.cmd.type === CommandType.ApiResponse ||
+        data.cmd.type === CommandType.Display
       ) {
         // Add a unique ID to the timeline item
         data.cmd.id = `${data.cmd.clientId}-${data.cmd.messageId}`
@@ -106,7 +107,7 @@ export function connectToServer(props: { port: number } = { port: 9292 }): Unsub
       } else {
         console.tron.log("unknown command", data.cmd)
       }
-      if (data.cmd.type === "state.values.change") {
+      if (data.cmd.type === CommandType.StateValuesChange) {
         console.log("state.values.change", data.cmd)
         data.cmd.payload.changes.forEach((change: StateSubscription) => {
           if (!isSafeKey(data.cmd.clientId) || !isSafeKey(change.path)) {

app/types.ts

@@ -1,3 +1,18 @@
+// Import types from the official Reactotron contract package
+import { CommandType } from "reactotron-core-contract"
+import type {
+  ErrorStackFrame,
+  ErrorLogPayload,
+  CommandTypeKey,
+  StateValuesChangePayload,
+  StateValuesSubscribePayload,
+  StateKeysRequestPayload,
+  StateValuesRequestPayload,
+  StateBackupRequestPayload,
+  StateRestoreRequestPayload,
+  Command,
+} from "reactotron-core-contract"
+
 /**
  * ClientData is data describing a particular client
  * (usually a React Native app running on a simulator or device).
@@ -34,19 +49,24 @@ export type ClientData = {
   address: string
 }
 
-export interface ErrorStackFrame {
-  fileName: string
-  functionName: string
-  lineNumber: number
-  columnNumber: number | null
-}
-
-export interface ErrorLogPayload {
-  level: "error"
-  message: string
-  stack: Error["stack"] | string[] | ErrorStackFrame[]
+// Re-export types from reactotron-core-contract for convenience
+export type {
+  ErrorStackFrame,
+  ErrorLogPayload,
+  CommandTypeKey,
+  Command,
+  StateValuesChangePayload,
+  StateValuesSubscribePayload,
+  StateKeysRequestPayload,
+  StateValuesRequestPayload,
+  StateBackupRequestPayload,
+  StateRestoreRequestPayload,
 }
+export { CommandType }
 
+// Extended LogPayload to support debug level with objects
+// Note: We extend the contract's LogPayload to allow Record<string, any> for debug messages
+// The contract only supports string messages, but we need richer debugging capabilities
 export type LogPayload =
   | {
       level: "debug"
@@ -81,13 +101,17 @@ export interface NetworkResponse {
 }
 
 export interface NetworkPayload {
-  type: "api.request" | "api.response"
+  type: typeof CommandType.ApiResponse
   request?: NetworkRequest
   response?: NetworkResponse
   error?: string
 }
 
-// Unified timeline item type
+/**
+ * TimelineItem types are app-specific representations of commands received from reactotron-core-server.
+ * While they share similarities with the Command type from reactotron-core-contract, they are
+ * tailored for this macOS app's UI needs (e.g., date as string for serialization, additional id field).
+ */
 export type TimelineItemBase = {
   id: string
   important: boolean
@@ -99,23 +123,22 @@ export type TimelineItemBase = {
 }
 
 export type TimelineItemLog = TimelineItemBase & {
-  type: "log"
+  type: typeof CommandType.Log
   payload: LogPayload
 }
 
 export type TimelineItemNetwork = TimelineItemBase & {
-  type: "api.request" | "api.response"
+  type: typeof CommandType.ApiResponse
   payload: NetworkPayload
 }
 
 export type TimelineItemDisplay = TimelineItemBase & {
-  type: "display"
+  type: typeof CommandType.Display
   payload: DisplayPayload
 }
 
 export type TimelineItem = TimelineItemLog | TimelineItemNetwork | TimelineItemDisplay
 
-export type StateSubscription = {
-  path: string
-  value: any
-}
+// StateSubscription represents a single state path/value pair tracked by the app
+// This is derived from the contract's StateValuesChangePayload structure
+export type StateSubscription = StateValuesChangePayload["changes"][number]