Skip to content

Commit cbb3e7e

Browse files
Brian Vaughnkoto
Brian Vaughn
authored and
koto
committed
Added test fixture for scheduling profiler (facebook#21397)
1 parent b597d76 commit cbb3e7e

File tree

5 files changed

+122
-0
lines changed

5 files changed

+122
-0
lines changed

‎fixtures/devtools/scheduling-profiler/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
dependencies

‎fixtures/devtools/scheduling-profiler/README.md

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# Test fixture for `packages/react-devtools-scheduling-profiler`
2+
3+
1. First, run the fixture:
4+
```sh
5+
# In the root directory
6+
# Download the latest *experimental* React build
7+
scripts/release/download-experimental-build.js
8+
9+
# Run this fixtures
10+
fixtures/devtools/scheduling-profiler/run.js
11+
```
12+
13+
2. Then open [localhost:8000/](http://localhost:8000/) and use the Performance tab in Chrome to reload-and-profile.
14+
3. Now stop profiling and export JSON.
15+
4. Lastly, open [react-scheduling-profiler.vercel.app](https://react-scheduling-profiler.vercel.app/) and upload the performance JSON data you just recorded.

‎fixtures/devtools/scheduling-profiler/app.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const {createElement, useLayoutEffect, useState} = React;
2+
const {unstable_createRoot: createRoot} = ReactDOM;
3+
4+
function App() {
5+
const [isMounted, setIsMounted] = useState(false);
6+
useLayoutEffect(() => {
7+
setIsMounted(true);
8+
}, []);
9+
return createElement('div', null, `isMounted? ${isMounted}`);
10+
}
11+
12+
const container = document.getElementById('container');
13+
const root = createRoot(container);
14+
root.render(createElement(App));

‎fixtures/devtools/scheduling-profiler/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Scheduling Profiler Fixture</title>
5+
6+
<script src="./scheduler.js"></script>
7+
<script src="./react.js"></script>
8+
<script src="./react-dom.js"></script>
9+
</head>
10+
<body>
11+
<div id="container"></div>
12+
<script src="./app.js"></script>
13+
</body>
14+
</html>

‎fixtures/devtools/scheduling-profiler/run.js

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
#!/usr/bin/env node
2+
3+
'use strict';
4+
5+
const {
6+
copyFileSync,
7+
existsSync,
8+
mkdirSync,
9+
readFileSync,
10+
rmdirSync,
11+
} = require('fs');
12+
const {join} = require('path');
13+
const http = require('http');
14+
15+
const DEPENDENCIES = [
16+
['scheduler/umd/scheduler.development.js', 'scheduler.js'],
17+
['react/umd/react.development.js', 'react.js'],
18+
['react-dom/umd/react-dom.development.js', 'react-dom.js'],
19+
];
20+
21+
const BUILD_DIRECTORY = '../../../build/node_modules/';
22+
const DEPENDENCIES_DIRECTORY = 'dependencies';
23+
24+
function initDependencies() {
25+
if (existsSync(DEPENDENCIES_DIRECTORY)) {
26+
rmdirSync(DEPENDENCIES_DIRECTORY, {recursive: true});
27+
}
28+
mkdirSync(DEPENDENCIES_DIRECTORY);
29+
30+
DEPENDENCIES.forEach(([from, to]) => {
31+
const fromPath = join(__dirname, BUILD_DIRECTORY, from);
32+
const toPath = join(__dirname, DEPENDENCIES_DIRECTORY, to);
33+
console.log(`Copying ${fromPath} => ${toPath}`);
34+
copyFileSync(fromPath, toPath);
35+
});
36+
}
37+
38+
function initServer() {
39+
const host = 'localhost';
40+
const port = 8000;
41+
42+
const requestListener = function(request, response) {
43+
let contents;
44+
switch (request.url) {
45+
case '/react.js':
46+
case '/react-dom.js':
47+
case '/scheduler.js':
48+
response.setHeader('Content-Type', 'text/javascript');
49+
response.writeHead(200);
50+
contents = readFileSync(
51+
join(__dirname, DEPENDENCIES_DIRECTORY, request.url)
52+
);
53+
response.end(contents);
54+
break;
55+
case '/app.js':
56+
response.setHeader('Content-Type', 'text/javascript');
57+
response.writeHead(200);
58+
contents = readFileSync(join(__dirname, 'app.js'));
59+
response.end(contents);
60+
break;
61+
case '/index.html':
62+
default:
63+
response.setHeader('Content-Type', 'text/html');
64+
response.writeHead(200);
65+
contents = readFileSync(join(__dirname, 'index.html'));
66+
response.end(contents);
67+
break;
68+
}
69+
};
70+
71+
const server = http.createServer(requestListener);
72+
server.listen(port, host, () => {
73+
console.log(`Server is running on http://${host}:${port}`);
74+
});
75+
}
76+
77+
initDependencies();
78+
initServer();

0 commit comments

Comments
 (0)