Proposal: faster way to id and classes

[rafikalid]

Using CSS Selector Syntax to create components:

• <div#myId /> as shortcut of <div id="myId">
• <div#.my-class /> as shortcut of <div className="my-class"/>
• <div#myId.my-class /> as shortcut of <div id="myId" className="my-class" />
• <div#myId.c1.c2.c3 /> as shortcut of <div id="myId" className="c1 c2 c3" />

[orenelbaum]

<div .my-class /> (needs the space to remove ambiguity)

[fabiospampinato]

@orenelbaum it's not ambiguous because this syntax can only be used on native elements and native elements don't have properties like that.

[wooorm]

Define native? Is a-b native? Also: a.b is a member expression, component b from object a, I think that's what's meant here

[fabiospampinato]

Native as in "name of a tag that's supported by the browser by default". div.foo won't be a sub-component, Something.foo might be.

---

Though I suppose this syntax should work for any kind of element/component? 🤔 I wasn't thinking about that for some reason. In that case sure, without a space its ambiguous.

[wooorm]

div.foo will be a subcomponent. The rules (as they are implemented) are a bit different than people sometimes expect. People seem to think that the capital makes it a component, which isn’t the case. There’s also no “knowledge” in JSX about “native” or not: it’s agnostic to the semantics of HTML.

Here’s the rules quoted from the MDX site:

If you ever wondered what the rules are for whether a name in JSX (so x in <x>) is a literal tag name (like h1) or not (like Component), they are as follows:

• If there’s a dot, it’s a member expression (<a.b> -> h(a.b)), which means that the b component is taken from object a
• Otherwise, if the name is not a valid identifier, it’s a literal (<a-b> -> h('a-b'))
• Otherwise, if it starts with a lowercase, it’s a literal (<a> -> h('a'))
• Otherwise, it’s an identifier (<A> -> h(A)), which means a component A

https://mdxjs.com/docs/using-mdx/#components

[lxsmnsyc]

Native as in "name of a tag that's supported by the browser by default". div.foo won't be a sub-component, Something.foo might be.

div.foo always counts as a JSXMemberExpression. A famous example would be Framer Motion's <motion.div>

[ahmed0saber]

Why not adding these shortcuts as user snippets in your code editor?