(javascript) JSX does not properly handle inline {} code

[joshgoebel]

Sample from #1915:

import { Radio, Cell } from 'zarm';

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      radio: '0',
    };
  }

  render() {
    return (
      <div>
        <Cell
          description={
            <Radio.Group
              type="button"
              value={this.state.radio}
              onChange={value => console.log(`radio to ${value}`)}
            >
              <Radio value="0">选项一</Radio>
              <Radio value="1">选项二</Radio>
              <Radio value="2">选项三</Radio>
            </Radio.Group>
          }
        >
          普通
        </Cell>

        <Cell
          description={
            <Radio.Group type="button" defaultValue="1">
              <Radio value="0">选项一</Radio>
              <Radio value="1">选项二</Radio>
              <Radio value="2">选项三</Radio>
            </Radio.Group>
          }
        >
          指定默认值
        </Cell>

        <Cell
          description={
            <Radio.Group type="button">
              <Radio value="0">选项一</Radio>
              <Radio value="1">选项二</Radio>
              <Radio value="2" disabled>选项三</Radio>
            </Radio.Group>
          }
        >
          禁用指定项
        </Cell>

        <Cell
          description={
            <Radio.Group type="button" shape="radius">
              <Radio value="0">选项一</Radio>
              <Radio value="1">选项二</Radio>
              <Radio value="2">选项三</Radio>
            </Radio.Group>
          }
        >
          圆角
        </Cell>

        <Cell
          description={
            <Radio.Group type="button" shape="round">
              <Radio value="0">选项一</Radio>
              <Radio value="1">选项二</Radio>
              <Radio value="2">选项三</Radio>
            </Radio.Group>
          }
        >
          椭圆角
        </Cell>
      </div>
    )
  }
}

ReactDOM.render(<Demo />, mountNode);

[luisherranz]

Inline {} code may also contain mixed JS/XML syntax:

const Count = ({ count }) => {
  return (
    <div>
      {count > 10 ? <BigCount /> : <SmallCount />}
    </div>
  );
}

[joshgoebel]

Right.

Pretty sure fixing this is doing to require a custom sublanguage (I don't think we need to continue to add random things to XML because XML can be used in many NON-JSX contexts).

The grammar itself could provide the custom sublanguage and register it. I'd suggest perhaps not a sublanguage at all except for the fact that right now a sublanguage is the only way to switch case sensitive/insensitive modes and JS and XML have different case semantics.

[luisherranz]

I see. Thanks Josh.

[joshgoebel]

Related: https://github.com/highlightjs/highlight.js/pull/2412