Skip to content

fix(deps): replace ora and log-symbols with tiny dependency nanospinner #7026

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.

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
Mar 14, 2025

Conversation

serhalp
Copy link
Member

@serhalp serhalp commented Feb 5, 2025

Summary

This should reduce our package size a bit, which is huge. See https://github.com/es-tooling/module-replacements/blob/main/docs/modules/ora.md.

I also added some missing types along the way.

@@ -15,8 +15,7 @@ const preserveScripts = new Set([
'prepublishOnly',
])

let spinner = ora({
spinner: 'star',
Copy link
Member Author

Choose a reason for hiding this comment

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

this one is a CI script so I didn't bother preserving the exact styling

Copy link

github-actions bot commented Feb 5, 2025

📊 Benchmark results

Comparing with 09c04a0

  • Dependency count: 1,168 ⬇️ 1.20% decrease vs. 09c04a0
  • Package size: 280 MB ⬇️ 0.20% decrease vs. 09c04a0
  • Number of ts-expect-error directives: 716 ⬇️ 1.96% decrease vs. 09c04a0

Comment on lines +3 to +6
const DOTS_SPINNER = {
interval: 80,
frames: ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'],
}
Copy link
Member Author

Choose a reason for hiding this comment

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

This was the default in ora, which we were implicitly using here.

Comment on lines -47 to +49
runCommand(settings.command, { env: settings.env, spinner, cwd })
if (settings.command) {
runCommand(settings.command, { env: settings.env, spinner, cwd })
}
Copy link
Member Author

Choose a reason for hiding this comment

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

If you scroll up you'll see we were already doing this in one branch but not the other. Adding some type safety uncovered this.

// @ts-expect-error TS(7006) FIXME: Parameter 'writeStream' implicitly has an 'any' ty... Remove this comment to see the full error message
const pipeDataWithSpinner = (writeStream, chunk) => {
if (spinner && spinner.isSpinning) {
const pipeDataWithSpinner = (writeStream: NodeJS.WriteStream, chunk: any) => {
Copy link
Member Author

Choose a reason for hiding this comment

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

To be clear, chunk is literally typed as any in the NodeJS types. This isn't a lazy type 😄.

Comment on lines +63 to 71
if (spinner?.isSpinning) {
spinner.clear()
spinner.isSilent = true
}
writeStream.write(chunk, () => {
if (spinner && spinner.isSpinning) {
spinner.isSilent = false
spinner.render()
if (spinner?.isSpinning) {
spinner.start()
}
})
}
Copy link
Member Author

@serhalp serhalp Feb 5, 2025

Choose a reason for hiding this comment

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

Feel free to compare the docs for ora and picospinner and double-check me here, but I think this should reproduce the behaviour. Of course I'll poke at it manually before considering merging.

@serhalp
Copy link
Member Author

serhalp commented Feb 5, 2025

Dependency count: 1,158 ⬇️ 1.04% decrease
Package size: 319 MB ⬆️ 1.01% increase

Noooooooo

@43081j
Copy link

43081j commented Feb 16, 2025

@serhalp i would actually recommend using nanospinner or picospinner (if you need a little more control of rendering)

particularly nanospinner has been adopted widely elsewhere so we can benefit from npm de-duplication by using it. its also generally faster/smaller (though these are all spinners so they're about as big/fast as each other...)

and it uses picocolors, which again has been widely adopted as the colours library of choice, so will de-dupe well

This should reduce our package size.

I also added some missing types along the way.
Comment on lines 18 to +19
// @ts-expect-error TS(7023) FIXME: 'listSites' implicitly has return type 'any' becau... Remove this comment to see the full error message
export const listSites = async ({ api, options }): SiteInfo[] => {
export const listSites = async ({ api, options }): Promise<SiteInfo[]> => {
Copy link
Member Author

Choose a reason for hiding this comment

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

I have the rest of this fixed in another draft PR. I just needed this to unblock errors elsewhere.

@serhalp serhalp changed the title fix(deps): replace ora and log-symbols with tiny dependency yocto-spinner fix(deps): replace ora and log-symbols with tiny dependency picospinner Mar 13, 2025
@serhalp serhalp marked this pull request as ready for review March 13, 2025 12:06
@serhalp serhalp requested a review from a team as a code owner March 13, 2025 12:06
Comment on lines -19 to +18
if (!options.json) {
// @ts-expect-error TS(2345) FIXME: Argument of type '{ spinner: Ora | undefined; }' i... Remove this comment to see the full error message
if (spinner) {
Copy link
Member Author

Choose a reason for hiding this comment

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

These are equivalent, but this is less leaky and makes TS happy. We only define a spinner (upstream) when --json isn't true.

@@ -45,6 +45,11 @@ const languages = [
{ name: 'Rust', value: 'rust' },
]

const MOON_SPINNER = {
Copy link
Contributor

Choose a reason for hiding this comment

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

Cute!

Copy link
Contributor

@khendrikse khendrikse left a comment

Choose a reason for hiding this comment

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

I'm excited about this!

@serhalp serhalp merged commit 32ee8c0 into main Mar 14, 2025
52 checks passed
@serhalp serhalp deleted the fix/replace-ora branch March 14, 2025 12:28
@serhalp serhalp changed the title fix(deps): replace ora and log-symbols with tiny dependency picospinner fix(deps): replace ora and log-symbols with tiny dependency nanospinner Mar 25, 2025
serhalp added a commit that referenced this pull request Mar 25, 2025
This was a small regression introduced in #7026.

I didn't quite map the previous lib's API to nanospinner's correctly.

The intent here is to manually control each frame render and each clear. Instead, the
spinner here was already started before it's passed in to this method, then it was cleared
and started again on each chunk - but `start()` here would start a new interval loop and
set up new node.js exit listeners but `clear()` wouldn't clear them (`reset()` does that).

This was leading to unnecessary resource utilization and printing warnings like this:

```
MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGINT listeners added to [process]. MaxListeners is 10. Use emitter.setMaxListeners() to increase limit
(Use node --trace-warnings ... to show where the warning was created)
(node:61086) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGTERM listeners added to [process]. MaxListeners is 10. Use emitter.setMaxListeners() to increase limit
```

The fix here is to just manually render a single frame (`.spin()`) at a time (and `stop()`
the initial loop).
serhalp added a commit that referenced this pull request Mar 25, 2025
This was a small regression introduced in #7026.

I didn't quite map the previous lib's API to nanospinner's correctly.

The intent here is to manually control each frame render and each clear. Instead, the
spinner here was already started before it's passed in to this method, then it was cleared
and started again on each chunk - but `start()` here would start a new interval loop and
set up new node.js exit listeners but `clear()` wouldn't clear them (`reset()` does that).

This was leading to unnecessary resource utilization and printing warnings like this:

```
MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGINT listeners added to [process]. MaxListeners is 10. Use emitter.setMaxListeners() to increase limit
(Use node --trace-warnings ... to show where the warning was created)
(node:61086) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGTERM listeners added to [process]. MaxListeners is 10. Use emitter.setMaxListeners() to increase limit
```

The fix here is to just manually render a single frame (`.spin()`) at a time (and `stop()`
the initial loop).
serhalp added a commit that referenced this pull request Mar 25, 2025
This was a small regression introduced in #7026.

I didn't quite map the previous lib's API to nanospinner's correctly.

The intent here is to manually control each frame render and each clear. Instead, the
spinner here was already started before it's passed in to this method, then it was cleared
and started again on each chunk - but `start()` here would start a new interval loop and
set up new node.js exit listeners but `clear()` wouldn't clear them (`reset()` does that).

This was leading to unnecessary resource utilization and printing warnings like this:

```
MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGINT listeners added to [process]. MaxListeners is 10. Use emitter.setMaxListeners() to increase limit
(Use node --trace-warnings ... to show where the warning was created)
(node:61086) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 SIGTERM listeners added to [process]. MaxListeners is 10. Use emitter.setMaxListeners() to increase limit
```

The fix here is to just manually render a single frame (`.spin()`) at a time (and `stop()`
the initial loop).
serhalp added a commit that referenced this pull request Apr 28, 2025
See:
1. #7026
2. #7131
3. #7124

Oops, I was really overthinking this. All this needs to do is, every time a chunk comes in
from the underlying framework dev server, clear the spinner line, write the chunk, then
resume the spinner.

This wasn't set up right at all, which was obfuscated by the erroneous use of `isSpinning`
(see previous commit).
serhalp added a commit that referenced this pull request Apr 29, 2025
See:
1. #7026
2. #7131
3. #7124

Oops, I was really overthinking this. All this needs to do is, every time a chunk comes in
from the underlying framework dev server, clear the spinner line, write the chunk, then
resume the spinner.

This wasn't set up right at all, which was obfuscated by the erroneous use of `isSpinning`
(see previous commit).
serhalp added a commit that referenced this pull request May 1, 2025
See:
1. #7026
2. #7131
3. #7124

Oops, I was really overthinking this. All this needs to do is, every time a chunk comes in
from the underlying framework dev server, clear the spinner line, write the chunk, then
resume the spinner.

This wasn't set up right at all, which was obfuscated by the erroneous use of `isSpinning`
(see previous commit).
serhalp added a commit that referenced this pull request May 1, 2025
See:
1. #7026
2. #7131
3. #7124

Oops, I was really overthinking this. All this needs to do is, every time a chunk comes in
from the underlying framework dev server, clear the spinner line, write the chunk, then
resume the spinner.

This wasn't set up right at all, which was obfuscated by the erroneous use of `isSpinning`
(see previous commit).
serhalp added a commit that referenced this pull request May 1, 2025
…t") (#7242)

* fix: fix framework server loading spinner rendering

This is a regression in the loading spinner shown before "Waiting for framework port", introduced in 19.0.3.

* fix: fix framework server spinner

See:
1. #7026
2. #7131
3. #7124

Oops, I was really overthinking this. All this needs to do is, every time a chunk comes in
from the underlying framework dev server, clear the spinner line, write the chunk, then
resume the spinner.

This wasn't set up right at all, which was obfuscated by the erroneous use of `isSpinning`
(see previous commit).
serhalp added a commit that referenced this pull request May 1, 2025
* fix: fix framework server loading spinner rendering

This is a regression in the loading spinner shown before "Waiting for framework port", introduced in 19.0.3.

* fix: fix framework server spinner

See:
1. #7026
2. #7131
3. #7124

Oops, I was really overthinking this. All this needs to do is, every time a chunk comes in
from the underlying framework dev server, clear the spinner line, write the chunk, then
resume the spinner.

This wasn't set up right at all, which was obfuscated by the erroneous use of `isSpinning`
(see previous commit).

* fix: remove "Netlify Dev" prefix from deploy log

* fix(dev): polish and improve dev command

- Reworded messages for clarity and consistency
  - I think "Netlify Dev" was a vestige of Netlify CLI's predecessor...? In any case, I
    dropped this wording.
  - e.g. Starting Netlify Dev with Astro → Starting Astro dev server
  - e.g. Waiting for framework port 4321 → Waiting for Astro dev server to be ready on port 4321
- Removed the "🔸 Netlify Dev 🔸" first line (doesn't seem to add anything)
- Attempted to address the common confusion around the two printed URLs (our dev server +
  framework server):
  - more distinctive box
  - 'inverted' colour on the URL (cyan background) to make it stand out the most
  - changed `Server now ready on http...` to `Local dev server ready: http...`
- Attempted to address the common confusion around this message: `✔ Waiting for framework
  port 4321. This can be configured using the 'targetPort' property in the netlify.toml`
  - (Users often think this is an error message. I don't blame them.)
  - I changed this to `Waiting for Astro dev server to be ready on port 4321` (where Astro is the framework name)
  - I added logic so that after 5 seconds of waiting the message changes to `Still waiting
    for server on port 4321 to be ready. Are you sure this is the correct port for your
    Astro site? Change this with the targetPort option in your netlify.toml.`.
- Collapse "Injected env var" messages into a single line per source
- ◈ → ⬥

* fix: revert the framework server log prefix for now
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants