Deciphering the transpiled code and tracing it back to its original markup script

Question

Deciphering the transpiled code and tracing it back to its original markup script

Is there an easy solution to convert custom markup into different formats, even with nested markings? Examples include...

for \k[hello], the output is hello
for \i[world], the output is world
for hello \k[dear \i[world]], the output is
```
hello dear world
```
for \b[some text](url), the output is
```
<a href=”url”>some text</a>
```

for \r[some text](url), the output will be

<img alt=”some text” src=”url” />

Converting the above to javascript, while considering nesting, is surprisingly simple if the markup grammar remains consistent.

//
// Define the syntax and translation to javascript.
//
const grammar = {

  syntax: {
    k:      {markUp: `\k[`, javascript: `"+grammar.oneArg("k","`,  pre: `<b>`,  post: `</b>`},
    i:      {markUp: `\i[`, javascript: `"+grammar.oneArg("i","`,  pre: `<em>`, post: `</em>`},
    b:      {markUp: `\b[`, javascript: `"+grammar.twoArgs("b","`, pattern: `<a href="$2">$1</a>`},
    r:      {markUp: `\r[`, javascript: `"+grammar.twoArgs("r","`, pattern: `<img alt="$1" src="$2"/>`},
    close0: {markUp: `](`,   javascript: `","`},
    close1: {markUp: `)`,    javascript: `")+"`},
    close2: {markUp: `]`,    javascript: `")+"`}
  },

  oneArg: function( command, arg1 ) {
    return grammar.syntax[ command ].pre + arg1 + grammar.syntax[ command ].post;
  },

  twoArgs: function( command, arg1, arg2 ) {
    return grammar.syntax[ command ].pattern.split( `$1` ).join( arg1 ).split( `$2` ).join( arg2 );
  }
}


function transpileAndExecute( markUpString ) {
  // Convert the markUp to javascript.
  for ( command in grammar.syntax ) {
    markUpString = markUpString.split( grammar.syntax[ command ].markUp ).join( grammar.syntax[ command ].javascript );
  }

  // With the markUp now converted to javascript, let's execute it!
  return new Function( `return "${markUpString}"` )();
}

var markUpTest = `Hello \k[dear \i[world!]] \b[\i[Search:] \k[Engine 1]](http://www.google.com) \r[\i[Search:] \k[Engine 2]](http://www.yahoo.com)`;

console.log( transpileAndExecute( markUpTest ) );

It's important to address preprocessing issues like handling tokens within normal text. Using '\]' as a representation of ']' before transpiling and replacing occurrences afterward solves this issue easily.

Transpiling large amounts of markup using the defined grammar faces challenges when dealing with syntax errors. Capturing error details from the dynamically compiled javascript function can help identify line numbers and character positions, but mapping these errors back to the original markup poses a challenge.

If extra characters like ']' are misplaced, like after "Goodbye"...

Hello World! \b[\i[Goodbye]]] \k[World!]]

This results in the transpiled version...

"Hello World! "+grammar.twoArgs("b",""+grammar.oneArg("i","Goodbye")+"")+"")+" "+grammar.oneArg("k","World!")+"")+""
                                                                           ^

The goal is to map syntax errors back to the original markup efficiently. Any suggestions on making this process simpler would be appreciated. Thank you.

javascript algorithm transpiler

Answer 1

Answer №1

To ensure proper syntax in your text, I recommend creating a syntax checker similar to jsonlint or jslint. This checker will verify that all elements are properly closed before compiling the text for readability.

By implementing this functionality, you can easily debug any issues and prevent malformed code from causing chaos. Additionally, you can provide an error-highlighted document editor to assist users in editing their text.

Below is a proof of concept that focuses on checking if brackets are correctly closed:

var grammarLint = function(text) {
  var nestingCounter = 0;
  var isCommand = char => char == '\\';
  var isOpen = char => char == '[';
  var isClose = char => char == ']';
  var lines = text.split('\n');
  for(var i = 0; i < lines.length; i++) {
    text = lines[i];
    for(var c = 0; c < text.length; c++) {
     var char = text.charAt(c);
     if(isCommand(char) && isOpen(text.charAt(c+2))) {
        c += 2;
        nestingCounter++;
        continue;
     }
     if(isClose(char)) {
        nestingCounter--;
        if(nestingCounter < 0) {
            throw new Error('Command closed but not opened at on line '+(i+1)+' char '+(c+1));
        }
      }
    }
  }
  if(nestingCounter > 0) {
     throw new Error(nestingCounter + ' Unclosed command brackets found');
  }
}
text = 'Hello World! \\b[\\i[Goodbye]]] \\k[World!]]';
try {
   grammarLint(text);
}
catch(e) {
   console.error(e.message);
}
text = 'Hello World! \\b[\\i[Goodbye \\k[World!]]';
try {
   grammarLint(text);
}
catch(e) {
   console.error(e.message);
}

Answer 2

To ensure proper syntax in your text, I recommend creating a syntax checker similar to jsonlint or jslint. This checker will verify that all elements are properly closed before compiling the text for readability.

By implementing this functionality, you can easily debug any issues and prevent malformed code from causing chaos. Additionally, you can provide an error-highlighted document editor to assist users in editing their text.

Below is a proof of concept that focuses on checking if brackets are correctly closed:

var grammarLint = function(text) {
  var nestingCounter = 0;
  var isCommand = char => char == '\\';
  var isOpen = char => char == '[';
  var isClose = char => char == ']';
  var lines = text.split('\n');
  for(var i = 0; i < lines.length; i++) {
    text = lines[i];
    for(var c = 0; c < text.length; c++) {
     var char = text.charAt(c);
     if(isCommand(char) && isOpen(text.charAt(c+2))) {
        c += 2;
        nestingCounter++;
        continue;
     }
     if(isClose(char)) {
        nestingCounter--;
        if(nestingCounter < 0) {
            throw new Error('Command closed but not opened at on line '+(i+1)+' char '+(c+1));
        }
      }
    }
  }
  if(nestingCounter > 0) {
     throw new Error(nestingCounter + ' Unclosed command brackets found');
  }
}
text = 'Hello World! \\b[\\i[Goodbye]]] \\k[World!]]';
try {
   grammarLint(text);
}
catch(e) {
   console.error(e.message);
}
text = 'Hello World! \\b[\\i[Goodbye \\k[World!]]';
try {
   grammarLint(text);
}
catch(e) {
   console.error(e.message);
}

Answer 3

Answer №2

Explored the use of the javascript compiler to catch syntax errors in the transpiled code and link them back to the original markup by incorporating comments in the transpiled code. This method allows for pinpointing the markup error with more accuracy, even though the error messages are primarily transpiler syntax errors rather than direct markup errors.

This approach also incorporates CertainPerformance's technique ( Find details of SyntaxError thrown by javascript new Function() constructor ) of employing setTimeout to capture syntax errors in the transpiled code, along with a javascript Promise for smoother execution flow.

"use strict";

//
// Define the syntax and translation to javascript.
//
class Transpiler {
  // Code implementation
}

Included below are sample scenarios with flawed markup along with their respective console outputs. In one instance, there is an extra ] in the markup...

let markUp = `Hello World \k[Goodbye]] World`;
new Transpiler().transpileAndExecute( markUp ).then(result => console.log( result )).catch( err => console.log( err ));

The resultant transpiled code displays embedded comments pointing back to the character positions in the original markup. Upon encountering a javascript compiler error, it gets caught by transpilerSyntaxChecker, which uses these comments to identify the location in the markup, presenting the error on the console accordingly...

In another run, missing a closing ] results in...

let markUp = `\i[Hello World] \k[\i[Goodbye] World`;
new Transpiler().transpileAndExecute( markUp ).then(result => console.log( result )).catch(err => console.log( err ));

The ensuing error highlights the missing parenthesis in the transpiled code, pinpointing the range within the markup script as well. While not a perfect solution, this approach provides a workaround that facilitates error detection and troubleshooting process.

Answer 4

Explored the use of the javascript compiler to catch syntax errors in the transpiled code and link them back to the original markup by incorporating comments in the transpiled code. This method allows for pinpointing the markup error with more accuracy, even though the error messages are primarily transpiler syntax errors rather than direct markup errors.

This approach also incorporates CertainPerformance's technique ( Find details of SyntaxError thrown by javascript new Function() constructor ) of employing setTimeout to capture syntax errors in the transpiled code, along with a javascript Promise for smoother execution flow.

"use strict";

//
// Define the syntax and translation to javascript.
//
class Transpiler {
  // Code implementation
}

Included below are sample scenarios with flawed markup along with their respective console outputs. In one instance, there is an extra ] in the markup...

let markUp = `Hello World \k[Goodbye]] World`;
new Transpiler().transpileAndExecute( markUp ).then(result => console.log( result )).catch( err => console.log( err ));

The resultant transpiled code displays embedded comments pointing back to the character positions in the original markup. Upon encountering a javascript compiler error, it gets caught by transpilerSyntaxChecker, which uses these comments to identify the location in the markup, presenting the error on the console accordingly...

In another run, missing a closing ] results in...

let markUp = `\i[Hello World] \k[\i[Goodbye] World`;
new Transpiler().transpileAndExecute( markUp ).then(result => console.log( result )).catch(err => console.log( err ));

The ensuing error highlights the missing parenthesis in the transpiled code, pinpointing the range within the markup script as well. While not a perfect solution, this approach provides a workaround that facilitates error detection and troubleshooting process.

Deciphering the transpiled code and tracing it back to its original markup script

Answer №1

Answer №2

Similar questions

What is the best way to set multiple headers and change the content type when needed?

Incorporating Styled Components in an NPM Package

What is the best way to traverse through a nested JSON file with d3.js?

Securing Email and Password Data in Cypress Tests

Having trouble with Semantic UI Modal onShow / onVisible functionality?

What is the procedure for incorporating JavaScript into my tic-tac-toe game's HTML and CSS?

What steps are involved in forming a JavaScript promise that resolves into a thenable object?

Does the presence of all angular2 bundles in index.html result in imports retrieving data from memory rather than making another request to the server?

Steps to open and configure a Mobile-Angular modal from another controller

React component triggering dynamic redirection based on URL query changes

What could be causing my canvas element to only display a blank black screen?

What causes the other array to be affected when one is changed?

Learn the best way to handle special characters like <, >, ", ', and & in Javascript, and successfully transfer escaped data from one text box to another

Implementing a JavaScript function that uses the AJAX method to confirm and update

The jQuery .accordion() feature is not functioning properly due to the failure to load jQuery into the HTML document

Could anyone please provide advice on how to resolve the issue I encountered when trying to make Post and get Http method calls using protractor?

Tips for showcasing the output information in react framework

Ways to capture the value of several images and add them to an array

Find out whether the object is located behind another item

Pause until the array is populated before displaying the components