Plugin development for Neonto DS products (React Studio and Native Studio)

Plugins are JavaScript programs that extend the host application. All types of plugins have a few things in common:

  • They can provide some kind of user interface within Studio
  • They can write out code as part of the export process for a particular target (iOS, Android, ReactJS etc.)

Plugins have deep access within the export process. They can create code and asset files, inject code fragments into files that are written by other parts of the export process, and also modify project metadata for the exported project (e.g. to include npm packages for the ReactJS export target, or embedded framework binaries for the iOS target).

Although there's a single plugin API that is understood by both React Studio and Native Studio, the export-related methods are customized for each target as needed. A plugin can be single-target (it implements only the methods for a particular target such as ReactJS) or multi-target (it implements methods for all targets).

Example plugins For React Studio

Download the plugins from React Studio's Plugin Store. Plugins are saved into Library -> Application Support -> React Studio or simply click Plugins -> Plugin Manager and click "Show plugins folder in Finder".

Example plugins For Neonto Studio Pro (www.neonto.com)

Download a zip package containing example plugins here:

Examples (320 kB)

Supported plugin types

There are several examples included of each of these types in the example plugins package.

Type Available in Native Studio Available in React Studio
Visual element Yes Yes
Non-visual element Yes Yes
Web service Yes Yes
Service Yes No
Animation Yes No
Image effect Yes No
Vector graphics effect Yes No

TIP

A visual element is equivalent to a view in iOS/Android terminology or a component in React terminology. A non-visual element can be used to encapsulate logic that can be placed within a screen/block but doesn't render output itself (e.g. a timer).

Structure of a plugin

Plugins are Apple-style bundle packages. The folder structure is identical to .app files used on macOS and iOS. There is an Info.plist file at the root of the plugin's package folder which describes aspects of the bundle using a format defined by Apple. The rest of the plugin is in the Contents folder (another requirement of the Apple bundle standard).

To read and modify the code of a plugin, right-click on it in Finder and choose “Show Package Contents”.

To install a plugin in a Studio host application, use the Plugin Manager (found in the Plugins menu).

Code and assets

The plugin’s main code is in Contents/Executables/Main.js. This contains the functions that are called by the Studio host app to perform various tasks, e.g. create the user interface and write code as part of an export.

Images and assets used for export are to be placed in Contents/Resources. Plugins have access to APIs for loading resources from this folder, e.g. to draw images in the Studio preview.

Many plugins use text templates that provide code fragments in the target language (e.g. Objective-C, Java, JavaScript/ES6). These should also be placed in Contents/Resources. The choice of template language is up to you. Neonto's own plugins have been using the Mustache template language for this purpose, but this is not a requirement — the Mustache library is included in each plugin as a JS dependency that gets loaded together with the plugin's main code (you can specify these dependencies using a setting in the plugin's Info.plist file). You could do your code generation using some other template language or any method you want.

Where to start

There are two ways to get started with a plugin: you can use the templates available in React Studio, or you can make a new plugin manually.

Using a React Studio template

Look in the Develop menu for the "Create New Plugin" tool. It will ask for some basic specs like plugin name, and will build the plugin's structure for you.

Manually creating a plugin

It's easiest to start a new plugin by modifying one of the working examples.

For example, Randomize.plugin (found in folder “Element examples” within the example zip linked above) is one of the most easily understood complete plugins.

If you want to make a multi-target plugin that works for all major targets (iOS, Android, ReactJS), take a look at Camera.plugin.

To rename the plugin, it's not enough to rename the plugin bundle. You must also edit Contents/Info.plist and replace the plugin name in both the "bundle name" and "bundle identifier" fields. (The bundle identifier is an internal id that is used by the operating system.) You should also change the name Contents/Executables/Main.js, where the plugin can return localized strings to Neonto Studio including the plugin name displayed to the user.

Next

Proceed to API reference to find out what APIs are available and to learn about the lifecycle of a plugin.

Debugging

Eventually one might need to inspect the plugin behavior closer e.g. when there's a error. This can be implemented through logging with the following methods:

console.log(message)

Prints logs to macOS Console.app (located in Applications -> Utilities).

console.trace(message)

Prints logs to Native/React Studio's Project Command Line -window (available through Plugins -> Developer Extras -> Project-Level Command Line).