Repository navigation
Support xml namespaces in JSX #11833
Description
From Marko Stijak (@mstijak) on October 14, 2016 6:29
Visual Studio Code reports syntax errors if namespaces are used inside JSX.
Namespaces are not supported by React (babel-plugin-transform-react-jsx),
but Babel correctly parses them (babel-plugin-syntax-jsx).
Is this something that should be added directly to VSCode or an extension would be a better choice?
WebStorm and Sublime Text do not have this problem.
Copied from original issue: microsoft/vscode#13728
Activity
waderyan commentedon Oct 25, 2016
Marko Stijak (@mstijak) thank you for opening this issue. Would you mind sharing a simple code example? I believe this is an issue for the JavaScript language service.
waderyan commentedon Oct 25, 2016
From Marko Stijak (@mstijak) on October 16, 2016 20:37
I'm developing a framework which offers advanced data-binding options. It's a non-standard use case, but namespaces provide a very convenient syntax.
This is how you declare a two-way data binding:
You can see the full example here:
http://cx.codaxy.com/fiddle/?f=luv00Rpw
Also, I noticed that of the leading React developers is considering using
reactnamespace to distinguish React-related attributes from everything else (e.g. react:key).react/jsx#66
waderyan commentedon Oct 25, 2016
Marko Stijak (@mstijak) very cool! I don't believe this is supported through an extension today. This may be a good candidate for a PR on the JavaScript language service or an extensibility point for the language service.
Mohamed Hegazy (@mhegazy) and Dirk Bäumer (@dbaeumer) can you advise Marko Stijak (@mstijak) on what he can do here?
waderyan commentedon Oct 25, 2016
From Dirk Bäumer (@dbaeumer) on October 25, 2016 10:42
Wade Anderson (@waderyan) this needs to be done by the tsserver since according to Marko Stijak (@mstijak) we report an syntax error here.
waderyan commentedon Oct 25, 2016
From Marko Stijak (@mstijak) on October 25, 2016 10:48
It looks like this:
RyanCavanaugh commentedon Oct 25, 2016
This issue is now awaiting more feedback. This means we'd like to hear from more people who would be helped by this feature, understand their use cases, and possibly contrast with other proposals that might solve the problem in a simpler way (or solve many other problems at once).
If this feature looks like a good fit for you, please use the 👍 reaction on the original post. Comments outlining different scenarios that would be benefited from the feature are also welcomed.
Xiphe commentedon Oct 5, 2017
The vast majority of JSX users are probably using it for React and they decided to not use the full spec of JSX for now.
But the namespace syntax is still valid by spec and I see no reason why typescript should deviate from this.
My main problem is that VSCode throws a syntax error. Having a major editor declining this feature is hurting development of other JSX target libraries and frameworks.
My personal use case is similar to the one of Marko Stijak (@mstijak). I created a babel plugin for jsx directives that could utilise the syntax in a very beautiful way (in my opinion ;))
For example
<a onClick:goTo="/home" />wheregoTowould be a routing directive that creates a callback function/homethat is then passed toaasonClick.I'd love to have this supported by typescript. Let me know if I can help with anything.
mcav commentedon Jan 29, 2018
I work at Adobe on a framework that uses namespaced attributes for data-binding (
<input bind:value={expr}>). Our clients use namespaced tags to define libraries of components (<somelib:button>). We transform this syntax before it gets parsed with React's transform.Since namespaced tags/attributes are valid JSX and the rest of the ecosystem supports this behavior, it seems reasonable that TypeScript should not consider namespaces to be a syntax error.
Similarly, I'm available to help with a patch if it would be accepted.
mhegazy commentedon Jan 30, 2018
Marcus Cavanaugh (@mcav) we would be open to take a PR for the change. We would expect this to stay an error under
--jsx React, and is only allowed under--jsx Preserve.RyanCavanaugh commentedon Jan 30, 2018
Marcus Cavanaugh (@mcav) implementation suggestion - we have a function
isIntrinsicJsxName; any place that is called we need to also handle namespaced names. It'd be ideal to just turn that function into something that returns 1 of 3 values (intrinsic, normal identifier, namespaced name).kindy commentedon Jan 31, 2018
I'm creating some babel transformer to enhance React's JSX support too.
hope we can support namespace soon so we can use it in VSCode.
nick-ChenZe commentedon Jul 9, 2018
This feature will also help someone who use vuejs in jsx. See this repo babel-plugin-jsx-event-modifiers. Thanks.
baluubas commentedon Dec 9, 2019
I'm using https://facebookincubator.github.io/fbt for translations in .tsx and it has a neat way of doing string interpolation of text and other markup. Unforunately I'm restricted to using functional API (which is more limited) since namespaces are not supported.
Muting errors when passing
--jsx preservewould work for me. Even@ts-nocheckthat works with tsx would do it for me (I read that that directive is now supported for .ts files but from what I can tell is does not mute jsx namespace errors).weswigham commentedon Dec 9, 2019
JSX namespace errors are parse errors. They're not mute-able, since parse error ruin our basic understanding of the structure of the code. We'd need basic parsing support, at least.
ludamad commentedon Feb 4, 2020
I believe this feature will aid in the creation of domain-specific XML templating languages. I was going to try my hand at one myself, but am somewhat stopped by this - for me, TypeScript is a huge win for such a thing and a big stamp of maturity (which I can sense is at question here). In this particular case, I was considering applying it to NETCONF payloads. Namespaces are very important as config in this case is from many different namespace'd modules.
Benefits of JSX in this domain:
Benefits of TypeScript in this domain:
tl;dr I think this feature applied to NETCONF has the possibility of tightening up the tech stack
ryansolid commentedon Apr 26, 2020
I have been using JSX as a DSL similar to something like Svelte for the past few years in SolidJS(https://github.com/ryansolid/solid). Having this feature to stop using weird prefix naming would clean things up considerably, especially for patterns like custom directives etc. It would basically blow things wide open in terms of the expressiveness of the JSX. Seeing this just getting past TS in preserve mode would make such a big difference for the API design space of the library.
ryansolid commentedon Jul 16, 2020
I want to point out that using Babel with JSX namespace works easily. There is no wierd gotchas or config switch. I have used them to support XML namespaces in Solid and intend to use them the way Vue/Svelte does.
So I was very surprised to find out TypeScript is completely broken in this regard even with preserve. There is no way to get around this:
In preserve mode ends up as:
Regardless of other considerations like typing I think at a minimum this needs to be addressed as it breaks user code for no obvious reason.