feat: 完成analyze watch

client/index.tsx

@@ -14,7 +14,6 @@ function App() {
   // ref 用于保存Treemap实例
   const treeMapRef = useRef(null);
   const [chartData, setChartData] = useState('');
-
   // toolTip展示使用
   const [tooltipContent, setToolTipContent] = useState('');
   const createModulesTree = (modules) => {
@@ -106,9 +105,15 @@ function App() {
       </div>
     );
   };
+  const getFoamTreeData = (chartData: any) => {
+    const formatData = format(chartData?.chunkModules || []);
+    const resData = filterModulesForSize(formatData, 'statSize');
+    return { groups: resData };
+  };
   const createFoamTree = (chartData: any) => {
     const formatData = format(chartData?.chunkModules || []);
     const resData = filterModulesForSize(formatData, 'statSize');
+    debugger;
     return new FoamTree({
       element: chartRef.current,
       layout: 'squarified',
@@ -161,6 +166,16 @@ function App() {
   useEffect(() => {
     window.addEventListener('load', () => {
       setChartData(window?.chartData);
+      // 如果开启了热更新,那么启动 websocket 服务。
+      if (window?.hmrWatch) {
+        const socket = new WebSocket('ws://localhost:3000/__/sendStatsData');
+
+        socket.addEventListener('message', (rawMessage) => {
+          const msg = JSON.parse(rawMessage.data);
+          console.log('msg==', msg);
+          setChartData(msg);
+        });
+      }
     });
     window.addEventListener('resize', resize);
     return () => {
@@ -172,7 +187,22 @@ function App() {
       console.warn('数据未初始化!!');
       return;
     }
+    // 如果已经实例化并且 chartData 发生改变，那么就重新设置值。
+    if (treeMapRef.current) {
+      debugger;
+      treeMapRef.current.set({
+        dataObject: getFoamTreeData(chartData),
+      });
+      treeMapRef.current.update();
+      return;
+    }
     treeMapRef.current = createFoamTree(chartData);
+    return () => {
+      if (treeMapRef.current) {
+        treeMapRef.current.dispose();
+        treeMapRef.current = null;
+      }
+    };
   }, [chartData]);
   return (
     <>

crates/mako/src/config/config.rs

@@ -226,7 +226,9 @@ pub struct StatsConfig {
 }
 
 #[derive(Deserialize, Serialize, Clone, Debug)]
-pub struct AnalyzeConfig {}
+pub struct AnalyzeConfig {
+    pub watch: Option<bool>,
+}
 
 #[derive(Deserialize, Serialize, Clone, Debug)]
 pub enum CodeSplittingStrategy {

crates/mako/src/dev.rs

@@ -40,7 +40,6 @@ impl DevServer {
         let root = self.root.clone();
         let compiler = self.compiler.clone();
         let txws_watch = txws.clone();
-
         if self.compiler.context.config.dev_server.is_some() {
             std::thread::spawn(move || {
                 if let Err(e) = Self::watch_for_changes(root, compiler, txws_watch) {
@@ -50,7 +49,7 @@ impl DevServer {
         } else if let Err(e) = Self::watch_for_changes(root, compiler, txws_watch) {
             eprintln!("Error watching files: {:?}", e);
         }
-
+        let compiler = self.compiler.clone();
         // server
         if self.compiler.context.config.dev_server.is_some() {
             let config_port = self
@@ -67,14 +66,19 @@ impl DevServer {
             let txws = txws.clone();
             let make_svc = make_service_fn(move |_conn| {
                 let context = context.clone();
+                let compiler = compiler.clone();
                 let txws = txws.clone();
                 async move {
                     Ok::<_, hyper::Error>(service_fn(move |req| {
                         let context = context.clone();
                         let txws = txws.clone();
+                        let compile = compiler.clone();
+
                         let staticfile =
                             hyper_staticfile::Static::new(context.config.output.path.clone());
-                        async move { Self::handle_requests(req, context, staticfile, txws).await }
+                        async move {
+                            Self::handle_requests(req, context, staticfile, txws, compile).await
+                        }
                     }))
                 }
             });
@@ -120,6 +124,7 @@ impl DevServer {
         context: Arc<Context>,
         staticfile: hyper_staticfile::Static,
         txws: broadcast::Sender<WsMessage>,
+        compiler: Arc<Compiler>,
     ) -> Result<hyper::Response<Body>> {
         debug!("> {} {}", req.method().to_string(), req.uri().path());
 
@@ -158,6 +163,31 @@ impl DevServer {
                     Ok(not_found_response())
                 }
             }
+            "/__/sendStatsData" => {
+                if hyper_tungstenite::is_upgrade_request(&req) {
+                    debug!("new websocket connection");
+                    let (response, websocket) = hyper_tungstenite::upgrade(req, None).unwrap();
+                    let txws = txws.clone();
+                    tokio_runtime::spawn(async move {
+                        let receiver = txws.subscribe();
+                        if txws.receiver_count() > 0 {
+                            let stats = compiler.create_stats_info();
+                            let json_data = serde_json::to_string_pretty(&stats).unwrap();
+                            txws.send(WsMessage {
+                                hash: 0,
+                                stats_data: json_data,
+                            })
+                            .unwrap();
+                        }
+                        Self::handle_websocket_stats_data(websocket, receiver)
+                            .await
+                            .unwrap();
+                    });
+                    Ok(response)
+                } else {
+                    Ok(not_found_response())
+                }
+            }
             _ => {
                 // for bundle outputs
 
@@ -237,6 +267,32 @@ impl DevServer {
         }
     }
 
+    // 发送热更新之后的数据
+    async fn handle_websocket_stats_data(
+        websocket: hyper_tungstenite::HyperWebsocket,
+        mut receiver: broadcast::Receiver<WsMessage>,
+    ) -> Result<()> {
+        let websocket = websocket.await?;
+        let (mut sender, mut ws_recv) = websocket.split();
+        let task = tokio_runtime::spawn(async move {
+            loop {
+                if let Ok(msg) = receiver.recv().await {
+                    if sender.send(Message::text(msg.stats_data)).await.is_err() {
+                        break;
+                    }
+                }
+            }
+        });
+        while let Some(message) = ws_recv.next().await {
+            if let Ok(Message::Close(_)) = message {
+                break;
+            }
+        }
+        debug!("websocket connection disconnected");
+        task.abort();
+        Ok(())
+    }
+
     // TODO: refact socket message data structure
     async fn handle_websocket(
         websocket: hyper_tungstenite::HyperWebsocket,
@@ -407,8 +463,16 @@ impl DevServer {
 
         let receiver_count = txws.receiver_count();
         debug!("receiver count: {}", receiver_count);
+        // 解析更新完之后的数据
+        let stats = compiler.create_stats_info();
+        let json_data = serde_json::to_string_pretty(&stats).unwrap();
+        let ws_new_data = WsMessage {
+            hash: **hmr_hash,
+            stats_data: json_data,
+        };
+
         if receiver_count > 0 {
-            txws.send(WsMessage { hash: **hmr_hash }).unwrap();
+            txws.send(ws_new_data).unwrap();
             debug!("send message to clients");
         }
 
@@ -419,4 +483,5 @@ impl DevServer {
 #[derive(Clone, Debug)]
 struct WsMessage {
     hash: u64,
+    stats_data: String,
 }

crates/mako/src/generate.rs

@@ -193,7 +193,12 @@ impl Compiler {
         }
 
         if self.context.config.analyze.is_some() {
-            Analyze::write_analyze(&stats, &self.context.config.output.path)?;
+            let analyze = &self.context.config.analyze.clone().unwrap();
+            let mut is_watch = false;
+            if analyze.watch.is_some() && analyze.watch.unwrap() {
+                is_watch = true;
+            }
+            Analyze::write_analyze(&stats, &self.context.config.output.path, is_watch)?;
         }
 
         debug!("generate done in {}ms", t_generate.elapsed().as_millis());

crates/mako/src/generate/analyze.rs

@@ -8,7 +8,7 @@ use crate::stats::StatsJsonMap;
 pub struct Analyze {}
 
 impl Analyze {
-    pub fn write_analyze(stats: &StatsJsonMap, path: &Path) -> Result<()> {
+    pub fn write_analyze(stats: &StatsJsonMap, path: &Path, is_watch: bool) -> Result<()> {
         let stats_json = serde_json::to_string_pretty(&stats).unwrap();
         let html_str = format!(
             r#"<!DOCTYPE html>
@@ -22,12 +22,14 @@ impl Analyze {
     <div id="root"></div>
     <script>
       window.chartData = {};
+      window.hmrWatch = {}
     </script>
     <script>{}</script>
   </body>
 </html>"#,
             include_str!("../../../../client/dist/index.css"),
             stats_json,
+            is_watch,
             include_str!("../../../../client/dist/index.js").replace("</script>", "<\\/script>")
         );
         let report_path = path.join("analyze-report.html");

crates/mako/src/visitors/env_replacer.rs

@@ -403,7 +403,7 @@ mod tests {
     }
 
     #[test]
-    fn test_complited_computed_as_member_key() {
+    fn test_completed_computed_as_member_key() {
         assert_eq!(
             run(
                 r#"log(A[v.v])"#,