Syntax for text/jsx inside HTML

[ghost]

NOTE: I originally filed this issue in VSCode's repo, but they requested that I file it here instead.

When editing an HTML file in VSCode, syntax highlighting for <script type="text/javascript"> is working just fine - even for JSX syntax:

But it is not working as soon as I change it to <script type="text/jsx">:

Also: I noticed that VSCode's "Format Document" command works on the contents of <script type="text/javascript"> but not when it is changed to <script type="text/jsx">

[ghost]

@sorbits @infininight - I see you're the top contributors to this repo, what's the process for getting PRs approved nowadays?

[arildgrimstveit]

have you resolved the issue?

[aflynn93]

@infininight @sorbits Can you help us out with getting the PR merged?

[dmail]

By the way does it makes sense to add <script type="module/jsx">?

[aflynn93]

I did some digging and couldn't find any references to being able to set a script type to "module/*". I only see it as <script type="module">. Do you know of any instance where you can specify something after module? I don't think I've ever actually used the module type before so I'm pretty unfamiliar with it.

[dmail]

I don't think "module/*" exists yet. I would like to introduce it to be able to use import inside the js code.

<script type="text/jsx">
  ReactDOM.render(<h1>Hello</h1>, document.getElementById('app'))
</script>

is meant to be converted to a regular script tag

<script>
  ReactDOM.render(React.createElement('h1', null, 'Hello'), document.getElementById('app')
</script>

There is a need for a module version to be able to use import(s).

<script type="module/jsx">
  import React from "https://cdn.jsdelivr.net/npm/@esm-bundle/[email protected]/esm/react.production.min.js"
  import ReactDOM from "https://cdn.jsdelivr.net/npm/@esm-bundle/[email protected]/esm/react-dom.production.min.js"

  ReactDOM.render(<h1>Hello</h1>, document.getElementById('app'))
</script>

That would be converted back to a <script type="module"> by tools

<script type="module">
  import React from "https://cdn.jsdelivr.net/npm/@esm-bundle/[email protected]/esm/react.production.min.js"
  import ReactDOM from "https://cdn.jsdelivr.net/npm/@esm-bundle/[email protected]/esm/react-dom.production.min.js"

  ReactDOM.render(React.createElement('h1', null, 'Hello'), document.getElementById('app'))
</script>

"text/jsx" was invented and is ignored by the browser, "module/jsx" would be ignored as well and be the module equivalent of "text/jsx".

[ghost]

I'm also experiencing this issue. Although text/jsx was invented, and normally should be ignored by the browser, there should still be a way to get its syntax to be highlighted. Everything is shown in plain white text here.

[dmail]

For sure, I would like to see text/jsx highlighted in VSCode too. (Ideally module/jsx as well)

[mmsaki]

any updates on this?

[Playerdog]

why not just use "text/babel"?

[ahmad-punch]

Any Updates on this?

[starball5]

Related Stack Overflow question: Can't get the correct Language Mode / IntelliSense for a script tag with type="text/jsx" in an HTML file.

[garretwilson]

Just to be clear, although there may not be an official text/jsx Internet media type (i.e. MIME type), there is a format named JSX. It combines both JavaScript and HTML, so it would need syntax highlighting for both.

In fact JSX is probably one of the most popular UI source formats in use today, coupled with React.js. And the recommended type for inline scripts is text/jsx. So there's no mystery there.

People are saying that VS Code already supports JSX in a standalone file. The request here is to support the same syntax highlighting in a <script> HTML section that identifies itself as text/jsx. It's as simple as that.

It appears that this request was originally filed at microsoft/vscode#145992, but the author was told to file it here.

Are there any updates? If it works in standalone JSX files, what is stopping someone to simply turn it on for <script type="text/jsx"> blocks? Or is it not that easy?

[garretwilson]

In fact someone said above that this already works with type text/javascript. But Babel will not transpile text/javascript, so we're forced to use text/jsx. So why can't we just add text/js to the list of mappings so it will syntax-highlight just like text/javascript?

This truly seems like a one-line change. Tell me where to do it and I'll do it and submit a PR.

[dankb82]

Is there any traction on this?

[aflynn93]

From what I can tell, this repo is no longer actively managed by anyone. My guess is that someone will need to clone the repo, make the change, then publish an extension for VSCode.

[garretwilson]

Today I found out that changing <script type="text/jsx" to <script type="text/babel" enables JSX syntax highlighting just fine. So truly there must just be a single line somewhere that allows the script type of text/babel to allow syntax highlighting, and surely one could add text/jsx to the list/registration. I haven't looked yet to see where that might be.

From what I can tell, this repo is no longer actively managed by anyone. My guess is that someone will need to clone the repo, make the change, then publish an extension for VSCode.

But that is what has confused me from the very start. Wouldn't the registration of script types with syntax highlighting rules be somewhere in VS Code itself? Or does this library publish which script types it supports? (If the latter, that seems a bit odd, as new types might come out and we would want to associate existing syntax highlighting with them.)

[garretwilson]

I see this in HTML.plist:

text/							# Text mime-types
(
javascript(1\.[0-5])?
  | x-javascript
  | jscript
  | livescript
  | (x-)?ecmascript
  | babel

It seems reasonable that simply adding | jsx to this list would address the problem.

My guess is that someone will need to clone the repo, make the change, then publish an extension for VSCode.

I have no idea about that part. I don't know how VS Code uses this codebase, or even if it uses it. Isn't this something built into VS Code? I mean I'm sure it's configured as an extension somehow, but it seems to be a default registration, i.e. it comes with a clean installation of VS Code. How does the extension get built and published? Doesn't there have to be a maintainer in order to tell VS Code our changes are official by getting them included in the official build?

I know nothing about the specifics here. I was hoping someone else knew what needs to be done. I'm happy to make the change, but researching how to get them into VS Code seems like a huge time drain. It may be easier to live with <script type="text/babel".

[yayxs]

I also encountered this problem
https://nextjs.org/learn/foundations/from-javascript-to-react/building-ui-with-components

[dmnsgn]

I have also suggested defaulting to JavaScript syntax highlighting if the type is unknown, as regardless of the syntax flavour that's what I'd expect a script tag to contain.

And it could be a compromise to reduce the amount of "add support for this script type" issues?

[jasaimial]

bump

[thais-lin0]

Changing to <script type="text/babel"> worked just fine for me.

[dmail]

Setting text/jsx make explicit that the code can use jsx. With text/babel it would require to parse babel config file to know if jsx is enabled in babel plugin.
And there is other tools than babel, so text/jsx is definitely better

[garretwilson]

I don't know how VS Code uses this codebase, or even if it uses it. Isn't this something built into VS Code? I mean I'm sure it's configured as an extension somehow, but it seems to be a default registration, i.e. it comes with a clean installation of VS Code. How does the extension get built and published? Doesn't there have to be a maintainer in order to tell VS Code our changes are official by getting them included in the official build?

Does anyone know the answer to these questions? I don't even need this anymore personally, but I could look into further. Does anyone have any documentation about how all this is connected?

[starball5]

@garretwilson possibly related: https://github.com/microsoft/vscode/tree/main/extensions/html/syntaxes

[yavor-kaludov]

Can't believe it's been a year and something so important still hasn't been resolved. I just encountered this issue myself.

[knowcart]

why not just use "text/babel"?

This work fine and autocomplete work fine also when adding react jsx code into html code thanks

[freddysae0]

Changing "text/jsx" by "text/babel" worked for me

[haifromkai]

Changing it to <script type="text/babel"> worked for me!