diff options
Diffstat (limited to 'bench/hot-module-reloading/css-stress-test')
4 files changed, 25 insertions, 48 deletions
diff --git a/bench/hot-module-reloading/css-stress-test/browser.js b/bench/hot-module-reloading/css-stress-test/browser.js index 15938dff2..d6bce108f 100644 --- a/bench/hot-module-reloading/css-stress-test/browser.js +++ b/bench/hot-module-reloading/css-stress-test/browser.js @@ -24,7 +24,7 @@ if (process.env.PROJECT === "bun") { // bunProcess.stderr.pipe(process.stderr); // bunProcess.stdout.pipe(process.stdout); - bunProcess.once("error", (err) => { + bunProcess.once("error", err => { console.error("❌ bun error", err); process.exit(1); }); @@ -32,19 +32,15 @@ if (process.env.PROJECT === "bun") { bunProcess?.kill(0); }); } else if (process.env.PROJECT === "next") { - const bunProcess = child_process.spawn( - "./node_modules/.bin/next", - ["--port", "8080"], - { - cwd: process.cwd(), - stdio: "ignore", - env: { - ...process.env, - }, - - shell: false, + const bunProcess = child_process.spawn("./node_modules/.bin/next", ["--port", "8080"], { + cwd: process.cwd(), + stdio: "ignore", + env: { + ...process.env, }, - ); + + shell: false, + }); } const delay = new Promise((resolve, reject) => { @@ -111,7 +107,7 @@ async function main() { return runPage(); } -main().catch((error) => +main().catch(error => setTimeout(() => { throw error; }), diff --git a/bench/hot-module-reloading/css-stress-test/read-frames.js b/bench/hot-module-reloading/css-stress-test/read-frames.js index 9e264b4df..089e97e83 100644 --- a/bench/hot-module-reloading/css-stress-test/read-frames.js +++ b/bench/hot-module-reloading/css-stress-test/read-frames.js @@ -4,9 +4,7 @@ const path = require("path"); const PROJECT = process.env.PROJECT || "bun"; const percentile = require("percentile"); const PACKAGE_NAME = process.env.PACKAGE_NAME; -const label = `${PACKAGE_NAME}@${ - require(PACKAGE_NAME + "/package.json").version -}`; +const label = `${PACKAGE_NAME}@${require(PACKAGE_NAME + "/package.json").version}`; const BASEFOLDER = path.resolve(PROJECT); const OUTFILE = path.join(process.cwd(), process.env.OUTFILE); @@ -20,10 +18,10 @@ const TOTAL_FRAMES = VALID_TIMES.length; const timings = fs .readFileSync(BASEFOLDER + "/frames.all.clean", "utf8") .split("\n") - .map((a) => a.replace(/[Ran:'\.]?/gm, "").trim()) - .filter((a) => parseInt(a, 10)) - .filter((a) => a.length > 0 && VALID_TIMES.includes(BigInt(parseInt(a, 10)))) - .map((num) => BigInt(num)); + .map(a => a.replace(/[Ran:'\.]?/gm, "").trim()) + .filter(a => parseInt(a, 10)) + .filter(a => a.length > 0 && VALID_TIMES.includes(BigInt(parseInt(a, 10)))) + .map(num => BigInt(num)); timings.sort(); @@ -47,7 +45,7 @@ const report = { name: PACKAGE_NAME, version: require(PACKAGE_NAME + "/package.json").version, }, - timestamps: timings.map((a) => Number(a)), + timestamps: timings.map(a => Number(a)), frameTimes: frameTime, percentileMs: { 50: percentile(50, frameTime) / 10, @@ -67,9 +65,7 @@ fs.writeFileSync( "." + process.env.SLEEP_INTERVAL + "ms." + - `${process.platform}-${ - process.arch === "arm64" ? "aarch64" : process.arch - }` + + `${process.platform}-${process.arch === "arm64" ? "aarch64" : process.arch}` + ".json", ), JSON.stringify(report, null, 2), @@ -99,9 +95,5 @@ console.log( timings.length, "/", TOTAL_FRAMES, - "(" + - Math.round( - Math.max(Math.min(1.0, timings.length / TOTAL_FRAMES), 0) * 100, - ) + - "%)", + "(" + Math.round(Math.max(Math.min(1.0, timings.length / TOTAL_FRAMES), 0) * 100) + "%)", ); diff --git a/bench/hot-module-reloading/css-stress-test/src/index.tsx b/bench/hot-module-reloading/css-stress-test/src/index.tsx index 35e7fceab..7ca290f48 100644 --- a/bench/hot-module-reloading/css-stress-test/src/index.tsx +++ b/bench/hot-module-reloading/css-stress-test/src/index.tsx @@ -3,10 +3,7 @@ import classNames from "classnames"; import ReactDOM from "react-dom"; const Base = ({}) => { - const name = - typeof location !== "undefined" - ? decodeURIComponent(location.search.substring(1)) - : null; + const name = typeof location !== "undefined" ? decodeURIComponent(location.search.substring(1)) : null; return <Main productName={name} />; }; diff --git a/bench/hot-module-reloading/css-stress-test/src/main.tsx b/bench/hot-module-reloading/css-stress-test/src/main.tsx index 2093d924f..9707deaae 100644 --- a/bench/hot-module-reloading/css-stress-test/src/main.tsx +++ b/bench/hot-module-reloading/css-stress-test/src/main.tsx @@ -4,8 +4,8 @@ export const Main = (props: { productName: string; cssInJS?: string }) => { <header> <div className="Title">CSS HMR Stress Test!</div> <p className="Description"> - This page visually tests how quickly a bundler can update{" "} - {props.cssInJS ? "CSS-in-JS" : "CSS"} over Hot Module Reloading. + This page visually tests how quickly a bundler can update {props.cssInJS ? "CSS-in-JS" : "CSS"} over Hot + Module Reloading. </p> </header> <main className="main"> @@ -19,9 +19,7 @@ export const Main = (props: { productName: string; cssInJS?: string }) => { <div className="ProgressBar-container"> <div className="ProgressBar"></div> </div> - <div className="SectionLabel"> - The progress bar should move from left to right smoothly. - </div> + <div className="SectionLabel">The progress bar should move from left to right smoothly.</div> </section> <section> @@ -42,21 +40,15 @@ export const Main = (props: { productName: string; cssInJS?: string }) => { <div className="Spinner"></div> </div> </div> - <div className="SectionLabel"> - The spinners should rotate & change color smoothly. - </div> + <div className="SectionLabel">The spinners should rotate & change color smoothly.</div> </section> </main> <footer> - <div className="SectionLabel FooterLabel"> - There are no CSS animations on this page. - </div> + <div className="SectionLabel FooterLabel">There are no CSS animations on this page.</div> <div className="Bundler-container"> <div className="Bundler">{props.productName}</div> - <div className="Bundler-updateRate"> - {props.cssInJS ? "CSS-in-JS framework: " + props.cssInJS : ""} - </div> + <div className="Bundler-updateRate">{props.cssInJS ? "CSS-in-JS framework: " + props.cssInJS : ""}</div> </div> </footer> </> |