From 594597b4f4cf67a7c84614a90daecd0271bb8a14 Mon Sep 17 00:00:00 2001 From: doga Date: Mon, 7 Jun 2021 15:10:25 +0200 Subject: [PATCH 1/6] Changed provider chain of parameter to a structured object --- components/App.js | 1 - lib/provider.js | 136 +++++++++++++++++++++++----------------------- 2 files changed, 68 insertions(+), 69 deletions(-) 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/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); }; From f4d888a694c4e2343ae382d972638b70d596dfdd Mon Sep 17 00:00:00 2001 From: doga Date: Mon, 7 Jun 2021 15:26:59 +0200 Subject: [PATCH 2/6] changed package name to be consistence to registery name --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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", From a50fd1e9bc9800e40626f664effee073b07e37e2 Mon Sep 17 00:00:00 2001 From: doga Date: Mon, 7 Jun 2021 15:55:00 +0200 Subject: [PATCH 3/6] Updated Readme according to the new changes --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 6e327f0..7773e8b 100644 --- a/README.md +++ b/README.md @@ -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 From b6c8bcc5e411206cff44a1b03bfbcc9504143f93 Mon Sep 17 00:00:00 2001 From: doga Date: Mon, 7 Jun 2021 15:56:18 +0200 Subject: [PATCH 4/6] Updated Readme according to the new changes --- README.md | 2 +- example/App.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 7773e8b..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 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'}); From d293ac8a0e9d7cde92fdbe6fee866f4b50c9ab3e Mon Sep 17 00:00:00 2001 From: doga Date: Mon, 7 Jun 2021 15:58:48 +0200 Subject: [PATCH 5/6] Updated Readme according to the new changes --- lib/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 From 66cd03c78340064d1ecb042351a7180da683b44e Mon Sep 17 00:00:00 2001 From: doga budak Date: Mon, 2 May 2022 22:32:29 +0200 Subject: [PATCH 6/6] Made some changes to increase the readability --- server.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) 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('');