feat: 支持函数调用方式的子 JSX 拆分写法

luckyadam · luckyadam · commit 73a5bcbf34be · 2023-10-07T15:02:56.000+08:00
diff --git a/README.md b/README.md
@@ -17,7 +17,7 @@
 ### JSX DOM 树构造
 - [x] 支持函数组件
 - [x] 支持类组件
-- [ ] 支持 JSX 分离的写法
+- [x] 支持 JSX 分离的写法
 - [ ] 支持遍历子组件
 
 ### 样式计算
diff --git a/asset/mod.jsx b/asset/mod.jsx
@@ -15,15 +15,31 @@ function Cc() {
 }
 
 export default class Mod extends React.Component {
+  getDom () {
+    return (
+      <div className='cc'>
+        <span className='line1 txt'>成员123: 4000+</span>
+        <div className='cnt_row4'>
+          <img className='icon2' src='//img11.360buyimg.com/img/jfs/t1/175578/35/40256/1981/64f58062Fddaf1a21/f1111d9988a65ccc.png'></img>
+          <span className='instruction3'>slslsl-jsj</span>
+          <span className='txt3'>复制</span>
+        </div>
+      </div>
+    )
+  }
   render () {
     return (
       <div className='mod' style={{ width: '500px', height: 800 }}>
         <div className='cnt_row'>
-          <img
-            className='icon'
-            src='//img20.360buyimg.com/img/jfs/t1/166410/12/38783/3147/64f58062Fd7737e2b/5aaf0205cd1ce175.png'
-          ></img>
-          <span className='line1 instruction'>超能芭比 5分钟前查看团购</span>
+          <>
+            <img
+              className='icon'
+              src='//img20.360buyimg.com/img/jfs/t1/166410/12/38783/3147/64f58062Fd7737e2b/5aaf0205cd1ce175.png'
+            ></img>
+            <>
+              <span className='line1 instruction'>超能芭比 5分钟前查看团购</span>
+            </>
+          </>
         </div>
         <div className='cnt_row1'>
           <img
@@ -35,7 +51,7 @@ export default class Mod extends React.Component {
             <span className='line1 txt'>成员: 4000+</span>
           </div>
           <div className='cnt_row2'>
-            <Cc />
+            { this.getDom() }
             <img
               className='icon1'
               src='//img11.360buyimg.com/img/jfs/t1/175578/35/40256/1981/64f58062Fddaf1a21/f1111d9988a65ccc.png'
diff --git a/src/visitor.rs b/src/visitor.rs
@@ -1,6 +1,6 @@
 use ego_tree::{NodeId, Tree, NodeMut, NodeRef};
 use html5ever::{Attribute, tendril::StrTendril};
-use swc_ecma_ast::{JSXElement, JSXElementName, JSXAttrOrSpread, JSXAttrName, JSXAttrValue, Lit, JSXExpr, Expr, JSXElementChild, Module, Function, Stmt, ExportDefaultExpr, ExportDefaultDecl, DefaultDecl, ClassDecl, ClassMember, PropName, FnDecl, JSXFragment};
+use swc_ecma_ast::{JSXElement, JSXElementName, JSXAttrOrSpread, JSXAttrName, JSXAttrValue, Lit, JSXExpr, Expr, JSXElementChild, Module, Function, Stmt, ExportDefaultExpr, ExportDefaultDecl, DefaultDecl, ClassDecl, ClassMember, PropName, FnDecl, Callee, MemberProp};
 use swc_ecma_visit::{Visit, VisitWith};
 
 use crate::{scraper::{Node, Element, Fragment}, utils::{recursion_jsx_member, create_qualname, is_starts_with_uppercase}};
@@ -119,14 +119,14 @@ impl<'a> Visit for JSXVisitor<'a> {
     
   fn visit_jsx_element_children(&mut self, n: &[JSXElementChild]) {
     let mut nodes = vec![];
-    let mut elements: Vec<JSXElementChild> = vec![];
+    let mut elements: Vec<&JSXElementChild> = vec![];
     for child in n.iter() {
       match child {
         JSXElementChild::JSXElement(element) => {
           if let JSXElementName::Ident(ident) = &element.opening.name {
             let name = ident.sym.to_string();
             if is_starts_with_uppercase(name.as_str()) {
-              let mut visitor = JSXFragmentVisitor::new(self.module, name.as_str());
+              let mut visitor = JSXFragmentVisitor::new(self.module, name.as_str(), SearchType::Normal);
               self.module.visit_with(&mut visitor);
               let mut current = self.tree.get_mut(self.current_node.unwrap()).unwrap();
               // 将 Fragment 的子节点添加到当前节点
@@ -136,22 +136,66 @@ impl<'a> Visit for JSXVisitor<'a> {
               let mut current = self.tree.get_mut(self.current_node.unwrap()).unwrap();
               let tree_node = current.append(node);
               nodes.push(tree_node.id());
-              elements.push(JSXElementChild::JSXElement(element.clone()));
+              elements.push(child);
             }
           } else {
             let node = self.create_element(element);
             let mut current = self.tree.get_mut(self.current_node.unwrap()).unwrap();
             let tree_node = current.append(node);
             nodes.push(tree_node.id());
-            elements.push(JSXElementChild::JSXElement(element.clone()));
+            elements.push(child);
           }
         },
-        JSXElementChild::JSXFragment(fragment) => {
+        JSXElementChild::JSXFragment(_) => {
           let node = self.create_fragment();
           let mut current = self.tree.get_mut(self.current_node.unwrap()).unwrap();
           let tree_node = current.append(node);
           nodes.push(tree_node.id());
-          elements.push(JSXElementChild::JSXFragment(fragment.clone()));
+          elements.push(child);
+        },
+        // 找到函数调用中的 JSX
+        JSXElementChild::JSXExprContainer(expr) => {
+          match &expr.expr {
+            JSXExpr::JSXEmptyExpr(_) => {},
+            JSXExpr::Expr(expr) => {
+              match &**expr {
+                Expr::Call(call_expr) => {
+                  match &call_expr.callee {
+                    Callee::Expr(expr) => {
+                      match &**expr {
+                        Expr::Ident(ident) => {
+                          let name = ident.sym.to_string();
+                          let mut visitor = JSXFragmentVisitor::new(self.module, name.as_str(), SearchType::Normal);
+                          self.module.visit_with(&mut visitor);
+                          let mut current = self.tree.get_mut(self.current_node.unwrap()).unwrap();
+                          // 将 Fragment 的子节点添加到当前节点
+                          recursion_sub_tree(&visitor.tree.root(), &mut current);
+                        },
+                        Expr::Member(member_expr) => {
+                          if let Expr::This(_) = &*member_expr.obj {
+                            match &member_expr.prop {
+                              MemberProp::Ident(ident) => {
+                                let name = ident.sym.to_string();
+                                let mut visitor = JSXFragmentVisitor::new(self.module, name.as_str(), SearchType::Class);
+                                self.module.visit_with(&mut visitor);
+                                let mut current = self.tree.get_mut(self.current_node.unwrap()).unwrap();
+                                // 将 Fragment 的子节点添加到当前节点
+                                recursion_sub_tree(&visitor.tree.root(), &mut current);
+                              },
+                              _ => {}
+                            }
+                          }
+                        },
+                        _ => {}
+                      }
+                    },
+                    _ => {}
+                  }
+                },
+                _ => {}
+              }
+            },
+          }
         },
         _ => {}
       }
@@ -165,27 +209,35 @@ impl<'a> Visit for JSXVisitor<'a> {
   }
 }
 
+#[derive(PartialEq)]
+pub enum SearchType {
+  Normal,
+  Class
+}
+
 pub struct JSXFragmentVisitor<'a> {
   pub module: &'a Module,
   pub tree: Tree<Node>,
-  pub search_fn: &'a str
+  pub search_fn: &'a str,
+  pub search_type: SearchType
 }
 
 impl<'a> JSXFragmentVisitor<'a> {
-  pub fn new(module: &'a Module, search_fn: &'a str) -> Self {
+  pub fn new(module: &'a Module, search_fn: &'a str, search_type: SearchType) -> Self {
     JSXFragmentVisitor {
       module,
       tree: Tree::new(Node::Fragment(
         Fragment::new(Some(create_qualname(search_fn)))
       )),
-      search_fn
+      search_fn,
+      search_type
     }
   }
 }
 
 impl<'a> Visit for JSXFragmentVisitor<'a> {
   fn visit_fn_decl(&mut self, n: &FnDecl) {
-    if n.ident.sym.to_string() == self.search_fn {
+    if n.ident.sym.to_string() == self.search_fn && self.search_type == SearchType::Normal {
       match &*n.function {
         Function { body: Some(body), .. } => {
           for stmt in &body.stmts {
@@ -202,6 +254,32 @@ impl<'a> Visit for JSXFragmentVisitor<'a> {
       }
     }
   }
+
+  fn visit_class_method(&mut self,n: &swc_ecma_ast::ClassMethod) {
+    if self.search_type == SearchType::Class {
+      match &n.key {
+        PropName::Ident(ident) => {
+          if ident.sym.to_string() == self.search_fn {
+            match &*n.function {
+              Function { body: Some(body), .. } => {
+                for stmt in &body.stmts {
+                  match stmt {
+                    Stmt::Return(return_stmt) => {
+                      let mut jsx_visitor = JSXVisitor::new(&mut self.tree, self.module);
+                      return_stmt.visit_with(&mut jsx_visitor);
+                    },
+                    _ => {}
+                  }
+                }
+              },
+              _ => {}
+            }
+          }
+        },
+        _ => {}
+      }
+    }
+  }
 }
 
 pub struct AstVisitor<'a> {
