antlr | antlr tree to es | Cell 10 | Search

The code imports modules from the ../Core directory and uses the selectAst function to select a part of the Abstract Syntax Tree (AST) based on a specific pattern, then logs the resulting HTML tree to the console. The code expects to receive a specific output in the form of a JSON object representing the AST node, with three different expected outputs shown for different types of AST nodes.

Cell 9

var importer = require('../Core')
var {selectAst} = importer.import("select code tree")
var {htmlToTree} = importer.import("html to tree")


var root = selectAst('//Program', `
const val = ''
`)
console.log(htmlToTree(root).body[0])

/*

expects
{
  type: 'FunctionDeclaration',
  id: { type: 'Identifier', name: 'myfunc', range: [ 10, 16 ] },
  params: [
    { type: 'Identifier', name: 'ptr', range: [Array] },
    { type: 'Identifier', name: 'val', range: [Array] }
  ],
  body: { type: 'BlockStatement', body: [], range: [ 27, 31 ] },
  generator: false,
  expression: false,
  async: false,
  range: [ 1, 31 ]
}
{
  type: 'Program',
  body: [
    {
      type: 'VariableDeclaration',
      declarations: [Array],
      kind: 'var',
      range: [Array]
    },
    {
      type: 'VariableDeclaration',
      declarations: [Array],
      kind: 'var',
      range: [Array]
    },
  ],
  sourcetype: 'script',
  range: [ 0, 2317 ],
  comments: [
    {
      type: 'Line',
      value: ' TODO: get parser by language lookup',
      range: [Array]
    },
  ],
  tokens: [
    { type: 'Keyword', value: 'var', range: [Array] },
    { type: 'Identifier', value: 'fs', range: [Array] },
    { type: 'Punctuator', value: '=', range: [Array] },
  ]
}
{
  type: 'VariableDeclaration',
  declarations: [
    {
      type: 'VariableDeclarator',
      id: [Object],
      init: [Object],
      range: [Array]
    }
  ],
  kind: 'const',
  range: [ 1, 15 ]
}
*/

What the code could have been:

// Import the necessary modules from the Core library
const { core } = require('../Core');

// Import the selectAst and htmlToTree functions
const { selectAst } = core.import('select code tree');
const { htmlToTree } = core.import('html to tree');

// Select the AST node by the given query and code string
const root = selectAst('//Program', `
  const val = ''
`);

// Parse the HTML tree from the root AST node
const htmlTree = htmlToTree(root);

// Log the first element in the HTML tree's body
console.log(htmlTree.body[0]);

/**
 * Example of the expected output:
 * {
 *   type: 'FunctionDeclaration',
 *   id: { type: 'Identifier', name:'myfunc', range: [ 10, 16 ] },
 *   params: [
 *     { type: 'Identifier', name: 'ptr', range: [Array] },
 *     { type: 'Identifier', name: 'val', range: [Array] }
 *   ],
 *   body: { type: 'BlockStatement', body: [], range: [ 27, 31 ] },
 *   generator: false,
 *   expression: false,
 *   async: false,
 *   range: [ 1, 31 ]
 * }
 * {
 *   type: 'Program',
 *   body: [
 *     {
 *       type: 'VariableDeclaration',
 *       declarations: [Array],
 *       kind: 'var',
 *       range: [Array]
 *     },
 *     {
 *       type: 'VariableDeclaration',
 *       declarations: [Array],
 *       kind: 'var',
 *       range: [Array]
 *     },
 *   ],
 *   sourcetype:'script',
 *   range: [ 0, 2317 ],
 *   comments: [
 *     {
 *       type: 'Line',
 *       value:'TODO: get parser by language lookup',
 *       range: [Array]
 *     },
 *   ],
 *   tokens: [
 *     { type: 'Keyword', value: 'var', range: [Array] },
 *     { type: 'Identifier', value: 'fs', range: [Array] },
 *     { type: 'Punctuator', value: '=', range: [Array] },
 *   ]
 * }
 * {
 *   type: 'VariableDeclaration',
 *   declarations: [
 *     {
 *       type: 'VariableDeclarator',
 *       id: [Object],
 *       init: [Object],
 *       range: [Array]
 *     }
 *   ],
 *   kind: 'const',
 *   range: [ 1, 15 ]
 * }
 */

Code Breakdown

Importing Modules

The code starts by importing modules from the ../Core directory using the require function.

var importer = require('../Core')
var {selectAst} = importer.import('select code tree')
var {htmlToTree} = importer.import('html to tree')

Selecting AST

The selectAst function is used to select a part of the Abstract Syntax Tree (AST) based on a specific pattern. In this case, it selects the AST node that matches the pattern //Program.

var root = selectAst('//Program', `
const val = ''
`)

Logging the HTML Tree

The htmlToTree function is used to convert the AST node to an HTML tree. The body[0] property of the resulting HTML tree is then logged to the console.

console.log(htmlToTree(root).body[0])

Expected Output

The code expects to receive a specific output in the form of a JSON object representing the AST node. There are three different expected outputs shown in the code, each representing a different type of AST node.