Merge pull request #454 from dev-five-git/optimize-turbo

Optimize turbo

Author: owjs3901

.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