Fix define issue, Support source map

Author: owjs3901

.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": "[email protected]",

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

@@ -0,0 +1,9 @@
+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({})
+    })
   })
 })