aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Jarred Sumner <jarred@jarredsumner.com> 2021-06-19 18:30:32 -0700
committerGravatar Jarred Sumner <jarred@jarredsumner.com> 2021-06-19 18:30:32 -0700
commit020ce327794089995f6b4511cfca1e949a7eab03 (patch)
tree86e7b6f5c98de857cfcbbbf292df777fd4c28a2a
parent0b68ccd7426d6b6cf35864db6e6d349839d67be4 (diff)
downloadbun-020ce327794089995f6b4511cfca1e949a7eab03.tar.gz
bun-020ce327794089995f6b4511cfca1e949a7eab03.tar.zst
bun-020ce327794089995f6b4511cfca1e949a7eab03.zip
color looper i'll probably get rid of
Former-commit-id: 5015c6a96964c23154509bc26633c18ce36aa9ff
Diffstat
-rw-r--r--demos/simple-react/index.html5
-rw-r--r--demos/simple-react/next-env.d.ts2
-rw-r--r--demos/simple-react/package.json4
-rw-r--r--demos/simple-react/pages/_app.tsx12
-rw-r--r--demos/simple-react/pages/index.tsx9
-rw-r--r--demos/simple-react/public/index.html8
-rw-r--r--demos/simple-react/src/button.css4
-rw-r--r--demos/simple-react/src/colors.css14
-rw-r--r--demos/simple-react/src/font.css1
-rw-r--r--demos/simple-react/src/index.css235
-rw-r--r--demos/simple-react/src/index.tsx16
-rw-r--r--demos/simple-react/src/main.tsx69
-rw-r--r--demos/simple-react/tsconfig.json19
-rw-r--r--misctools/color-looper.zig134
14 files changed, 513 insertions, 19 deletions
diff --git a/demos/simple-react/index.html b/demos/simple-react/index.html
index 3e227399a..8717aa333 100644
--- a/demos/simple-react/index.html
+++ b/demos/simple-react/index.html
@@ -1,6 +1,11 @@
<!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"
+ />
<link rel="stylesheet" href="src/index.css" />
<script async src="src/index.tsx" type="module"></script>
</head>
diff --git a/demos/simple-react/next-env.d.ts b/demos/simple-react/next-env.d.ts
new file mode 100644
index 000000000..7b7aa2c77
--- /dev/null
+++ b/demos/simple-react/next-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
diff --git a/demos/simple-react/package.json b/demos/simple-react/package.json
index f861bf67f..24b2082ee 100644
--- a/demos/simple-react/package.json
+++ b/demos/simple-react/package.json
@@ -7,6 +7,7 @@
"@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",
@@ -26,6 +27,7 @@
}
},
"devDependencies": {
- "@snowpack/plugin-react-refresh": "^2.5.0"
+ "@snowpack/plugin-react-refresh": "^2.5.0",
+ "typescript": "^4.3.4"
}
}
diff --git a/demos/simple-react/pages/_app.tsx b/demos/simple-react/pages/_app.tsx
new file mode 100644
index 000000000..d64d861db
--- /dev/null
+++ b/demos/simple-react/pages/_app.tsx
@@ -0,0 +1,12 @@
+import "../src/font.css";
+import "../src/index.css";
+import App from "next/app";
+
+class MyApp extends App {
+ render() {
+ const { Component, pageProps } = this.props;
+ return <Component {...pageProps} />;
+ }
+}
+
+export default MyApp;
diff --git a/demos/simple-react/pages/index.tsx b/demos/simple-react/pages/index.tsx
new file mode 100644
index 000000000..b3566cdf6
--- /dev/null
+++ b/demos/simple-react/pages/index.tsx
@@ -0,0 +1,9 @@
+import { Main } from "../src/main";
+
+export function getInitialProps() {
+ return {};
+}
+
+export default function IndexRoute() {
+ return <Main productName={"Next.js (Webpack 5)"} />;
+}
diff --git a/demos/simple-react/public/index.html b/demos/simple-react/public/index.html
index 4f5961671..2032ea287 100644
--- a/demos/simple-react/public/index.html
+++ b/demos/simple-react/public/index.html
@@ -1,6 +1,12 @@
<!DOCTYPE html>
<html>
- <head> </head>
+ <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" />
diff --git a/demos/simple-react/src/button.css b/demos/simple-react/src/button.css
index 15cca59e0..60db46096 100644
--- a/demos/simple-react/src/button.css
+++ b/demos/simple-react/src/button.css
@@ -1,6 +1,6 @@
body {
- background-color: green;
- border: 10px solid pink;
+ background-color: red;
+ border: 10px solid red;
color: pink;
box-shadow: 10px 10px 32px red;
}
diff --git a/demos/simple-react/src/colors.css b/demos/simple-react/src/colors.css
new file mode 100644
index 000000000..d45bf4ffc
--- /dev/null
+++ b/demos/simple-react/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;
+} \ No newline at end of file
diff --git a/demos/simple-react/src/font.css b/demos/simple-react/src/font.css
new file mode 100644
index 000000000..448775ef0
--- /dev/null
+++ b/demos/simple-react/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";
diff --git a/demos/simple-react/src/index.css b/demos/simple-react/src/index.css
index cbcf1e654..0917f6c7a 100644
--- a/demos/simple-react/src/index.css
+++ b/demos/simple-react/src/index.css
@@ -1,5 +1,236 @@
-@import "./button.css";
+@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 {
- background-color: orange;
+ 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);
}
diff --git a/demos/simple-react/src/index.tsx b/demos/simple-react/src/index.tsx
index 41b0d56ac..3db53a67f 100644
--- a/demos/simple-react/src/index.tsx
+++ b/demos/simple-react/src/index.tsx
@@ -1,21 +1,11 @@
import ReactDOM from "react-dom";
import React from "react";
-import { Button } from "./components/button";
+import { Main } from "./main";
import classNames from "classnames";
const Base = ({}) => {
- return (
- <main className={classNames("main")}>
- <h3 className={classNames("hi")}>Here is some text</h3>
- <h3 className={classNames("extremely")}></h3>
- <>Fargment!1239899s</>
-
- <Button
- label="Do notencoding! cl1ick."
- onClick={() => alert("I told u not to click!")}
- ></Button>
- </main>
- );
+ const name = decodeURIComponent(location.search.substring(1));
+ return <Main productName={name || "Bundler"} />;
};
function startReact() {
diff --git a/demos/simple-react/src/main.tsx b/demos/simple-react/src/main.tsx
new file mode 100644
index 000000000..1a9948fe8
--- /dev/null
+++ b/demos/simple-react/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>
+ </>
+ );
+};
diff --git a/demos/simple-react/tsconfig.json b/demos/simple-react/tsconfig.json
new file mode 100644
index 000000000..401ede344
--- /dev/null
+++ b/demos/simple-react/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"]
+}
diff --git a/misctools/color-looper.zig b/misctools/color-looper.zig
new file mode 100644
index 000000000..1f9e94466
--- /dev/null
+++ b/misctools/color-looper.zig
@@ -0,0 +1,134 @@
+const std = @import("std");
+
+// usage:
+// ./file-path:0 10
+// 1 2 3
+
+// 1. file path
+// 2. Byte offset in file
+// 3. ms update interval
+pub fn main() anyerror!void {
+ var allocator = std.heap.c_allocator;
+ var timer = try std.time.Timer.start();
+ var color_buf: [2048]u8 = undefined;
+ var args = std.mem.span(try std.process.argsAlloc(allocator));
+
+ var basepath_with_colon: []u8 = args[args.len - 2];
+ var basepath: []u8 = "";
+ var position_str: []u8 = "";
+ if (std.mem.lastIndexOfScalar(u8, basepath_with_colon, ':')) |colon| {
+ basepath = basepath_with_colon[0..colon];
+ position_str = basepath_with_colon[colon + 1 ..];
+ }
+ var position = try std.fmt.parseInt(u32, position_str, 10);
+ const filepath = try std.fs.path.resolve(allocator, &.{basepath});
+ var file = try std.fs.openFileAbsolute(filepath, .{ .write = true });
+ var ms = @truncate(u64, (try std.fmt.parseInt(u128, args[args.len - 1], 10)) * std.time.ns_per_ms);
+ std.debug.assert(ms > 0);
+ // std.debug.assert(std.math.isFinite(position));
+ var prng = std.rand.DefaultPrng.init(0);
+ var stdout = std.io.getStdOut();
+ var log = stdout.writer();
+ var colors = std.mem.zeroes([4][3]u32);
+ var progress_bar: f64 = 0.0;
+ var destination_count: f64 = 18.0;
+
+ // Randomize initial colors
+ colors[0][0] = prng.random.int(u32);
+ colors[0][1] = prng.random.int(u32);
+ colors[0][2] = prng.random.int(u32);
+
+ colors[1][0] = prng.random.int(u32);
+ colors[1][1] = prng.random.int(u32);
+ colors[1][2] = prng.random.int(u32);
+
+ colors[2][0] = prng.random.int(u32);
+ colors[2][1] = prng.random.int(u32);
+ colors[2][2] = prng.random.int(u32);
+
+ colors[3][0] = prng.random.int(u32);
+ colors[3][1] = prng.random.int(u32);
+ colors[3][2] = prng.random.int(u32);
+ var rotate: u32 = 0;
+ var counter: usize = 0;
+ while (true) {
+ colors[0][0] += 1;
+ colors[0][1] += 1;
+ colors[0][2] += 1;
+ colors[1][0] += 1;
+ colors[1][1] += 1;
+ colors[1][2] += 1;
+ colors[2][0] += 1;
+ colors[2][1] += 1;
+ colors[2][2] += 1;
+ colors[3][0] += 1;
+ colors[3][1] += 1;
+ colors[3][2] += 1;
+ rotate += 1;
+ const fmtd =
+ \\:root {{
+ \\ --timestamp: "{d}";
+ \\ --interval: "{s}";
+ \\ --progress-bar: {d}%;
+ \\ --spinner-1-muted: rgb({d}, {d}, {d});
+ \\ --spinner-1-primary: rgb({d}, {d}, {d});
+ \\ --spinner-2-muted: rgb({d}, {d}, {d});
+ \\ --spinner-2-primary: rgb({d}, {d}, {d});
+ \\ --spinner-3-muted: rgb({d}, {d}, {d});
+ \\ --spinner-3-primary: rgb({d}, {d}, {d});
+ \\ --spinner-4-muted: rgb({d}, {d}, {d});
+ \\ --spinner-4-primary: rgb({d}, {d}, {d});
+ \\ --spinner-rotate: {d}deg;
+ \\}}
+ ;
+
+ file = try std.fs.createFileAbsolute(filepath, .{ .truncate = true });
+ var wrote = try std.fmt.bufPrint(&color_buf, fmtd, .{
+ counter,
+ args[args.len - 1],
+ std.math.mod(f64, std.math.round(((progress_bar + 1.0) / destination_count) * 1000) / 1000, 100),
+
+ @floatToInt(u32, std.math.round(@intToFloat(f64, ((colors[0][0] + 1) % 256)) * 0.8)),
+ @floatToInt(u32, std.math.round(@intToFloat(f64, ((colors[0][1] + 1) % 256)) * 0.8)),
+ @floatToInt(u32, std.math.round(@intToFloat(f64, ((colors[0][2] + 1) % 256)) * 0.8)),
+ (colors[0][0] + 1) % 256,
+ (colors[0][1] + 1) % 256,
+ (colors[0][2] + 1) % 256,
+
+ @floatToInt(u32, std.math.round(@intToFloat(f64, ((colors[1][0] + 1) % 256)) * 0.8)),
+ @floatToInt(u32, std.math.round(@intToFloat(f64, ((colors[1][1] + 1) % 256)) * 0.8)),
+ @floatToInt(u32, std.math.round(@intToFloat(f64, ((colors[1][2] + 1) % 256)) * 0.8)),
+ (colors[1][0] + 1) % 256,
+ (colors[1][1] + 1) % 256,
+ (colors[1][2] + 1) % 256,
+
+ @floatToInt(u32, std.math.round(@intToFloat(f64, ((colors[2][0] + 1) % 256)) * 0.8)),
+ @floatToInt(u32, std.math.round(@intToFloat(f64, ((colors[2][1] + 1) % 256)) * 0.8)),
+ @floatToInt(u32, std.math.round(@intToFloat(f64, ((colors[2][2] + 1) % 256)) * 0.8)),
+ (colors[2][0] + 1) % 256,
+ (colors[2][1] + 1) % 256,
+ (colors[2][2] + 1) % 256,
+
+ @floatToInt(u32, std.math.round(@intToFloat(f64, ((colors[3][0] + 1) % 256)) * 0.8)),
+ @floatToInt(u32, std.math.round(@intToFloat(f64, ((colors[3][1] + 1) % 256)) * 0.8)),
+ @floatToInt(u32, std.math.round(@intToFloat(f64, ((colors[3][2] + 1) % 256)) * 0.8)),
+ (colors[3][0] + 1) % 256,
+ (colors[3][1] + 1) % 256,
+ (colors[3][2] + 1) % 256,
+
+ rotate % 360,
+ });
+ progress_bar += 1.0;
+ _ = try file.writeAll(wrote);
+
+ try log.print("[{d}] \"{s}\":{d}\n", .{
+ std.time.nanoTimestamp(),
+ filepath,
+ position,
+ });
+ counter += 1;
+ // If we don't close the file, Parcel seems to never recognize it
+ file.close();
+ std.time.sleep(ms);
+ }
+}
generated by cgit v1.2.3 (git 2.39.1) at 2025-07-10 08:47:32 +0000