Commit Graph

167 Commits

Author SHA1 Message Date
Tadeu Zagallo 92d98533f1 [ReactNative] Refactor BatchedBridge and MessageQueue
Summary:
@public

The current implementation of `MessageQueue` is huge, over-complicated and spread
across `MethodQueue`, `MethodQueueMixin`, `BatchedBridge` and `BatchedBridgeFactory`

Refactored in a simpler way, were it's just a `MessageQueue` class and `BatchedBridge`
is only an instance of it.

Test Plan:
I had to make some updates to the tests, but no real update to the native side.
There's also tests covering the `remoteAsync` methods, and more integration tests for UIExplorer.
Verified whats being used by Android, and it should be safe, also tests Android tests have been pretty reliable.

Manually testing: Create a big hierarchy, like `<ListView>` example. Use the `TimerMixin` example to generate multiple calls.
Test the failure callback on the `Geolocation` example.

All the calls go through this entry point, so it's hard to miss if it's broken.
2015-06-17 07:49:33 -08:00
Tadeu Zagallo 1718b17a37 [ReactNative] Fix extern on RCTProfile.h
Summary:
@public

Add missing `RCT_EXTERN` to the constants in `RCTProfile`'s header

Test Plan:
Move the the import on `RCTBridge` to the header, build no longer fails due to
duplicate symbols.
2015-06-17 05:57:10 -08:00
Tadeu Zagallo d3065fc2e7 [ReactNative] Remove RCT_IMPORT_METHOD macro and generate lookup table dynamically
Summary:
@public

This removes the last piece of data that was still stored on the DATA section,
`RCT_IMPORT_METHOD`. JS calls now dynamically populate a lookup table simultaneously
on JS and Native, instead of creating  a mapping at load time.

Test Plan: Everything still runs, tests are green.
2015-06-15 13:05:52 -08:00
Tadeu Zagallo 86dc92d5ab [ReactNative] Add ReactPerf info to profiler timeline
Summary:
@public

Hook into ReactPerf to add markers to `RCTProfile` timeline.

Test Plan: {F22569628}
2015-06-15 13:04:25 -08:00
Tadeu Zagallo c30365acba [ReactNative] Remove RCTJSTimers
Summary:
@public

Remove `RCTJSTimers.js`, the file was just an alias to `JSTimersExecution`.

Test Plan: Still builds.
2015-06-15 10:50:28 -08:00
Nick Lockwood 650fc9de4c Increased warning levels to -Wall -Wextra, and fixed Xcode 7 beta issues
Summary:
@public

I've increased the warning levels in the OSS frameworks, which caught a bunch of minor issues. I also fixed some new errors in Xcode 7 relating to designated initializers and TLS security.

Test Plan:
* Test the sample apps and make sure they still work.
* Run tests.
2015-06-15 07:52:50 -08:00
Tadeu Zagallo d270dca210 [ReactNative] Avoid method clashing on categories
Summary:
@public

Include `js_name` and `__LINE__` on exported methods' generated names + use the
method implementation instead of `objc_msgSend` on the bridge, so it still works
in case of clashing.

Test Plan: Everything still working, otherwise it'd crash at startup.
2015-06-15 06:13:45 -08:00
Spencer Ahrens 781b17fd0f [ReactNative] include stack in native redboxes
Summary:
@public

Include stack traces in native redboxes (e.g. from RCTLogError).  It's not trivial to get the file names and line numbers for every frame of the stack, but we can get the first one which is nice.

Test Plan: {F22548418}
2015-06-12 15:48:20 -08:00
Tadeu Zagallo 2a7adfb815 [ReactNative] Use RCTNullIfNill and (id)kCFNull
Summary:
@public

Use consistent `null` handling:

`value || null`                ->  `RCTNullIfNil(value)`
`value == null ? nil : value`  ->  `RCTNilIfNull(value)`
`[NSNull null]`                ->  `(id)kCFNull`

Test Plan: The tests should be enough.
2015-06-12 11:03:10 -08:00
Spencer Ahrens 492e29a091 [ReactNative] backout orange box
Summary:
@public

This probably needs more thought - might want to differentiate between console.error and reportError.

Test Plan: console.error and reportError no longer redbox.  invariant and RCTLogError still do.
2015-06-11 10:39:59 -08:00
Nick Lockwood 2ee8410a71 Removed nullability attributes until Infer supports them 2015-06-11 10:39:29 -08:00
Tadeu Zagallo e9095b2f42 [ReactNative] Remove module info from the data section + allow external modules
Summary:
@public

The information we required about the exported methods were previously stored
on the binary's DATA section, which didn't allow to access methods on different
static libraries, or in any dynamic library at all. Instead of fetching information
from all the DATA segments, this diff changes the macro in order to create a
new method, that returns the required information about the original method. The
module itself is registered at load time, and on the bridge initialization all
the auto-generated methods are called to gather the methods' information.

Test Plan:
UIExplorer previously had a dependency on `RCTTest`, because it had a `TestModule`
that had to be on the same library. `RCTTest` is now a dependency of
`UIExplorerIntegrationTests`. So the tests themselves running should test it.
2015-06-10 03:42:10 -08:00
Tadeu Zagallo 847dff8d75 [ReactNative] Make JavaScript executors bridge modules
Summary:
@public

This is the first of a few diffs that change the way the executors are handled
by the bridge.

For they are just promoted to modules, so they are automatically loaded by the bridge.

Test Plan:
Tested on UIExplorer, Catalyst and MAdMan.
Tested all the 3 executors, everything looks fine.
2015-06-09 15:40:55 -08:00
Spencer Ahrens 68bb3a7e71 [ReactNative] orange box
Summary:
@public

There have been multiple instances of confusion about whether a redbox means the
developer did something they shouldn't but things will keep working, or if
something went horribly wrong and the app will crash in prod.  This diff
introduces an orange background color to the redbox for `console.error` and
`RCTLogError` to indicate that something bad happened, but that the app will
continue working.

Test Plan:
see orange error for geo permissions:

{F22541375}
2015-06-09 14:53:29 -08:00
Tadeu Zagallo 6358e163a5 [ReactNative] Revert `async exports` changes to MessageQueue + test
Summary:
@public

`[Bridge] Add support for JS async functions to RCT_EXPORT_METHOD` was imported but broke some internal code, reverting the `MessageQueue` that caused the issues and add a test, since the method is not used yet.

Test Plan: Run the test o/
2015-06-09 14:25:32 -08:00
James Ide 90439cec26 [Bridge] Add support for JS async functions to RCT_EXPORT_METHOD
Summary:
Adds support for JS async methods and helps guide people writing native modules w.r.t. the callbacks. With this diff, on the native side you write:

```objc
RCT_EXPORT_METHOD(getValueAsync:(NSString *)key
                       resolver:(RCTPromiseResolver)resolve
                       rejecter:(RCTPromiseRejecter)reject)
{
  NSError *error = nil;
  id value = [_nativeDataStore valueForKey:key error:&error];

  // "resolve" and "reject" are automatically defined blocks that take
  // any object (nil is OK) and an NSError, respectively
  if (!error) {
    resolve(value);
  } else {
    reject(error);
  }
}
```

On the JS side, you can write:

```js
var {DemoDataStore} = require('react-native').NativeModules;
DemoDataStore.getValueAsync('sample-key').then((value) => {
  console.log('Got:', value);
}, (error) => {
  console.error(error);
  // "error" is an Error object whose message is the NSError's description.
  // The NSError's code and domain are also set, and the native trace i
Closes https://github.com/facebook/react-native/pull/1232
Github Author: James Ide <ide@jameside.com>

Test Plan: Imported from GitHub, without a `Test Plan:` line.
2015-06-09 14:25:31 -08:00
David Callahan cf8c2693af Use getsectiondata 2015-06-09 12:40:52 -08:00
Nick Lockwood f88bc3eb73 [ReactNative] Refactor RCTDataManager to support pluggable data source modules (RCTURLRequestHandlers)
Summary:
@public

This is a refactor of @philikon's original diff that decouples the dependencies between the Network and Image modules, and replaces RCTDataQueryExecutor with a more useful abstraction.

I've introduced the RCTURLRequestHandler protocol, which is a new type of bridge module used for loading data using an NSURLRequest. RCTURLRequestHandlers can be registered using RCT_EXPORT_MODULE() and are then available at runtime for use by the RCTDataManager, which will automatically select the appropriate handler for a given request based on the handler's self-reported capabilities.

The currently implemented handlers are:

- RCTHTTPRequestHandler - the standard open source HTTP request handler that uses NSURLSession
- RKHTTPRequestHandler - the internal FB HTTP request handler that uses FBNetworking
- RCTImageRequestHandler - a handler for loading local images from the iOS asset-library

Depends on D2108193

Test Plan:
- Internal apps still work
- OSS port still compiles, Movies app and a sample Parse app still work
- uploading image to Parse using the above code snippet works
- tested `FormData` with string and image parameters using http://www.posttestserver.com/
2015-06-09 12:27:06 -08:00
Nick Lockwood f4bf80f3ea [ReactNative] Allow uploading native files (e.g. photos) and FormData via XMLHttpRequest 2015-06-09 12:27:05 -08:00
Tadeu Zagallo 2a08897c6e [ReactNative] Batch JS -> Native calls per queue
Summary:
@public

For every call that comes from JS to Native we'd call dispatch_async so the
method would be cllead on the queue/thread it's expecting. This diff
buckets the calls by target queue, dispatches only once to that queue, and then
call all the methods for it inside the same dispatch.

Test Plan: {F22510090}
2015-06-09 06:52:54 -08:00
Tadeu Zagallo de1320acc7 [ReactNative] Check if bridge is valid on -modules 2015-06-09 02:54:59 -08:00
Tadeu Zagallo c2fb21b322 [ReactNative] Properly pause frame update observers when idle
Summary:
@public

`RCTDispatchEvent` and `RCTTiming` weren't being paused when there wasn't any
work left to be done.

Test Plan:
Run the timers example - check everything still works as expected
Test the ListView paging example - check scroll events are still fired as expected
Launch UIExplorer, let it idle, and put a break point on `-[RCTBridge dispatchBlock:moduleID:]`,
it should never fire.
2015-06-07 08:45:18 -08:00
Tadeu Zagallo 1c9e957d22 [ReactNative] Invalidate modules on their own queues
Summary:
@public

Bridge modules were being invalidate on the main thread, what could lead to
racing conditions, move the calls to invalidate on happen to the module's
methodQueue

Test Plan: Run the tests
2015-06-06 14:13:32 -08:00
Nick Lockwood 45d8fb0ef6 Removed deprecated RCT_EXPORT + code paths 2015-06-05 09:58:25 -08:00
Tadeu Zagallo 7009f0a47b [ReactNative] Add profiling hooks to bridge modules at runtime
Summary:
@public

Add `RCT_DEV`-only profiling hooks to every method in every bridge modules to
add a little bit more detail to the timeline profile.

Test Plan: {F22522834}
2015-06-05 04:22:57 -08:00
Eric Vicenti f744c7c444 [ReactNative] Native touch unique identifier
Summary:
This bug was causing a redbox when touching rapidly because multiple touches had the same identifier. This code was meant to ensure that a unique ID is found, but it was checking against the wrong property in the react touch array.

I don't think this was really affecting prod, because the invariant is guarded by a __DEV__ check

@public

Test Plan:
- Start several touches at once (or just rapidly jam fingers on your device), and you won't see a redbox
- Also verify that single touches, touch moves, and multi touches work as before
2015-06-04 20:21:19 -08:00
Spencer Ahrens 7ffa7bd1f1 [ReactNative] Implement merge functionality for AsyncStorage 2015-06-03 16:53:29 -08:00
Alex Kotliarskyi 9fe7128493 [ReactNative] Refactor DevMenu items construction
Summary:
The idea behind this change it to couple together menu item title
and handler. The code becomes simpler and easier to maintain, but
also makes it possible to extend dev menu in the future.

@public

Test Plan:
All menu items works as before.
Changed websocket executor class name and made sure that when the class
is missing we get nice error message.
2015-06-03 16:42:23 -08:00
Eric Vicenti fa3491e9f5 [ReactNative] Remove unused touch arrays
Summary:
These two arrays aren't used. The code is easier to read without them

@public

Test Plan: Tap around UIExplorer and verify multi-touch and responder system behavior works the same
2015-06-03 16:12:03 -08:00
Jared Forsyth bba576a172 press ctrl-i to toggle inspect element 2015-06-03 10:30:06 -08:00
Tadeu Zagallo 158d8b64ff [ReactNative] Track bridge events' flow (timers fixed)
Summary:
@public

Use trace-viewer's flow events to link the bridge calls

Test Plan: {F22498582}
2015-06-03 05:37:10 -08:00
Chace Liang 4d4f2dfe09 Revert "[ReactNative] Track bridge events' flow" 2015-06-02 10:36:32 -08:00
Tadeu Zagallo 0f16d15d64 [ReactNative] Optimize console.profile and add markers on JS entry points
Summary:
@public

Right now the profiler shows how long the executor took on JS but doesn't show
how long each of the batched calls took, this adds a *very* high level view of JS
execution (still doesn't show properly calls dispatched with setImmediate)

Also added a global property on JS to avoid trips to Native when profiling is
disabled.

Test Plan:
Run the Profiler on any app

{F22491690}
2015-06-02 06:22:49 -08:00
Tadeu Zagallo 2dfa3b34a1 [ReactNative] Track bridge events' flow
Summary:
@public

Use trace-viewer's flow events to link the bridge calls

Test Plan: {F22498582}
2015-06-02 06:19:16 -08:00
Tadeu Zagallo 777363fdd7 [ReactNative] Use NSDictionary + NSNumber for event coalescing
Summary:
@public

On D2099270 event coalescing was implemented and the event key on the RCTSparseArray
is an uint64_t, but it was declared as NSUInteger.  On a 32 bits architecture
it'll be clipped to 4 bits, meaning that just `reactTag` will be taken into
account, e.g. different types of events can coalesce with each other if they target the same view

Switching to use an NSMutableDictionary instead of RCTSparseArray and NSNumber
as keys instead of uint64_t

Test Plan: Fixed the previous tests and added a new test to RCTEventDispatcherTests
2015-06-02 03:06:06 -08:00
John Harper 570597c4ac [react-native] dispatch perf updates to main thread 2015-06-02 01:44:55 -08:00
Chace Liang 1ed2542b46 Revert "[Bridge] Add support for JS async functions to RCT_EXPORT_METHOD" 2015-06-01 20:26:37 -08:00
James Ide d548c85da6 [Bridge] Add support for JS async functions to RCT_EXPORT_METHOD
Summary:
Adds support for JS async methods and helps guide people writing native modules w.r.t. the callbacks. With this diff, on the native side you write:

```objc
RCT_EXPORT_METHOD(getValueAsync:(NSString *)key
                       resolver:(RCTPromiseResolver)resolve
                       rejecter:(RCTPromiseRejecter)reject)
{
  NSError *error = nil;
  id value = [_nativeDataStore valueForKey:key error:&error];

  // "resolve" and "reject" are automatically defined blocks that take
  // any object (nil is OK) and an NSError, respectively
  if (!error) {
    resolve(value);
  } else {
    reject(error);
  }
}
```

On the JS side, you can write:

```js
var {DemoDataStore} = require('react-native').NativeModules;
DemoDataStore.getValueAsync('sample-key').then((value) => {
  console.log('Got:', value);
}, (error) => {
  console.error(error);
  // "error" is an Error object whose message is the NSError's description.
  // The NSError's code and domain are also set, and the native trace i
Closes https://github.com/facebook/react-native/pull/1232
Github Author: James Ide <ide@jameside.com>

Test Plan: Imported from GitHub, without a `Test Plan:` line.
2015-06-01 10:50:06 -08:00
Alex Akers 40da2c7e08 [React Native] Add E2E tests for Catalyst that test login, app launcher, and opening UIExplorer, MAdMan, Groups 2015-05-29 05:30:09 -08:00
Nick Lockwood 03889780b9 [WIP] Added loadingView property to RCTRootView 2015-05-28 13:20:46 -08:00
Nick Lockwood 45c1dc1c65 Fixed text background color
Summary:
@public

This fixes an issue with the containerBackgroundColor property of `<Text>` nodes, where containerBackgroundColor was being overridden by the backgroundColor. I also fixed up the example so that it demonstrates the feature more clearly.

Test Plan:
* Check UIExplorer text example
* Run Catalyst snapshot tests and check MAdMan, Groups
2015-05-28 09:31:57 -08:00
Jason Prado 656c5e4e27 Revert "[ReactNative] Add completionBlock to -[RCTBridge enqueueJSCall:args:]"
Test plan: broke catalyst apps

Summary: This reverts commit 9fba6a360dc5f8bf.

fbobjc/Tools/revert

Reverter: jprado

@build-break

commit 9fba6a360dc5f8bf014f3d3c584c545b16da5100
Author:     Tadeu Zagallo <tadeuzagallo@fb.com>
AuthorDate: Thu May 28 08:29:19 2015 -0700
Commit:     Service User <svcscm@fb.com>
CommitDate: Thu May 28 09:53:53 2015 -0700

    [ReactNative] Add completionBlock to -[RCTBridge enqueueJSCall:args:]

    Summary:
    @public

    Allow to pass an optional completion block to the bridge JS calls.

    The block will be called from the JS thread, after the javascript has finished
    running and the returned calls have been processed/dispatched to the native modules.

    Test Plan: Added `testCallbackIsCalledOnTheRightTime` to `RKBatchedBridgeTests`
2015-05-28 09:30:51 -08:00
Tadeu Zagallo 3b24f52a20 [ReactNative] Add completionBlock to -[RCTBridge enqueueJSCall:args:]
Summary:
@public

Allow to pass an optional completion block to the bridge JS calls.

The block will be called from the JS thread, after the javascript has finished
running and the returned calls have been processed/dispatched to the native modules.

Test Plan: Added `testCallbackIsCalledOnTheRightTime` to `RKBatchedBridgeTests`
2015-05-28 08:53:53 -08:00
Tadeu Zagallo 4fc15dbf17 [ReactNative] Implement proper event coalescing 2015-05-27 20:41:20 -08:00
Nick Lockwood 8d992262ed Fixed loading flicker on RCTRootView 2015-05-27 02:51:32 -08:00
Alex Kotliarskyi cfa4b13472 [ReactNative] Element Inspector
Summary:
This adds new development feature to React Native that provides information
about selected element (see the demo in Test Plan).

This is how it works:

App's root component is rendered to a container that also has a hidden layer called
`<InspectorOverlay/>`. When activated, it shows full screen view and captures all
touches. On every touch we ask UIManager to find a view for given {x,y} coordinates.

Then, we use React's internals to find corresponding React component. `setRootInstance`
is used to remember the top level component to start search from, lmk if you have a
better idea how to do this. Given a component, we can climb up its owners tree
to provice more context on how/where the component is used.

In future we could use the `hierarchy` array to inspect and print their props/state.

Known bugs and limitations:
* InspectorOverlay sometimes receives touches with incorrect coordinates (wtf)
* Not integrated with React Chrome Devtools (maybe in followup diffs)
* Doesn't work with popovers (maybe put the element inspector into an `<Overlay/>`?)

@public

Test Plan:
https://www.facebook.com/pxlcld/mn5k
Works nicely with scrollviews
2015-05-26 11:19:49 -08:00
Nick Lockwood b7c669aa73 Fixed root view background color propagation 2015-05-26 04:18:55 -08:00
Tadeu Zagallo 9062bda79b [ReactNative] Add RCTAssertThread and restrict -[UIManager addUIBlock:] to _shadowQueue
Summary:
@public

Add `RCTAssertThread` to `RCTAssert.h` for convenience when checking the current/queue,
it accepts either a `NSString *`, `NSThread *` or `dispatch_queue_t` as the object to be checked

Also add a check to `-[RCTUIManager addUIBlock:]` - There was a discussion on github (https://github.com/facebook/react-native/issues/1365)
due to the weird behavior caused by calling it from a different thread/queue (it might be added after `batchDidComplete` has been called
and will just be dispatched on the next call from JS to objc)

Test Plan:
Change `-[RCTAnimationExperimentalManager methodQueue]` to return `dispatch_get_main_queue()` and run the 2048 example,
it should dispatch with a helpful message (screenshot on the comments)
2015-05-25 05:23:27 -08:00
Nick Lockwood fe4b4c2d83 Optimised blending for translucent images with opaque background color + fixed cropping for images in cover/contain mode.
Summary:
@public

Our background color propagation mechanism is designed to make rendering of translucent content more efficient by pre-blending against an opaque background. Currently this only works for text however, because images are not composited into their background even if the background color is opaque.

This diff precomposites network images with their background color when the background is opaque, allowing them to take advantage of this performance optimization.

I've also added some logic to correctly crop the downloaded image when the resizeMode is "cover" or "contain" - previously it was only correct for "stretch".

Before:{F22437859}
After:{F22437862}

Test Plan: Run the UIExplorer "<ListView> - Paging" example with "color blended layers" enabled and observe that the images appear in green now, instead of red as they did before.
2015-05-22 07:19:06 -08:00
Tadeu Zagallo 08844e3ddc [ReactNative] Add fps monitor
Summary:
@public

Add basic JS and UI thread FPS monitor

Test Plan: Launch the UIExplorer, open the Dev Menu with cmd+D, and select `Show FPS Monitor`
2015-05-20 18:26:36 -08:00