Implement theme

Author: owjs3901

Cargo.lock

@@ -0,0 +1,12 @@
+{
+  "theme": {
+    "colors": {
+      "default": {
+        "text": "#333"
+      },
+      "dark": {
+        "text": "#fff"
+      }
+    }
+  }
+}

apps/next/devup.json

@@ -1,6 +1,6 @@
 'use client'
 
-import { Box } from '@devup-ui/react'
+import { Box, css, Text } from '@devup-ui/react'
 import { useState } from 'react'
 
 export default function HomePage() {
@@ -26,6 +26,15 @@ export default function HomePage() {
       >
         hello
       </Box>
+      <Text
+        className={css`
+          background: red;
+          color: blue;
+        `}
+      >
+        text
+      </Text>
+      <Text color="$text">text</Text>
       <Box color={enabled ? 'green' : 'blue'} fontSize={[32]} pr="20px">
         hello
       </Box>

apps/next/src/app/page.tsx

@@ -11,7 +11,7 @@ crate-type = ["cdylib", "rlib"]
 default = ["console_error_panic_hook"]
 
 [dependencies]
-wasm-bindgen = "0.2.99"
+wasm-bindgen = "0.2.100"
 extractor = { path = "../../libs/extractor" }
 sheet = { path = "../../libs/sheet" }
 
@@ -21,9 +21,10 @@ sheet = { path = "../../libs/sheet" }
 # code size when deploying.
 console_error_panic_hook = { version = "0.1.7", optional = true }
 once_cell = "1.20.2"
+js-sys = "0.3.76"
 
 [dev-dependencies]
-wasm-bindgen-test = "0.3.49"
+wasm-bindgen-test = "0.3.50"
 
 [profile.release]
 # Tell `rustc` to optimize for small code size.

bindings/devup-ui-wasm/Cargo.toml

@@ -1,5 +1,7 @@
 use extractor::{extract, ExtractOption, ExtractStyleValue, StyleProperty};
+use js_sys::{Object, Reflect};
 use once_cell::sync::Lazy;
+use sheet::theme::{ColorTheme, Theme};
 use sheet::StyleSheet;
 use std::sync::Mutex;
 use wasm_bindgen::prelude::*;
@@ -14,7 +16,7 @@ pub struct Output {
 #[wasm_bindgen]
 extern "C" {
     #[wasm_bindgen(js_namespace = console)]
-    fn log(s: &str);
+    fn log(s: &JsValue);
 }
 
 #[wasm_bindgen]
@@ -41,7 +43,7 @@ impl Output {
             };
             match style {
                 ExtractStyleValue::Static(st) => {
-                    if let Some(css) = sheet.add_property(
+                    if sheet.add_property(
                         cls,
                         st.property.clone(),
                         st.level,
@@ -52,7 +54,7 @@ impl Output {
                     }
                 }
                 ExtractStyleValue::Dynamic(dy) => {
-                    if let Some(css) = sheet.add_property(
+                    if sheet.add_property(
                         cls,
                         dy.property.clone(),
                         dy.level,
@@ -63,7 +65,7 @@ impl Output {
                     }
                 }
                 ExtractStyleValue::Css(cs) => {
-                    if let Some(css) = sheet.add_css(cls, cs.css.clone()) {
+                    if sheet.add_css(cls, cs.css.clone()) {
                         collected = true;
                     }
                 }
@@ -76,7 +78,7 @@ impl Output {
     }
 }
 
-#[wasm_bindgen(js_name = "codeExtract", catch)]
+#[wasm_bindgen(js_name = "codeExtract")]
 pub fn code_extract(
     filename: &str,
     code: &str,
@@ -102,3 +104,58 @@ pub fn code_extract(
         Err(error) => Err(JsValue::from_str(error.to_string().as_str())),
     }
 }
+pub fn theme_object_to_hashmap(js_value: JsValue) -> Result<Theme, JsValue> {
+    let mut theme = Theme::new();
+
+    if let Some(obj) = js_value.dyn_into::<Object>().ok() {
+        // get colors
+        if let Some(colors_obj) = Reflect::get(&obj, &JsValue::from_str("colors"))
+            .ok()
+            .and_then(|v| v.dyn_into::<Object>().ok())
+        {
+            for entry in Object::entries(&colors_obj).into_iter() {
+                if let (Ok(key), Ok(value)) = (
+                    Reflect::get(&entry, &JsValue::from_f64(0f64)),
+                    Reflect::get(&entry, &JsValue::from_f64(1f64)),
+                ) {
+                    if let (Some(key_str), Some(theme_value)) =
+                        (key.as_string(), value.dyn_into::<Object>().ok())
+                    {
+                        let mut color_theme = ColorTheme::new();
+                        for var_entry in Object::entries(&theme_value).into_iter() {
+                            if let (Ok(var_key), Ok(var_value)) = (
+                                Reflect::get(&var_entry, &JsValue::from_f64(0f64)),
+                                Reflect::get(&var_entry, &JsValue::from_f64(1f64)),
+                            ) {
+                                if let (Some(var_key_str), Some(var_value_str)) =
+                                    (var_key.as_string(), var_value.as_string())
+                                {
+                                    color_theme.add_color(var_key_str, var_value_str);
+                                } else {
+                                    return Err(JsValue::from_str(
+                                        "Failed to get key and value from the theme object",
+                                    ));
+                                }
+                            }
+                        }
+                        theme.colors.add_theme(key_str, color_theme);
+                    }
+                }
+            }
+        }
+    } else {
+        return Err(JsValue::from_str(
+            "Failed to convert the provided object to a hashmap",
+        ));
+    }
+    Ok(theme)
+}
+
+#[wasm_bindgen(js_name = "registerTheme")]
+pub fn register_theme(theme_object: JsValue) -> Result<(), JsValue> {
+    log(&theme_object);
+    let theme_object = theme_object_to_hashmap(theme_object)?;
+    let mut sheet = GLOBAL_STYLE_SHEET.lock().unwrap();
+    sheet.set_theme(theme_object);
+    Ok(())
+}

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

@@ -727,4 +727,19 @@ mod tests {
         )
         .unwrap());
     }
+
+    #[test]
+    fn extract_static_css_with_theme() {
+        assert_debug_snapshot!(extract(
+            "test.tsx",
+            r#"import {Box} from '@devup-ui/core'
+        <Box color="$nice" />
+        "#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_file: None
+            }
+        )
+        .unwrap());
+    }
 }

libs/extractor/src/lib.rs

@@ -0,0 +1,17 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box color=\"$nice\" />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
+---
+ExtractOutput {
+    styles: [
+        Static(
+            ExtractStaticStyle {
+                property: "color",
+                value: "$nice",
+                level: 0,
+                selector: None,
+            },
+        ),
+    ],
+    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { Box } from \"@devup-ui/core\";\n<div className=\"d10616791853849289151\" />;\n",
+}