Enable transpilers support in NativeScript projects

[ligaz]

A common request we have received in the last couple of months is the ability to enable (or start with) JavaScript transpilers for a given NativeScript project. The usual suspects are TypeScript and Babel which recently became quite popular with the approaching ratification of ES6.

Guiding principles

There a couple of guiding principles we want to follow when we enable this functionality.

Making it generic

We want to design this feature so we can accommodate any transpiler, not just ones for JavaScript. What if you want to use LESS or Sass instead of CSS? Fan of Jade instead of XML we should have you covered.

Per project configuration

This feature should allow usage of different version of the transpiler in different projects. For example you can use TypeScript 1.4 for your production app but switch to the cutting edge TypeScript 1.5 in your new project.

Ability to to start with transpiler or enable it on the go

We believe that the barrier to entry for NativeScript should be as low as the one of the Web. We shouldn't force the users to learn all the cool ES6 features or TypeScript's types system. Users should be able to enable a transpiler for an already existing project or start a new project with given transpiler if this is what they want.

The Command

The support will boil down to a single command that users will have to execute:

$ tns install typescript

or

$ tns install babel

As you can see we have not settled on the command name 😄 We did a little brainstorming sessions internally and we come up with enable (ex. $ tns enable babel) however this sounds too broad and we are not totally sold on it. If you have ideas how we can better name this command please file them in the comments.

Implementation details

Here are some internal and more technical implementation details:

• We plan to add the transpilation code itself in a form of project level hooks. The given transpiler hooks will come in the form of a separate npm package that will be "hooked" in the current NativeScript project.
• All transpilation tools will be added as devDependencies to the project's package.json.

Work breakdown

v1.5

TypeScript support

• tns install typescript command. The compiler should be added as devDependency.
• Consume TypeScript declarations from the tns-core-modules package.
• Generate tsconfig.json if not present.
• Add a project level hook that will do the actual transpilation.

Babel support

Future ideas

TypeScript support for NativeScript plugins

[tjvantoll]

Hey @ligaz,

I like what you have here. I agree that each transpiler should be opt in and as generic as possible. I have two questions:

• 1. Where would tns enable xyz store your preference? package.json presumably? I ask because if that's the case, I'm wondering if the tns enable command is needed at all. Couldn't you just add something to your package.json to enable the transpiler during prepare?
• 2. As a user where would you include transpiler-specific configuration—version, flags, etc? I'm assuming this would be in the package.json as well, but it'd be nice to see a specific example of what that might look like.

[ligaz]

Straight to the points:

1. We need a dedicated command because we want to add the actual code that will do the transpilation as project level hook. This means that the files will reside in the /hooks folder of your project. This cannot (easily and in a maintainable way) happen with pure npm install invocation.
2. This is transpiler specific. For example TypeScript have tsconfig.json file. Babel does not have something like this but we can introduce one if needed.

[emiloberg]

Babel does indeed, it has the babelrc.

[atanasovg]

I really love the generic approach - this is the architectural way to go. Having specific implementations for specific transpilers was my major concern when we discussed this internally.

[jamlfy]

I think it's not such a good idea, to have a compiler, or a command such @ligaz says. I think it's best to use the hooks of NPM, which are

• pre-acction
• acction
• post-acction

This way you can make use of any javascript compiler, since only one command is required. And Hooks are being used, which serve to make many more features, such use Jade-Lang to build XML

[moll]

Is there a point in spending resources on reinventing the build pipeline? I've set mine up with Browserify and Jade's CLI through a no-frills Makefile outside of tns. Others might want to go the JS route, Webpack route or pick any of the other build systems.

I'd rather ask why is tns necessary and if possible, make its use seldom. Fix things at the right level, delegate to existing solutions and focus on the unique bits. And say no a lot. ;-)

[ligaz]

Hey @moll,

I completely agree that there are multiple way you can accomplish the same using whatever tools make sense for your scenario. However many newcomers are "afraid" of the learning curve of setting up those asset pipelines and would prefer something to get them started easily and without much hassle.

Nevertheless whatever we do here will not be re-inventing the tools that are already there. We would just try to provide sane defaults that work great out of the box.

[jamiebuilds]

Babel contrib here, if you need anything from us, feel free to let me know. Happy to help!

[tailsu]

TypeScript and Babel support is now available through hooks:

$ tns install typescript

and

$ tns install babel

The above commands will install nativescript-dev-typescript and nativescript-dev-babel which in turn install the necessary hooks into your project.

Check it out!

[vchimev]

@tailsu,

I just checked out the TypeScript support and noticed that the .ts and .d.ts files are copied into the native app and respectively included into the produced .apk/.ipa.

[tailsu]

Yes, that's not yet implemented. The relevant issue is #887 .

[vchimev]

For any issues and further discussions please refer to #1117.

[toddanglin]

The original issue specifically discussed support for SASS and LESS, too.

Are there still plans to make those two additional CSS transpilers available "out of the box" similar to Babel/TypeScript today?

EDIT:
Seems a transpiler for LESS is already available: https://github.com/NativeScript/nativescript-dev-less
Works with the expected command:

$ tns install less

EDIT 2:
Using the LESS transpiler as a start, I threw together a plugin for SASS: https://github.com/toddanglin/nativescript-dev-sass. Works with the same command:

$ tns install sass

There are also now compiler plugins for Jade, CoffeeScript and XML-XSD. For future reference, growing list of available compiler plugins that work with $ tns install [NAME] can be seen here: https://www.npmjs.com/search?q=nativescript-dev

[pjbonestroo]

For writing complex Javascript applications, where code readability is important, I use Python as main language, compiling to Javascript using Transcrypt (https://www.transcrypt.org/). Generally this means development of single page applications.

It would be great if NativeScript can use such generated Javascript (single file), so that one can develop native apps using Python.
Is there any chance something like this is possible in the future?