Merge pull request #39 from dogabudak/master

Passing single object rather than series of params

Author: kyle-ssg

README.md

@@ -18,7 +18,7 @@ npx react-native-performance-monitor get
 # Usage
 ```
 import withPerformanceMonitor from 'react-native-performance-monitor/provider';
-export default withPerformanceMonitor(YourScreen, 'Screen Name');
+export default withPerformanceMonitor({WrappedComponent: YourScreen, _id: 'Screen Name'});
 ```
 
 # An example
@@ -51,14 +51,14 @@ With this before and after I observed the following within a large flat list.
 In order to connect to a real device you will need to set the IP of your computer, for example:
 
 ```
-export default withPerformanceMonitor(AwesomeChat, 'AwesomeChat', '192.168.1.10');
+export default withPerformanceMonitor({ WrappedComponent: AwesomeChat, _id: 'AwesomeChat', ip: '192.168.1.10'});
 ```
 
 By default the server is listening on port 8125 for event updates and 8126 for websocket.
 If you need to configure the port, because you are tunneling your request or similar, and or disable the Websocket communication, you can do it like this:
 
 ```
-export default withPerformanceMonitor(AwesomeChat, 'AwesomeChat', '192.168.1.10', undefined, undefined, 80, false);
+export default withPerformanceMonitor({WrappedComponent: AwesomeChat, _id: 'AwesomeChat', ip: '192.168.1.10', events: undefined, showLogs: undefined, port: 80, enableWS: false});
 ```
 
 # How it works

components/App.js

@@ -7,7 +7,6 @@ import ReactFC from 'react-fusioncharts/lib/ReactFC';
 import _ from 'lodash';
 import parseInput from './parse-input';
 import Row from './Row';
-import { max } from 'moment';
 
 document.addEventListener('click', function(e) {
   if (document.activeElement.toString() == '[object HTMLButtonElement]') {

example/App.js

@@ -70,4 +70,4 @@ const styles = StyleSheet.create({
   }
 });
 
-export default withPerformance(App, 'App');
+export default withPerformance({WrappedComponent: App, _id: 'App'});

lib/README.md

@@ -14,7 +14,7 @@ npx react-native-performance-monitor get
 # Usage
 ```
 import withPerformanceMonitor from 'react-native-performance-monitor/provider';
-export default withPerformanceMonitor(YourScreen, 'Screen Name');
+export default withPerformanceMonitor({WrappedComponent: YourScreen, _id: 'Screen Name'});
 ```
 
 # An example

lib/provider.js

@@ -3,83 +3,83 @@ import React, { Component } from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 
 const Profiler = React.Profiler;
-export default (WrappedComponent, _id, ip = '127.0.0.1', events = ['mount', 'update'], showLogs = false, port = 8125, enableWS = true) => {
-    const remote = `http://${ip}:${port}/value`;
-    const log = (message) => {
-        if (showLogs) {
-            console.log(message);
-        }
-    };
-    class HOC extends Component {
-        static displayName = 'withPerformance';
+export default ({ WrappedComponent, _id, ip = '127.0.0.1', events = ['mount', 'update'], showLogs = false, port = 8125, enableWS = true }) => {
+  const remote = `http://${ip}:${port}/value`;
+  const log = (message) => {
+    if (showLogs) {
+      console.log(message);
+    }
+  };
+  class HOC extends Component {
+    static displayName = 'withPerformance';
 
-        constructor(props) {
-            super(props);
-            this.state = {};
-        }
+    constructor(props) {
+      super(props);
+      this.state = {};
+    }
 
-        componentDidMount() {
-            if (!enableWS) return;
-            this.socket = new WebSocket(`ws://${ip}:8126`);
-            this.socket.onopen = function () {
-                log('RNPM: connected');
-            };
+    componentDidMount() {
+      if (!enableWS) return;
+      this.socket = new WebSocket(`ws://${ip}:8126`);
+      this.socket.onopen = function () {
+        log('RNPM: connected');
+      };
 
-            this.socket.onmessage = (event) => {
-                switch (event.data) {
-                    case 'remount': {
-                        log('RNPM: remount');
-                        this.setState({ unmount: true }, () => {
-                            setTimeout(() => this.setState({ unmount: false }), 200);
-                        });
-                        break;
-                    }
-                    case 'forceUpdate': {
-                        log('RNPM: force update');
-                        this.forceUpdate();
-                        break;
-                    }
-                    default:
-                        break;
-                }
-            };
+      this.socket.onmessage = (event) => {
+        switch (event.data) {
+          case 'remount': {
+            log('RNPM: remount');
+            this.setState({ unmount: true }, () => {
+              setTimeout(() => this.setState({ unmount: false }), 200);
+            });
+            break;
+          }
+          case 'forceUpdate': {
+            log('RNPM: force update');
+            this.forceUpdate();
+            break;
+          }
+          default:
+            break;
         }
+      };
+    }
 
-        componentWillUnmount() {
-            this.socket && this.socket.close();
-        }
+    componentWillUnmount() {
+      this.socket && this.socket.close();
+    }
 
-        logMeasurement = async (id, phase, actualDuration) => {
-            if (!events.includes(phase)) {
-                return;
-            }
-            if (actualDuration < 0.1) {
-                return;
-            }
+    logMeasurement = async (id, phase, actualDuration) => {
+      if (!events.includes(phase)) {
+        return;
+      }
+      if (actualDuration < 0.1) {
+        return;
+      }
 
-            if (remote) {
-                fetch(remote, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({ value: actualDuration }),
-                });
-            }
-        }
+      if (remote) {
+        fetch(remote, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ value: actualDuration }),
+        });
+      }
+    }
 
-        render() {
-            return this.state.unmount ? null : (
-                <Profiler id={_id} onRender={this.logMeasurement}>
-                    <WrappedComponent
-                      {...this.props}
-                      {...this.state}
-                    />
-                </Profiler>
+    render() {
+      return this.state.unmount ? null : (
+        <Profiler id={_id} onRender={this.logMeasurement}>
+          <WrappedComponent
+            {...this.props}
+            {...this.state}
+          />
+        </Profiler>
 
-            );
-        }
+      );
     }
+  }
 
-    return hoistNonReactStatics(HOC, WrappedComponent);;
+  return hoistNonReactStatics(HOC, WrappedComponent);
 };

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "ssg-homepage",
+  "name": "react-native-performance-monitor",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",

server.js

@@ -1,10 +1,11 @@
+import { join } from 'path';
+import cacheableResponse from 'cacheable-response';
+import express from 'express';
+import bodyParser from 'body-parser';
+
 require('@babel/polyfill');
 
-const { join } = require('path');
-const cacheableResponse = require('cacheable-response');
-const express = require('express');
 const next = require('next');
-
 const port = parseInt(process.env.PORT, 10) || 3000;
 const dev = process.env.NODE_ENV !== 'production';
 const app = next({ dev });
@@ -70,8 +71,8 @@ Promise.all([
         });
     }
 
-    server.post('/value', require('body-parser').json(), (req, res) => {
-        if (req.body && req.body.value) {
+    server.post('/value', bodyParser.json(), (req, res) => {
+        if (req?.body?.value) {
             io.emit('data', req.body.value);
         }
         res.send('');