Rename CSS stress test

Former-commit-id: cbb6f8b1a9
2026-02-09 10:28:47 +00:00 · 2021-06-20 17:38:55 -07:00
parent 7b549c6551
commit 6fbfd69699
38 changed files with 12259 additions and 19290 deletions
--- a/demos/css-stress-test/index.html
+++ b/demos/css-stress-test/index.html
--- a/demos/css-stress-test/inject.js
+++ b/demos/css-stress-test/inject.js
--- a/demos/css-stress-test/next-env.d.ts
+++ b/demos/css-stress-test/next-env.d.ts
--- a/demos/css-stress-test/node_modules.jsb.zip
+++ b/demos/css-stress-test/node_modules.jsb.zip
--- a/demos/css-stress-test/package.json
+++ b/demos/css-stress-test/package.json
--- a/demos/css-stress-test/pages/_app.tsx
+++ b/demos/css-stress-test/pages/_app.tsx
--- a/demos/css-stress-test/pages/index.tsx
+++ b/demos/css-stress-test/pages/index.tsx
@@ -0,0 +1,14 @@
+import { Main } from "../src/main";
+import { Button } from "../src/components/button";
+
+export function getInitialProps() {
+  return {};
+}
+
+export default function IndexRoute() {
+  return (
+    <div>
+      <Main productName={"Next.js (Webpack 5)"} />;<Button>hello</Button>
+    </div>
+  );
+}
--- a/demos/css-stress-test/public/index.html
+++ b/demos/css-stress-test/public/index.html
--- a/demos/css-stress-test/public1/index.html
+++ b/demos/css-stress-test/public1/index.html
--- a/demos/css-stress-test/public1/src/components/button.tsx
+++ b/demos/css-stress-test/public1/src/components/button.tsx
--- a/demos/css-stress-test/public1/src/index.tsx
+++ b/demos/css-stress-test/public1/src/index.tsx
--- a/demos/css-stress-test/react-out/src/components/button.tsx
+++ b/demos/css-stress-test/react-out/src/components/button.tsx
--- a/demos/css-stress-test/snowpack.config.js
+++ b/demos/css-stress-test/snowpack.config.js
--- a/demos/css-stress-test/src/button.css
+++ b/demos/css-stress-test/src/button.css
--- a/demos/css-stress-test/src/colors.css
+++ b/demos/css-stress-test/src/colors.css
--- a/demos/css-stress-test/src/components/button.tsx
+++ b/demos/css-stress-test/src/components/button.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { NewComponent } from "./new-comp";
+
+const Toast = () => {
+  const [baconyes, baconno] = useBacon();
+  return <div>false</div>;
+};
+const Button = ({ label, label2, onClick }) => {
+  const useCustomHookInsideFunction = (what, arr) => {
+    return [true, false];
+  };
+  const [on, setOn] = React.useState(false);
+
+  React.useEffect(() => {
+    console.log({ on });
+  }, [on]);
+
+  // const [foo1, foo2] = useCustomHookInsideFunction(() => {}, [on]);
+
+  return (
+    <div className="Button" onClick={onClick}>
+      <Toast>f</Toast>
+      <div className="Button-label">{label}12</div>
+      <NewComponent />
+    </div>
+  );
+};
+
+const Bacon = Button;
+
+export { Bacon, Bacon as Button };
+
+const RefreshLike = () => {};
+
+const useBacon = () => {
+  return [1, 8];
+};
--- a/demos/css-stress-test/src/components/new-comp.tsx
+++ b/demos/css-stress-test/src/components/new-comp.tsx
@@ -0,0 +1,3 @@
+export const NewComponent = () => {
+  return <div>NEW!</div>;
+};
--- a/demos/css-stress-test/src/font.css
+++ b/demos/css-stress-test/src/font.css
--- a/demos/css-stress-test/src/index.css
+++ b/demos/css-stress-test/src/index.css
--- a/demos/css-stress-test/src/index.tsx
+++ b/demos/css-stress-test/src/index.tsx
--- a/demos/css-stress-test/src/main.tsx
+++ b/demos/css-stress-test/src/main.tsx
--- a/demos/css-stress-test/tsconfig.json
+++ b/demos/css-stress-test/tsconfig.json
--- a/demos/css-stress-test/vite.config.js
+++ b/demos/css-stress-test/vite.config.js
--- a/demos/react-fast-refresh-test/package.json
+++ b/demos/react-fast-refresh-test/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "simple-react",
+  "version": "1.0.0",
+  "license": "MIT",
+  "dependencies": {
+    "@emotion/css": "^11.1.3",
+    "@vitejs/plugin-react-refresh": "^1.3.3",
+    "antd": "^4.16.1",
+    "left-pad": "^1.3.0",
+    "next": "^11.0.0",
+    "parcel": "2.0.0-beta.3",
+    "react": "^17.0.2",
+    "react-bootstrap": "^1.6.1",
+    "react-dom": "^17.0.2",
+    "react-form": "^4.0.1",
+    "react-hook-form": "^7.8.3"
+  },
+  "parcel": "parceldist/index.js",
+  "targets": {
+    "parcel": {
+      "outputFormat": "esmodule",
+      "sourceMap": false,
+      "optimize": false,
+      "engines": {
+        "chrome": "last 1 version"
+      }
+    }
+  },
+  "devDependencies": {
+    "@snowpack/plugin-react-refresh": "^2.5.0",
+    "typescript": "^4.3.4"
+  }
+}
--- a/demos/react-fast-refresh-test/public/index.html
+++ b/demos/react-fast-refresh-test/public/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link
+      rel="stylesheet"
+      crossorigin="anonymous"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&family=Space+Mono:wght@400;700&display=swap"
+    />
+  </head>
+  <body>
+    <div id="reactroot"></div>
+    <link rel="stylesheet" href="./src/index.css" />
+    <script src="./src/index.tsx" async type="module"></script>
+  </body>
+</html>
--- a/demos/react-fast-refresh-test/src/button.css
+++ b/demos/react-fast-refresh-test/src/button.css
--- a/demos/react-fast-refresh-test/src/colors.css
+++ b/demos/react-fast-refresh-test/src/colors.css
@@ -0,0 +1,14 @@
+:root {
+  --timestamp: "12812";
+  --interval: "8";
+  --progress-bar: 11.83299999999997%;
+  --spinner-1-muted: rgb(142, 6, 182);
+  --spinner-1-primary: rgb(177, 8, 227);
+  --spinner-2-muted: rgb(110, 148, 190);
+  --spinner-2-primary: rgb(138, 185, 238);
+  --spinner-3-muted: rgb(75, 45, 64);
+  --spinner-3-primary: rgb(94, 56, 80);
+  --spinner-4-muted: rgb(155, 129, 108);
+  --spinner-4-primary: rgb(194, 161, 135);
+  --spinner-rotate: 213deg;
+}
--- a/demos/react-fast-refresh-test/src/components/button.tsx
+++ b/demos/react-fast-refresh-test/src/components/button.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { NewComponent } from "./new-comp";
+
+const Toast = () => {
+  const [baconyes, baconno] = useBacon();
+  return <div>false</div>;
+};
+const Button = ({ label, label2, onClick }) => {
+  const useCustomHookInsideFunction = (what, arr) => {
+    return [true, false];
+  };
+  const [on, setOn] = React.useState(false);
+
+  React.useEffect(() => {
+    console.log({ on });
+  }, [on]);
+
+  // const [foo1, foo2] = useCustomHookInsideFunction(() => {}, [on]);
+
+  return (
+    <div className="Button" onClick={onClick}>
+      <Toast>f</Toast>
+      <div className="Button-label">{label}12</div>
+      <NewComponent />
+    </div>
+  );
+};
+
+const Bacon = Button;
+
+export { Bacon, Bacon as Button };
+
+const RefreshLike = () => {};
+
+const useBacon = () => {
+  return [1, 8];
+};
--- a/demos/react-fast-refresh-test/src/components/new-comp.tsx
+++ b/demos/react-fast-refresh-test/src/components/new-comp.tsx
@@ -0,0 +1,3 @@
+export const NewComponent = () => {
+  return <div>NEW!</div>;
+};
--- a/demos/react-fast-refresh-test/src/font.css
+++ b/demos/react-fast-refresh-test/src/font.css
@@ -0,0 +1 @@
+@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&family=Space+Mono:wght@400;700&display=swap";
--- a/demos/react-fast-refresh-test/src/index.css
+++ b/demos/react-fast-refresh-test/src/index.css
@@ -0,0 +1,236 @@
+@import "./colors.css";
+
+:root {
+  --heading-font: "Space Mono", system-ui;
+  --body-font: "IBM Plex Sans", system-ui;
+
+  --color-brand: #02ff00;
+  --color-brand-muted: rgb(2, 150, 0);
+
+  --padding-horizontal: 90px;
+
+  --page-background: black;
+  --page-background-alpha: rgba(0, 0, 0, 0.8);
+
+  --result__background-color: black;
+  --result__primary-color: var(--color-brand);
+  --result__foreground-color: white;
+  --result__muted-color: rgb(165, 165, 165);
+
+  --card-width: 352px;
+
+  --page-width: 1152px;
+
+  --snippets_container-background-unfocused: #171717;
+  --snippets_container-background-focused: #0017e9;
+  --snippets_container-background: var(
+    --snippets_container-background-unfocused
+  );
+  --snippets_container-muted-color: rgb(153, 153, 153);
+}
+
+body {
+  color: white;
+  margin: 0;
+
+  padding: 0;
+  font-family: var(--body-font);
+  background-color: var(--page-background);
+  color: var(--result__muted-color);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.Subtitle {
+  text-align: center;
+  font-size: 4em;
+  margin: 0;
+  padding: 0;
+  margin-bottom: 0.25em;
+
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+}
+
+#reactroot,
+#__next,
+body,
+html {
+  height: 100%;
+}
+
+.Title {
+  color: var(--color-brand);
+  font-family: var(--heading-font);
+  font-weight: 700;
+  margin-top: 48px;
+  font-size: 48px;
+  text-transform: capitalize;
+  text-align: center;
+}
+
+.Description {
+  text-align: center;
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+header,
+.main {
+  width: 650px;
+  margin: 0 auto;
+}
+
+section {
+  width: 650px;
+}
+
+header {
+  margin-bottom: 48px;
+}
+
+footer {
+  flex-shrink: 0;
+}
+
+#reactroot,
+#__next {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+section {
+  height: 300px;
+  display: flex;
+  flex-direction: column;
+}
+
+.timer {
+  font-weight: normal;
+}
+
+.ProgressBar-container {
+  width: 100%;
+  display: block;
+  position: relative;
+  border: 1px solid var(--color-brand-muted);
+  border-radius: 4px;
+
+  height: 92px;
+}
+
+.ProgressBar {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  background-color: var(--color-brand);
+  transform-origin: top left;
+  border-radius: 4px;
+  transform: scaleX(var(--progress-bar, 0%));
+}
+
+.Bundler-container {
+  background-color: var(--snippets_container-background-focused);
+  font-size: 64px;
+  font-weight: bold;
+  color: white;
+  left: 0;
+  right: 0;
+  padding: 0.8em 0.8em;
+}
+
+.Bundler-updateRate {
+  font-size: 0.8em;
+  font-weight: normal;
+  display: flex;
+  color: var(--result__muted-color);
+}
+
+.interval:before {
+  content: var(--interval, "16");
+}
+
+.highlight {
+  color: white;
+}
+
+.timer:after {
+  content: var(--timestamp);
+  font-variant-numeric: tabular-nums;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  display: inline;
+  font-weight: 500;
+  color: white;
+  width: 100%;
+}
+
+.SectionLabel {
+  font-weight: 300;
+  font-family: var(--heading-font);
+  text-align: center;
+  width: 100%;
+  font-weight: 700;
+  margin-top: 24px;
+}
+
+.FooterLabel {
+  margin-top: 0;
+  margin-bottom: 12px;
+}
+
+.Spinner-container {
+  --spinner-muted: rgb(0, 255, 0);
+  --spinner-primary: rgb(0, 60, 255);
+
+  width: 96px;
+  height: 96px;
+  border-radius: 50%;
+  background-color: var(--page-background);
+  border-top: 1.1em solid var(--spinner-muted);
+  border-right: 1.1em solid var(--spinner-muted);
+  border-bottom: 1.1em solid var(--spinner-muted);
+  border-left: 1.1em solid var(--spinner-primary);
+
+  transform: rotate(var(--spinner-rotate, 12deg));
+}
+
+.Spinners {
+  display: grid;
+  grid-auto-flow: column;
+  justify-content: space-between;
+
+  width: 100%;
+}
+
+.Spinner-1.Spinner-container {
+  --spinner-muted: var(--spinner-1-muted);
+  --spinner-primary: var(--spinner-1-primary);
+}
+
+.Spinner-2.Spinner-container {
+  --spinner-muted: var(--spinner-2-muted);
+  --spinner-primary: var(--spinner-2-primary);
+}
+
+.Spinner-3.Spinner-container {
+  --spinner-muted: var(--spinner-3-muted);
+  --spinner-primary: var(--spinner-3-primary);
+}
+
+.Spinner-4.Spinner-container {
+  --spinner-muted: var(--spinner-4-muted);
+  --spinner-primary: var(--spinner-4-primary);
+}
--- a/demos/react-fast-refresh-test/src/index.tsx
+++ b/demos/react-fast-refresh-test/src/index.tsx
@@ -0,0 +1,20 @@
+import ReactDOM from "react-dom";
+import React from "react";
+import { Main } from "./main";
+import classNames from "classnames";
+
+const Base = ({}) => {
+  const name = decodeURIComponent(location.search.substring(1));
+  return <Main productName={name || "Bundler"} />;
+};
+
+function startReact() {
+  ReactDOM.render(<Base />, document.querySelector("#reactroot"));
+}
+
+globalThis.addEventListener("DOMContentLoaded", () => {
+  startReact();
+});
+startReact();
+
+export { Base };
--- a/demos/react-fast-refresh-test/src/main.tsx
+++ b/demos/react-fast-refresh-test/src/main.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+
+export const Main = ({ productName }) => {
+  return (
+    <>
+      <header>
+        <div className="Title">CSS HMR Stress Test</div>
+        <p className="Description">
+          This page visually tests how quickly a bundler can update CSS over Hot
+          Module Reloading.
+        </p>
+      </header>
+      <main className="main">
+        <section className="ProgressSection">
+          <p className="Subtitle">
+            <span className="Subtitle-part">
+              Ran:&nbsp;<span className="timer"></span>
+            </span>
+          </p>
+
+          <div className="ProgressBar-container">
+            <div className="ProgressBar"></div>
+          </div>
+          <div className="SectionLabel">
+            The progress bar should move from left to right smoothly.
+          </div>
+        </section>
+
+        <section>
+          <div className="Spinners">
+            <div className="Spinner-container Spinner-1">
+              <div className="Spinner"></div>
+            </div>
+
+            <div className="Spinner-container Spinner-2">
+              <div className="Spinner"></div>
+            </div>
+
+            <div className="Spinner-container Spinner-3">
+              <div className="Spinner"></div>
+            </div>
+
+            <div className="Spinner-container Spinner-4">
+              <div className="Spinner"></div>
+            </div>
+          </div>
+          <div className="SectionLabel">
+            The spinners should rotate &amp; change color smoothly.
+          </div>
+        </section>
+      </main>
+      <footer>
+        <div className="SectionLabel FooterLabel">
+          There are no CSS animations on this page.
+        </div>
+
+        <div className="Bundler-container">
+          <div className="Bundler">{productName}</div>
+          <div className="Bundler-updateRate">
+            Saving a css file every&nbsp;
+            <span className="highlight">
+              <span className="interval"></span>ms
+            </span>
+          </div>
+        </div>
+      </footer>
+    </>
+  );
+};
--- a/demos/react-fast-refresh-test/tsconfig.json
+++ b/demos/react-fast-refresh-test/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
--- a/demos/simple-react/esbuilddir/index.js.REMOVED.git-id
+++ b/demos/simple-react/esbuilddir/index.js.REMOVED.git-id
@@ -1 +0,0 @@
-c3deb64ab97419cfb03a84ac88f59136da605976
--- a/demos/simple-react/pages/index.tsx
+++ b/demos/simple-react/pages/index.tsx
@@ -1,9 +0,0 @@
-import { Main } from "../src/main";
-
-export function getInitialProps() {
-  return {};
-}
-
-export default function IndexRoute() {
-  return <Main productName={"Next.js (Webpack 5)"} />;
-}
--- a/demos/simple-react/src/components/button.tsx
+++ b/demos/simple-react/src/components/button.tsx
@@ -1,7 +0,0 @@
-import React from "react";
-
-export const Button = ({ label, label2, onClick }) => (
-  <div className="Button" onClick={onClick}>
-    <div className="Button-label">{label}13</div>
-  </div>
-);
--- a/demos/simple-react/txt.js
+++ b/demos/simple-react/txt.js
				`@@ -0,0 +1 @@`
				`@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&family=Space+Mono:wght@400;700&display=swap";`