skpm / skpm Goto Github PK
View Code? Open in Web Editor NEW💎📦 A utility to build and publish Sketch plugins
License: MIT License
💎📦 A utility to build and publish Sketch plugins
License: MIT License
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'
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 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
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' }
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 ?
running skpm publish -n
still submits a PR to the registry
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.
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
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.
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
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.
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.
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
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!
Need 'babel-polyfill' to provide "regeneratorRuntime" function, when using "co" or "async-await" function
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.
'@skpm/file-loader' is not in the npm registry'. when i am type npm i -g skpm
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
initial build ~3500ms
incremental builds w/ watch ~1500ms
incremental builds w/ watch, + disabling treeshake
~1000ms
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?
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.
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 : )
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
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.
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 : )
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.
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.
What's the best way to go about Resources folder? Run the build command and create the folder manually?
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
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.
something like sketch-builder release [major|minor|patch]
:
npm version ...
sketch-builder build
zip plugin
git push
https://github.com/atom/apm/blob/master/src
https://gist.github.com/caspyin/2288960
https://github.com/aktau/github-release
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:
Error: ENOENT: no such file or directory, mkdir '/Users/aminnassiri/Projects/pluginTest/plugin.sketchplugin/Contents/Sketch'
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 🙌')
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' }
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?
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
:
skpm/lib/utils/webpackConfig.js
Line 166 in 791429d
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.
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;
Would be curious to hear your opinions on implementing a watch
command. My initial thoughts for the workflow would be:
skpm watch
commandskpm
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
?skpm build
and skpm link
commands.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.
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.
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.
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!
defaults write ~/Library/Preferences/com.bohemiancoding.sketch3.plist AlwaysReloadScript -bool YES
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.