diff --git a/docs/docs/10.9-perf.md b/docs/docs/10.9-perf.md index 0a1e2133313a2..fe442f02d40a6 100644 --- a/docs/docs/10.9-perf.md +++ b/docs/docs/10.9-perf.md @@ -41,11 +41,15 @@ Prints the overall time taken. If no argument's passed, defaults to all the meas ![](/react/img/docs/perf-wasted.png) -### `Perf.printDOM(measurements)` +### `Perf.printOperations(measurements)` Prints the underlying DOM manipulations, e.g. "set innerHTML" and "remove". ![](/react/img/docs/perf-dom.png) +### `Perf.printDOM(measurements)` + +This method has been renamed to `printOperations()` which is described in the previous paragraph. Currently `printDOM()` still exists as an alias but it prints a deprecation warning and will eventually be removed. + ## Advanced API The above print methods use `Perf.getLastMeasurements()` to pretty-print the result. diff --git a/src/test/ReactDefaultPerf.js b/src/test/ReactDefaultPerf.js index b1a2e56937034..548fab05a514a 100644 --- a/src/test/ReactDefaultPerf.js +++ b/src/test/ReactDefaultPerf.js @@ -18,6 +18,7 @@ var ReactMount = require('ReactMount'); var ReactPerf = require('ReactPerf'); var performanceNow = require('performanceNow'); +var warning = require('warning'); function roundFloat(val) { return Math.floor(val * 100) / 100; @@ -62,6 +63,9 @@ function unwrapLegacyMeasurements(measurements) { return measurements && measurements.__unstable_this_format_will_change || measurements; } +var warnedAboutPrintDOM = false; +var warnedAboutGetMeasurementsSummaryMap = false; + var ReactDefaultPerf = { _allMeasurements: [], // last item in the list is the current one _mountStack: [0], @@ -120,6 +124,16 @@ var ReactDefaultPerf = { }, getMeasurementsSummaryMap: function(measurements) { + warning( + warnedAboutGetMeasurementsSummaryMap, + '`ReactPerf.getMeasurementsSummaryMap(...)` is deprecated. Use ' + + '`ReactPerf.getWasted(...)` instead.' + ); + warnedAboutGetMeasurementsSummaryMap = true; + return ReactDefaultPerf.getWasted(measurements); + }, + + getWasted: function(measurements) { measurements = unwrapLegacyMeasurements(measurements); var summary = ReactDefaultPerfAnalysis.getInclusiveSummary( measurements, @@ -136,7 +150,7 @@ var ReactDefaultPerf = { printWasted: function(measurements) { measurements = unwrapLegacyMeasurements(measurements || ReactDefaultPerf._allMeasurements); - console.table(ReactDefaultPerf.getMeasurementsSummaryMap(measurements)); + console.table(ReactDefaultPerf.getWasted(measurements)); console.log( 'Total time:', ReactDefaultPerfAnalysis.getTotalTime(measurements).toFixed(2) + ' ms' @@ -144,6 +158,16 @@ var ReactDefaultPerf = { }, printDOM: function(measurements) { + warning( + warnedAboutPrintDOM, + '`ReactPerf.printDOM(...)` is deprecated. Use ' + + '`ReactPerf.printOperations(...)` instead.' + ); + warnedAboutPrintDOM = true; + return ReactDefaultPerf.printOperations(measurements); + }, + + printOperations: function(measurements) { measurements = unwrapLegacyMeasurements(measurements || ReactDefaultPerf._allMeasurements); var summary = ReactDefaultPerfAnalysis.getDOMSummary(measurements); console.table(summary.map(function(item) { diff --git a/src/test/__tests__/ReactDefaultPerf-test.js b/src/test/__tests__/ReactDefaultPerf-test.js index 716cbdf06b772..3131f21cf1294 100644 --- a/src/test/__tests__/ReactDefaultPerf-test.js +++ b/src/test/__tests__/ReactDefaultPerf-test.js @@ -28,6 +28,11 @@ describe('ReactDefaultPerf', function() { return now++; }); + if (typeof console.table !== 'function') { + console.table = () => {}; + console.table.isFake = true; + } + React = require('React'); ReactDOM = require('ReactDOM'); ReactDefaultPerf = require('ReactDefaultPerf'); @@ -54,6 +59,12 @@ describe('ReactDefaultPerf', function() { }); }); + afterEach(function() { + if (console.table.isFake) { + delete console.table; + } + }); + function measure(fn) { ReactDefaultPerf.start(); fn(); @@ -68,7 +79,7 @@ describe('ReactDefaultPerf', function() { ReactDOM.render(, container); }); - var summary = ReactDefaultPerf.getMeasurementsSummaryMap(measurements); + var summary = ReactDefaultPerf.getWasted(measurements); expect(summary.length).toBe(2); /*eslint-disable dot-notation */ @@ -94,7 +105,7 @@ describe('ReactDefaultPerf', function() { ReactDOM.render(, container); }); - var summary = ReactDefaultPerf.getMeasurementsSummaryMap(measurements); + var summary = ReactDefaultPerf.getWasted(measurements); expect(summary.length).toBe(1); /*eslint-disable dot-notation */ @@ -108,7 +119,7 @@ describe('ReactDefaultPerf', function() { function expectNoWaste(fn) { var measurements = measure(fn); - var summary = ReactDefaultPerf.getMeasurementsSummaryMap(measurements); + var summary = ReactDefaultPerf.getWasted(measurements); expect(summary).toEqual([]); } @@ -226,4 +237,32 @@ describe('ReactDefaultPerf', function() { expect(summary).toEqual([]); }); + it('warns once when using getMeasurementsSummaryMap', function() { + var measurements = measure(() => {}); + spyOn(console, 'error'); + ReactDefaultPerf.getMeasurementsSummaryMap(measurements); + expect(console.error.calls.length).toBe(1); + expect(console.error.argsForCall[0][0]).toContain( + '`ReactPerf.getMeasurementsSummaryMap(...)` is deprecated. Use ' + + '`ReactPerf.getWasted(...)` instead.' + ); + + ReactDefaultPerf.getMeasurementsSummaryMap(measurements); + expect(console.error.calls.length).toBe(1); + }); + + it('warns once when using printDOM', function() { + var measurements = measure(() => {}); + spyOn(console, 'error'); + ReactDefaultPerf.printDOM(measurements); + expect(console.error.calls.length).toBe(1); + expect(console.error.argsForCall[0][0]).toContain( + '`ReactPerf.printDOM(...)` is deprecated. Use ' + + '`ReactPerf.printOperations(...)` instead.' + ); + + ReactDefaultPerf.printDOM(measurements); + expect(console.error.calls.length).toBe(1); + }); + });