Incorrect AST generated when a Vue template binding contains a greater than operator

[prashantpalikhe]

If we have a simple script like this that simulates a Vue attribute binding. And it contains a greater than operator.

// index.mjs
import { parse, walkSync, ELEMENT_NODE, render } from "ultrahtml";

const ast = parse(`<h1 :foo="bar > 1 ? 2 : 1">Hello world!</h1>`);

walkSync(ast, (node) => {
  if (node.type === ELEMENT_NODE && node.name === "script") {
    throw new Error("Found a script!");
  }
});

console.dir(ast, { depth: null });

render(ast).then(console.log);

And if you run this script node index.mjs, the generated AST is incorrect:

<ref *1> {
  type: 0,
  children: [
    <ref *2> {
      type: 1,
      name: 'h1',
      attributes: { ':foo': '"bar' },
      parent: [Circular *1],
      children: [
        {
          type: 2,
          value: ' 1 ? 2 : 1">Hello world!',
          parent: [Circular *2]
        }
      ],
      loc: [ { start: 0, end: 15 }, { start: 39, end: 44 } ]
    },
    { type: 2, value: '', parent: [Circular *1] }
  ]
}

Here you can see the attributes :foo's value is incorrect. It should be bar > 1 ? 2 : 1, but it is just bar.

And, the rendered HTML ends up being incorrect

<h1 :foo=""bar"> 1 ? 2 : 1">Hello world!</h1>

Notice the double "" before bar