Sketch Builder

A utility to transpile JavaScript to CocoaScript

Why?

Sketch Plugins are made possible by CocoaScript, a bridge that lets you use Objective-C/Cocoa code from an external script written in JavaScript. The bridge takes care of the translation between JavaScript and Cocoa.

This is great.

You can use two different styles when writing your scripts: dot notation and bracket notation. Which means that you can use var l = a.length() as well as var l = [a length].

Ok, well I guess it could be useful for Objective-C devs (even though Swift look a lot more like JavaScript than good old Obj-c). Unfortunately, if you use the bracket notation, you won't be able to use any kind of javascript linter :sad:

To import functions defined in another file, you can use the syntax @import 'my-shared-file.cocoascript'

Wait, what? Do I really need to give up on explicit dependency injection? Do I really need to give up on the npm ecosystem? Do I really need to use a non-JavaScript syntax for that and break all linters?

Oh, and you can't use console.log, you need to use log.

Solution

Using a transpiler to build CocoaScript files from JavaScript files.

It means that you can:

• write in in ES6+,
• require any npm modules,
• use your favorite linter (here is an ESLint config for sketch),
• use console.log (you're welcome).

Heck, you can even share sketch specific modules on npm (here is one for example), no more copy/pasting from one project to another!

How

You project needs to look like this:

/
  my-plugin.sketchplugin/
    Content/
      Resources/
        any-resource.png
  src/
    lib/
      any-shared-code.js
    commands/
      any-command.js
    manifest.json
  package.json

Install sketch-build:

npm i -D sketch-builder

Add a script in your package.json:

"scripts": {
  "build": "sketch-builder src/commands -o my-plugin.sketchplugin -m src/manifest.json"
}

You probably want to add this line to your .gitignore:

my-plugin.sketchplugin/Contents/Sketch

Example

See a real life example here: https://github.com/mathieudutour/git-sketch-plugin