extend ECMAScript by adding new keywords and syntax I would like to extend ECMAScript by adding new keywords and syntax to it, for example:

|variableName| stipulates a special kind of variable which I would like to be able to include in a normal ECMAScript line of code, for example:

|variable1| = 1 + 1
|variable1| = |variable2|.length - 3


a more complex one would be:

@SpecialObject[propertName:propertyValue,..., propertyNameN:propertyValueN] {
    {|variable1| == true} =&gt; {
        console.log("condition 1 applies")
        |variable1| = false
    }
    .
    .
    .
    {|variable2|.length !== 0} =&gt; {
        console.log("variable 2 contains elements")
        |variable2| = Date.now()
    }       
}


I have built an initial prototype by impementing my own lexer and parser (using Chevrotain), but it is quite limited as it only supports those specific constructs of my new syntax, what I would like to do is to make it more powerful by being able to include ECMAScript code in my syntax, how could it be done?
I know of two plausible approaches:

One approach is to start with a lexer and parser for ECMAScript and modify them.

Another approach is to build your own preprocessor that takes as input a program with your syntax, and transforms it to EMCAScript which can be accepted by an existing interpreter (by replacing instances of |variable| with something that does fall within the normal ECMAScript syntax).  Since you haven't told us anything about the semantics of the |variable| syntax, I can't make any suggestions for a specific transformation to apply, but you might be able to work one out.