traverse: insert new statements(If any) after calling each walk_statement in walk_statements

[Dunqing]

Background

Here's an example of why we need to support it

// In
function A() {}

const B = hoc(() => {})

// out
function A() {}
var _s1 = A;

const B = hoc(_s2(() => {}))

function C() {}
var _s3 = C;

Looking at the example above, we can see that we need to add the var _sX = functionName statement after the function statement, and transform arrow function expression to _sX(() => {}).

For FunctionDeclaration, we can easily do it in exit_statements, but for ArrowFunctionExpression, we need to transform it in exit_arrow_function_expression. Due to these exit_* functions execution order is different. The output will look like:

// out
function A() {}
var _s2 = A;

const B = hoc(_s1(() => {}))

function C() {}
var _s3 = C;

As you can see from the output, exit_arrow_function_expression is executed first, then exit_statements. We need to make sure that the transformation order is consistent, so we can’t use exit_statements to implement it.

Possible Solution

1. TraverseCtx provides an API where we can store statements that we want to insert after exit_statement.
2. Mutate upwards. Provides an API that is similar to Babel's node.insertAfter(new).

[Dunqing]

One more complete example here

[Dunqing]

I've come up with another solution that doesn't require any changes to the traverse. But it requires AstNodeId or its workaround.

Save the statements you need to insert under the statement in a HashMap with key AstNodeId and value Vec<'a, Statement<'a>> and complete inserting in exit_statements

The implementation of exit_statements looks like this

fn exit_statements(&mut self, stmts: &mut Vec<'a, Statement<'a>>, ctx: &mut TraverseCtx<'a>) {
    let new_stmts = ctx.ast.vec();
    for statement in stmts.drain(..) {
        new_stmts.push(statement);
         // Check if there are any statements that need to be inserted below this statement. 
        if let Some(ss) = StmtsHashMap.get(statement.id) { 
            new_stmts.extend(ss)
        }
    }
}

[overlookmotel]

That solution sounds good. I propose that we implement #4807 to support that.

Further down the line, switching Program::body from a Vec<Statement> to ChunkedVec<Statement> (see oxc-project/backlog#35 (comment)) I'd hope would make it possible to add the top-level statement from the child visitor. But that is quite complex and will not be quick to come to fruition! So I think what you've suggested is best solution in meantime.

[overlookmotel]

I've made a PR for Address API, which can be used for unique identifier: #4810

[Dunqing]

I've made a PR for Address API, which can be used for unique identifier: #4810

That's great. Should we implement this inside a specific plugin, transformer, or traverse? This functionality is useful in many plugins, such as the TypeScript enum and arrow-function plugin.

[overlookmotel]

Actually, in this case I don't think you need either Address or AstNodeId. As the statements which need to locate in final pass are function declarations or variable declarations, I think could use SymbolId of the bindings to identify them (NB: if redeclarations are possible, would need to track when a symbol has been found already to ignore the redeclarations).

[Dunqing]

Actually, in this case I don't think you need either Address or AstNodeId. As the statements which need to locate in final pass are function declarations or variable declarations, I think could use SymbolId of the bindings to identify them (NB: if redeclarations are possible, would need to track when a symbol has been found already to ignore the redeclarations).

Oh, yes this is a workable approach