Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Colors do not work in browser console #52

Closed
nathanbabcock opened this issue Mar 8, 2023 · 2 comments · May be fixed by #53
Closed

Colors do not work in browser console #52

nathanbabcock opened this issue Mar 8, 2023 · 2 comments · May be fixed by #53

Comments

@nathanbabcock
Copy link

The readme claims browser support; however it seems this is a bit of a bait-and-switch. The .browser.js version does nothing and is hardcoded for every function just to return strings unchanged. Looking through the previous issues I understand the reasoning for this, which is to support certain bundlers which were throwing errors.

Working version

Here is a picocolors.ts that works in the Chrome dev console. The only thing I've changed is to delete the isColorSupported function at the top which uses the Node tty module. Also I converted it to Typescript so I can easily move it between projects in a single file.

// picocolors.ts

const formatter =
  (open: string, close: string, replace = open) =>
  (input: string | number | null | undefined) => {
    const string = '' + input
    const index = string.indexOf(close, open.length)
    return ~index
      ? open + replaceClose(string, close, replace, index) + close
      : open + string + close
  }

const replaceClose = (
  string: string,
  close: string,
  replace: string,
  index: number
): string => {
  const start = string.substring(0, index) + replace
  const end = string.substring(index + close.length)
  const nextIndex = end.indexOf(close)
  return ~nextIndex
    ? start + replaceClose(end, close, replace, nextIndex)
    : start + end
}

let createColors = (enabled = true) => ({
  isColorSupported: enabled,
  reset: enabled ? (s: string) => `\x1b[0m${s}\x1b[0m` : String,
  bold: enabled ? formatter('\x1b[1m', '\x1b[22m', '\x1b[22m\x1b[1m') : String,
  dim: enabled ? formatter('\x1b[2m', '\x1b[22m', '\x1b[22m\x1b[2m') : String,
  italic: enabled ? formatter('\x1b[3m', '\x1b[23m') : String,
  underline: enabled ? formatter('\x1b[4m', '\x1b[24m') : String,
  inverse: enabled ? formatter('\x1b[7m', '\x1b[27m') : String,
  hidden: enabled ? formatter('\x1b[8m', '\x1b[28m') : String,
  strikethrough: enabled ? formatter('\x1b[9m', '\x1b[29m') : String,
  black: enabled ? formatter('\x1b[30m', '\x1b[39m') : String,
  red: enabled ? formatter('\x1b[31m', '\x1b[39m') : String,
  green: enabled ? formatter('\x1b[32m', '\x1b[39m') : String,
  yellow: enabled ? formatter('\x1b[33m', '\x1b[39m') : String,
  blue: enabled ? formatter('\x1b[34m', '\x1b[39m') : String,
  magenta: enabled ? formatter('\x1b[35m', '\x1b[39m') : String,
  cyan: enabled ? formatter('\x1b[36m', '\x1b[39m') : String,
  white: enabled ? formatter('\x1b[37m', '\x1b[39m') : String,
  gray: enabled ? formatter('\x1b[90m', '\x1b[39m') : String,
  bgBlack: enabled ? formatter('\x1b[40m', '\x1b[49m') : String,
  bgRed: enabled ? formatter('\x1b[41m', '\x1b[49m') : String,
  bgGreen: enabled ? formatter('\x1b[42m', '\x1b[49m') : String,
  bgYellow: enabled ? formatter('\x1b[43m', '\x1b[49m') : String,
  bgBlue: enabled ? formatter('\x1b[44m', '\x1b[49m') : String,
  bgMagenta: enabled ? formatter('\x1b[45m', '\x1b[49m') : String,
  bgCyan: enabled ? formatter('\x1b[46m', '\x1b[49m') : String,
  bgWhite: enabled ? formatter('\x1b[47m', '\x1b[49m') : String,
})

export default createColors()

I would happily open a PR to replace the stub version with this (or the JS equivalent), assuming this project is not abandoned...
@nathanbabcock nathanbabcock mentioned this issue Mar 12, 2023
Open
@nathanbabcock
Copy link
Author

I've added a PR to fix this. In the mean time, here's a fork: picocolors-browser.

@alexeyraspopov
Copy link
Owner

Browser support means bundlers don't break if you accidentally ship this package to a browser. The suggested implementation only works in Chrome, which is not the Web. I'm happy to revisit this when Safari and Firefox support this too.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: enable browser support nathanbabcock/picocolors-browser
2 participants
@alexeyraspopov @nathanbabcock