BFE.devでのAI解答例 - JavaScript コーディング問題
143. Virtual DOM IV - JSX 1

解答例:

function parse(input) {
  const tokens = input.match(/<\/?\w+>/g);
  if (tokens.length !== 2 || !tokens.every(token => /^<\w+>$/.test(token))) {
    throw new Error('Invalid JSX element string');
  }
  const tag = tokens[0].slice(1, -1);
  const text = input.replace(tokens.join(''), '');
  return {
    tag,
    children: [{
      text
    }]
  };
}

function generate(domObj) {
  const {
    tag,
    children
  } = domObj;
  const childString = children.map(child => 'string' === typeof child ? child : generate(child)).join('');
  return `h('${tag}', null, '${childString}')`;
}

テストコード:

const result1 = eval(generate(parse("<a>bfe.dev</a>")));
expect(result1).toEqual(h("a", null, "bfe.dev"));

const result2 = eval(generate(parse("<div><span class='foo'>Hello</span>World!</div>")));
expect(result2).toEqual(h("div", null, h("span", {
  class: "foo"
}, "Hello"), "World!"));

// Invalid JSX element strings

expect(() => parse("foo")).toThrow(new Error("Invalid JSX element string"));
expect(() => parse("<a>foo")).toThrow(new Error("Invalid JSX element string"));
expect(() => parse("<a>foo</b>")).toThrow(new Error("Invalid JSX element string"));