syntax | Cell 13 | Cell 15 | Search

The code imports dependencies, defines a function to remove Unicode characters, and implements a treeToStr function to recursively convert a statement tree to a string, handling various data types and attributes. The treeToStr function traverses the tree, escaping special characters and including type attributes in the string representation.

Run example

npm run import -- "tree to html"

tree to html

var importer = require('../Core');
var {selectDom} = importer.import("select tree")

//TODO: remove \u200b characters
var specialChars = (str) => {
    var special = {
        '&':'&',
        '<':'&lt;',
        '>':'&gt;',
        '"':'&quot;',
        "'":'&apos;'
    }
    Object.keys(special).forEach(s => {
        str = str.replace(new RegExp(s, 'ig'), special[s])
    })
    return str
}

function treeToStr(statement, parent) {
    var {type} = statement;
    var result = ``, attrs = ``;
    var isList = true;
    for(var i in statement) {
        if(parseInt(i) + '' === i + '') {
            result += treeToStr(statement[i], parent)
            continue;
        }
        isList = false;
        var jsType = typeof statement[i];
        if(jsType === 'object' && statement[i]) {
            jsType = Object.getPrototypeOf(statement[i]).constructor.name;
        }
        // if the property is an Object, print out as a child
        // TODO: replace this type property when converting other trees
        //   should be like getEl() treeToStr(() => el.type)
        if(statement[i] && typeof statement[i].type !== 'undefined'
           // or if the property is an Array,
           //   print them out as child elements
           || (Array.isArray(statement[i]) && statement[i].length
           && typeof statement[i][0].type !== 'undefined')) {
            // print out the other keys just for fun matching
            attrs +=  `
${i}="" ${i}-type="${jsType}"`;
            result += `
${treeToStr(statement[i], i)}`
            // output as child element and <-attr> elements
            //   for posterity, only child elements are return on the select,
            //   but attr elements can still be matched
        } else {
            // if the property is not an object, i.e. native types
            if(typeof statement[i] !== 'string') {
                attrs +=  `
${i}="${specialChars(JSON.stringify(statement[i]))}" ${i}-type="${jsType}"`
            } else {
                attrs +=  `
${i}="${specialChars(statement[i])}" ${i}-type="${jsType}"`
            }
        }
    }
    
    return isList ? result : `
<${type}${attrs}${parent ? `
 parent-attr="${parent}"`: ``}>${result}</${type}>`
}

function treeToHtml(tree) {
    var body = treeToStr(tree);
    return selectDom('//BODY', '<BODY>' + body + '</BODY>');
}

module.exports = {
    treeToHtml
}

What the code could have been:

const { selectDom } = require('../Core');

// Function to replace special characters with their HTML entities
const escapeHtmlChars = (str) => {
  return str.replace(/&/g, '&')
   .replace(//g, '>')
   .replace(/"/g, '"')
   .replace(/'/g, ''');
};

// Function to convert a tree statement to a string
function treeToStr(statement, parent = '', attrs = '') {
  const { type } = statement;
  const result = [];

  for (const key in statement) {
    if (!isNaN(key)) {
      result.push(treeToStr(statement[key], parent));
      continue;
    }

    const jsType = typeof statement[key];
    if (jsType === 'object' && statement[key]) {
      jsType = Object.getPrototypeOf(statement[key]).constructor.name;
    }

    if ((statement[key] && typeof statement[key].type!== 'undefined') ||
        (Array.isArray(statement[key]) && statement[key].length && typeof statement[key][0].type!== 'undefined')) {
      attrs += `${key}="" ${key}-type="${jsType}"`;
      result.push(treeToStr(statement[key], key));
    } else {
      if (typeof statement[key]!=='string') {
        attrs += `${key}="${escapeHtmlChars(JSON.stringify(statement[key]))}" ${key}-type="${jsType}"`;
      } else {
        attrs += `${key}="${escapeHtmlChars(statement[key])}" ${key}-type="${jsType}"`;
      }
    }
  }

  if (result.length) {
    return `<${type}${attrs}${parent? ` parent-attr="${parent}"` : ''}>${result.join('')}`;
  } else {
    return `<${type}${attrs}${parent? ` parent-attr="${parent}"` : ''} />`;
  }
}

// Function to convert a tree to HTML
function treeToHtml(tree) {
  const body = treeToStr(tree);
  return selectDom('//BODY', '' + body + '');
}

module.exports = {
  treeToHtml,
};

Code Breakdown

Importing Dependencies

var importer = require('../Core');
var {selectDom} = importer.import('select tree')

The code starts by importing two dependencies:

Removing Unicode Characters

var specialChars = (str) => {
    //...
}

The specialChars function is defined to remove Unicode characters from a string. It replaces the following characters with their HTML entity equivalents:

Converting a Statement Tree to a String

function treeToStr(statement, parent) {
    //...
}

The treeToStr function is used to convert a statement tree to a string. It takes two arguments: statement and parent. The function recursively traverses the tree and generates a string representation of it.

Here's a high-level overview of what the function does:

The function returns the string representation of the tree.