[CLI] New Library Generator

[JoeStanton]

This PR adds a react-native new-library <LibraryName> command to the CLI. It's a little rough at the moment, but works pretty well. It does the following:

• Creates a new directory under Libraries/LibraryName
• Copies the sample library from react-native core at Libraries/Sample into this dir. This includes an .xcodeproj file, an RCTLibraryName.h/m with bridging set up, an iOS implementation and an Android stub.
• Replaces sample with the appropriate module name.
• Generates a package.json for the module, with a react-native keyword. Easing publishing to NPM.
• Prompts the user to link their new library in Xcode.

It's implemented using the same infrastructure as the react-native init command, now rewritten in Node as of #440.

Hopefully this will make it quicker and easier to create small native libraries that can be published to NPM and used as discussed in #230.

[vjeux]

This is awesome!

1. please don't use RCT, reserved for core as you mentioned :)

2. the idea of cross platform is that everything which is platform specific needs to run on the other platform but only a dummy version. The idea behind it is when you port an app from ios to android, you don't want to instacrash until you resolve all the dependencies. What you want is to run but having ugly red views for unimplemented features. Then you look around the app and fix all of them with android-specific versions. Not really sure how to enforce that for 3rd party plugins right now since you can't test on Android

[vjeux]

So, there are multiple things we want to support in the future.

Type:

• Library that is just exposing js functions. We call it API in the docs but I want to find a better name
• Components

Platform:

• ios
• android

Given those, what do you think the command api should look like?

react-native new-library api ios name
react-native new-library component android name
react-native new-library name --type library --platform ios

?

[vjeux]

Maybe react-native new-plugin or new-extension

[JoeStanton]

I think the latter sounds best. How about:

• react-native new-library
• react-native new-component

Both of which could take a --platform option, or just generate a .ios.js and a .android.js file you could delete as appropriate. I think in the spirit of keeping everything cross platform and not instacrashing, it might be better to just generate a stub every time.

[vjeux]

I like it, ship it

[jaygarcia]

This is precisely the type of pattern I have been looking for :)

JG

301.785.6030 :: @moduscreate

:: sent from my mobile device ::

On Mar 28, 2015, at 12:54, Joe Stanton [email protected] wrote:

This PR adds a react-native new-library command to the CLI. It's a little rough at the moment, but works pretty well. It does the following:

Creates a new directory under Libraries/LibraryName
Copies the sample library from react-native core at Libraries/Sample into this dir. This includes an .xcodeproj file, an RCTLibraryName.h/m with bridging set up, an iOS implementation and an Android stub.
Replaces sample with the appropriate module name.
Generates a package.json for the module, with a react-native keyword. Easing publishing to NPM.
Prompts the user to link their new library in Xcode.
It's implemented using the same infrastructure as the new project scaffold, namely a ruby script that's invoked from cli.js. I'm not sure this is the right longer term approach, as we could drop the ruby dependency if this tool was rewritten in pure Node. That should be addressed in a separate PR though.

Hopefully this will make it quicker and easier to create small native libraries that can be published to NPM and used as discussed in #230. Any thoughts?

Questions

Should third party plugins continue to use the RCT prefix, or is this reserved for core?
Do all plugins need a .ios.js and .android.js implementation?
You can view, comment on, or merge this pull request online at:

#405

Commit Summary

Added initial new-library script
Wrapped command inside react-native
File Changes

A Libraries/Sample/RCTSample.h (14)
A Libraries/Sample/RCTSample.m (19)
A Libraries/Sample/RCTSample.xcodeproj/project.pbxproj (256)
A Libraries/Sample/Sample.android.js (24)
A Libraries/Sample/Sample.ios.js (27)
M cli.js (35)
A new-library.sh (45)
Patch Links:

https://github.com/facebook/react-native/pull/405.patch
https://github.com/facebook/react-native/pull/405.diff
—
Reply to this email directly or view it on GitHub.

[vjeux]

Can you give more specific steps to teach people how to link it to xcode

[tadeuzagallo]

I'm adding it to docs on #300, just making some images as @frantic suggested, maybe it could link to the docs.

[JoeStanton]

Great, I'll wait for #300 to be merged and link to it. Much easier illustrated with some screenshots.

[JoeStanton]

Ok - removed the RCT prefix from everything :) Will wait for the docs to be merged around XCode linking instructions, and in the meantime attempt to port both Ruby scripts into Node.

[sahrens]

Awesome work, Joe! It's great to have folks like you involved so early with the project.

On Mar 28, 2015, at 11:13 AM, Joe Stanton [email protected] wrote:

Ok - removed the RCT prefix from everything :) Will wait for the docs to be merged around XCode linking instructions, and in the meantime attempt to port both Ruby scripts into Node.

—
Reply to this email directly or view it on GitHub.

[irvinebroque]

Thank you so much for this and #405! When #114 came out, dealing with .xcodeproj and library linking was the thing that blocked me from extending native APIs. Coming from JS, having great documentation and tooling for the painful parts of working with Xcode means so much to me.

[brentvatne]

👍 I'm looking forward to this getting in to the cli!

[tadeuzagallo]

The documentation (#300) is merged. Might be worthing integrating with #485

[JoeStanton]

Waiting on #440 first, as I have also ported this to Nodejs. Thanks @tadeuzagallo, Will link your documentation.

[brentvatne]

I used this on #466 :)

[joewood]

So, was there a final decision on the use of Cocoapods? I'm developing a couple of native libraries that have their own dependencies that are available as a pod. Not a huge deal if the native side isn't expected to grow that much, probably best to avoid the complexity.

[JoeStanton]

Planning to finish this off tomorrow if you're still interested in merging. cc/@vjeux

[vjeux]

Yeah would be awesome, cc @nicklockwood and @sahrens for the review

[JoeStanton]

Pretty happy with this now, review away when you get time!

[vjeux]

nit: put showHelp(); on the next line :)

[vjeux]

It looks good to me. I'm looking at why the unit tests are failing.

[vjeux]

Thanks!

[vjeux]

Would be nice to update the documentation to mention it as well

[brentvatne]

👍 @JoeStanton can you write that up? If that's not your kind of thing I can take care of it for you, let me know

[kristianmandrup]

Please provide documentation on how to properly use it, perhaps write an article or blog post.
All I could find was this: http://stackoverflow.com/questions/33353631/react-native-create-custom-component-library

I don't understand why it copies here!?

react-projs/FirebaseUI/node_modules/react-native/Libraries/Auth

✔ ~/repos/react-projs/FirebaseUI/ios 
12:38 $ react-native new-library --name Auth
Command `new-library` unrecognized.

Looking at the source, I see it uses process.cwd() as root. But in this case, that becomes the location of react-native in my node_modules !?

Hmm, guess I have to install react-native cli globally... npm i -g react-native ??

✔ ~/repos/react-projs/FirebaseUI/ios 
12:42 $ react-native new-library --name Auth
Looks like you installed react-native globally, maybe you meant react-native-cli?
To fix the issue, run:
npm uninstall -g react-native
npm install -g react-native-cli

What?

function newLibrary(libraryName) {
   var root = process.cwd();
   var libraries = path.resolve(root, 'Libraries');
   var libraryDest = path.resolve(libraries, libraryName);

I was looking for a convenient way (ie. generator) to facilitate developing custom RN components as separate entities... is there such a generator!?

Thanks :)

react-native new-library --name Auth