How to better modify AST nodes?

[yisar]

What should I do to replace an AST node with another node of a different type?

For example:

// input:
<For each={list}/>
// output:
{list.map()}

I find that SWC is difficult to modify when the semantics and types are completely different. Is there any good idea here?

cc @devongovett @kdy1

[kdy1]

Currently, swc is designed to modify AST nodes from rust side.

if you are using swc form rust, you can simply implement Fold.

[yisar]

Yes, it is rust. What's the difference between fold and visit_mut?

[kdy1]

It's documented at https://docs.rs/swc_visit/0.2.5/swc_visit/#fold-vs-visitmut

[yisar]

@kdy1

fn fold_jsx_namespaced_name(&mut self, node: ast::JSXNamespacedName) -> ast::Ident { // here renturn a different type
        if *node.name.sym == *"key" {
            return ast::Ident {
                span: DUMMY_SP,
                optional: false,
                sym: format!("{}", "key").into(),
            };
        } else {
            return node;
        }
 }

In fact, I want to return a completely different ast node. I need to completely distort the semantics and modify the structure in the right place.

I really can't find a good way. I've cried many times. Do you have a way?

[kdy1]

You can override fold_expr instead. Be sure to handle children nodes using node.fold_children_with(self) if required.

[kdy1]

One good example is the jsx pass.

swc/ecmascript/transforms/react/src/jsx/mod.rs

Lines 884 to 917 in 2c52021

	fn visit_mut_expr(&mut self, expr: &mut Expr) {
	let top_level_node = self.top_level_node;
	let mut did_work = false;
	if let Expr::JSXElement(el) = expr {
	did_work = true;
	// <div></div> => React.createElement('div', null);
	*expr = self.jsx_elem_to_expr(*el.take());
	} else if let Expr::JSXFragment(frag) = expr {
	// <></> => React.createElement(React.Fragment, null);
	did_work = true;
	*expr = self.jsx_frag_to_expr(frag.take());
	} else if let Expr::Paren(ParenExpr {
	expr: inner_expr, ..
	}) = expr
	{
	if let Expr::JSXElement(el) = &mut **inner_expr {
	did_work = true;
	*expr = self.jsx_elem_to_expr(*el.take());
	} else if let Expr::JSXFragment(frag) = &mut **inner_expr {
	// <></> => React.createElement(React.Fragment, null);
	did_work = true;
	*expr = self.jsx_frag_to_expr(frag.take());
	}
	}
	if did_work {
	self.top_level_node = false;
	}
	expr.visit_mut_children_with(self);
	self.top_level_node = top_level_node;
	}

[yisar]

I tried your method and found it still couldn't work.
I want to input Expr and output Stmt.

// input:
<For each={list}/>
// output:
{list.map()} // this is a Stmt, not Expr.

not this:

// input:
<For each={list}/>
// output:
list.map()

Do you have any ideas in this situation?

@kdy1

[kdy1]

Implement visit_mut_stmt

[yisar]

Implement visit_mut_stmt

<For each={list}/> is not a Stmt, but a Expr, it cound not enter the visit_mut_stmt function.

[kdy1]

No, every expression belong to a statement.
It'sExpressionStatement, not Expression.

[kdy1]

In swc, it's Stmt::Expr or ExprStmt

[yisar]

In swc, it's Stmt::Expr or ExprStmt

Thank u, i am going to have a try!

[yisar]

@kdy1 Thank you, I found a better way to distort semantics, use JSXElementChild

match c {
            ast::JSXElementChild::JSXElement(v) => {
                ast::JSXElementChild::JSXExprContainer...

I have to say, it's really hard [cring]

[yisar]

@kdy1 I am comming back 😭

// input
<Component>
  <view slot=header>header</view>
</Component>

// output
<Component $slot$header={<view>header</view>}>
</Component>

When I need to change the slot tag into render props, I need to modify the reference of the parent. Do you have a good idea?

[kdy1]

There are some cases which requires info from parent, but if you want to use the parent node, you have to clone it.
Is there any reason you can't clone?

[yisar]

I need to use the child information, and then modify the parent node.
Look at the above use cases carefully. The child will become the parent's props

[kdy1]

Then you can implement the visitor method for the parent node.

[yisar]

Do you mean to traverse twice? First, traverse the children to collect information, and then modify the value of the parent through the visitor?

[kdy1]

I didn't mean it, but it's also a good solution.