id is missing from Log typing in documentation

[kgrhartlage]

The current documentation reads:

type Logs = Log[]

interface Log {
  // The log method
  method: Methods
  // The arguments passed to console API
  data: any[]
}

However, id seems to be supported and is used for the list key prop. This helped me resolve a bug in my application where we start to mutate the logs array once a max length is reached, while new logs are still coming in.

If desired, I can open a PR to update the README.

[5M7-Api]

@kgrhartlage How to fix this issue? I'm experiencing this too.

[kgrhartlage]

Not sure I understand the question. You can pass id as a property of Log, see here.

[moatorres]

I think he meant that type definitions of Message are conflicting (and also not top-level exported).

If we import Message from import { Message } from 'console-feed/lib/definitions/Console':

import { Console, Hook, Unhook } from 'console-feed'
import { HookedConsole, Message } from 'console-feed/lib/definitions/Console'
import React from 'react'

const Example = () => {
  const [logs, setLogs] = React.useState<Message[]>([])

  React.useEffect(() => {
    Hook(window.console, (log) => setLogs((currLogs) => [...currLogs, log]), false)
    return () => {
      Unhook(window.console as unknown as HookedConsole) // <- this casting shouldn't be needed
    }
  }, [])

  return <Console logs={logs} variant="dark" /> // <- type of 'logs' has conflicts
}

It will generate the following type error:

Type 'import("/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/console-feed/lib/definitions/Console").Message[]' is not assignable to type 'import("/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/console-feed/lib/definitions/Component").Message[]'.
  Property 'id' is missing in type 'import("/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/console-feed/lib/definitions/Console").Message' but required in type 'import("/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/console-feed/lib/definitions/Component").Message'.ts(2322)
Payload.d.ts(4, 3): 'id' is declared here.
Component.d.ts(24, 3): The expected type comes from property 'logs' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Console> & Readonly<Props>'

If we import Message from import { Message } from 'console-feed/lib/definitions/Component', then we have another error:

Argument of type '(currLogs: Message[]) => Message[]' is not assignable to parameter of type 'SetStateAction<Message[]>'.
  Type '(currLogs: Message[]) => Message[]' is not assignable to type '(prevState: Message[]) => Message[]'.
    Type 'import("/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/console-feed/lib/definitions/Console").Message[]' is not assignable to type 'import("/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/console-feed/lib/definitions/Component").Message[]'.
      Property 'id' is missing in type 'import("/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/console-feed/lib/definitions/Console").Message' but required in type 'import("/node_modules/.pnpm/[email protected][email protected][email protected][email protected][email protected]/node_modules/console-feed/lib/definitions/Component").Message'.ts(2345)
Payload.d.ts(4, 3): 'id' is declared here.

So to avoid the type conflicts we end up having to type the state as any[], like the following, which is not ideal.

const [logs, setLogs] = React.useState<any[]>([])

Or casting like this (not sure if that's the intended usage):

import { Console, Decode, Hook, Unhook } from 'console-feed'
import { Message as ComponentMessage } from 'console-feed/lib/definitions/Component'
import { HookedConsole, Message as ConsoleMessage } from 'console-feed/lib/definitions/Console'
import React from 'react'

const LogsContainer = () => {
  const [logs, setLogs] = React.useState<ConsoleMessage[]>([])

  React.useEffect(() => {
    Hook(window.console, (log) => setLogs((currLogs) => [...currLogs, Decode(log)]), false)
    return () => {
      Unhook(window.console as unknown as HookedConsole)
    }
  }, [])

  return <Console logs={logs as ComponentMessage[]} variant="dark" />
}

Any ideas or suggestions? For reference, that's happening using "typescript": "~5.7.2" and "console-feed": "^3.8.0"