@madebyseed/seed-cli-tools 3.0.0 → 4.0.0

package/src/tasks/build-js-module.ts

@@ -0,0 +1,92 @@
+import gulp from "gulp";
+import gulpif from "gulp-if";
+import plumber from "gulp-plumber";
+import rename from "gulp-rename";
+import sourcemaps from "gulp-sourcemaps";
+import terser from "gulp-terser";
+import chokidar from "chokidar";
+import { utimesSync } from "fs";
+import { glob } from "glob";
+import utils from "./includes/utilities";
+import config from "./includes/config";
+import messages from "./includes/messages";
+
+/**
+ * Module-mode JS pipeline (seed.project.json: build.js.type = "module").
+ *
+ * Each `src/scripts/**\/*.js` file ships as its own ES module to
+ * `dist/assets/`. No bundling, no concatenation. Filenames are flattened with
+ * the parent folder as a prefix to dodge name collisions:
+ *
+ *   src/scripts/header.js                  → dist/assets/header.js
+ *   src/scripts/components/whatever.js     → dist/assets/components-whatever.js
+ *   src/scripts/sections/cart/items.js     → dist/assets/sections-cart-items.js
+ *   src/scripts/vendor/swiper.js           → dist/assets/vendor-swiper.js
+ *
+ * In dev (no `--optimize`) we emit inline sourcemaps and skip minification so
+ * stack traces map cleanly to source. In prod we minify with terser (which
+ * supports modern syntax — uglify-js used by the legacy pipeline does not).
+ */
+
+const SCRIPTS_GLOB = "src/scripts/**/*.js";
+
+function flattenWithParent(): NodeJS.ReadWriteStream {
+  return rename((file) => {
+    if (file.dirname && file.dirname !== "." && file.dirname !== "") {
+      const segments = file.dirname.split(/[\\/]/).filter(Boolean);
+      file.basename = segments.join("-") + "-" + file.basename;
+      file.dirname = "";
+    }
+  });
+}
+
+function buildOne(srcPath: string): NodeJS.ReadWriteStream {
+  return gulp
+    .src(srcPath, { allowEmpty: true, base: "src/scripts" })
+    .pipe(plumber(utils.errorHandler))
+    .pipe(gulpif(!config.optimize, sourcemaps.init()))
+    .pipe(gulpif(config.optimize, terser()))
+    .pipe(gulpif(!config.optimize, sourcemaps.write(".")))
+    .pipe(flattenWithParent())
+    .pipe(gulp.dest(config.dist.assets));
+}
+
+function processModuleJs(): NodeJS.ReadWriteStream {
+  messages.logProcessFiles(`build:js (module mode)`);
+  return buildOne(SCRIPTS_GLOB);
+}
+
+/**
+ * Touch JS files to update their modification time so Shopify's watcher picks
+ * the change up — same trick the legacy pipeline uses.
+ */
+function touchJsFiles(): void {
+  try {
+    const jsFiles = glob.sync(`${config.dist.assets}*.js`);
+    jsFiles.forEach((file) => {
+      const now = new Date();
+      utimesSync(file, now, now);
+      messages.logFileEvent("touch", file);
+    });
+  } catch (error) {
+    console.error("Error touching JS files:", error);
+  }
+}
+
+export function moduleBuildTask(): NodeJS.ReadWriteStream {
+  return processModuleJs();
+}
+
+export function moduleWatchTask(): void {
+  chokidar
+    .watch(SCRIPTS_GLOB, { ignoreInitial: true })
+    .on("all", (event, path) => {
+      messages.logFileEvent(event, path);
+      // Per-file rebuild — only the changed file flows through. Cheaper and
+      // simpler than re-globbing the world on every save.
+      const stream = buildOne(path);
+      stream.on("end", () => {
+        setTimeout(() => touchJsFiles(), 500);
+      });
+    });
+}

package/src/tasks/build-js.ts

@@ -10,11 +10,16 @@ import { utimesSync } from "fs";
 import utils from "./includes/utilities";
 import config from "./includes/config";
 import messages from "./includes/messages";
+import { moduleBuildTask, moduleWatchTask } from "./build-js-module";
 // Using Console type from Node.js types
 import type { Console } from "console";
 
 const minify = composer(uglifyjs, console as Console);
 
+// Surface the active JS pipeline mode once at task wire-up so it shows up in
+// `seed build` / `seed watch` output without every task spamming it.
+messages.logProcessFiles(`js mode: ${config.jsMode}`);
+
 interface MinifyOptions {
   mangle: boolean;
   compress: boolean;
@@ -65,10 +70,16 @@ function touchJsFiles(): void {
 }
 
 gulp.task("build:js", () => {
+  if (config.jsMode === "module") return moduleBuildTask();
   return processThemeJs();
 });
 
-gulp.task("watch:js", () => {
+gulp.task("watch:js", (done) => {
+  if (config.jsMode === "module") {
+    moduleWatchTask();
+    done();
+    return;
+  }
   chokidar
     .watch(
       [config.src.js, `!${config.roots.vendorJs}`, `!${config.src.vendorJs}`],
@@ -84,6 +95,7 @@ gulp.task("watch:js", () => {
         touchJsFiles();
       }, 500);
     });
+  done();
 });
 
 gulp.task("build:vendor-js", () => {

package/src/tasks/includes/config.ts

@@ -9,6 +9,7 @@ import minimist from "minimist";
 import { existsSync } from "fs";
 import autoprefixer from "autoprefixer";
 import postcssImport from "postcss-import";
+import { resolveJsMode, type JsMode } from "./js-mode";
 
 const logger = debug("seed-tools");
 const argv = minimist(process.argv.slice(2));
@@ -28,6 +29,8 @@ try {
   logger(err);
 }
 
+const jsMode: JsMode = resolveJsMode(themeRoot);
+
 interface PathConfig {
   root: string;
   js: string;
@@ -89,6 +92,7 @@ interface BuildConfig {
   tailwindConfig: string;
   usesTailwind: boolean;
   usesModuleBundler: boolean;
+  jsMode: JsMode;
   seedConfig: string;
   shopifyIgnore: string;
   src: PathConfig;
@@ -116,6 +120,7 @@ const config: BuildConfig = {
   tailwindConfig,
   usesTailwind: existsSync(join(themeRoot, tailwindConfig)),
   usesModuleBundler: !!pkg["bundle-js"],
+  jsMode,
   seedConfig: "seed.config.js",
   shopifyIgnore: join(themeRoot, ".shopifyignore"),
 

package/src/tasks/includes/js-mode.ts

@@ -0,0 +1,48 @@
+import { existsSync, readFileSync } from "fs";
+import { join } from "path";
+import debug from "debug";
+
+const logger = debug("seed-tools:js-mode");
+
+export type JsMode = "legacy" | "module";
+
+interface ProjectJsonShape {
+  build?: {
+    js?: {
+      type?: unknown;
+    };
+  };
+}
+
+/**
+ * Resolve the active JS pipeline mode from `seed.project.json` → `build.js.type`.
+ *
+ * Defaults to `legacy` for: missing file, missing field, unknown value. This is
+ * intentional — backwards compatibility means an existing theme with no
+ * `build.js` config keeps the gulp-include + uglify pipeline it had before.
+ *
+ * `bundle` is reserved for a future bundled mode and throws here so the field
+ * remains forward-compatible without silently falling back to legacy.
+ */
+export function resolveJsMode(themeRoot: string): JsMode {
+  const file = join(themeRoot, "seed.project.json");
+  if (!existsSync(file)) return "legacy";
+
+  let parsed: ProjectJsonShape = {};
+  try {
+    parsed = JSON.parse(readFileSync(file, "utf-8"));
+  } catch (err) {
+    logger("failed to parse seed.project.json:", err);
+    return "legacy";
+  }
+
+  const type = parsed.build?.js?.type;
+  if (type === "module") return "module";
+  if (type === "bundle") {
+    throw new Error(
+      'seed.project.json: build.js.type="bundle" is reserved for a future ' +
+        'bundled mode and not yet implemented. Use "legacy" or "module".',
+    );
+  }
+  return "legacy";
+}

package/src/tasks/watch-tui/App.tsx

@@ -0,0 +1,486 @@
+import React, { useEffect, useState } from "react";
+import { Box, Text, useInput, useStdout } from "ink";
+import type { TuiStore, LogEntry } from "./state";
+
+type Tab = "dashboard" | "logs" | "errors";
+
+interface AppProps {
+  store: TuiStore;
+  onQuit: () => void;
+}
+
+function useStoreTick(store: TuiStore): number {
+  const [tick, setTick] = useState(0);
+  useEffect(() => {
+    const h = (): void => setTick((t) => t + 1);
+    store.on("change", h);
+    const interval = setInterval(h, 1000);
+    return () => {
+      store.off("change", h);
+      clearInterval(interval);
+    };
+  }, [store]);
+  return tick;
+}
+
+export function App({ store, onQuit }: AppProps): React.ReactElement {
+  useStoreTick(store);
+  const [tab, setTab] = useState<Tab>("dashboard");
+  const [logOffset, setLogOffset] = useState(0); // 0 = tail
+  const { stdout } = useStdout();
+  const rows = stdout?.rows ?? 24;
+  const cols = stdout?.columns ?? 80;
+
+  useInput((input, key) => {
+    // Ink swallows Ctrl+C while in raw mode (we set exitOnCtrlC: false so we
+    // can run our own teardown), so handle it explicitly here.
+    if (input === "q" || (key.ctrl && input === "c")) {
+      onQuit();
+      return;
+    }
+    if (input === "d") {
+      setTab("dashboard");
+      return;
+    }
+    if (input === "l") {
+      setTab("logs");
+      setLogOffset(0);
+      return;
+    }
+    if (input === "e") {
+      setTab("errors");
+      return;
+    }
+
+    if (tab === "logs") {
+      if (key.upArrow || input === "k") {
+        setLogOffset((o) => o + 1);
+      } else if (key.downArrow || input === "j") {
+        setLogOffset((o) => Math.max(0, o - 1));
+      } else if (key.pageUp) {
+        setLogOffset((o) => o + 10);
+      } else if (key.pageDown) {
+        setLogOffset((o) => Math.max(0, o - 10));
+      } else if (input === "g") {
+        setLogOffset(store.logs.length);
+      } else if (input === "G") {
+        setLogOffset(0);
+      }
+    }
+  });
+
+  return (
+    <Box flexDirection="column" width={cols}>
+      <Header store={store} />
+      <Box flexDirection="column" flexGrow={1} paddingX={1} paddingY={1}>
+        {tab === "dashboard" && <Dashboard store={store} />}
+        {tab === "logs" && (
+          <Logs store={store} rows={rows - 6} offset={logOffset} cols={cols} />
+        )}
+        {tab === "errors" && <Errors store={store} cols={cols} />}
+      </Box>
+      <Footer tab={tab} store={store} />
+    </Box>
+  );
+}
+
+function Header({ store }: { store: TuiStore }): React.ReactElement {
+  const info = store.themeInfo;
+  const subtitle = [
+    info?.contextName,
+    info?.storeDomain || store.sourceLabel,
+    info?.branch,
+  ]
+    .filter(Boolean)
+    .join(" · ");
+
+  return (
+    <Box
+      borderStyle="round"
+      borderColor="gray"
+      paddingX={1}
+      flexDirection="column"
+    >
+      <Box justifyContent="space-between">
+        <Box>
+          <Text bold color="cyan">
+            seed watch
+          </Text>
+          {subtitle && <Text color="gray">{"  " + subtitle}</Text>}
+        </Box>
+        <Outcome store={store} />
+      </Box>
+    </Box>
+  );
+}
+
+/**
+ * Single status line — direct translation of (state, lastBuild, lastError).
+ * Same flag-based state model as the original draft, just rendered as an
+ * outcome line instead of a colored badge:
+ *   ⏳ building…              state=building
+ *   ✗ build failed · time [e] state=error (lastError set)
+ *   ✓ task · ms · time         state=watching with lastBuild
+ *   ● watching                 state=watching, no lastBuild yet
+ *   ◌ starting…                state=starting
+ */
+function Outcome({ store }: { store: TuiStore }): React.ReactElement | null {
+  if (store.state === "building") {
+    return (
+      <Text color="cyan">
+        ⏳ <Text color="gray">building…</Text>
+      </Text>
+    );
+  }
+  if (store.state === "error" && store.lastError) {
+    const time = new Date(store.lastError.at).toTimeString().slice(0, 8);
+    return (
+      <Text>
+        <Text color="red" bold>
+          ✗ build failed
+        </Text>
+        <Text color="gray">{"  · " + time + "  "}</Text>
+        <Text color="gray">[</Text>
+        <Text color="yellow">e</Text>
+        <Text color="gray">]</Text>
+      </Text>
+    );
+  }
+  if (store.state === "watching" && store.lastBuild) {
+    const time = new Date(store.lastBuild.at).toTimeString().slice(0, 8);
+    return (
+      <Text>
+        <Text color="green">✓ </Text>
+        <Text>{store.lastBuild.task}</Text>
+        <Text color="gray">{" · " + fmtMs(store.lastBuild.ms)}</Text>
+        <Text color="gray">{"  · " + time}</Text>
+      </Text>
+    );
+  }
+  if (store.state === "watching") {
+    return (
+      <Text color="green">
+        ● <Text color="gray">watching</Text>
+      </Text>
+    );
+  }
+  return (
+    <Text color="yellow">
+      ◌ <Text color="gray">starting…</Text>
+    </Text>
+  );
+}
+
+function Dashboard({ store }: { store: TuiStore }): React.ReactElement {
+  const info = store.themeInfo;
+  const shopify = store.shopify;
+
+  // Prefer live shopify-cli URLs over cached context URLs when available.
+  const previewUrl = shopify.previewUrl || info?.previewUrl;
+  const editorUrl = shopify.editorUrl || info?.customizerUrl;
+
+  // Every row is always rendered. Shopify URLs show "loading…" until the
+  // dev server prints them; context fields show "N/A" when not configured.
+  const rows: Array<[string, React.ReactNode]> = [
+    [
+      "Context",
+      info?.contextName ? (
+        <Text>
+          {info.contextName}
+          {info.contextStatus && (
+            <Text color="gray">{"  (" + info.contextStatus + ")"}</Text>
+          )}
+        </Text>
+      ) : (
+        <NA />
+      ),
+    ],
+    [
+      "Branch",
+      info?.branch ? (
+        <Text>
+          {info.branch}
+          {info.baseBranch && (
+            <Text color="gray">{" → " + info.baseBranch}</Text>
+          )}
+        </Text>
+      ) : (
+        <NA />
+      ),
+    ],
+    [
+      "Store",
+      info?.storeDomain || store.sourceLabel ? (
+        <Text>{info?.storeDomain || store.sourceLabel}</Text>
+      ) : (
+        <NA />
+      ),
+    ],
+    [
+      "Theme",
+      info?.previewThemeName || info?.previewThemeId ? (
+        <Text>
+          {info.previewThemeName ?? String(info.previewThemeId)}
+          {info.previewThemeName && info.previewThemeId && (
+            <Text color="gray">{"  (" + info.previewThemeId + ")"}</Text>
+          )}
+        </Text>
+      ) : (
+        <NA />
+      ),
+    ],
+    ["Local", shopify.localUrl ? <Url value={shopify.localUrl} /> : <Loading />],
+    ["Preview", previewUrl ? <Url value={previewUrl} /> : <Loading />],
+    ["Editor", editorUrl ? <Url value={editorUrl} /> : <Loading />],
+    [
+      "Task",
+      info?.asanaTaskUrl ? <Url value={info.asanaTaskUrl} /> : <NA />,
+    ],
+    ["PR", info?.prUrl ? <Url value={info.prUrl} /> : <NA />],
+  ];
+
+  return (
+    <Box flexDirection="column">
+      {shopify.authUrl && <AuthBanner store={store} />}
+      {rows.map(([label, value], i) => (
+        <Box key={i}>
+          <Box width={10}>
+            <Text color="gray">{label}</Text>
+          </Box>
+          {value}
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+function AuthBanner({ store }: { store: TuiStore }): React.ReactElement {
+  const { authUrl, authUserCode } = store.shopify;
+  return (
+    <Box
+      borderStyle="round"
+      borderColor="yellow"
+      paddingX={1}
+      flexDirection="column"
+      marginBottom={1}
+    >
+      <Text color="yellow" bold>
+        ⚠ Shopify CLI needs you to log in
+      </Text>
+      <Box marginTop={1} flexDirection="column">
+        <Text>
+          <Text color="gray">Open: </Text>
+          <Text color="blue">{authUrl}</Text>
+        </Text>
+        {authUserCode && (
+          <Text>
+            <Text color="gray">Verify code: </Text>
+            <Text color="yellow" bold>
+              {authUserCode}
+            </Text>
+          </Text>
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+function Url({ value }: { value: string }): React.ReactElement {
+  return <Text color="blue">{value}</Text>;
+}
+
+function Loading(): React.ReactElement {
+  return <Text color="yellow">loading…</Text>;
+}
+
+function NA(): React.ReactElement {
+  return <Text color="gray">N/A</Text>;
+}
+
+function Logs({
+  store,
+  rows,
+  offset,
+  cols,
+}: {
+  store: TuiStore;
+  rows: number;
+  offset: number;
+  cols: number;
+}): React.ReactElement {
+  const visibleRows = Math.max(3, rows);
+  const logs = store.logs;
+  const total = logs.length;
+  const end = Math.max(0, total - offset);
+  const start = Math.max(0, end - visibleRows);
+  const slice = logs.slice(start, end);
+
+  const following = offset === 0;
+  const scrollHint = following
+    ? `following (${total} lines)`
+    : `${start + 1}-${end} of ${total} · [j/k] scroll · [G] bottom`;
+
+  return (
+    <Box flexDirection="column">
+      <Text color="gray">{scrollHint}</Text>
+      <Box flexDirection="column" marginTop={1}>
+        {slice.length === 0 ? (
+          <Text color="gray">No output yet.</Text>
+        ) : (
+          slice.map((entry) => <LogLine key={entry.id} entry={entry} cols={cols} />)
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+function LogLine({
+  entry,
+  cols,
+}: {
+  entry: LogEntry;
+  cols: number;
+}): React.ReactElement {
+  const color = colorForKind(entry.kind);
+  const time = new Date(entry.ts).toTimeString().slice(0, 8);
+  const budget = Math.max(20, cols - time.length - 3);
+  const text = truncate(entry.text, budget);
+  return (
+    <Text>
+      <Text color="gray">{time + " "}</Text>
+      <Text color={color}>{text}</Text>
+    </Text>
+  );
+}
+
+function Errors({
+  store,
+  cols,
+}: {
+  store: TuiStore;
+  cols: number;
+}): React.ReactElement {
+  const err = store.lastError;
+  if (!err) {
+    return <Text color="gray">No errors recorded.</Text>;
+  }
+  const ago = fmtAgo(Date.now() - err.at);
+  return (
+    <Box flexDirection="column">
+      <Text color="red" bold>
+        ⚠ Last error <Text color="gray">({ago} ago)</Text>
+      </Text>
+      <Box marginTop={1} flexDirection="column">
+        {err.lines.map((line, i) => (
+          <Text key={i} color="red">
+            {truncate(line, Math.max(20, cols - 2))}
+          </Text>
+        ))}
+      </Box>
+    </Box>
+  );
+}
+
+function Footer({
+  tab,
+  store,
+}: {
+  tab: Tab;
+  store: TuiStore;
+}): React.ReactElement {
+  const hasError = Boolean(store.lastError);
+  return (
+    <Box
+      borderStyle="round"
+      borderColor="gray"
+      paddingX={1}
+      justifyContent="space-between"
+    >
+      <Box>
+        <TabLabel active={tab === "dashboard"} key_="d" label="dashboard" />
+        <Text color="gray">{"   "}</Text>
+        <TabLabel
+          active={tab === "logs"}
+          key_="l"
+          label={`logs (${store.logs.length})`}
+        />
+        <Text color="gray">{"   "}</Text>
+        <TabLabel
+          active={tab === "errors"}
+          key_="e"
+          label="errors"
+          marker={hasError ? "!" : undefined}
+        />
+      </Box>
+      <Text color="gray">
+        [<Text color="yellow">q</Text>] quit
+      </Text>
+    </Box>
+  );
+}
+
+function TabLabel({
+  active,
+  key_,
+  label,
+  marker,
+}: {
+  active: boolean;
+  key_: string;
+  label: string;
+  marker?: string;
+}): React.ReactElement {
+  return (
+    <Text>
+      <Text color="gray">[</Text>
+      <Text color="yellow">{key_}</Text>
+      <Text color="gray">] </Text>
+      <Text color={active ? "cyan" : "white"} bold={active}>
+        {label}
+      </Text>
+      {marker && <Text color="red">{" " + marker}</Text>}
+    </Text>
+  );
+}
+
+function colorForKind(kind: LogEntry["kind"]): string {
+  switch (kind) {
+    case "error":
+    case "build-error":
+      return "red";
+    case "warn":
+      return "yellow";
+    case "build-start":
+    case "build-done":
+      return "cyan";
+    case "file-change":
+      return "magenta";
+    case "upload":
+      return "blue";
+    case "verbose":
+      return "gray";
+    default:
+      return "white";
+  }
+}
+
+function fmtMs(ms: number): string {
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+function fmtAgo(ms: number): string {
+  if (ms < 1000) return "just now";
+  if (ms < 60 * 1000) return `${Math.round(ms / 1000)}s`;
+  if (ms < 60 * 60 * 1000) {
+    const m = Math.floor(ms / 60000);
+    const s = Math.round((ms % 60000) / 1000);
+    return s > 0 && m < 10 ? `${m}m ${s}s` : `${m}m`;
+  }
+  return `${Math.round(ms / 3600000)}h`;
+}
+
+function truncate(s: string, max: number): string {
+  if (s.length <= max) return s;
+  return s.slice(0, Math.max(0, max - 1)) + "…";
+}