progress bar (WIP) #3

brigand · 2017-07-08T20:07:24Z

Hey, cool project!

I'm working on adding a progress bar component, but getting a weird error:

$ ./examples/run progress
/Users/fb/github/brigand/ink/lib/instance.js:10
const isClassComponent = component => component.prototype instanceof Component;
                                               ^

TypeError: Cannot read property 'prototype' of undefined
    at isClassComponent (/Users/fb/github/brigand/ink/lib/instance.js:10:39)
    at new Instance (/Users/fb/github/brigand/ink/lib/instance.js:40:27)
    at getOrCreateInstance (/Users/fb/github/brigand/ink/lib/instance.js:20:14)
    at children.forEach.child (/Users/fb/github/brigand/ink/lib/instance.js:84:27)
    at Array.forEach (native)
    at Instance.mount (/Users/fb/github/brigand/ink/lib/instance.js:82:17)
    at children.forEach.child (/Users/fb/github/brigand/ink/lib/instance.js:87:19)
    at Array.forEach (native)
    at Instance.mount (/Users/fb/github/brigand/ink/lib/instance.js:82:17)
    at diff (/Users/fb/github/brigand/ink/lib/diff.js:40:16)

Example file | Component file

Any ideas?

ignu · 2017-07-08T20:35:09Z

I got this at one point as well... It took me a while to figure out the right babel settings for this project. This .babelrc is working for me in a sample app.

{
  "presets": ["babel-preset-react"],
  "env": {
    "development": {
      "plugins": [
        [
          "transform-react-jsx",
          {
            "pragma": "h"
          }
        ]
      ]
    }
  }
}

brigand · 2017-07-08T20:54:40Z

Doh, wasn't exporting the component. I'll add a warning for that in a separate PR.

brigand · 2017-07-08T21:16:49Z

@vadimdemedes I think this is ready to merge if you want it.

To try it: npm install, ./examples/run progress. Also see the docs.

sindresorhus · 2017-07-08T23:11:50Z

lib/components/bar.js

+		const max = Math.min(Math.floor(space * percent), space);
+		for (let i = 0; i < max; i++) {
+			str += char;
+		}


char.repeat(max);

sindresorhus · 2017-07-08T23:13:00Z

index.js

@@ -19,6 +20,7 @@ exports.Newline = Newline;
 exports.Indent = Indent;
 exports.Group = Group;
 exports.Text = Text;
+exports.Bar = Bar;


Just Bar is too ambiguous. ProgressBar would be better.

sindresorhus · 2017-07-08T23:14:28Z

examples/progress.js

+/* @jsx h */
+const {h, mount, Component, Text, Bar} = require('../');
+
+const MAX = 20;


Max what? Would be nice if the variable name was more descriptive.

Tried a different example.

sindresorhus · 2017-07-08T23:14:49Z

examples/progress.js

+	}
+
+	render() {
+		const text = `Running `;


I would just inline this. Everything else is inline.

It's used in two places, should I hard code the length?

Oops, didn't notice that. Would be nice if the bar just calculated the left thing automatically. Feels weird having to manually specify it.

It'd have to know what else is on the line, or take the other content as a prop and render it itself, and it couldn't be custom components, and it might be a with multiple to have different colors.

It could have you either pass leftText (string) or leftSize (number), and if you pass leftText it'd render it. This seems confusing though.

I think Ink should handle that for us. That's the behavior I expected. That would mean Ink would provide us the available screen space instead of us using process.stdout.columns directly. Let's wait and see what @vadimdemedes thinks.

Very good idea, I'd want that to be implemented natively too. Although I've been thinking and didn't come up with a way to solve this properly. Opened #5 to discuss this.

sindresorhus · 2017-07-08T23:15:54Z

.babelrc

+      ]
+    }
+  }
+}


Put the Babel config in package.json

sindresorhus · 2017-07-08T23:16:16Z

docs/Bar.md

@@ -0,0 +1,40 @@
+The Bar component represents progress. See examples/progress.js for an example app.


Add a title: # Bar

Done. ProgressBar.

sindresorhus · 2017-07-08T23:37:58Z

docs/ProgressBar.md

+
+## Props
+
+### char


char => character

sindresorhus · 2017-07-08T23:38:57Z

Nice work @brigand. This is looking very good :)

vadimdemedes · 2017-07-09T12:02:44Z

@sindresorhus Thank you very much for reviewing and helping!

@brigand Thanks to you as well for writing a great component. I'd love it, if you could release it as an individual project (ink-progress-bar). My goal is to keep the core very minimal and contain the most basic set of required components, such as: <Text> (still thinking if I should extract it), <Indent>, <br> and <div>. With that strategy, Ink remains small, but developers can pick & use additional components they specifically need. I hope I explained correctly, why I'd rather release it separately instead of merging here.

I want to have a list of useful Ink components in the readme, like Preact's (https://github.com/developit/preact#libraries--add-ons), and I'd be more than happy to include yours there :)

brigand · 2017-07-09T18:13:50Z

Cool, done.

brigand added 2 commits July 8, 2017 13:04

progress bar (WIP)

753ee45

lint

a0f169f

babelrc

2106c57

brigand added 3 commits July 8, 2017 13:57

fixes bug and example

5d3e29f

use Component, support colors, example exists

3aaab27

adds docs

845464b

brigand mentioned this pull request Jul 8, 2017

Throw when component is missing #4

Merged

sindresorhus reviewed Jul 8, 2017

View reviewed changes

brigand added 5 commits July 8, 2017 16:16

renames Bar to ProgressBar

c954ed4

updates progress example

f93b307

babelrc to package.json

b0fc294

use str.repeat

4cfe8aa

fixes lint

c0333a9

sindresorhus reviewed Jul 8, 2017

View reviewed changes

char => character

16c60ef

vadimdemedes mentioned this pull request Jul 9, 2017

Provide available terminal space #5

Closed

brigand closed this Jul 9, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

progress bar (WIP) #3

progress bar (WIP) #3

brigand commented Jul 8, 2017

ignu commented Jul 8, 2017 •

edited

brigand commented Jul 8, 2017

brigand commented Jul 8, 2017

sindresorhus Jul 8, 2017 •

edited

brigand Jul 8, 2017

sindresorhus Jul 8, 2017

brigand Jul 8, 2017

sindresorhus Jul 8, 2017

brigand Jul 8, 2017

sindresorhus Jul 8, 2017

brigand Jul 8, 2017

sindresorhus Jul 8, 2017

brigand Jul 8, 2017

sindresorhus Jul 8, 2017

vadimdemedes Jul 9, 2017

sindresorhus Jul 8, 2017

brigand Jul 8, 2017

sindresorhus Jul 8, 2017

brigand Jul 8, 2017

sindresorhus Jul 8, 2017

brigand Jul 8, 2017

sindresorhus commented Jul 8, 2017

vadimdemedes commented Jul 9, 2017 •

edited

brigand commented Jul 9, 2017

		@@ -0,0 +1,40 @@
		The Bar component represents progress. See examples/progress.js for an example app.

progress bar (WIP) #3

progress bar (WIP) #3

Conversation

brigand commented Jul 8, 2017

ignu commented Jul 8, 2017 • edited

brigand commented Jul 8, 2017

brigand commented Jul 8, 2017

sindresorhus Jul 8, 2017 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sindresorhus commented Jul 8, 2017

vadimdemedes commented Jul 9, 2017 • edited

brigand commented Jul 9, 2017

ignu commented Jul 8, 2017 •

edited

sindresorhus Jul 8, 2017 •

edited

vadimdemedes commented Jul 9, 2017 •

edited