@madebyseed/seed-cli-tools 2.3.2 → 3.0.0

package/src/tasks/includes/messages.ts

@@ -0,0 +1,157 @@
+import chalk from "chalk";
+import log from "fancy-log";
+
+interface PathObject {
+  file: string;
+  dir: string;
+}
+
+/**
+ * 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: string): PathObject {
+  const tmp = path.split("/");
+
+  return {
+    file: tmp.pop() || "",
+    dir: tmp.join("/"),
+  };
+}
+
+const messages = {
+  logFileEvent: (event: string, path: string, dist = false): void => {
+    const pathObject = separatePath(path);
+
+    if (dist) {
+      log(
+        "updated",
+        chalk.green("dist"),
+        chalk.magenta(pathObject.dir),
+        chalk.white("-"),
+        chalk.cyan(event),
+        chalk.yellow(pathObject.file),
+      );
+    } else {
+      log(
+        "change in",
+        chalk.magenta(pathObject.dir),
+        chalk.white("-"),
+        chalk.cyan(event),
+        chalk.yellow(pathObject.file),
+      );
+    }
+  },
+
+  logTransferDone: (): void => {
+    log(
+      "Transfer Complete:",
+      chalk.green("File changes successfully synced to store"),
+    );
+  },
+
+  logTransferFailed: (errMsg?: string): void => {
+    log(
+      "Transfer Failed:",
+      chalk.yellow(
+        `${
+          typeof errMsg === "string"
+            ? errMsg
+            : "File(s) failed to upload to store. See log notes in deploy.log"
+        }`,
+      ),
+    );
+  },
+
+  logProcessFiles: (processName: string): void => {
+    log("running task", chalk.white("-"), chalk.cyan(processName));
+  },
+
+  logChildProcess: (cmd: string): void => {
+    log(
+      "running task",
+      chalk.bold("[child process]"),
+      chalk.white("-"),
+      chalk.cyan(cmd),
+    );
+  },
+
+  logDeploys: (cmd: string, files: string[]): string => {
+    const timestamp = `Deploy complete @ ${new Date()}. `;
+    const action = cmd === "upload" ? "added/changed " : "removed ";
+    const amount = `${files.length} file(s): `;
+    const fileList = `${files.join(", ")}.\n`;
+
+    return timestamp + action + amount + fileList;
+  },
+
+  logDeployErrors: (cmd: string, files: string[], err: string): string => {
+    const timestamp = `Deploy error @ ${new Date()}. `;
+    const action = cmd === "upload" ? "added/changed " : "removed ";
+    const amount = `${files.length} file(s): `;
+    const fileList = `${files.join(", ")}.\n`;
+    const errMsg = `${err} \n`;
+
+    return timestamp + action + amount + fileList + errMsg;
+  },
+
+  logError: (message: string): void => {
+    log(chalk.red(message));
+  },
+
+  logBundleJs: (): void => {
+    log("Updating JS Bundle...");
+  },
+
+  configChange: (): string => {
+    return (
+      "Changes to seed.config.js Detected: You may need to quit <seed watch>" +
+      " and run a full <seed deploy> as a result."
+    );
+  },
+
+  translationsFailed: (): string => {
+    return "Translation errors detected.";
+  },
+
+  invalidThemeId: (themeId: string, env: string): void => {
+    log(
+      "Invalid theme id for",
+      chalk.cyan(`${env}: ${themeId}`),
+      chalk.yellow("`theme_id` must be a string."),
+    );
+  },
+
+  logStoreNotFound: (): void => {
+    log(
+      chalk.red(
+        "Store domain not found in seed.project.json or seed.config.js. If this is a multi-store project, pass in --store <store>.",
+      ),
+    );
+  },
+
+  configError: (): void => {
+    log(
+      "File missing:",
+      chalk.yellow(
+        "`seed.config.js` does not exist. You need to add a config file before you can make changes to your Shopify store.",
+      ),
+    );
+  },
+
+  deployTo: (environment: string): void => {
+    log("Environment:", chalk.bold(environment));
+  },
+
+  allDeploysComplete: (): void => {
+    log(
+      "Multiple environments:",
+      chalk.green("Deploy completed for all environments in series"),
+    );
+  },
+};
+
+export default messages;

package/src/tasks/includes/utilities.ts

@@ -0,0 +1,170 @@
+import chalk from "chalk";
+import log from "fancy-log";
+import _ from "lodash";
+import Promise from "bluebird";
+
+let errors: Error[] = [];
+
+interface EventCacheOptions {
+  changeEvents?: string[];
+  unlinkEvents?: string[];
+}
+
+interface EventCache {
+  change: string[];
+  unlink: string[];
+  addEvent: (event: string, path: string) => void;
+}
+
+/**
+ * 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 = {
+  /**
+   * Indicates whether there are errors during build/watch
+   *
+   * @returns {Boolean}
+   */
+  hasErrors: (): boolean => errors.length > 0,
+
+  /**
+   * Handles the output for any errors that might have been captured
+   * during the build and zip Gulp tasks.
+   *
+   * @memberof seed-cli.utilities
+   */
+  outputErrors: (): void => {
+    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: Error): void => {
+    log(chalk.red(err));
+    errors.push(err);
+  },
+
+  /**
+   * 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: <T>(
+    promiseArrayFactory: Array<() => Promise<T>>,
+  ): Promise<T[]> => {
+    const results: T[] = [];
+
+    return Promise.each(promiseArrayFactory, (factory) => {
+      const result = factory();
+      // @ts-ignore
+      results.push(result);
+      return result;
+    })
+      .thenReturn(results)
+      .all();
+  },
+
+  /**
+   * 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?: EventCacheOptions): EventCache => {
+    const opts = _.defaults(options || {}, {
+      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: string, path: string): void {
+        _.each(opts.changeEvents, (eventType) => {
+          if (event === eventType) {
+            this.change.push(path);
+          }
+        });
+
+        _.each(opts.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.
+   *
+   * @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: EventCache,
+      changeFn: (files: string[]) => void,
+      delFn: (files: string[]) => void,
+    ): void => {
+      if (cache.change.length) {
+        changeFn(cache.change);
+        cache.change = [];
+      }
+
+      if (cache.unlink.length) {
+        delFn(cache.unlink);
+        cache.unlink = [];
+      }
+    },
+    320,
+  ),
+};
+
+export default utilities;

package/src/tasks/shopify-cli.ts

@@ -0,0 +1,199 @@
+import gulp from "gulp";
+import { ChildProcess } from "child_process";
+import {
+  shopifyCLI,
+  extractThemeId,
+  logChildProcessOutput,
+  getDevThemeID,
+  setDevThemeID,
+  getThemeID,
+  getStoreName,
+} from "../utils";
+import config from "./includes/config";
+import messages from "./includes/messages";
+
+const environment = config.environment.split(/\s*,\s*|\s+/)[0];
+const store = config.store || undefined;
+const storePassword = config.storePassword;
+
+/**
+ * Takes the output of shopify cli serve, extracts dev theme ID and persists
+ * in seed.config.js
+ *
+ * @param {child_process} serveProcess shopify cli serve spawned child process
+ */
+function persistDevThemeID(serveProcess: ChildProcess): void {
+  serveProcess.stdout?.on("data", (data: Buffer | string) => {
+    const devThemeId = extractThemeId(data.toString());
+    const currentDevThemeId = getDevThemeID(config.themeRoot);
+
+    // If we already have latest dev theme ID, we got nothing left to do
+    if (devThemeId === currentDevThemeId) return;
+
+    // Else, write dev theme ID into seed.config.js
+    if (devThemeId) {
+      setDevThemeID(devThemeId);
+    }
+  });
+}
+
+/**
+ * Initiates shopify's cli command 'shopify theme serve' on the dist folder,
+ * watching files and uploading them to development store
+ *
+ * @function shopify:serve:dist
+ * @memberof seed-cli.tasks.watch
+ * @static
+ */
+gulp.task("shopify:serve:dist", () => {
+  const domain = getStoreName(config.themeRoot, store);
+  if (!domain) {
+    messages.logStoreNotFound();
+    process.exit(1);
+  }
+  messages.logChildProcess(
+    `'shopify theme dev --store ${domain}${
+      storePassword ? ` --store-password ${storePassword}` : ""
+    }'  on dist...`,
+  );
+  const childProcess = shopifyCLI.serve(domain, {
+    stdio: ["inherit", "pipe", "inherit"],
+  });
+  childProcess.stdout?.setEncoding("utf8");
+  logChildProcessOutput(childProcess);
+  persistDevThemeID(childProcess);
+  return childProcess;
+});
+
+/**
+ * Pulls theme files from the development theme specified in seed config into src
+ *
+ * @function shopify:pull:dev
+ * @memberof seed-cli.tasks.deploy
+ * @static
+ */
+gulp.task("shopify:pull:dev", (done) => {
+  const domain = getStoreName(config.themeRoot, store);
+  if (!domain) {
+    messages.logStoreNotFound();
+    process.exit(1);
+  }
+  messages.logChildProcess(
+    `'shopify theme pull --store ${domain}' on development theme...`,
+  );
+  const devThemeId = getDevThemeID(config.themeRoot);
+  if (!devThemeId || devThemeId === "false") {
+    return done();
+  }
+
+  return shopifyCLI.pull(domain, devThemeId);
+});
+
+/**
+ * Pulls theme files from the development theme specified in seed config into tmp
+ *
+ * @function shopify:pull:dev:tmp
+ * @memberof seed-cli.tasks.deploy
+ * @static
+ */
+gulp.task("shopify:pull:dev:tmp", (done) => {
+  const domain = getStoreName(config.themeRoot, store);
+  if (!domain) return done();
+
+  messages.logChildProcess(
+    `'shopify theme pull --store ${domain}' on tmp folder...`,
+  );
+  const devThemeId = getDevThemeID(config.themeRoot);
+  if (!devThemeId || devThemeId === "false") {
+    return done();
+  }
+
+  return shopifyCLI.pull(domain, devThemeId, config.tmp.root);
+});
+
+/**
+ * Pulls theme files from the seed config theme environment into tmp
+ *
+ * @function shopify:pull:origin:tmp
+ * @memberof seed-cli.tasks.deploy
+ * @static
+ */
+gulp.task("shopify:pull:origin:tmp", () => {
+  const domain = getStoreName(config.themeRoot, store);
+  if (!domain) {
+    messages.logStoreNotFound();
+    process.exit(1);
+  }
+
+  messages.logChildProcess(
+    `'shopify theme pull --store ${domain} ${environment}${
+      config.nodelete ? " --nodelete" : ""
+    }' into tmp...`,
+  );
+  const themeId = getThemeID(config.themeRoot, environment, store);
+  return shopifyCLI.pull(domain, themeId, config.tmp.root);
+});
+
+/**
+ * Pulls theme files from the seed config theme environment into src
+ *
+ * @function shopify:pull:origin:src
+ * @memberof seed-cli.tasks.deploy
+ * @static
+ */
+gulp.task("shopify:pull:origin:src", () => {
+  const domain = getStoreName(config.themeRoot, store);
+  if (!domain) {
+    messages.logStoreNotFound();
+    process.exit(1);
+  }
+
+  messages.logChildProcess(
+    `'shopify theme pull --store ${domain} ${environment}${
+      config.nodelete ? " --nodelete" : ""
+    }' into src...`,
+  );
+  const themeId = getThemeID(config.themeRoot, environment, store);
+  return shopifyCLI.pull(domain, themeId, config.src.root, config.nodelete);
+});
+
+/**
+ * Initiates shopify's cli command 'shopify theme push' on the dist folder,
+ * pushing it to stores theme
+ *
+ * @function deploy:dist
+ * @memberof seed-cli.tasks.deploy
+ * @static
+ */
+gulp.task("shopify:push:dist", () => {
+  const domain = getStoreName(config.themeRoot, store);
+  if (!domain) {
+    messages.logStoreNotFound();
+    process.exit(1);
+  }
+
+  // Use explicit theme ID if provided, otherwise use environment-based theme
+  const themeId = config.theme || getThemeID(config.themeRoot, config.environment, store);
+  
+  messages.logChildProcess(
+    `'shopify theme push --store ${domain}${themeId ? ` --theme ${themeId}` : ""}${config.nodelete ? " --nodelete" : ""}' on dist folder...`,
+  );
+  return shopifyCLI.push(domain, themeId, config.nodelete);
+});
+
+/**
+ * Initiates 'shopify theme package' on the dist folder, creating a zip.
+ *
+ * @function shopify:package:dist
+ * @memberof seed-cli.tasks.zip
+ * @static
+ */
+gulp.task("shopify:package:dist", () => {
+  const domain = getStoreName(config.themeRoot, store);
+  if (!domain) {
+    messages.logStoreNotFound();
+    process.exit(1);
+  }
+  messages.logChildProcess("shopify theme package on dist folder...");
+  return shopifyCLI.package();
+});

package/src/tasks/watchers.ts

@@ -0,0 +1,50 @@
+import gulp from "gulp";
+import chokidar from "chokidar";
+import config from "./includes/config";
+import utils from "./includes/utilities";
+import messages from "./includes/messages";
+
+const cache = utils.createEventCache();
+
+/**
+ * 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:vendor-js",
+    "watch:assets",
+    "watch:svg",
+  )((err) => {
+    if (err) console.error(err);
+  });
+});
+
+/**
+ * Watches for changes in the `./dist` folder and passes event data to the
+ * `cache` via {@link pushToCache}.
+ * @function watch:dist
+ * @memberof seed-cli.tasks.watch
+ * @static
+ */
+gulp.task("watch:dist", () => {
+  const watcher = chokidar.watch(["./"], {
+    cwd: config.dist.root,
+    ignored: /(^|[/\\])\../,
+    ignoreInitial: true,
+  });
+
+  watcher.on("all", (event: string, path: string) => {
+    if (!utils.hasErrors()) {
+      messages.logFileEvent(event, path, true);
+      cache.addEvent(event, path);
+    }
+  });
+});

package/src/types/declarations.d.ts

@@ -0,0 +1,72 @@
+declare module "gulp-ext-replace" {
+  function extReplace(extension: string): NodeJS.ReadWriteStream;
+  export default extReplace;
+}
+
+declare module "postcss-pxtorem" {
+  interface PxToRemOptions {
+    rootValue: number;
+    unitPrecision: number;
+    propList: string[];
+    selectorBlackList: string[];
+    replace: boolean;
+    mediaQuery: boolean;
+    exclude: RegExp;
+  }
+  function pxtorem(options: PxToRemOptions): any;
+  export default pxtorem;
+}
+
+declare module "postcss-reporter" {
+  interface ReporterOptions {
+    clearReportedMessages: boolean;
+  }
+  function reporter(options: ReporterOptions): any;
+  export default reporter;
+}
+
+declare module "postcss-import" {
+  function postcssImport(): any;
+  export default postcssImport;
+}
+
+declare module "cssnano" {
+  interface CssnanoOptions {
+    preset: string;
+  }
+  function cssnano(options: CssnanoOptions): any;
+  export default cssnano;
+}
+
+declare module "sass" {
+  interface Options {
+    [key: string]: any;
+  }
+  function sass(options?: Options): any;
+  export default sass;
+}
+
+declare module "require-directory" {
+  interface RequireDirectoryOptions {
+    recurse?: boolean;
+    visit?: (obj: any) => any;
+    rename?: (name: string) => string;
+    exclude?: RegExp | ((path: string) => boolean);
+  }
+
+  function requireDirectory(
+    module: NodeModule,
+    path: string,
+    options?: RequireDirectoryOptions,
+  ): { [key: string]: any };
+
+  export = requireDirectory;
+}
+
+declare module "gulp-include" {
+  interface IncludeOptions {
+    separateInputs?: boolean;
+  }
+  function include(options?: IncludeOptions): NodeJS.ReadWriteStream;
+  export default include;
+}