react-native/Libraries/EventEmitter/RCTDeviceEventEmitter.js

81 lines
2.6 KiB
JavaScript
Raw Normal View History

2015-01-30 01:10:49 +00:00
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* 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.
2015-01-30 01:10:49 +00:00
*
* @providesModule RCTDeviceEventEmitter
* @flow
2015-01-30 01:10:49 +00:00
*/
'use strict';
Added native event emitter Summary: This is a solution for the problem I raised in https://www.facebook.com/groups/react.native.community/permalink/768218933313687/ I've added a new native base class, `RCTEventEmitter` as well as an equivalent JS class/module `NativeEventEmitter` (RCTEventEmitter.js and EventEmitter.js were taken already). Instead of arbitrary modules sending events via `bridge.eventDispatcher`, the idea is that any module that sends events should now subclass `RCTEventEmitter`, and provide an equivalent JS module that subclasses `NativeEventEmitter`. JS code that wants to observe the events should now observe it via the specific JS module rather than via `RCTDeviceEventEmitter` directly. e.g. to observer a keyboard event, instead of writing: const RCTDeviceEventEmitter = require('RCTDeviceEventEmitter'); RCTDeviceEventEmitter.addListener('keyboardWillShow', (event) => { ... }); You'd now write: const Keyboard = require('Keyboard'); Keyboard.addListener('keyboardWillShow', (event) => { ... }); Within a component, you can also use the `Subscribable.Mixin` as you would previously, but instead of: this.addListenerOn(RCTDeviceEventEmitter, 'keyboardWillShow', ...); Write: this.addListenerOn(Keyboard, 'keyboardWillShow', ...); This approach allows the native `RCTKeyboardObserver` module to be created lazily the first time a listener is added, and to stop sending events when the last listener is removed. It also allows us to validate that the event strings being observed and omitted match the supported events for that module. As a proof-of-concept, I've converted the `RCTStatusBarManager` and `RCTKeyboardObserver` modules to use the new system. I'll convert the rest in a follow up diff. For now, the new `NativeEventEmitter` JS module wraps the `RCTDeviceEventEmitter` JS module, and just uses the native `RCTEventEmitter` module for bookkeeping. This allows for full backwards compatibility (code that is observing the event via `RCTDeviceEventEmitter` instead of the specific module will still work as expected, albeit with a warning). Once all legacy calls have been removed, this could be refactored to something more elegant internally, whilst maintaining the same public interface. Note: currently, all device events still share a single global namespace, since they're really all registered on the same emitter instance internally. We should move away from that as soon as possible because it's not intuitive and will likely lead to strange bugs if people add generic events such as "onChange" or "onError" to their modules (which is common practice for components, where it's not a problem). Reviewed By: javache Differential Revision: D3269966 fbshipit-source-id: 1412daba850cd373020e1086673ba38ef9193050
2016-05-11 13:26:53 +00:00
const EventEmitter = require('EventEmitter');
const EventSubscriptionVendor = require('EventSubscriptionVendor');
Added native event emitter Summary: This is a solution for the problem I raised in https://www.facebook.com/groups/react.native.community/permalink/768218933313687/ I've added a new native base class, `RCTEventEmitter` as well as an equivalent JS class/module `NativeEventEmitter` (RCTEventEmitter.js and EventEmitter.js were taken already). Instead of arbitrary modules sending events via `bridge.eventDispatcher`, the idea is that any module that sends events should now subclass `RCTEventEmitter`, and provide an equivalent JS module that subclasses `NativeEventEmitter`. JS code that wants to observe the events should now observe it via the specific JS module rather than via `RCTDeviceEventEmitter` directly. e.g. to observer a keyboard event, instead of writing: const RCTDeviceEventEmitter = require('RCTDeviceEventEmitter'); RCTDeviceEventEmitter.addListener('keyboardWillShow', (event) => { ... }); You'd now write: const Keyboard = require('Keyboard'); Keyboard.addListener('keyboardWillShow', (event) => { ... }); Within a component, you can also use the `Subscribable.Mixin` as you would previously, but instead of: this.addListenerOn(RCTDeviceEventEmitter, 'keyboardWillShow', ...); Write: this.addListenerOn(Keyboard, 'keyboardWillShow', ...); This approach allows the native `RCTKeyboardObserver` module to be created lazily the first time a listener is added, and to stop sending events when the last listener is removed. It also allows us to validate that the event strings being observed and omitted match the supported events for that module. As a proof-of-concept, I've converted the `RCTStatusBarManager` and `RCTKeyboardObserver` modules to use the new system. I'll convert the rest in a follow up diff. For now, the new `NativeEventEmitter` JS module wraps the `RCTDeviceEventEmitter` JS module, and just uses the native `RCTEventEmitter` module for bookkeeping. This allows for full backwards compatibility (code that is observing the event via `RCTDeviceEventEmitter` instead of the specific module will still work as expected, albeit with a warning). Once all legacy calls have been removed, this could be refactored to something more elegant internally, whilst maintaining the same public interface. Note: currently, all device events still share a single global namespace, since they're really all registered on the same emitter instance internally. We should move away from that as soon as possible because it's not intuitive and will likely lead to strange bugs if people add generic events such as "onChange" or "onError" to their modules (which is common practice for components, where it's not a problem). Reviewed By: javache Differential Revision: D3269966 fbshipit-source-id: 1412daba850cd373020e1086673ba38ef9193050
2016-05-11 13:26:53 +00:00
const BatchedBridge = require('BatchedBridge');
2015-01-30 01:10:49 +00:00
Added native event emitter Summary: This is a solution for the problem I raised in https://www.facebook.com/groups/react.native.community/permalink/768218933313687/ I've added a new native base class, `RCTEventEmitter` as well as an equivalent JS class/module `NativeEventEmitter` (RCTEventEmitter.js and EventEmitter.js were taken already). Instead of arbitrary modules sending events via `bridge.eventDispatcher`, the idea is that any module that sends events should now subclass `RCTEventEmitter`, and provide an equivalent JS module that subclasses `NativeEventEmitter`. JS code that wants to observe the events should now observe it via the specific JS module rather than via `RCTDeviceEventEmitter` directly. e.g. to observer a keyboard event, instead of writing: const RCTDeviceEventEmitter = require('RCTDeviceEventEmitter'); RCTDeviceEventEmitter.addListener('keyboardWillShow', (event) => { ... }); You'd now write: const Keyboard = require('Keyboard'); Keyboard.addListener('keyboardWillShow', (event) => { ... }); Within a component, you can also use the `Subscribable.Mixin` as you would previously, but instead of: this.addListenerOn(RCTDeviceEventEmitter, 'keyboardWillShow', ...); Write: this.addListenerOn(Keyboard, 'keyboardWillShow', ...); This approach allows the native `RCTKeyboardObserver` module to be created lazily the first time a listener is added, and to stop sending events when the last listener is removed. It also allows us to validate that the event strings being observed and omitted match the supported events for that module. As a proof-of-concept, I've converted the `RCTStatusBarManager` and `RCTKeyboardObserver` modules to use the new system. I'll convert the rest in a follow up diff. For now, the new `NativeEventEmitter` JS module wraps the `RCTDeviceEventEmitter` JS module, and just uses the native `RCTEventEmitter` module for bookkeeping. This allows for full backwards compatibility (code that is observing the event via `RCTDeviceEventEmitter` instead of the specific module will still work as expected, albeit with a warning). Once all legacy calls have been removed, this could be refactored to something more elegant internally, whilst maintaining the same public interface. Note: currently, all device events still share a single global namespace, since they're really all registered on the same emitter instance internally. We should move away from that as soon as possible because it's not intuitive and will likely lead to strange bugs if people add generic events such as "onChange" or "onError" to their modules (which is common practice for components, where it's not a problem). Reviewed By: javache Differential Revision: D3269966 fbshipit-source-id: 1412daba850cd373020e1086673ba38ef9193050
2016-05-11 13:26:53 +00:00
import type EmitterSubscription from 'EmitterSubscription';
/**
* Deprecated - subclass NativeEventEmitter to create granular event modules instead of
* adding all event listeners directly to RCTDeviceEventEmitter.
Added native event emitter Summary: This is a solution for the problem I raised in https://www.facebook.com/groups/react.native.community/permalink/768218933313687/ I've added a new native base class, `RCTEventEmitter` as well as an equivalent JS class/module `NativeEventEmitter` (RCTEventEmitter.js and EventEmitter.js were taken already). Instead of arbitrary modules sending events via `bridge.eventDispatcher`, the idea is that any module that sends events should now subclass `RCTEventEmitter`, and provide an equivalent JS module that subclasses `NativeEventEmitter`. JS code that wants to observe the events should now observe it via the specific JS module rather than via `RCTDeviceEventEmitter` directly. e.g. to observer a keyboard event, instead of writing: const RCTDeviceEventEmitter = require('RCTDeviceEventEmitter'); RCTDeviceEventEmitter.addListener('keyboardWillShow', (event) => { ... }); You'd now write: const Keyboard = require('Keyboard'); Keyboard.addListener('keyboardWillShow', (event) => { ... }); Within a component, you can also use the `Subscribable.Mixin` as you would previously, but instead of: this.addListenerOn(RCTDeviceEventEmitter, 'keyboardWillShow', ...); Write: this.addListenerOn(Keyboard, 'keyboardWillShow', ...); This approach allows the native `RCTKeyboardObserver` module to be created lazily the first time a listener is added, and to stop sending events when the last listener is removed. It also allows us to validate that the event strings being observed and omitted match the supported events for that module. As a proof-of-concept, I've converted the `RCTStatusBarManager` and `RCTKeyboardObserver` modules to use the new system. I'll convert the rest in a follow up diff. For now, the new `NativeEventEmitter` JS module wraps the `RCTDeviceEventEmitter` JS module, and just uses the native `RCTEventEmitter` module for bookkeeping. This allows for full backwards compatibility (code that is observing the event via `RCTDeviceEventEmitter` instead of the specific module will still work as expected, albeit with a warning). Once all legacy calls have been removed, this could be refactored to something more elegant internally, whilst maintaining the same public interface. Note: currently, all device events still share a single global namespace, since they're really all registered on the same emitter instance internally. We should move away from that as soon as possible because it's not intuitive and will likely lead to strange bugs if people add generic events such as "onChange" or "onError" to their modules (which is common practice for components, where it's not a problem). Reviewed By: javache Differential Revision: D3269966 fbshipit-source-id: 1412daba850cd373020e1086673ba38ef9193050
2016-05-11 13:26:53 +00:00
*/
class RCTDeviceEventEmitter extends EventEmitter {
sharedSubscriber: EventSubscriptionVendor;
constructor() {
const sharedSubscriber = new EventSubscriptionVendor();
super(sharedSubscriber);
this.sharedSubscriber = sharedSubscriber;
}
_nativeEventModule(eventType: ?string) {
if (eventType) {
if (eventType.lastIndexOf('statusBar', 0) === 0) {
console.warn('`%s` event should be registered via the StatusBarIOS module', eventType);
return require('StatusBarIOS');
}
if (eventType.lastIndexOf('keyboard', 0) === 0) {
console.warn('`%s` event should be registered via the Keyboard module', eventType);
return require('Keyboard');
}
if (eventType === 'appStateDidChange' || eventType === 'memoryWarning') {
console.warn('`%s` event should be registered via the AppState module', eventType);
return require('AppState');
}
}
return null;
}
addListener(eventType: string, listener: Function, context: ?Object): EmitterSubscription {
const eventModule = this._nativeEventModule(eventType);
return eventModule ? eventModule.addListener(eventType, listener, context)
: super.addListener(eventType, listener, context);
}
removeAllListeners(eventType: ?string) {
const eventModule = this._nativeEventModule(eventType);
(eventModule && eventType) ? eventModule.removeAllListeners(eventType)
: super.removeAllListeners(eventType);
}
removeSubscription(subscription: EmitterSubscription) {
if (subscription.emitter !== this) {
subscription.emitter.removeSubscription(subscription);
} else {
super.removeSubscription(subscription);
}
Added native event emitter Summary: This is a solution for the problem I raised in https://www.facebook.com/groups/react.native.community/permalink/768218933313687/ I've added a new native base class, `RCTEventEmitter` as well as an equivalent JS class/module `NativeEventEmitter` (RCTEventEmitter.js and EventEmitter.js were taken already). Instead of arbitrary modules sending events via `bridge.eventDispatcher`, the idea is that any module that sends events should now subclass `RCTEventEmitter`, and provide an equivalent JS module that subclasses `NativeEventEmitter`. JS code that wants to observe the events should now observe it via the specific JS module rather than via `RCTDeviceEventEmitter` directly. e.g. to observer a keyboard event, instead of writing: const RCTDeviceEventEmitter = require('RCTDeviceEventEmitter'); RCTDeviceEventEmitter.addListener('keyboardWillShow', (event) => { ... }); You'd now write: const Keyboard = require('Keyboard'); Keyboard.addListener('keyboardWillShow', (event) => { ... }); Within a component, you can also use the `Subscribable.Mixin` as you would previously, but instead of: this.addListenerOn(RCTDeviceEventEmitter, 'keyboardWillShow', ...); Write: this.addListenerOn(Keyboard, 'keyboardWillShow', ...); This approach allows the native `RCTKeyboardObserver` module to be created lazily the first time a listener is added, and to stop sending events when the last listener is removed. It also allows us to validate that the event strings being observed and omitted match the supported events for that module. As a proof-of-concept, I've converted the `RCTStatusBarManager` and `RCTKeyboardObserver` modules to use the new system. I'll convert the rest in a follow up diff. For now, the new `NativeEventEmitter` JS module wraps the `RCTDeviceEventEmitter` JS module, and just uses the native `RCTEventEmitter` module for bookkeeping. This allows for full backwards compatibility (code that is observing the event via `RCTDeviceEventEmitter` instead of the specific module will still work as expected, albeit with a warning). Once all legacy calls have been removed, this could be refactored to something more elegant internally, whilst maintaining the same public interface. Note: currently, all device events still share a single global namespace, since they're really all registered on the same emitter instance internally. We should move away from that as soon as possible because it's not intuitive and will likely lead to strange bugs if people add generic events such as "onChange" or "onError" to their modules (which is common practice for components, where it's not a problem). Reviewed By: javache Differential Revision: D3269966 fbshipit-source-id: 1412daba850cd373020e1086673ba38ef9193050
2016-05-11 13:26:53 +00:00
}
}
RCTDeviceEventEmitter = new RCTDeviceEventEmitter();
2015-01-30 01:10:49 +00:00
Decouple Module System from Native Calls Summary: The JavaScript ecosystem doesn't have the notion of a built-in native module loader. Even Node is decoupled from its module loader. The module loader system is just JS that runs on top of the global `process` object which has all the built-in goodies. Additionally there is no such thing as a global require. That is something unique to our providesModule system. In other module systems such as node, every require is contextual. Even registered npm names are localized by version. The only global namespace that is accessible to the host environment is the global object. Normally module systems attaches itself onto the hooks provided by the host environment on the global object. Currently, we have two forms of dispatch that reaches directly into the module system. executeJSCall which reaches directly into require. Everything now calls through the BatchedBridge module (except one RCTLog edge case that I will fix). I propose that the executors calls directly onto `BatchedBridge` through an instance on the global so that everything is guaranteed to go through it. It becomes the main communication hub. I also propose that we drop the dynamic requires inside of MessageQueue/BatchBridge and instead have the modules register themselves with the bridge. executeJSCall was originally modeled after the XHP equivalent. The XHP equivalent was designed that way because the act of doing the call was the thing that defined a dependency on the module from the page. However, that is not how React Native works. The JS side is driving the dependencies by virtue of requiring new modules and frameworks and the existence of dependencies is driven by the JS side, so this design doesn't make as much sense. The main driver for this is to be able to introduce a new module system like Prepack's module system. However, it also unlocks the possibility to do dead module elimination even in our current module system. It is currently not possible because we don't know which module might be called from native. Since the module system now becomes decoupled we could publish all our providesModule modules as npm/CommonJS modules using a rewrite script. That's what React Core does. That way people could use any CommonJS bundler such as Webpack, Closure Compiler, Rollup or some new innovation to create a JS bundle. This diff expands the executeJSCalls to the BatchedBridge's three individual pieces to make them first class instead of being dynamic. This removes one layer of abstraction. Hopefully we can also remove more of the things that register themselves with the BatchedBridge (various EventEmitters) and instead have everything go through the public protocol. ReactMethod/RCT_EXPORT_METHOD. public Reviewed By: vjeux Differential Revision: D2717535 fb-gh-sync-id: 70114f05483124f5ac5c4570422bb91a60a727f6
2015-12-08 23:57:34 +00:00
BatchedBridge.registerCallableModule(
'RCTDeviceEventEmitter',
RCTDeviceEventEmitter
);
2015-01-30 01:10:49 +00:00
module.exports = RCTDeviceEventEmitter;