Comments (7)
How about using Symbols and supporting ES2015 computed property names (#108).
<Foo [React.key]="foo" [React.ref]={callback} prop="hi" />
Essentially just desugars to:
React.createElement(Foo, {[React.key]: "foo", [React.ref]: callback, prop: "hi"});
from jsx.
Could you also apply namespace symbols to the component itself? Probably using pragmas to define what they do. This way, we could use React.createElement
as well as other factories within the same file:
// createRoute(Contact.Details, { id: 5 })
<@Contact.Details id={5} />
The only problem I can see with this is that it is unclear how it would apply to children
<@Contact.Details id={5}>
{/* Is this a Route, or an Element? */}
<Contact.Details.PaymentList page={1} />
</@Contact.Details>
from jsx.
@sebmarkbage Are there any plans to introduce this syntax? I was looking to create a Babel plugin that uses JSX extensively, and was hoping to use .
, ?
, and @
(at the minimum) at the start of attribute identifiers. All three are currently used by Lit-HTML as well.
I mention Babel because JSX isn't just for React (though it was created for that purpose), and I recently filed babel/babel#9946 wherein I ask for this to be added to Babel's JSX syntax — they requested I file an issue here and I've run across this (old) issue.
from jsx.
@sebmarkbage am I right stating that for any of those suggestions you will have to modify the validation within babel and likely the syntax spec for JSX?
If so, given that today none of that is pluggable in babel, would it be in the future? (augment the grammar or validation in babel particularly for JSX)
Or, should be the goal to keep the grammar restrictive enough so everyone gets forced to play within the same rules without reinventing the wheel or forking the whole thing? (which relates to #65 for some of other breaking changes)
IMHO I think it will be great to have way to semantically differentiate anything that is unrelated with the DOM/HTML spec, so frameworks/transpilers could trivially apply transforms, but yet having a common shared syntax/grammar as a base. That could be useful to standardize things like for example conditionals so frameworks don't need re-invent all that sugar every time in different ways.
from jsx.
I've got another suggestion for syntax that might have a bunch of other uses as well. Annotation blocks? (similar to the new decorator pattern, but I think you want to annotate the component with extra meta information rather than decorate it and return a component) Then anything from the annotation gets passed into the component as a meta or ext prop (kinda like children)
{@ (c)=> { return { key: key, ref:callback}; }}<Component />
// similar to below, except component can be passed to function
<Component meta={(c) => { return {key: key, ref: callback}; }} />
With do syntax on annotation block you could also just return the meta object directly if there's no need to pass in the component
{@ { key: key, ref: callback }}
Besides the support for meta information I believe this syntax could also be used for simple conditional blocks. which seems to be another highly requested but frowned upon feature.
The general argument is that writing conditional components isn't as visually appealing as most people would like it, but I definitely don't think adding in any special syntax for any of the different control statements is an acceptable solution. But I think this scenario comes up enough
{flag && <Component />}
So how about using the truthy value of an annotation block to determine whether the annotated component should be included or not?
In its simplest form it would look like this:
{@flag}<Component />
With the meta info:
{@ flag && { key: key, ref: callback }} <Component />
Long winded version if you need/support the component as a parameter:
{@ (c) => { return flag && { key: key, ref: callback }; }} <Component />
I suppose if you really didn't like the long winded solution then you could allow multiple annotations per component and the component is only used if all are truthy.
{@flag}{@{key: key, ref: callback}} <Component />
One benefit to the latter multiple annotations form with direct returns (instead of functions with the component passed in), is the implementing library could short circuit on each annotation block.
from jsx.
Using the #
namespace might have some specific implications regarding the private method syntax, but I'm not sure whether that's actually a good or bad thing.
from jsx.
I worked on a React-like framework at my current company, but targeting Lua and the Roblox DOM instead of JavaScript and the HTML DOM. We hit a similar issue where the namespacing of ref
, children
, and key
didn't sit well with us.
We opted for a solution exactly the same as what @dantman proposed here and in #108. Using symbols as keys has almost the exact same syntax between Lua and JS and we're pretty happy with that route so far!
For example, refs in our documentation: https://roblox.github.io/roact/api-reference/#roactref
from jsx.
Related Issues (20)
- Please consider users' proposals/ideas or move the JSX spec to an independent organization HOT 9
- Add early error to disallow invalid adjacent JSX elements HOT 3
- can you provide a syntactic sugar? HOT 3
- Can we move JSX to be an extension of ES Spec that evolves forward like EcmaScript + TC39 ? HOT 3
- RFC: An evolved JSX 2.0 proposal HOT 1
- Get accessor in props HOT 1
- HTML and JSX spec HOT 1
- The syntax in website is missing JSXFragment as JSXChild
- Proposal: ability to return multiple chlidren by auto-wraping them into a Fragment HOT 2
- Proposal: using ! prefix on attributes to set them to `false`
- Ambiguous syntax HOT 2
- Spec out whitespacing / line break behaviors HOT 4
- Split Out Lexical Grammar
- Behavior of `�` and lone surrogates unicode entities HOT 2
- Proposal: Attributes with the same name as their value HOT 1
- Proposal: Syntactic sugar for props with same name as value passed HOT 1
- Distinguish tags from elements in the terminology
- Feature request: nameless closing tags
- Proposal: faster way to id and classes HOT 7
- Proposal: combining classes using only className HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jsx.