Beaufity output of eject.js script #769

azakordonets · 2016-09-26T18:59:00Z

Solution for issue ##750

Since in build.js we already use chalk library, i decided to reuse it in eject.js file. Operations are marked with green, file names and path's are marked with yellow and are underlined. Screenshots are attached .

ghost · 2016-09-26T18:59:36Z

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla - and if you have received this in error or have any questions, please drop us a line at cla@fb.com. Thanks!

gaearon · 2016-09-26T19:01:42Z

I would prefer we keep the existing palette. We mostly use cyan and the default (no) color, can we do the same here? We also don’t use underlining everywhere else.

gaearon · 2016-09-26T19:02:44Z

packages/react-scripts/scripts/eject.js

@@ -78,15 +81,15 @@ prompt(
  var appPackage = require(path.join(appPath, 'package.json'));

  var ownPackageName = ownPackage.name;
-  console.log('Removing dependency: ' + ownPackageName);
+  console.log('Removing dependency: ' + yellowUnderline(ownPackageName));


I think this should have the same indentation as “adding a dependency” but they both need to be grouped under “Updating package.json“

gaearon · 2016-09-26T19:02:59Z

packages/react-scripts/scripts/eject.js

  delete appPackage.devDependencies[ownPackageName];

  Object.keys(ownPackage.dependencies).forEach(function (key) {
    // For some reason optionalDependencies end up in dependencies after install
    if (ownPackage.optionalDependencies[key]) {
      return;
    }
-    console.log('Adding dependency: ' + key);
+    console.log(green('\tAdding dependency: ') + yellowUnderline(key));


Let’s use two-space indentation like in other commands.

gaearon · 2016-09-26T19:03:29Z

packages/react-scripts/scripts/eject.js

@@ -62,7 +65,7 @@ prompt(
  fs.mkdirSync(path.join(appPath, 'scripts'));

  files.forEach(function(file) {
-    console.log('Copying ' + file + ' to ' + appPath);
+    console.log(green('Copying ') + yellowUnderline(file) + ' to ' + yellowUnderline(appPath));


Let’s indent these and group them under “Copying files...”

azakordonets · 2016-09-27T06:39:05Z

Done, done and done. Attaching screenshots to show how it looks right now.

ghost · 2016-09-27T11:08:50Z

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

gaearon · 2016-09-27T14:29:07Z

packages/react-scripts/scripts/eject.js

@@ -76,21 +81,21 @@ prompt(

  var ownPackage = require(path.join(ownPath, 'package.json'));
  var appPackage = require(path.join(appPath, 'package.json'));
-
+  console.log(cyan('Managing dependencies'));


Let’s call this Updating dependencies...

gaearon · 2016-09-27T14:29:23Z

packages/react-scripts/scripts/eject.js

@@ -61,8 +64,10 @@ prompt(
  fs.mkdirSync(path.join(appPath, 'config', 'jest'));
  fs.mkdirSync(path.join(appPath, 'scripts'));

+  console.log();
+  console.log(cyan('Copying files'));


Let’s add ... at the end of every group title

gaearon · 2016-09-27T14:29:37Z

packages/react-scripts/scripts/eject.js

-
-  console.log('Updating scripts');
+  console.log();
+  console.log(cyan('Updating scripts'));


Same here, let’s add ...

gaearon · 2016-09-27T14:29:59Z

packages/react-scripts/scripts/eject.js

@@ -107,20 +112,21 @@ prompt(
    true
  );

-  console.log('Writing package.json');
+  console.log();
+  console.log(cyan('Writing ') + 'package.json');


gaearon · 2016-09-27T14:30:26Z

packages/react-scripts/scripts/eject.js

  var ownPackageName = ownPackage.name;
-  console.log('Removing dependency: ' + ownPackageName);
+  console.log(red('  Removing dependency: ') + ownPackageName);


Let’s use yellow here so it doesn’t feel like an error

azakordonets · 2016-09-27T16:00:59Z

Done. Here's how it looks now :

gaearon · 2016-09-27T16:12:28Z

packages/react-scripts/scripts/eject.js

-
-  console.log('Updating scripts');
+  console.log();
+  console.log(cyan('Updating scripts...'));
  delete appPackage.scripts['eject'];
  Object.keys(appPackage.scripts).forEach(function (key) {
    appPackage.scripts[key] = appPackage.scripts[key]


Let’s print each step here?
For example:

Replacing "react-scripts start" with "node scripts/start.js"

gaearon · 2016-09-27T16:14:17Z

packages/react-scripts/scripts/eject.js

  files.forEach(function(file) {
-    console.log('Copying ' + file + ' to ' + appPath);
+    console.log(cyan('  Copying ') + file+ ' to ' + appPath);


Can you try making file and appPath cyan instead of Copying?

Looking at the output, it prints the same giant appPath on every single line.

Suggestion: could we put this path in the header instead?

Copying files to /Users/.../tempApp ... Copying .babelrc Copying .eslintrc

gaearon · 2016-09-27T16:14:36Z

packages/react-scripts/scripts/eject.js

  delete appPackage.devDependencies[ownPackageName];

  Object.keys(ownPackage.dependencies).forEach(function (key) {
    // For some reason optionalDependencies end up in dependencies after install
    if (ownPackage.optionalDependencies[key]) {
      return;
    }
-    console.log('Adding dependency: ' + key);
+    console.log(cyan('  Adding dependency: ') + key);


Similar, let’s make dependency name cyan (or yellow) instead of the label.

gaearon · 2016-09-27T16:15:02Z

Sorry for the back-and-forth. Visual work takes some iterations. Can you try my suggestions?

…ore in log

…ar node script

azakordonets · 2016-09-28T09:54:59Z

No problem at all ! I'm very happy that i can contribute to the open source project that I'm using myself :) I've made adjustments you've mentioned and he's how it looks now :

montogeek · 2016-09-28T11:13:59Z

Can we show Jest, Babel and ESLint output too?
Example:
Updating Jest config...

azakordonets · 2016-09-28T12:12:30Z

Done. Added.

montogeek · 2016-09-28T12:23:59Z

Thank you @azakordonets :)

gaearon · 2016-09-30T12:17:55Z

packages/react-scripts/scripts/eject.js

  delete appPackage.scripts['eject'];
  Object.keys(appPackage.scripts).forEach(function (key) {
    appPackage.scripts[key] = appPackage.scripts[key]
      .replace(
        new RegExp(ownPackageName + ' (\\w+)', 'g'),
        'node scripts/$1.js'
      );
+    console.log('  Replacing react-scripts ' + cyan(key) + ' with ' + cyan(appPackage.scripts[key]));


Please make it so react-scripts is also cyan here. We're replacing a complete command.
Also let's put both "react-scripts start/test/build" and "node scripts/whatever.js" in quotes.

Replacing "react-scripts start" with "node scripts/start.js"

gaearon · 2016-09-30T12:18:23Z

This looks good to me. I left a comment about the last change I want to make.
Please also resolve the merge conflicts.

Thank you for working on this!

azakordonets · 2016-09-30T13:12:05Z

Ok, i pushed this changed and it looks like this :

azakordonets · 2016-09-30T13:12:44Z

As for the merge conflicts, i don't have enough permissions to resolve conflicts.

gaearon · 2016-09-30T13:18:09Z

To resolve conflicts:

git remote add facebookincubator https://github.com/facebookincubator/create-react-app.git
git fetch facebookincubator
git merge facebookincubator/master

You'll see the conflicts. After you resolve them, push the branch again.

azakordonets · 2016-09-30T14:05:57Z

Done. You can check now. Since updating of .babelrc and .eslint files was taken out into separate commands, i also added console.log for them. Output looks like this now :

gaearon · 2016-09-30T14:11:39Z

I like everything except the very last section.
Can we change it to be

Adding configuration to package.json...
  Adding Babel preset
  Adding ESLint configuration
  Adding Jest configuration

I also think we can completely omit Writing package.json since it's not very descriptive.

azakordonets · 2016-09-30T14:24:52Z

Would you like to have it all in cyan color, or should i only use cyan for "Adding" word ?

gaearon · 2016-09-30T14:34:12Z

All cyan is fine.

azakordonets · 2016-09-30T14:38:01Z

What do you think about such formatting :

Or you would preffer to put it all Cyan ?

gaearon · 2016-09-30T16:04:59Z

This looks good to me!

gaearon · 2016-09-30T16:05:27Z

The only nit would be that ... after package.json shouldn't be white since it's not part of the filename

gaearon · 2016-09-30T16:06:04Z

Also quotes in "node scripts/..." should be cyan, just like quotes in "react-scripts ...".

azakordonets · 2016-09-30T16:55:33Z

Done. Looks like this :

…em under one statement

gaearon · 2016-09-30T17:12:14Z

This looks awesome. Thanks for sticking with it.
I’ll wait for Travis and merge!

azakordonets · 2016-09-30T17:14:21Z

Sweeet :) My pleasure . I'm very new to Javascript and React, so it's really great that i managed to contribute to this cool project. I checked other issues with "Help wanted" label, but they don't seem easy for me to pick up for now, but i'll continue tracking this project. Thanks for oportunity

…react-app # By Dan Abramov (5) and others # Via Dan Abramov * 'master' of https://github.com/facebookincubator/create-react-app: docs(readme): peer dependencies applied (facebook#818) Fix typos on ISSUE_TEMPLATE.md (facebook#817) Add explicit linebreaks (facebook#813) Fix typo (facebook#810) Fix some typos (facebook#809) Beaufity output of eject.js script (facebook#769) Define process.env as object (facebook#807) Typo fix in webpack.config.dev.js comments (facebook#777) Add Netlify to deploy instructions Fix usage example to match react-dev-utils@0.2.x API Relaxed eslint rule no-unused-expressions (facebook#724) Fix the doc Publish Add 0.6.1 changelog Moved Babel and ESLint config to package.json after ejecting (facebook#773) Conflicts: packages/react-scripts/package.json

* Beaufity output of eject.js script * change formatting of the eject.js output and move colors to cyan * change message about file copy * add missing three dots to some statements in eject.js script * change color of "copying files" line and do not repeat copy path anymore in log * fix merge conflict * Remove yellow color from "Removing dependency" line * changing color to "Adding dependency" line * Add line that outputs which react script is getting replaced by similar node script * remove not used anymore colors * add console line about updating Jest configs * fix typo * change formatting of replacing script output in eject.js * remove "Writing package.json" file console output * make quotes cyan in "Replacing script" console output * update console log output for Jest, Babel, ESLint update and group them under one statement * Style nits

…react-app # By Dan Abramov (5) and others # Via Dan Abramov * 'master' of https://github.com/facebookincubator/create-react-app: docs(readme): peer dependencies applied (facebook#818) Fix typos on ISSUE_TEMPLATE.md (facebook#817) Add explicit linebreaks (facebook#813) Fix typo (facebook#810) Fix some typos (facebook#809) Beaufity output of eject.js script (facebook#769) Define process.env as object (facebook#807) Typo fix in webpack.config.dev.js comments (facebook#777) Add Netlify to deploy instructions Fix usage example to match react-dev-utils@0.2.x API Relaxed eslint rule no-unused-expressions (facebook#724) Fix the doc Publish Add 0.6.1 changelog Moved Babel and ESLint config to package.json after ejecting (facebook#773) Conflicts: packages/react-scripts/package.json

Beaufity output of eject.js script

350b2bc

gaearon reviewed Sep 26, 2016

View reviewed changes

change formatting of the eject.js output and move colors to cyan

822ad8c

change message about file copy

bfe4850

ghost added the CLA Signed label Sep 27, 2016

gaearon suggested changes Sep 27, 2016

View reviewed changes

gaearon added this to the 0.7.0 milestone Sep 27, 2016

ghost added the CLA Signed label Sep 27, 2016

add missing three dots to some statements in eject.js script

1c5f505

gaearon suggested changes Sep 27, 2016

View reviewed changes

azakordonets added 5 commits September 28, 2016 11:49

change color of "copying files" line and do not repeat copy path anym…

173e87c

…ore in log

fix merge conflict

41345b7

Remove yellow color from "Removing dependency" line

259b6f5

changing color to "Adding dependency" line

52b7123

Add line that outputs which react script is getting replaced by simil…

917404e

…ar node script

azakordonets added 2 commits September 28, 2016 14:09

remove not used anymore colors

1a8ff9e

add console line about updating Jest configs

4b9fa8a

fix typo

f6f635d

facebook-github-bot added the CLA Signed label Sep 28, 2016

gaearon reviewed Sep 30, 2016

View reviewed changes

change formatting of replacing script output in eject.js

79a4c2b

fix merge conflicts

c440b27

remove "Writing package.json" file console output

52c432f

azakordonets and others added 3 commits September 30, 2016 18:56

make quotes cyan in "Replacing script" console output

308a21e

update console log output for Jest, Babel, ESLint update and group th…

2e208c9

…em under one statement

Style nits

40fa310

gaearon approved these changes Sep 30, 2016

View reviewed changes

gaearon merged commit 27e76be into facebook:master Sep 30, 2016

gaearon mentioned this pull request Sep 30, 2016

Beautify eject output #750

Closed

lock bot locked and limited conversation to collaborators Jan 22, 2019

Beaufity output of eject.js script #769

Beaufity output of eject.js script #769

Conversation

azakordonets commented Sep 26, 2016

ghost commented Sep 26, 2016

gaearon commented Sep 26, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

azakordonets commented Sep 27, 2016 • edited Loading

ghost commented Sep 27, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gaearon Sep 27, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

azakordonets commented Sep 27, 2016

gaearon Sep 27, 2016 • edited Loading

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

gaearon commented Sep 27, 2016

azakordonets commented Sep 28, 2016

montogeek commented Sep 28, 2016

azakordonets commented Sep 28, 2016

montogeek commented Sep 28, 2016

Choose a reason for hiding this comment

gaearon commented Sep 30, 2016

azakordonets commented Sep 30, 2016

azakordonets commented Sep 30, 2016

gaearon commented Sep 30, 2016

azakordonets commented Sep 30, 2016

gaearon commented Sep 30, 2016

azakordonets commented Sep 30, 2016

gaearon commented Sep 30, 2016

azakordonets commented Sep 30, 2016

gaearon commented Sep 30, 2016

gaearon commented Sep 30, 2016

gaearon commented Sep 30, 2016

azakordonets commented Sep 30, 2016

gaearon commented Sep 30, 2016

azakordonets commented Sep 30, 2016

azakordonets commented Sep 27, 2016 •

edited

Loading

gaearon Sep 27, 2016 •

edited

Loading

gaearon Sep 27, 2016 •

edited

Loading