Fix vite, rsbuild

Author: owjs3901

apps/rsbuild/rsbuild.config.mjs

@@ -1,7 +1,7 @@
-import { defineConfig } from '@rsbuild/core';
-import { pluginReact } from '@rsbuild/plugin-react';
-import { DevupUIRsbuildPlugin } from '@devup-ui/rsbuild-plugin';
+import { DevupUI } from '@devup-ui/rsbuild-plugin'
+import { defineConfig } from '@rsbuild/core'
+import { pluginReact } from '@rsbuild/plugin-react'
 
 export default defineConfig({
-  plugins: [pluginReact(), DevupUIRsbuildPlugin()],
-});
+  plugins: [pluginReact(), DevupUI()],
+})

apps/vite/src/App.tsx

@@ -14,7 +14,7 @@ export default function App() {
         hello
         <Lib />
       </Box>
-      <Text color="#777777"></Text>
+      <Text fontWeight="bold">wf</Text>
       <Text color="#777"></Text>
       <Text color="#777"></Text>
       <Text typography="header">typo</Text>

apps/vite/vite.config.ts

@@ -8,6 +8,7 @@ export default defineConfig({
     react(),
     DevupUI({
       include: ['vite-lib-example'],
+      // singleCss: true,
     }),
   ],
 })

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

@@ -1,8 +1,13 @@
 import { existsSync } from 'node:fs'
 import { mkdir, readFile, writeFile } from 'node:fs/promises'
-import { resolve } from 'node:path'
+import { join, resolve } from 'node:path'
 
-import { codeExtract, getThemeInterface } from '@devup-ui/wasm'
+import {
+  codeExtract,
+  getDefaultTheme,
+  getThemeInterface,
+  registerTheme,
+} from '@devup-ui/wasm'
 import { vi } from 'vitest'
 
 import { DevupUI } from '../plugin'
@@ -34,8 +39,10 @@ describe('DevupUIRsbuildPlugin', () => {
     expect(typeof plugin.setup).toBe('function')
 
     const transform = vi.fn()
+    const modifyRsbuildConfig = vi.fn()
     await plugin.setup({
       transform,
+      modifyRsbuildConfig,
     } as any)
     expect(transform).toHaveBeenCalled()
   })
@@ -51,8 +58,10 @@ describe('DevupUIRsbuildPlugin', () => {
     expect(plugin).toBeDefined()
     expect(plugin.setup).toBeDefined()
     const transform = vi.fn()
+    const modifyRsbuildConfig = vi.fn()
     await plugin.setup({
       transform,
+      modifyRsbuildConfig,
     } as any)
   })
 
@@ -66,8 +75,10 @@ describe('DevupUIRsbuildPlugin', () => {
     expect(plugin).toBeDefined()
     expect(plugin.setup).toBeDefined()
     const transform = vi.fn()
+    const modifyRsbuildConfig = vi.fn()
     await plugin.setup({
       transform,
+      modifyRsbuildConfig,
     } as any)
   })
 
@@ -104,8 +115,10 @@ describe('DevupUIRsbuildPlugin', () => {
     expect(plugin).toBeDefined()
     expect(plugin.setup).toBeDefined()
     const transform = vi.fn()
+    const modifyRsbuildConfig = vi.fn()
     await plugin.setup({
       transform,
+      modifyRsbuildConfig,
     } as any)
     expect(transform).toHaveBeenCalled()
     expect(transform).toHaveBeenCalledWith(
@@ -130,8 +143,10 @@ describe('DevupUIRsbuildPlugin', () => {
     expect(plugin).toBeDefined()
     expect(plugin.setup).toBeDefined()
     const transform = vi.fn()
+    const modifyRsbuildConfig = vi.fn()
     await plugin.setup({
       transform,
+      modifyRsbuildConfig,
     } as any)
     expect(transform).toHaveBeenCalled()
     expect(transform).toHaveBeenCalledWith(
@@ -182,6 +197,7 @@ const App = () => <Box></Box>`,
     const transform = vi.fn()
     await plugin.setup({
       transform,
+      modifyRsbuildConfig: vi.fn(),
     } as any)
     expect(transform).toHaveBeenCalled()
     expect(transform).toHaveBeenCalledWith(
@@ -220,4 +236,105 @@ const App = () => <Box></Box>`,
       map: undefined,
     })
   })
+  it.each(
+    createTestMatrix({
+      watch: [true, false],
+      existsDevupFile: [true, false],
+      existsDistDir: [true, false],
+      existsSheetFile: [true, false],
+      existsClassMapFile: [true, false],
+      existsFileMapFile: [true, false],
+      existsCssDir: [true, false],
+      getDefaultTheme: ['theme', ''],
+      singleCss: [true, false],
+    }),
+  )('should write data files', async (options) => {
+    vi.mocked(writeFile).mockResolvedValueOnce(undefined)
+    vi.mocked(readFile).mockResolvedValueOnce(JSON.stringify({}))
+    vi.mocked(getThemeInterface).mockReturnValue('interface code')
+    vi.mocked(getDefaultTheme).mockReturnValue(options.getDefaultTheme)
+    vi.mocked(existsSync).mockImplementation((path) => {
+      if (path === 'devup.json') return options.existsDevupFile
+      if (path === 'df') return options.existsDistDir
+      if (path === resolve('df', 'devup-ui')) return options.existsCssDir
+      if (path === join('df', 'sheet.json')) return options.existsSheetFile
+      if (path === join('df', 'classMap.json'))
+        return options.existsClassMapFile
+      if (path === join('df', 'fileMap.json')) return options.existsFileMapFile
+      return false
+    })
+    const plugin = DevupUI({ singleCss: options.singleCss })
+    await (plugin as any).setup({
+      transform: vi.fn(),
+      renderChunk: vi.fn(),
+      generateBundle: vi.fn(),
+      closeBundle: vi.fn(),
+      resolve: vi.fn(),
+      load: vi.fn(),
+      modifyRsbuildConfig: vi.fn(),
+      watchChange: vi.fn(),
+      resolveId: vi.fn(),
+    } as any)
+    if (options.existsDevupFile) {
+      expect(readFile).toHaveBeenCalledWith('devup.json', 'utf-8')
+      expect(registerTheme).toHaveBeenCalledWith({})
+      expect(getThemeInterface).toHaveBeenCalledWith(
+        '@devup-ui/react',
+        'DevupThemeColors',
+        'DevupThemeTypography',
+        'DevupTheme',
+      )
+      expect(writeFile).toHaveBeenCalledWith(
+        join('df', 'theme.d.ts'),
+        'interface code',
+        'utf-8',
+      )
+    } else {
+      expect(registerTheme).toHaveBeenCalledWith({})
+    }
+
+    const modifyRsbuildConfig = vi.fn()
+    await (plugin as any).setup({
+      transform: vi.fn(),
+      renderChunk: vi.fn(),
+      generateBundle: vi.fn(),
+      closeBundle: vi.fn(),
+      resolve: vi.fn(),
+      modifyRsbuildConfig,
+      load: vi.fn(),
+      watchChange: vi.fn(),
+      resolveId: vi.fn(),
+    } as any)
+    if (options.getDefaultTheme) {
+      expect(modifyRsbuildConfig).toHaveBeenCalledWith(expect.any(Function))
+      const config = {
+        source: {
+          define: {},
+        },
+      }
+      modifyRsbuildConfig.mock.calls[0][0](config)
+      expect(config).toEqual({
+        source: {
+          define: {
+            'process.env.DEVUP_UI_DEFAULT_THEME': JSON.stringify(
+              options.getDefaultTheme,
+            ),
+          },
+        },
+      })
+    } else {
+      expect(modifyRsbuildConfig).toHaveBeenCalledWith(expect.any(Function))
+      const config = {
+        source: {
+          define: {},
+        },
+      }
+      modifyRsbuildConfig.mock.calls[0][0](config)
+      expect(config).toEqual({
+        source: {
+          define: {},
+        },
+      })
+    }
+  })
 })

packages/rsbuild-plugin/src/plugin.ts

@@ -4,6 +4,8 @@ import { basename, join, resolve } from 'node:path'
 
 import {
   codeExtract,
+  getCss,
+  getDefaultTheme,
   getThemeInterface,
   registerTheme,
   setDebug,
@@ -26,7 +28,7 @@ let globalCss = ''
 async function writeDataFiles(
   options: Omit<
     DevupUIRsbuildPluginOptions,
-    'extractCss' | 'debug' | 'include' | 'singleCss'
+    'extractCss' | 'debug' | 'include'
   >,
 ) {
   try {
@@ -44,9 +46,11 @@ async function writeDataFiles(
       )
 
       if (interfaceCode) {
-        await writeFile(join(options.distDir, 'theme.d.ts'), interfaceCode, {
-          encoding: 'utf-8',
-        })
+        await writeFile(
+          join(options.distDir, 'theme.d.ts'),
+          interfaceCode,
+          'utf-8',
+        )
       }
     } else {
       registerTheme({})
@@ -55,8 +59,14 @@ async function writeDataFiles(
     console.error(error)
     registerTheme({})
   }
-  if (!existsSync(options.cssDir))
-    await mkdir(options.cssDir, { recursive: true })
+  await Promise.all([
+    !existsSync(options.cssDir)
+      ? mkdir(options.cssDir, { recursive: true })
+      : Promise.resolve(),
+    !options.singleCss
+      ? writeFile(join(options.cssDir, 'devup-ui.css'), getCss())
+      : Promise.resolve(),
+  ])
 }
 
 export const DevupUI = ({
@@ -72,11 +82,16 @@ export const DevupUI = ({
   name: 'devup-ui-rsbuild-plugin',
   async setup(api) {
     setDebug(debug)
+
+    if (!existsSync(distDir)) await mkdir(distDir, { recursive: true })
+    await writeFile(join(distDir, '.gitignore'), '*', 'utf-8')
+
     await writeDataFiles({
       package: libPackage,
       cssDir,
       devupFile,
       distDir,
+      singleCss,
     })
     if (!extractCss) return
 
@@ -87,6 +102,19 @@ export const DevupUI = ({
       () => globalCss,
     )
 
+    api.modifyRsbuildConfig((config) => {
+      const theme = getDefaultTheme()
+      if (theme) {
+        config.source ??= {}
+        config.source.define = {
+          'process.env.DEVUP_UI_DEFAULT_THEME':
+            JSON.stringify(getDefaultTheme()),
+          ...config.source.define,
+        }
+      }
+      return config
+    })
+
     api.transform(
       {
         test: /\.(tsx|ts|js|mjs|jsx)$/,

packages/rsbuild-plugin/tsconfig.json

@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-    "types": ["vite/client", "vitest/importMeta", "vitest/globals"],
+    "types": [
+      "vite/client",
+      "vitest/importMeta",
+      "vitest/globals"
+    ],
     "strict": true,
     "target": "ESNext",
     "declaration": true,
@@ -22,5 +26,14 @@
     "noEmit": true,
     "baseUrl": ".",
     "jsx": "react-jsx"
-  }
-}
+  },
+  "include": [
+    "src",
+    "vite.config.ts",
+    "../../vitest.setup.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}