Proposal: faster way to id and classes

[khalid RAFIK]

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" />

[Oren Elbaum]

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

[Fabio Spampinato]

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

[Titus]

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

[Fabio Spampinato]

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.

[Titus]

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

[Alexis H. Munsayac]

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>

[Ahmed Saber]

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