diff --git a/README.md b/README.md
index 6e327f0..ec91ee3 100644
--- a/README.md
+++ b/README.md
@@ -19,7 +19,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
@@ -52,14 +52,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
diff --git a/components/App.js b/components/App.js
index c15c477..ba88fe6 100644
--- a/components/App.js
+++ b/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]') {
diff --git a/example/App.js b/example/App.js
index dd027da..e5c0b7a 100644
--- a/example/App.js
+++ b/example/App.js
@@ -70,4 +70,4 @@ const styles = StyleSheet.create({
}
});
-export default withPerformance(App, 'App');
+export default withPerformance({WrappedComponent: App, _id: 'App'});
diff --git a/lib/README.md b/lib/README.md
index dbea6b9..ce5fe2d 100644
--- a/lib/README.md
+++ b/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
diff --git a/lib/provider.js b/lib/provider.js
index 005ff36..1961af2 100644
--- a/lib/provider.js
+++ b/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 : (
-
-
-
+ render() {
+ return this.state.unmount ? null : (
+
+
+
- );
- }
+ );
}
+ }
- return hoistNonReactStatics(HOC, WrappedComponent);;
+ return hoistNonReactStatics(HOC, WrappedComponent);
};
diff --git a/package.json b/package.json
index 3c38b79..ad04b68 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
{
- "name": "ssg-homepage",
+ "name": "react-native-performance-monitor",
"version": "1.0.0",
"description": "",
"main": "index.js",
diff --git a/server.js b/server.js
index b6d7983..70443d6 100644
--- a/server.js
+++ b/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('');