4 ms·

> ... the inner JX expression will be evaluated even if cond is false. Well, actually. it don't have to be. Just React decides to compile JSX in that way. Vue

> ... the inner JX expression will be evaluated even if cond is false. Well, actually. it don't have to be. Just React decides to compile JSX in that way. Vue 3 also supports JSX. But it keep the content of children lazily evaluated. Their compiler compile a JSX `<Parent><Child /></Parent>` to structure like `h(Parent, {}, { default: () => h(Child, {}, {}) })` . So the child jsx tag is never evaluated unless the Parent component want to. It's really not a syntax limitation because JSX never specify that the children of element must be eagerly evaluated.

jameshart 3y ago
> It's really not a syntax limitation because JSX never specify that the children of element must be eagerly evaluated. That seems like a dangerous reinterpretation of JSX. It's just a literal syntax, it's not meant to be lazily evaluated. Having a JSX compiler interpret <Parent><Child /></Parent> as h(Parent, {}, { default: () => h(Child, {}, {}) }) would be like having a JS compiler interpret let parent = { child: {} }; as let parent = {}; Object.defineProperty(parent, 'child', { get: () => ({}) }) That's just... not what that syntax means. It should be h(Parent, {}, [ h(Child, {}, []) ]) Saying 'JSX doesn't specify it' feels like playing a 'there's no rule that says a dog can't play basketball' card.
- mmis1000 3y ago
  It's a framework specific DSL anyway. (Unlike e4x, which is actually a standardized feature). There isn't a spec decides how it must be interpreted. And it also don't matter as long as the specific framework that use jsx output standard javascript that browser can understand. In practice, every framework interpret jsx in slightly different way. React has own. Vue has own. Solid has own. And even react itself interpret JSX in 2 way (the new and old jsx compiler). So I feel there really isn't a rule that you can't compile jsx in some specific way because the output is never part of the specification of jsx from the beginning.
jcparkyn 3y ago
Interesting, I haven't used Vue so I wasn't aware that some frameworks do it differently.

jameshart 3y ago

> It's really not a syntax limitation because JSX never specify that the children of element must be eagerly evaluated. That seems like a dangerous reinterpretation of JSX. It's just a literal syntax, it's not meant to be lazily evaluated. Having a JSX compiler interpret <Parent><Child /></Parent> as h(Parent, {}, { default: () => h(Child, {}, {}) }) would be like having a JS compiler interpret let parent = { child: {} }; as let parent = {}; Object.defineProperty(parent, 'child', { get: () => ({}) }) That's just... not what that syntax means. It should be h(Parent, {}, [ h(Child, {}, []) ]) Saying 'JSX doesn't specify it' feels like playing a 'there's no rule that says a dog can't play basketball' card.

mmis1000 3y ago
It's a framework specific DSL anyway. (Unlike e4x, which is actually a standardized feature). There isn't a spec decides how it must be interpreted. And it also don't matter as long as the specific framework that use jsx output standard javascript that browser can understand. In practice, every framework interpret jsx in slightly different way. React has own. Vue has own. Solid has own. And even react itself interpret JSX in 2 way (the new and old jsx compiler). So I feel there really isn't a rule that you can't compile jsx in some specific way because the output is never part of the specification of jsx from the beginning.

jcparkyn 3y ago

Interesting, I haven't used Vue so I wasn't aware that some frameworks do it differently.