jsx icon indicating copy to clipboard operation
jsx copied to clipboard

Theoretical: Drop JSXText

Open syranide opened this issue 11 years ago • 6 comments

Bear with me here :) JSX currently looks like this:

<div>
  {'Name of things:' + name} -- no one really does this
  Number of things: {count}
  <span>
    Some {cond ? children : null}
    {'Some newline\n'}
  </span>
</div>

What if it looked like:

<div>
  'Name of things: ' + name, -- it's now intuitive to concatenate
  'Number of things: ', count
  <span>
    'Some ', (cond ? children : null),
    'Some newline\n'
  </span>
</div>
  1. "Arbitrary" JSX white-space rules can be chucked out the window, it's JS-strings plain and simple.
  2. It's super easy to add and see explicit leading/tailing white-space, no weird encoded values or lazy hacks.
  3. It's super easy/intuitive to concatenate stringy content instead of lazily creating more children.
  4. It's JS through-and-through + JSX-elements, comments behave as you would expect.

I imagine that it would be possible to omit ,, if you would really want to.

I realize this would be a ginormous departure from the heavily HTML-based syntax we have currently. From a purely theoretical/technical perspective it makes perfect sense in my opinion, but the practical aspects are obviously very questionable. I don't expect anyone to embrace this, but I think it's an interesting thought.

syranide avatar Aug 29 '14 21:08 syranide

Thank you for reporting this issue and appreciate your patience. We've notified the core team for an update on this issue. We're looking for a response within the next 30 days or the issue may be closed.

ghost avatar Aug 04 '15 18:08 ghost

The equivalent (ignoring whitespace and newline) using template strings:

<div>
    `Name of things: ${name},
    Number of things: ${count}`
    <span>
        `Some ${cond ? children : null}`
    </span>
</div>

gajus avatar Sep 03 '15 05:09 gajus

@gajus It's not equivalent though, you're including indentation and newlines.

syranide avatar Sep 03 '15 07:09 syranide

@syranide You are correct. :+1: Nevertheless, I wanted to include a template string example for visual reference only.

Does indentation and newline matter here?

gajus avatar Sep 03 '15 07:09 gajus

@gajus It ends up in the source code and also affects white-space: pre. I would also expect many to prefer

<span>`
  Foo
  Bar
`</span>

...over...

<span>
  `Foo
  Bar`
</span>

so those would also be affected by the leading and trailing whitespace.

syranide avatar Sep 03 '15 07:09 syranide

The only case it would matter is white-space: pre. In that particular case you can just make an exception and use regular quotes.

gajus avatar Sep 03 '15 07:09 gajus