Here is an example of a skripto plugin :)

Skripto plugins are essentially bundled React components. In order to bundle correctly, it's best to use the skripto-plugin tool, as Skripto has its own way of importing modules (also because there's no easy way to bundle independent React components).

So first, create a package.json

{
  "name": "skripto-plugin-yourplugin",
  "version": "0.0.1",
  "license": "MIT",
  "scripts": {
    "build": "skripto-plugin build src/ plugin/",
  },
}

Then run npm i --save skripto-plugin to install.

It's all set to build the plugin, now let's create the actual code.

In the src/ folder, create a file named manifest.json

{
  "name":"yourplugin",
  "displayName":"Your Plugin",
  "version":"0.0.1",
  "copyright":"Copyright © 2018 John Doe ",
  "type":"option",
  "where":[
    "Toolbar"
  ],
  "config":{
    "Toolbar":{
      "openPanel":true
    }
  }
}

While searching for plugins, Skripto will look into this file to find out which plugins will be where, so don't forget to do this. The 'where' list is crucial, the 'config' object (each key is the same as in the list) is not required but will enable more features.

Now here comes the fun part, the actual components. Create a file called plugin.js and we will add these next lines.

First, let's address the importing system.

// Local imports
import CustomFunction, {defaultFunction} from './localfile.js'
import image from './logo.png'
// Node.js imports
var fetch = imports.fetch
var JSON = imports.JSON

Local files are imported just as usual, there is no problem with this. However, it's impossible to just require() node modules. As plugins are run in a sandbox, only a handful of modules are available, these are imported using the 'imports' object.

Now let's build the components. These don't require importing React, as it is already included :

export class ToolbarItem extends Component {
  constructor(props) {
    super(props)
    // Included properties :
    // - scripto : the skripto object, use this to get/add/remove data
    // - style : the style object
    // - onFileSaved() : change the fileSaved status, but there'll be another way, through emitting events.
  }
  render() {
    return(
      <div className="Logo-Button">

      </div>
      )
  }
}

The component name is very important, usually the main component for a plugin location is followed by 'Item', like 'ToolbarItem'. For the toolbar, it also comes with a second component that opens when the ToolbarItem is clicked, so this is the ToolbarMenu

In your directory containing the package.json, simply run this :

npm run build

The bundled plugin will be in the plugin/ directory.

Obviously, it's not that useful to build to your local plugin/ folder, so while developing, you might want to add a custom script to your package.json that directly builds your plugin in the app's plugin directory. On a mac, it would look something like this:

package.json

{
   ... 
   "scripts": {
      "export":"skripto-plugin build src/ /Applications/Skripto.app/Contents/Resources/plugins/yourplugin/"
   }
}

Then you would run:

npm run export

• A guide as to where to place plugins for specific purposes
• A list of components and specific config