Syntax highlighting JSX by itself?

[Jorenm]

I have some files that contain nothing but JSX, no React component wrapping it. I get very wonky syntax highlighting out of this plugin:

https://imgur.com/a/C5qJGj4

You can view the same issue at your React demo by replacing the contents of the editor with this code:

<div className={styles.footer}>
    <div className={styles.grid_container}>
        <div className={styles.blurb}>
            <a href="/" title="home page"><Image alt="logo" src="/images/small_logo.svg" width="31" height="32" /></a>
            <p>lorem ipsum dolar sit.</p>
        </div>
    </div>
</div>

Is there a way to get it working highlighting JSX on its own?

[luminaxster]

Thank you for letting me know, I fixed the issue, I will publish it before the end of the day. It will look like this:

[luminaxster]

Version 1.0.[5] is out now, give it a try =). I tried everything to make JSX work fully in Monaco, @Jorenm. To no avail. So... "Fine, I'll do it myself". Even JsCodshift had errors, like the one you pointed out. I took away the intermediary and went for the head, Babel.

[luminaxster]

If you only need to colorize JSX brackets, try this:

//adapted from monaco playground
// Register a new language
monaco.languages.register({ id: 'JSX' });

// Register a tokens provider for the language
monaco.languages.setMonarchTokensProvider('JSX', {
    tokenizer: {
        root: [
            [/<(\s*\/)?|(\/\s*)?>/, "JSXBracket"],
        ]
    }
});

// Define a new theme that contains only rules that match this language
monaco.editor.defineTheme('JSXTheme', {
    base: 'vs',
    inherit: true,
    rules: [
        { token: 'JSXBracket', foreground: '508080' },
    ]
});

// Register a completion item provider for the new language
monaco.languages.registerCompletionItemProvider('JSX', {
    provideCompletionItems: () => {
        var suggestions = [{
            label: 'simpleText',
            kind: monaco.languages.CompletionItemKind.Text,
            insertText: 'simpleText'
        }, {
            label: 'testing',
            kind: monaco.languages.CompletionItemKind.Keyword,
            insertText: 'testing(${1:condition})',
            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
        }, {
            label: 'ifelse',
            kind: monaco.languages.CompletionItemKind.Snippet,
            insertText: [
                'if (${1:condition}) {',
                '\t$0',
                '} else {',
                '\t',
                '}'
            ].join('\n'),
            insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
            documentation: 'If-Else Statement'
        }];
        return { suggestions: suggestions };
    }
});

monaco.editor.create(document.getElementById("container"), {
    theme: 'JSXTheme',
    value: getCode(),
    language: 'JSX'
});

function getCode() {
    return `    
let     XX =(<div>
</div>);
    `;
}