Skip to content

Remove chalk #928

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

Merged
merged 2 commits into from
Feb 14, 2025
Merged

Remove chalk #928

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fc999ed
refactor: use styleText instead of chalk
kinggoesgaming Feb 13, 2025
248bc0f
build(deps): remove chalk
kinggoesgaming Feb 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions app/entry.server.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import { PassThrough } from 'node:stream'
import { styleText } from 'node:util'
import { createReadableStreamFromReadable } from '@react-router/node'

import * as Sentry from '@sentry/node'
import chalk from 'chalk'
import { isbot } from 'isbot'
import { renderToPipeableStream } from 'react-dom/server'
import {
Expand Down Expand Up @@ -107,7 +106,7 @@ export function handleError(
return
}
if (error instanceof Error) {
console.error(chalk.red(error.stack))
console.error(styleText('red', String(error.stack)))
void Sentry.captureException(error)
} else {
console.error(error)
Expand Down
4 changes: 2 additions & 2 deletions app/utils/db.server.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { styleText } from 'node:util'
import { remember } from '@epic-web/remember'
// Changed import due to issue: https://github.com/remix-run/react-router/pull/12644
import { PrismaClient } from '@prisma/client/index.js'
import chalk from 'chalk'

export const prisma = remember('prisma', () => {
// NOTE: if you change anything in this function you'll need to restart
Expand Down Expand Up @@ -29,7 +29,7 @@ export const prisma = remember('prisma', () => {
: e.duration < logThreshold * 1.4
? 'redBright'
: 'red'
const dur = chalk[color](`${e.duration}ms`)
const dur = styleText(color, `${e.duration}ms`)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is great except that the style text utility does not support the redBright color. So we'll have to come up with something else for that.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

According to the ForegroundColors type (which is the type for text colors), the following are allowed:

type ForegroundColors =
        | "black"
        | "blackBright"
        | "blue"
        | "blueBright"
        | "cyan"
        | "cyanBright"
        | "gray"
        | "green"
        | "greenBright"
        | "grey"
        | "magenta"
        | "magentaBright"
        | "red"
        | "redBright"
        | "white"
        | "whiteBright"
        | "yellow"
        | "yellowBright";

redBright appears to be allowed (and I am not seeing any type errors)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for double checking on that!

console.info(`prisma:query - ${dur} - ${e.query}`)
})
void client.$connect()
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,6 @@
"address": "^2.0.3",
"bcryptjs": "^2.4.3",
"better-sqlite3": "^11.8.1",
"chalk": "^5.4.1",
"class-variance-authority": "^0.7.1",
"close-with-grace": "^2.2.0",
"clsx": "^2.1.1",
Expand Down
16 changes: 7 additions & 9 deletions server/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import crypto from 'node:crypto'
import { styleText } from 'node:util'
import { createRequestHandler } from '@react-router/express'
import * as Sentry from '@sentry/node'
import { ip as ipAddress } from 'address'
import chalk from 'chalk'
import closeWithGrace from 'close-with-grace'
import compression from 'compression'
import express from 'express'
Expand Down Expand Up @@ -258,9 +258,7 @@ if (!portAvailable && !IS_DEV) {
const server = app.listen(portToUse, () => {
if (!portAvailable) {
console.warn(
chalk.yellow(
`⚠️ Port ${desiredPort} is not available, using ${portToUse} instead.`,
),
styleText('yellow', `⚠️ Port ${desiredPort} is not available, using ${portToUse} instead.`),
)
}
console.log(`🚀 We have liftoff!`)
Expand All @@ -276,9 +274,9 @@ const server = app.listen(portToUse, () => {

console.log(
`
${chalk.bold('Local:')} ${chalk.cyan(localUrl)}
${lanUrl ? `${chalk.bold('On Your Network:')} ${chalk.cyan(lanUrl)}` : ''}
${chalk.bold('Press Ctrl+C to stop')}
${styleText('bold', 'Local:')} ${styleText('cyan', localUrl)}
${lanUrl ? `${styleText('bold', 'On Your Network:')} ${styleText('cyan', lanUrl)}` : ''}
${styleText('bold', 'Press Ctrl+C to stop')}
`.trim(),
)
})
Expand All @@ -288,8 +286,8 @@ closeWithGrace(async ({ err }) => {
server.close((e) => (e ? reject(e) : resolve('ok')))
})
if (err) {
console.error(chalk.red(err))
console.error(chalk.red(err.stack))
console.error(styleText('red', String(err)))
console.error(styleText('red', String(err.stack)))
if (SENTRY_ENABLED) {
Sentry.captureException(err)
await Sentry.flush(500)
Expand Down