[CLI] New Library Generator #405

JoeStanton · 2015-03-28T16:54:07Z

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 · 2015-03-28T17:06:06Z

This is awesome!

please don't use RCT, reserved for core as you mentioned :)
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 · 2015-03-28T17:16:58Z

cli.js

+      );
+    } else {
+      console.error(
+        'Usage: react-native new-library <LibraryName>'


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

?

Maybe react-native new-plugin or new-extension

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.

I like it, ship it

jaygarcia · 2015-03-28T17:19:14Z

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 notifications@github.com 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 · 2015-03-28T17:20:25Z

new-library.sh

+  puts "Next steps:"
+  puts ""
+  puts "   Open #{app_name}.xcproject in Xcode"
+  puts "   Link this project to your main .xcproject"


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

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

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

JoeStanton · 2015-03-28T18:13:49Z

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 · 2015-03-29T02:14:46Z

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 notifications@github.com 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 · 2015-03-29T22:16:30Z

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 · 2015-03-29T22:18:52Z

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

tadeuzagallo · 2015-03-30T11:42:05Z

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

JoeStanton · 2015-03-30T12:23:11Z

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

brentvatne · 2015-03-30T15:37:24Z

I used this on #466 :)

joewood · 2015-04-04T12:40:06Z

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.

[React Native PR #405](facebook/react-native#405)

JoeStanton · 2015-05-14T22:08:01Z

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

vjeux · 2015-05-14T22:33:30Z

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

JoeStanton · 2015-05-15T13:16:02Z

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

vjeux · 2015-05-15T15:45:11Z

local-cli/new-library.js

+module.exports = {
+  init: function(args) {
+    var libraryName = args[1];
+    if (!libraryName) { showHelp(); }


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

vjeux · 2015-05-15T15:46:39Z

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

[CLI] New Library Generator

vjeux · 2015-05-15T17:58:44Z

Thanks!

vjeux · 2015-05-15T17:59:04Z

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

brentvatne · 2015-05-17T04:51:15Z

👍 @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 · 2016-03-30T10:21:00Z

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

* Zero-cost bindings to TimePickerAndroid * fix response type

* Update scripts to publish react-native-macos-init * Clean up merge markers * Restored ios:macos RNTester parity except for InputAccessoryView. * Revert "Restored ios:macos RNTester parity except for InputAccessoryView." This reverts commit 5a67ae0. * Remove unnecessary android builds and tar file upload. * Fix mouse events Co-authored-by: React-Native Bot <53619745+rnbot@users.noreply.github.com>

* List keyboard type decimal-pad as cross platform * BSR: list keyboard type number-pad as cross platform

vjeux reviewed Mar 28, 2015
View reviewed changes

JoeStanton mentioned this pull request Mar 29, 2015

[CLI] Remove dependency on Ruby #440

Merged

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Apr 7, 2015

vitch added a commit to Method-Inc-OLD/react-native-red-bear-ble that referenced this pull request Apr 17, 2015

Created a blank library project using the helper from

95e25e5

[React Native PR #405](facebook/react-native#405)

vjeux added Needs Review and removed Needs Review labels Apr 17, 2015

mvayngrib mentioned this pull request May 10, 2015

make compatible with node fs API itinance/react-native-fs#4

Closed

JoeStanton force-pushed the new-library-cmd branch 9 times, most recently from 95f460d to 815383b Compare May 14, 2015 22:02

JoeStanton force-pushed the new-library-cmd branch from 815383b to 65e8b4e Compare May 14, 2015 22:06

JoeStanton force-pushed the new-library-cmd branch from 151d478 to 51faf40 Compare May 14, 2015 22:19

JoeStanton added 2 commits May 15, 2015 09:17

Added react-native new-library command

396439b

Duplicate the name validation for now

0312c30

JoeStanton force-pushed the new-library-cmd branch from 51faf40 to 0312c30 Compare May 15, 2015 08:31

JoeStanton added 2 commits May 15, 2015 13:59

Upgrade sample to the new macros

ea8447e

Update search paths to reflect new project structure

243ef68

vjeux reviewed May 15, 2015
View reviewed changes

Stylistic cleanup

857c30b

vjeux added a commit that referenced this pull request May 15, 2015

Merge pull request #405 from JoeStanton/new-library-cmd

e33fef8

[CLI] New Library Generator

vjeux merged commit e33fef8 into facebook:master May 15, 2015

JoeStanton deleted the new-library-cmd branch May 16, 2015 14:13

jfrolich pushed a commit to jfrolich/react-native that referenced this pull request Apr 22, 2020

Zero-cost bindings to TimePickerAndroid (facebook#405)

a0a6a55

* Zero-cost bindings to TimePickerAndroid * fix response type

ayushjainrksh referenced this pull request in MLH-Fellowship/react-native Jul 2, 2020

Feature/add decimal pad to android (#405)

a402285

* List keyboard type decimal-pad as cross platform * BSR: list keyboard type number-pad as cross platform

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[CLI] New Library Generator #405

[CLI] New Library Generator #405

JoeStanton commented Mar 28, 2015

vjeux commented Mar 28, 2015

vjeux Mar 28, 2015

vjeux Mar 28, 2015

JoeStanton Mar 28, 2015

vjeux Mar 28, 2015

jaygarcia commented Mar 28, 2015

vjeux Mar 28, 2015

tadeuzagallo Mar 28, 2015

JoeStanton Mar 28, 2015

JoeStanton commented Mar 28, 2015

sahrens commented Mar 29, 2015

irvinebroque commented Mar 29, 2015

brentvatne commented Mar 29, 2015

tadeuzagallo commented Mar 30, 2015

JoeStanton commented Mar 30, 2015

brentvatne commented Mar 30, 2015

joewood commented Apr 4, 2015

JoeStanton commented May 14, 2015

vjeux commented May 14, 2015

JoeStanton commented May 15, 2015

vjeux May 15, 2015

vjeux commented May 15, 2015

vjeux commented May 15, 2015

vjeux commented May 15, 2015

brentvatne commented May 17, 2015

kristianmandrup commented Mar 30, 2016

[CLI] New Library Generator #405

[CLI] New Library Generator #405

Conversation

JoeStanton commented Mar 28, 2015

vjeux commented Mar 28, 2015

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

jaygarcia commented Mar 28, 2015

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

JoeStanton commented Mar 28, 2015

sahrens commented Mar 29, 2015

irvinebroque commented Mar 29, 2015

brentvatne commented Mar 29, 2015

tadeuzagallo commented Mar 30, 2015

JoeStanton commented Mar 30, 2015

brentvatne commented Mar 30, 2015

joewood commented Apr 4, 2015

JoeStanton commented May 14, 2015

vjeux commented May 14, 2015

JoeStanton commented May 15, 2015

Choose a reason for hiding this comment

vjeux commented May 15, 2015

vjeux commented May 15, 2015

vjeux commented May 15, 2015

brentvatne commented May 17, 2015

kristianmandrup commented Mar 30, 2016