Skip to content

Commit

Permalink
feat: 支持类组件
Browse files Browse the repository at this point in the history
  • Loading branch information
@luckyadam
luckyadam committed Sep 26, 2023
1 parent f45976c commit 416e595
Showing 3 changed files with 169 additions and 37 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -16,7 +16,7 @@

### JSX DOM 树构造
- [x] 支持函数组件
- [ ] 支持类组件
- [x] 支持类组件
- [ ] 支持 JSX 分离的写法
- [ ] 支持遍历子组件

112 changes: 77 additions & 35 deletions asset/mod.jsx
View file
Original file line number Diff line number Diff line change
@@ -9,44 +9,86 @@ function Cc() {
)
}

function Mod() {
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>
</div>
<div className='cnt_row1'>
<img
className='img'
src='//img12.360buyimg.com/img/jfs/t1/100881/15/44805/18567/64f58062F1b45e0cb/caf065a7410087ce.png'
></img>
<div className='cnt_col'>
<span className='line1 instruction1'>巴拉巴拉小魔仙</span>
<span className='line1 txt'>成员: 4000+</span>
export default class Mod extends React.Component {
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>
</div>
<div className='cnt_row2'>
<div className='cnt_row1'>
<img
className='icon1'
src='//img11.360buyimg.com/img/jfs/t1/175578/35/40256/1981/64f58062Fddaf1a21/f1111d9988a65ccc.png'
className='img'
src='//img12.360buyimg.com/img/jfs/t1/100881/15/44805/18567/64f58062F1b45e0cb/caf065a7410087ce.png'
></img>
<div className='cnt_col'>
<span className='line1 instruction1'>巴拉巴拉小魔仙</span>
<span className='line1 txt'>成员: 4000+</span>
</div>
<div className='cnt_row2'>
<img
className='icon1'
src='//img11.360buyimg.com/img/jfs/t1/175578/35/40256/1981/64f58062Fddaf1a21/f1111d9988a65ccc.png'
></img>
<span className='instruction2'>slslsl-jsj</span>
<span className='txt1'>复制</span>
</div>
</div>
<div className='cnt_row3'>
<span className='line2 txt2'>
团长介绍：售前售后进群售前售后进群售前售后进群售前售后进群VXklsidohh...
</span>
<img
className='img1'
src='//img14.360buyimg.com/img/jfs/t1/206378/24/25778/195/64eca527F378f17a2/c1623681708609fd.png'
></img>
<span className='instruction2'>slslsl-jsj</span>
<span className='txt1'>复制</span>
</div>
</div>
<div className='cnt_row3'>
<span className='line2 txt2'>
团长介绍：售前售后进群售前售后进群售前售后进群售前售后进群VXklsidohh...
</span>
<img
className='img1'
src='//img14.360buyimg.com/img/jfs/t1/206378/24/25778/195/64eca527F378f17a2/c1623681708609fd.png'
></img>
</div>
</div>
)
)
}
}
export default Mod

// function Mod() {
// 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>
// </div>
// <div className='cnt_row1'>
// <img
// className='img'
// src='//img12.360buyimg.com/img/jfs/t1/100881/15/44805/18567/64f58062F1b45e0cb/caf065a7410087ce.png'
// ></img>
// <div className='cnt_col'>
// <span className='line1 instruction1'>巴拉巴拉小魔仙</span>
// <span className='line1 txt'>成员: 4000+</span>
// </div>
// <div className='cnt_row2'>
// <img
// className='icon1'
// src='//img11.360buyimg.com/img/jfs/t1/175578/35/40256/1981/64f58062Fddaf1a21/f1111d9988a65ccc.png'
// ></img>
// <span className='instruction2'>slslsl-jsj</span>
// <span className='txt1'>复制</span>
// </div>
// </div>
// <div className='cnt_row3'>
// <span className='line2 txt2'>
// 团长介绍：售前售后进群售前售后进群售前售后进群售前售后进群VXklsidohh...
// </span>
// <img
// className='img1'
// src='//img14.360buyimg.com/img/jfs/t1/206378/24/25778/195/64eca527F378f17a2/c1623681708609fd.png'
// ></img>
// </div>
// </div>
// )
// }
92 changes: 91 additions & 1 deletion src/visitor.rs
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
use ego_tree::{NodeId, Tree};
use html5ever::{Attribute, tendril::StrTendril};
use swc_ecma_ast::{JSXElement, JSXElementName, JSXAttrOrSpread, JSXAttrName, JSXAttrValue, Lit, JSXExpr, Expr, JSXElementChild, Module, Function, Stmt, ExportDefaultExpr};
use swc_ecma_ast::{JSXElement, JSXElementName, JSXAttrOrSpread, JSXAttrName, JSXAttrValue, Lit, JSXExpr, Expr, JSXElementChild, Module, Function, Stmt, ExportDefaultExpr, ExportDefaultDecl, DefaultDecl, ClassDecl, ClassMember, PropName};
use swc_ecma_visit::{Visit, VisitWith};

use crate::{scraper::{Node, Element}, utils::{recursion_jsx_menber, create_qualname}};
@@ -166,6 +166,44 @@ impl<'a> Visit for AstVisitor<'a> {
}
}

fn visit_class_decl(&mut self, n: &ClassDecl) {
match &self.export_default_name {
Some(name) => {
if n.ident.sym.to_string() == name.as_str() {
for member in &n.class.body {
match member {
ClassMember::Method(method) => {
match &method.key {
PropName::Ident(ident) => {
if ident.sym.to_string() == "render" {
match &*method.function {
Function { body: Some(body), .. } => {
for stmt in &body.stmts {
match stmt {
Stmt::Return(return_stmt) => {
let mut jsx_visitor = JSXVisitor::new(self.tree);
return_stmt.visit_with(&mut jsx_visitor);
},
_ => {}
}
}
},
_ => {}
}
}
},
_ => {}
}
},
_ => {}
}
}
}
},
None => {}
}
}

fn visit_export_default_expr(&mut self, n: &ExportDefaultExpr) {
match &*n.expr {
Expr::Ident(ident) => {
@@ -177,4 +215,56 @@ impl<'a> Visit for AstVisitor<'a> {
_ => {}
}
}

fn visit_export_default_decl(&mut self, n: &ExportDefaultDecl) {
match &n.decl {
DefaultDecl::Fn(n) => {
match &*n.function {
Function { body: Some(body), .. } => {
for stmt in &body.stmts {
match stmt {
Stmt::Return(return_stmt) => {
let mut jsx_visitor = JSXVisitor::new(self.tree);
return_stmt.visit_with(&mut jsx_visitor);
},
_ => {}
}
}
},
_ => {}
}
},
DefaultDecl::Class(n) => {
for member in &n.class.body {
match member {
ClassMember::Method(method) => {
match &method.key {
PropName::Ident(ident) => {
if ident.sym.to_string() == "render" {
match &*method.function {
Function { body: Some(body), .. } => {
for stmt in &body.stmts {
match stmt {
Stmt::Return(return_stmt) => {
let mut jsx_visitor = JSXVisitor::new(self.tree);
return_stmt.visit_with(&mut jsx_visitor);
},
_ => {}
}
}
},
_ => {}
}
}
},
_ => {}
}
},
_ => {}
}
}
},
_ => {}
}
}
}

0 comments on commit 416e595

Please # to comment.