AI solution for JavaScript Coding Question on BFE.dev
143. Virtual DOM IV - JSX 1

const h = (tag, props, ...children) => ({  tag,  props: props || {},  children});// helper function to extract JSX text contentconst extractJSXText = (JSXNode) => {  const jsxChild = JSXNode.children[0];  if (jsxChild && jsxChild.type === 'JSXText') {    return jsxChild.value;  }  return null;};const parse = (code) => {  // remove spaces and newline for simplicity  const cleanedCode = code.replace(/\s+/g, '');    let currentIndex = 0;    const parseOpeningElement = () => {    if (cleanedCode[currentIndex] !== '<') {      throw new Error('Invalid JSX Element');    }    currentIndex++;    const tagName = [];    const attributes = {};    while (cleanedCode[currentIndex] !== '>' && cleanedCode[currentIndex] !== ' ') {      tagName.push(cleanedCode[currentIndex]);      currentIndex++;    }    while (cleanedCode[currentIndex] !== '>') {      currentIndex++;      if (cleanedCode[currentIndex] === '/') {        return {          type: 'JSXElement',          openingElement: {            type: 'JSXOpeningElement',            tagName: tagName.join(''),            attributes          },          children: []        };      }      let attrName = [];      let attrValue = [];      let isParsingAttrName = true;      while (cleanedCode[currentIndex] !== '>' && cleanedCode[currentIndex] !== ' ') {        if (isParsingAttrName) {          attrName.push(cleanedCode[currentIndex]);        } else {          attrValue.push(cleanedCode[currentIndex]);        }        currentIndex++;        if (cleanedCode[currentIndex] === '=') {          isParsingAttrName = false;          currentIndex++;        }      }      attributes[attrName.join('')] = attrValue.join('');    }    currentIndex++;    return {      type: 'JSXElement',      openingElement: {        type: 'JSXOpeningElement',        tagName: tagName.join(''),        attributes,      },      children: []    };  };    const parseClosingElement = () => {    if (cleanedCode[currentIndex] !== '<') {      throw new Error('Invalid JSX Element');    }    currentIndex++;    const tagName = [];    while (cleanedCode[currentIndex] !== '>') {      tagName.push(cleanedCode[currentIndex]);      currentIndex++;    }    currentIndex++;    return tagName.join('');  };    const parseJSXText = () => {    const text = extractJSXText(parseOpeningElement());    if (cleanedCode[currentIndex] === '<' && cleanedCode[currentIndex + 1] === '/' && cleanedCode[currentIndex + 2] === text[0] && cleanedCode[currentIndex + 3] === '>') {      currentIndex += 4;    } else {      throw new Error('Invalid JSX Element');    }    return {      type: 'JSXText',      value: text    };  };    const parseChild = () => {    if (cleanedCode[currentIndex] === '<') {      if (cleanedCode[currentIndex + 1] === '/') {        throw new Error('Invalid JSX Element');      }      const jsxNode = parseOpeningElement();      let jsxText = extractJSXText(jsxNode);      if (cleanedCode[currentIndex] === '<') {        const closingTagName = parseClosingElement();        if (closingTagName !== jsxNode.openingElement.tagName) {          throw new Error('Invalid JSX Element');        }        jsxNode.children.push({type: 'JSXText', value: jsxText});         return jsxNode;      } else {        throw new Error('Invalid JSX Element');      }    } else if (cleanedCode[currentIndex] !== '<') {      return parseJSXText();    } else {      throw new Error('Invalid JSX Element');    }  };    const parseJSXChildren = () => {    const jsxChildren = [];    while (currentIndex < cleanedCode.length && cleanedCode[currentIndex] !== '<' && cleanedCode[currentIndex - 1] && cleanedCode[currentIndex - 1] !== '>') {      currentIndex++;    }    while (currentIndex < cleanedCode.length) {      jsxChildren.push(parseChild());      while (currentIndex < cleanedCode.length && cleanedCode[currentIndex] !== '<' && cleanedCode[currentIndex - 1] && cleanedCode[currentIndex - 1] !== '>') {        currentIndex++;      }      if (cleanedCode[currentIndex] === '<' && cleanedCode[currentIndex + 1] === '/') {        break;      }    }    return jsxChildren;  };    const jsxElement = parseOpeningElement();  jsxElement.children = parseJSXChildren();  if (cleanedCode[currentIndex] === '<' && cleanedCode[currentIndex + 2] === '/') {    const closingTagName = parseClosingElement();    if (closingTagName !== jsxElement.openingElement.tagName) {      throw new Error('Invalid JSX Element');    }  }  return jsxElement;};const generate = (ast) => {  if (ast.type === 'JSXText') {    return JSON.stringify(ast.value);  }  const children = ast.children.map(child => generate(child)).join('');  return `h('${ast.openingElement.tagName}',${JSON.stringify(ast.openingElement.attributes)}, ${children})`;};