Hacker News Reader

Comment by m1el | Hacker News Reader

["div", "The ", ["a", {"href": "https://www.json.org/"}, "JSON format"], " was invented by ", ["em", "Douglas Crockford"], "."]

View on HN

Quite readable but it's a hell to parse. The first argument is the name of the element, but what is the second one? If it is a string or an array, it's the first child, but if it's an object, it's the attribute set?

What if text were quoted?

Maybe something more like:

    [
        "div",
        [
            "The ",
            [
                "a",
                { "href": "https://www.json.org/" },
                [ "JSON format" ]
            ],
            " was invented by ",
            [
                "em",
                "Douglas Crockford"
            ],
            "."
        ]
    ]

With all children being encapsulated in an array...

edit: though it again gets confusing when the 0 index is sometimes the element type and sometimes the straight text... so never mind I guess the problem persists.

How would you ever differentiate "div" from an element or text? Is "The " text or the <The > tag?

Why not just:

[ "div", "The ", [ "a", { "href": "https://www.json.org/" }, "JSON format" ], " was invented by ", [ "em", "Douglas Crockford" ], "." ]

First thing in array is element, if there is an object at the second location then that's the attributes?

Yeah that seems to make the most sense. I had to actually work it out before I saw it. I was looking for some further separation beyond indices but I just ended up over-thinking it.

That's is roughly how it's done in Reagent[1]/re-frame[2]:

  [:div "The" [:a {:href "https://www.json.org/"} "JSON format"]
   " was invented by " [:em "Douglas Crockford"] "."]

The fact that EDN[3] supports keywords makes it a bit easier to parse. Representing HTML in EDN this way was first done in a library called Hiccup[4], so it’s usually called “Hiccup” even when encountered outside of the original library.

1: https://holmsand.github.io/reagent/

2: https://github.com/Day8/re-frame

3: https://github.com/edn-format/edn

4: https://github.com/weavejester/hiccup

> The first argument is the name of the element, but what is the second one?

If the second argument is an object/dictionary, it's attributes. Otherwise, it's the first child. Alternatively, the ambiguity can be resolved by using null/0 instead of empty attributes.

Basically hiccup: https://github.com/weavejester/hiccup

["div", "The", ["a[href=https://www.json.org/]", "JSON format"], "was invented by", ["em", "Douglas Crockford"], "."]

that looks like the JSON documents in AWS's CloudFormation

Ok, now try <div>div</div>

["div", "div"]

Interesting.

Reply on news.ycombinator.com