Insert a comment prior to a function with the TypeScript Compiler API

Question

Insert a comment prior to a function with the TypeScript Compiler API

I have a TypeScript file that needs to be transpiled into JavaScript. As part of this conversion process, I want to include a comment before every function using the TypeScript Compiler API.

I experimented with two different methods. One involved accessing the SourceFile and modifying its statements like so:

const program = ts.createProgram([args.input], {});
const srcFile = find(program.getSourceFiles(), (sourceFile) => !sourceFile.isDeclarationFile);
srcFile.statements = ts.createNodeArray(srcFile.statements.map((statement) => {
    if (!ts.isFunctionDeclaration(statement)) {
        return statement;
    }
    return ts.addSyntheticLeadingComment(
        statement,
        ts.SyntaxKind.MultiLineCommentTrivia,
       "My desired comment",
        true,
    );
}));

This approach resulted in the following error:

TypeError: Cannot read property 'emitNode' of undefined
at getOrCreateEmitNode (/Users/.../node_modules/typescript/lib/typescript.js:52792:19)
at getOrCreateEmitNode (/Users/.../node_modules/typescript/lib/typescript.js:52801:17)
at setSyntheticLeadingComments (/Users/.../node_modules/typescript/lib/typescript.js:52918:9)
at Object.addSyntheticLeadingComment (/Users/.../node_modules/typescript/lib/typescript.js:52923:16)
at /Users/.../dist/index.js:26:15
at Array.map (<anonymous>)
at Object.<anonymous> (/Users/.../dist/index.js:21:60)
at Module._compile (internal/modules/cjs/loader.js:654:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)
at Module.load (internal/modules/cjs/loader.js:566:32)

Prior to the ts.addSyntheticLeadingComment, when I printed the statement, it was indeed a

FunctionDeclaration</code as expected, but lacked the <code>emitNode

field that should have been created by the getOrCreateEmitNode.

The second method I attempted followed a similar path, encountering the same issue. Rather than replacing the original srcFile.statement, I used a printer instead:

const printer = ts.createPrinter(undefined, {
    substituteNode: (hint, node) => {
        if (ts.isFunctionDeclaration(node)) {
            return ts.addSyntheticLeadingComment(
                node,
                ts.SyntaxKind.MultiLineCommentTrivia,
               "Desired comment here",
                true,
           );
        }
    },
});

console.log(printer.printFile(srcFile));

However, this also produced the same error as seen in previous code attempts.

The TypeScript file I am attempting to modify is quite simple:

function myFunc(a: number, b: number): number {
    return a + b;
}

typescript typescript-compiler-api

Answer 1

Answer №1

Remember, when working with the AST, it's important to understand that comments are not part of it. Therefore, when modifying nodes, avoid substituting comments and instead utilize addSyntheticLeadingComment directly on the node without worrying about the return value.

To illustrate this concept, consider the code snippet below:

import * as ts from "typescript";

const file = ts.createSourceFile("test.ts", `function myFunc(a: number, b: number): number {
    return a + b;
}`, ts.ScriptTarget.Latest, true);
const functionDec = file.statements.find(ts.isFunctionDeclaration)!;

ts.addSyntheticLeadingComment(functionDec, ts.SyntaxKind.MultiLineCommentTrivia,
    "My long desired comment", true);

const printer = ts.createPrinter({ removeComments: false });
console.log(printer.printFile(file));

When executed, the output will be as follows:

/*My long desired comment*/
function myFunc(a: number, b: number): number {
    return a + b;
}

Answer 2

Remember, when working with the AST, it's important to understand that comments are not part of it. Therefore, when modifying nodes, avoid substituting comments and instead utilize addSyntheticLeadingComment directly on the node without worrying about the return value.

To illustrate this concept, consider the code snippet below:

import * as ts from "typescript";

const file = ts.createSourceFile("test.ts", `function myFunc(a: number, b: number): number {
    return a + b;
}`, ts.ScriptTarget.Latest, true);
const functionDec = file.statements.find(ts.isFunctionDeclaration)!;

ts.addSyntheticLeadingComment(functionDec, ts.SyntaxKind.MultiLineCommentTrivia,
    "My long desired comment", true);

const printer = ts.createPrinter({ removeComments: false });
console.log(printer.printFile(file));

When executed, the output will be as follows:

/*My long desired comment*/
function myFunc(a: number, b: number): number {
    return a + b;
}

Answer 3

Answer №2

Sarah Johnson's response is accurate, however, I encountered a recurring issue of

TypeError: Cannot read property 'emitNode' of undefined when attempting to use getOrCreateEmitNode

, despite various attempted solutions.

It was eventually discovered that the absence of the fourth parameter in ts.createSourceFile named setParentNodes was causing the problem. By enabling this parameter as true, the utilization of addSyntheticLeadingComment became possible.

Essentially, the setParentNodes parameter assigns each Node's parent attribute.

getOrCreateEmitNode requires access to parent references within the tree structure. For more insights on the significance of setParentNodes, refer to this pertinent Github discussion

Answer 4

Sarah Johnson's response is accurate, however, I encountered a recurring issue of

TypeError: Cannot read property 'emitNode' of undefined when attempting to use getOrCreateEmitNode

, despite various attempted solutions.

It was eventually discovered that the absence of the fourth parameter in ts.createSourceFile named setParentNodes was causing the problem. By enabling this parameter as true, the utilization of addSyntheticLeadingComment became possible.

Essentially, the setParentNodes parameter assigns each Node's parent attribute.

getOrCreateEmitNode requires access to parent references within the tree structure. For more insights on the significance of setParentNodes, refer to this pertinent Github discussion

Insert a comment prior to a function with the TypeScript Compiler API

Answer №1

Answer №2

Similar questions

MongoDB TypeScript issue: "The type 'ObjectId' cannot be assigned to type 'never'."

There was an issue thrown during the afterAll function: Unable to access properties of undefined

Is emitting a side effect event acceptable within an RxJS pipe?

Find a specific string within an array where both the keys and values are subject to change

Utilize the composition API for importing modules

Detonating the second-level element in a PHP/Typescript array

The type 'typeof globalThis' does not have an index signature, therefore the element is implicitly of type 'any'. Error code: ts(7017) in TypeScript

Using Angular with Google Maps: Learn how to retrieve a list of markers from a map and implement onClick events for each one

Retrieve and showcase information from Firebase using Angular

Error: Typescript error at line 18 in app.ts - Cannot locate the 'server' namespace

Broaden material-ui component functionality with forwardRef and typescript

An Axios error message indicates ERR_NETWORK and ERR_EMPTY_RESPONSE

Is there a way to determine the height of the ion-footer?

Ensure that TypeScript compiled files are set to read-only mode

Retrieve today's bookings using a Firebase query and store them in an array

Is the blur effect on the navbar not visible when there is an animated element positioned behind it?

Using Typescript in React to render font colors with specific styling

What is the best method for showcasing information within an Angular Material table?

This error message in AngularJS indicates that the argument 'fn' is not being recognized as a function

How can one effectively utilize TypeScript with native JavaScript methods and calls?