@fluid-app/fluid-cli-theme-dev 0.1.21 → 0.1.23

package/src/commands/push.ts

@@ -1,220 +0,0 @@
-import chalk from "chalk";
-import { Command } from "commander";
-import ora from "ora";
-import prompts from "prompts";
-import { requireToken, createApiClient } from "../api.js";
-import { readThemeConfig, writeThemeConfig } from "../theme-config.js";
-import { ThemeRoot } from "../theme/root.js";
-import { Syncer } from "../theme/syncer.js";
-import { themes } from "@fluid-app/themes-api-client";
-import {
-  selectTheme,
-  findTheme,
-  type ApplicationTheme,
-} from "../theme-picker.js";
-import { findWorkspace, resolveThemeRootFromCwd } from "../workspace.js";
-
-/**
- * Detect files where the remote has changed since the last pull,
- * and we also have local changes (i.e. we'd overwrite someone else's work).
- */
-function detectRemoteDrift(
-  storedChecksums: Record<string, string>,
-  remoteChecksums: Record<string, string>,
-  themeRoot: ThemeRoot,
-): string[] {
-  const conflicts: string[] = [];
-  for (const [key, storedChecksum] of Object.entries(storedChecksums)) {
-    const remoteChecksum = remoteChecksums[key];
-    if (remoteChecksum === undefined) continue;
-    if (remoteChecksum === storedChecksum) continue; // remote unchanged since pull
-
-    // Remote changed — check if we also have this file locally (and it differs)
-    const file = themeRoot.file(key);
-    if (!file.exists) continue;
-    const localChecksum = file.checksum();
-    if (localChecksum === remoteChecksum) continue; // local matches remote already
-
-    conflicts.push(key);
-  }
-  return conflicts;
-}
-
-export function createPushCommand(): Command {
-  return new Command("push")
-    .description("Push local theme files to a remote theme")
-    .option("-t, --theme <name-or-id>", "Theme name or ID to push to")
-    .option("-n, --nodelete", "Do not delete remote files missing locally")
-    .option("-f, --force", "Skip schema validation")
-    .option("-p, --publish", "Publish the theme after pushing")
-    .option(
-      "-u, --unpublished",
-      "Create a new unpublished theme and push to it",
-    )
-    .option("--root <path>", "Theme root directory", ".")
-    .action(
-      async (opts: {
-        theme?: string;
-        nodelete?: boolean;
-        force?: boolean;
-        publish?: boolean;
-        unpublished?: boolean;
-        root: string;
-      }) => {
-        requireToken();
-
-        // If no explicit --root and we're inside a workspace, resolve to the theme root
-        let rootPath = opts.root;
-        if (rootPath === ".") {
-          const workspace = findWorkspace();
-          if (workspace) {
-            rootPath = resolveThemeRootFromCwd(workspace) ?? rootPath;
-          }
-        }
-
-        const themeRoot = new ThemeRoot(rootPath);
-        if (!themeRoot.isValid()) {
-          console.error(`'${rootPath}' does not look like a theme directory.`);
-          process.exit(1);
-        }
-
-        const api = createApiClient();
-        const config = readThemeConfig(themeRoot.root);
-        let theme: ApplicationTheme;
-
-        if (opts.unpublished) {
-          const { name } = await prompts(
-            {
-              type: "text",
-              name: "name",
-              message: "Name for the new theme",
-            },
-            { onCancel: () => process.exit(130) },
-          );
-          if (!name) {
-            console.error("Theme name is required.");
-            process.exit(1);
-          }
-          const body = await themes.createApplicationTheme(api, {
-            application_theme: { name, status: "draft" },
-          });
-          theme = body.application_theme;
-          console.log(
-            `Created unpublished theme: ${theme.name} (#${theme.id})`,
-          );
-        } else if (opts.theme) {
-          theme = await findTheme(api, opts.theme);
-        } else if (config) {
-          // Use .fluid-theme.json as the default
-          console.log(
-            `  Using theme from .fluid-theme.json: ${chalk.bold(config.themeName)} (#${config.themeId})`,
-          );
-          const body = await themes.getApplicationTheme(api, config.themeId);
-          theme = body.application_theme;
-        } else {
-          theme = await selectTheme(api, "Select a theme to push to");
-        }
-
-        // Check for remote drift if we have stored checksums
-        if (config?.checksums && !opts.force) {
-          const driftSpinner = ora("Checking for remote changes…").start();
-          const driftSyncer = new Syncer(api, theme.id, themeRoot);
-          await driftSyncer.fetchChecksums();
-          const remoteChecksums = driftSyncer.remoteChecksums();
-          const conflicts = detectRemoteDrift(
-            config.checksums,
-            remoteChecksums,
-            themeRoot,
-          );
-          driftSpinner.stop();
-
-          if (conflicts.length > 0) {
-            console.log(
-              chalk.yellow(
-                `\n⚠ ${conflicts.length} file(s) changed on remote since last pull:\n`,
-              ),
-            );
-            for (const key of conflicts) {
-              console.log(`  ${key}`);
-            }
-            console.log();
-
-            const { resolution } = await prompts(
-              {
-                type: "select",
-                name: "resolution",
-                message: "How do you want to handle this?",
-                choices: [
-                  {
-                    title: "Push anyway (overwrite remote changes)",
-                    value: "push",
-                  },
-                  {
-                    title: "Pull first, then push",
-                    value: "pull-first",
-                  },
-                  { title: "Abort", value: "abort" },
-                ],
-              },
-              { onCancel: () => process.exit(130) },
-            );
-
-            if (resolution === "abort") {
-              console.log("Aborted.");
-              process.exit(0);
-            }
-            if (resolution === "pull-first") {
-              console.log(
-                `Run ${chalk.cyan("fluid theme pull")} first, then push again.`,
-              );
-              process.exit(0);
-            }
-          }
-        }
-
-        const syncer = new Syncer(api, theme.id, themeRoot);
-        const spinner = ora(`Pushing to ${theme.name} (#${theme.id})…`).start();
-
-        const result = await syncer.uploadTheme({
-          delete: !opts.nodelete,
-          validate: !opts.force,
-          onProgress: (d, total) => {
-            spinner.text = `Pushing ${d}/${total} files…`;
-          },
-        });
-
-        if (result.validationFailed) {
-          spinner.fail(
-            `Schema validation failed (${result.errors.length} error(s)). Use --force to skip.`,
-          );
-          for (const e of result.errors) console.error(`  ${e}`);
-          process.exit(1);
-        } else if (result.errors.length) {
-          spinner.warn(`Pushed with ${result.errors.length} error(s).`);
-          for (const e of result.errors) console.error(`  ${e}`);
-        } else {
-          spinner.succeed(
-            `Pushed ${result.uploaded} file(s), deleted ${result.deleted} remote file(s).`,
-          );
-        }
-
-        // Update stored checksums after successful push
-        if (config) {
-          writeThemeConfig(themeRoot.root, {
-            ...config,
-            checksums: syncer.remoteChecksums(),
-          });
-        }
-
-        if (opts.publish) {
-          const pubSpinner = ora("Publishing theme…").start();
-          try {
-            await themes.publishApplicationTheme(api, theme.id);
-            pubSpinner.succeed("Theme published.");
-          } catch (e) {
-            pubSpinner.fail(`Publish failed: ${e}`);
-          }
-        }
-      },
-    );
-}

package/src/commands/theme.ts

@@ -1,23 +0,0 @@
-import { Command } from "commander";
-import type { PluginContext } from "@fluid-app/fluid-cli";
-import { createDevCommand } from "./dev.js";
-import { createPushCommand } from "./push.js";
-import { createPullCommand } from "./pull.js";
-import { createLintCommand } from "./lint.js";
-import { createInitCommand } from "./init.js";
-import { createNavigateCommand } from "./navigate.js";
-
-export function registerThemeCommand(ctx: PluginContext): void {
-  const cmd = new Command("theme").description(
-    "Theme developer workflow — dev server, push, pull, lint, init",
-  );
-
-  cmd.addCommand(createDevCommand());
-  cmd.addCommand(createPushCommand());
-  cmd.addCommand(createPullCommand());
-  cmd.addCommand(createLintCommand());
-  cmd.addCommand(createInitCommand());
-  cmd.addCommand(createNavigateCommand());
-
-  ctx.program.addCommand(cmd);
-}

package/src/index.ts

@@ -1,12 +0,0 @@
-import type { FluidPlugin, PluginContext } from "@fluid-app/fluid-cli";
-import { registerThemeCommand } from "./commands/theme.js";
-
-const plugin: FluidPlugin = {
-  name: "@fluid-app/fluid-cli-theme-dev",
-  version: "0.1.0",
-  register(ctx: PluginContext) {
-    registerThemeCommand(ctx);
-  },
-};
-
-export default plugin;

package/src/plugin-state.ts

@@ -1,171 +0,0 @@
-import { existsSync } from "node:fs";
-import { readConfig, updateConfig } from "@fluid-app/fluid-cli";
-
-export interface DevThemeRef {
-  id: number;
-  name: string;
-}
-
-interface ThemeDevState {
-  /**
-   * Dev themes keyed per project, so `theme dev` in one working copy never
-   * reuses (and clobbers) another project's sandbox theme. See `devThemeKey`.
-   * Entries are pruned once their theme directory no longer exists, so the map
-   * can't grow without bound as projects (and one-off/temp dirs) come and go.
-   */
-  devThemes?: Record<string, DevThemeRef>;
-  /** Most recently started dev theme — `navigate`'s default target. */
-  lastDevThemeId?: number;
-  /**
-   * Legacy single global dev theme id. Older CLI versions stored one dev theme
-   * here regardless of project. Read once for migration (see `getDevTheme`),
-   * then dropped in favour of `devThemes`.
-   */
-  devThemeId?: number;
-  /** Legacy companion to `devThemeId`. */
-  devThemeName?: string;
-}
-
-const PLUGIN_KEY = "theme-dev";
-
-function getState(): ThemeDevState {
-  const config = readConfig();
-  return (config.plugins[PLUGIN_KEY] as ThemeDevState) ?? {};
-}
-
-/** Extract the absolute theme root from a `company:themeRoot` key. */
-function themeRootFromKey(key: string): string {
-  const sep = key.indexOf(":");
-  return sep === -1 ? key : key.slice(sep + 1);
-}
-
-/**
- * Set `key` to `theme`, dropping any entries whose theme directory no longer
- * exists. Tying an entry's lifetime to its directory keeps the map bounded —
- * abandoned/deleted projects fall out the next time `theme dev` runs anywhere.
- */
-function withDevTheme(
-  existing: Record<string, DevThemeRef> | undefined,
-  key: string,
-  theme: DevThemeRef,
-): Record<string, DevThemeRef> {
-  const next: Record<string, DevThemeRef> = {};
-  for (const [k, v] of Object.entries(existing ?? {})) {
-    if (existsSync(themeRootFromKey(k))) next[k] = v;
-  }
-  next[key] = theme;
-  return next;
-}
-
-/**
- * Stable key identifying a dev theme's owning project: the Fluid company
- * (subdomains are globally unique) plus the absolute theme root. Two working
- * copies — or the same copy pulled from two companies — get distinct keys.
- */
-export function devThemeKey(
-  company: string | undefined,
-  themeRoot: string,
-): string {
-  return `${company ?? "default"}:${themeRoot}`;
-}
-
-/**
- * The dev theme stored for a project key, if any. Falls back once to the legacy
- * global `devThemeId` (older CLI versions) and adopts it for this key — clearing
- * the legacy fields so a second project can't adopt the same theme and collide.
- */
-export function getDevTheme(key: string): DevThemeRef | undefined {
-  const state = getState();
-  const existing = state.devThemes?.[key];
-  if (existing) return existing;
-
-  if (state.devThemeId) {
-    const migrated: DevThemeRef = {
-      id: state.devThemeId,
-      name: state.devThemeName ?? `Development #${state.devThemeId}`,
-    };
-    updateConfig((config) => {
-      const current = (config.plugins[PLUGIN_KEY] as ThemeDevState) ?? {};
-      const { devThemeId: _id, devThemeName: _name, ...rest } = current;
-      return {
-        ...config,
-        plugins: {
-          ...config.plugins,
-          [PLUGIN_KEY]: {
-            ...rest,
-            devThemes: withDevTheme(rest.devThemes, key, migrated),
-            lastDevThemeId: migrated.id,
-          },
-        },
-      };
-    });
-    return migrated;
-  }
-
-  return undefined;
-}
-
-/** Store (or refresh) the dev theme for a project key and mark it most-recent. */
-export function setDevTheme(key: string, theme: DevThemeRef): void {
-  updateConfig((config) => {
-    const current = (config.plugins[PLUGIN_KEY] as ThemeDevState) ?? {};
-    return {
-      ...config,
-      plugins: {
-        ...config.plugins,
-        [PLUGIN_KEY]: {
-          ...current,
-          devThemes: withDevTheme(current.devThemes, key, theme),
-          lastDevThemeId: theme.id,
-        },
-      },
-    };
-  });
-}
-
-/** Forget a project's dev theme (it was deleted remotely or is no longer a dev theme). */
-export function clearDevTheme(key: string): void {
-  updateConfig((config) => {
-    const current = (config.plugins[PLUGIN_KEY] as ThemeDevState) ?? {};
-    const removed = current.devThemes?.[key];
-    if (!removed) return config;
-    const { [key]: _removed, ...rest } = current.devThemes ?? {};
-    const next: ThemeDevState = { ...current, devThemes: rest };
-    // Don't leave `navigate` pointing at a theme we just forgot.
-    if (current.lastDevThemeId === removed.id) {
-      next.lastDevThemeId = undefined;
-    }
-    return {
-      ...config,
-      plugins: { ...config.plugins, [PLUGIN_KEY]: next },
-    };
-  });
-}
-
-/**
- * Mark a theme as the most recently started dev server (`navigate`'s default)
- * without recording it as a project's dev theme — used for the `--theme`
- * escape hatch, which may target an arbitrary (non-dev) theme.
- */
-export function setLastDevThemeId(id: number): void {
-  updateConfig((config) => {
-    const current = (config.plugins[PLUGIN_KEY] as ThemeDevState) ?? {};
-    return {
-      ...config,
-      plugins: {
-        ...config.plugins,
-        [PLUGIN_KEY]: { ...current, lastDevThemeId: id },
-      },
-    };
-  });
-}
-
-/**
- * The dev theme to target by default in `navigate` — the most recently started
- * dev server. Falls back to the legacy global id for users who haven't yet run
- * the per-project `theme dev`.
- */
-export function getLastDevThemeId(): number | undefined {
-  const state = getState();
-  return state.lastDevThemeId ?? state.devThemeId;
-}

package/src/theme/dev-server/hot-reload.ts

@@ -1,65 +0,0 @@
-export function buildHotReloadScript(mode: "full-page" | "off"): string {
-  return `
-<script>
-(() => {
-  window.__FLUID_CLI_ENV__ = ${JSON.stringify({ mode })};
-
-  class HotReload {
-    static reloadMode() { return window.__FLUID_CLI_ENV__.mode; }
-    static isActive() { return HotReload.reloadMode() !== "off"; }
-    static setHotReloadCookie(files) {
-      const expires = new Date(Date.now() + 3000).toUTCString();
-      document.cookie = \`hot_reload_files=\${files.join(",")};expires=\${expires};path=/\`;
-    }
-    static refresh(files) {
-      HotReload.setHotReloadCookie(files);
-      console.log("[HotReload] Refreshing page");
-      window.location.reload();
-    }
-  }
-
-  class SSEClient {
-    constructor(url, handler) {
-      if (typeof EventSource === "undefined") {
-        console.error("[HotReload] EventSource not supported in this browser.");
-        return;
-      }
-      console.log("[HotReload] Initializing…");
-      this.url = url;
-      this.handler = handler;
-    }
-    connect() {
-      const es = new EventSource(this.url);
-      es.onopen = () => console.log("[HotReload] SSE connected.");
-      es.onerror = () => {
-        console.log("[HotReload] SSE closed. Reconnecting in 5s…");
-        es.close();
-        setTimeout(() => this.connect(), 5000);
-      };
-      es.onmessage = (msg) => {
-        const data = JSON.parse(msg.data);
-        if (data.reload_page) { HotReload.refresh([]); return; }
-        this.handler(data);
-      };
-    }
-  }
-
-  if (HotReload.isActive()) {
-    new SSEClient("/hot-reload", (data) => {
-      if (data.modified) HotReload.refresh(data.modified);
-    }).connect();
-  }
-})();
-</script>`;
-}
-
-export function injectHotReload(
-  html: string,
-  mode: "full-page" | "off",
-): string {
-  const script = buildHotReloadScript(mode);
-  if (html.includes("</body>")) {
-    return html.replace("</body>", `${script}\n</body>`);
-  }
-  return html + script;
-}

package/src/theme/dev-server/index.ts

@@ -1,145 +0,0 @@
-import http from "node:http";
-import { SSEStream } from "./sse.js";
-import { proxyRequest } from "./proxy.js";
-import { watchTheme } from "./watcher.js";
-import { Syncer } from "../syncer.js";
-import type { ThemeRoot } from "../root.js";
-import type { ApiClient } from "../../api.js";
-
-export interface DevServerOptions {
-  host: string;
-  port: number;
-  reloadMode: "full-page" | "off";
-}
-
-export interface DevServerTheme {
-  id: number;
-  name: string;
-  company: string;
-  editorUrl?: string;
-}
-
-export async function startDevServer(
-  api: ApiClient,
-  theme: DevServerTheme,
-  themeRoot: ThemeRoot,
-  opts: DevServerOptions & { validate?: boolean },
-  onReady?: (address: string) => void,
-): Promise<() => void> {
-  const sse = new SSEStream();
-  const syncer = new Syncer(api, theme.id, themeRoot);
-
-  const pendingUpdates = new Set<string>();
-
-  // ── Initial sync ─────────────────────────────────────────────────────────
-  console.log(`\nSyncing theme ${theme.name} (#${theme.id})…`);
-  const syncResult = await syncer.uploadTheme({
-    delete: true,
-    validate: opts.validate,
-    onProgress: (done, total) => {
-      process.stdout.write(`\r  Uploading ${done}/${total} files…`);
-    },
-  });
-  process.stdout.write("\n");
-  if (syncResult.validationFailed) {
-    console.error(
-      `\nSchema validation failed (${syncResult.errors.length} error(s)). Use --force to skip.\n`,
-    );
-    for (const e of syncResult.errors) console.error(`  ${e}`);
-    process.exit(1);
-  } else if (syncResult.errors.length > 0) {
-    for (const e of syncResult.errors) console.error(`  ${e}`);
-  }
-
-  // ── File watcher ─────────────────────────────────────────────────────────
-  const stopWatcher = watchTheme(
-    themeRoot,
-    async (modified, added, removed) => {
-      const changed = [...modified, ...added];
-
-      for (const file of changed) {
-        // Validate schema on liquid files during dev (warn, don't block)
-        if (opts.validate && file.isLiquid) {
-          const diagnostics = file.validateSchema();
-          for (const d of diagnostics) {
-            const prefix =
-              d.severity === "error" ? "Schema error" : "Schema warning";
-            console.warn(`\n[${prefix}] ${file.relativePath}: ${d.message}`);
-          }
-        }
-
-        pendingUpdates.add(file.relativePath);
-        try {
-          await syncer.uploadFile(file);
-        } catch (e) {
-          console.error(
-            `\n[Watcher] Upload failed: ${file.relativePath}: ${e}`,
-          );
-        } finally {
-          pendingUpdates.delete(file.relativePath);
-        }
-      }
-
-      for (const file of removed) {
-        try {
-          await syncer.deleteRemoteFile(file.relativePath);
-        } catch {
-          // ignore
-        }
-      }
-
-      if (removed.length > 0) {
-        sse.broadcast(JSON.stringify({ reload_page: true }));
-      } else if (changed.length > 0) {
-        sse.broadcast(
-          JSON.stringify({ modified: changed.map((f) => f.relativePath) }),
-        );
-      }
-    },
-  );
-
-  // ── HTTP server ───────────────────────────────────────────────────────────
-  const server = http.createServer(async (req, res) => {
-    if (req.url === "/hot-reload") {
-      sse.add(res);
-      return;
-    }
-
-    try {
-      await proxyRequest(req, res, {
-        company: theme.company,
-        themeId: theme.id,
-        reloadMode: opts.reloadMode,
-        pendingFiles: () =>
-          [...pendingUpdates]
-            .map((p) => themeRoot.file(p))
-            .filter((f) => f.isText)
-            .map((f) => ({
-              relativePath: f.relativePath,
-              read: () => f.read(),
-            })),
-      });
-    } catch (e) {
-      console.error(`[Proxy] ${req.method} ${req.url} → ${e}`);
-      if (!res.headersSent) {
-        res.writeHead(502);
-        res.end("Bad Gateway");
-      }
-    }
-  });
-
-  await new Promise<void>((resolve, reject) => {
-    server.listen(opts.port, opts.host, () => resolve());
-    server.on("error", reject);
-  });
-
-  const address = `http://${opts.host}:${opts.port}`;
-  onReady?.(address);
-
-  // ── Teardown ──────────────────────────────────────────────────────────────
-  return function stop() {
-    sse.close();
-    stopWatcher();
-    server.close();
-  };
-}