A JavaScript IDE for accessing a phone/tablet's native runtime via NativeScript bindings!
Branch: master
Clone or download
Latest commit 09acd79 Feb 10, 2019

README.md

NS:IDE
NS:IDE

star this repo fork this repo Open Source Love PRs Welcome Follow on Twitter

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

auto-complete native manipulation

Example usage

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

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 NativeScript Playground (see below), but I still need to publish a dependency.

  • For now, see https://docs.nativescript.org.
  • Start a NativeScript Playground from the TypeScript template and install tns-platform-declarations and add a reference such as /// <reference path="../tns-platform-declarations/ios.d.ts" /> ... Nope, this crashes the page.
  • In future: use my NativeScript Playground https://shirakaba.github.io/NSIDE/. It loads tns-platform-declarations and a few other libs from http://localhost:8888/shirakaba.github.io/NSIDE; it looks like I still need to publish my project for serving these libs, however.

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: ☕️

Run

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

# 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).
  • --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.