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