question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Allow `JSXIdentifier`s to begin with a symbol

See original GitHub issue

Feature Request

Is your feature request related to a problem? Please describe. I’d like to be able to parse <foo .bar={this.bar} @baz={this.baz} />, along with similar constructs. Currently, a JSXIdentifier cannot begin (or even contain) these symbols.

Describe the solution you’d like An update to the parser. I can attempt to create a PR if someone can point me in the right direction.

Describe alternatives you’ve considered Aside from forking the parser permanently, I don’t believe there are any alternatives.

Teachability, Documentation, Adoption, Migration Strategy This could be used for plugins like jsx-lit-html, which transforms JSX into Lit-HTML syntax. Currently, the plugin has to take a different approach that is dissimilar to Lit’s syntax. I was hoping to create a similar plugin, but realized I can’t even parse my proposed syntax (this being the only reason).

I don’t know how closely Babel follows Facebook’s current JSX spec (link). If wanted, I can file an issue there as well. I know JSX was originally created for React, but it’s used by far more than just that nowadays, and this syntax change would expand the use cases even further.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
nicolo-ribaudocommented, Sep 2, 2019

I’m closing this issue, since it first needs to be implemented in the spec (https://github.com/facebook/jsx/issues/66)

1reaction
jhprattcommented, May 6, 2019

Looks like this was already proposed in facebook/jsx#66 back in 2016, but was neither accepted nor declined. I’ve just added a comment seeking an update.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Using symbols in JSX and React Native - Stack Overflow
The provided answer did not work for me, since I was dynamically retrieving unicode hex codes from an API. I ...
Read more >
JSX in React – Explained with Examples - freeCodeCamp
So let's get started. What is JSX? JSX is a JavaScript Extension Syntax used in React to easily write HTML and JavaScript together....
Read more >
Documentation - JSX - TypeScript
Name your files with a .tsx extension; Enable the jsx option ... An intrinsic element always begins with a lowercase letter, and a...
Read more >
How To Create React Elements with JSX - DigitalOcean
In this tutorial, you'll learn how to describe elements with JSX. JSX is an abstraction that allows you to write HTML-like syntax in...
Read more >
Symbols as keys in children as arrays or iterators · Issue #11996
Using Symbols as element keys throws a type error. If the current behavior is a bug, please provide the steps to reproduce and...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found