Added test fixture for scheduling profiler (#21397)
Brian Vaughn committed
Apr 30, 2021 at 15:23 UTC
b6644fabb9634216b3c422b52d29abcfb1ee2e77
5 files changed
+122
fixtures/devtools/scheduling-profiler/.gitignore
new
+1
@@ -0,0 +1 @@
1
+dependencies
fixtures/devtools/scheduling-profiler/README.md
new
+15
@@ -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.
\ No newline at end of file
fixtures/devtools/scheduling-profiler/app.js
new
+14
@@ -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
new
+14
@@ -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>
\ No newline at end of file
fixtures/devtools/scheduling-profiler/run.js
new
+78
@@ -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();