perf(benchmark): add a large-app fixture for webpack and Turbopack

benchmark-manifest.json

@@ -18,7 +18,11 @@
     { "name": "vanilla-extract-devup-ui", "group": "turbopack", "gate": true },
     { "name": "tailwind-turbo-devup-ui", "group": "turbopack", "gate": true },
     { "name": "vinext-devup-ui", "group": "vite", "gate": true },
-    { "name": "devup-ui-collapse", "group": "turbopack", "gate": true }
+    { "name": "devup-ui-collapse", "group": "turbopack", "gate": true },
+    { "name": "devup-ui-large", "group": "webpack" },
+    { "name": "devup-ui-large-wasm", "group": "webpack" },
+    { "name": "devup-ui-large-turbo", "group": "turbopack" },
+    { "name": "devup-ui-large-turbo-wasm", "group": "turbopack" }
   ],
   "controls": {
     "webpack": "tailwind",

benchmark/large-app.mjs

@@ -0,0 +1,112 @@
+// Writes the generated source of the large-app benchmark fixtures.
+//
+// The other fixtures are one page, which hides what grows with an app: import
+// resolution, barrels, constants read across modules, and the work done once per
+// module. This app has ROUTES pages, each rendering COMPONENTS_PER_ROUTE of the
+// COMPONENTS components through one barrel, all reading shared tokens.
+//
+//   node ../large-app.mjs   (from a fixture directory; files already up to date are left alone)
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs'
+import { dirname, join } from 'node:path'
+
+const ROUTES = 30
+const COMPONENTS = 300
+const COMPONENTS_PER_ROUTE = 10
+const TONES = 20
+
+const pad = (value, width) => String(value).padStart(width, '0')
+const component = (index) => `C${pad(index, 3)}`
+
+function write(path, content) {
+  const target = join(process.cwd(), 'src', path)
+  if (existsSync(target) && readFileSync(target, 'utf8') === content) return
+  mkdirSync(dirname(target), { recursive: true })
+  writeFileSync(target, content)
+}
+
+const tones = Array.from(
+  { length: TONES },
+  (_, index) =>
+    `  t${index}: '#${pad(((index * 0x0b3d17) % 0xffffff).toString(16), 6)}',`,
+)
+write(
+  'tokens.ts',
+  `export const tones = {\n${tones.join('\n')}\n} as const\n\nexport const space = { s: 4, m: 8, l: 16 } as const\n`,
+)
+
+for (let index = 0; index < COMPONENTS; index++) {
+  const name = component(index)
+  write(
+    `components/${name}.tsx`,
+    `import { Box, css, Flex, styled, Text } from '@devup-ui/react'
+
+import { space, tones } from '../tokens'
+
+const Frame = styled('section', {
+  borderRadius: ${4 + (index % 8)},
+  p: space.m,
+})
+
+export function ${name}({ active }: { active?: boolean }) {
+  return (
+    <Frame>
+      <Flex className={css({ gap: ${2 + (index % 12)} })} flexDir={['column', 'row']}>
+        <Box
+          _hover={{ opacity: ${((index % 9) + 1) / 10} }}
+          bg={tones.t${index % TONES}}
+          color={active ? '$text' : 'gray'}
+          p={space.${['s', 'm', 'l'][index % 3]}}
+        >
+          <Text fontSize={[12, ${12 + (index % 10)}]}>item ${index}</Text>
+        </Box>
+      </Flex>
+    </Frame>
+  )
+}
+`,
+  )
+}
+
+write(
+  'components/index.ts',
+  Array.from(
+    { length: COMPONENTS },
+    (_, index) => `export { ${component(index)} } from './${component(index)}'`,
+  ).join('\n') + '\n',
+)
+
+const routes = []
+for (let route = 0; route < ROUTES; route++) {
+  const names = Array.from({ length: COMPONENTS_PER_ROUTE }, (_, offset) =>
+    component((route * COMPONENTS_PER_ROUTE + offset) % COMPONENTS),
+  )
+  const path = `r${pad(route, 2)}`
+  routes.push(path)
+  write(
+    `app/${path}/page.tsx`,
+    `import { ${names.join(', ')} } from '@/components'
+
+export default function Page() {
+  return (
+    <main>
+${names.map((name, offset) => `      <${name} active={${offset % 2 === 0}} />`).join('\n')}
+    </main>
+  )
+}
+`,
+  )
+}
+
+write(
+  'app/page.tsx',
+  `import { Box } from '@devup-ui/react'
+
+export default function Page() {
+  return (
+    <Box as="nav" p={4}>
+${routes.map((path) => `      <a href="/${path}">${path}</a>`).join('\n')}
+    </Box>
+  )
+}
+`,
+)

benchmark/next-devup-ui-large-turbo-wasm/.gitignore

@@ -0,0 +1,11 @@
+/node_modules
+/.next/
+/df/
+*.tsbuildinfo
+next-env.d.ts
+
+# written by ../large-app.mjs
+/src/app/page.tsx
+/src/app/r*/
+/src/components/
+/src/tokens.ts

benchmark/next-devup-ui-large-turbo-wasm/next.config.ts

@@ -0,0 +1,5 @@
+import { DevupUI } from '@devup-ui/next-plugin'
+
+const nextConfig = { experimental: { useTypeScriptCli: true } }
+
+export default DevupUI(nextConfig, { engine: 'wasm' })

benchmark/next-devup-ui-large-turbo-wasm/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "next-devup-ui-large-turbo-wasm-benchmark",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "node ../large-app.mjs && next build"
+  },
+  "dependencies": {
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "next": "^16.4.6",
+    "@devup-ui/react": "workspace:^"
+  },
+  "devDependencies": {
+    "@devup-ui/next-plugin": "workspace:^",
+    "typescript": "^7.0.2",
+    "@types/node": "^26.6.6",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0"
+  }
+}

benchmark/next-devup-ui-large-turbo-wasm/src/app/layout.tsx

@@ -0,0 +1,18 @@
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}

benchmark/next-devup-ui-large-turbo-wasm/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "df/*.d.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}

benchmark/next-devup-ui-large-turbo/.gitignore

@@ -0,0 +1,11 @@
+/node_modules
+/.next/
+/df/
+*.tsbuildinfo
+next-env.d.ts
+
+# written by ../large-app.mjs
+/src/app/page.tsx
+/src/app/r*/
+/src/components/
+/src/tokens.ts

benchmark/next-devup-ui-large-turbo/next.config.ts

@@ -0,0 +1,5 @@
+import { DevupUI } from '@devup-ui/next-plugin'
+
+const nextConfig = { experimental: { useTypeScriptCli: true } }
+
+export default DevupUI(nextConfig, {})

benchmark/next-devup-ui-large-turbo/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "next-devup-ui-large-turbo-benchmark",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "node ../large-app.mjs && next build"
+  },
+  "dependencies": {
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "next": "^16.4.6",
+    "@devup-ui/react": "workspace:^"
+  },
+  "devDependencies": {
+    "@devup-ui/next-plugin": "workspace:^",
+    "typescript": "^7.0.2",
+    "@types/node": "^26.6.6",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0"
+  }
+}

benchmark/next-devup-ui-large-turbo/src/app/layout.tsx

@@ -0,0 +1,18 @@
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}

benchmark/next-devup-ui-large-turbo/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "df/*.d.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}

benchmark/next-devup-ui-large-wasm/.gitignore

@@ -0,0 +1,11 @@
+/node_modules
+/.next/
+/df/
+*.tsbuildinfo
+next-env.d.ts
+
+# written by ../large-app.mjs
+/src/app/page.tsx
+/src/app/r*/
+/src/components/
+/src/tokens.ts

benchmark/next-devup-ui-large-wasm/next.config.ts

@@ -0,0 +1,5 @@
+import { DevupUI } from '@devup-ui/next-plugin'
+
+const nextConfig = { experimental: { useTypeScriptCli: true } }
+
+export default DevupUI(nextConfig, { engine: 'wasm' })

benchmark/next-devup-ui-large-wasm/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "next-devup-ui-large-wasm-benchmark",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "node ../large-app.mjs && next build --webpack"
+  },
+  "dependencies": {
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "next": "^16.4.6",
+    "@devup-ui/react": "workspace:^"
+  },
+  "devDependencies": {
+    "@devup-ui/next-plugin": "workspace:^",
+    "typescript": "^7.0.2",
+    "@types/node": "^26.6.6",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0"
+  }
+}

benchmark/next-devup-ui-large-wasm/src/app/layout.tsx

@@ -0,0 +1,18 @@
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}