diff --git a/.github/workflows/codspeed.yml b/.github/workflows/codspeed.yml index 366cb19e..7b2f2534 100644 --- a/.github/workflows/codspeed.yml +++ b/.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 }} \ No newline at end of file diff --git a/packages/benchmark/.gitignore b/packages/benchmark/.gitignore index 27841a10..d3ff5d11 100644 --- a/packages/benchmark/.gitignore +++ b/packages/benchmark/.gitignore @@ -33,4 +33,5 @@ yarn-error.log* # vercel .vercel -benchmark/lighthouse \ No newline at end of file +benchmark/lighthouse +codspeed/dist \ No newline at end of file diff --git a/packages/benchmark/codspeed/index.bench.tsx b/packages/benchmark/codspeed/index.bench.tsx index 1448e48f..ab38b3ad 100644 --- a/packages/benchmark/codspeed/index.bench.tsx +++ b/packages/benchmark/codspeed/index.bench.tsx @@ -16,7 +16,6 @@ import { KanjiLetterComponentStyled } from "../letters/KanjiLetterComponent.styl renderToString().length; }) .on("cycle", function (event: Benchmark.Event) { - console.log(event); console.log(String(event.target)); }); diff --git a/packages/benchmark/letters/KanjiLetterComponent.next-yak.compiled.tsx b/packages/benchmark/letters/KanjiLetterComponent.next-yak.compiled.tsx index 174998c9..9889781d 100644 --- a/packages/benchmark/letters/KanjiLetterComponent.next-yak.compiled.tsx +++ b/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"); diff --git a/packages/benchmark/letters/KanjiLetterComponent.styled-components.tsx b/packages/benchmark/letters/KanjiLetterComponent.styled-components.tsx index 056c560b..984fed10 100644 --- a/packages/benchmark/letters/KanjiLetterComponent.styled-components.tsx +++ b/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; diff --git a/packages/benchmark/letters/gen.js b/packages/benchmark/letters/gen.js index 32c94cd8..3669dc94 100644 --- a/packages/benchmark/letters/gen.js +++ b/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`, diff --git a/packages/benchmark/package.json b/packages/benchmark/package.json index f39a27c0..e575608d 100644 --- a/packages/benchmark/package.json +++ b/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" } } \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a61eaa15..7c7e838c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -48,9 +48,9 @@ importers: tree-kill: specifier: 1.2.2 version: 1.2.2 - tsx: - specifier: 4.1.1 - version: 4.1.1 + tsup: + specifier: 7.2.0 + version: 7.2.0(typescript@5.2.2) typescript: specifier: 5.2.2 version: 5.2.2 @@ -2330,12 +2330,6 @@ packages: engines: {node: '>=10'} dev: true - /get-tsconfig@4.7.2: - resolution: {integrity: sha512-wuMsz4leaj5hbGgg4IvDU0bqJagpftG5l5cXIAvo8uZrqn0NJqwtfupTN00VnkQJPcIRrxYrm1Ue24btpCha2A==} - dependencies: - resolve-pkg-maps: 1.0.0 - dev: true - /glob-parent@5.1.2: resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==} engines: {node: '>= 6'} @@ -3946,10 +3940,6 @@ packages: engines: {node: '>=8'} dev: true - /resolve-pkg-maps@1.0.0: - resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==} - dev: true - /resolve.exports@2.0.2: resolution: {integrity: sha512-X2UW6Nw3n/aMgDVy+0rSqgHlv39WZAlZrXCdnbyEiKm17DSqHX4MmQMaST3FbeWR5FTuRcUwYAziZajji0Y7mg==} engines: {node: '>=10'} @@ -4076,13 +4066,6 @@ packages: source-map: 0.6.1 dev: true - /source-map-support@0.5.21: - resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==} - dependencies: - buffer-from: 1.1.2 - source-map: 0.6.1 - dev: true - /source-map@0.6.1: resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==} engines: {node: '>=0.10.0'} @@ -4399,16 +4382,40 @@ packages: - ts-node dev: true - /tsx@4.1.1: - resolution: {integrity: sha512-zyPn5BFMB0TB5kMLbYPNx4x/oL/oSlaecdKCv6WeJ0TeSEfx8RTJWjuB5TZ2dSewktgfBsBO/HNA9mrMWqLXMA==} - engines: {node: '>=18.0.0'} + /tsup@7.2.0(typescript@5.2.2): + resolution: {integrity: sha512-vDHlczXbgUvY3rWvqFEbSqmC1L7woozbzngMqTtL2PGBODTtWlRwGDDawhvWzr5c1QjKe4OAKqJGfE1xeXUvtQ==} + engines: {node: '>=16.14'} hasBin: true + peerDependencies: + '@swc/core': ^1 + postcss: ^8.4.12 + typescript: '>=4.1.0' + peerDependenciesMeta: + '@swc/core': + optional: true + postcss: + optional: true + typescript: + optional: true dependencies: + bundle-require: 4.0.2(esbuild@0.18.20) + cac: 6.7.14 + chokidar: 3.5.3 + debug: 4.3.4 esbuild: 0.18.20 - get-tsconfig: 4.7.2 - source-map-support: 0.5.21 - optionalDependencies: - fsevents: 2.3.3 + execa: 5.1.1 + globby: 11.1.0 + joycon: 3.1.1 + postcss-load-config: 4.0.1(postcss@8.4.31) + resolve-from: 5.0.0 + rollup: 3.29.3 + source-map: 0.8.0-beta.0 + sucrase: 3.34.0 + tree-kill: 1.2.2 + typescript: 5.2.2 + transitivePeerDependencies: + - supports-color + - ts-node dev: true /type-detect@4.0.8: