Proposal: faster way to id and classes #153

Activity

1. orenelbaum commented on Jan 6, 2023

   

   orenelbaum

   on Jan 6, 2023

   More actions

   <div .my-class /> (needs the space to remove ambiguity)
2. fabiospampinato commented on Jan 20, 2023

   

   fabiospampinato

   on Jan 20, 2023

   More actions

   @orenelbaum it's not ambiguous because this syntax can only be used on native elements and native elements don't have properties like that.
3. wooorm commented on Jan 20, 2023

   

   wooorm

   on Jan 20, 2023

   More actions

   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
4. fabiospampinato commented on Jan 20, 2023

   

   fabiospampinato

   on Jan 20, 2023

   Last edited by fabiospampinato

   More actions

   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.

   👎React with 👎1Reacted by Alex
5. wooorm commented on Jan 21, 2023

   

   wooorm

   on Jan 21, 2023

   Last edited by wooorm

   More actions

   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
6. lxsmnsyc commented on Feb 9, 2023

   

   lxsmnsyc

   on Feb 9, 2023

   Last edited by lxsmnsyc

   More actions

   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>
7. ahmed0saber commented on Mar 14, 2024

   

   ahmed0saber

   on Mar 14, 2024

   More actions

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