Add interactive mode with keyboard commands

[fson]

yarn start command now starts react-native-scripts in an interactive mode.

Supported commands:

• Open Android device or emulator
• Open iOS emulator
• Display QR code
• Restart packager
• Restart packager and clear cache
• Toggle development mode.

[brentvatne]

hey @fson this looks great so far! so excited for it

a bit of feedback:

• can we show QR code without clearing the screen?
• also would be good for open ios / android to not clear screen
• maybe make clear screen an option? (given that normal clear screen doesn't work with interactive prompt)
• ask people to close and reopen the app in expo client when they toggle dev/production as this is currently required (Pick up change to dev mode when reloading the app expo#413)
• condense some items into one line (see example below)
• add a blank newline after the prompt instructions so separation from logs is clear (see example below)
• remove the "Usage" line

EDIT: nevermind the ones I crossed out, changed my mind

Or enter this address in the Expo app's search bar:

  exp://10.0.9.200:19000

Your phone will need to be on the same local network as this computer.

For links to install the Expo app, please visit https://expo.io.

Logs from serving your app will appear here. Press Ctrl+C at any time to stop.

 › Press a to open Android device or emulator, or i to open iOS emulator.
 › Press q to display QR code.
 › Press r to restart packager, or R to restart packager and clear cache.
 › Press d to toggle development mode. (current mode: production)

2:00:25 PM: Running app on iPhone Simulator

[brentvatne]

oops, left comment without explicit review

[brentvatne]

oh, also, we should remove the ios option when you're on windows

[fson]

Great suggestions, thanks for the feedback @brentvatne. I've implemented the changes.

I think condensing some commands together was also a good idea, as I was a bit concerned that the instructions would not fit nicely on a single screen anymore, so I've implemented that one too (looks good IMHO). I also removed one empty line (before the "For links to install the Expo app..." line) to better fit all the information on the screen at once. Let me know what you think!

[brentvatne]

looks awesome! only thing missing here is highlighting on the R for restart with clear cache

[fson]

Oops, good catch – R is highlighted now.

[brentvatne]

@fson - two more things:

1. have you tested on windows? which shell?
2. can we add a flag like --no-interactive? if you can think of a better name that works too

[fson]

@brentvatne:

1. I'll test on Windows tomorrow.
2. What would be the use case for the --no-interactive flag? Is it just to make sure the start script still works e.g. when spawned as a subprocess and/or the output is piped to another process? If so, maybe it's enough that we check process.stdout.isTTY and only enable the interactivity when it's true? (It seems that the typeof stdin.setRawMode === 'function' check I have does already something similar, but I'll have to check that.) We should also not print the instructions when the interactive mode is not enabled.

[brentvatne]

@fson

1. cool thanks :)
2. some people don't like fancy new things :O also, we haven't put this to the test for a long period of time while building a project so it's hard to say what nits we might have about it, so it would be good to let people go back to old behavior if they prefer it

[fson]

Tested on Windows 10:

• Using cmd.exe: otherwise works but the entered characters are displayed on the screen, which doesn't look very nice:
  
• Using Git Bash: character input doesn't work, can't exit :O

I'll try to fix these.

[fson]

npm start -- --no-interactive now starts the server without interactivity.

[brentvatne]

@fson - ah we don't support git bash currently, it doesn't even work with popular libs like inquirer 😊

[brentvatne]

@fson - just powershell and cmd.exe

[fson]

@brentvatne Ah, good ☺️ Then I'll just fix the output on cmd.exe and test on PowerShell.

[fson]

PowerShell also displays the input (see d in the beginning) and chalk also highlights a bit more than it should:

[fson]

I found the reason why the input characters were printed to the console on Windows and fixed it.

Now the only problem seems to be the bold chalk style not resetting on Windows (chalk/chalk#145). I'll try to work around it by adding some chalk.reset() to the output.

[fson]

Now the text styles on Windows are fixed too:

[brentvatne]

weird! I wonder if there is a way to work around that @fson?

[fson]

I fixed the bold style overflowing to the following text by adding chalk.reset() after any bold texts. Looks good to me now. (Windows doesn't seem to support the dim style used in the instructions, but it still looks alright.)

[brentvatne]

thanks @fson this looks great