@speedsters/react
Advanced tools
Comparing version 0.1.0 to 0.2.0
@@ -19,2 +19,6 @@ "use strict"; | ||
var COMPONENT_DID_UPDATE = 'componentDidUpdate'; | ||
var DEFAULT_CONNECTION_OPTIONS = { | ||
name: 'Speedsters React', | ||
packageId: '@speedsters/react', | ||
}; | ||
var DEFAULT_COMPONENT_OPTIONS = { | ||
@@ -31,2 +35,3 @@ excludes: {}, | ||
this.connect = this.connect.bind(this); | ||
this.handleSocketMessages = this.handleSocketMessages.bind(this); | ||
} | ||
@@ -41,11 +46,45 @@ Object.defineProperty(SReact.prototype, "data", { | ||
SReact.prototype.connect = function (options) { | ||
var _this_1 = this; | ||
if (options === void 0) { options = {}; } | ||
this.hasInitiateConnection = true; | ||
socket = core_1.createSocket(options); | ||
var socketOptions = __assign({}, DEFAULT_CONNECTION_OPTIONS, options); | ||
socketOptions.onMessage = function (e) { | ||
if (options.onMessage) { | ||
options.onMessage(e); | ||
} | ||
try { | ||
var msg = JSON.parse(e.data); | ||
if (msg && msg.type) { | ||
_this_1.handleSocketMessages(msg); | ||
} | ||
} | ||
catch (e) { | ||
console.log("Error while parsing React:socket.onMessage " + e); | ||
} | ||
}; | ||
socket = core_1.createSocket(socketOptions); | ||
socket.connect(); | ||
return this; | ||
}; | ||
SReact.prototype.handleSocketMessages = function (data) { | ||
var _a, _b; | ||
switch (data.type) { | ||
case 'CLEAR_REACT_RENDER_HISTORY': | ||
if (data.payload && | ||
data.payload.componentName && | ||
this._data[data.payload.componentName]) { | ||
this._data = __assign({}, this._data, (_a = {}, _a[data.payload.componentName] = __assign({}, this._data[data.payload.componentName], (_b = {}, _b[exports.RENDER_COUNT] = { | ||
value: 0, | ||
timing: 0, | ||
timeline: [], | ||
}, _b)), _a)); | ||
} | ||
break; | ||
default: | ||
break; | ||
} | ||
}; | ||
SReact.prototype.classComponent = function (_this, options) { | ||
var _this_1 = this; | ||
var _a, _b; | ||
var _a; | ||
var methods = []; | ||
@@ -57,11 +96,9 @@ var proto = Object.getPrototypeOf(_this); | ||
var COMPONENT_NAME = _this.constructor && _this.constructor.displayName || _this.constructor.name || 'ReactComponentClass'; | ||
var _c = __assign({}, DEFAULT_COMPONENT_OPTIONS, options), milliseconds = _c.milliseconds, excludes = _c.excludes, verbose = _c.verbose; | ||
var performanceData = (_a = {}, | ||
_a[COMPONENT_NAME] = (_b = {}, | ||
_b[exports.RENDER_COUNT] = { | ||
value: 0, | ||
timing: 0, | ||
timeline: [], | ||
}, | ||
_b), | ||
var _b = __assign({}, DEFAULT_COMPONENT_OPTIONS, options), milliseconds = _b.milliseconds, excludes = _b.excludes, verbose = _b.verbose; | ||
this._data[COMPONENT_NAME] = (_a = {}, | ||
_a[exports.RENDER_COUNT] = { | ||
value: 0, | ||
timing: 0, | ||
timeline: [], | ||
}, | ||
_a); | ||
@@ -74,6 +111,6 @@ var hasDidUpdate = !!proto[COMPONENT_DID_UPDATE]; | ||
var renderStartTime = null; | ||
function updateRenderCount() { | ||
var updateRenderCount = function () { | ||
var time = utils_1.performanceNow(); | ||
performanceData[COMPONENT_NAME][exports.RENDER_COUNT].value += 1; | ||
performanceData[COMPONENT_NAME][exports.RENDER_COUNT].timing = time - firstRenderingStartTime; | ||
_this_1._data[COMPONENT_NAME][exports.RENDER_COUNT].value += 1; | ||
_this_1._data[COMPONENT_NAME][exports.RENDER_COUNT].timing = time - firstRenderingStartTime; | ||
var renderCountItem = { | ||
@@ -87,4 +124,4 @@ timing: time - renderStartTime, | ||
} | ||
performanceData[COMPONENT_NAME][exports.RENDER_COUNT].timeline.push(renderCountItem); | ||
} | ||
_this_1._data[COMPONENT_NAME][exports.RENDER_COUNT].timeline.push(renderCountItem); | ||
}; | ||
var _loop_1 = function (name_1) { | ||
@@ -98,2 +135,3 @@ var func = _this[name_1]; | ||
} | ||
var _a; | ||
var time = utils_1.performanceNow(); | ||
@@ -119,12 +157,13 @@ var isRenderMethod = name_1 === 'render'; | ||
hasDidUpdate) { | ||
performanceData[COMPONENT_NAME][name_1] = { | ||
_this_1._data[COMPONENT_NAME][name_1] = { | ||
value: timing | ||
}; | ||
} | ||
_this_1._data = __assign({}, _this_1._data, performanceData); | ||
if (verbose) { | ||
console.log("@speedsters/react: " + COMPONENT_NAME + " " + performanceData); | ||
console.log("@speedsters/react: " + COMPONENT_NAME + " " + _this_1._data[COMPONENT_NAME]); | ||
} | ||
if (_this_1.hasInitiateConnection) { | ||
socket.sendPerformance(performanceData); | ||
socket.sendPerformance((_a = {}, | ||
_a[COMPONENT_NAME] = _this_1._data[COMPONENT_NAME], | ||
_a)); | ||
} | ||
@@ -136,4 +175,4 @@ return res; | ||
}; | ||
for (var _i = 0, _d = Object.getOwnPropertyNames(proto); _i < _d.length; _i++) { | ||
var name_1 = _d[_i]; | ||
for (var _i = 0, _c = Object.getOwnPropertyNames(proto); _i < _c.length; _i++) { | ||
var name_1 = _c[_i]; | ||
_loop_1(name_1); | ||
@@ -140,0 +179,0 @@ } |
{ | ||
"name": "@speedsters/react", | ||
"version": "0.1.0", | ||
"version": "0.2.0", | ||
"description": "A simple way of testing your react application performance", | ||
@@ -5,0 +5,0 @@ "main": "./cjs/index.js", |
@@ -9,2 +9,3 @@ import { ConnectionOptions, IReact as SReactType, ReactComponentOptions } from '@speedsters/type'; | ||
connect(options?: ConnectionOptions): this; | ||
private handleSocketMessages; | ||
classComponent(_this: any, options?: ReactComponentOptions): any; | ||
@@ -11,0 +12,0 @@ } |
11693
221