NS:IDE is the NativeScript IDE that lets you get 'inside' your device.
- Made in NativeScript
- Syntax highlighting
- Very dangerous auto-complete functionality based on
- 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.
See my teaser tweet for a video demo.
See the 'Examples' tab in-app (or view them in this repo).
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... Nope, this crashes the page.
tns-platform-declarationsand add a reference such as
/// <reference path="../tns-platform-declarations/ios.d.ts" />
- In future: use my NativeScript Playground https://shirakaba.github.io/NSIDE/. It loads
tns-platform-declarationsand 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.
This project assumes the following folder hierarchy:
. ├── nside └── nativescript-syntax-highlighter
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 firstname.lastname@example.org:shirakaba/nativescript-syntax-highlighter.git
Install NS:IDE dependencies
In the root directory for this project (
nside), run this command:
And then maybe make yourself one of these:
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.
The NativeScript libraries are Apache-licensed (
NativeScript-Licence.txt), whereas this project itself use a GPL 3 licence
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.