NS:IDE

NS:IDE is the NativeScript IDE that lets you get 'inside' your device.

Access any native functionality at run-time by calling a Javascript API that binds to the Obj-C (iOS) or Java (Android) run-time.

Features

• Made in NativeScript
• Syntax highlighting
• Very dangerous auto-complete functionality based on eval()
• Access to the whole native run-time, fully documented on nativescript.org for both iOS and Android (see note below)
• Potential to introduce TypeScript, if a contributor is feeling brave, or at least TypeScript's auto-completion (NativeScript is fully-typed!)

NOTE: I haven't yet implemented Android support because I lack the expertise to produce a syntax highlighter component for it, but it's perfectly possible in future.

Demo

See my teaser tweet for a video demo.

Example screenshots

Example usage

See the 'Examples' tab in-app (or view them in this repo).

See also my grimoire detailing many fun things to invoke.

API Documentation

The built-in auto-complete gets you the method and property names, but doesn't tell you what params to enter into functions. For this, you need to either make a good guess of what the JS-syntax equivalent is from how the native method is invoked (which is easy if the params are all primitives like numbers), or refer to the API documentation.

I myself use my custom TypeScript Playground loaded with the appropriate tns-platform-declarations for each platform, as the official NativeScript Playground crashes if you add /// <reference path="../tns-platform-declarations/ios.d.ts" />.

My NativeScript Playground is available:

• for iOS
• for Android

You can consult the official documentation at: https://docs.nativescript.org

It's also immensely helpful to view the platform declarations directly: https://github.com/NativeScript/NativeScript/tree/master/tns-platform-declarations

Setup

This project assumes the following folder hierarchy:

.
├── nside
└── nativescript-syntax-highlighter

Where nside is this git repository, and nativescript-syntax-highlighter is the git repository of my NativeScript Syntax Highlighter plugin. That is to say, they are expected to be siblings.

Get my NativeScript Syntax Highlighter plugin

I haven't published it to npm, so you'll have to clone it from here:

git clone git@github.com:shirakaba/nativescript-syntax-highlighter.git

Install NS:IDE dependencies

In the root directory for this project (nside), run this command:

npm install

And then maybe make yourself one of these: ☕️

(Build and) run

To run for iOS (Android is not supported yet):

# Compile the TypeScript sources to JS.
# (Do this in a separate terminal, as it's an interactive command)
./node_modules/.bin/tsc --watch

# Build-and-run on a simulator or real phone.
# (This is shorthand for "prepare, build and deploy".)
tns run ios

And now maybe make yourself one of these: 🍵

Full documentation for tns run ios here. Useful flags to pass:

• --hmr: activates hot module reloading (I highly recommend it).
• --bundle: I fall back to this when webpack starts misbehaving under --hmr.
• --clean: forces a complete rebuild. Useful if you run into caching problems.
• --emulator: instructs NativeScript to run the app in the iOS Simulator even if you have your device connected.

Licence

Libraries

The NativeScript libraries are Apache-licensed (NativeScript-Licence.txt), whereas this project itself use a GPL 3 licence LICENCE.txt.

NativeScript Syntax Highlighter is Apache 2.0 licensed, and makes use of the MIT-licensed Highlightr iOS native library.

Art

The NS:IDE logo itself is made from images from the Firefox OS emojis under the Creative Commons Attribution 4.0 International (CC BY 4.0) licence. Modifications are as follows, and the Photoshop file can be consulted here (appicon.psd).

• u1F50D-leftmagnifyingglass – colours adjusted, and glass portion made transparent
• u1F4AC-speechbubble – colours adjusted, and masked off to show only the speech lines
• u1F4F1-cellphone – colours adjusted
• u1F52C-microscope – (unused in the end, but present in the Photoshop file)
• u1F5AE-wiredkeyboard – (unused in the end, but present in the Photoshop file)

More of my stuff

• LinguaBrowse (iOS) on the App Store – made in Swift
• LinguaBrowse (macOS) on the App Store – made in React Native + TypeScript + Swift
• Plucky Box (iOS) on the App Store, GitHub, expo.io as Android/iOS – made in React Native + TypeScript
• @LinguaBrowse – my Twitter account. I talk about NativeScript, React Native, TypeScript, Chinese, Japanese, and my apps on there.