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).
See also my grimoire detailing many fun things to invoke.
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:
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
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:
(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
--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.