Giter VIP home page Giter VIP logo

Comments (11)

ulken avatar ulken commented on May 27, 2024 1

OK, I think I'm onboard. Thanks for clarifying with more reasonable examples.

So, let's flip things around a little and try to play devil's advocate for a second:

What if we took it to the next level and exposed a lightweight, but enhanced log instance?

I'm thinking, the base would be log.message(text: string, options?: MessageOptions = { symbol: '│' }) (this is basically what you're asking for). To not deviate from the existing UI guidelines, it would output a newline before and after the logged line and use the appropriate color.

Then we could provide convenience wrappers around that, like:

log.info(text) = log.message(text, { symbol: 'ℹ' }) // would be blue
log.success(text) = log.message(text, { symbol: '✔' }) // would be green
log.warn(text) = log.message(text, { symbol: '⚠' }) // would be yellow
log.error(text) = log.message(text, { symbol: '✘' }) // would be red

One could even take it even further and add log.group()/log.groupEnd() which would indent the bar, but that would be for another time.

Thoughts?

// cc @natemoo-re

from clack.

ulken avatar ulken commented on May 27, 2024 1

Cool, cool. I can kick things off tonight, if you'd like? Free for you to build upon. I'll open and reference a PR with progress.

from clack.

ulken avatar ulken commented on May 27, 2024

I've hacked a way into it by creating a fake no-time spinner

😆 Creative! 👏

Just curious: where does note fall short for you? What's a typical use case for what your requesting?

from clack.

aerotoad avatar aerotoad commented on May 27, 2024

Well, note is like a big block of text spanning multiple lines with borders, title and decoration, therefore used for important messages and similar purposes.
I was aiming at just displaying a single line of text whenever convenient to communicate something to the user, but console.log will break the "continuous line" approach of the library. Therefore the hack to allow a single text line to be inside the whole thing.

Example mixed use case of text nodes and a note:

image

All those messages are static, not loading spinners, they don't get replaced after loading is complete and are not intended to. They serve as a "history" line of what's been happening.

from clack.

ulken avatar ulken commented on May 27, 2024

Well, note is like a big block of text spanning multiple lines with borders, title and decoration, therefore used for important messages and similar purposes.

Right.

All those messages are static, not loading spinners, they don't get replaced after loading is complete and are not intended to. They serve as a "history" line of what's been happening.

Now this is where you lose me. Looking at your example, the majority seem to be a perfect match for spinner. Why would you/the user want to see the intermediary states in hindsight? Isn't the important part to know if a step has resolved or not? The other feedback should only be relevant while waiting, no?

I'm not saying this ain't happening, I'll let @natemoo-re be the judge here. I just don't see the point.

from clack.

ulken avatar ulken commented on May 27, 2024

Now this is where you lose me. Looking at your example, the majority seem to be a perfect match for spinner. Why would you/the user want to see the intermediary states? Isn't the important part to know if a step has resolved or not?

OK, giving it a second round of thought.

While still standing by the above: if each step is more less instant (thus no need for a spinner and getting rid of the intermediary states) in this case and all you want to do is log the completion of each step, now that I would buy.

Although not the best use case, hypothetically your example would be compressed to:

✅ Base project downloaded # (although this ought to take some time, so this should use a spinner for best UX)
✅ Template applied # (again, if there is a risk of not being instantaneous, taking more than a few hundred ms, use a spinner)
🎉 Project created!

from clack.

ulken avatar ulken commented on May 27, 2024

Although, the last step should use outro(), IMO.

So still struggling to see a valid use case 🤷

from clack.

aerotoad avatar aerotoad commented on May 27, 2024

Maybe that wasn't the best use case for this, it was just what I was working on at the moment 😅
I can think of some other situations for this to be useful, like providing some context to the user before showing prompts:

image

Maybe provide some short contextual information:

image

Or even show some errors/information that are non-blocking with more data:

image

Or any other case where you just want to do a simple console.log but want to keep it as part of the flow as well.

from clack.

aerotoad avatar aerotoad commented on May 27, 2024

That sounds great! Fits right in with what I'm building for my CLI 😄
Honestly I thought I was doing something wrong at the beginning, I just wanted to show a line of information to the user without breaking the flow 😅

from clack.

natemoo-re avatar natemoo-re commented on May 27, 2024

@ulken that sounds like the perfect API! Will try to get to this as soon as I can. ❤️

from clack.

ulken avatar ulken commented on May 27, 2024

@aerotoad feel free to try it out in #82.

from clack.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.