From bbd1a5cc973bd7e7f604bef54170a1055c12acb8 Mon Sep 17 00:00:00 2001
From: Alex Kirszenberg <alex.kirszenberg@vercel.com>
Date: Thu, 22 Dec 2022 16:08:36 +0100
Subject: [PATCH] Add a SWC badge to Vite's graph label (#3125)

Before:
<img width="331" alt="image"
src="https://user-images.githubusercontent.com/1621758/209160949-e730cd4b-3e19-4c8a-a196-d17002cbee1b.png">

After:

![image](https://user-images.githubusercontent.com/1621758/209160915-f2f443b7-6b70-440c-8499-83385b99891a.png)
---
 docs/components/pages/pack-home/PackBenchmarks.tsx    |  3 +++
 .../pages/pack-home/PackBenchmarksGraph.tsx           | 11 ++++++++++-
 docs/pages/pack/docs/comparisons/vite.mdx             |  2 ++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/docs/components/pages/pack-home/PackBenchmarks.tsx b/docs/components/pages/pack-home/PackBenchmarks.tsx
index 275f9860597d8..9bd1db8172c4e 100644
--- a/docs/components/pages/pack-home/PackBenchmarks.tsx
+++ b/docs/components/pages/pack-home/PackBenchmarks.tsx
@@ -23,6 +23,7 @@ export interface BenchmarkBar {
   label: string;
   key: keyof BenchmarkData;
   turbo?: true;
+  swc?: true;
 }
 
 export const DEFAULT_BARS: BenchmarkBar[] = [
@@ -38,6 +39,7 @@ export const DEFAULT_BARS: BenchmarkBar[] = [
   {
     key: "vite",
     label: "Vite",
+    swc: true,
   },
   {
     key: "next11",
@@ -53,6 +55,7 @@ export const HMR_BARS: BenchmarkBar[] = [
   {
     key: "vite",
     label: "Vite",
+    swc: true,
   },
   {
     key: "next12",
diff --git a/docs/components/pages/pack-home/PackBenchmarksGraph.tsx b/docs/components/pages/pack-home/PackBenchmarksGraph.tsx
index 014014857ece9..a4792b8e754ac 100644
--- a/docs/components/pages/pack-home/PackBenchmarksGraph.tsx
+++ b/docs/components/pages/pack-home/PackBenchmarksGraph.tsx
@@ -57,7 +57,9 @@ export function BenchmarksGraph({
             <GraphBar
               key={bar.key}
               turbo={bar.turbo}
-              Label={<GraphLabel label={bar.label} turbo={bar.turbo} />}
+              Label={
+                <GraphLabel label={bar.label} turbo={bar.turbo} swc={bar.swc} />
+              }
               duration={data[bar.key] * 1000}
               longestTime={longestTimeWithPadding}
               inView={graphInView}
@@ -291,11 +293,13 @@ const Time = ({
 function GraphLabel({
   label,
   turbo,
+  swc,
   mobileOnly,
   esbuild,
 }: {
   label: string;
   turbo?: boolean;
+  swc?: boolean;
   mobileOnly?: boolean;
   esbuild?: boolean;
 }) {
@@ -316,6 +320,11 @@ function GraphLabel({
           turbo
         </p>
       )}
+      {swc && (
+        <p className="font-space-grotesk m-0 font-light text-[#666666]">
+          with SWC
+        </p>
+      )}
       {esbuild && (
         <p className="font-space-grotesk m-0 text-[#666666]">esbuild</p>
       )}
diff --git a/docs/pages/pack/docs/comparisons/vite.mdx b/docs/pages/pack/docs/comparisons/vite.mdx
index dab4f16d9f90f..a8a0875e9a0fe 100644
--- a/docs/pages/pack/docs/comparisons/vite.mdx
+++ b/docs/pages/pack/docs/comparisons/vite.mdx
@@ -41,6 +41,7 @@ Note that Vite is using the official [SWC plugin](https://github.com/vitejs/vite
   {
     label: 'Vite',
     key: 'vite',
+    swc: true
   }
 ]} />
 
@@ -61,5 +62,6 @@ In a 1,000 module application, Turbopack can react to file changes **<DocsBenchm
   {
     label: 'Vite',
     key: 'vite',
+    swc: true
   }
 ]} />