Re: Comprehensive JSX support in Emacs

[Jackson Ray Hamilton <jackson@jacksonrayhamilton.com>]

[-- Attachment #1: Type: text/plain, Size: 2851 bytes --]

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


[-- Attachment #2: Type: text/html, Size: 5624 bytes --]