Skip to content
Pier Paolo Ramon edited this page Jul 23, 2015 · 4 revisions

Since v1.3.4 an initial, experimental, Host-mode has been implemented. Simply put, you can now install and use any package distributed throught npm.

Also, as a bonus, we can now run whatever transformer that supports browserify, for example we can use babelify to use Babel.js in order to support ES2015.


✌️ Do you want to see ES2015 (aka ES6) natively supported by Titanium?

👊 Then share your thoughts on the relative Ti.Forward discussion!


⚠️ This is an experimental feature, so please use with caution ⚠️

Current caveats

  • You need to use relative require paths.
  • No support yet for:
    • platform dependent code,
    • debugging/profiling (neither through Appcelerator Studio nor TiInspector),
    • Alloy (try tonylukasavage/ti-commonjs in the meanwhile),
    • Appcelerator Studio Liveview,
    • TiShadow.

Installation

Given that you have a Titanium Classic named MyAwesomeApp you will be able to use titaniumifier in Host-mode with the following (run in the terminal):

# Get into your app project directory
cd MyAwesomeApp

# Initialize an empty `package.json` file
# Follow the instructions, but be sure that `main` points to `Resources/app.js`!
npm init

# Install titaniumifier **locally**
npm install --save-dev titaniumifier

# Simulate the installation of the plugin
./node_modules/.bin/install-titaniumifier-plugin

# Install the plugin in the `plugins` directory and
# set it up in the `tiapp.xml`
./node_modules/.bin/install-titaniumifier-plugin --no-simulate

Make sure that in your package.json the main property points to Resources/app.js!

Now you can just launch your app through Studio or the CLI, and you’re good to go!

To test your setup run in your app directory the following command:

npm install --save underscore

then in your app.js add:

var _ = require('underscore');

var results = _.map([ 1, 2, 3 ], function (a) {
  return a + 3;
});

console.dir(results);

Everything it’s ok if it logs the following:

[4, 5, 6]

Usage with Babel.js

If you want to use ES2015 (a.k.a. ES6) in your titaniumified app project, follow these simple steps.

# Install the plugin (same as before)
cd MyAwesomeApp

# Create a package.json
npm init

# Setup the plugin
npm install --save-dev titaniumifier
./node_modules/.bin/install-titaniumifier-plugin --no-simulate

# Install `babelify` locally
npm install --save-dev babelify babel-runtime

Modify your package.json file so that it looks like:

{
  "name": "MyAwesomeApp",
  // It must point to `Resources/app.js`!
  "main": "Resources/app.js",
  // ...
  "titaniumifier": {
    "transforms": {
      "babelify": {
        "stage": 2,
        "optional": [ "runtime" ]
      }
    }
  }
}

(friendly reminder: JSON does not support comments!)

to test your setup add the following in your app.js:

// Constants!! Yay!
const greeting = "hi_from_the";
// Dynamic property names!! Yay yay!
console.dir({
  [ greeting ]: "future"
});

if it logs

{ "hi_from_the": "future" }

then… Congratulations! You know have an ES2015 compatible Titanium SDK project!

Clone this wiki locally