Support next build cache

Author: owjs3901

.changeset/fine-rabbits-think.md

@@ -0,0 +1,6 @@
+---
+"@devup-ui/webpack-plugin": patch
+"@devup-ui/next-plugin": patch
+---
+
+Support next build cache

packages/next-plugin/src/__tests__/plugin.test.ts

@@ -13,9 +13,11 @@ describe('plugin', () => {
     it('should apply webpack plugin', async () => {
       const ret = DevupUI({})
 
-      ret.webpack!({ plugins: [] }, {} as any)
+      ret.webpack!({ plugins: [] }, { buildId: 'tmpBuildId' } as any)
 
-      expect(DevupUIWebpackPlugin).toHaveBeenCalledWith({})
+      expect(DevupUIWebpackPlugin).toHaveBeenCalledWith({
+        cssFile: resolve('.next/cache', 'devup-ui_tmpBuildId.css'),
+      })
     })
 
     it('should apply webpack plugin with config', async () => {
@@ -26,10 +28,11 @@ describe('plugin', () => {
         },
       )
 
-      ret.webpack!({ plugins: [] }, {} as any)
+      ret.webpack!({ plugins: [] }, { buildId: 'tmpBuildId' } as any)
 
       expect(DevupUIWebpackPlugin).toHaveBeenCalledWith({
         package: 'new-package',
+        cssFile: resolve('.next/cache', 'devup-ui_tmpBuildId.css'),
       })
     })
 
@@ -44,10 +47,11 @@ describe('plugin', () => {
         },
       )
 
-      ret.webpack!({ plugins: [] }, {} as any)
+      ret.webpack!({ plugins: [] }, { buildId: 'tmpBuildId' } as any)
 
       expect(DevupUIWebpackPlugin).toHaveBeenCalledWith({
         package: 'new-package',
+        cssFile: resolve('.next/cache', 'devup-ui_tmpBuildId.css'),
       })
       expect(webpack).toHaveBeenCalled()
     })

packages/next-plugin/src/plugin.ts

@@ -65,6 +65,10 @@ export function DevupUI(
 
   const { webpack } = config
   config.webpack = (config, _options) => {
+    options.cssFile ??= resolve(
+      options.interfacePath ?? '.next/cache',
+      `devup-ui_${_options.buildId}.css`,
+    )
     config.plugins.push(
       new DevupUIWebpackPlugin({
         ...options,

packages/webpack-plugin/src/__tests__/plugin.test.ts

@@ -103,6 +103,8 @@ describe('devupUIPlugin', () => {
       const plugin = new DevupUIWebpackPlugin({
         devupPath: 'custom-devup.json',
       })
+
+      vi.mocked(getCss).mockReturnValue('css')
       const compiler = {
         options: {
           module: {
@@ -114,6 +116,9 @@ describe('devupUIPlugin', () => {
           afterCompile: {
             tap: vi.fn(),
           },
+          done: {
+            tap: vi.fn(),
+          },
           watchRun: {
             tapAsync: vi.fn(),
           },
@@ -131,6 +136,23 @@ describe('devupUIPlugin', () => {
         },
       })
       expect(add).toHaveBeenCalledWith(resolve('custom-devup.json'))
+      expect(compiler.hooks.done.tap).toHaveBeenCalled()
+
+      vi.mocked(compiler.hooks.done.tap).mock.calls[0][1]({
+        hasErrors: () => true,
+      })
+      expect(writeFileSync).not.toHaveBeenCalled()
+
+      vi.mocked(compiler.hooks.done.tap).mock.calls[0][1]({
+        hasErrors: () => false,
+      })
+      expect(writeFileSync).toHaveBeenCalledWith(
+        resolve('.df', 'devup-ui.css'),
+        'css',
+        {
+          encoding: 'utf-8',
+        },
+      )
     })
 
     it('should skip writing css file', () => {
@@ -155,6 +177,9 @@ describe('devupUIPlugin', () => {
           afterCompile: {
             tap: vi.fn(),
           },
+          done: {
+            tap: vi.fn(),
+          },
           watchRun: {
             tapAsync: vi.fn(),
           },
@@ -191,6 +216,9 @@ describe('devupUIPlugin', () => {
           afterCompile: {
             tap: vi.fn(),
           },
+          done: {
+            tap: vi.fn(),
+          },
           watchRun: {
             tapAsync: vi.fn(),
           },
@@ -208,6 +236,7 @@ describe('devupUIPlugin', () => {
           encoding: 'utf-8',
         },
       )
+      expect(compiler.hooks.done.tap).not.toHaveBeenCalled()
     })
     it('should register devup watch', () => {
       const plugin = new DevupUIWebpackPlugin({
@@ -224,6 +253,9 @@ describe('devupUIPlugin', () => {
           afterCompile: {
             tap: vi.fn(),
           },
+          done: {
+            tap: vi.fn(),
+          },
           watchRun: {
             tapAsync: vi.fn(),
           },
@@ -310,6 +342,9 @@ describe('devupUIPlugin', () => {
         afterCompile: {
           tap: vi.fn(),
         },
+        done: {
+          tap: vi.fn(),
+        },
         watchRun: {
           tapAsync: vi.fn(),
         },

packages/webpack-plugin/src/plugin.ts

@@ -9,6 +9,7 @@ import { createRequire } from 'node:module'
 import { join, resolve } from 'node:path'
 
 import {
+  getCss,
   getDefaultTheme,
   getThemeInterface,
   importClassMap,
@@ -138,6 +139,14 @@ export class DevupUIWebpackPlugin {
         'process.env.DEVUP_UI_DEFAULT_THEME': JSON.stringify(getDefaultTheme()),
       }),
     )
+    if (!this.options.watch) {
+      compiler.hooks.done.tap('DevupUIWebpackPlugin', (stats) => {
+        if (!stats.hasErrors()) {
+          // write css file
+          writeFileSync(this.options.cssFile, getCss(), { encoding: 'utf-8' })
+        }
+      })
+    }
 
     compiler.options.module.rules.push(
       {