🐎: Scaffolding for a benchmarking tool (#805)

software-mansion · Jan 27, 2025 · e5c4db8 · e5c4db8
1 parent eeebc28
commit e5c4db8
Show file tree

Hide file tree

Showing 11 changed files with 687 additions and 28 deletions.
diff --git a/apps/typegpu-docs/package.json b/apps/typegpu-docs/package.json
@@ -27,8 +27,10 @@
     "classnames": "^2.5.1",
     "jotai": "^2.8.4",
     "jotai-location": "^0.5.5",
+    "lucide-react": "^0.474.0",
     "lz-string": "^1.5.0",
     "monaco-editor": "^0.50.0",
+    "motion": "^12.0.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "remeda": "^2.3.0",
@@ -37,6 +39,7 @@
     "starlight-blog": "^0.12.0",
     "starlight-typedoc": "^0.17.0",
     "tailwindcss": "^3.4.6",
+    "tinybench": "^3.1.0",
     "typed-binary": "^4.0.0",
     "typedoc": "^0.27.1",
     "typedoc-plugin-markdown": "^4.3.0",
@@ -49,6 +52,7 @@
     "@types/babel__template": "^7.4.4",
     "@types/babel__traverse": "^7.20.6",
     "@webgpu/types": "^0.1.43",
-    "astro-vtbot": "^1.8.2"
+    "astro-vtbot": "^1.8.2",
+    "tailwindcss-motion": "^1.0.1"
   }
 }
diff --git a/apps/typegpu-docs/src/components/design/DeleteIcon.tsx b/apps/typegpu-docs/src/components/design/DeleteIcon.tsx
@@ -0,0 +1,84 @@
+'use client';
+
+import type { Variants } from 'motion/react';
+import { motion, useAnimation } from 'motion/react';
+
+const lidVariants: Variants = {
+  normal: { y: 0 },
+  animate: { y: -1.1 },
+};
+
+const springTransition = {
+  type: 'spring',
+  stiffness: 500,
+  damping: 30,
+};
+
+const DeleteIcon = () => {
+  const controls = useAnimation();
+
+  return (
+    <div
+      className="cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center"
+      onMouseEnter={() => controls.start('animate')}
+      onMouseLeave={() => controls.start('normal')}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <title>Delete</title>
+        <motion.g
+          variants={lidVariants}
+          animate={controls}
+          transition={springTransition}
+        >
+          <path d="M3 6h18" />
+          <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+        </motion.g>
+        <motion.path
+          d="M19 8v12c0 1-1 2-2 2H7c-1 0-2-1-2-2V8"
+          variants={{
+            normal: { d: 'M19 8v12c0 1-1 2-2 2H7c-1 0-2-1-2-2V8' },
+            animate: { d: 'M19 9v12c0 1-1 2-2 2H7c-1 0-2-1-2-2V9' },
+          }}
+          animate={controls}
+          transition={springTransition}
+        />
+        <motion.line
+          x1="10"
+          x2="10"
+          y1="11"
+          y2="17"
+          variants={{
+            normal: { y1: 11, y2: 17 },
+            animate: { y1: 11.5, y2: 17.5 },
+          }}
+          animate={controls}
+          transition={springTransition}
+        />
+        <motion.line
+          x1="14"
+          x2="14"
+          y1="11"
+          y2="17"
+          variants={{
+            normal: { y1: 11, y2: 17 },
+            animate: { y1: 11.5, y2: 17.5 },
+          }}
+          animate={controls}
+          transition={springTransition}
+        />
+      </svg>
+    </div>
+  );
+};
+
+export { DeleteIcon };
diff --git a/apps/typegpu-docs/src/layouts/PageLayout.astro b/apps/typegpu-docs/src/layouts/PageLayout.astro
@@ -1,10 +1,10 @@
 ---
 import '../tailwind.css';
 import '../fonts/font-face.css';
-const { title } = Astro.props;
+const { title, theme = 'light' } = Astro.props;
 ---
 
-<html>
+<html data-theme={theme}>
   <head>
     <title>{title ? `${title} |` : ''} TypeGPU</title>
     <meta charset="UTF-8" />
@@ -49,6 +49,14 @@ const { title } = Astro.props;
         margin: 0;
       }
 
+      [data-theme='dark'] body {
+        background-color: #171724;
+        color: white;
+      }
+
+      [data-theme='light'] body {
+        background-color: white;
+      }
     </style>
   </head>
   <body>

diff --git a/apps/typegpu-docs/src/pages/benchmark/atom-with-url.ts b/apps/typegpu-docs/src/pages/benchmark/atom-with-url.ts
@@ -0,0 +1,67 @@
+import { atom } from 'jotai';
+import { atomWithLocation } from 'jotai-location';
+
+const locationAtom = atomWithLocation();
+
+export const stringParam = {
+  encode: (val: string) => val,
+  decode: (val: string) => val,
+};
+
+export const boolParam = {
+  encode: (val: boolean) => (val ? '1' : '0'),
+  decode: (val: string) => val === '1',
+};
+
+export const numberParam = {
+  encode: (val: number) => String(val),
+  decode: (val: string) => Number.parseFloat(val),
+};
+
+export const objParam = {
+  encode: JSON.stringify,
+  decode: JSON.parse,
+};
+
+export const typeToParam = {
+  string: stringParam,
+  boolean: boolParam,
+  number: numberParam,
+  object: objParam,
+};
+
+export const atomWithUrl = <T>(
+  key: string,
+  defaultValue: T,
+  options?: { encode: (val: T) => string; decode: (val: string) => unknown },
+) => {
+  const optionsOrInferred =
+    options ??
+    typeToParam[typeof defaultValue as keyof typeof typeToParam] ??
+    objParam;
+
+  const { encode, decode } = optionsOrInferred;
+
+  return atom(
+    (get) => {
+      const location = get(locationAtom);
+      return location.searchParams?.has(key)
+        ? (decode(location.searchParams.get(key) ?? '') as T)
+        : defaultValue;
+    },
+    (get, set, newValue: T) => {
+      const prev = get(locationAtom);
+      const searchParams = new URLSearchParams(prev.searchParams);
+      searchParams.set(key, encode(newValue));
+
+      set(
+        locationAtom,
+        {
+          ...prev,
+          searchParams: searchParams,
+        },
+        { replace: true },
+      );
+    },
+  );
+};