Rewrite 'react-native init' and 'react-native upgrade' without using Yeoman in preparation for templates support #10786

mkonicek · 2016-11-07T15:10:19Z

We'll be adding support for templates into 'react-native init', so you can create an app with tabbed navigation, Android drawer etc. to get started quickly.

In preparation for adding this feature, let's stop using Yeoman which we've wanted to do for quite a while - without Yeoman the code is shorter, easier to understand and we'll have less dependencies.

From user's perspective, this PR doesn't change the init experience - just replaces Yeoman with simpler code - see copyProjectTemplateAndReplace. The upgrade experience stays almost the same - we still ask how to resolve conflicts. The only thing missing is showing the difference between files but we'll replace that soon with https://github.com/ncuillery/rn-diff

Test plan

Circle CI and Travis tests on this pull request (we run an e2e test both for iOS and Android: https://github.com/facebook/react-native/blob/master/scripts/run-ci-e2e-tests.js)
npm publish to Sinopia as described here: https://github.com/facebook/react-native/blob/master/react-native-cli/README.md
react-native init AwesomeApp creates an app, everything is named correctly, Java package is com.awesomeapp:

react-native run-ios and react-native run-android - the app starts, Reload JS works (this is also tested by Circle CI and Travis):

Enabled HMR, edited and saved index.android.js, JS was hot-reloaded:

Made a change to .flowconfig, ran react-native upgrade, answered 'n' to the question to replace:

react-native upgrade
Upgrading project to react-native v1000.0.0
Check out the release notes and breaking changes: https://github.com/facebook/react-native/releases/tag/v1000.0.0
.flowconfig has changed in the new version.
Do you want to keep your .flowconfig or replace it with the latest version?
If you ever made any changes to this file, you'll probably want to keep it.
You can see the new version here: /Users/mkonicek/CLI_Rewrite_Test/node_modules/react-native/local-cli/templates/HelloWorld/.flowconfig
Do you want to replace .flowconfig? Answer y to replace, n to keep your version:
n
Keeping your .flowconfig
Successfully upgraded this project to react-native v1000.0.0

(Checked the file was kept intact)

Made a change to .flowconfig, ran react-native upgrade, answered 'y' to the question to replace:

react-native upgrade
Upgrading project to react-native v1000.0.0
Check out the release notes and breaking changes: https://github.com/facebook/react-native/releases/tag/v1000.0.0
.flowconfig has changed in the new version.
Do you want to keep your .flowconfig or replace it with the latest version?
If you ever made any changes to this file, you'll probably want to keep it.
You can see the new version here: /Users/mkonicek/CLI_Rewrite_Test/node_modules/react-native/local-cli/templates/HelloWorld/.flowconfig
Do you want to replace .flowconfig? Answer y to replace, n to keep your version:
y
Replacing .flowconfig
Successfully upgraded this project to react-native v1000.0.0

(Checked the file was overwritten)

bestander · 2016-11-07T15:42:31Z

LGTM so far

ericvicenti · 2016-11-07T17:13:42Z

Looking pretty good.

I notice you forked the template/generated files. Please keep an eye on any changes to the old generator that you may need to sync over to your fork- I'd hate to see a regression because of that

mkonicek · 2016-11-10T04:00:43Z

@ericvicenti Thanks for looking! Totally agree. Just updated the template to the latest version. git recognizes the files have moved so we can see the changes in them.

bestander · 2016-11-10T14:44:20Z

local-cli/generator/copyProjectTemplateAndReplace.js

+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @flow


is it flow?

It's not good catch!

bestander · 2016-11-10T14:45:05Z

local-cli/generator/copyProjectTemplateAndReplace.js

+      // Don't upgrade these files
+      const fileName = path.basename(absoluteSrcFilePath);
+      // TODO __tests__/index.ios.js
+      // TODO __tests__/index.android.js


TODO relevant?

Will fix this, thanks for the reminder!

bestander · 2016-11-10T22:41:05Z

local-cli/init/init.js

+    : [argsOrName].concat(process.argv.slice(4)); // 'AwesomeApp'
+
+  // args is ['AwesomeApp', '--verbose']
+  if (!args || args.lentgh == 0) {


I assume there is no verbose here?
I think it is not needed, slows down npm even more

The args is for example ['AwesomeApp', '--verbose'].

Do you mean supporting --verbose is not needed? It was added by the community to debug when 'npm install' helps, I'd keep it.

bestander · 2016-11-10T22:52:10Z

local-cli/init/init.js

+    const jestDeps = `jest babel-jest jest-react-native babel-preset-react-native react-test-renderer@${reactVersion}`;
+    if (yarnVersion) {
+      console.log('Adding Jest...');
+      execSync(`yarn add ${jestDeps} --dev --exact`);


Martin, while you are at it, how about we provide a backdoor for CI systems and offline installs.
Recently Legocastle was not able to block a bug because we can't reproduce install offline.

Any ideas?
From the top of my head we could provide an override CLI command of some sort here.
And compose this command on CI to fake yarn install

Interesting, let's talk about so I understand how it should work.

I think this PR is getting very large - can it be done as a separate commit?

bestander · 2016-11-10T22:57:43Z

package.json

@@ -23,6 +23,7 @@
      "^[./a-zA-Z0-9$_-]+\\.png$": "RelativeImageStub"
    },
    "testPathIgnorePatterns": [
+      "local-cli/templates/",
      "/node_modules/",


Is there anymore yeoman left?
Can it be removed from package.json?

Plan remove it in a separate celebratory commit :)

ncuillery

Prompt usage

ncuillery · 2016-11-12T23:22:36Z

local-cli/generator/copyProjectTemplateAndReplace.js

+      'latest version?\nIf you ever made any changes ' +
+      'to this file, you\'ll probably want to keep it.\n' +
+      'You can see the new version here: ' + absoluteSrcFilePath + '\n' +
+      'Please answer "keep" / "replace" for ' + relativeDestPath + ':');


Maybe we could have a more "yeoman-ish" prompt with the status clearly displayed in colors and a Yes/No answer (default Yes).
The log about the changes and the HelloWorld app location should be displayed once and for all at the beginning.

Typing "keep" or "replace" for each file (typically 5 to 10 times) is boring.

Good point that typing "keep" or "replace" is boring. Can make it "do you want to overwrite the file? y/n"?

I prefer to default to 'n' - overwriting the files throws away the changes people made in them.

ncuillery · 2016-11-12T23:23:14Z

local-cli/generator/copyProjectTemplateAndReplace.js

+      'You can see the new version here: ' + absoluteSrcFilePath + '\n' +
+      'Please answer "keep" / "replace" for ' + relativeDestPath + ':');
+    const answer = prompt();
+    if (answer == 'replace') {


Double equal 😄

If the user makes a typo in "replace", the file is kept. It could lead to a lot of madness :p

Good catch about ==, thanks!

If people make a mistake and keep files they wanted to overwrite, they can run 'react-native upgrade' again to start over.

ncuillery · 2016-11-12T23:27:55Z

local-cli/generator/copyProjectTemplateAndReplace.js

+  } else if (contentChanged === 'identical') {
+    return 'keep';
+  } else {
+    throw new Error(`Unkown file changed state: {relativeDestPath}, {contentChanged}`);


Incorrect template string placeholders: missing $

Awesome, thank you!

mkonicek · 2016-11-16T00:47:20Z

TODO e2e test fails with:

Wrong version of Flow. The config specifies version ^0.34.0 but this is version 0.35.0
Flow check does not pass

iOS e2e test:

/tmp/react-native-4x2r92sR/EndToEndTest/node_modules/react-native/React/Executors/RCTJSCExecutor.mm:34:9: 'JSCSamplingProfiler.h' file not found

The following build commands failed:
CompileC /Users/travis/Library/Developer/Xcode/DerivedData/EndToEndTest-guuxuhymcchdvraejaxvrlckhfod/Build/Intermediates/React.build/Debug-iphonesimulator/React.build/Objects-normal/x86_64/RCTJSCExecutor.o Executors/RCTJSCExecutor.mm normal x86_64 objective-c++ com.apple.compilers.llvm.clang.1_0.compiler

node node_modules/react-native/local-cli/cli.js start "--non-persistent"
error: unknown option --non-persistent' npm ERR! Darwin 15.6.0 npm ERR! argv "/Users/travis/build/facebook/.nvm/versions/node/v5.12.0/bin/node" "/Users/travis/build/facebook/.nvm/versions/node/v5.12.0/bin/npm" "start" "--" "--non-persistent" npm ERR! node v5.12.0 npm ERR! npm v3.8.6 npm ERR! code ELIFECYCLE npm ERR! [email protected] start:node node_modules/react-native/local-cli/cli.js start "--non-persistent"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'node node_modules/react-native/local-cli/cli.js start "--non-persistent"'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the EndToEndTest package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node node_modules/react-native/local-cli/cli.js start "--non-persistent"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs EndToEndTest
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls EndToEndTest
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /private/tmp/react-native-4x2r92sR/EndToEndTest/ios/npm-debug.log

bestander · 2016-11-16T00:49:32Z

it was updated just a day ago

On 16 November 2016 at 00:48, Martin Konicek [email protected]
wrote:

TODO e2e test
https://circleci.com/gh/facebook/react-native/13243?utm_campaign=vcs-integration-link&utm_medium=referral&utm_source=github-build-link
fails with:

Wrong version of Flow. The config specifies version ^0.34.0 but this is version 0.35.0
Flow check does not pass

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#10786 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACBdWKVfnGY-xtmufru-XVjcmAwwntOLks5q-lLCgaJpZM4KrUWM
.

mkonicek · 2016-11-16T13:40:02Z

Flow check should now be fixed, Dan Caspi landed a fix for the iOS compile error (3b4ac79, rebased on top of it now).

hramos · 2016-11-17T21:36:01Z

@facebook-github-bot shipit

facebook-github-bot · 2016-11-17T21:37:07Z

Sorry, I can't do that @hramos - this feature is only supported for non-employees; you can land via the internal pull request dashboard.

facebook-github-bot · 2016-11-17T21:48:09Z

Something went wrong when importing this pull request. Please cc someone from the team at fb to help with importing this.

…Yeoman in preparation for templates support Summary: This is the manually imported version of #10786 This was mostly straigthforward by replacing the local-cli folder with the version I had in my local git checkout, plus a few other files I listed with git diff --name-only. Reviewed By: hramos Differential Revision: D4201118 fbshipit-source-id: 4d0fb54b0edda9de1abba427958e420fd2ac105c

mkonicek · 2016-11-19T23:02:21Z

Closed in a477aec.

Summary: We stopped using Yeoman in #10786 I almost forgot to remove the now-unused dependency :) **Test Plan** - Published react-native to Sinopia - Ran `react-native init MyApp` - The app was generated correctly - The app's node_modules folder doesn't contain Yeoman Reviewed By: cpojer Differential Revision: D4291619 fbshipit-source-id: 44c1ef8035fa2d8c40d4e8c505207245e1a95d3c

…Yeoman in preparation for templates support Summary: This is the manually imported version of facebook#10786 This was mostly straigthforward by replacing the local-cli folder with the version I had in my local git checkout, plus a few other files I listed with git diff --name-only. Reviewed By: hramos Differential Revision: D4201118 fbshipit-source-id: 4d0fb54b0edda9de1abba427958e420fd2ac105c

Summary: We stopped using Yeoman in facebook#10786 I almost forgot to remove the now-unused dependency :) **Test Plan** - Published react-native to Sinopia - Ran `react-native init MyApp` - The app was generated correctly - The app's node_modules folder doesn't contain Yeoman Reviewed By: cpojer Differential Revision: D4291619 fbshipit-source-id: 44c1ef8035fa2d8c40d4e8c505207245e1a95d3c

…Yeoman in preparation for templates support Summary: This is the manually imported version of facebook/react-native#10786 This was mostly straigthforward by replacing the local-cli folder with the version I had in my local git checkout, plus a few other files I listed with git diff --name-only. Reviewed By: hramos Differential Revision: D4201118 fbshipit-source-id: 4d0fb54b0edda9de1abba427958e420fd2ac105c

facebook-github-bot added the GH Review: review-needed label Nov 7, 2016

mkonicek force-pushed the init_template branch from 1b7fd7d to 67dcefe Compare November 9, 2016 23:51

mkonicek changed the title ~~[WIP][Almost ready] Rewrite 'react-native init' not to use Yeoman in preparation for templates support~~ Rewrite 'react-native init' not to use Yeoman in preparation for templates support Nov 10, 2016

mkonicek changed the title ~~Rewrite 'react-native init' not to use Yeoman in preparation for templates support~~ Rewrite 'react-native init' and 'react-native upgrade' not to use Yeoman in preparation for templates support Nov 10, 2016

mkonicek changed the title ~~Rewrite 'react-native init' and 'react-native upgrade' not to use Yeoman in preparation for templates support~~ Rewrite 'react-native init' and 'react-native upgrade' without using Yeoman in preparation for templates support Nov 10, 2016

bestander reviewed Nov 10, 2016

View reviewed changes

ncuillery reviewed Nov 12, 2016

View reviewed changes

mkonicek force-pushed the init_template branch 2 times, most recently from 3e4fe71 to f2adec5 Compare November 15, 2016 16:25

mkonicek force-pushed the init_template branch 2 times, most recently from 59272d9 to cf571ff Compare November 16, 2016 13:26

mkonicek force-pushed the init_template branch 2 times, most recently from 93b68fa to 63d8964 Compare November 16, 2016 18:56

Martin Konicek added 11 commits November 17, 2016 18:35

Add HelloWorld template

718bf86

Rewrite init logic

f275ae9

Copies and replaces template

69091cd

npm install

6f90ddd

Preserve permissions when copying files

3283076

Keep binary files intact

5f9b727

Keep copyright for now not to cause conflicts

9a82040

Print run instructions

c7874c2

Basic version of upgrade - overwrite project files

7c258e5

Prints progress

65677a5

Compare binary files

86a8722

Martin Konicek added 7 commits November 17, 2016 18:35

Dont run tests in template

807bcec

Address reviewer feedback

7d9ee84

Update project template

b9937bc

Add gitattribute, PR 10864

97a4752

Update flowconfig - files moved

56c7cf8

Adapt e2e test

99b24e3

Update Flowconfig, nits

5053402

mkonicek force-pushed the init_template branch from 63d8964 to 5053402 Compare November 17, 2016 18:36

facebook-github-bot added GH Review: accepted Import Started This pull request has been imported. This does not imply the PR has been approved. and removed GH Review: review-needed labels Nov 17, 2016

facebook-github-bot added Import Failed and removed Import Started This pull request has been imported. This does not imply the PR has been approved. labels Nov 17, 2016

Martin Konicek added 3 commits November 17, 2016 21:59

Move back gradle wrapper

653a51e

Move the binary file back

e80be34

Add force option

76dcf81

mkonicek closed this Nov 19, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Rewrite 'react-native init' and 'react-native upgrade' without using Yeoman in preparation for templates support #10786

Rewrite 'react-native init' and 'react-native upgrade' without using Yeoman in preparation for templates support #10786

mkonicek commented Nov 7, 2016 •

edited

Loading

bestander commented Nov 7, 2016

ericvicenti commented Nov 7, 2016

mkonicek commented Nov 10, 2016

bestander Nov 10, 2016

mkonicek Nov 14, 2016

bestander Nov 10, 2016

mkonicek Nov 14, 2016

bestander Nov 10, 2016

mkonicek Nov 14, 2016

bestander Nov 10, 2016

mkonicek Nov 14, 2016

bestander Nov 10, 2016

mkonicek Nov 14, 2016

ncuillery left a comment

ncuillery Nov 12, 2016

mkonicek Nov 14, 2016

mkonicek Nov 14, 2016

ncuillery Nov 12, 2016

ncuillery Nov 12, 2016

mkonicek Nov 14, 2016

ncuillery Nov 12, 2016

mkonicek Nov 14, 2016

mkonicek commented Nov 16, 2016 •

edited

Loading

bestander commented Nov 16, 2016

mkonicek commented Nov 16, 2016 •

edited

Loading

hramos commented Nov 17, 2016

facebook-github-bot commented Nov 17, 2016

facebook-github-bot commented Nov 17, 2016

mkonicek commented Nov 19, 2016

Rewrite 'react-native init' and 'react-native upgrade' without using Yeoman in preparation for templates support #10786

Rewrite 'react-native init' and 'react-native upgrade' without using Yeoman in preparation for templates support #10786

Conversation

mkonicek commented Nov 7, 2016 • edited Loading

bestander commented Nov 7, 2016

ericvicenti commented Nov 7, 2016

mkonicek commented Nov 10, 2016

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

ncuillery left a 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

mkonicek commented Nov 16, 2016 • edited Loading

bestander commented Nov 16, 2016

mkonicek commented Nov 16, 2016 • edited Loading

hramos commented Nov 17, 2016

facebook-github-bot commented Nov 17, 2016

facebook-github-bot commented Nov 17, 2016

mkonicek commented Nov 19, 2016

mkonicek commented Nov 7, 2016 •

edited

Loading

mkonicek commented Nov 16, 2016 •

edited

Loading

mkonicek commented Nov 16, 2016 •

edited

Loading