Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated event subscriptions and getters to use new ProfilerStore

Browse Source
This commit is contained in:
Brian Vaughn
2019-05-22 07:40:41 -07:00
parent 2d4bb01c01
commit 99b6a44beb
17 changed files with 91 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/__tests__/profilerStore-test.js
+2 -2
View File
@@ -34,14 +34,14 @@ describe('ProfilerStore', () => {
ReactDOM.render(<Parent key="B" count={2} />, containerB);
});
utils.act(() => store.startProfiling());
utils.act(() => store.profilerStore.startProfiling());
utils.act(() => {
ReactDOM.render(<Parent key="A" count={4} />, containerA);
ReactDOM.render(<Parent key="B" count={1} />, containerB);
});
utils.act(() => store.stopProfiling());
utils.act(() => store.profilerStore.stopProfiling());
const rootA = store.roots[0];
const rootB = store.roots[1];
src/__tests__/profilingCache-test.js
+18 -16
View File
@@ -51,11 +51,11 @@ describe('ProfilingCache', () => {
const container = document.createElement('div');
utils.act(() => ReactDOM.render(<Parent count={2} />, container));
utils.act(() => store.startProfiling());
utils.act(() => store.profilerStore.startProfiling());
utils.act(() => ReactDOM.render(<Parent count={3} />, container));
utils.act(() => ReactDOM.render(<Parent count={1} />, container));
utils.act(() => ReactDOM.render(<Parent count={0} />, container));
utils.act(() => store.stopProfiling());
utils.act(() => store.profilerStore.stopProfiling());
let profilingDataForRoot = null;
@@ -120,12 +120,12 @@ describe('ProfilingCache', () => {
const container = document.createElement('div');
utils.act(() => store.startProfiling());
utils.act(() => store.profilerStore.startProfiling());
utils.act(() => ReactDOM.render(<Parent count={2} />, container));
utils.act(() => ReactDOM.render(<Parent count={3} />, container));
utils.act(() => ReactDOM.render(<Parent count={1} />, container));
utils.act(() => ReactDOM.render(<Parent count={0} />, container));
utils.act(() => store.stopProfiling());
utils.act(() => store.profilerStore.stopProfiling());
const allCommitData = [];
@@ -200,11 +200,11 @@ describe('ProfilingCache', () => {
return null;
};
utils.act(() => store.startProfiling());
utils.act(() => store.profilerStore.startProfiling());
utils.act(() =>
ReactDOM.render(<Grandparent />, document.createElement('div'))
);
utils.act(() => store.stopProfiling());
utils.act(() => store.profilerStore.stopProfiling());
let commitData = null;
@@ -262,11 +262,11 @@ describe('ProfilingCache', () => {
return data;
};
utils.act(() => store.startProfiling());
utils.act(() => store.profilerStore.startProfiling());
await utils.actAsync(() =>
ReactDOM.render(<Parent />, document.createElement('div'))
);
utils.act(() => store.stopProfiling());
utils.act(() => store.profilerStore.stopProfiling());
const allCommitData = [];
@@ -317,16 +317,16 @@ describe('ProfilingCache', () => {
const container = document.createElement('div');
utils.act(() => store.startProfiling());
utils.act(() => store.profilerStore.startProfiling());
utils.act(() => ReactDOM.render(<Parent count={1} />, container));
utils.act(() => ReactDOM.render(<Parent count={2} />, container));
utils.act(() => ReactDOM.render(<Parent count={3} />, container));
utils.act(() => store.stopProfiling());
utils.act(() => store.profilerStore.stopProfiling());
const allFiberCommits = [];
function Suspender({ fiberID, previousFiberCommits, rootID }) {
const fiberCommits = store.profilingCache.getFiberCommits({
const fiberCommits = store.profilerStore.profilingCache.getFiberCommits({
fiberID,
rootID,
});
@@ -407,7 +407,7 @@ describe('ProfilingCache', () => {
const container = document.createElement('div');
utils.act(() => store.startProfiling());
utils.act(() => store.profilerStore.startProfiling());
utils.act(() =>
SchedulerTracing.unstable_trace(
'mount: one child',
@@ -422,14 +422,16 @@ describe('ProfilingCache', () => {
() => ReactDOM.render(<Parent count={2} />, container)
)
);
utils.act(() => store.stopProfiling());
utils.act(() => store.profilerStore.stopProfiling());
let interactions = null;
function Suspender({ previousInteractions, rootID }) {
interactions = store.profilingCache.getInteractionsChartData({
rootID,
}).interactions;
interactions = store.profilerStore.profilingCache.getInteractionsChartData(
{
rootID,
}
).interactions;
if (previousInteractions != null) {
expect(interactions).toEqual(previousInteractions);
} else {
src/__tests__/profilingCharts-test.js
+27 -21
View File
@@ -47,7 +47,7 @@ describe('profiling charts', () => {
const container = document.createElement('div');
utils.act(() => store.startProfiling());
utils.act(() => store.profilerStore.startProfiling());
utils.act(() =>
SchedulerTracing.unstable_trace('mount', Scheduler.unstable_now(), () =>
ReactDOM.render(<Parent />, container)
@@ -60,20 +60,22 @@ describe('profiling charts', () => {
() => ReactDOM.render(<Parent />, container)
)
);
utils.act(() => store.stopProfiling());
utils.act(() => store.profilerStore.stopProfiling());
let renderFinished = false;
function Suspender({ commitIndex, rootID }) {
const commitTree = store.profilingCache.getCommitTree({
const commitTree = store.profilerStore.profilingCache.getCommitTree({
commitIndex,
rootID,
});
const chartData = store.profilingCache.getFlamegraphChartData({
commitIndex,
commitTree,
rootID,
});
const chartData = store.profilerStore.profilingCache.getFlamegraphChartData(
{
commitIndex,
commitTree,
rootID,
}
);
expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
expect(chartData).toMatchSnapshot(
`${commitIndex}: FlamegraphChartData`
@@ -127,7 +129,7 @@ describe('profiling charts', () => {
const container = document.createElement('div');
utils.act(() => store.startProfiling());
utils.act(() => store.profilerStore.startProfiling());
utils.act(() =>
SchedulerTracing.unstable_trace('mount', Scheduler.unstable_now(), () =>
ReactDOM.render(<Parent />, container)
@@ -140,20 +142,22 @@ describe('profiling charts', () => {
() => ReactDOM.render(<Parent />, container)
)
);
utils.act(() => store.stopProfiling());
utils.act(() => store.profilerStore.stopProfiling());
let renderFinished = false;
function Suspender({ commitIndex, rootID }) {
const commitTree = store.profilingCache.getCommitTree({
const commitTree = store.profilerStore.profilingCache.getCommitTree({
commitIndex,
rootID,
});
const chartData = store.profilingCache.getRankedChartData({
commitIndex,
commitTree,
rootID,
});
const chartData = store.profilerStore.profilingCache.getRankedChartData(
{
commitIndex,
commitTree,
rootID,
}
);
expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
expect(chartData).toMatchSnapshot(`${commitIndex}: RankedChartData`);
renderFinished = true;
@@ -203,7 +207,7 @@ describe('profiling charts', () => {
const container = document.createElement('div');
utils.act(() => store.startProfiling());
utils.act(() => store.profilerStore.startProfiling());
utils.act(() =>
SchedulerTracing.unstable_trace('mount', Scheduler.unstable_now(), () =>
ReactDOM.render(<Parent />, container)
@@ -216,14 +220,16 @@ describe('profiling charts', () => {
() => ReactDOM.render(<Parent />, container)
)
);
utils.act(() => store.stopProfiling());
utils.act(() => store.profilerStore.stopProfiling());
let renderFinished = false;
function Suspender({ commitIndex, rootID }) {
const chartData = store.profilingCache.getInteractionsChartData({
rootID,
});
const chartData = store.profilerStore.profilingCache.getInteractionsChartData(
{
rootID,
}
);
expect(chartData).toMatchSnapshot('Interactions');
renderFinished = true;
return null;
src/__tests__/profilingCommitTreeBuilder-test.js
+3 -3
View File
@@ -38,17 +38,17 @@ describe('commit tree', () => {
const container = document.createElement('div');
utils.act(() => store.startProfiling());
utils.act(() => store.profilerStore.startProfiling());
utils.act(() => ReactDOM.render(<Parent count={1} />, container));
utils.act(() => ReactDOM.render(<Parent count={3} />, container));
utils.act(() => ReactDOM.render(<Parent count={2} />, container));
utils.act(() => ReactDOM.render(<Parent count={0} />, container));
utils.act(() => store.stopProfiling());
utils.act(() => store.profilerStore.stopProfiling());
let renderFinished = false;
function Suspender({ commitIndex, rootID }) {
const commitTree = store.profilingCache.getCommitTree({
const commitTree = store.profilerStore.profilingCache.getCommitTree({
commitIndex,
rootID,
});
src/__tests__/storeComponentFilters-test.js
+4 -2
View File
@@ -1,11 +1,13 @@
// @flow
import type Store from 'src/devtools/store';
describe('Store component filters', () => {
let React;
let ReactDOM;
let TestUtils;
let Types;
let store;
let store: Store;
let utils;
const act = (callback: Function) => {
@@ -28,7 +30,7 @@ describe('Store component filters', () => {
});
it('should throw if filters are updated while profiling', () => {
act(() => store.startProfiling());
act(() => store.profilerStore.startProfiling());
expect(() => (store.componentFilters = [])).toThrow(
'Cannot modify filter preferences while profiling'
);
src/devtools/ProfilerStore.js
+4 -29
View File
@@ -114,10 +114,6 @@ export default class ProfilerStore extends EventEmitter {
throw Error(`Could not find commit data for root "${rootID}"`);
}
get cache(): ProfilingCache {
return this._cache;
}
// Profiling data has been recorded for at least one root.
get hasProfilingData(): boolean {
return (
@@ -125,21 +121,6 @@ export default class ProfilerStore extends EventEmitter {
);
}
// TODO (profarc) Remove this getter
get initialSnapshotsByRootID(): Map<number, Map<number, SnapshotNode>> {
return this._initialSnapshotsByRootID;
}
// TODO (profarc) Remove this getter
get inProgressOperationsByRootID(): Map<number, Array<Uint32Array>> {
return this._inProgressOperationsByRootID;
}
// TODO (profarc) Remove this getter
get inProgressScreenshotsByRootID(): Map<number, Map<number, string>> {
return this._inProgressScreenshotsByRootID;
}
get isProcessingData(): boolean {
return this._rendererQueue.size > 0 || this._dataBackends.length > 0;
}
@@ -148,6 +129,10 @@ export default class ProfilerStore extends EventEmitter {
return this._isProfiling;
}
get profilingCache(): ProfilingCache {
return this._cache;
}
get profilingData(): ProfilingDataFrontend | null {
return this._dataFrontend;
}
@@ -159,8 +144,6 @@ export default class ProfilerStore extends EventEmitter {
this._inProgressScreenshotsByRootID.clear();
this._cache.invalidate();
// TODO (profarc) Remove subscriptions to Store for this
this._store.emit('profilingData');
this.emit('profilingData');
}
@@ -175,8 +158,6 @@ export default class ProfilerStore extends EventEmitter {
// Note that we clear now because any existing data is "stale".
this._cache.invalidate();
// TODO (profarc) Remove subscriptions to Store for this
this._store.emit('isProfiling');
this.emit('isProfiling');
}
@@ -282,8 +263,6 @@ export default class ProfilerStore extends EventEmitter {
this._dataBackends.splice(0);
// TODO (profarc) Remove subscriptions to Store for this
this._store.emit('isProcessingData');
this.emit('isProcessingData');
}
};
@@ -320,8 +299,6 @@ export default class ProfilerStore extends EventEmitter {
// (That would have resolved a now-stale value without any profiling data.)
this._cache.invalidate();
// TODO (profarc) Remove subscriptions to Store for this
this._store.emit('isProfiling');
this.emit('isProfiling');
// If we've just finished a profiling session, we need to fetch data stored in each renderer interface
@@ -339,8 +316,6 @@ export default class ProfilerStore extends EventEmitter {
}
}
// TODO (profarc) Remove subscriptions to Store for this
this._store.emit('isProcessingData');
this.emit('isProcessingData');
}
}
src/devtools/store.js
-63
View File
@@ -15,15 +15,10 @@ import {
utfDecodeString,
} from '../utils';
import { __DEBUG__ } from '../constants';
import ProfilingCache from './ProfilingCache';
import { printStore } from 'src/__tests__/storeSerializer';
import ProfilerStore from './ProfilerStore';
import type { Element } from './views/Components/types';
import type {
ProfilingDataFrontend,
SnapshotNode,
} from './views/Profiler/types';
import type { Bridge, ComponentFilter, ElementType } from '../types';
const debug = (methodName, ...args) => {
@@ -236,53 +231,10 @@ export default class Store extends EventEmitter {
return this._hasOwnerMetadata;
}
// TODO (profarc) Update views to use ProfilerStore directly to access this value.
get hasProfilingData(): boolean {
return this._profilerStore.hasProfilingData;
}
// TODO (profarc) Update views to use ProfilerStore directly to access this value.
get isProcessingProfilingData(): boolean {
return this._profilerStore.isProcessingData;
}
// TODO (profarc) Update views to use ProfilerStore directly to access this value.
get isProfiling(): boolean {
return this._profilerStore.isProfiling;
}
get numElements(): number {
return this._weightAcrossRoots;
}
// TODO (profarc) Update views to use ProfilerStore directly to access this value.
get profilingCache(): ProfilingCache {
return this._profilerStore.cache;
}
// TODO (profarc) Update views to use ProfilerStore directly to access this value.
get profilingData(): ProfilingDataFrontend | null {
return this._profilerStore.profilingData;
}
set profilingData(value: ProfilingDataFrontend | null): void {
this._profilerStore.profilingData = value;
}
// TODO (profarc) Update views to use ProfilerStore directly to access this value.
get profilingOperationsByRootID(): Map<number, Array<Uint32Array>> {
return this._profilerStore.inProgressOperationsByRootID;
}
// TODO (profarc) Update views to use ProfilerStore directly to access this value.
get profilingScreenshotsByRootID(): Map<number, Map<number, string>> {
return this._profilerStore.inProgressScreenshotsByRootID;
}
// TODO (profarc) Update views to use ProfilerStore directly to access this value.
get profilingSnapshotsByRootID(): Map<number, Map<number, SnapshotNode>> {
return this._profilerStore.initialSnapshotsByRootID;
}
get profilerStore(): ProfilerStore {
return this._profilerStore;
}
@@ -311,11 +263,6 @@ export default class Store extends EventEmitter {
return this._supportsReloadAndProfile;
}
// TODO (profarc) Update views to use ProfilerStore directly to access this method.
clearProfilingData(): void {
this._profilerStore.clear();
}
containsElement(id: number): boolean {
return this._idToElement.get(id) != null;
}
@@ -541,16 +488,6 @@ export default class Store extends EventEmitter {
return false;
}
// TODO (profarc) Update views to use ProfilerStore directly to access this method.
startProfiling(): void {
this._profilerStore.startProfiling();
}
// TODO (profarc) Update views to use ProfilerStore directly to access this method.
stopProfiling(): void {
this._profilerStore.stopProfiling();
}
// TODO Maybe split this into two methods: expand() and collapse()
toggleIsCollapsed(id: number, isCollapsed: boolean): void {
let didMutate = false;
src/devtools/views/Components/ComponentFiltersModal.js
+5 -4
View File
@@ -41,6 +41,7 @@ import type {
export default function ComponentFiltersModalWrapper(_: {||}) {
const store = useContext(StoreContext);
const { profilerStore } = store;
const { isModalShowing, setIsModalShowing } = useContext(
ComponentFiltersModalContext
@@ -50,13 +51,13 @@ export default function ComponentFiltersModalWrapper(_: {||}) {
// If necessary, we could support this- but it doesn't seem like a necessary use case.
const isProfilingSubscription = useMemo(
() => ({
getCurrentValue: () => store.isProfiling,
getCurrentValue: () => profilerStore.isProfiling,
subscribe: (callback: Function) => {
store.addListener('isProfiling', callback);
return () => store.removeListener('isProfiling', callback);
profilerStore.addListener('isProfiling', callback);
return () => profilerStore.removeListener('isProfiling', callback);
},
}),
[store]
[profilerStore]
);
const isProfiling = useSubscription<boolean, Store>(isProfilingSubscription);
if (isProfiling && isModalShowing) {
src/devtools/views/Components/ToggleComponentFiltersModalButton.js
+5 -4
View File
@@ -14,6 +14,7 @@ import type { ComponentFilter } from 'src/types';
export default function ToggleComponentFiltersModalButton() {
const store = useContext(StoreContext);
const { profilerStore } = store;
const { isModalShowing, setIsModalShowing } = useContext(
ComponentFiltersModalContext
@@ -23,13 +24,13 @@ export default function ToggleComponentFiltersModalButton() {
// If necessary, we could support this- but it doesn't seem like a necessary use case.
const isProfilingSubscription = useMemo(
() => ({
getCurrentValue: () => store.isProfiling,
getCurrentValue: () => profilerStore.isProfiling,
subscribe: (callback: Function) => {
store.addListener('isProfiling', callback);
return () => store.removeListener('isProfiling', callback);
profilerStore.addListener('isProfiling', callback);
return () => profilerStore.removeListener('isProfiling', callback);
},
}),
[store]
[profilerStore]
);
const isProfiling = useSubscription<boolean, Store>(isProfilingSubscription);
src/devtools/views/Profiler/ClearProfilingDataButton.js
+4 -3
View File
@@ -8,13 +8,14 @@ import { StoreContext } from '../context';
export default function ClearProfilingDataButton() {
const store = useContext(StoreContext);
const { isProfiling } = useContext(ProfilerContext);
const { hasProfilingData, isProfiling } = useContext(ProfilerContext);
const { profilerStore } = store;
const clear = useCallback(() => store.clearProfilingData(), [store]);
const clear = useCallback(() => profilerStore.clear(), [profilerStore]);
return (
<Button
disabled={isProfiling || !store.hasProfilingData}
disabled={isProfiling || !hasProfilingData}
onClick={clear}
title="Clear profiling data"
>
src/devtools/views/Profiler/CommitFlamegraph.js
+2 -1
View File
@@ -25,10 +25,11 @@ export type ItemData = {|
|};
export default function CommitFlamegraphAutoSizer(_: {||}) {
const { profilingCache } = useContext(StoreContext);
const { profilerStore } = useContext(StoreContext);
const { rootID, selectedCommitIndex, selectFiber } = useContext(
ProfilerContext
);
const { profilingCache } = profilerStore;
const deselectCurrentFiber = useCallback(
event => {
src/devtools/views/Profiler/CommitRanked.js
+2 -1
View File
@@ -25,10 +25,11 @@ export type ItemData = {|
|};
export default function CommitRankedAutoSizer(_: {||}) {
const { profilingCache } = useContext(StoreContext);
const { profilerStore } = useContext(StoreContext);
const { rootID, selectedCommitIndex, selectFiber } = useContext(
ProfilerContext
);
const { profilingCache } = profilerStore;
const deselectCurrentFiber = useCallback(
event => {
src/devtools/views/Profiler/Interactions.js
+2 -1
View File
@@ -45,10 +45,11 @@ function Interactions({ height, width }: {| height: number, width: number |}) {
selectTab,
} = useContext(ProfilerContext);
const { profilerStore } = useContext(StoreContext);
const { profilingCache } = profilerStore;
const dataForRoot = profilerStore.getDataForRoot(((rootID: any): number));
const chartData = profilerStore.cache.getInteractionsChartData({
const chartData = profilingCache.getInteractionsChartData({
rootID: ((rootID: any): number),
});
src/devtools/views/Profiler/ProfilerContext.js
+7 -2
View File
@@ -141,8 +141,13 @@ function ProfilerContextController({ children }: Props) {
}
}
const startProfiling = useCallback(() => store.startProfiling(), [store]);
const stopProfiling = useCallback(() => store.stopProfiling(), [store]);
const startProfiling = useCallback(
() => store.profilerStore.startProfiling(),
[store]
);
const stopProfiling = useCallback(() => store.profilerStore.stopProfiling(), [
store,
]);
const [
isCommitFilterEnabled,
src/devtools/views/Profiler/ProfilingImportExportButtons.js
+2 -2
View File
@@ -55,7 +55,7 @@ export default function ProfilingImportExportButtons() {
const profilingDataExport = ((JSON.parse(
raw
): any): ProfilingDataExport);
store.profilingData = prepareProfilingDataFrontendFromExport(
profilerStore.profilingData = prepareProfilingDataFrontendFromExport(
profilingDataExport
);
} catch (error) {
@@ -76,7 +76,7 @@ export default function ProfilingImportExportButtons() {
// TODO (profiling) Handle fileReader errors.
fileReader.readAsText(input.files[0]);
}
}, [modalDialogDispatch, store]);
}, [modalDialogDispatch, profilerStore]);
return (
<Fragment>
src/devtools/views/Profiler/SidebarInteractions.js
+2 -1
View File
@@ -18,7 +18,8 @@ export default function SidebarInteractions(_: Props) {
selectTab,
} = useContext(ProfilerContext);
const { profilingCache, profilerStore } = useContext(StoreContext);
const { profilerStore } = useContext(StoreContext);
const { profilingCache } = profilerStore;
if (selectedInteractionID === null) {
return <div className={styles.NothingSelected}>Nothing selected</div>;
src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
+2 -1
View File
@@ -12,7 +12,7 @@ import styles from './SidebarSelectedFiberInfo.css';
export type Props = {||};
export default function SidebarSelectedFiberInfo(_: Props) {
const { profilingCache, profilerStore } = useContext(StoreContext);
const { profilerStore } = useContext(StoreContext);
const {
rootID,
selectCommitIndex,
@@ -21,6 +21,7 @@ export default function SidebarSelectedFiberInfo(_: Props) {
selectedFiberName,
selectFiber,
} = useContext(ProfilerContext);
const { profilingCache } = profilerStore;
const commitIndices = profilingCache.getFiberCommits({
fiberID: ((selectedFiberID: any): number),