使用新语法扩展 Javascript

Question

Im working on a project in which i'm trying to simplify the syntax of an older package, ie:

I want to convert something like

digitalPulse(LED2,1,1000) to puck.LED.flash("red",1000)

Where LED2 is a red LED always. There are around 50 of these examples.

After investigating this online everything is pointing to building a transpiler/preprocessor. Is this the best method as these blocks of code will be used within files, an example of their usage could be.

let puck = new Puck();

if(...){
    puck.LED.flash("green",1000);
else {
    puck.LED.flash("red",1000);
}

Sidenote

This particular example would be converted to

if(...){
    digitalPulse(LED1,1,1000)}
} else {
    digitalPulse(LED2,1,1000)}
}

In addition to this there are also

setWatch(function(){
    LED2.set();
}, BTN,{edge:"rising", repeat:true, debounce:50})

which should translate to below, which accepts other parsed code in the function such as below: Some functions such as onPress assume default values like in this case there is no need to specify BTN or the object containing edge, repeat and debounce

puck.onPress(function(){
    puck.LED.on("red");
}

How can I approach this without overcomplicating it as ive already fallen down a rabbit hole of transpilers/preprocessors trying my own tokenization, parsing to generate an AST and transpiling, but ive not been successful and havent been able to find an example of this online to see exactly.

Is there a better approach to this problem can anybody recommend tools to assist with this or with direction of where I should be researching.

Answer 1

My understanding is that you want to migrate a legacy procedural code to modern object oriented Javascript.

The 1st thing is to understand what is the target:

• nodejs: you don't need any preprocessor or transpilers to support Javascript classes
• a web browser: excepting very old version like Inte.net Explorer, every modern browsers supports Javascript classes. So the following code doesn't need any preprocessor or transpilers:

 const div = document.querySelector("div"); class Led { constructor() { } flash(color, time) { div.style.backgroundColor = color; setTimeout(() => div.style.backgroundColor = "", time); } } class Puck { constructor() { this.LED = new Led(); } } const puck = new Puck(); if(Math.random() > 0.5){ puck.LED.flash("green", 1000); } else { puck.LED.flash("red", 1000); }

 <div style="width: 100px; height: 100px">LED</div>

If you really need to target old browser versions, I suggest to use Babel as a transpiler.

Feel free to give more detail so I can give you a more appropriate answer.