Fix define issue, Support source map

.changeset/big-plants-camp.md

@@ -0,0 +1,9 @@
+---
+"@devup-ui/rsbuild-plugin": patch
+"@devup-ui/webpack-plugin": patch
+"@devup-ui/wasm": patch
+"@devup-ui/vite-plugin": patch
+"@devup-ui/react": patch
+---
+
+Support source map

.changeset/forty-games-return.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/vite-plugin": patch
+---
+
+Fix define issue

bindings/devup-ui-wasm/src/lib.rs

@@ -14,6 +14,7 @@ static GLOBAL_STYLE_SHEET: Lazy<Mutex<StyleSheet>> =
 pub struct Output {
     code: String,
     styles: HashSet<ExtractStyleValue>,
+    map: Option<String>,
 }
 #[wasm_bindgen]
 extern "C" {
@@ -31,6 +32,11 @@ impl Output {
         self.code.clone()
     }
 
+    #[wasm_bindgen(getter)]
+    pub fn map(&self) -> Option<String> {
+        self.map.clone()
+    }
+
     /// Get the css
     #[wasm_bindgen(getter)]
     pub fn css(&self) -> Option<String> {
@@ -141,6 +147,7 @@ pub fn code_extract(
         Ok(output) => Ok(Output {
             code: output.code,
             styles: output.styles,
+            map: output.map,
         }),
         Err(error) => Err(JsValue::from_str(error.to_string().as_str())),
     }

libs/extractor/src/lib.rs

@@ -11,11 +11,12 @@ use crate::visit::DevupVisitor;
 use oxc_allocator::Allocator;
 use oxc_ast::ast::Expression;
 use oxc_ast_visit::VisitMut;
-use oxc_codegen::Codegen;
+use oxc_codegen::{Codegen, CodegenOptions};
 use oxc_parser::{Parser, ParserReturn};
 use oxc_span::SourceType;
 use std::collections::{BTreeMap, HashSet};
 use std::error::Error;
+use std::path::PathBuf;
 #[derive(Debug)]
 pub enum ExtractStyleProp<'a> {
     Static(ExtractStyleValue),
@@ -80,6 +81,8 @@ pub struct ExtractOutput {
 
     // output source
     pub code: String,
+
+    pub map: Option<String>,
 }
 
 pub struct ExtractOption {
@@ -98,6 +101,7 @@ pub fn extract(
         return Ok(ExtractOutput {
             styles: HashSet::new(),
             code: code.to_string(),
+            map: None,
         });
     }
     let allocator = Allocator::default();
@@ -113,16 +117,22 @@ pub fn extract(
     let mut visitor = DevupVisitor::new(
         &allocator,
         &option.package,
-        option
+        &option
             .css_file
-            .unwrap_or(format!("{}/devup-ui.css", option.package))
-            .as_str(),
+            .unwrap_or(format!("{}/devup-ui.css", option.package)),
     );
     visitor.visit_program(&mut program);
+    let result = Codegen::new()
+        .with_options(CodegenOptions {
+            source_map_path: Some(PathBuf::from(filename)),
+            ..Default::default()
+        })
+        .build(&program);
 
     Ok(ExtractOutput {
         styles: visitor.styles,
-        code: Codegen::new().build(&program).code,
+        code: result.code,
+        map: result.map.map(|m| m.to_json_string()),
     })
 }
 

package.json

@@ -6,6 +6,7 @@
   "type": "module",
   "scripts": {
     "lint": "pnpm -F @devup-ui/* lint",
+    "pretest": "pnpm -F @devup-ui/vite-plugin build",
     "test": "cargo tarpaulin --out xml --out stdout --out html && vitest test --coverage --run && pnpm -r test",
     "build": "pnpm -F @devup-ui/* build",
     "dev": "pnpm -r dev",
@@ -19,7 +20,9 @@
     "@changesets/cli": "^2.29.5",
     "@types/node": "^24.0.7",
     "happy-dom": "^18.0.1",
-    "@testing-library/react": "^16.3.0"
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@devup-ui/vite-plugin": "workspace:*"
   },
   "author": "devfive",
   "packageManager": "pnpm@10.12.4",

packages/react/src/components/__tests__/Box.browser.test.tsx

@@ -0,0 +1,10 @@
+// @ts-nocheck
+import { Box } from '@devup-ui/react'
+import { render } from '@testing-library/react'
+
+describe('Box', () => {
+  it('should render', () => {
+    const { container } = render(<Box bg="blue" />)
+    expect(container.children[0]).toHaveStyle('background-color: blue')
+  })
+})

packages/react/tsconfig.json

@@ -1,6 +1,11 @@
 {
   "compilerOptions": {
-    "types": ["vite/client", "vitest/importMeta", "vitest/globals"],
+    "types": [
+      "vite/client",
+      "vitest/importMeta",
+      "vitest/globals",
+      "@testing-library/jest-dom"
+    ],
     "strict": true,
     "target": "ESNext",
     "declaration": true,
@@ -23,4 +28,4 @@
     "baseUrl": ".",
     "jsx": "react-jsx"
   }
-}
+}

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

@@ -129,7 +129,10 @@ describe('DevupUIRsbuildPlugin', () => {
 const App = () => <Box></Box>`,
         resourcePath: 'src/App.tsx',
       }),
-    ).resolves.toBe('<div></div>')
+    ).resolves.toEqual({
+      code: '<div></div>',
+      map: undefined,
+    })
   })
   it('should transform with include', async () => {
     const plugin = DevupUIRsbuildPlugin({
@@ -157,7 +160,10 @@ const App = () => <Box></Box>`,
 const App = () => <Box></Box>`,
       resourcePath: 'src/App.tsx',
     })
-    expect(ret).toBe('<div></div>')
+    expect(ret).toEqual({
+      code: '<div></div>',
+      map: undefined,
+    })
     expect(writeFile).toHaveBeenCalledWith(
       resolve('.df', 'devup-ui.css'),
       expect.stringMatching(/\/\* src\/App\.tsx \d+ \*\//),

packages/rsbuild-plugin/src/plugin.ts

@@ -53,20 +53,22 @@ export const DevupUIRsbuildPlugin = ({
             : resourcePath.includes('node_modules')
         )
           return code
-        const { code: retCode, css } = codeExtract(
-          resourcePath,
-          code,
-          libPackage,
-          cssFile,
-        )
+        const {
+          code: retCode,
+          css,
+          map,
+        } = codeExtract(resourcePath, code, libPackage, cssFile)
 
         if (css && globalCss.length < css.length) {
           globalCss = css
           await writeFile(cssFile, `/* ${resourcePath} ${Date.now()} */`, {
             encoding: 'utf-8',
           })
         }
-        return retCode
+        return {
+          code: retCode,
+          map,
+        }
       },
     )
   },

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

@@ -437,5 +437,29 @@ describe('devupUIPlugin', () => {
       ;(plugin as any).generateBundle({}, bundle)
       expect(bundle['devup-ui.css'].source).toBe('no')
     })
+
+    it('should define process.env.DEVUP_UI_DEFAULT_THEME', () => {
+      vi.mocked(getDefaultTheme).mockReturnValue('defaultTheme')
+      const plugin = DevupUI({
+        package: libPackage,
+        cssFile,
+        devupPath,
+        interfacePath,
+      })
+      expect((plugin as any).config().define).toEqual({
+        'process.env.DEVUP_UI_DEFAULT_THEME': '"defaultTheme"',
+      })
+    })
+
+    it('should undefine process.env.DEVUP_UI_DEFAULT_THEME', () => {
+      vi.mocked(getDefaultTheme).mockReturnValue(undefined)
+      const plugin = DevupUI({
+        package: libPackage,
+        cssFile,
+        devupPath,
+        interfacePath,
+      })
+      expect((plugin as any).config().define).toStrictEqual({})
+    })
   })
 })

packages/vite-plugin/src/plugin.ts

@@ -70,6 +70,11 @@ export function DevupUI({
   } catch (error) {
     console.error(error)
   }
+  const theme = getDefaultTheme()
+  const define: Record<string, string> = {}
+  if (theme) {
+    define['process.env.DEVUP_UI_DEFAULT_THEME'] = JSON.stringify(theme)
+  }
   return {
     name: 'devup-ui',
     config() {
@@ -79,10 +84,7 @@ export function DevupUI({
             ignored: [`!${devupPath}`],
           },
         },
-        define: {
-          'process.env.DEVUP_UI_DEFAULT_THEME':
-            JSON.stringify(getDefaultTheme()),
-        },
+        define,
         optimizeDeps: {
           exclude: include,
         },
@@ -149,12 +151,11 @@ export function DevupUI({
       }
       if (!/\.(tsx|ts|js|mjs|jsx)$/i.test(fileName)) return
 
-      const { code: retCode, css } = codeExtract(
-        fileName,
-        code,
-        libPackage,
-        cssFile,
-      )
+      const {
+        code: retCode,
+        css,
+        map,
+      } = codeExtract(fileName, code, libPackage, cssFile)
 
       if (css && globalCss.length < css.length) {
         globalCss = css
@@ -164,6 +165,7 @@ export function DevupUI({
       }
       return {
         code: retCode,
+        map,
       }
     },
     async generateBundle(_options, bundle) {

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

@@ -37,6 +37,7 @@ describe('devupUILoader', () => {
       code: 'code',
       css: 'css',
       free: vi.fn(),
+      map: undefined,
     })
     devupUILoader.bind(t as any)(Buffer.from('code'), 'index.tsx')
 
@@ -48,7 +49,7 @@ describe('devupUILoader', () => {
       'cssFile',
     )
     await vi.waitFor(() => {
-      expect(t.async()).toHaveBeenCalledWith(null, 'code')
+      expect(t.async()).toHaveBeenCalledWith(null, 'code', undefined)
     })
     expect(writeFile).toHaveBeenCalledWith('cssFile', '/* index.tsx 0 */')
     expect(writeFile).toHaveBeenCalledWith('sheetFile', 'sheet')
@@ -72,6 +73,7 @@ describe('devupUILoader', () => {
       code: 'code',
       css: undefined,
       free: vi.fn(),
+      map: undefined,
     })
     devupUILoader.bind(t as any)(Buffer.from('code'), 'index.tsx')
 
@@ -82,7 +84,7 @@ describe('devupUILoader', () => {
       'package',
       'cssFile',
     )
-    expect(t.async()).toHaveBeenCalledWith(null, 'code')
+    expect(t.async()).toHaveBeenCalledWith(null, 'code', undefined)
     expect(writeFile).not.toHaveBeenCalledWith('cssFile', 'css', {
       encoding: 'utf-8',
     })
@@ -123,6 +125,7 @@ describe('devupUILoader', () => {
       code: 'code',
       css: 'css',
       free: vi.fn(),
+      map: undefined,
     })
     devupUILoader.bind(t as any)(Buffer.from('code'), 'index.tsx')
 

packages/webpack-plugin/src/loader.ts

@@ -25,7 +25,7 @@ const devupUILoader: RawLoaderDefinitionFunction<DevupUILoaderOptions> =
     const id = this.resourcePath
 
     try {
-      const { code, css } = codeExtract(
+      const { code, css, map } = codeExtract(
         id,
         source.toString(),
         libPackage,
@@ -41,10 +41,10 @@ const devupUILoader: RawLoaderDefinitionFunction<DevupUILoaderOptions> =
           writeFile(classMapFile, exportClassMap()),
         ])
           .catch(console.error)
-          .finally(() => callback(null, code))
+          .finally(() => callback(null, code, map))
         return
       }
-      callback(null, code)
+      callback(null, code, map)
     } catch (error) {
       callback(error as Error)
     }