Plugin development for Neonto DS products (React Studio and Native Studio)
- 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:
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|
|Vector graphics effect||Yes||No|
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.
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.
Proceed to API reference to find out what APIs are available and to learn about the lifecycle of a plugin.
Eventually one might need to inspect the plugin behavior closer e.g. when there's an error. This can be implemented through logging with the following methods:
Prints logs to macOS Console.app (located in Applications -> Utilities).
Prints logs to Native/React Studio's Project Command Line -window (available through Plugins -> Developer Extras -> Project-Level Command Line).