Optimize turbo

.changeset/tired-berries-wonder.md

@@ -0,0 +1,6 @@
+---
+'@devup-ui/webpack-plugin': patch
+'@devup-ui/next-plugin': patch
+---
+
+Support Turbopack

.github/workflows/publish.yml

@@ -9,12 +9,43 @@ on:
       - main
 permissions: write-all
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: false
+
 jobs:
+  benchmark:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - uses: actions-rust-lang/setup-rust-toolchain@v1
+      - name: Cargo tarpaulin and fmt
+        run: |
+          cargo install cargo-tarpaulin
+          rustup component add rustfmt clippy
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          run_install: false
+
+      - uses: jetli/wasm-pack-action@v0.4.0
+        with:
+          version: 'latest'
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          registry-url: "https://registry.npmjs.org"
+          node-version: 22
+          cache: 'pnpm'
+      - run: pnpm i
+      - run: pnpm build
+      - name: Benchmark
+        run: pnpm benchmark
+
   publish:
     runs-on: ubuntu-latest
-    concurrency:
-      group: ${{ github.workflow }}-${{ github.ref }}
-      cancel-in-progress: false
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -54,8 +85,6 @@ jobs:
           cargo fmt
           pnpm test
           rm -rf .rustfmt.toml
-      - name: Benchmark
-        run: pnpm benchmark
       - name: Build Landing
         run: |
           pnpm -F components build-storybook

apps/landing/next.config.ts

@@ -2,15 +2,13 @@ import { DevupUI } from '@devup-ui/next-plugin'
 import createMDX from '@next/mdx'
 
 const withMDX = createMDX({
-  // options: {
-  //   remarkPlugins: [remarkGfm],
-  // },
   extension: /\.mdx?$/,
 })
 
 export default withMDX(
   DevupUI({
     pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
     output: 'export',
+    reactCompiler: true,
   }),
 )

apps/landing/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "node ./script.js && next dev",
     "search": "node ./script.js",
-    "build": "node ./script.js && next build --webpack",
+    "build": "node ./script.js && next build",
     "start": "npx serve ./out",
     "lint": "eslint"
   },
@@ -19,21 +19,22 @@
     "@next/mdx": "^16.0",
     "body-scroll-lock": "3.1",
     "clsx": "^2.1",
+    "lenis": "1.3",
     "next": "^16.0",
     "react": "^19.2",
     "react-dom": "^19.2",
     "react-markdown": "^10.1",
-    "react-syntax-highlighter": "^15.6",
-    "lenis": "1.3"
+    "react-syntax-highlighter": "^15.6"
   },
   "devDependencies": {
-    "@types/mdx": "^2.0",
     "@devup-ui/next-plugin": "workspace:*",
     "@types/body-scroll-lock": "^3.1",
+    "@types/mdx": "^2.0",
     "@types/node": "^24",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@types/react-syntax-highlighter": "^15.5",
+    "babel-plugin-react-compiler": "^1.0",
     "typescript": "^5"
   }
 }

apps/landing/src/app/(detail)/docs/RightIndex.tsx

@@ -72,8 +72,12 @@ export function RightIndex() {
             Contents
           </Text>
         </Flex>
-        {menus.map((menu) => (
-          <IndexMenu key={menu.text} onClick={menu.onClick} sub={menu.sub}>
+        {menus.map((menu, idx) => (
+          <IndexMenu
+            key={menu.text + idx}
+            onClick={menu.onClick}
+            sub={menu.sub}
+          >
             {menu.text}
           </IndexMenu>
         ))}

apps/landing/src/app/layout.tsx

@@ -27,6 +27,9 @@ export const metadata: Metadata = {
 resetCss()
 
 globalCss({
+  pre: {
+    borderRadius: '10px',
+  },
   fontFaces: [
     {
       fontFamily: 'Pretendard',
@@ -85,9 +88,6 @@ globalCss({
     lineHeight: '1.5',
     letterSpacing: '-0.03em',
   },
-  pre: {
-    borderRadius: '10px',
-  },
 })
 
 export default function RootLayout({

benchmark.js

@@ -59,6 +59,22 @@ function clearBuildFile() {
       recursive: true,
       force: true,
     })
+  if (existsSync('./benchmark/next-tailwind-turbo/.next'))
+    rmSync('./benchmark/next-tailwind-turbo/.next', {
+      recursive: true,
+      force: true,
+    })
+
+  if (existsSync('./benchmark/next-devup-ui-single-turbo/.next'))
+    rmSync('./benchmark/next-devup-ui-single-turbo/.next', {
+      recursive: true,
+      force: true,
+    })
+  if (existsSync('./benchmark/next-devup-ui-single-turbo/df'))
+    rmSync('./benchmark/next-devup-ui-single-turbo/df', {
+      recursive: true,
+      force: true,
+    })
 }
 
 function checkDirSize(path) {
@@ -106,5 +122,7 @@ result.push(benchmark('chakra-ui'))
 result.push(benchmark('mui'))
 result.push(benchmark('devup-ui'))
 result.push(benchmark('devup-ui-single'))
+result.push(benchmark('tailwind-turbo'))
+result.push(benchmark('devup-ui-single-turbo'))
 
 console.info(result.join('\n'))

benchmark/next-chakra-ui/tsconfig.json

@@ -11,7 +11,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -27,7 +27,8 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
-    "df/*.d.ts"
+    "df/*.d.ts",
+    ".next/dev/types/**/*.ts"
   ],
   "exclude": ["node_modules"]
 }

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

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

benchmark/next-devup-ui-single-turbo/README.md

@@ -0,0 +1 @@
+## Nextjs App

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

@@ -0,0 +1,7 @@
+import { DevupUI } from '@devup-ui/next-plugin'
+
+const nextConfig = {
+  /* config options here */
+}
+
+export default DevupUI(nextConfig, { singleCss: true })

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

@@ -0,0 +1,25 @@
+{
+  "name": "next-devup-ui-single-turbo-benchmark",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build --experimental-debug-memory-usage",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "react": "^19.2",
+    "react-dom": "^19.2",
+    "next": "^16.0",
+    "@devup-ui/react": "workspace:*"
+  },
+  "devDependencies": {
+    "@devup-ui/next-plugin": "workspace:*",
+    "typescript": "^5",
+    "@types/node": "^24",
+    "@types/react": "^19",
+    "@types/react-dom": "^19"
+  }
+}

benchmark/next-devup-ui-single-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-single-turbo/src/app/page.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { Box, Text } from '@devup-ui/react'
+import { useState } from 'react'
+
+export default function HomePage() {
+  const [color, setColor] = useState('yellow')
+  const [enabled, setEnabled] = useState(false)
+
+  return (
+    <div>
+      <p
+        style={{
+          backgroundColor: 'blue',
+        }}
+      >
+        Track & field champions:
+      </p>
+      <Box
+        _hover={{
+          bg: 'yellow',
+          cursor: 'cell',
+        }}
+        as="section"
+        bg="$text"
+        color={color}
+        cursor="pointer"
+        data-testid="box"
+        fontSize={32}
+        position="relative"
+        py="28px"
+      >
+        <Box>hello</Box>
+        <Box>hello</Box>
+      </Box>
+      <Text color="$text">text</Text>
+      <Box color={enabled ? 'green' : 'blue'} fontSize={32} pr="20px">
+        hello
+      </Box>
+      <Box fontSize={[12, 32]}>hello</Box>
+      <button
+        onClick={() => {
+          setColor('blue')
+          setEnabled((prev) => !prev)
+        }}
+      >
+        Change
+      </button>
+    </div>
+  )
+}

benchmark/next-devup-ui-single-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"]
+}