Disclaimer: aint so good at this coding thing :)
I got a few errors while testing this. Not sure if I'm following the steps as intended. Here's what I did:

1. Created a new folder pluginTest, not in the sketch plugins folder
2. Ran skpm init
3. Ran skpm build, and got this error:

Error: ENOENT: no such file or directory, mkdir '/Users/aminnassiri/Projects/pluginTest/plugin.sketchplugin/Contents/Sketch'

4. Added the folders manually and ran skpm build again. Got this error:

error Error while building ./my-command.js
{ SyntaxError: /Users/aminnassiri/Projects/pluginTest/src/my-command.js: Unterminated string constant (2:31)
1 | export default function (context) {
2 | context.document.showMessage('It's alive 🙌')

5. Changed the string and ran skpm build again. Worked this time.
6. Installed the plugin and tested it. Works!
7. Ran the skpm link and got this error:

Amins-MBP:pluginTest aminnassiri$ skpm link /Users/aminnassiri/Library/Application\ Support/com.bohemiancoding.sketch3/Plugins
error Error while reading the package.json file
{ Error: Cannot find module '/Users/aminnassiri/Projects/pluginTest/Users/aminnassiri/Library/Application Support/com.bohemiancoding.sketch3/Plugins/package.json'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (/usr/local/lib/node_modules/skpm/lib/skpm-link.js:24:17)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3) code: 'MODULE_NOT_FOUND' }

After updating to the latest version, I'm getting the following JS console error when opening up a WebUI view:

ReferenceError: Can't find variable: exports

I've gone through a few of the previous commits, and the last commit that successfully compiles is be946f4f656cb83c9e6387978b1ca40670d292af.

Should I change how my Resource files are getting compiled? Would appreciate some direction on this so I can use the latest code.

I'm trying to use the skpm publish feature, and I'm getting this error:

error Missing "name" field in the package.json

There's definitely a name field in package.json (I've also tried setting it in skpm.name in package.json, and in manifest.json).

I'm probably doing something wrong, but there's not a lot of documentation on the publish section.

Thanks in advance!

I have yarn and npm set up so they dont use the 'v' prefix on releases and that causes skpm to not be able to push the tag for obvious reasons as it cant find 'v1.0.1'

'@skpm/file-loader' is not in the npm registry'. when i am type npm i -g skpm

Looking through skpm sources I figured out that I can use my own webpack.config.js to augment included skpm's webpack config.

I was playing around this feature and stumbled upon pretty weird case when I add custom plugins into webpack config.

Though build finishes successfully and my plugins are applied, output command scripts appear wrapped multiple times into run function (by WebpackHeaderFooterPlugin), moreover commands from different "script" are included (I have multiple "script"s defined in "manifest.json"). If you try to run it from Sketch, it will crash with an exception: Exception: TypeError: undefined is not an object (evaluating that.context = context).

I guess that's caused by the following in webpackConfig.js:

My guess is that when multiple "script" files are run through 'webpack' userDefinedWebpackConfig.plugins becomes mutated.

Changing it to let plugins = [...userDefinedWebpackConfig.plugins] || [] did indeed fixed that.

I can provide a PR that introduces exactly that change, or can provide with repro case for you to look around.

Need 'babel-polyfill' to provide "regeneratorRuntime" function, when using "co" or "async-await" function

Would be curious to hear your opinions on implementing a watch command. My initial thoughts for the workflow would be:

1. Within an initialized project, run the skpm watch command
2. skpm would then listen for all changes within the src (and Resources?) directory. Alternatively the user could set a watch_glob (or something similar) within the package.json?
3. When a change is detected, it would essentially run the skpm build and skpm link commands.
4. The changes would now be reflected within Sketch.

My main motivation for this request is to be able to make a change and have that change immediately reflected within Sketch. This seems like a much better workflow compared to running skpm build and skpm link manually after each change.

Do you have any thoughts or opinions on the above? Does this functionality already exist and I'm just missing it?

Thanks.

I am using react-sketchapp library in order to generate some sketch files. Following their example if I run npm run render after npm install below is what I get.

I installed skpm separately npm install -g skpm to make sure it's installed globally as well.

Appreciate any directions.

> [email protected] render /Users/ikaplan/Desktop/react-sketchapp/examples/colors
> skpm build --watch --run

/Users/ikaplan/Desktop/react-sketchapp/examples/colors/node_modules/skpm/lib/utils/getSketchVersion.js:11
  .then(function ({ stdout, stderr }) {
                  ^

SyntaxError: Unexpected token {
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/Users/ikaplan/Desktop/react-sketchapp/examples/colors/node_modules/skpm/lib/skpm-build.js:11:24)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)

npm ERR! Darwin 16.7.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "render"
npm ERR! node v4.4.7
npm ERR! npm  v2.15.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] render: `skpm build --watch --run`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] render script 'skpm build --watch --run'.
npm ERR! This is most likely a problem with the colors package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     skpm build --watch --run
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs colors
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR!     npm owner ls colors
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/ikaplan/Desktop/react-sketchapp/examples/colors/npm-debug.log

Ran

$ skpm init git+ssh://[email protected]:jongold/react-sketchapp-skpm-example.git
....
$ yarn

package.json is as follows:

{
	"name": "test-skpm-init",
	"version": "1.0.0",
	"main": "plugin.sketchplugin",
	"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1",
		"build": "skpm build",
		"watch": "skpm build --watch",
		"link": "skpm link",
		"publish": "skpm publish"
	},
	"author": "",
	"license": "ISC",
	"description": "",
	"manifest": "src/manifest.json",
	"devDependencies": {
		"babel-preset-es2015": "^6.22.0",
		"babel-preset-react": "^6.22.0",
		"eslint": "^3.17.1",
		"eslint-config-airbnb": "^14.1.0",
		"eslint-plugin-import": "^2.2.0",
		"eslint-plugin-jsx-a11y": "^4.0.0",
		"eslint-plugin-react": "^6.10.0",
		"skpm": "^0.5.0"
	}
}

Would be much nicer if they were preserved deps so it works out of the box:

https://github.com/jongold/react-sketchapp-skpm-example/blob/master/package.json

This is likely an issue with my own babel setup, but when using an external npm module (in this case xml2js), I'm getting the following error:

<Error>: ReferenceError: Can't find variable: require.
	Plugin “[Plugin Name]”, line 47:
	» var Util = _interopDefault(require('util'));
2017-04-06 15:57:02.173 Sketch[15619:8424183] Exception: {
    column = 35;
    line = 47;
}

This same error happens any time I use a module that uses the require method of importing modules. Here's my .babelrc:

{
  presets: [
    ["es2015", {modules: false}],
    "react",
  ],
  plugins: [
    "external-helpers",
    "transform-react-jsx",
  ],
}

I imagine I'm missing something obvious here... the es2015 preset should do the conversion, shouldn't it?

Thanks.

It's not clear in the docs whether an edit on any of the JSON files in a project should trigger a rebuild when using skpm build --watch, and I'm not sure if that's a bug or a feature : )

• watch package.json
• watch manifest.json

running skpm publish -n still submits a PR to the registry

After a code change and running the build command, how would I go about updating the locally installed plugin?

I ran the link command and I can see the symlink in sketch plugin folder. Not sure what's the purpose of this command.

Hi,

I am working on a react-sketchapp project that uses skpm. One of the node modules I am using has ES.next syntax that isn't getting recognized during compilation (skpm build --watch --run):
the equals sign after static propTypes.

I have included a .babelrc file at the root of my project with the following settings, per suggestions from here & here:

{
  "presets": ["es2015", "react", "stage-0"],
  "plugins": ["transform-runtime", "transform-class-properties"]
}

Does skpm ignore the node_modules folder? If so, how can I change that? A full repo where the issue can be reproduced is available here.

something like sketch-builder release [major|minor|patch]:

• npm version ...
• sketch-builder build
• zip plugin
• git push
• use github api to create release
• upload zip

https://github.com/atom/apm/blob/master/src
https://gist.github.com/caspyin/2288960
https://github.com/aktau/github-release

My manifest.json uses action handlers like this:

    …
    "commands": [
        {
            "name": "Artboard Manager",
            "identifier": "artboardmanager",
            "script": "./artboard-manager.js",
            "handlers" : {
                "actions": {
                    "ArtboardChanged.finish": "ArtboardChanged",
                    "LayersMoved.finish": "LayersMoved",
                    "Duplicate.finish": "Duplicate",
                    "HandlerLostFocus": "Resize",
                    "ResizeArtboardToFit": "ResizeArtboardToFit"
                }
            }
        },
    …

Currently, building a plugin will only create a handler for the onRun event. As a workaround, I am creating a new dummy command for each action I want to trigger:

        {
            "script" : "./artboard-manager.js",
            "name" : "Artboard Manager - ArtboardChanged",
            "handler" : "ArtboardChanged",
            "identifier" : "artboardmanager.artboardchanged"
        },
        {
            "script" : "./artboard-manager.js",
            "name" : "Artboard Manager - LayersMoved",
            "handler" : "LayersMoved",
            "identifier" : "artboardmanager.layersmoved"
        },
        {
            "script" : "./artboard-manager.js",
            "name" : "Artboard Manager - Duplicate",
            "handler" : "Duplicate",
            "identifier" : "artboardmanager.duplicate"
        },
        {
            "script" : "./artboard-manager.js",
            "name" : "Artboard Manager - Resize",
            "handler" : "Resize",
            "identifier" : "artboardmanager.resize"
        },
        {
            "script" : "./artboard-manager.js",
            "name" : "Artboard Manager - ResizeArtboardToFit",
            "handler" : "ResizeArtboardToFit",
            "identifier" : "artboardmanager.ResizeArtboardToFit"
        }

but it would be nice if skpm supported action handlers out of the box.

For the case when we run skpm build --watch --run would be good if the plugin could be launched again without actually re-building it.

This is useful for the case the plugin uses either external commands from the assets folder and any change to this command would be run again.

Thank you

The skpm link command isn't working at all for me. Here's the error code.
Any ideas?

Here's the full error message:

skpm link max-character-count.sketchplugin/
error Error while reading the package.json file
{ Error: Cannot find module '/Users/kevin.cannon/Repositories/SketchPlugins/max-character-count/max-character-count.sketchplugin/package.json'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/usr/local/lib/node_modules/skpm/lib/skpm-link.js:55:17)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3) code: 'MODULE_NOT_FOUND' }

Note, this is just trying to link a skeleton plugin crated via skpm init, so there's nothing fancy in it.

Given a command file test.js containing:

export function foo(){}
export function bar(){}

the output will be:

Object.defineProperty(exports, '__esModule', { value: true });

function foo() {}
function bar() {}

exports.foo = foo;
exports.bar = bar;

However, Sketch doesn't have an exports variable, so this fails. The problem doesn't happen when using export default because the result compiles to var onRun. This means that it isn't possible to hold multiple commands in a single file without some hackery. To work around it, one can do this:

var foo = function (){}
var bar = function (){}

export default function(){
  foo, bar
}

which compiles to:

var foo = function () {};
var bar = function () {};
var onRun = function () {
  foo, bar;
};

onRun can be ignored now that foo and bar are accessible. However, it must be included to ensure something is compiled (the file will be empty otherwise) and the references to foo and bar inside it trick the compiler into thinking they're needed, thus including them.

references:

Something I find myself doing constantly is
tail -f ~/Library/Logs/com.bohemiancoding.sketch3/Plugin\ Output.log

Sometimes this file gets trashed (why?), so you have to do
touch ~/Library/Logs/com.bohemiancoding.sketch3/Plugin\ Output.log and then run it again.

🙃

Do you think it's within the scope of skpm to add a logs command that wraps ^^^? Happy to write the code if you're into it.

defaults write ~/Library/Preferences/com.bohemiancoding.sketch3.plist AlwaysReloadScript -bool YES

(http://developer.sketchapp.com/introduction/preferences/)

Hi there,

we're about to merge a small refactor in the code that watches the Plugin directory for changes, and as a consequence of that, Sketch will no longer automatically load plugins added externally (i.e: via skpm link). It would be nice if skpm would warn users about that, and ask them to relaunch Sketch when linking a new plugin.

The AlwaysReloadScript preference will still work as usual, so the change only affects the linking phase.

• registry URL
• sketch plugins folder location
• plugins

We could maybe store the plugins installed and their version here as well so that when setting up a new computer, you just have to add your old .skpmrc and run skpm install. skpm update could use those versions as well?

Currently it seems to be ignored, and needs to be added manually to manifest.json for it to show up in Sketch's plugin list.

• create basic architecture
• create package.json
• create manifest.json

Importing or requiring lodash causes the plugin to error.

This may be because lodash depends on node.js?

Here is the error:

SyntaxError: Unexpected token '('. Expected a property name after '.'..
Plugin “Untitled”, line 1847:
»       return length ? arraybaseRandom.(0, length - 1)() : undefined;

Added rollup-plugin-progress to compare compilation times between rollup & webpack on the simple react-sketchapp examples — feels like rollup is significantly slower the webpack

skpm

initial build ~3500ms
incremental builds w/ watch ~1500ms
incremental builds w/ watch, + disabling treeshake ~1000ms

webpack

initial build ~3500ms
incremental builds ~60ms

Is there a bug in the skpm config? Is there a better watch we can use? Should we disable treeshake?

https://twitter.com/matt_sven/status/883004835225903104

cc @matt-curtis

For example, how would I transfer [fill setColor:[MSImmutableColor colorWithSVGString: colors[r]]]; to the proper JS that SKPM can transpile? I haven't worked with Objective-C for years if that makes a difference.

I spent a few minutes trying to find out the right path argument for skpm link. I think it would be nice if it autodetected that it's being run in a plugin development folder, and do the right thing automatically (i.e: make skpm link do a skpm link . under the hood if you run it on a project folder).

Apologies in advance if I'm not making myself very clear, coffee hasn't kicked in yet : )

What's the best way to go about Resources folder? Run the build command and create the folder manually?

I’m experimenting with a plugin which uses JSZip to manipulate a .sketch file. For this I’m using a node script which I am now trying to run as a plugin. In order to hand JSZip a sketch file, I’m using fs, require(''fs') makes skpm build throw errors about not being able to resolve fs. Is there a way to access the file system from within a Sketch plugin?

I have a section of my plugin where I need to use Cocoa. This is obviously invalid JS, so I'm receiving an error on build.

I have some more details on this post over at the Sketch Plugins forum, but I'm curious how you use Cocoa within your plugins?

Would appreciate guidance on either how to get Cocoa to compile, or how to properly convert to dot notation.

Hi there,

I'm trying to use the symlink but it seems to be broken in Sketch 45.1.
Here's the error when I try to double click the alias to see if there is a problem:

when I run skpm publish I get this error.

{ Error: Cannot find module '/Users/aaronreisman/n/lib/node_modules/skpm/node_modules/keytar'
    at Function.Module._resolveFilename (module.js:527:15)
    at Function.Module._load (module.js:476:23)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)
    at Function._require [as require] (/Users/aaronreisman/n/lib/node_modules/skpm/node_modules/lazy-require/source/index.js:99:14)
    at Function.installSync (/Users/aaronreisman/n/lib/node_modules/skpm/node_modules/lazy-require/source/index.js:251:23)
    at Function.sync (/Users/aaronreisman/n/lib/node_modules/skpm/node_modules/lazy-require/source/index.js:56:24)
    at lazyRequire (/Users/aaronreisman/n/lib/node_modules/skpm/node_modules/lazy-require/source/index.js:30:66)
    at lazyRequireKeytar (/Users/aaronreisman/n/lib/node_modules/skpm/lib/utils/auth.js:7:18)
    at Object.getToken (/Users/aaronreisman/n/lib/node_modules/skpm/lib/utils/auth.js:24:20) code: 'MODULE_NOT_FOUND' }

I think there's something up with the rollup config - this doesn't fail with a fresh rollup project. made a vanilla skpm project - it's not related to react-sketchapp.

skpm init & then…

/* my-command.js */
import foo from './foo';

export default function (context) {
  context.document.showMessage(foo())
}

/* foo.js */
const foo = () => 'bar';

export default foo;

λ yarn build
yarn build v0.21.3
$ skpm build
[1/2] 🖨  Copied src/manifest.json in 75ms
error Error while building ./my-command.js
{ Error: 'default' is not exported by src/foo.js
    at error (/usr/local/lib/node_modules/skpm/node_modules/rollup/dist/rollup.js:170:12)
    at Module.error$1 [as error] (/usr/local/lib/node_modules/skpm/node_modules/rollup/dist/rollup.js:8007:2)
    at Module.trace (/usr/local/lib/node_modules/skpm/node_modules/rollup/dist/rollup.js:8106:9)
    at ModuleScope.findDeclaration (/usr/local/lib/node_modules/skpm/node_modules/rollup/dist/rollup.js:7691:22)
    at Scope.findDeclaration (/usr/local/lib/node_modules/skpm/node_modules/rollup/dist/rollup.js:5497:39)
    at Node.bind (/usr/local/lib/node_modules/skpm/node_modules/rollup/dist/rollup.js:6022:28)
    at /usr/local/lib/node_modules/skpm/node_modules/rollup/dist/rollup.js:5291:50
    at Node.eachChild (/usr/local/lib/node_modules/skpm/node_modules/rollup/dist/rollup.js:5305:19)
    at Node.bind (/usr/local/lib/node_modules/skpm/node_modules/rollup/dist/rollup.js:5291:7)
    at Node.bind (/usr/local/lib/node_modules/skpm/node_modules/rollup/dist/rollup.js:6040:23)
  code: 'MISSING_EXPORT',
  url: 'https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module',
  pos: 7,
  loc:
   { file: '/Users/jon_gold/code/jongold/skpm-imports/src/my-command.js',
     line: 1,
     column: 7 },
  frame: '1: import foo from \'./foo\';\n          ^\n2: \n3: module.exports.__skpm_export__ = function (context) {' }
error Command failed with exit code 1.

Attaching the project folder, and a simple rollup example that shows that it should work :)
skpm-imports.zip
rollup-common-js-defaults.zip

I installed skpm on my personal laptop without any issues, but cant install it on my work laptop. Attached the log file. Any thoughts on how to get around this?
npm-debug.log.zip

Hi,

I keep on getting this error when writing "skpm build" :

[1/2] 🖨  Copied src/manifest.json in 7ms
(node:19570) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
error Error while building ./my-command.js
./src/my-command.js
Module build failed: Error: Unsupported preset format: function buildAirbnbPreset(context, options) {
  var transpileTargets = (options && options.targets) ||
    buildTargets(options || {});

  var debug = (options && typeof options.debug === 'boolean') ? !!options.debug : false;

  return {
    presets: [
      require('babel-preset-env').default(null, {
        debug: debug,
        exclude: [
          'transform-async-to-generator',
          'transform-es2015-template-literals',
          'transform-regenerator'
        ],
        modules: false,
        targets: transpileTargets
      }),
      require('babel-preset-react')
    ],
    plugins: [
      options && options.modules === false ? null : modules,
      [require('babel-plugin-transform-es2015-template-literals'), {
        spec: true
      }],
      require('babel-plugin-transform-es3-member-expression-literals'),
      require('babel-plugin-transform-es3-property-literals'),
      require('babel-plugin-transform-jscript'),
      [require('babel-plugin-transform-object-rest-spread'), {
        useBuiltIns: true
      }]
    ].filter(Boolean)
  };
}.

Could you please help me ?

Would be nice to do something like https://github.com/AnimaApp/CocoaPowder when writing debugger. Should be possible with a small babel plugin: https://github.com/babel/minify/blob/master/packages/babel-plugin-transform-remove-debugger/src/index.js

Unfortunately, it doesn't work right now because of http://sketchplugins.com/d/265-disablecocoascriptpreprocessor-and-error-stack

when running the following code and trying to run skpm build I get the following error:

code:

import emmet from 'emmet';
import 'emmet/bundles/snippets';
import 'emmet/bundles/caniuse';

export default emmet;

error:
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

any help would be appreciated here. Thanks!

This is the first solid development system I've seen for Sketch. I love this, really. Are there any plans to add some sort of sponsorship? I want to see this continue to build momentum.