Inferno: babel-plugin-inferno equivalent as a TypeScript custom transformer

Created on 22 Jun 2017  Â·  12Comments  Â·  Source: infernojs/inferno

Both webpack ts-loader and awesome-typescript-loader now support TypeScript custom transformers, so it could be a good time to start sketching out a babel-plugin-inferno equivalent for .tsx (without needing to pipe to babel).

Example transformer: https://github.com/TypeStrong/ts-loader/blob/master/test/comparison-tests/customTransformer/uppercaseStringLiteralTransformer.js
With typings: https://github.com/TypeStrong/ts-loader/pull/535#issuecomment-309835507
Usage in webpack ts-loader: https://github.com/TypeStrong/ts-loader/blob/master/test/comparison-tests/customTransformer/webpack.config.js#L18-L22

enhancement feature request help wanted

Most helpful comment

I'm working on this and I've come pretty far but just need to convert the project into TypeScript and add tests.

All 12 comments

Yeah transformers won't be stable till 2.4 which is in RC right now
On Thu, Jun 22, 2017 at 8:08 AM plievone notifications@github.com wrote:

Both webpack ts-loader and awesome-typescript-loader now support
TypeScript custom transformers, so it could be a good time to start
sketching out a babel-plugin-inferno
https://github.com/infernojs/babel-plugin-inferno equivalent for .tsx
(without needing to pipe to babel).

Example transformer:
https://github.com/TypeStrong/ts-loader/blob/master/test/comparison-tests/customTransformer/uppercaseStringLiteralTransformer.js
With typings: TypeStrong/ts-loader#535 (comment)
https://github.com/TypeStrong/ts-loader/pull/535#issuecomment-309835507
Usage in webpack ts-loader:
https://github.com/TypeStrong/ts-loader/blob/master/test/comparison-tests/customTransformer/webpack.config.js#L18-L22

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/infernojs/inferno/issues/1154, or mute the thread
https://github.com/notifications/unsubscribe-auth/AAMGbxhnJb2Gd1YU7sjUFA5imDlw2dSfks5sGlksgaJpZM4OCM__
.

2.4 is out now, is there anything I can help with?

I had a really quick look at this yesterday, I believe its do-able but we would need to copy paste some functions from typescript main repo as they are not exposed :/ In The end its all about copying JSX related code from main TS repository and replacing React related things with Inferno equilevants Babel-plugin-inferno is good source for that.

@sijad I'm currently busy with working on Inferno 4.0, if you could work on this task it would be great for TS - inferno community :+1:, I dont know if @longlho already started this or what is the status, but I guess we don't even have public repo for this atm.

Basically somebody needs to look into typescript plugins, how we could hook into the system and transform JSX nodes our own way. Here is link to babel plugin to check how JSX nodes are compiled into vNodes https://github.com/infernojs/babel-plugin-inferno

I'm working on this and I've come pretty far but just need to convert the project into TypeScript and add tests.

Please check it out: https://github.com/deamme/ts-transform-inferno
Any feedback, questions etc. is appreciated.

looks pretty good, maybe some examples & docs would be great :)

I've tried to improve README.md and there is an example folder that one can try to build and learn from.

Somebody please test @deamme 's solution, it looks awesome!

Not quite working with dynamic imports (code-splitting not possible). This should work but I haven't truly tried: TypeStrong/ts-loader#624

It would be awesome if rollup was also supported!

@deamme Can you send PR to mention this plugin in Inferno's Readme and website (https://github.com/infernojs/inferno-website) Lets close this issue :) Good job!

Was this page helpful?
0 / 5 - 0 ratings