Update npm run start to include cleanup

[mchowning]

Related gutenberg PR: WordPress/gutenberg#28025

Helps to avoid unexpected bugs that could arise if you used the old version of npm run start instead of npm run start:reset. Now the cleanup in start:reset is included in start. Devs who want to start the bundler without the cleanup will need to explicitly use the npm run start:quick command.

To test:
Ensure that npm run start:reset and npm run start:quick both start the metro bundler. Also check that npm run start outputs an error message directing the user to the npm run start:reset command.

PR submission checklist:

• I have considered adding unit tests where possible.
• I have considered if this change warrants user-facing release notes more info and have added them to RELEASE-NOTES.txt if necessary.

[peril-wordpress-mobile]

Wanna run full suite of Android and iOS UI tests? Click here and 'Approve' CI job!

[fluiddot]

Not a blocker at all but I was thinking that could be interesting to add some styling to the message although styling in Bash is probably not the most beautiful code 😄 .

The following line would produce:

"start": "echo \"\\x1b[33mThe start command is not available in this project. It is strongly recommended to use \\x1b[1:33mstart:reset\\x1b[0m\\x1b[33m to perform some cleanup when starting the metro bundler.\nOr you may use \\x1b[1:33mstart:quick\\x1b[0m\\x1b[33m for a quicker startup, but this may lead to unexpected javascript errors when running the app.\\x1b[0m\"",

Another option would be to add a simple script and use util functions like the ones we have in the release-toolkit-gutenberg-mobile repository.

Apart from that I tested the commands and work nice 💯 !

[fluiddot]

Also check that npm run start:reset outputs an error message directing the user to the npm run start command.

After checking the description and the code I found that they don't match, npm run start:reset shouldn't output an error message, right? npm run start is the one that should fail, am I right?

[mchowning]

Also check that npm run start:reset outputs an error message directing the user to the npm run start command.

After checking the description and the code I found that they don't match, npm run start:reset shouldn't output an error message, right? npm run start is the one that should fail, am I right?

You're absolutely right, my testing instructions had the two commands reversed there. Thanks for catching that (I've updated the instructions).

[mchowning]

Not a blocker at all but I was thinking that could be interesting to add some styling to the message

Good idea, and thanks for the suggested code @fluiddot ! I made that change both here and in the gutenberg PR (which still needs a review 😉 ).

[fluiddot]

Ensure that npm run start and npm run start:quick both start the metro bundler. Also check that npm run start outputs an error message directing the user to the npm run start:reset command.

I'd also change the first command of this part because npm run start won't start the metro bundler. I think it should be:

Ensure that npm run start:reset and npm run start:quick both start the metro bundler. Also check that npm run start outputs an error message directing the user to the npm run start:reset command.

[fluiddot]

LGTM! I tested the commands and works fine.

PD: I added a comment about the PR's description because it doesn't match the code changes.

[guarani]

👋 @mchowning it looks like this was already mentioned in this comment, but was it intentional that in the terminal (Bash) the output shows raw formatting characters? It's only when I looked further down that I see the cleaner version of the message.

Pauls-MacBook-Pro:gutenberg-mobile paulvonschrottky$ npm run start

> gutenberg-mobile@1.46.0 start /Users/paulvonschrottky/projects/gutenberg-mobile
> echo "\x1b[33mThe start command is not available in this project. It is strongly recommended to use \x1b[1:33mstart:reset\x1b[0m\x1b[33m to perform some cleanup when starting the metro bundler.
Or you may use \x1b[1:33mstart:quick\x1b[0m\x1b[33m for a quicker startup, but this may lead to unexpected javascript errors when running the app.\x1b[0m"

The start command is not available in this project. It is strongly recommended to use start:reset to perform some cleanup when starting the metro bundler.
Or you may use start:quick for a quicker startup, but this may lead to unexpected javascript errors when running the app.

[mchowning]

was it intentional that in the terminal (Bash) the output shows raw formatting characters?

Not really intentional @guarani , more just that npm seems to print the script itself (in this case the echo \"... script) by default and I didn't look into disabling it. I believe it does that on all the scripts though, not just this one. For example, this is what it prints at the beginning if you execute npm run start:quick (note the react-native start --config ./metro.config.js line, which is where it is printing the contents of the start:quick script):

$ npm run start:quick

> gutenberg-mobile@1.45.0 start:quick /Users/matt/dev/a8c/WordPress-Android/libs/gutenberg-mobile
> react-native start --config ./metro.config.js
...

If there's an easy way to prevent npm from printing the script, it might be a nice improvement.

[fluiddot]

By default it prints the executed command, for not printing it there's an option in NPM named --silent.
I see the following potential improvements:

1. Create a script that runs the echo command and then invoke it in the start command.
2. Create another command with the echo command and invoke it from start command with --silent, something like this:

"start": "npm run echo-start-unsupported --silent",
"echo-start-unsupported": "echo \"\\x1b[33mThe start command is not available in this project. It is strongly recommended to use \\x1b[1:33mstart:reset\\x1b[0m\\x1b[33m to perform some cleanup when starting the metro bundler.\nOr you may use \\x1b[1:33mstart:quick\\x1b[0m\\x1b[33m for a quicker startup, but this may lead to unexpected javascript errors when running the app.\\x1b[0m\"",

It will produce:

[guarani]

Not really intentional @guarani , more just that npm seems to print the script itself (in this case the echo \"... script) by default and I didn't look into disabling it. I believe it does that on all the scripts though, not just this one.

Sorry @mchowning, intentional wasn't the right word there. I meant to ask if it was a known issue. I'm normally in bash and the bold formatting didn't come through. I switched to zsh and the bold didn't come through there either, not sure why. So I'm not sure if these formatting characters are worth the trade-off – unless everyone else sees them and it's just an issue with my setup.

[fluiddot]

I'm using zsh too and the bold format is rendered properly, in fact the screenshot I posted in my previous comment was generated there. The only difference I see is that I have a black background but I don't think that should affect 🤔 .

[fluiddot]

👋 I'm moving this to 1.46.1 milestone because it's going to be included in the beta fix.

Long story short, a PR was merged into the WordPress Android app after the 1.46.0 release was cut and due to the gutenberg-mobile submodule update these changes were included too.

Let me know if there's any concern about including in the beta fix, thanks!