refractor/lang/jsx.js

Lightweight, robust, elegant virtual syntax highlighting using Prism

'use strict';

module.exports = jsx;
jsx.displayName = 'jsx';
jsx.aliases = [];
function jsx(Prism) {
  (function(Prism) {
    var javascript = Prism.util.clone(Prism.languages.javascript);
    Prism.languages.jsx = Prism.languages.extend('markup', javascript);
    Prism.languages.jsx.tag.pattern = /<\/?[\w.:-]+\s*(?:\s+(?:[\w.:-]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+|(?:\{\{?[^}]*\}?\})))?|\{\.{3}[a-z_$][\w$]*(?:\.[a-z_$][\w$]*)*\}))*\s*\/?>/i;
    Prism.languages.jsx.tag.inside[
      'attr-value'
    ].pattern = /=(?!\{)(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">]+)/i;
    Prism.languages.insertBefore(
      'inside',
      'attr-name',
      {
        spread: {
          pattern: /\{\.{3}[a-z_$][\w$]*(?:\.[a-z_$][\w$]*)*\}/,
          inside: {
            punctuation: /\.{3}|[{}.]/,
            'attr-value': /\w+/
          }
        }
      },
      Prism.languages.jsx.tag
    );
    var jsxExpression = Prism.util.clone(Prism.languages.jsx);
    delete jsxExpression.punctuation;
    jsxExpression = Prism.languages.insertBefore(
      'jsx',
      'operator',
      {
        punctuation: /=(?={)|[{}[\];(),.:]/
      },
      {jsx: jsxExpression}
    );
    Prism.languages.insertBefore(
      'inside',
      'attr-value',
      {
        script: {
          // Allow for one level of nesting
          pattern: /=(\{(?:\{[^}]*\}|[^}])+\})/i,
          inside: jsxExpression,
          alias: 'language-javascript'
        }
      },
      Prism.languages.jsx.tag
    );
  })(Prism);
}