import { javascriptGrammar } from './javascript';
import { markupGrammar } from './markup';
/**
 * Grammar definition for JSX syntax highlighting.
 * Extends JavaScript grammar with JSX tag syntax for React components,
 * including self-closing tags, expressions in braces, and embedded markup attributes.
 */
export const jsxGrammar = Object.assign(Object.assign({ 
  // Tag must come before JS spread so operator pattern doesn't consume < and >
  tag: {
    pattern: /<\/?(?:[\w.:-]+(?:\s+(?:[\w.:$-]+(?:=(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|\{(?:\{(?:\{[^{}]*\}|[^{}])*\}|[^{}])+\}))?|\{\.{3}[a-z_$][\w$]*(?:\.[\w$]+)*\}))*\s*\/?)?>/i,
    greedy: true,
    inside: {
      'tag': {
        pattern: /^<\/?[^\s>/]*/,
        inside: {
          punctuation: { pattern: /^<\/?/ },
          namespace: { pattern: /^[^\s>/:]+:/ },
        },
      },
      'attr-value': {
        pattern: /=\s*(?:"[^"]*"|'[^']*'|\{(?:\{(?:\{[^{}]*\}|[^{}])*\}|[^{}])+\})/,
        inside: {
          punctuation: [{ pattern: /^=/ }, { pattern: /^(\s*)["'{]|[}"']$/, lookbehind: true }],
          script: {
            pattern: /[\s\S]+/,
            inside: javascriptGrammar,
          },
        },
      },
      'spread': {
        pattern: /\{\.{3}[a-z_$][\w$]*(?:\.[\w$]+)*\}/,
        inside: {
          'punctuation': { pattern: /^\{\.{3}|\}$/ },
          'attr-name': { pattern: /[\s\S]+/ },
        },
      },
      'attr-name': {
        pattern: /[^\s>/]+/,
        inside: {
          namespace: { pattern: /^[^\s>/:]+:/ },
        },
      },
      'punctuation': { pattern: /\/?>/ },
    },
  } }, javascriptGrammar), { entity: markupGrammar.entity });
