From d3bfbb4b6605cc0ada1bc7e61e343cadb9a30e84 Mon Sep 17 00:00:00 2001 From: baudbot-agent Date: Sat, 14 Mar 2026 16:59:20 +0000 Subject: [PATCH 1/2] feat: add vite+ (vp) as a task runner benchmark MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add vp (Vite+) to the benchmarks under 'Task Runners'. Vite+ is a unified web toolchain with its own task runner (vp run). Changes: - scripts/setup.sh: Install vp via curl installer, persist PATH for CI - scripts/variations/common.sh: Add vp to BENCH_INCLUDE, restrict to 'run' variation - scripts/variations/run.sh: Add vp install (prepare) and vp run test (command) - scripts/clean-helpers.sh: Add vp cache cleanup - scripts/generate-chart.js: Add vp color (#4f30e8) - .github/workflows/benchmark.yaml: Add vp to default BENCH_INCLUDE - app/src/types/chart-data.ts: Add 'vp' to all type definitions - app/src/components/icons/vp.tsx: Placeholder icon (pending final SVG) - app/src/components/icons/index.ts: Export Vp icon - app/src/lib/get-icons.ts: Map vp to Vp icon - app/src/lib/utils.ts: Display name 'vite+' - app/src/hooks/use-history-data.ts: Add vp to PACKAGE_MANAGERS - app/src/components/header.tsx: Add dark:text-white for vp icon Note: Icon SVG is a placeholder — final light/dark mode logos pending. --- .github/workflows/benchmark.yaml | 4 ++-- app/src/components/header.tsx | 2 +- app/src/components/icons/index.ts | 1 + app/src/components/icons/vp.tsx | 29 +++++++++++++++++++++++++++++ app/src/hooks/use-history-data.ts | 1 + app/src/lib/get-icons.ts | 2 ++ app/src/lib/utils.ts | 1 + app/src/types/chart-data.ts | 9 +++++++++ scripts/clean-helpers.sh | 8 ++++++++ scripts/generate-chart.js | 1 + scripts/setup.sh | 11 +++++++++++ scripts/variations/common.sh | 11 ++++++----- scripts/variations/run.sh | 5 +++++ 13 files changed, 77 insertions(+), 8 deletions(-) create mode 100644 app/src/components/icons/vp.tsx diff --git a/.github/workflows/benchmark.yaml b/.github/workflows/benchmark.yaml index 717c499a9..82b14d6b6 100644 --- a/.github/workflows/benchmark.yaml +++ b/.github/workflows/benchmark.yaml @@ -11,7 +11,7 @@ on: default: '["clean", "node_modules", "cache", "cache+node_modules", "cache+lockfile", "cache+lockfile+node_modules", "lockfile", "lockfile+node_modules", "registry-clean", "registry-lockfile"]' binaries: description: "The binaries to run the benchmarks on" - default: '"npm,yarn,berry,zpm,pnpm,vlt,bun,deno,nx,turbo,node"' + default: '"npm,yarn,berry,zpm,pnpm,vlt,bun,deno,nx,turbo,vp,node"' warmup: description: "The number of warmup runs on each benchmark" default: "2" @@ -96,7 +96,7 @@ jobs: contents: read id-token: write env: - BENCH_INCLUDE: ${{ fromJson(inputs.binaries || '"npm,yarn,berry,zpm,pnpm,vlt,bun,deno,nx,turbo,node"') }} + BENCH_INCLUDE: ${{ fromJson(inputs.binaries || '"npm,yarn,berry,zpm,pnpm,vlt,bun,deno,nx,turbo,vp,node"') }} BENCH_WARMUP: ${{ (github.event_name == 'push' && github.ref != 'refs/heads/main') && '1' || (inputs.warmup || '2') }} BENCH_RUNS: ${{ (github.event_name == 'push' && github.ref != 'refs/heads/main') && '1' || (inputs.runs || '5') }} steps: diff --git a/app/src/components/header.tsx b/app/src/components/header.tsx index 74c046f7b..a350314fb 100644 --- a/app/src/components/header.tsx +++ b/app/src/components/header.tsx @@ -316,7 +316,7 @@ const LeaderBoardItem = ({ {Icon && ( )} diff --git a/app/src/components/icons/index.ts b/app/src/components/icons/index.ts index 9a4575731..d981f6fa5 100644 --- a/app/src/components/icons/index.ts +++ b/app/src/components/icons/index.ts @@ -27,4 +27,5 @@ export * from "./svelte.tsx"; export * from "./turbo.tsx"; export * from "./vue.tsx"; export * from "./yarn.tsx"; +export * from "./vp.tsx"; export * from "./zpm.tsx"; diff --git a/app/src/components/icons/vp.tsx b/app/src/components/icons/vp.tsx new file mode 100644 index 000000000..f3adb1929 --- /dev/null +++ b/app/src/components/icons/vp.tsx @@ -0,0 +1,29 @@ +import { forwardRef } from "react"; +import type { LucideProps } from "lucide-react"; + +// Vite+ (vp) icon — uses different SVG paths for light/dark mode +// Light mode: dark logo (for light backgrounds) +// Dark mode: light logo (for dark backgrounds) +export const Vp = forwardRef( + ({ size = 24, className, ...props }, ref) => ( + + {/* Placeholder: bolt/lightning shape representing Vite+ */} + + + ), +); + +Vp.displayName = "Vp"; diff --git a/app/src/hooks/use-history-data.ts b/app/src/hooks/use-history-data.ts index 21f9d822e..3d2071549 100644 --- a/app/src/hooks/use-history-data.ts +++ b/app/src/hooks/use-history-data.ts @@ -18,6 +18,7 @@ const PACKAGE_MANAGERS = [ "vlt", "nx", "turbo", + "vp", "node", "aws", "cloudsmith", diff --git a/app/src/lib/get-icons.ts b/app/src/lib/get-icons.ts index d987fbab8..fad69922b 100644 --- a/app/src/lib/get-icons.ts +++ b/app/src/lib/get-icons.ts @@ -15,6 +15,7 @@ import { Pnpm, Svelte, Turbo, + Vp, Vue, Yarn, Zpm, @@ -34,6 +35,7 @@ const packageManagerMap: Partial> = { nx: Nx, pnpm: Pnpm, turbo: Turbo, + vp: Vp, yarn: Yarn, berry: Berry, zpm: Zpm, diff --git a/app/src/lib/utils.ts b/app/src/lib/utils.ts index 7a2812264..e8fbb111b 100644 --- a/app/src/lib/utils.ts +++ b/app/src/lib/utils.ts @@ -472,6 +472,7 @@ export function getPackageManagerDisplayName( if (packageManager === "berry") return "yarn (berry)"; if (packageManager === "zpm") return "yarn (zpm)"; if (packageManager === "turbo") return "turborepo"; + if (packageManager === "vp") return "vite+"; if (packageManager === "aws") return "AWS CodeArtifact"; if (packageManager === "cloudsmith") return "Cloudsmith"; if (packageManager === "github") return "GitHub"; diff --git a/app/src/types/chart-data.ts b/app/src/types/chart-data.ts index d3780ea6e..a517b30a8 100644 --- a/app/src/types/chart-data.ts +++ b/app/src/types/chart-data.ts @@ -9,6 +9,7 @@ export type PackageManager = | "vlt" | "nx" | "turbo" + | "vp" | "node" | "aws" | "cloudsmith" @@ -50,6 +51,7 @@ export interface PackageManagerVersions { vlt?: string; nx?: string; turbo?: string; + vp?: string; node?: string; aws?: string; cloudsmith?: string; @@ -71,6 +73,7 @@ export interface PackageManagerData { vlt?: number; nx?: number; turbo?: number; + vp?: number; node?: number; aws?: number; cloudsmith?: number; @@ -86,6 +89,7 @@ export interface PackageManagerData { vlt_stddev?: number; nx_stddev?: number; turbo_stddev?: number; + vp_stddev?: number; node_stddev?: number; aws_stddev?: number; cloudsmith_stddev?: number; @@ -101,6 +105,7 @@ export interface PackageManagerData { vlt_fill?: string; nx_fill?: string; turbo_fill?: string; + vp_fill?: string; node_fill?: string; aws_fill?: string; cloudsmith_fill?: string; @@ -116,6 +121,7 @@ export interface PackageManagerData { vlt_count?: number; nx_count?: number; turbo_count?: number; + vp_count?: number; node_count?: number; aws_count?: number; cloudsmith_count?: number; @@ -131,6 +137,7 @@ export interface PackageManagerData { vlt_dnf?: boolean; nx_dnf?: boolean; turbo_dnf?: boolean; + vp_dnf?: boolean; node_dnf?: boolean; aws_dnf?: boolean; cloudsmith_dnf?: boolean; @@ -172,6 +179,7 @@ export interface PackageCountData { vlt?: PackageCountEntry; nx?: PackageCountEntry; turbo?: PackageCountEntry; + vp?: PackageCountEntry; node?: PackageCountEntry; aws?: PackageCountEntry; cloudsmith?: PackageCountEntry; @@ -195,6 +203,7 @@ export interface ProcessCountData { vlt?: PackageCountEntry; nx?: PackageCountEntry; turbo?: PackageCountEntry; + vp?: PackageCountEntry; node?: PackageCountEntry; aws?: PackageCountEntry; cloudsmith?: PackageCountEntry; diff --git a/scripts/clean-helpers.sh b/scripts/clean-helpers.sh index 9ed0d20d4..3ced8f4ae 100644 --- a/scripts/clean-helpers.sh +++ b/scripts/clean-helpers.sh @@ -75,6 +75,13 @@ clean_deno_cache() { fi } +# Function to safely clean vp cache +clean_vp_cache() { + if command -v vp &> /dev/null; then + vp cache clean >/dev/null 2>&1 || true + fi +} + # Function to clean lockfiles for all package managers clean_lockfiles() { echo "Cleaning lockfiles..." @@ -137,6 +144,7 @@ clean_all_cache() { clean_bun_cache clean_nx_cache clean_deno_cache + clean_vp_cache } clean_build_files() { diff --git a/scripts/generate-chart.js b/scripts/generate-chart.js index 0fb914c70..1cd8a196c 100644 --- a/scripts/generate-chart.js +++ b/scripts/generate-chart.js @@ -34,6 +34,7 @@ const COLORS = { vlt: "#000000", nx: "#3b82f6", turbo: "#ff1e56", + vp: "#4f30e8", node: "#84ba64", }; diff --git a/scripts/setup.sh b/scripts/setup.sh index a65d5459b..bfa250fc2 100644 --- a/scripts/setup.sh +++ b/scripts/setup.sh @@ -38,6 +38,14 @@ echo "hyperfine: $HYPERFINE_VERSION" echo "Installing package managers and tools..." npm install -g npm@latest corepack@latest vlt@latest bun@latest deno@latest nx@latest turbo@latest +# Install Vite+ (vp) via its installer script +curl -fsSL https://vite.plus | bash +export PATH="$HOME/.vite-plus/bin:$PATH" +# Persist vp on PATH for subsequent CI steps +if [ -n "${GITHUB_PATH:-}" ]; then + echo "$HOME/.vite-plus/bin" >> "$GITHUB_PATH" +fi + # Configure Package Managers echo "Configuring package managers..." corepack enable yarn pnpm @@ -63,6 +71,7 @@ BUN_VERSION="$(bun -v)" DENO_VERSION="$(npm view deno@latest version)" NX_VERSION="$(npm view nx@latest version)" TURBO_VERSION="$(npm view turbo@latest version)" +VP_VERSION="$(vp --version 2>/dev/null || echo "unknown")" NODE_VERSION=$(node -v) # Output versions @@ -76,6 +85,7 @@ echo "bun: $BUN_VERSION" echo "deno: $DENO_VERSION" echo "nx: $NX_VERSION" echo "turbo: $TURBO_VERSION" +echo "vp: $VP_VERSION" echo "node: $NODE_VERSION" # Save versions to JSON file @@ -90,6 +100,7 @@ echo "{ \"deno\": \"$DENO_VERSION\", \"nx\": \"$NX_VERSION\", \"turbo\": \"$TURBO_VERSION\", + \"vp\": \"$VP_VERSION\", \"node\": \"$NODE_VERSION\" }" > ./results/versions.json diff --git a/scripts/variations/common.sh b/scripts/variations/common.sh index 4064fee09..6c0f6f1f2 100644 --- a/scripts/variations/common.sh +++ b/scripts/variations/common.sh @@ -31,18 +31,18 @@ else fi # Defines configurable values for the benchmark -BENCH_INCLUDE="${BENCH_INCLUDE:=npm,yarn,berry,zpm,pnpm,vlt,bun,deno,nx,turbo,node}" +BENCH_INCLUDE="${BENCH_INCLUDE:=npm,yarn,berry,zpm,pnpm,vlt,bun,deno,nx,turbo,vp,node}" BENCH_WARMUP="${BENCH_WARMUP:=2}" BENCH_RUNS="${BENCH_RUNS:=5}" # Per-command timeout in seconds (default: 5 minutes). # If a single install exceeds this, it is killed. hyperfine --ignore-failure # lets the suite continue; the timed-out run records as a failure. BENCH_TIMEOUT="${BENCH_TIMEOUT:=300}" -for pm in npm yarn berry zpm pnpm vlt bun deno nx turbo node; do +for pm in npm yarn berry zpm pnpm vlt bun deno nx turbo vp node; do CHOICE=$(echo "$pm" | tr '[:lower:]' '[:upper:]') if echo "$BENCH_INCLUDE" | grep -qw "$pm"; then - # Only allow nx, turbo, node if BENCH_VARIATION is "run" - if [[ "$pm" == "nx" || "$pm" == "turbo" || "$pm" == "node" ]]; then + # Only allow nx, turbo, vp, node if BENCH_VARIATION is "run" + if [[ "$pm" == "nx" || "$pm" == "turbo" || "$pm" == "vp" || "$pm" == "node" ]]; then if [ "$BENCH_VARIATION" = "run" ]; then eval "BENCH_INCLUDE_${CHOICE}=1" else @@ -76,6 +76,7 @@ BENCH_SETUP_BUN="" BENCH_SETUP_DENO="" BENCH_SETUP_NX="" BENCH_SETUP_TURBO="" +BENCH_SETUP_VP="" BENCH_SETUP_NODE="" # Bare install commands (no log redirection) — used by strace process counting @@ -128,7 +129,7 @@ collect_package_count() { ls -la "$BENCH_OUTPUT_FOLDER" # Prints the output of each install - for pm in npm yarn berry zpm pnpm vlt bun deno nx turbo node; do + for pm in npm yarn berry zpm pnpm vlt bun deno nx turbo vp node; do if echo "$BENCH_INCLUDE" | grep -qw "$pm"; then for i in {0..9}; do echo "-- Reading output of $pm install $i ---" diff --git a/scripts/variations/run.sh b/scripts/variations/run.sh index 25b9837c8..159a1e69d 100644 --- a/scripts/variations/run.sh +++ b/scripts/variations/run.sh @@ -18,6 +18,7 @@ BENCH_INSTALL_COMMAND_PNPM="${BENCH_COMMAND_PNPM//\$\{HYPERFINE_ITERATION\}/run} BENCH_INSTALL_COMMAND_VLT="${BENCH_COMMAND_VLT//\$\{HYPERFINE_ITERATION\}/run}" BENCH_INSTALL_COMMAND_BUN="${BENCH_COMMAND_BUN//\$\{HYPERFINE_ITERATION\}/run}" BENCH_INSTALL_COMMAND_DENO="${BENCH_COMMAND_DENO//\$\{HYPERFINE_ITERATION\}/run}" +BENCH_INSTALL_COMMAND_VP="timeout $BENCH_TIMEOUT vp install > $BENCH_OUTPUT_FOLDER/vp-output-run.log 2>&1" BENCH_INSTALL_PREPARE_NPM="$(prepend_setup "$BENCH_INSTALL_COMMAND_NPM" "$BENCH_SETUP_NPM")" BENCH_INSTALL_PREPARE_YARN="$(prepend_setup "$BENCH_INSTALL_COMMAND_YARN" "$BENCH_SETUP_YARN")" BENCH_INSTALL_PREPARE_BERRY="$(prepend_setup "$BENCH_INSTALL_COMMAND_BERRY" "$BENCH_SETUP_BERRY")" @@ -26,6 +27,7 @@ BENCH_INSTALL_PREPARE_PNPM="$(prepend_setup "$BENCH_INSTALL_COMMAND_PNPM" "$BENC BENCH_INSTALL_PREPARE_VLT="$(prepend_setup "$BENCH_INSTALL_COMMAND_VLT" "$BENCH_SETUP_VLT")" BENCH_INSTALL_PREPARE_BUN="$(prepend_setup "$BENCH_INSTALL_COMMAND_BUN" "$BENCH_SETUP_BUN")" BENCH_INSTALL_PREPARE_DENO="$(prepend_setup "$BENCH_INSTALL_COMMAND_DENO" "$BENCH_SETUP_DENO")" +BENCH_INSTALL_PREPARE_VP="$(prepend_setup "$BENCH_INSTALL_COMMAND_VP" "$BENCH_SETUP_VP")" # Run defines its own command scripts to actually run a test # script in the fixture directory instead of installing packages. @@ -37,6 +39,7 @@ BENCH_COMMAND_PNPM="timeout $BENCH_TIMEOUT corepack pnpm@latest run test > $BENC BENCH_COMMAND_VLT="timeout $BENCH_TIMEOUT vlt run test --view=human > $BENCH_OUTPUT_FOLDER/vlt-run-output-\${HYPERFINE_ITERATION}.log 2>&1" BENCH_COMMAND_BUN="timeout $BENCH_TIMEOUT bun run test > $BENCH_OUTPUT_FOLDER/bun-run-output-\${HYPERFINE_ITERATION}.log 2>&1" BENCH_COMMAND_DENO="timeout $BENCH_TIMEOUT deno run test > $BENCH_OUTPUT_FOLDER/deno-run-output-\${HYPERFINE_ITERATION}.log 2>&1" +BENCH_COMMAND_VP="timeout $BENCH_TIMEOUT vp run test > $BENCH_OUTPUT_FOLDER/vp-run-output-\${HYPERFINE_ITERATION}.log 2>&1" BENCH_COMMAND_NX="timeout $BENCH_TIMEOUT nx run test > $BENCH_OUTPUT_FOLDER/nx-run-output-\${HYPERFINE_ITERATION}.log 2>&1" BENCH_COMMAND_TURBO="timeout $BENCH_TIMEOUT turbo run test --dangerously-disable-package-manager-check --cache-dir=.cache --no-cache > $BENCH_OUTPUT_FOLDER/turbo-run-output-\${HYPERFINE_ITERATION}.log 2>&1" BENCH_COMMAND_NODE="timeout $BENCH_TIMEOUT node --run test > $BENCH_OUTPUT_FOLDER/node-run-output-\${HYPERFINE_ITERATION}.log 2>&1" @@ -66,6 +69,8 @@ hyperfine --ignore-failure \ ${BENCH_INCLUDE_BUN:+--command-name="bun" "$BENCH_COMMAND_BUN"} \ ${BENCH_INCLUDE_DENO:+--prepare="$BENCH_INSTALL_PREPARE_DENO"} \ ${BENCH_INCLUDE_DENO:+--command-name="deno" "$BENCH_COMMAND_DENO"} \ + ${BENCH_INCLUDE_VP:+--prepare="$BENCH_INSTALL_PREPARE_VP"} \ + ${BENCH_INCLUDE_VP:+--command-name="vp" "$BENCH_COMMAND_VP"} \ ${BENCH_INCLUDE_NX:+--prepare="$BENCH_INSTALL_PREPARE_NPM || true"} \ ${BENCH_INCLUDE_NX:+--command-name="nx" "$BENCH_COMMAND_NX"} \ ${BENCH_INCLUDE_TURBO:+--prepare="$BENCH_INSTALL_PREPARE_NPM || true"} \ From 5a57b1477f575cd5ab9d5a72e668d7ae30acd3eb Mon Sep 17 00:00:00 2001 From: baudbot-agent Date: Sat, 14 Mar 2026 17:10:52 +0000 Subject: [PATCH 2/2] feat: add proper vite+ SVG logos with light/dark mode switching Replace placeholder icon with actual Vite+ brand SVGs: - Dark logo (black brackets + colorful bolt) shown on light backgrounds - Light logo (white brackets + colorful bolt) shown on dark backgrounds - Uses CSS hidden/block dark:hidden/dark:block for theme switching - Removed unnecessary dark:text-white override from header (icon handles it) --- app/src/components/header.tsx | 2 +- app/src/components/icons/vp.tsx | 134 ++++++++++++++++++++++++++++---- 2 files changed, 122 insertions(+), 14 deletions(-) diff --git a/app/src/components/header.tsx b/app/src/components/header.tsx index a350314fb..74c046f7b 100644 --- a/app/src/components/header.tsx +++ b/app/src/components/header.tsx @@ -316,7 +316,7 @@ const LeaderBoardItem = ({ {Icon && ( )} diff --git a/app/src/components/icons/vp.tsx b/app/src/components/icons/vp.tsx index f3adb1929..4645c2b23 100644 --- a/app/src/components/icons/vp.tsx +++ b/app/src/components/icons/vp.tsx @@ -1,29 +1,137 @@ -import { forwardRef } from "react"; +import React, { forwardRef } from "react"; import type { LucideProps } from "lucide-react"; -// Vite+ (vp) icon — uses different SVG paths for light/dark mode -// Light mode: dark logo (for light backgrounds) -// Dark mode: light logo (for dark backgrounds) -export const Vp = forwardRef( +// Vite+ (vp) icon — dark version for light mode backgrounds +const VpDark = forwardRef( ({ size = 24, className, ...props }, ref) => ( - {/* Placeholder: bolt/lightning shape representing Vite+ */} - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ), +); +VpDark.displayName = "VpDark"; + +// Vite+ (vp) icon — white version for dark mode backgrounds +const VpLight = forwardRef( + ({ size = 24, className, ...props }, ref) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ), ); +VpLight.displayName = "VpLight"; + +// Combined Vite+ icon that switches between light/dark variants +// Uses CSS classes to show the correct variant based on theme +export const Vp = forwardRef( + ({ size = 24, className, ...props }, ref) => ( + } className="inline-flex"> + + + + ), +); Vp.displayName = "Vp";