Merge branch 'feature/15747' into feature/15741

README.md

@@ -15,10 +15,10 @@ Comments and suggestions for this API are welcome - send them to developers@sket
 
 ## Installation
 
-The API comes bundled inside Sketch, so no installation is required. You access it by obtaining a global `SketchAPI` object:
+The API comes bundled inside Sketch, so no installation is required. You access it by obtaining a global `sketch` object:
 
 ```javascript
-var api = SketchAPI
+var api = sketch
 ```
 
 ## Overview
@@ -41,7 +41,7 @@ One or two important properties of layers are exposed directly in the wrappers.
 
 There is the beginning of a wrapper class `Style` for layer styles, but it's currently very simple. The plan here will be to allow a quick way to set up all the common properties of a style, in a way that is uniform and consistent.
 
-On `api.Settings`, there is also some support for more global tasks such as reading/writing preferences.
+On `sketch.Settings`, there is also some support for more global tasks such as reading/writing preferences.
 
 The api object also exposes some utility classes. Currently the main one of note is `Rectangle`, which is a javascript-native representation of a rectangle. The plan is to use this class consistently within the API, in order to try to mask the fact that the model itself uses a confusing mix of `NSRect`, `CGRect`, `MSRect` and `MSAbsoluteRect`! In time more utility classes may be added. In time, also, we hope to clean up the model to be more consistent, at which point `Rectangle` might just turn into a thin wrapper for one of the native types.
 
@@ -66,7 +66,7 @@ if (obj1 == obj2) {
 }
 
 // this is better - both wrappers might represent the same object
-if (obj1.isEqual(obj2.sketchObject)) {
+if (obj1.isEqual(obj2)) {
   /* do stuff */
 }
 ```
@@ -76,26 +76,25 @@ if (obj1.isEqual(obj2.sketchObject)) {
 Here's a very simple example script:
 
 ```javascript
-var api = SketchAPI
+log(sketch.version.api)
+log(sketch.version.sketch)
 
-log(api.version.api)
-log(api.version.sketch)
-
-var document = api.fromNative(context.document)
+var document = sketch.fromNative(context.document)
 var selection = document.selectedLayers
 var page = document.selectedPage
 
-var Group = api.Group
-var Shape = api.Shape
+var Group = sketch.Group
+var Shape = sketch.Shape
+var Rectangle = sketch.Rectangle
 
 var group = new Group({
   parent: page,
-  frame: new sketch.Rectangle(0, 0, 100, 100),
+  frame: new Rectangle(0, 0, 100, 100),
   name: 'Test',
 })
 var rect = new Shape({
   parent: group,
-  frame: new Sketch.rectangle(10, 10, 80, 80),
+  frame: new Rectangle(10, 10, 80, 80),
 })
 
 log(selection.isEmpty)
@@ -109,13 +108,13 @@ log(selection.isEmpty)
 group.select()
 rect.addToSelection()
 
-var outputString = api.UI.getStringFromUser('Test', 'default')
-var outputSelection = api.UI.getSelectionFromUser('Test', ['One', 'Two'], 1)
-api.UI.message(document, 'Hello mum!')
-api.UI.alert('Title', 'message')
+var outputString = sketch.UI.getStringFromUser('Test', 'default')
+var outputSelection = sketch.UI.getSelectionFromUser('Test', ['One', 'Two'], 1)
+sketch.UI.message('Hello mum!')
+sketch.UI.alert('Title', 'message')
 
-api.Settings.setSettingForKey(context, 'setting-to-remember', outputString)
-log(api.Settings.settingForKey(context, 'setting-to-remember'))
+sketch.Settings.setSettingForKey(context, 'setting-to-remember', outputString)
+log(sketch.Settings.settingForKey(context, 'setting-to-remember'))
 ```
 
 For more examples, we recommend checking out the [examples section of the developer website](http://developer.sketchapp.com/examples/).

Source/Style.js

@@ -113,7 +113,7 @@ Style.define('borders', {
         Object.keys(BorderPosition).find(
           key => BorderPosition[key] === f.position()
         ) || f.position(),
-      width: 0 + f.thickness(),
+      thickness: 0 + f.thickness(),
     }))
   },
   set(values) {
@@ -128,8 +128,8 @@ Style.define('borders', {
       } else {
         color = Style.colorFromString(value.color)
         fillType = FillType[value.fillType] || value.fillType
-        if (value.width) {
-          border.thickness = value.width
+        if (value.thickness) {
+          border.thickness = value.thickness
         }
         if (value.position) {
           border.position = BorderPosition[value.position] || value.position

docs/Artboard.md

@@ -5,7 +5,7 @@ section: components
 ---
 
 ```javascript
-var Artboard = SketchAPI.Artboard
+var Artboard = sketch.Artboard
 ```
 
 ```javascript

docs/DataSupplier.md

@@ -6,7 +6,7 @@ hidden: true
 ---
 
 ```js
-var DataSupplier = SketchAPI.DataSupplier
+var DataSupplier = sketch.DataSupplier
 
 var dataSupplier = new DataSupplier(context)
 ```
@@ -28,7 +28,7 @@ Return a DataSupplier object with the following methods:
 ```js
 // onStartup would the handler for the `Startup` action defined in the manifest.json
 export function onStartup(context) {
-  var dataSupplier = new SketchAPI.DataSupplier(context)
+  var dataSupplier = new sketch.DataSupplier(context)
 
   dataSupplier.registerStaticSupplier('public.text', 'My Custom Data', [
     'foo',
@@ -53,7 +53,7 @@ Register some data with a name.
 ```js
 // onStartup would be the handler for the `Startup` action defined in the manifest.json
 export function onStartup(context) {
-  var dataSupplier = new SketchAPI.DataSupplier(context)
+  var dataSupplier = new sketch.DataSupplier(context)
 
   dataSupplier.registerPluginDataSupplier(
     'public.text',
@@ -80,7 +80,7 @@ Register some data with a name and a key.
 export function onSupplyKeyNeeded(context) {
   var count = context.data.count
 
-  var dataSupplier = new SketchAPI.DataSupplier(context)
+  var dataSupplier = new sketch.DataSupplier(context)
 
   var data = Array.from(Array(count)).map(i => 'foo')
 
@@ -101,7 +101,7 @@ When the plugin providing the dynamic data has finished generating the data, it
 ```js
 // onShutdown would be the handler for the `Shutdown` action defined in the manifest.json
 export function onShutdown(context) {
-  var dataSupplier = new SketchAPI.DataSupplier(context)
+  var dataSupplier = new sketch.DataSupplier(context)
 
   dataSupplier.deregisterDataSuppliers()
 }

docs/Document.md

@@ -5,7 +5,7 @@ section: components
 ---
 
 ```javascript
-var Document = SketchAPI.Document
+var Document = sketch.Document
 ```
 
 ```javascript

docs/Group.md

@@ -5,7 +5,7 @@ section: components
 ---
 
 ```javascript
-var Group = SketchAPI.Group
+var Group = sketch.Group
 ```
 
 ```javascript
@@ -33,7 +33,7 @@ var group = new Group({
   name: 'my name',
   layers: [
     {
-      type: SketchAPI.Types.Text,
+      type: sketch.Types.Text,
       text: 'Hello world',
     },
   ],

docs/Image.md

@@ -5,7 +5,7 @@ section: components
 ---
 
 ```javascript
-var Image = SketchAPI.Image
+var Image = sketch.Image
 ```
 
 ```javascript

docs/Layer.md

@@ -5,7 +5,7 @@ section: components
 ---
 
 ```javascript
-var Layer = SketchAPI.Layer
+var Layer = sketch.Layer
 ```
 
 ```javascript

docs/Page.md

@@ -5,7 +5,7 @@ section: components
 ---
 
 ```javascript
-var Page = SketchAPI.Page
+var Page = sketch.Page
 ```
 
 ```javascript

docs/Rectangle.md

@@ -5,7 +5,7 @@ section: Utils
 ---
 
 ```javascript
-var Rectangle = SketchAPI.Page
+var Rectangle = sketch.Page
 ```
 
 ```javascript

docs/Settings.md

@@ -5,7 +5,7 @@ section: API
 ---
 
 ```js
-var Settings = SketchAPI.Settings
+var Settings = sketch.Settings
 
 import { Settings } from 'sketch-api'
 ```

docs/Shape.md

@@ -5,7 +5,7 @@ section: components
 ---
 
 ```javascript
-var Shape = SketchAPI.Shape
+var Shape = sketch.Shape
 ```
 
 ```javascript

docs/Style.md

@@ -5,7 +5,7 @@ section: Utils
 ---
 
 ```javascript
-var Style = SketchAPI.Style
+var Style = sketch.Style
 ```
 
 ```javascript
@@ -29,16 +29,16 @@ shape.style.fills = [
 
 A utility class to represent the style of a shape.
 
-| Properties          | type                              | Description                                      |
-| ------------------- | --------------------------------- | ------------------------------------------------ |
-| fills               | Object[]                          | The fills of a shape.                            |
-| fills[x].color      | String                            | A rgba hex-string (`#000000ff` is opaque black). |
-| fills[x].fillType   | [FillType](#filltype)             | The type of the fill.                            |
-| borders             | Object[]                          | The borders of a shape.                          |
-| borders[x].color    | String                            | A rgba hex-string (`#000000ff` is opaque black). |
-| borders[x].fillType | [FillType](#filltype)             | The type of the fill of the border.              |
-| borders[x].position | [BorderPosition](#borderposition) | The position of the border.                      |
-| borders[x].width    | Number                            | The size of the border.                          |
+| Properties           | type                              | Description                                      |
+| -------------------- | --------------------------------- | ------------------------------------------------ |
+| fills                | Object[]                          | The fills of a shape.                            |
+| fills[x].color       | String                            | A rgba hex-string (`#000000ff` is opaque black). |
+| fills[x].fillType    | [FillType](#filltype)             | The type of the fill.                            |
+| borders              | Object[]                          | The borders of a shape.                          |
+| borders[x].color     | String                            | A rgba hex-string (`#000000ff` is opaque black). |
+| borders[x].fillType  | [FillType](#filltype)             | The type of the fill of the border.              |
+| borders[x].position  | [BorderPosition](#borderposition) | The position of the border.                      |
+| borders[x].thickness | Number                            | The thickness of the border.                     |
 
 ## FillType
 

docs/Text.md

@@ -5,7 +5,7 @@ section: components
 ---
 
 ```javascript
-var Text = SketchAPI.Text
+var Text = sketch.Text
 ```
 
 ```javascript

docs/UI.md

@@ -5,7 +5,7 @@ section: API
 ---
 
 ```js
-var UI = SketchAPI.UI
+var UI = sketch.UI
 
 import { UI } from 'sketch-api'
 ```

docs/fromNative.md

@@ -5,7 +5,7 @@ section: Utils
 ---
 
 ```javascript
-var document = SketchAPI.fromNative(context.document)
+var document = sketch.fromNative(context.document)
 ```
 
 ```javascript

docs/installation.md

@@ -5,10 +5,10 @@ section: topics
 ---
 
 ```javascript
-var api = SketchAPI
+var api = sketch
 ```
 
-The API comes bundled inside Sketch, so no installation is required. You access it by obtaining a global `SketchAPI` object.
+The API comes bundled inside Sketch, so no installation is required. You access it by obtaining a global `sketch` object.
 
 ```javascript
 npm install sketch-api

exposed-npm-package.js

@@ -1,9 +1,9 @@
-/* globals SketchAPI */
+/* globals sketch */
 
 /**
  * We publish this file as a package (`sketch-api`) so that:
  *   - you can use it in your plugin instead of the global (`import { Document } from 'sketch-api'`)
  *   - we can potentially publish types (TypeScript and flow) along with it later on
  */
 
-module.exports = SketchAPI
+module.exports = sketch

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sketch-api",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "author": "Sam Deane",
   "license": "MIT",
   "description": "Javascript API for Sketch",

webpack.config.js

@@ -16,7 +16,7 @@ const config = {
   entry: './Source/index.js',
   output: {
     filename: 'SketchAPI.js',
-    library: 'SketchAPI',
+    library: 'sketch',
     path: OUTPUT_PATH,
   },
   resolve: {