Implement devup hot reload

Fix camel selector issue

Author: owjs3901

apps/next/devup.json

@@ -2,11 +2,11 @@
   "theme": {
     "colors": {
       "default": {
-        "text": "#333"
+        "text": "green"
       },
       "dark": {
         "text": "#fff"
       }
     }
   }
-}
+}

apps/next/src/app/page.tsx

@@ -9,7 +9,7 @@ export default function HomePage() {
 
   return (
     <div>
-      <a />
+      <p>Track & field champions:</p>
       <Box
         _hover={{
           bg: ['yellow', 'red'],
@@ -24,7 +24,20 @@ export default function HomePage() {
         position="relative"
         py="28px"
       >
-        hello
+        <Box
+          _lastChild={{
+            color: 'purple',
+          }}
+        >
+          hello
+        </Box>
+        <Box
+          _lastChild={{
+            color: 'purple',
+          }}
+        >
+          hello
+        </Box>
       </Box>
       <Text
         className={css`

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

@@ -74,7 +74,7 @@ impl Output {
         if !collected {
             return None;
         }
-        Some(sheet.create_css(vec![0, 480, 768, 992, 1280]))
+        Some(sheet.create_css())
     }
 }
 
@@ -104,7 +104,7 @@ 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> {
+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() {
@@ -153,9 +153,14 @@ pub fn theme_object_to_hashmap(js_value: JsValue) -> Result<Theme, JsValue> {
 
 #[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(())
 }
+
+#[wasm_bindgen(js_name = "getCss")]
+pub fn get_css() -> Result<String, JsValue> {
+    let mut sheet = GLOBAL_STYLE_SHEET.lock().unwrap();
+    Ok(sheet.create_css())
+}

libs/css/src/lib.rs

@@ -66,7 +66,7 @@ static GLOBAL_STYLE_PROPERTY: Lazy<Mutex<HashMap<&str, PropertyType>>> = Lazy::n
         map
     })
 });
-fn to_kebab_case(value: &str) -> String {
+pub fn to_kebab_case(value: &str) -> String {
     value
         .chars()
         .enumerate()

libs/extractor/src/lib.rs

@@ -168,6 +168,7 @@ pub fn extract(
     code: &str,
     option: ExtractOption,
 ) -> Result<ExtractOutput, Box<dyn Error>> {
+    let source_type = SourceType::from_path(filename)?;
     if !code.contains(option.package.as_str()) {
         // skip if not using package
         return Ok(ExtractOutput {
@@ -176,25 +177,15 @@ pub fn extract(
         });
     }
     let allocator = Allocator::default();
-    let source_type = SourceType::from_path(filename)?;
 
     let ParserReturn {
         mut program, // AST
-        errors,      // Syntax errors
         panicked,    // Parser encountered an error it couldn't recover from
         ..
     } = Parser::new(&allocator, code, source_type).parse();
     if panicked {
         return Err("Parser panicked".into());
     }
-    if !errors.is_empty() {
-        return Err(errors
-            .iter()
-            .map(|e| e.to_string())
-            .collect::<Vec<_>>()
-            .join("\n")
-            .into());
-    }
     let mut visitor = DevupVisitor::new(
         &allocator,
         &option.package,
@@ -742,4 +733,33 @@ mod tests {
         )
         .unwrap());
     }
+
+    #[test]
+    fn raise_error() {
+        assert!(extract(
+            "test.wrong",
+            "const a = 1;",
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_file: None
+            },
+        )
+        .unwrap_err()
+        .to_string()
+        .starts_with("Unknown file extension"));
+
+        assert_eq!(
+            extract(
+                "test.tsx",
+                "import {} '@devup-ui/core';\na a = 1;",
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_file: None
+                },
+            )
+            .unwrap_err()
+            .to_string(),
+            "Parser panicked"
+        );
+    }
 }

libs/sheet/src/lib.rs

@@ -1,7 +1,7 @@
 pub mod theme;
 
 use crate::theme::Theme;
-use css::{convert_property, PropertyType};
+use css::{convert_property, to_kebab_case, PropertyType};
 use std::collections::{BTreeMap, HashSet};
 
 trait ExtractStyle {
@@ -19,7 +19,7 @@ pub struct StyleSheetProperty {
 impl ExtractStyle for StyleSheetProperty {
     fn extract(&self) -> String {
         let selector = if let Some(selector) = &self.selector {
-            format!(":{}", selector)
+            format!(":{}", to_kebab_case(selector))
         } else {
             String::new()
         };
@@ -71,6 +71,7 @@ pub struct StyleSheet {
     /// level -> properties
     pub properties: BTreeMap<u8, HashSet<StyleSheetProperty>>,
     pub css: HashSet<StyleSheetCss>,
+    theme: Theme,
     theme_declaration: String,
 }
 
@@ -86,6 +87,7 @@ impl StyleSheet {
             properties: BTreeMap::new(),
             css: HashSet::new(),
             theme_declaration: String::new(),
+            theme: Theme::new(),
         }
     }
 
@@ -114,13 +116,20 @@ impl StyleSheet {
     pub fn set_theme(&mut self, theme: Theme) {
         let mut theme_declaration = String::new();
         theme_declaration.push_str(theme.colors.to_css().as_str());
+        self.theme = theme;
         self.theme_declaration = theme_declaration;
     }
 
-    pub fn create_css(&self, break_points: Vec<u16>) -> String {
+    pub fn create_css(&self) -> String {
         let mut css = self.theme_declaration.clone();
         for (level, props) in self.properties.iter() {
-            let inner_css = props
+            // If has a selector property, move it to the back
+            let (mut select_props, other_props): (Vec<_>, Vec<_>) =
+                props.iter().partition(|prop| prop.selector.is_some());
+            let mut sorted_props = other_props;
+            sorted_props.append(&mut select_props);
+
+            let inner_css = sorted_props
                 .iter()
                 .map(|prop| prop.extract())
                 .collect::<Vec<String>>()
@@ -131,12 +140,18 @@ impl StyleSheet {
                 css.push_str(
                     format!(
                         "\n@media (min-width:{}px){{{}}}",
-                        break_points
+                        self.theme
+                            .break_points
                             .iter()
                             .enumerate()
                             .find(|(idx, _)| (*idx as u8) == *level)
                             .map(|(_, bp)| *bp)
-                            .unwrap_or_else(|| break_points.last().cloned().unwrap_or(0)),
+                            .unwrap_or_else(|| self
+                                .theme
+                                .break_points
+                                .last()
+                                .cloned()
+                                .unwrap_or(0)),
                         inner_css
                     )
                     .as_str(),

libs/sheet/src/theme.rs

@@ -95,6 +95,7 @@ impl Color {
 
 pub struct Theme {
     pub colors: Color,
+    pub break_points: Vec<u16>,
 }
 
 impl Default for Theme {
@@ -107,6 +108,18 @@ impl Theme {
     pub fn new() -> Self {
         Self {
             colors: Color::new(),
+            break_points: vec![0, 480, 768, 992, 1280],
+        }
+    }
+
+    pub fn update_break_points(&mut self, break_points: Vec<u16>) {
+        for (idx, value) in break_points.iter().enumerate() {
+            let prev = self.break_points.get_mut(idx);
+            if let Some(prev) = prev {
+                *prev = *value;
+            } else {
+                self.break_points.push(*value);
+            }
         }
     }
 

packages/next-plugin/src/plugin.ts

@@ -1,12 +1,10 @@
-import { existsSync, readFileSync } from 'node:fs'
-
 import {
   DevupUIWebpackPlugin,
-  DevupUiWebpackPluginOptions,
+  type DevupUIWebpackPluginOptions,
 } from '@devup-ui/webpack-plugin'
 import { type NextConfig } from 'next'
 
-type DevupUiNextPluginOptions = Partial<DevupUiWebpackPluginOptions>
+type DevupUiNextPluginOptions = Partial<DevupUIWebpackPluginOptions>
 
 /**
  * Devup UI Next Plugin
@@ -19,16 +17,6 @@ export function DevupUI(
   options: DevupUiNextPluginOptions = {},
 ): NextConfig {
   const { webpack } = config
-  if (!options.devupTheme && existsSync('devup.json')) {
-    try {
-      options.devupTheme = JSON.parse(readFileSync('devup.json', 'utf-8'))?.[
-        'theme'
-      ]
-    } catch (error) {
-      console.error(error)
-    }
-  }
-
   config.webpack = (config, _options) => {
     config.plugins.push(new DevupUIWebpackPlugin(options))
     if (typeof webpack === 'function') return webpack(config, _options)

packages/webpack-plugin/src/index.ts

@@ -1,4 +1,4 @@
 export {
   DevupUIWebpackPlugin,
-  type DevupUiWebpackPluginOptions,
+  type DevupUIWebpackPluginOptions,
 } from './plugin'

packages/webpack-plugin/src/loader.ts

@@ -8,7 +8,7 @@ interface DevupUiLoaderOptions {
   cssFile: string
 }
 
-const devupUiLoader: RawLoaderDefinitionFunction<DevupUiLoaderOptions> =
+const devupUILoader: RawLoaderDefinitionFunction<DevupUiLoaderOptions> =
   function (source) {
     const { package: libPackage, cssFile } = this.getOptions()
     const callback = this.async()
@@ -41,4 +41,4 @@ const devupUiLoader: RawLoaderDefinitionFunction<DevupUiLoaderOptions> =
     }
     return
   }
-export default devupUiLoader
+export default devupUILoader