Implement turbopack dev

Author: owjs3901

packages/next-plugin/package.json

@@ -34,14 +34,6 @@
     ".": {
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
-    },
-    "./loader": {
-      "import": "./dist/turbo/loader.js",
-      "require": "./dist/turbo/loader.cjs"
-    },
-    "./css-loader": {
-      "import": "./dist/turbo/css-loader.js",
-      "require": "./dist/turbo/css-loader.cjs"
     }
   },
   "files": [

packages/next-plugin/src/plugin.ts

@@ -1,4 +1,4 @@
-import { existsSync, mkdirSync, writeFileSync } from 'node:fs'
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs'
 import { join, relative, resolve } from 'node:path'
 
 import {
@@ -24,6 +24,7 @@ export function DevupUI(
 ): NextConfig {
   const isTurbo =
     process.env.TURBOPACK === '1' || process.env.TURBOPACK === 'auto'
+  // turbopack is now stable, TURBOPACK is set to auto without any flags
   if (isTurbo) {
     config ??= {}
     config.turbopack ??= {}
@@ -33,27 +34,40 @@ export function DevupUI(
       distDir = 'df',
       cssDir = resolve(distDir, 'devup-ui'),
       singleCss = false,
+      devupFile = 'devup.json',
     } = options
 
     const sheetFile = join(distDir, 'sheet.json')
     const classMapFile = join(distDir, 'classMap.json')
     const fileMapFile = join(distDir, 'fileMap.json')
     const gitignoreFile = join(distDir, '.gitignore')
-    if (!existsSync(distDir)) mkdirSync(distDir)
-    if (!existsSync(cssDir)) mkdirSync(cssDir)
+    if (!existsSync(distDir))
+      mkdirSync(distDir, {
+        recursive: true,
+      })
+    if (!existsSync(cssDir))
+      mkdirSync(cssDir, {
+        recursive: true,
+      })
     if (!existsSync(gitignoreFile)) writeFileSync(gitignoreFile, '*')
+    // disable turbo parallel
+    process.env.TURBOPACK_LOADER_CPU = '1'
+
+    // will be removed after merge
+    // https://github.com/vercel/next.js/pull/85268
+    process.env.TURBOPACK_DEBUG_JS = 'webpack_loader'
+    process.env.NODE_OPTIONS ??= ''
+    process.env.NODE_OPTIONS += ' --inspect-brk'
+
     const rules: NonNullable<typeof config.turbopack.rules> = {
       [`./${relative(process.cwd(), cssDir).replaceAll('\\', '/')}/*.css`]: [
         {
-          loader: '@devup-ui/next-plugin/css-loader',
-          options: {
-            watch: process.env.NODE_ENV === 'development',
-          },
+          loader: '@devup-ui/webpack-plugin/css-loader',
         },
       ],
       '*.{tsx,ts,js,mjs}': [
         {
-          loader: '@devup-ui/next-plugin/loader',
+          loader: '@devup-ui/webpack-plugin/loader',
           options: {
             package: libPackage,
             cssDir,
@@ -62,6 +76,10 @@ export function DevupUI(
             fileMapFile,
             watch: process.env.NODE_ENV === 'development',
             singleCss,
+            // for turbopack, load theme is required on loader
+            theme: existsSync(devupFile)
+              ? JSON.parse(readFileSync(devupFile, 'utf-8'))?.['theme']
+              : undefined,
           },
         },
       ],

packages/next-plugin/src/turbo/css-loader.ts

@@ -56,8 +56,6 @@ export default defineConfig({
       formats: ['es', 'cjs'],
       entry: {
         index: 'src/index.ts',
-        ['turbo/loader']: 'src/turbo/loader.ts',
-        ['turbo/css-loader']: 'src/turbo/css-loader.ts',
       },
     },
     outDir: 'dist',

packages/next-plugin/src/turbo/loader.ts

@@ -6,12 +6,8 @@ function getFileNumByFilename(filename: string) {
   return parseInt(filename.split('devup-ui-')[1].split('.')[0])
 }
 
-const devupUICssLoader: RawLoaderDefinitionFunction<{
-  watch: boolean
-}> = function (_, map, meta) {
-  const { watch } = this.getOptions()
+const devupUICssLoader: RawLoaderDefinitionFunction = function (_, map, meta) {
   const fileNum = getFileNumByFilename(this.resourcePath)
-  if (!watch) return this.callback(null, getCss(fileNum, true))
   this.callback(null, getCss(fileNum, true), map, meta)
 }
 export default devupUICssLoader

packages/next-plugin/vite.config.ts

@@ -7,6 +7,7 @@ import {
   exportFileMap,
   exportSheet,
   getCss,
+  registerTheme,
 } from '@devup-ui/wasm'
 import type { RawLoaderDefinitionFunction } from 'webpack'
 
@@ -18,7 +19,9 @@ export interface DevupUILoaderOptions {
   fileMapFile: string
   watch: boolean
   singleCss: boolean
+  theme?: object
 }
+let init = false
 
 const devupUILoader: RawLoaderDefinitionFunction<DevupUILoaderOptions> =
   function (source) {
@@ -30,9 +33,14 @@ const devupUILoader: RawLoaderDefinitionFunction<DevupUILoaderOptions> =
       classMapFile,
       fileMapFile,
       singleCss,
+      theme,
     } = this.getOptions()
     const callback = this.async()
     const id = this.resourcePath
+    if (theme && !init) {
+      init = true
+      registerTheme(theme)
+    }
 
     try {
       let rel = relative(dirname(this.resourcePath), cssDir).replaceAll(