fix(deps): Update html-sketchapp to v3.x (#38)

The `install` command now downloads the Sketch plugin from html-sketchapp's GitHub releases, since it's no longer published to npm.

Author: renovate[bot]

.gitignore

@@ -1,5 +1,6 @@
 node_modules/
 dist/
+.tmp/
 
 package-lock.json
 yarn.lock

bin/cli.js

@@ -7,13 +7,11 @@ const getPort = require('get-port');
 const serve = require('serve');
 const puppeteer = require('puppeteer');
 const { rollup } = require('rollup');
-const waitOn = promisify(require('wait-on'));
-const mkdirp = promisify(require('mkdirp'));
-const fs = require('fs');
+const waitOnAsync = promisify(require('wait-on'));
+const mkdirpAsync = promisify(require('mkdirp'));
+const writeFileAsync = promisify(require('fs').writeFile);
 const path = require('path');
 
-const writeFileAsync = promisify(fs.writeFile);
-
 const configPath = findUp.sync(['html-sketchapp.config.js']);
 const config = configPath ? require(configPath) : {};
 
@@ -70,7 +68,7 @@ require('yargs')
         const symbolsUrl = argv.serve ? urlJoin(`http://localhost:${String(port)}`, argv.url || '/') : url;
         const debug = argv.debug;
 
-        await waitOn({
+        await waitOnAsync({
           timeout: 5000,
           headers: { accept: 'text/html' },
           // Force 'wait-on' to make a GET request rather than a HEAD request
@@ -132,7 +130,7 @@ require('yargs')
           const asketchPageJSON = await page.evaluate('generateAlmostSketch.getPageJSON()');
 
           const outputPath = path.resolve(process.cwd(), argv.outDir);
-          await mkdirp(outputPath);
+          await mkdirpAsync(outputPath);
 
           const outputPagePath = path.join(outputPath, 'page.asketch.json');
           const outputDocumentPath = path.join(outputPath, 'document.asketch.json');
@@ -156,10 +154,26 @@ require('yargs')
       process.exit(1);
     }
   })
-  .command('install', 'Install the html-sketchapp Sketch plugin', {}, () => {
-    const htmlSketchappPath = path.dirname(require.resolve('@brainly/html-sketchapp/package.json'));
-    const pluginPath = path.resolve(htmlSketchappPath, 'asketch2sketch.sketchplugin');
-
+  .command('install', 'Install the html-sketchapp Sketch plugin', {}, async () => {
+    const { version } = require('@brainly/html-sketchapp/package.json');
+    console.log(`Detected html-sketchapp v${version}`);
+
+    const tmpDirPath = path.resolve(__dirname, '../', '.tmp');
+    const rimrafAsync = promisify(require('rimraf'));
+    await rimrafAsync(tmpDirPath);
+    await mkdirpAsync(tmpDirPath);
+
+    const releaseUrl = `http://github.com/brainly/html-sketchapp/releases/download/v${version}/asketch2sketch.sketchplugin.zip`;
+    console.log(`Downloading from ${releaseUrl}`);
+    const axios = require('axios');
+    const { data } = await axios(releaseUrl, { responseType: 'arraybuffer' });
+
+    console.log(`Extracting to ${tmpDirPath}`);
+    const decompress = require('decompress');
+    await decompress(data, tmpDirPath);
+
+    const pluginPath = path.resolve(tmpDirPath, 'asketch2sketch.sketchplugin');
+    console.log(`Installing from ${pluginPath}`);
     const opn = require('opn');
     opn(pluginPath, { wait: false });
   })

package.json

@@ -33,13 +33,16 @@
   },
   "homepage": "https://github.com/seek-oss/html-sketchapp-cli#readme",
   "dependencies": {
-    "@brainly/html-sketchapp": "^2.0.0",
+    "@brainly/html-sketchapp": "^3.0.0",
+    "axios": "^0.18.0",
+    "decompress": "^4.2.0",
     "es6-promisify": "^6.0.0",
     "find-up": "^2.1.0",
     "get-port": "^3.2.0",
     "mkdirp": "^0.5.1",
     "opn": "^5.1.0",
     "puppeteer": "^1.0.0",
+    "rimraf": "^2.6.2",
     "rollup": "^0.57.1",
     "rollup-plugin-commonjs": "^9.1.0",
     "rollup-plugin-node-resolve": "^3.3.0",
@@ -58,7 +61,6 @@
     "eslint-config-seek": "^3.0.0",
     "husky": "^0.14.3",
     "jest": "^22.0.1",
-    "rimraf": "^2.6.2",
     "semantic-release": "^15.1.3",
     "traverse": "^0.6.6",
     "travis-deploy-once": "^4.3.4"

script/generateAlmostSketch.js

@@ -1,8 +1,12 @@
-import Page from '@brainly/html-sketchapp/html2asketch/page.js';
-import Document from '@brainly/html-sketchapp/html2asketch/document.js';
-import Text from '@brainly/html-sketchapp/html2asketch/text.js';
-import nodeToSketchLayers from '@brainly/html-sketchapp/html2asketch/nodeToSketchLayers.js';
-import SymbolMaster from '@brainly/html-sketchapp/html2asketch/symbolMaster.js';
+import htmlSketchapp from '@brainly/html-sketchapp'
+
+const {
+  Page,
+  Document,
+  Text,
+  nodeToSketchLayers,
+  SymbolMaster
+} = htmlSketchapp;
 
 const getAllLayers = (item, symbolMastersByName = {}) => {
   const itemAndChildren = [item, ...item.querySelectorAll('*')];

test/config-file-path/__snapshots__/file.test.js.snap

@@ -105,8 +105,8 @@ Object {
     "frame": Object {
       "_class": "rect",
       "constrainProportions": false,
-      "height": 784,
-      "width": 352,
+      "height": 352,
+      "width": 784,
       "x": 0,
       "y": 0,
     },

test/config-file/__snapshots__/file.test.js.snap

@@ -105,8 +105,8 @@ Object {
     "frame": Object {
       "_class": "rect",
       "constrainProportions": false,
-      "height": 784,
-      "width": 352,
+      "height": 352,
+      "width": 784,
       "x": 0,
       "y": 0,
     },

test/file/__snapshots__/file.test.js.snap

@@ -105,8 +105,8 @@ Object {
     "frame": Object {
       "_class": "rect",
       "constrainProportions": false,
-      "height": 784,
-      "width": 352,
+      "height": 352,
+      "width": 784,
       "x": 0,
       "y": 0,
     },

test/nested-symbols/__snapshots__/nested-symbols.test.js.snap

@@ -40,8 +40,8 @@ Object {
     "frame": Object {
       "_class": "rect",
       "constrainProportions": false,
-      "height": 784,
-      "width": 72,
+      "height": 72,
+      "width": 784,
       "x": 0,
       "y": 0,
     },

test/serve-with-url/__snapshots__/serve-with-url.test.js.snap

@@ -105,8 +105,8 @@ Object {
     "frame": Object {
       "_class": "rect",
       "constrainProportions": false,
-      "height": 784,
-      "width": 352,
+      "height": 352,
+      "width": 784,
       "x": 0,
       "y": 0,
     },

test/serve/__snapshots__/serve.test.js.snap

@@ -105,8 +105,8 @@ Object {
     "frame": Object {
       "_class": "rect",
       "constrainProportions": false,
-      "height": 784,
-      "width": 352,
+      "height": 352,
+      "width": 784,
       "x": 0,
       "y": 0,
     },