@madebyseed/seed-cli-tools 2.3.1 → 2.4.0

package/package.json

@@ -1,32 +1,53 @@
 {
   "name": "@madebyseed/seed-cli-tools",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "description": "Seed CLI Tools",
-  "main": "index.js",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
   "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/",
-    "dev": "npm run prepublish && npm link",
     "lint": "eslint --max-warnings 0 src/",
-    "lint-allow-warning": "eslint src/"
+    "lint-allow-warning": "eslint src/",
+    "build": "npm run clean && npx tsc --build --verbose --force",
+    "watch": "tsc --build --watch",
+    "test": "npm run lint",
+    "prepublish": "npm run build"
   },
   "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"
+    "@types/bluebird": "^3.5.42",
+    "@types/cross-spawn": "^6.0.6",
+    "@types/debug": "^4.1.12",
+    "@types/fancy-log": "^2.0.2",
+    "@types/find-root": "^1.1.4",
+    "@types/gulp": "^4.0.17",
+    "@types/gulp-if": "^3.0.5",
+    "@types/gulp-plumber": "^0.0.37",
+    "@types/gulp-postcss": "^8.0.6",
+    "@types/gulp-sass": "^5.0.4",
+    "@types/gulp-size": "^4.0.3",
+    "@types/gulp-uglify": "^3.0.11",
+    "@types/lodash": "^4.17.20",
+    "@types/node": "^20.11.24",
+    "@types/sass": "^1.45.0",
+    "@types/uglify-js": "^3.17.5",
+    "@types/vinyl-paths": "^5.0.0",
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "@typescript-eslint/parser": "^7.1.0",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-prettier": "^5.2.2",
+    "prettier": "^3.4.2",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.20.0"
   },
   "dependencies": {
     "autoprefixer": "^10.3.1",
     "bluebird": "^3.7.2",
     "chalk": "^4.1.1",
     "chokidar": "^3.5.2",
+    "commander": "^13.1.0",
     "cross-spawn": "^7.0.3",
     "cssnano": "^5.0.8",
     "debug": "^4.3.2",
@@ -45,6 +66,7 @@
     "gulp-size": "^4.0.1",
     "gulp-uglify": "^3.0.2",
     "lodash": "^4.17.21",
+    "minimist": "^1.2.5",
     "postcss": "^8.3.6",
     "postcss-import": "^14.0.2",
     "postcss-pxtorem": "^6.0.0",
@@ -54,9 +76,7 @@
     "tailwindcss": "^3.1.4",
     "uglify-js": "^3.15.3",
     "vinyl-paths": "^3.0.1",
-    "webpack": "^5.72.1",
-    "webpack-stream": "^7.0.0",
     "yargs": "^17.0.1"
   },
-  "gitHead": "018f1210f603f30c38dfb6cc17eb66967072e3b3"
+  "gitHead": "4ada9de9c0d943af873dd565575744aaa0512e41"
 }

package/src/commands/build.ts

@@ -0,0 +1,39 @@
+import spawn from "cross-spawn";
+import debug from "debug";
+import { Command } from "commander";
+import config from "../config";
+
+const logger = debug("seed-tools:deploy");
+
+interface BuildOptions {
+  skipOptimizations?: boolean;
+}
+
+export default function (program: Command): void {
+  program
+    .command("build")
+    .alias("b")
+    .description("Builds ./src files into dist folder")
+    .option(
+      "-s, --skip-optimizations",
+      "Skips asset optimization steps such as compression, minification and purging.",
+      false,
+    )
+    .action((options: BuildOptions = {}) => {
+      logger(`--gulpfile ${config.gulpFile}`);
+      logger(`--cwd ${config.themeRoot}`);
+
+      const args = ["build"];
+
+      if (options.skipOptimizations) args.push("--skip-optimizations");
+
+      if (!options.skipOptimizations) {
+        process.env.NODE_ENV = "production";
+      }
+
+      spawn(config.gulp, args.concat(["--gulpfile", config.gulpFile, "--cwd", config.themeRoot]), {
+        detached: false,
+        stdio: "inherit",
+      });
+    });
+}

package/src/commands/deploy.ts

@@ -0,0 +1,70 @@
+import spawn from "cross-spawn";
+import debug from "debug";
+import { Command } from "commander";
+import config from "../config";
+
+const logger = debug("seed-tools:deploy");
+
+interface DeployOptions {
+  env?: string;
+  store?: string;
+  dev?: boolean;
+  skipOptimizations?: boolean;
+  delete?: boolean;
+}
+
+export default function (program: Command): void {
+  program
+    .command("deploy")
+    .alias("d")
+    .description(
+      "Runs a full deploy of your theme's code to a Shopify store specified in seed.config.js. This runs shopify theme push with the --nodelete flag, so that files aren't deleted.",
+    )
+    .option(
+      "-e, --env <environment>",
+      "Shopify theme to deploy code to (specified in seed.config.js)",
+      "development",
+    )
+    .option(
+      "-st, --store <store>",
+      "Shopify store(s) to deploy code to (specified in seed.config.js)",
+    )
+    .option(
+      "-n, --no-dev",
+      "Skips pulling theme settings from local development theme",
+      false,
+    )
+    .option(
+      "-s, --skip-optimizations",
+      "Skips asset optimization steps such as compression, minification and purging.",
+      false,
+    )
+    .option(
+      "-d, --delete",
+      "By default seed deploy runs 'shopify theme push --nodelete'. With this option it will leave out the --no-delete flag, allowing files to be delete in store theme.",
+      false,
+    )
+    .action((options: DeployOptions = {}) => {
+      logger(`--gulpfile ${config.gulpFile}`);
+      logger(`--cwd ${config.themeRoot}`);
+
+      const args = [
+        options.dev ? "deploy" : "deploy:no-sync",
+        "--environment",
+        options.env,
+        "--store",
+        options.store,
+      ];
+
+      if (options.skipOptimizations) args.push("--skip-optimizations");
+      if (options.delete) args.push("--delete");
+
+      if (!options.skipOptimizations) process.env.NODE_ENV = "production";
+
+      // @ts-ignore
+      spawn(config.gulp, args.concat(["--gulpfile", config.gulpFile, "--cwd", config.themeRoot]), {
+        detached: false,
+        stdio: "inherit",
+      });
+    });
+}

package/src/commands/pull.ts

@@ -0,0 +1,58 @@
+import spawn from "cross-spawn";
+import debug from "debug";
+import { Command } from "commander";
+import config from "../config";
+
+const logger = debug("seed-tools:deploy");
+
+interface PullOptions {
+  env?: string;
+  store?: string;
+  all?: boolean;
+  delete?: boolean;
+}
+
+export default function (program: Command): void {
+  program
+    .command("pull")
+    .alias("p")
+    .description(
+      "Pulls the specified theme into your src folder. By default, it only pulls theme settings, if you want to pull all files use the --all flag.",
+    )
+    .option(
+      "-e, --env <environment>[,<environment>...]",
+      "Shopify store(s) to deploy code to (specified in seed.config.js)",
+      "development",
+    )
+    .option(
+      "-st, --store <store>",
+      "Shopify store(s) to deploy code to (specified in seed.config.js)",
+    )
+    .option("-a, --all", "Pulls all files from specified theme", false)
+    .option(
+      "-d, --delete",
+      "By default seed pull doesn't delete any files in you src folder, with this options it will delete any files that diverge from the pulled theme.",
+      false,
+    )
+    .action((options: PullOptions = {}) => {
+      logger(`--gulpfile ${config.gulpFile}`);
+      logger(`--cwd ${config.themeRoot}`);
+
+      const args = [
+        options.all ? "pull" : "pull:settings",
+        "--environment",
+        options.env,
+        "--store",
+        options.store,
+      ];
+
+      if (options.all) args.push("--all");
+      if (options.delete) args.push("--delete");
+
+      // @ts-ignore
+      spawn(config.gulp, args.concat(["--gulpfile", config.gulpFile, "--cwd", config.themeRoot]), {
+        detached: false,
+        stdio: "inherit",
+      });
+    });
+}

package/src/commands/watch.ts

@@ -0,0 +1,72 @@
+import spawn from "cross-spawn";
+import debug from "debug";
+import { Command } from "commander";
+import config from "../config";
+
+const logger = debug("seed-tools:watch");
+
+interface WatchOptions {
+  store?: string | false;
+  storePassword?: string | false;
+  optimize?: boolean;
+  env?: string;
+}
+
+export default function (program: Command): void {
+  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.",
+    )
+    .option(
+      "-s, --store <store>",
+      "Used for multi-store projects, specify the store to run the watch command for.",
+      false,
+    )
+    .option(
+      "-sp, --store-password <password>",
+      "Used for store password protected stores.",
+      false,
+    )
+    .option(
+      "-o, --optimize",
+      "Optimizes assets by compressing, minifying and purging.",
+      false,
+    )
+    .action((options: WatchOptions = {}) => {
+      logger(`--gulpfile ${config.gulpFile}`);
+      logger(`--cwd ${config.themeRoot}`);
+
+      const args = ["watch"];
+
+      if (options.store) {
+        args.push("--store", options.store);
+      }
+
+      if (options.storePassword) {
+        args.push("--store-password", options.storePassword);
+      }
+
+      if (!options.optimize) args.push("--skip-optimizations");
+
+      process.env.NODE_ENV = options.optimize ? "production" : "development";
+
+      spawn(
+        config.gulp,
+        args.concat([
+          "--gulpfile",
+          config.gulpFile,
+          "--cwd",
+          config.themeRoot,
+          "--environment",
+          options.env || "development",
+        ]),
+        {
+          detached: false,
+          stdio: "inherit",
+        },
+      );
+    });
+}

package/src/commands/zip.ts

@@ -0,0 +1,28 @@
+import spawn from "cross-spawn";
+import debug from "debug";
+import { Command } from "commander";
+import config from "../config";
+
+const logger = debug("seed-tools:zip");
+
+export default function (program: Command): void {
+  program
+    .command("zip")
+    .alias("z")
+    .description(
+      "Rebuilds the theme's source files and compresses the output. The compressed file is written to <theme>/upload/<theme>.zip (can be used for manual upload).",
+    )
+    .action(() => {
+      logger(`--gulpfile ${config.gulpFile}`);
+      logger(`--cwd ${config.themeRoot}`);
+
+      spawn(
+        config.gulp,
+        ["zip", "--gulpfile", config.gulpFile, "--cwd", config.themeRoot],
+        {
+          detached: false,
+          stdio: "inherit",
+        },
+      );
+    });
+}

package/src/config.ts

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

package/src/gulpfile.ts

@@ -0,0 +1,134 @@
+import gulp from "gulp";
+import requireDirectory from "require-directory";
+import utils from "./tasks/includes/utilities";
+
+// Import gulp tasks from the `tasks` directory
+requireDirectory(module, "./tasks");
+
+/**
+ * Handles the error summary at the end if there are errors to output.
+ * This task will only be run for the build and zip tasks.
+ */
+gulp.task("output:errors", (done) => {
+  if (utils.hasErrors()) {
+    utils.outputErrors();
+  } else {
+    done();
+  }
+});
+
+/**
+ * Does a full clean/rebuild of your theme
+ *
+ * @function build
+ * @memberof slate-cli.tasks.build
+ * @static
+ */
+gulp.task(
+  "build",
+  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", gulp.series("build", "shopify:package:dist", "copy:zip"));
+
+/**
+ * Synchronizes the development theme settings with our src folder theme settings
+ *
+ * @function sync-settings
+ * @memberof seed-cli.tasks.deploy
+ * @static
+ */
+gulp.task(
+  "sync-settings",
+  gulp.series("generate:tmp", "shopify:pull:dev:tmp", "sync-settings:tmp:src"),
+);
+
+/**
+ * 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",
+    "output:errors",
+    gulp.parallel("watch:src", "watch:dist", "shopify:serve:dist"),
+  ),
+);
+
+/**
+ * @summary pulls theme from specified environment theme into src
+ * @function pull
+ * @memberof slate-cli.tasks.deploy
+ * @static
+ */
+gulp.task("pull", gulp.series("shopify:pull:origin:src"));
+
+/**
+ * Does a full (re)build and push dist files into specified theme environment,
+ * theme using shopify theme push, by default with the --no-delete flag
+ *
+ * @summary pulls theme settings from specified environment theme into src
+ * @function pull:settings
+ * @memberof slate-cli.tasks.deploy
+ * @static
+ */
+gulp.task(
+  "pull:settings",
+  gulp.series(
+    "generate:tmp",
+    "shopify:pull:origin:tmp",
+    "sync-settings:tmp:src",
+    "clean",
+  ),
+);
+
+/**
+ * Synchronizes src folder theme settings with local development theme settings,
+ * then proceeds to do a full (re)build and push files into specified theme
+ * environment theme using shopify theme push, by default with the --no-delete flag
+ *
+ * @summary Deploy your built files to the Shopify Store set in
+ *   `slate-cli.config`
+ * @function deploy
+ * @memberof slate-cli.tasks.deploy
+ * @static
+ */
+gulp.task(
+  "deploy",
+  gulp.series("sync-settings", "build", "shopify:push:dist", "clean"),
+);
+
+/**
+ * Does a full (re)build and push dist files into specified theme environment,
+ * theme using shopify theme push, by default with the --no-delete flag
+ *
+ * @summary Deploy your built files to the Shopify Store set in
+ *   `slate-cli.config`
+ * @function deploy:no-sync
+ * @memberof slate-cli.tasks.deploy:no-sync
+ * @static
+ */
+gulp.task("deploy:no-sync", gulp.series("build", "shopify:push:dist"));

package/src/tasks/build-assets.ts

@@ -0,0 +1,135 @@
+import gulp from "gulp";
+import plumber from "gulp-plumber";
+import chokidar from "chokidar";
+import vinylPaths from "vinyl-paths";
+import del from "del";
+import size from "gulp-size";
+
+import config from "./includes/config";
+import utils from "./includes/utilities";
+import messages from "./includes/messages";
+
+const assetsPaths: string[] = [
+  config.src.assets,
+  config.src.templates,
+  config.src.sections,
+  config.src.snippets,
+  config.src.blocks,
+  config.src.locales,
+  config.src.config,
+  config.src.layout,
+];
+
+const rootAssets: string[] = [config.shopifyIgnore];
+
+/**
+ * Copies assets to the `/dist` directory
+ *
+ * @param {Array} files
+ * @returns {Stream}
+ * @private
+ */
+function processAssets(files: string | string[]): NodeJS.ReadWriteStream {
+  messages.logProcessFiles("build:assets");
+  return gulp
+    .src(files, { base: config.src.root })
+    .pipe(plumber(utils.errorHandler))
+    .pipe(
+      size({
+        showFiles: true,
+        pretty: true,
+      }),
+    )
+    .pipe(gulp.dest(config.dist.root));
+}
+
+/**
+ * Copies root assets to the `/dist` directory
+ *
+ * @param {Array} files
+ * @returns {Stream}
+ * @private
+ */
+function processRootAssets(files: string | string[]): NodeJS.ReadWriteStream {
+  messages.logProcessFiles("build:assets");
+  return gulp
+    .src(files, { allowEmpty: true })
+    .pipe(plumber(utils.errorHandler))
+    .pipe(
+      size({
+        showFiles: true,
+        pretty: true,
+      }),
+    )
+    .pipe(gulp.dest(config.dist.root));
+}
+
+/**
+ * Deletes specified files
+ *
+ * @param {Array} files
+ * @returns {Stream}
+ * @private
+ */
+function removeAssets(files: string[]): NodeJS.ReadWriteStream {
+  messages.logProcessFiles("remove:assets");
+
+  const mapFiles = files.map((file) => {
+    const distFile = file.replace(config.src.root, config.dist.root);
+    return distFile;
+  });
+
+  return gulp
+    .src(mapFiles)
+    .pipe(plumber(utils.errorHandler))
+    .pipe(vinylPaths(del))
+    .pipe(
+      size({
+        showFiles: true,
+        pretty: true,
+      }),
+    );
+}
+
+/**
+ * Copies assets to the `/dist` directory
+ *
+ * @function build:assets
+ * @memberof seed-cli.tasks.build
+ * @static
+ */
+gulp.task("build:assets", () => {
+  processRootAssets(rootAssets);
+  return processAssets(assetsPaths);
+});
+
+/**
+ * Watches assets in the `/src` directory
+ *
+ * @function watch:assets
+ * @memberof seed-cli.tasks.watch
+ * @static
+ */
+gulp.task("watch:assets", () => {
+  const eventCache = utils.createEventCache();
+
+  chokidar
+    .watch(assetsPaths, {
+      ignored: /(^|[/\\])\../,
+      ignoreInitial: true,
+    })
+    .on("all", (event, path) => {
+      messages.logFileEvent(event, path);
+      eventCache.addEvent(event, path);
+      utils.processCache(eventCache, processAssets, removeAssets);
+    });
+
+  chokidar
+    .watch(rootAssets, {
+      ignoreInitial: true,
+    })
+    .on("all", (event, path) => {
+      messages.logFileEvent(event, path);
+      processRootAssets(rootAssets);
+    });
+});