How to extend console.log which can accept args

Question

I've been working on extending console.log to make a colorful one that keeps the stack trace as to where it has been called. I've tried some solutions, but finally reach this point:

export const colorizedLog = (
  text: string,
  status: keyof typeof ColorStatus = "dark",
  ...args: any
) =>
  console.log.bind(
    console,
    `%c ${text}`,
    `font-weight:bold; color: ${ColorStatus[status]}`,
    ...args
  );

With this little binding, we will be able to keep the stack trace, but the problem here is we have to use it with an annoying extra () at the end, because of returning value is the function itself which is the result of bind:

 colorizedLog(
    "Title:",
    "info",
    "This is a working example")();

The top other resources that I've read through are as below:

1. Extending console.log
2. Macro using babel- kent.c dodds
3. Webpack Define plugin

const colorizedLog = (text, color= "#40a7e3", ...args) =>
  console.log.bind(
    console,
    `%c ${text}`,
    `font-weight:bold; color:${color}`,
    ...args
  );
colorizedLog("Title:", "#40a7e3", "This is a working example")();

Update: Stack trace

useAppVersion.ts

App.vue

Chrome Console

Answer 1

You can make it immediately invoked:

const colorizedLog = (text, color= "#40a7e3", ...args) =>
  console.log.bind(
    console,
    `%c ${text}`,
    `font-weight:bold; color:${color}`,
    ...args
  )();

colorizedLog("Title:", "#40a7e3", "This is a working example");