Ts-morph: SyntaxList.insertChildText throws error when writing property

[lazarljubenovic]

Repro

const tsSimpleAst = require("ts-simple-ast")
const { stripIndent } = require('common-tags')
const {
    default: Project,
    SyntaxKind,
} = tsSimpleAst

const project = new Project({useVirtualFileSystem: true})
const file = project.createSourceFile(`test.ts`, stripIndent`
export class Foo {
  m1 () { }
}`)

const classDeclaration = file.getFirstDescendantByKindOrThrow(SyntaxKind.ClassDeclaration)
const syntaxList = classDeclaration.getFirstDescendantByKindOrThrow(SyntaxKind.SyntaxList)

syntaxList.insertChildText(0, writer => {
  writer.write(`p1 = 1`)
})

console.log(file.getFullText())

Demo

https://runkit.com/lazarljubenovic/5b48dbd8c790e80012b9655c

---

In my original code I'm getting Error: Error replacing tree! Perhaps a syntax error was inserted (Current: MethodDeclaration -- New: PropertyDeclaration). but while trying to repro I've gotten the other one which I also don't understand so let's start from there.

It works if I add a comment // p1 = 1, so it seems like it's really something wrong with the syntax. Is this a bad way of adding props? (I need to add a constructor in my original code.)

The error message says that it's generating

export class Foo {\n    p1 = 1\n  m1 () { }\n}

which seems fine to me.

[dsherret]

@lazarljubenovic thanks for reporting. I'll look into this on the weekend.

I recommend using classDeclaration.insertProperty to insert a property and .insertConstructor to insert a constructor

[lazarljubenovic]

Oh god, there's getConstructors included and everything... :heart_eyes: The disadvantage of this lib is that it's too awesome for its own good lol
Thanks!

[dsherret]

Oh man, I know! I've wished there was a way I could tell the IDE how to prioritize what's shown in autocomplete (ex. show ClassDeclaration specific methods first when using a ClassDeclaration). There's too many methods.

[cancerberoSgx]

@dsherret that's a good idea for a TypeScript Language Service Plugin since autocomplete are handled by tsserver ! taking notes

[lazarljubenovic]

show ClassDeclaration specific methods first when using a ClassDeclaration

That's exactly how it's done with WebStorm.

I just didn't even check and went straight for the AST viewer where I've noticed the shape of what I'm working with. :sweat_smile:

[dsherret]

This was because const syntaxList = classDeclaration.getFirstDescendantByKindOrThrow(SyntaxKind.SyntaxList); will return the first descendant syntax list, which in this case is the one for the modifiers.

The library was then accidentally inserting the text into what I call the "child syntax list," which is the one that contains the body of the class (where the MethodDeclaration is). Then the other part of the code was wondering why it found new children in that syntax list instead of the one with the export keyword.

Anyway, fixed in 12.5.4.

@cancerberoSgx that would be cool, but would be nice if it just worked in vscode, visual studio, etc. by default :(

@lazarljubenovic It's neat that WebStorm does that... I like what JetBrains has done with resharper in visual studio for c#, but I kept running into way too many problems using it for TypeScript so I disabled it for TypeScript a while ago.

[lazarljubenovic]

Ooh... In AST viewer I was using an example without export and completely missed the fact that I added it in the repro _and_ my code. :roll_eyes: Thanks for fixing it so quickly!