codspeed use tsup (#29)

Co-authored-by: Adrien Cacciaguerra <[email protected]>

.github/workflows/codspeed.yml

@@ -35,9 +35,11 @@ jobs:
             ${{ runner.os }}-pnpm-store-
       - name: Install dependencies
         run: pnpm install
+      - name: Build benchmark suite
+        run: cd packages/benchmark && pnpm run codspeed 
       - name: Run benchmarks
         uses: CodSpeedHQ/action@v1
         with:
           working-directory: "packages/benchmark"
-          run: pnpm run codspeed
+          run: NODE_ENV=production node --enable-source-maps ./codspeed/dist/index.bench.mjs
           token: ${{ secrets.CODSPEED_TOKEN }}

packages/benchmark/.gitignore

@@ -33,4 +33,5 @@ yarn-error.log*
 # vercel
 .vercel
 
-benchmark/lighthouse
+benchmark/lighthouse
+codspeed/dist

packages/benchmark/codspeed/index.bench.tsx

@@ -16,7 +16,6 @@ import { KanjiLetterComponentStyled } from "../letters/KanjiLetterComponent.styl
       renderToString(<KanjiLetterComponentYak />).length;
     })
     .on("cycle", function (event: Benchmark.Event) {
-      console.log(event);
       console.log(String(event.target));
     });
 

packages/benchmark/letters/KanjiLetterComponent.next-yak.compiled.tsx

@@ -2,7 +2,7 @@
 
 "use client";    
 import React, { type FunctionComponent } from 'react';
-import { styled as styledYak } from '../../../packages/next-yak/runtime/';
+import { styled as styledYak } from 'next-yak';
 
 const JapaneseCard = styledYak.div("yak-class-0");
 

packages/benchmark/letters/KanjiLetterComponent.styled-components.tsx

@@ -1,7 +1,7 @@
 
 "use client";    
 import React, { type FunctionComponent } from 'react';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 const JapaneseCard = styled.div`
     width: 100px;

packages/benchmark/letters/gen.js

@@ -20,7 +20,7 @@ function generateKanjiComponentFile() {
     const fileContent = `
 "use client";    
 import React, { type FunctionComponent } from 'react';
-import ${lib === "next-yak" ? `{ styled as ${styled} }` : styled} from '${lib}';
+import ${lib === "next-yak" ? `{ styled as ${styled} }` : `{ ${styled} }`} from '${lib}';
 
 const JapaneseCard = ${styled}.div\`
     width: 100px;
@@ -89,9 +89,6 @@ export const KanjiLetterComponent${
       const compiled = "// @ts-nocheck\n" + fileContent.replace(
         /`\n([^`]*)`/g,
         (_, content) => `("yak-class-${i++}")`
-      ).replace(
-        "import { styled as styledYak } from 'next-yak';",
-        "import { styled as styledYak } from '../../../packages/next-yak/runtime/';"
       );
       fs.writeFile(
         `${__dirname}/KanjiLetterComponent.${lib}.compiled.tsx`,

packages/benchmark/package.json

@@ -8,7 +8,9 @@
     "start": "next start",
     "generate:letters": "node ./letters/gen.js",
     "lighthouse": "node ./lighthouse.mjs",
-    "codspeed": "NODE_ENV=production tsx ./codspeed/index.bench.tsx"
+    "codspeed": "pnpm run codspeed:build && pnpm run codspeed:run",
+    "codspeed:build": "tsup ./codspeed/index.bench.tsx --sourcemap inline --format esm --target node20 --clean --outDir ./codspeed/dist --external benchmark --external react --external next-yak --external styled-components --external react-dom --external @codspeed/benchmark.js-plugin",
+    "codspeed:run": "NODE_ENV=production node ./codspeed/dist/index.bench.mjs"
   },
   "dependencies": {
     "next": "14.0.2",
@@ -25,6 +27,6 @@
     "tree-kill": "1.2.2",
     "@codspeed/benchmark.js-plugin": "2.2.0",
     "benchmark": "2.1.4",
-    "tsx": "4.1.1"
+    "tsup": "7.2.0"
   }
 }