diff --git a/fixtures/devtools/scheduling-profiler/.gitignore b/fixtures/devtools/scheduling-profiler/.gitignore new file mode 100644 index 0000000000000..8f6ca63cde27b --- /dev/null +++ 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 new file mode 100644 index 0000000000000..10f04c228d9de --- /dev/null +++ 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. \ No newline at end of file diff --git a/fixtures/devtools/scheduling-profiler/app.js b/fixtures/devtools/scheduling-profiler/app.js new file mode 100644 index 0000000000000..7af7c13cc27df --- /dev/null +++ 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 new file mode 100644 index 0000000000000..4210a8e61f1ab --- /dev/null +++ b/fixtures/devtools/scheduling-profiler/index.html @@ -0,0 +1,14 @@ + + + + Scheduling Profiler Fixture + + + + + + +
+ + + \ No newline at end of file diff --git a/fixtures/devtools/scheduling-profiler/run.js b/fixtures/devtools/scheduling-profiler/run.js new file mode 100755 index 0000000000000..9006956915ae7 --- /dev/null +++ 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();