@madebyseed/seed-cli-tools 1.0.0

package/lib/tasks/includes/messages.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var chalk = require("chalk");
+
+var log = require("fancy-log");
+/**
+ * Separates filename and directory from a path string. Returns an object containing both.
+ *
+ * @param path {String} - a string representing the path to a file
+ * @returns {Object} - an object with separated `file` (the filename) and `dir` (path minus filename) properties
+ * @private
+ */
+
+
+function separatePath(path) {
+  var tmp = path.split('/');
+  return {
+    file: tmp.pop(),
+    dir: tmp.join('/')
+  };
+}
+
+var messages = {
+  logFileEvent: function logFileEvent(event, path) {
+    var pathObject = separatePath(path);
+    log('change in', chalk.magenta(pathObject.dir), chalk.white('-'), chalk.cyan(event), chalk.yellow(pathObject.file));
+  },
+  logTransferDone: function logTransferDone() {
+    log('Transfer Complete:', chalk.green('File changes successfully synced to store'));
+  },
+  logTransferFailed: function logTransferFailed(errMsg) {
+    log('Transfer Failed:', chalk.yellow("".concat(typeof errMsg === 'string' ? errMsg : 'File(s) failed to upload to store. See log notes in deploy.log')));
+  },
+  logProcessFiles: function logProcessFiles(processName) {
+    log('running task', chalk.white('-'), chalk.cyan(processName));
+  },
+  logChildProcess: function logChildProcess(cmd) {
+    log('running task', chalk.bold('[child process]'), chalk.white('-'), chalk.cyan('theme', cmd));
+  },
+  logDeploys: function logDeploys(cmd, files) {
+    var timestamp = "Deploy complete @ ".concat(new Date(), ". ");
+    var action = cmd === 'upload' ? 'added/changed ' : 'removed ';
+    var amount = "".concat(files.length, " file(s): ");
+    var fileList = "".concat(files.join(', '), ".\n");
+    return timestamp + action + amount + fileList;
+  },
+  logDeployErrors: function logDeployErrors(cmd, files, err) {
+    var timestamp = "Deploy error @ ".concat(new Date(), ". ");
+    var action = cmd === 'upload' ? 'added/changed ' : 'removed ';
+    var amount = "".concat(files.length, " file(s): ");
+    var fileList = "".concat(files.join(', '), ".\n");
+    var errMsg = "".concat(err, " \n");
+    return timestamp + action + amount + fileList + errMsg;
+  },
+  logBundleJs: function logBundleJs() {
+    log('Updating JS Bundle...');
+  },
+  configChange: function configChange() {
+    return 'Changes to ThemeKit Config Detected: You may need to quit <slate watch>' + ' and run a full <slate deploy> as a result.';
+  },
+  translationsFailed: function translationsFailed() {
+    return 'Translation errors detected.';
+  },
+  invalidThemeId: function invalidThemeId(themeId, env) {
+    log('Invalid theme id for', chalk.cyan("".concat(env, ": ").concat(themeId)), chalk.yellow('`theme_id` must be an integer or "live".'));
+  },
+  configError: function configError() {
+    log('File missing:', chalk.yellow('`config.yml` does not exist. You need to add a config file before you can make changes to your Shopify store.'));
+  },
+  deployTo: function deployTo(environment) {
+    log('Initiating deploy to', chalk.bold(environment));
+  },
+  allDeploysComplete: function allDeploysComplete() {
+    log('Multiple environments:', chalk.green('Deploy completed for all environments in series'));
+  }
+};
+module.exports = messages;

package/lib/tasks/includes/utilities.js

@@ -0,0 +1,222 @@
+"use strict";
+
+var _this = void 0;
+
+var chalk = require("chalk");
+
+var log = require("fancy-log");
+
+var _ = require('lodash');
+
+var Promise = require('bluebird');
+
+var _require = require("../../utils"),
+    shopifyCLI = _require.shopifyCLI;
+
+var 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
+ */
+
+var utilities = {
+  /**
+   * Launches shopify theme serve command to serve files on ./dist folder
+   * 
+   * @memberof seed-cli.utilities
+   * @returns {object} - ChildProcess
+   */
+  serveDist: function 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: function 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: function outputErrors() {
+    if (!errors.length) {
+      return;
+    }
+
+    log(chalk.red("There were errors during the build:\n"));
+    errors.forEach(function (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: function 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: function promiseSeries(promiseArrayFactory) {
+    var results = [];
+    return Promise.each(promiseArrayFactory, function (factory) {
+      var 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: function 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: function 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 addEvent(event, path) {
+        var _this2 = this;
+
+        _.each(options.changeEvents, function (eventType) {
+          if (event === eventType) {
+            _this2.change.push(path);
+          }
+        });
+
+        _.each(options.unlinkEvents, function (eventType) {
+          if (event === eventType) {
+            _this2.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(function (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/lib/tasks/watchers.js

@@ -0,0 +1,44 @@
+"use strict";
+
+// const { yellow } = require('chalk');
+var 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');
+
+
+var 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', function () {
+  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', function () {
+  console.log("Running Shopify theme serve...");
+  return utils.serveDist();
+});

package/lib/utils.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSeedConfig = getSeedConfig;
+exports.getStoreName = getStoreName;
+exports.shopifyCLI = void 0;
+
+var _crossSpawn = _interopRequireDefault(require("cross-spawn"));
+
+var _path = require("path");
+
+var _config = _interopRequireDefault(require("./config"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/**
+ * Wrappers for Shopify CLI commands
+ *
+ * @summary a set of utility functions used to wrap shopify's CLI
+ * @namespace seed-cli.shopifyCLI
+ * @memberof seed-cli
+ */
+var 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: function login(store) {
+    var async = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var args = ['login', '--store', store];
+    var options = {
+      env: process.env,
+      stdio: "inherit",
+      shell: true
+    };
+    if (async) return (0, _crossSpawn["default"])('shopify', args, options);else return _crossSpawn["default"].sync('shopify', args, options);
+  },
+
+  /**
+   * shopify theme serve
+   * 
+   * @memberof seed-cli.shopifyCLI
+   * @returns {object} - node's ChildProcess
+   */
+  serve: function serve() {
+    return (0, _crossSpawn["default"])('shopify theme', ['serve'], {
+      cwd: _config["default"].themeRoot + '/dist',
+      env: process.env,
+      stdio: "inherit",
+      shell: true
+    });
+  },
+
+  /**
+   * shopify theme push
+   * 
+   * @memberof seed-cli.shopifyCLI
+   * @returns {object} - node's ChildProcess
+   */
+  push: function push() {
+    return (0, _crossSpawn["default"])('shopify theme', ['push'], {
+      cwd: _config["default"].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
+ */
+
+exports.shopifyCLI = shopifyCLI;
+
+function getSeedConfig(themeRoot) {
+  return require((0, _path.join)(themeRoot, 'seed.config.js'));
+}
+/**
+ * Get store name from seed.config.js 
+ * 
+ * @param {string} themeRoot - the path to theme root dir
+ */
+
+
+function getStoreName(themeRoot) {
+  return getSeedConfig(themeRoot).store;
+}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@madebyseed/seed-cli-tools",
+  "version": "1.0.0",
+  "description": "Seed CLI Tools",
+  "main": "index.js",
+  "scripts": {
+    "clean": "rm -rf lib/",
+    "start": "npm run clean && babel -w -d lib/ src/",
+    "test": "npm run lint",
+    "prepublish": "npm test && npm run clean && babel -d lib/ src/",
+    "lint": "eslint --max-warnings 0 src/",
+    "lint-allow-warning": "eslint src/"
+  },
+  "author": "SeedCMS",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.14.8",
+    "@babel/core": "^7.14.8",
+    "@babel/preset-env": "^7.14.8",
+    "@babel/register": "^7.14.5",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^7.31.0"
+  },
+  "dependencies": {
+    "@shopify/themekit": "^1.1.9",
+    "autoprefixer": "^10.3.1",
+    "bluebird": "^3.7.2",
+    "chalk": "^4.1.1",
+    "chokidar": "^3.5.2",
+    "cross-spawn": "^7.0.3",
+    "debug": "^4.3.2",
+    "del": "^6.0.0",
+    "fancy-log": "^1.3.3",
+    "figures": "^3.2.0",
+    "find-root": "^1.1.0",
+    "gulp": "^4.0.2",
+    "gulp-cheerio": "^1.0.0",
+    "gulp-cssimport": "^7.0.0",
+    "gulp-ext-replace": "^0.3.0",
+    "gulp-include": "^2.4.1",
+    "gulp-plumber": "^1.2.1",
+    "gulp-postcss": "^9.0.0",
+    "gulp-sass": "^5.0.0",
+    "gulp-size": "^4.0.1",
+    "gulp-svgmin": "^4.0.1",
+    "gulp-uglify": "^3.0.2",
+    "gulp-zip": "^5.1.0",
+    "gulp4-run-sequence": "^1.0.1",
+    "postcss": "^8.3.6",
+    "require-directory": "^2.1.1",
+    "sass": "^1.36.0",
+    "tailwindcss": "^2.2.7",
+    "vinyl-paths": "^3.0.1",
+    "yargs": "^17.0.1"
+  },
+  "gitHead": "c8014098190f878e6bd6623c69c9164a1d94001c"
+}

package/src/commands/deploy.js

@@ -0,0 +1,25 @@
+import spawn from 'cross-spawn';
+import debug from 'debug';
+import config from '../config';
+
+const logger = debug('slate-tools:deploy');
+
+export default function(program) {
+  program
+    .command('deploy')
+    .alias('d')
+    .description('Runs a full deploy of your theme\'s code to a Shopify store specified in config.yml. Existing files will be overwritten.')
+    .option('-e, --env <environment>[,<environment>...]', 'Shopify store(s) to deploy code to (specified in config.yml - default: development)', 'development')
+    .option('-m, --manual', 'outputs the compiled theme files to <theme>/upload/<theme>.zip for manual deployment')
+    .action((options = {}) => {
+      logger(`--gulpfile ${config.gulpFile}`);
+      logger(`--cwd ${config.themeRoot}`);
+
+      const args = ['deploy', '--environment', options.env];
+
+      spawn(config.gulp, args.concat(['--gulpfile', config.gulpFile, '--cwd', config.themeRoot]), {
+        detached: false,
+        stdio: 'inherit',
+      });
+    });
+}

package/src/commands/watch.js

@@ -0,0 +1,62 @@
+import { red, yellow } from "chalk";
+import figures from "figures";
+import spawn from "cross-spawn";
+import debug from "debug";
+import config from "../config";
+import { getStoreName, shopifyCLI } from "../utils";
+
+const logger = debug("seed-tools:watch");
+
+export default function (program) {
+  program
+    .command("watch")
+    .alias("w")
+    .description(
+      "Watches files for code changes and immediately deploys updates to dev theme as they occur. " +
+        "This uses shopify theme serve under the hood."
+    )
+    .action((options = {}) => {
+      logger(`--gulpfile ${config.gulpFile}`);
+      logger(`--cwd ${config.themeRoot}`);
+      const store = getStoreName(config.themeRoot);
+
+      if (!store) {
+        console.log("");
+        console.log(
+          red(`  ${figures.cross} no store field in seed.config.js`)
+        );
+        console.log(
+          "    Add 'store: <store.myshopify.com>' to your project seed.config.js"
+        );
+        console.log("");
+        return;
+      }
+
+      console.log(`Logging into ${yellow(store)} with Shopify CLI...`)
+      const loginProcess = shopifyCLI.login(store);
+      if (loginProcess.error) {
+        console.log("");
+        console.log(
+          red(`  ${figures.cross} Failed logging into ${store}, are you sure you're using the correct account?`)
+        );
+        console.log("");
+
+        return;
+      }
+
+      const gulpArgs = [
+        "watch",
+        "--gulpfile",
+        config.gulpFile,
+        "--cwd",
+        config.themeRoot,
+        "--environment",
+        options.env,
+      ];
+
+      spawn(config.gulp, gulpArgs, {
+        detached: false,
+        stdio: "inherit",
+      });
+    });
+}

package/src/config.js

@@ -0,0 +1,22 @@
+import { join, normalize } from "path";
+import { existsSync } from "fs";
+import findRoot from "find-root";
+
+const workingDirectory = process.cwd();
+const currentDirectory = __dirname;
+
+const themeRoot = findRoot(workingDirectory);
+const defaultGulpPath = join(themeRoot, normalize("node_modules/.bin/gulp"));
+// Legacy path for older versions of Node.
+const legacyGulpPath = join(
+  themeRoot,
+  normalize("node_modules/seed-cli-tools/node_modules/.bin/gulp")
+);
+
+const config = {
+  gulpFile: join(currentDirectory, "gulpfile.js"),
+  gulp: existsSync(defaultGulpPath) ? defaultGulpPath : legacyGulpPath,
+  themeRoot,
+};
+
+export default config;

package/src/gulpfile.js

@@ -0,0 +1,61 @@
+const gulp = require('gulp');
+// const argv = require('yargs').argv;
+const runSequence = require('gulp4-run-sequence');
+
+// imports gulp tasks from the `tasks` directory
+require('require-directory')(module, './tasks');
+
+gulp.task('build', gulp.series(
+  'clean',
+  gulp.parallel('build:js', 'build:vendor-js', 'build:css', 'build:assets', 'build:svg')
+))
+
+gulp.task('build:zip', gulp.series(
+  'clean',
+  gulp.parallel('build:js', 'build:vendor-js', 'build:css', 'build:assets', 'build:svg')
+))
+
+/**
+ * Does a full clean/rebuild of your theme and creates a `.zip` compatible with
+ * shopify.
+ *
+ * @function zip
+ * @memberof slate-cli.tasks
+ * @static
+ */
+ gulp.task('zip', (done) => {
+  runSequence('build:zip', 'compress', done);
+});
+
+
+/**
+ * Simple wrapper around src & dist watchers
+ *
+ * @summary Monitor your codebase for file changes and take the appropriate
+ *   action
+ * @function watch
+ * @memberof slate-cli.tasks.watch
+ * @static
+ */
+gulp.task('watch', gulp.series(
+  'build',
+  gulp.parallel('watch:src', 'watch:dist')
+));
+
+
+/**
+ * Does a full (re)build followed by a full deploy, cleaning existing files on
+ * the remote server and replacing them with the full set of files pushed to
+ * `dist` in the build
+ *
+ * @summary Deploy your built files to the Shopify Store set in
+ *   `slate-cli.config`
+ * @function deploy:manual
+ * @memberof slate-cli.tasks.deploy
+ * @static
+ */
+gulp.task('deploy', gulp.series(
+  'build',
+  'deploy:dist'
+));
+