AST → HTML Serializer

[mykolaharmash]

Add serializer for Hyntax AST. It should support some basic customization options like indentation size.

[getflourish]

Hi @mykolaharmash

Any chance you will work on this?

I’ve noticed with a lot of HTML parsers that they don’t ship a serializer. Your parser looks really clean and I’m wondering what it would take to release a serializer.

I’ve seen your example implementation here: https://github.com/mykolaharmash/teig/blob/master/lib/serialize-node.js

From your view, what do you think is missing?

Besides opinions on indentation and the effort it takes to write and test the code, are there any conceptual challenges?

[mykolaharmash]

Hi @getflourish!

Thank you for the feedback. My example implementation is actually ok. Biggest problem is that it does not format HTML. It's not a problem if you just send everything to the browser for example, but it's an issue if HTML is supposed to be read by a human. Besides that, I would also benchmark and play around with performance.

Ideally, I would like also to support syntax-highlighting usecase, meaning to not just produce a plain HTML string, but have an ability to define the appearance of each token. But I have not really thought this through yet and this is probably the biggest conceptual challenge.

Realistically, I don't think I'll work on this anytime soon but I'm open for collaboration and can provide some help and guidance in case you or someone else wants to implement this.

[getflourish]

Hi @mykolaharmash

Thanks for your insights!

I tried the example code, although it took me a moment to figure out how to use it. I was naively expecting the exported function to “just work” :D

I assumed to pass a document node to serializeNode(node, serializedChildren= "") but that just returns nothing for that case. So I figured out that I need to traverse the tree and then make use of you serialize methods :)

For reference, this is what I use:
https://codepen.io/getflourish/pen/e894275b664d8bc0b4c89b7e1ebed730

function hasChildren(node) {
  return node.content && node.content.children && node.content.children.length;
}

function walk(node) {
  let serializedChildren = "";
  if (hasChildren(node)) {
    // Has children
    node.content.children.forEach((child) => {
      serializedChildren += walk(child);
    });
  }
  return serializeNode(node, serializedChildren);
}

let html = walk(ast);

In terms of formatting, I could imagine using Prettier or something else for now. I’ll have a more in-depth look and see if I find any issues or room for improvement.

Btw, I found your project on astexplorer.net ;)

[mykolaharmash]

Ah, right, a couple of functions are missing in that file, they are here (renderNode and renderNodeesList) https://github.com/mykolaharmash/teig/blob/master/lib/expand-components.js. And they basically do exactly the same as your functions.

Here is a version without other unnecessary stuff:

function renderNode (node) {
  return serializeNode(node, renderNodesList(node.content.children))
}

function renderNodesList (nodes = []) {
  return nodes.map(renderNode).join('')
}

[getflourish]

I don't think I can bend my mind around this recursive magic but I love how you handle it. Thanks for sharing! 💯