Skip to content

Commit 844d115

Browse files
jantimonjantimon
authored
more codspeed benchmarks (#378)
1 parent f22dbfa commit 844d115

File tree

9 files changed

+805
-1
lines changed

9 files changed

+805
-1
lines changed

‎.changeset/ripe-jobs-punch.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
---
2+
---

‎packages/benchmarks/codspeed/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Generated benchmark files
2+
generated/

‎packages/benchmarks/codspeed/attrs-components/gen.ts‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
import * as swc from "@swc/core";
2+
import { writeFile } from "fs";
3+
import { dirname } from "path";
4+
import { fileURLToPath } from "url";
5+
import { createRequire } from "module";
6+
import { mkdirSync } from "fs";
7+
8+
const __dirname = dirname(fileURLToPath(import.meta.url));
9+
const require = createRequire(import.meta.url);
10+
11+
// Function to generate 1000 .attrs styled components
12+
async function generateAttrsComponentsFile() {
13+
const componentCount = 1000;
14+
15+
const libs = {
16+
"next-yak": "styledYak",
17+
"styled-components": "styled",
18+
};
19+
20+
for (const lib in libs) {
21+
const styled = libs[lib];
22+
23+
const fileContent = `
24+
"use client";
25+
import React, { type FunctionComponent } from 'react';
26+
import ${
27+
lib === "next-yak" ? `{ styled as ${styled} }` : `{ ${styled} }`
28+
} from '${lib}';
29+
30+
${Array.from({ length: componentCount }, (_, index) => {
31+
const colorValue = `#${(index + 1).toString(16).padStart(6, '0')}`;
32+
const className = `attrs-component-${index + 1}`;
33+
return `const AttrsComponent${index + 1} = ${styled}.div.attrs({
34+
className: '${className}',
35+
'data-testid': 'attrs-${index + 1}',
36+
role: 'button',
37+
tabIndex: 0,
38+
})\`
39+
color: ${colorValue};
40+
background-color: ${colorValue}22;
41+
padding: 6px 12px;
42+
margin: 3px;
43+
border-radius: 6px;
44+
font-size: 14px;
45+
display: inline-block;
46+
cursor: pointer;
47+
border: 1px solid ${colorValue};
48+
transition: all 0.2s ease;
49+
50+
&:hover {
51+
background-color: ${colorValue}44;
52+
}
53+
54+
&:focus {
55+
outline: 2px solid ${colorValue};
56+
outline-offset: 2px;
57+
}
58+
\`;`;
59+
}).join('\n\n')}
60+
61+
export const AttrsComponents${
62+
lib === "next-yak" ? "Yak" : "Styled"
63+
}: FunctionComponent = () => {
64+
return (
65+
<div>
66+
${Array.from({ length: componentCount }, (_, index) =>
67+
`<AttrsComponent${index + 1}>Attrs ${index + 1}</AttrsComponent${index + 1}>`
68+
).join('\n ')}
69+
</div>
70+
);
71+
};
72+
`;
73+
74+
mkdirSync(`${__dirname}/../generated`, { recursive: true });
75+
writeFile(
76+
`${__dirname}/../generated/AttrsComponents.${lib}.tsx`,
77+
fileContent,
78+
(err) => {
79+
if (err) throw err;
80+
console.log(
81+
`AttrsComponents.${lib}.tsx has been created successfully.`,
82+
);
83+
},
84+
);
85+
86+
// Precompile yak similar to how it would be compiled by our loader
87+
if (lib === "next-yak") {
88+
const compiled =
89+
"// @ts-nocheck\n" +
90+
swc
91+
.transformSync(fileContent, {
92+
filename: "/foo/index.tsx",
93+
jsc: {
94+
experimental: {
95+
plugins: [[require.resolve("yak-swc"), { basePath: "/foo/" }]],
96+
},
97+
target: "es2022",
98+
loose: false,
99+
minify: {
100+
compress: false,
101+
mangle: false,
102+
},
103+
preserveAllComments: true,
104+
},
105+
minify: false,
106+
isModule: true,
107+
})
108+
.code // Remove __styleYak import
109+
.replace(/import[^;\n]+yak.module.css";/, "")
110+
// Replace __styleYak usage to a string
111+
.replace(/__styleYak.(\w+)/g, `"$1"`);
112+
mkdirSync(`${__dirname}/../generated`, { recursive: true });
113+
writeFile(
114+
`${__dirname}/../generated/AttrsComponents.${lib}.compiled.tsx`,
115+
compiled,
116+
(err) => {
117+
if (err) throw err;
118+
console.log(
119+
`AttrsComponents.${lib}.compiled.tsx has been created successfully.`,
120+
);
121+
},
122+
);
123+
}
124+
}
125+
}
126+
127+
generateAttrsComponentsFile();

‎packages/benchmarks/codspeed/css-prop/gen.ts‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import * as swc from "@swc/core";
2+
import { writeFile } from "fs";
3+
import { dirname } from "path";
4+
import { fileURLToPath } from "url";
5+
import { createRequire } from "module";
6+
import { mkdirSync } from "fs";
7+
8+
const __dirname = dirname(fileURLToPath(import.meta.url));
9+
const require = createRequire(import.meta.url);
10+
11+
// Function to generate 1000 css prop components
12+
async function generateCssPropComponentsFile() {
13+
const componentCount = 1000;
14+
15+
const libs = {
16+
"next-yak": "next-yak",
17+
"styled-components": "styled-components",
18+
};
19+
20+
for (const lib in libs) {
21+
const fileContent = `
22+
"use client";
23+
import React, { type FunctionComponent } from 'react';
24+
import { css } from '${lib}';
25+
26+
export const CssPropComponents${
27+
lib === "next-yak" ? "Yak" : "Styled"
28+
}: FunctionComponent = () => {
29+
return (
30+
<div>
31+
${Array.from({ length: componentCount }, (_, index) =>
32+
{
33+
const colorValue = `#${((index * 123456) % 16777215).toString(16).padStart(6, '0')}`;
34+
return `<div css={ css\`
35+
color: ${colorValue};
36+
background-color: ${colorValue}33;
37+
padding: 8px 16px;
38+
margin: 4px;
39+
border-radius: 8px;
40+
font-size: 16px;
41+
display: inline-block;
42+
border: 2px solid ${colorValue};
43+
box-shadow: 0 2px 4px ${colorValue}44;
44+
transition: transform 0.2s ease;
45+
46+
&:hover {
47+
transform: translateY(-2px);
48+
box-shadow: 0 4px 8px ${colorValue}66;
49+
}
50+
51+
&:active {
52+
transform: translateY(0);
53+
}
54+
\`}>CSS ${index + 1}</div>`;
55+
}
56+
).join('\n ')}
57+
</div>
58+
);
59+
};
60+
`;
61+
62+
mkdirSync(`${__dirname}/../generated`, { recursive: true });
63+
writeFile(
64+
`${__dirname}/../generated/CssPropComponents.${lib}.tsx`,
65+
fileContent,
66+
(err) => {
67+
if (err) throw err;
68+
console.log(
69+
`CssPropComponents.${lib}.tsx has been created successfully.`,
70+
);
71+
},
72+
);
73+
74+
// Precompile yak similar to how it would be compiled by our loader
75+
if (lib === "next-yak") {
76+
const compiled =
77+
"// @ts-nocheck\n" +
78+
swc
79+
.transformSync(fileContent, {
80+
filename: "/foo/index.tsx",
81+
jsc: {
82+
experimental: {
83+
plugins: [[require.resolve("yak-swc"), { basePath: "/foo/" }]],
84+
},
85+
target: "es2022",
86+
loose: false,
87+
minify: {
88+
compress: false,
89+
mangle: false,
90+
},
91+
preserveAllComments: true,
92+
},
93+
minify: false,
94+
isModule: true,
95+
})
96+
.code // Remove __styleYak import
97+
.replace(/import[^;\n]+yak.module.css";/, "")
98+
// Replace __styleYak usage to a string
99+
.replace(/__styleYak.(\w+)/g, `"$1"`);
100+
mkdirSync(`${__dirname}/../generated`, { recursive: true });
101+
writeFile(
102+
`${__dirname}/../generated/CssPropComponents.${lib}.compiled.tsx`,
103+
compiled,
104+
(err) => {
105+
if (err) throw err;
106+
console.log(
107+
`CssPropComponents.${lib}.compiled.tsx has been created successfully.`,
108+
);
109+
},
110+
);
111+
}
112+
}
113+
}
114+
115+
generateCssPropComponentsFile();

0 commit comments

Comments
 (0)