Refactor to export HOC, handle socket in lifecycle methods & add option to show requests in console

Author: Lucas Bento

README.md

@@ -26,28 +26,33 @@ code --install-extension lucasbento.react-native-actions
 
 ### React Native
 
-> Only required for iOS.
-
 1. Install the dependency
 ```bash
 yarn add react-native-actions --dev
 ```
 
-2. Link on iOS
+2. Link (Only required for iOS)
 ```bash
 react-native link react-native-actions
 ```
 
 > You can check out the [manual installation here](https://github.com/lucasbento/react-native-actions/blob/master/packages/react-native-actions/README.md#manual-installation).
 
-3. Simply put this on your root file (e.g. `index.js`):
-```js
-if (__DEV__) {
- require('react-native-actions');
+3. Simply wrap your root component with `withActions` [HOC](https://reactjs.org/docs/higher-order-components.html):
+```jsx
+// Your main component
+
+import withActions from 'react-native-actions';
+
+class Application extends Component {
+ // ...
 }
+
+export default withActions(Application); 
 ```
 
 ### Usage
 
-- <kbd>⌘</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd>: to reload the code on device.
-- <kbd>⌘</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd>: to open developer menu.
+- <kbd>⌘</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd>: to reload the code on device;
+- <kbd>⌘</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd>: to open developer menu;
+- <kbd>⌘</kbd> + <kbd>Shift</kbd> + <kbd>T</kbd>: to show network requests in console (requires remote debugging).

packages/react-native-actions/README.md

@@ -7,19 +7,32 @@
  Run React Native actions from within VSCode.
 </p>
 
+<p align="center">
+ <a href="https://github.com/lucasbento/react-native-actions/issues"><img src="https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat"></a>
+ <a href="https://saythanks.io/to/lucasbento"><img src="https://img.shields.io/badge/say-thanks-ff69b4.svg"></a>
+</p>
+
+## Features
+
+- Reload the code in device;
+- Open developer menu;
+- Show network requests in console (requires remote debugging).
+
+This package is inteded to be used with [VSCode React Native Actions](https://marketplace.visualstudio.com/items?itemName=lucasbento.react-native-actions) extension.
+
 ## Getting started
 
 ```bash
 yarn add react-native-actions --dev
 ```
 
-### Automatic installation
+### Automatic installation (only required for iOS)
 
 ```bash
 react-native link react-native-actions
 ```
 
-### Manual installation
+### Manual installation (only required for iOS)
 
 #### iOS
 
@@ -32,10 +45,16 @@ react-native link react-native-actions
 
 Android doesn't require any dependency installed through react-native, only [Android Debug Bridge (adb)](https://developer.android.com/studio/command-line/adb.html) on the computer.
 
-## Usage (only required for iOS)
-```js
-if (__DEV__) {
- require('react-native-actions');
+## Usage
+```jsx
+// Your main component
+
+import withActions from 'react-native-actions';
+
+class Application extends Component {
+ // ...
 }
+
+export default withActions(Application); 
 ```
 

packages/react-native-actions/index.js

@@ -1,27 +1,94 @@
+import React, { Component } from 'react';
 import { Platform, NativeModules } from 'react-native';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import Toast from 'react-native-easy-toast';
 import io from 'socket.io-client';
 
 import config from './common/config';
 
-const run = () => {
- // Android is handled through adb
- if (Platform.OS === 'android') {
- return;
- }
+const DEFAULT_XMLHTTPREQUEST = GLOBAL.XMLHttpRequest;
+const isDev = __DEV__;
+
+const withActions = (WrappedComponent) => {
+ class RNActions extends Component {
+ state = {
+ isShowRequestEnabled: false,
+ };
+ 
+ componentWillMount() {
+ this.handleMount();
+ }
+ 
+ componentWillUnmount() {
+ this.handleUnmount();
+ }
+ 
+ toggleShowRequest = () =>
+ this.setState(({ isShowRequestEnabled }) => ({
+ isShowRequestEnabled: !isShowRequestEnabled,
+ }), () => {
+ const toastMessage = this.state.isShowRequestEnabled ?
+ 'Enabled showing requests in console' :
+ 'Disabled showing requests in console';
 
- const { RNActions, DevMenu, DevSettings } = NativeModules;
+  this.toast.show(toastMessage);
 
- const COMMANDS = {
- reload: DevSettings.reload,
- openDevMenu: DevMenu.show,
- };
+ GLOBAL.XMLHttpRequest = this.state.isShowRequestEnabled ?
+ GLOBAL.originalXMLHttpRequest :
+ DEFAULT_XMLHTTPREQUEST;
+ });
+ 
+ handleMount = () => {
+ if (!isDev) {
+ return;
+ }
+ 
+ const { RNActions: NativeRNActions } = NativeModules;
+ 
+ NativeRNActions.getHostUrl()
+ .then(this.handleSetupSocket);
+ };
+ 
+ handleSetupSocket = (url) => {
+ const { DevMenu, DevSettings } = NativeModules;
+ 
+ this.socket = io(`${url}:${config.port}`);
+ 
+ const COMMANDS = {
+ ...Platform.select({
+ ios: {
+ reload: DevSettings.reload,
+ openDevMenu: DevMenu.show,
+ },
+ android: {},
+ }),
+ toggleShowRequest: this.toggleShowRequest,
+ };
+ 
+ this.socket.on('action', ({ type }) => COMMANDS[type]());
+ };
+ 
+ handleUnmount = () => this.socket.disconnect();
+ 
+ render() {
+ if (isDev) {
+ return [
+ <Toast
+ key="toast"
+ ref={ref => this.toast = ref}
+ />,
+ <WrappedComponent
+ key="main"
+ {...this.props}
+ />,
+ ];
+ }
 
- RNActions.getHostUrl()
- .then((url) => {
-  const socket = io(`${url}:${config.port}`);
+  return <WrappedComponent {...this.props} />;
+ }
+ }
 
- socket.on('action', ({ type }) => COMMANDS[type]());
- });
-}
+ return hoistNonReactStatics(RNActions, WrappedComponent);
+};
 
-run();
+export default withActions;

packages/react-native-actions/package.json

@@ -11,6 +11,8 @@
  "url": "https://github.com/lucasbento/react-native-actions/issues"
  },
  "dependencies": {
+ "hoist-non-react-statics": "^2.3.1",
+ "react-native-easy-toast": "^1.0.9",
  "socket.io-client": "^2.0.3"
  },
  "keywords": [