Added test fixture for scheduling profiler (facebook#21397)

koto · Jun 15, 2021 · cbb3e7e · cbb3e7e
1 parent b597d76
commit cbb3e7e
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 0 deletions.
diff --git a/fixtures/devtools/scheduling-profiler/.gitignore b/fixtures/devtools/scheduling-profiler/.gitignore
@@ -0,0 +1 @@
+dependencies
diff --git a/fixtures/devtools/scheduling-profiler/README.md b/fixtures/devtools/scheduling-profiler/README.md
@@ -0,0 +1,15 @@
+# Test fixture for `packages/react-devtools-scheduling-profiler`
+
+1. First, run the fixture:
+```sh
+# In the root directory
+# Download the latest *experimental* React build
+scripts/release/download-experimental-build.js
+
+# Run this fixtures
+fixtures/devtools/scheduling-profiler/run.js
+```
+
+2. Then open [localhost:8000/](http://localhost:8000/) and use the Performance tab in Chrome to reload-and-profile.
+3. Now stop profiling and export JSON.
+4. Lastly, open [react-scheduling-profiler.vercel.app](https://react-scheduling-profiler.vercel.app/) and upload the performance JSON data you just recorded.
diff --git a/fixtures/devtools/scheduling-profiler/app.js b/fixtures/devtools/scheduling-profiler/app.js
@@ -0,0 +1,14 @@
+const {createElement, useLayoutEffect, useState} = React;
+const {unstable_createRoot: createRoot} = ReactDOM;
+
+function App() {
+  const [isMounted, setIsMounted] = useState(false);
+  useLayoutEffect(() => {
+    setIsMounted(true);
+  }, []);
+  return createElement('div', null, `isMounted? ${isMounted}`);
+}
+
+const container = document.getElementById('container');
+const root = createRoot(container);
+root.render(createElement(App));
diff --git a/fixtures/devtools/scheduling-profiler/index.html b/fixtures/devtools/scheduling-profiler/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Scheduling Profiler Fixture</title>
+
+    <script src="./scheduler.js"></script>
+    <script src="./react.js"></script>
+    <script src="./react-dom.js"></script>
+  </head>
+  <body>
+    <div id="container"></div>
+    <script src="./app.js"></script>
+  </body>
+</html>
diff --git a/fixtures/devtools/scheduling-profiler/run.js b/fixtures/devtools/scheduling-profiler/run.js
@@ -0,0 +1,78 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const {
+  copyFileSync,
+  existsSync,
+  mkdirSync,
+  readFileSync,
+  rmdirSync,
+} = require('fs');
+const {join} = require('path');
+const http = require('http');
+
+const DEPENDENCIES = [
+  ['scheduler/umd/scheduler.development.js', 'scheduler.js'],
+  ['react/umd/react.development.js', 'react.js'],
+  ['react-dom/umd/react-dom.development.js', 'react-dom.js'],
+];
+
+const BUILD_DIRECTORY = '../../../build/node_modules/';
+const DEPENDENCIES_DIRECTORY = 'dependencies';
+
+function initDependencies() {
+  if (existsSync(DEPENDENCIES_DIRECTORY)) {
+    rmdirSync(DEPENDENCIES_DIRECTORY, {recursive: true});
+  }
+  mkdirSync(DEPENDENCIES_DIRECTORY);
+
+  DEPENDENCIES.forEach(([from, to]) => {
+    const fromPath = join(__dirname, BUILD_DIRECTORY, from);
+    const toPath = join(__dirname, DEPENDENCIES_DIRECTORY, to);
+    console.log(`Copying ${fromPath} => ${toPath}`);
+    copyFileSync(fromPath, toPath);
+  });
+}
+
+function initServer() {
+  const host = 'localhost';
+  const port = 8000;
+
+  const requestListener = function(request, response) {
+    let contents;
+    switch (request.url) {
+      case '/react.js':
+      case '/react-dom.js':
+      case '/scheduler.js':
+        response.setHeader('Content-Type', 'text/javascript');
+        response.writeHead(200);
+        contents = readFileSync(
+          join(__dirname, DEPENDENCIES_DIRECTORY, request.url)
+        );
+        response.end(contents);
+        break;
+      case '/app.js':
+        response.setHeader('Content-Type', 'text/javascript');
+        response.writeHead(200);
+        contents = readFileSync(join(__dirname, 'app.js'));
+        response.end(contents);
+        break;
+      case '/index.html':
+      default:
+        response.setHeader('Content-Type', 'text/html');
+        response.writeHead(200);
+        contents = readFileSync(join(__dirname, 'index.html'));
+        response.end(contents);
+        break;
+    }
+  };
+
+  const server = http.createServer(requestListener);
+  server.listen(port, host, () => {
+    console.log(`Server is running on http://${host}:${port}`);
+  });
+}
+
+initDependencies();
+initServer();