Transformers

[basarat]

Objective

Allow users to create custom syntax that is compiled down to TypeScript (and then js) and is type checked by the typescript compiler.

Use Cases: React, Space-Pen, JSON, others?

Design

User Experience

User creates a foo.tst (typescript transformed) file. The file is handed off to the relevant transformer which spits out .ts content.

• We do not feed this content to the file system but we do feed it to the language service as a pseudo .ts file.

Tranformation sections

Sections relevant for transformation are determined by /*something*/ ....content .... /*something*/ if something is registered as a transform. There are various proposals for something See contenders below.

Errors

Error requests for the file are requested against a psuedo .ts and reported against the pseudo ts file. If they click on the error we show them the psedo ts file. We prevent the user to press ctrl+s on the pseudo ts file. This pseudo ts file is live updated if they update the original src file.

Autocomplete

Lower Priority TypeChecking and readability is really what I am after here. Can be done using source maps and passing the current autocomplete trigger point to the mapped ts location and then to the TypeScript language service.

Allow grammar integration

Transformers can provide a grammar implementation using a tokenizeLine API that works similar to how we currently implement the TypeScript grammar.

Specifying Transformers

Eventually these can be driven by tsconfig.json. Currently these will be hard coded into atom-typescript.

Contenders for transformation syntax

• /*transform*/ paired with /*transform*/ This is inspired by previous work on jsx here. < -ve people dislike comments.
• keyword + backtick here < -ve backticks need escaping

jsx`<div>Hello ${ this.props.name }</div>`;

• __name here < -ve might conflict with actual variable names.
• My opinion:

transform:jsx{ 
/*code here */ 
}transform:jsx 

Research

Source maps

• Defacto lib : https://github.com/mozilla/source-map
• Good article : https://hacks.mozilla.org/2013/05/compiling-to-javascript-and-debugging-with-source-maps/
• list : https://github.com/ryanseddon/source-map/wiki/Source-maps%3A-languages,-tools-and-other-info
• Source maps visualizer : http://sokra.github.io/source-map-visualization/#typescript

⚠️

This feature should be considered experimental. Some form of DSL is definitely needed for TypeScript ecosystem. This is just an experiment.

[icetraxx]

Looking forward to this :).

[basarat]

Moving to wishlist now that we have tsx support