fix(wait): Add wait timeout, make GET request accepting 'text/html' (#15)

Author: markdalgleish

.eslintrc

@@ -1,3 +1,7 @@
 {
-  "extends": "sku"
+  "extends": "seek",
+  "rules": {
+    "no-console": "off",
+    "no-process-exit": "off"
+  }
 }

bin/cli.js

@@ -53,63 +53,74 @@ require('yargs')
       describe: 'Set of command line arguments to be provided to the Chromium instance via Puppeteer, e.g. --puppeteer-args="--no-sandbox --disable-setuid-sandbox"'
     }
   }, async argv => {
-    const port = argv.serve ? await getPort() : null;
-    const server = argv.serve ? makeServer(argv.serve, port) : null;
-
     try {
-      const url = argv.file ? `file://${path.join(process.cwd(), argv.file)}` : argv.url;
-      const symbolsUrl = argv.serve ? urlJoin(`http://localhost:${String(port)}`, argv.url || '/') : url;
-      await waitOn({ resources: [symbolsUrl] });
-
-      const browser = await puppeteer.launch({ args: argv.puppeteerArgs ? argv.puppeteerArgs.split(' ') : [] });
+      const port = argv.serve ? await getPort() : null;
+      const server = argv.serve ? makeServer(argv.serve, port) : null;
 
       try {
-        const page = await browser.newPage();
+        const url = argv.file ? `file://${path.join(process.cwd(), argv.file)}` : argv.url;
+        const symbolsUrl = argv.serve ? urlJoin(`http://localhost:${String(port)}`, argv.url || '/') : url;
+
+        await waitOn({
+          timeout: 5000,
+          headers: { accept: 'text/html' },
+          // Force 'wait-on' to make a GET request rather than a HEAD request
+          resources: [symbolsUrl.replace(/^(https?)/, '$1-get')],
+        });
+
+        const browser = await puppeteer.launch({ args: argv.puppeteerArgs ? argv.puppeteerArgs.split(' ') : [] });
+
+        try {
+          const page = await browser.newPage();
 
-        await page.goto(symbolsUrl, { waitUntil: 'networkidle0' });
+          await page.goto(symbolsUrl, { waitUntil: 'networkidle0' });
 
-        const bundlePath = path.resolve(__dirname, '../script/dist/generateAlmostSketch.bundle.js');
-        const bundle = await readFileAsync(bundlePath, 'utf8');
-        await page.addScriptTag({ content: bundle });
+          const bundlePath = path.resolve(__dirname, '../script/dist/generateAlmostSketch.bundle.js');
+          const bundle = await readFileAsync(bundlePath, 'utf8');
+          await page.addScriptTag({ content: bundle });
 
-        await page.evaluate('generateAlmostSketch.setupSymbols({ name: "html-sketchapp symbols" })');
+          await page.evaluate('generateAlmostSketch.setupSymbols({ name: "html-sketchapp symbols" })');
 
-        await page.evaluate('generateAlmostSketch.snapshotColorStyles()');
+          await page.evaluate('generateAlmostSketch.snapshotColorStyles()');
 
-        const viewports = argv.viewports || { Desktop: '1024x768' };
-        const hasViewports = Object.keys(viewports).length > 1;
-        for (const viewportName in viewports) {
-          if (viewports.hasOwnProperty(viewportName)) {
-            const viewport = viewports[viewportName];
-            const [ width, height ] = viewport.split('x').map(x => parseInt(x, 10));
-            await page.setViewport({ width, height });
-            await page.evaluate(`generateAlmostSketch.snapshotTextStyles({ suffix: "${hasViewports ? `/${viewportName}` : ''}" })`);
-            await page.evaluate(`generateAlmostSketch.snapshotSymbols({ suffix: "${hasViewports ? `/${viewportName}` : ''}" })`);
+          const viewports = argv.viewports || { Desktop: '1024x768' };
+          const hasViewports = Object.keys(viewports).length > 1;
+          for (const viewportName in viewports) {
+            if (viewports.hasOwnProperty(viewportName)) {
+              const viewport = viewports[viewportName];
+              const [ width, height ] = viewport.split('x').map(x => parseInt(x, 10));
+              await page.setViewport({ width, height });
+              await page.evaluate(`generateAlmostSketch.snapshotTextStyles({ suffix: "${hasViewports ? `/${viewportName}` : ''}" })`);
+              await page.evaluate(`generateAlmostSketch.snapshotSymbols({ suffix: "${hasViewports ? `/${viewportName}` : ''}" })`);
+            }
           }
-        }
 
-        const asketchDocumentJSON = await page.evaluate('generateAlmostSketch.getDocumentJSON()');
-        const asketchPageJSON = await page.evaluate('generateAlmostSketch.getPageJSON()');
+          const asketchDocumentJSON = await page.evaluate('generateAlmostSketch.getDocumentJSON()');
+          const asketchPageJSON = await page.evaluate('generateAlmostSketch.getPageJSON()');
 
-        const outputPath = path.resolve(process.cwd(), argv.outDir);
-        await mkdirp(outputPath);
+          const outputPath = path.resolve(process.cwd(), argv.outDir);
+          await mkdirp(outputPath);
 
-        const outputPagePath = path.join(outputPath, 'page.asketch.json');
-        const outputDocumentPath = path.join(outputPath, 'document.asketch.json');
+          const outputPagePath = path.join(outputPath, 'page.asketch.json');
+          const outputDocumentPath = path.join(outputPath, 'document.asketch.json');
 
-        await Promise.all([
-          writeFileAsync(outputPagePath, asketchPageJSON),
-          writeFileAsync(outputDocumentPath, asketchDocumentJSON)
-        ]);
+          await Promise.all([
+            writeFileAsync(outputPagePath, asketchPageJSON),
+            writeFileAsync(outputDocumentPath, asketchDocumentJSON)
+          ]);
+        } finally {
+          if (browser && typeof browser.close === 'function') {
+            browser.close();
+          }
+        }
       } finally {
-        if (browser && typeof browser.close === 'function') {
-          browser.close();
+        if (server && typeof server.stop === 'function') {
+          server.stop();
         }
       }
-    } finally {
-      if (server && typeof server.stop === 'function') {
-        server.stop();
-      }
+    } catch (err) {
+      console.error(err);
+      process.exit(1);
     }
   })
   .command('install', 'Install the html-sketchapp Sketch plugin', {}, () => {

package.json

@@ -43,7 +43,7 @@
     "puppeteer": "^0.13.0",
     "serve": "^6.4.1",
     "url-join": "^2.0.2",
-    "wait-on": "^2.0.2",
+    "wait-on": "^2.1.0",
     "yargs": "^10.0.3"
   },
   "devDependencies": {
@@ -53,7 +53,7 @@
     "commitlint-config-seek": "^1.0.0",
     "cz-conventional-changelog": "^2.1.0",
     "eslint": "^4.13.1",
-    "eslint-config-sku": "^1.2.1",
+    "eslint-config-seek": "^3.0.0",
     "husky": "^0.14.3",
     "jest": "^22.0.1",
     "rimraf": "^2.6.2",