Published on 14 Jan 2019 - 2 min read by Richard Lustemberg
Debugging Titanium Hyperloop projects in XCode
Titanium is a cross-platform mobile application framework which was introduced back in 2008. It provides a common api to access native components (iOS, Android, Windows) from a JavaScript codebase.
The core of Titanium is able to provide access to a big share of the native api's though not all of it. In order for developers to be able to extend coverage to a 100% of the native api's and also embed third party libraries, they had to resort to writing modular wrappers bridging the JavaScript environment with it's native counterpart.
Since 2015, a new feature called Hyperloop has been made officially available. Hyperloop allows for direct access to native api's and third party libraries without the need of writing native modules. It automates the process of bridging native objects to their proxies accessible in the JavaScript context. In this manner, it is now possible to write feature rich applications entirely in JavaScript, without the requisite of embedding/writing native modules. Another bonus is that it is now possible to modify the behaviour of Titanium native objects by addressing properties and calling methods not accessible through the object's proxy javaScript interface. We'll go back to these in a future post.
Debugging Hyperloop projects (iOS)
This article covers debugging projects under the iOS platform.
Debugging Hyperloop projects follows the same principles as debugging any Titanium project (using brekpoints either with the Axway Studio or the Safari Web Inspector). But in cases when we are mixing module development and hyperloop on the same app, some extra steps are required when we are debugging or developing a module using XCode.
If we want to use the normal procedure to link our module , we'll notice that unhandled JavaScript exceptions are thrown by the run time. Looking at the stack trace we'll find the following message:
2019-01-14 14:00:41.647365+0100 APP_NAME[2502:6390849] [ERROR] Script Error {
column = 26;
line = 7;
message = "Can't find variable: Hyperloop";
sourceURL = "file:///Users/richard/Library/Developer/CoreSimulator/Devices/38FCBD74-44B3-4D09-B1E9-29F67E0CB54B/data/Containers/Bundle/Application/E149F040-A1CF-40F0-846E-854E33B71D90/TiGiphy.app/hyperloop/examplesdk/giphycore.js";
stack = " at (/hyperloop/examplesdk/examplesdk.js:7:26)\n at global code(/hyperloop/giphycoresdk/giphycore.js:141:70)\n at require@[native code]\n at (/app.js:7:26)\n at global code(/app.js:13:70)\n at require@[native code]\n at (/ti.main.js:28:10)\n at loadAsync(/ti.internal/bootstrap.loader.js:102:13)\n at global code(/ti.main.js:25:52)";
toJSON = "<KrollCallback: 0x600001a806c0>";
}
This is the result of the hyperloop engine not being enabled in the project. As a consequence, the Hyperloop object is not injected in the JavaScript context.
Currently, hyperloop is activated through command line flags set on xcodebuild, not as a configuration option in the XCode file. Nevertheless, the solution is simple: just add the command line flag to the preprocessor options in the build settings of the XCode project file.
So open the file, located at {project_name}/build/iphone/project_name.xcodeproj
Open the project settings tab, find and select preprocessor macros (you may use the search bar for that, and simply add HYPERLOOP=1 to the array of flags.
(with thanks to Jan Vennemann from Axway's core team for the tip)