@madebyseed/seed-cli-tools 1.0.0

package/src/tasks/includes/utilities.js

@@ -0,0 +1,211 @@
+const chalk = require("chalk");
+const log = require("fancy-log");
+const _ = require('lodash');
+const Promise = require('bluebird');
+const { shopifyCLI } = require("../../utils");
+
+
+let errors = [];
+
+/**
+ * Utility and reusable functions used by our Gulp Tasks
+ *
+ * @summary a set of utility functions used within the gulp tasks of seed-cli
+ * @namespace seed-cli.utilities
+ * @memberof seed-cli
+ */
+const utilities = {
+
+  /**
+   * Launches shopify theme serve command to serve files on ./dist folder
+   * 
+   * @memberof seed-cli.utilities
+   * @returns {object} - ChildProcess
+   */
+  serveDist: () => {
+    return shopifyCLI.serve();
+  },
+
+  /**
+   * Launches shopify theme push command to deploy files on ./dist folder
+   * to a store's theme
+   * 
+   * @memberof seed-cli.utilities
+   * @returns {object} - ChildProcess
+   */
+    deployDist: () => {
+      return shopifyCLI.push();
+    },
+
+  /**
+   * Handles the output for any errors that might have been captured
+   * during the build and zip Gulp tasks.
+   *
+   * @memberof seed-cli.utilities
+   */
+  outputErrors: () => {
+    if (!errors.length) {
+      return;
+    }
+
+    log(chalk.red(`There were errors during the build:\n`));
+
+    errors.forEach((err) => {
+      log(chalk.red(err));
+    });
+
+    errors = [];
+  },
+
+  /**
+   * Generic error handler for streams called in `watch` tasks (used by gulp-plumber).
+   * Any error that is thrown inside of a task is added to the errors array.
+   *
+   * @memberof seed-cli.utilities
+   * @param {Error} err
+   */
+  errorHandler: (err) => {
+    log(chalk.red(err));
+    errors.push(err);
+
+    this.emit('end');
+  },
+
+  /**
+   * Executes an array of promises in series
+   *
+   * @param promiseArrayFactory {Function} - an array of promise factories
+   * @returns {Promise} - promise.all() style array of results from each promise
+   */
+  promiseSeries: (promiseArrayFactory) => {
+    const results = [];
+
+    return Promise.each(promiseArrayFactory, (factory) => {
+      const result = factory();
+      results.push(result);
+      return result;
+    }).thenReturn(results).all();
+  },
+
+  /**
+   * Function passed to cheerio.run - adds aria tags & other accessibility
+   * based information to each svg element's markup...
+   *
+   * @memberof seed-cli.utilities
+   * @param {Function} $ - jQuery reference
+   * @param {fs} file - reference to current icon file?
+   */
+  processSvg: ($, file) => {
+    var $svg = $('svg'); // eslint-disable-line no-var
+    var $newSvg = $('<svg aria-hidden="true" focusable="false" role="presentation" class="icon" />'); // eslint-disable-line no-var
+    var fileName = file.relative.replace('.svg', ''); // eslint-disable-line no-var
+    var viewBoxAttr = $svg.attr('viewbox'); // eslint-disable-line no-var
+
+    // Add necessary attributes
+    if (viewBoxAttr) {
+      var width = parseInt(viewBoxAttr.split(' ')[2], 10); // eslint-disable-line no-var
+      var height = parseInt(viewBoxAttr.split(' ')[3], 10); // eslint-disable-line no-var
+      var widthToHeightRatio = width / height; // eslint-disable-line no-var
+      if (widthToHeightRatio >= 1.5) {
+        $newSvg.addClass('icon--wide');
+      }
+      $newSvg.attr('viewBox', viewBoxAttr);
+    }
+
+    // Add required classes to full color icons
+    if (file.relative.indexOf('-full-color') >= 0) {
+      $newSvg.addClass('icon--full-color');
+    }
+
+    $newSvg
+      .addClass(fileName)
+      .append($svg.contents());
+
+    $newSvg.append($svg.contents());
+    $svg.after($newSvg);
+    $svg.remove();
+  },
+
+  /**
+   * Factory for creating an event cache - used with a short debounce to batch any
+   * file changes that occur in rapid succession during Watch tasks.
+   *
+   * @memberof seed-cli.utilities
+   * @param {Object} options
+   * @returns {eventCache} see type definition for more robust documentation
+   */
+  createEventCache: (options) => {
+    _.defaults(options = options || {}, { // eslint-disable-line no-param-reassign
+      changeEvents: ['add', 'change'],
+      unlinkEvents: ['unlink'],
+    });
+
+    /**
+     * A cache object used for caching `[chokidar]{@link https://github.com/paulmillr/chokidar}`
+     * events - used with a short `debounce` to batch any file changes that occur in rapid
+     * succession during Watch tasks.
+     *
+     * @typedef {Object} eventCache
+     * @prop {Array} change - an array for caching `add` and `change` events
+     * @prop {Array} unlink - an array for caching `unlink` events
+     * @prop {Function} addEvent - a function to push events to the appropriate `cache` array
+     */
+    return {
+      change: [],
+      unlink: [],
+
+      /**
+       * Pushes events to upload & remove caches for later batch deployment
+       *
+       * @function addEvent
+       * @memberof eventCache
+       * @param {String} event - chokidar event type - only cares about `(add|change|unlink)`
+       * @param {String} path - relative path to file passed via event
+       */
+      addEvent: function(event, path) { 
+        _.each(options.changeEvents, (eventType) => {
+          if (event === eventType) {
+            this.change.push(path);
+          }
+        });
+
+        _.each(options.unlinkEvents, (eventType) => {
+          if (event === eventType) {
+            this.unlink.push(path);
+          }
+        });
+      },
+    };
+  },
+
+  /**
+   * Debounced (320ms) delegator function passing an {@link eventCache} object
+   * through to a pair of custom functions for processing batch add/change or unlink events.
+   * Clears the appropriate cache array after a change/delete function has been
+   * called.
+   *
+   * Example:
+   * ```javascript
+   *   // TODO:
+   * ```
+   *
+   * @memberof seed-cli.utilities
+   * @method
+   * @param {eventCache} cache - a specific cache object for tracking file events
+   * @param {Function} changeFn - a custom function to process the set of files that have changed
+   * @param {Function} delFn - a custom function to remove the set of files that have changed from the `dist` directory
+   */
+  processCache: _.debounce((cache, changeFn, delFn) => {
+    if (cache.change.length) {
+      changeFn(cache.change);
+      cache.change = [];
+    }
+
+    if (cache.unlink.length) {
+      delFn(cache.unlink);
+      cache.unlink = [];
+    }
+  }, 320),
+};
+
+module.exports = utilities;

package/src/tasks/watchers.js

@@ -0,0 +1,48 @@
+// const { yellow } = require('chalk');
+const gulp = require('gulp');
+// const runSequence = require('gulp4-run-sequence');
+// const _ = require('lodash');
+// const debug = require('debug')('seed-tools:watchers');
+// const chokidar = require('chokidar');
+// const fs = require('fs');
+// const themekit = require('@shopify/themekit');
+// const Promise = require('bluebird');
+
+
+// const config = require('./includes/config.js');
+const utils = require('./includes/utilities.js');
+// const messages = require('./includes/messages.js');
+
+// const cache = utils.createEventCache();
+// const environment = config.environment.split(/\s*,\s*|\s+/)[0];
+
+/**
+ * Aggregate task watching for file changes in `src` and
+ * building/cleaning/updating `dist` accordingly.  *Made up of individual tasks
+ * referenced in other files
+ *
+ * @function watch:src
+ * @memberof seed-cli.tasks.watch
+ * @static
+ */
+gulp.task('watch:src', () => {
+  return gulp.parallel(
+    'watch:css',
+    'watch:js',
+    'watch:assets',
+    'watch:svg'
+    )()
+});
+
+/**
+ * Initiates shopify's cli command 'shopify theme serve' on the dist folder, 
+ * watching files and uploading them to development store
+ * 
+ * @function watch:dist
+ * @memberof seed-cli.tasks.watch
+ * @static
+ */
+ gulp.task('watch:dist', () => {
+  console.log("Running Shopify theme serve...")
+  return utils.serveDist();
+})

package/src/utils.js

@@ -0,0 +1,90 @@
+import spawn from "cross-spawn"; 
+import { join } from "path";
+import config from "./config"
+
+/**
+ * Wrappers for Shopify CLI commands
+ *
+ * @summary a set of utility functions used to wrap shopify's CLI
+ * @namespace seed-cli.shopifyCLI
+ * @memberof seed-cli
+ */
+export const shopifyCLI = {
+
+  /**
+   * shopify login
+   * 
+   * @memberof seed-cli.shopifyCLI
+   * @param {string} store - store's myshopify domain name
+   * @param {boolean} async - login asynchronously
+   * 
+   * @returns {object} - spawnSync object or, node's <ChildProcess> object if async
+   */
+  login: (store, async = false) => {
+    const args = ['login', '--store', store];
+    const options = {
+      env: process.env,
+      stdio: "inherit",
+      shell: true,
+    }
+  
+    if (async) 
+      return spawn('shopify', args, options);
+    else 
+      return spawn.sync('shopify', args, options);
+  },
+
+  /**
+   * shopify theme serve
+   * 
+   * @memberof seed-cli.shopifyCLI
+   * @returns {object} - node's ChildProcess
+   */
+  serve: () => {
+    return spawn('shopify theme', ['serve'], {
+      cwd: config.themeRoot + '/dist',
+      env: process.env,
+      stdio: "inherit",
+      shell: true,
+    })
+  },
+
+  /**
+   * shopify theme push
+   * 
+   * @memberof seed-cli.shopifyCLI
+   * @returns {object} - node's ChildProcess
+   */
+  push: () => {
+    return spawn('shopify theme', ['push'], {
+      cwd: config.themeRoot + '/dist',
+      env: process.env,
+      stdio: "inherit",
+      shell: true,
+    })
+  }
+}
+
+/**
+ * Get seed.config.js from project root dir
+ * 
+ * @param {string} themeRoot - the path to theme root dir
+ */
+export function getSeedConfig(themeRoot) {
+  return require(join(themeRoot, 'seed.config.js'));
+}
+
+/**
+ * Get store name from seed.config.js 
+ * 
+ * @param {string} themeRoot - the path to theme root dir
+ */
+export function getStoreName(themeRoot) {
+  return getSeedConfig(themeRoot).store;
+}
+
+
+
+
+
+