├── README.md └── template ├── .gitignore ├── README.md ├── assets └── icon.png ├── package.json ├── sketch-assets └── icons.sketch └── src ├── manifest.json └── my-command.js /README.md: -------------------------------------------------------------------------------- 1 | # with-datasupplier skpm template 2 | 3 | ## Documentation 4 | 5 | - This is a template for [skpm](https://github.com/skpm/skpm) using DataSupplier. 6 | - [For skpm](https://github.com/skpm/skpm): General information about how to work with skpm, not specific to this template 7 | - [For Sketch plugin](http://developer.sketchapp.com): General information about sketch plugin developement 8 | 9 | ## Usage 10 | 11 | ``` bash 12 | $ npm install -g skpm 13 | $ skpm create my-plugin --template=skpm/with-datasupplier 14 | $ cd my-plugin 15 | $ npm run watch 16 | ``` 17 | 18 | ### Fork It And Make Your Own 19 | 20 | You can fork this repo to create your own boilerplate, and use it with `skpm`: 21 | 22 | ``` bash 23 | skpm create my-plugin --template=username/repo 24 | ``` 25 | -------------------------------------------------------------------------------- /template/.gitignore: -------------------------------------------------------------------------------- 1 | # build artefacts 2 | *.sketchplugin 3 | 4 | # npm 5 | node_modules 6 | .npm 7 | npm-debug.log 8 | 9 | # mac 10 | .DS_Store 11 | -------------------------------------------------------------------------------- /template/README.md: -------------------------------------------------------------------------------- 1 | # {{ name }} 2 | 3 | ## Installation 4 | 5 | - [Download](../../releases/latest/download/{{ slug }}.sketchplugin.zip) the latest release of the plugin 6 | - Un-zip 7 | - Double-click on {{ slug }}.sketchplugin 8 | 9 | ## Development Guide 10 | 11 | _This plugin was created using `skpm`. For a detailed explanation on how things work, checkout the [skpm Readme](https://github.com/skpm/skpm/blob/master/README.md)._ 12 | 13 | ### Usage 14 | 15 | Install the dependencies 16 | 17 | ```bash 18 | npm install 19 | ``` 20 | 21 | Once the installation is done, you can run some commands inside the project folder: 22 | 23 | ```bash 24 | npm run build 25 | ``` 26 | 27 | To watch for changes: 28 | 29 | ```bash 30 | npm run watch 31 | ``` 32 | 33 | ### Custom Configuration 34 | 35 | #### Babel 36 | 37 | To customize Babel, you have two options: 38 | 39 | - You may create a [`.babelrc`](https://babeljs.io/docs/usage/babelrc) file in your project's root directory. Any settings you define here will overwrite matching config-keys within skpm preset. For example, if you pass a "presets" object, it will replace & reset all Babel presets that skpm defaults to. 40 | 41 | - If you'd like to modify or add to the existing Babel config, you must use a `webpack.skpm.config.js` file. Visit the [Webpack](#webpack) section for more info. 42 | 43 | #### Webpack 44 | 45 | To customize webpack create `webpack.skpm.config.js` file which exports function that will change webpack's config. 46 | 47 | ```js 48 | /** 49 | * Function that mutates original webpack config. 50 | * Supports asynchronous changes when promise is returned. 51 | * 52 | * @param {object} config - original webpack config. 53 | * @param {object} entry - entry property from webpack config 54 | * @param {boolean} entry.isPluginCommand - whether the config is for a plugin command or a resource 55 | **/ 56 | module.exports = function(config, entry) { 57 | /** you can change config here **/ 58 | }; 59 | ``` 60 | 61 | To use the polyfills or the mocks for certain Node.js globals and modules use the `node` property. 62 | 63 | Visit [the official documention](https://webpack.js.org/configuration/node/) for available options. 64 | 65 | ```js 66 | if(entry.isPluginCommand ){ 67 | config.node = { 68 | setImmediate: false 69 | } 70 | } else { 71 | config.node = false; 72 | } 73 | ``` 74 | 75 | ### Debugging 76 | 77 | To view the output of your `console.log`, you have a few different options: 78 | 79 | - Use the [`sketch-dev-tools`](https://github.com/skpm/sketch-dev-tools) 80 | - Open `Console.app` and look for the sketch logs 81 | - Look at the `~/Library/Logs/com.bohemiancoding.sketch3/Plugin Output.log` file 82 | 83 | Skpm provides a convenient way to do the latter: 84 | 85 | ```bash 86 | skpm log 87 | ``` 88 | 89 | The `-f` option causes `skpm log` to not stop when the end of logs is reached, but rather to wait for additional data to be appended to the input 90 | 91 | ### Publishing your plugin 92 | 93 | ```bash 94 | skpm publish 95 | ``` 96 | 97 | (where `bump` can be `patch`, `minor` or `major`) 98 | 99 | `skpm publish` will create a new release on your GitHub repository and create an appcast file in order for Sketch users to be notified of the update. 100 | 101 | You will need to specify a `repository` in the `package.json`: 102 | 103 | ```diff 104 | ... 105 | + "repository" : { 106 | + "type": "git", 107 | + "url": "git+https://github.com/ORG/NAME.git" 108 | + } 109 | ... 110 | ``` 111 | -------------------------------------------------------------------------------- /template/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skpm/with-datasupplier/f17b7d97970a285d9843fd3ee7f9f789aa3da682/template/assets/icon.png -------------------------------------------------------------------------------- /template/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "{{ slug }}", 3 | "version": "0.1.0", 4 | "description": "A DataSupplier plugin", 5 | "engines": { 6 | "sketch": ">=3.0" 7 | }, 8 | "skpm": { 9 | "name": "{{ name }}", 10 | "manifest": "src/manifest.json", 11 | "main": "{{ slug }}.sketchplugin", 12 | "assets": [ 13 | "assets/**/*" 14 | ], 15 | "sketch-assets-file": "sketch-assets/icons.sketch" 16 | }, 17 | "scripts": { 18 | "build": "skpm-build", 19 | "watch": "skpm-build --watch", 20 | "start": "skpm-build --watch", 21 | "postinstall": "npm run build && skpm-link" 22 | }, 23 | "devDependencies": { 24 | "@skpm/builder": "^0.7.4" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /template/sketch-assets/icons.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/skpm/with-datasupplier/f17b7d97970a285d9843fd3ee7f9f789aa3da682/template/sketch-assets/icons.sketch -------------------------------------------------------------------------------- /template/src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "compatibleVersion": 3, 3 | "bundleVersion": 1, 4 | "icon": "icon.png", 5 | "suppliesData": true, 6 | "commands": [ 7 | { 8 | "script": "./my-command.js", 9 | "handlers": { 10 | "actions": { 11 | "Startup": "onStartup", 12 | "Shutdown": "onShutdown", 13 | "SupplyData": "onSupplyData" 14 | } 15 | } 16 | } 17 | ], 18 | "menu": { 19 | "title": "{{ name }}" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /template/src/my-command.js: -------------------------------------------------------------------------------- 1 | const sketch = require('sketch') 2 | const { DataSupplier } = sketch 3 | const util = require('util') 4 | 5 | export function onStartup () { 6 | // To register the plugin, uncomment the relevant type: 7 | DataSupplier.registerDataSupplier('public.text', '{{ name }}', 'SupplyData') 8 | // DataSupplier.registerDataSupplier('public.image', '{{ name }}', 'SupplyData') 9 | // DataSupplier.registerDataSupplier('public.json', '{{ name }}', 'SupplyData') // Available in Sketch 71+ 10 | } 11 | 12 | export function onShutdown () { 13 | // Deregister the plugin 14 | DataSupplier.deregisterDataSuppliers() 15 | } 16 | 17 | export function onSupplyData (context) { 18 | let dataKey = context.data.key 19 | const items = util.toArray(context.data.items).map(sketch.fromNative) 20 | items.forEach((item, index) => { 21 | let data = Math.random().toString() 22 | // For `public.image`, `data` must be a path to an image 23 | // let data = 'path/to/image' 24 | // For `public.json`, `data` must be a JSON object with layer names for keys, and content for values 25 | // let data = { 26 | // "name": "John", 27 | // "surname": "Doe", 28 | // "email": "developer@sketch.com" 29 | // } 30 | // Check the docs for more info: https://developer.sketch.com/reference/api/#data-supplier 31 | DataSupplier.supplyDataAtIndex(dataKey, data, index) 32 | }) 33 | } 34 | --------------------------------------------------------------------------------