Add support for JSX

[Raathigesh]

Does monaco support Jsx? I couldn't find any reference or samples. Any pointers would be appreciated.

[ChrisFan]

Looks like Monaco doesn't support JSX right now.

I'm a little bit confusing cause Monaco support Typescript and Javascript Syntax，and they both came from monaco-typescript；But if now I want to implement JSX Support based on Monaco API, seems like I have to write those tokenize provider and auto complete things again(include Javascript support) ? Looks like a bit duplicate works.

I don't know if I get wrong with something... Maybe It would be better that monaco-typescript support JSX?

[Flux159]

Spent some time trying to get this working and it seems like monaco-typescript doesn't expose a few options that might enable JSX support. Don't have enough experience with the codebase to create a pull request, but I'll document what I found incase it helps someone else - or if @alexandrudima or someone else who regularly works on monaco could give some help, I could give this a shot later in the week.

Looking through monaco-typescript, it seems like https://github.com/Microsoft/monaco-typescript/blob/master/src/monaco.contribution.ts has a ScriptKind enum defined for JSX and TSX support, but it doesn't look like diagnostic or compiler options takes ScriptKind as a parameter.

According to https://github.com/Microsoft/monaco-typescript/blob/master/lib/typescriptServices.d.ts , there seems to be a ScriptKind and a LanguageVariant which could be set to support JSX files. LanguageVariant is used by a Scanner class which doesn't seem to be exposed via monaco-typescript.

Using the existing API, I could at least disable the warnings that the diagnostics were displaying on JSX, but couldn't get syntax highlighting support (and this isn't a great solution):

monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
  noSemanticValidation: true,
  noSyntaxValidation: true, // This line disables errors in jsx tags like <div>, etc.
});

// I don't think the following makes any difference
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
  // jsx: 'react',
  jsx: monaco.languages.typescript.JsxEmit.React,
  jsxFactory: 'React.createElement',
  reactNamespace: 'React',
  allowNonTsExtensions: true,
  allowJs: true,
  target: monaco.languages.typescript.ScriptTarget.Latest,
});

Similarly, setting for monaco.languages.typescript.javascriptDefaults didn't get very far either.

The other (admittedly bad) option would be to update a monarch syntax definition to add JSX support, then use that instead of using monaco-typescript: https://microsoft.github.io/monaco-editor/monarch.html (essentially start with javascript or typescript and add jsx support).

I didn't even bother pursuing that since I think it would be far better to get proper react support from monaco-typescript.

I think this would be a great feature to have to support editing react components in a browser. It would be great to get some support on getting it implemented - or if its already being worked on, some timeframe on implementation / testing / release (I'm not sure when monaco-editor is updated with respect to vs-code).

[abhishiv]

@Flux159 Any Idea how VSCode does it?

[abhishiv]

This seems to suggest with extensions we can do it, but I can't find how to add extensions in Monaco.

https://github.com/Microsoft/vscode/blob/7c633148b3111022ab5e114f21adbede041b7ea3/extensions/javascript/package.json

[Raathigesh]

Basarat got JSX/TSX working with Alm.tools. Looking into it might help. https://twitter.com/Raathigesh/status/798145470803701760

[Flux159]

Had some time to look a bit more into this... unfortunately it seems like this would require some significant changes to monaco-typescript's tokenization.ts which would be better done by a maintainer of monaco-typescript.

@abhishiv VSCode probably uses a typescript compiler API that monaco editor doesn't expose (look at the createScanner function in the typescript compiler - one of the arguments is languageVariant which is usually passed via a ts.sourceFile object). In monaco-typescript's tokenization.ts, the classifier internally calls createScanner but doesn't expose anything around the a sourceFile object (I don't think that monaco-typescript has a concept of a sourceFile since its based in a browser).

For more info, have a look at createClassifier and createScanner in (warning: large text file) https://raw.githubusercontent.com/Microsoft/monaco-typescript/master/lib/typescriptServices.js which I believe is a single js file that contains the entire typescript compiler.

Monaco doesn't support extensions as far as I know since its a subset of the code in vscode that removes things like local file handling, electron support, and extension support.

@Raathigesh Basarat ended up forking monaco-typescript to get JSX support in ALM but didn't make a pull request into monaco-typescript: https://github.com/alm-tools/alm/blob/c77c89c5efb3b6ef6f978df2b9f5b76540cb25e0/src/app/monaco/languages/typescript/tokenization.ts

Looking through @basarat code, I don't think he's setting anything related to sourceFile.languageVariant anywhere and is manually parsing the JSX tokens.

[joewood]

I think i have this working. It was simply a matter of ensuring there's a .tsx in the URI to the createModel function. The same I assume would apply to JSX.

model: monaco.editor.createModel(myCode, "typescript", monaco.Uri.parse("file:///main.tsx"));

[abhishiv]

Hey @joewood

Awesome, thanks! Seems to working! But now I'm getting this

Did you encounter it as well?

[joewood]

Remember to set Jsx to react in the compiler options. And I did not set these two options (I left them as the default):

  jsxFactory: 'React.createElement',
  reactNamespace: 'React',

Also, I had to wrap the react declaration file with an ambient module definition. e.g.:

declare module "react" {
<react.d.ts goes here>
}

At least until somebody answers this: http://stackoverflow.com/questions/43058191/how-to-use-addextralib-in-monaco-with-an-external-type-definition

One thing that I haven't tried is to set-up file URIs like a typescript project. That may solve the ambient/external module import issue.

[joewood]

I worked out the solution to the external declaration file issue. The File URI solves that problem too. Here's an example that works in the playground. This should work equally well with the react.d.ts file, and therefore enable full JSX/TSX:

// compiler options
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
    target: monaco.languages.typescript.ScriptTarget.ES2016,
    allowNonTsExtensions: true,
    moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
    module: monaco.languages.typescript.ModuleKind.CommonJS,
    noEmit: true,
    typeRoots: ["node_modules/@types"]
});

// extra libraries
monaco.languages.typescript.typescriptDefaults.addExtraLib(
    `export declare function next() : string`,
    'node_modules/@types/external/index.d.ts');

monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
    noSemanticValidation: false,
    noSyntaxValidation: false
})

var jsCode = `import * as x from "external"
    const tt : string = x.dnext();`;

monaco.editor.create(document.getElementById("container"), {
    model: monaco.editor.createModel(jsCode,"typescript",new monaco.Uri("file:///main.tsx")), 
});

[jasonHzq]

is there any progress?

[joewood]

@jasonHzq - did you not manage to get it working?

[dandingol03]

@joewood if i want to set the value of a new component in jsx syntax,how can i make it work? this is my screenshoot:

[joewood]

Hi @dandingol03. Those squiggles look like it's parsing that file as JavaScript and not JSX. Did you set the filename URL as per my comment above, when you create the model?

[dandingol03]

@joewood my operate system is mac,so i use monaco.Uri.file instead.here is my code:

  editor=monaco.editor.create(containerElement, {
       model: monaco.editor.createModel(jsCode,"javascript",new monaco.Uri.file("./Containre.jsx")), 
  });

it works well,thanks.By the way,do you have any idea about navigating between modules when i click the module name.For example,there is a statement like import React from 'react',and when i click the react,it will navigate to the {workspace}/node_modules/react/react.js

[barak007]

Are there any official docs or references on how to implement this?

[luminaxster]

In the meanwhile...

TL;DR:

For syntax recognition:

monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
          jsx: "react"
      });


function isApplePlatform() {
  return (window && window.navigator && window.navigator.platform) ?
    window.navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i) ? true : false
    : true;
}

monaco.editor.create(DOMElement, {
model: monaco.editor.createModel(text, "javascript",
    isApplePlatform() ?
      new monaco.Uri.file('./editor_name.jsx')
      : new monaco.Uri('./editor_name.jsx')
  );
});

For syntax highlighting: https://github.com/alm-tools/alm/issues/421

[supnate]

I've worked out the solution by using prismjs as a tokenlizer to support jsx syntax highlight, see the live demo at: http://demo.rekit.org/element/src%2Ffeatures%2Fhome%2FElementPage.js/code

And here is the web worker to do tokenlize: http://demo.rekit.org/element/src%2Ffeatures%2Fcommon%2Fmonaco%2Fworkers%2FsyntaxHighlighter.js/code

[jamesplease]

@supnate that second link that you posted is a 404. Do you have another link to the source code? (Also, is that project open source / on GitHub?)

[Raathigesh]

Satya wrote a blog that shows how they got JSX syntax highlighting working for snack. https://blog.expo.io/building-a-code-editor-with-monaco-f84b3a06deaf

[cancerberoSgx]

Besides syntax highlighting I was able to make it work perfectly, 100% type checked thanks to comments in this issue and make a HOWTO document here: https://github.com/cancerberoSgx/jsx-alone/blob/master/jsx-explorer/HOWTO_JSX_MONACO.md

Thanks!

[webplusai]

@supnate would you explain how did you use prism js tokenizer in monaco editor? Sample code would be really appreciated.

[ido-ofir]

@smupyknight I believe @supnate meant to share this link, which looks like the actual highlighter. here is where it is loaded and here is the editor config to support JSX.

[rob-myers]

@supnate 's great solution also works for tsx:

• Get PrismJS for React Tsx (only need the js).
• Use it to highlight syntax in a web worker, modulo this:

   const tokens = Prism.tokenize(data.code, Prism.languages.tsx);
   // See PR https://github.com/PrismJS/prism/pull/1357/files
   Prism.hooks.run('after-tokenize', {
     code: data.code,
     grammar: Prism.languages.tsx,
     language: 'tsx',
     tokens,
   });
  

• Apply deltaDecorations using the workers response.
• Use the styles provided between //prismjs start/end

[rob-myers]

After more fiddling, @cancerberoSgx 's approach seems best. Unfortunately Prismjs handles generic types incorrectly, and confuses comments with JsxText.

Rather than concatenating CSS classes, we can decorate intervals with a unique class e.g. jsx-text, jsx-tag, jsx-attr and jsx-brace. These intervals can be found using ts-morph (formerly ts-simple-ast).

[luminaxster]

I have a custom JSX highlighting in my project, so I take Monaco's highlighting:

And customize it like this:

This issue comes and goes often, so I decided to share it as a npm package that you can use like this:

//this should be already in your code
import monaco from 'monaco-editor';
// here we go...
import j from 'jscodeshift';
import MonacoJSXHighlighter from 'monaco-jsx-highlighter';

const elem = document.getElementById("editor");
const monacoEditor = monaco.editor.create(elem, {
    value: 'const AB=<A x={d}><B>{"hello"}</B></A>;',
    language: 'javascript'
});


const monacoJSXHighlighter = new MonacoJSXHighlighter(monaco, j, monacoEditor);
 // for the first time
monacoJSXHighlighter.colorizeCode(monacoEditor.getValue());
// triggering the highlighter after each code change
monacoEditor.onDidChangeModelContent(() => {
monacoJSXHighlighter.colorizeCode(monacoEditor.getValue());
});

Hope it helps =)

[rob-myers]

@luminaxster Nice, I'll look into jscodeshift. However your highlighting is a bit off:

const foo = (
  <div>
    // foo
  </div>
)

The // foo should be literal text (not a comment). The markdown highlighting above is also wrong.

[luminaxster]

@rob-myers, thanks for the feedback. I added support for that case:

Interestingly, Monaco itself was coloring the text as a comment, not my package, I was ignoring JsxText expressions and letting Monaco handle them. I didn't know Rouge, GitHub's syntax highlighter, is making the same mistake, nice catch! I checked WebStorm and CodeSandBox, they do not have this issue.

[rob-myers]

@luminaxster there is another issue:

<div>
  // foo {'bar'}
</div>

where {'bar'} is incorrectly highlighted by Monaco's js highlighter.

Although it seems like an edge case, it comes up frequently when toggling comments. Rather than fix this issue by adding decorations, I intend to override editor.action.commentLine.

[luminaxster]

@rob-myers I ran it through eslint: "Comments inside children section of tag should be placed inside braces (react/jsx-no-comment-textnodes)", so that is why the parser is confused. So issues in total: 1) Fix comment highlighting within React children, I know the guys at CodeSandBox fixed it, but I have to look at their Monaco config; and 2) Enable JSX commenting, if I understood correctly, what you want is enable commenting like {/* .... */} when is JSX context, I'll add that feature to monaco-jsx-highlighter during the week. If you are trying to do it yourself, this is a start:

const myBinding = editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.US_SLASH, () =>{
                    
                    const selection = editor.getSelection();
                    const model = editor.getModel();

                    const range = new monaco.Range(selection.startLineNumber, 0, selection.endLineNumber, model.getLineMaxColumn(selection.endLineNumber));
                    const id = { major: 1, minor: 1 };

                    console.log();
                    const text = model.getValueInRange(range);
                    // here I will check wether the current selection is not is JSX context
                     if(true){
                        editor.getAction("editor.action.commentLine").run();
                        return;
                    }
                   // here then I will do JSX commenting
                    if(!text || !text.match(/{\/\*/)){
                        text = '{/*'+ text+'*/}';
                    }else{
                        text =text.replace(/{\/\*/, '');
                        text =text.replace(/\*\/}/, '');
                    }
                    const op = { identifier: id, range: range, text: text, forceMoveMarkers: true };
                    editor.executeEdits("custom-edit", [op]);
                });