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)
vercel · Dec 22, 2022 · bbd1a5c · bbd1a5c · vercel · Dec 22, 2022
1 parent 8d86ee5
commit bbd1a5c
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
   }
 ]} />