How to comment out the function in the input?

[MubashirWaheed]

I am trying to write a custom babel plugin that comments out the function in the input.
Here is the first example

const babel = require('@babel/core');
const t = require('@babel/types');

const code = `
function greet(name) {
  return 'Hello ' + name;
}
console.log(greet('Bob'));`;

const output = babel.transformSync(code, {
  plugins: [
    function CommentOut() {
      return {
        visitor: {
          FunctionDeclaration(path) {
            const value = path.getSource();
            t.addComment(path.node, 'leading', `${value} `)
            path.remove();
          },
        },
      };
    },
  ],
});

If I log the output I get the following and that's what I intended to get

'/*function greet(name) {\n' +
    "  return 'Hello ' + name;\n" +
    '} */\n' +
    "console.log(greet('Bob'));",

But the issue comes when I slightly change the input to

const code = `
+console.log("Test")
function greet(name) {
  return 'Hello ' + name;
}
console.log(greet('Bob'));`
`

If I run the above babel code then the function comment is not added and I get console.log("Test");\nconsole.log(greet('Bob'));
But the goal is to get

"console.log("Test")\n"+
'/*function greet(name) {\n' +
    "  return 'Hello ' + name;\n" +
    '} */\n' +
    "console.log(greet('Bob'));"

How this can be achieved?
I tried path.insertAfter(t.addComment(path.node, 'leading', ${value} )); but the issue is original function is not removed for some reason
output

'console.log("Test");\n' +
    '/*function greet(name) {\n' +
    "  return 'Hello ' + name;\n" +
    '} */\n' +
    'function greet(name) {\n' +
    "  return 'Hello ' + name;\n" +
    '}\n' +
    "console.log(greet('Bob'));",

[MubashirWaheed]

Why does the node is not removed when path.insertAfter() or path.insertBefore is used?

[JLHwung]

Attaching comments to a removed node is sort of undefined behaviour. Can you try replacing the function declaration into an empty statement with source comment attached?

{
  visitor: {
    FunctionDeclaration(path) {
      const value = path.getSource();
      const replaced = path.replaceWith(t.emptyStatement());
      t.addComment(replaced.node, "leading", `${value} `);
    },
  },
};

[MubashirWaheed]

This doesn't give me the desired result. The output doesn't have the commented function in either case (with the first log statement and without the first log statement)

[MubashirWaheed]

Update
I changed it to

{
  visitor: {
    FunctionDeclaration(path) {
      const value = path.getSource();
      t.addComment(path.node, "leading", `${value} `);
      path.replaceWith(t.emptyStatement());      
    },
  },
};

but now there is an unnecessary comma at the end of empty string

'console.log("Test");\n' +
    '/*function greet(name) {\n' +
    "  return 'Hello ' + name;\n" +
    '} */\n' +
    ';\n' +
    "console.log(greet('Bob'));",