Re: Comprehensive JSX support in Emacs

[Jackson Ray Hamilton]

Hi Jostein,

Thank you for bringing this use case to my attention.

I haven’t worked with TypeScript before, but I took a look at the docs, and read through the whole JSX page.  It looks like the syntax for JSX is exactly the same in TS as in JS, so my work may have a chance of integrating with typescript-mode.

However, skimming through the rest of the docs, there could be challenges dealing with code that uses angle brackets that look like “tags,” e.g.:

let list: Array<number> = [1, 2, 3];

let square = <Square>{};

let counter = <Counter>function (start: number) { };

let output = identity<string>("myString");

function loggingIdentity<T>(arg: Array<T>): Array<T> {
    console.log(arg.length);
    return arg;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);
    return arg;
}

class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

I understand that “type assertions” will be written with an as keyword in TSX, but it looks like angle brackets are still used in other places in TSX:

class Component extends React.Component<PropsType, {}> {
  render() {
    return (
      <h2>
        {this.props.children}
      </h2>
    )
  }
}

The parser I’ve written to disambiguate JSX from JS in js-mode makes the assumption that matching angle brackets around identifiers indicate the presence of JSX with certainty.  In order to adapt that code for TS, one solution could be to parse more, looking at the surrounding context of the angle brackets to determine whether the thing is a TS type or if it’s JSX.  If you’re up for that challenge, hooks could be added to the parser to perform additional context checks defined by your mode.

Disclaimer: Maybe “parsing more” won’t work, in which case a different strategy might be necessary.  Maybe it’s impossible to know the difference between a TS type and JSX without an AST… I dunno.  In any case, as long as you can figure out what is JSX in TS, and the JSX is marked with the same text properties that js-mode will use, then integration with the rest of the JSX code (which indents and font-locks) should be possible.

Since typescript-mode doesn’t derive from js-mode, I expect you’ll manually pull in the JSX functions and variables from js-mode, and call the functions and use the variables in similar ways, mirroring js-mode’s ways.  I expect you will do these things:

• Merge JSX font-lock keywords into TypeScript’s
• Use JSX syntax propertizing
• Delegate to Emacs’ JSX indentation inside JSX, and go back to typescript-mode’s TS indenting inside JSX expressions
• Enable JSX features for “.tsx” files

I will try to keep the code modular to make it easy for you to pull in the parts you need.

Jackson