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

package/package.json

@@ -1,7 +1,11 @@
 {
   "name": "@fluid-app/fluid-cli-theme-dev",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "description": "Fluid CLI plugin for theme developer workflows — dev server, push, pull, init",
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "type": "module",
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
@@ -34,10 +38,10 @@
     "jest": "^29.7.0",
     "tsdown": "^0.21.0",
     "typescript": "^5",
-    "@fluid-app/api-client-core": "0.1.0",
-    "@fluid-app/themes-api-client": "0.1.0",
     "@fluid-app/theme-schema": "0.1.0",
-    "@fluid-app/typescript-config": "0.0.0"
+    "@fluid-app/themes-api-client": "0.1.0",
+    "@fluid-app/typescript-config": "0.0.0",
+    "@fluid-app/api-client-core": "0.1.0"
   },
   "engines": {
     "node": ">=18.0.0"

package/.turbo/turbo-build.log

@@ -1,16 +0,0 @@
-
-> @fluid-app/fluid-cli-theme-dev@0.1.21 build /home/runner/_work/fluid-mono/fluid-mono/packages/cli/theme-dev
-> tsdown
-
-ℹ tsdown v0.21.0 powered by rolldown v1.0.0-rc.7
-ℹ config file: /home/runner/_work/fluid-mono/fluid-mono/packages/cli/theme-dev/tsdown.config.ts 
-ℹ entry: src/index.ts
-ℹ target: node24
-ℹ tsconfig: tsconfig.json
-ℹ Build start
-ℹ dist/index.mjs         76.86 kB │ gzip: 21.05 kB
-ℹ dist/index.mjs.map    196.02 kB │ gzip: 46.38 kB
-ℹ dist/index.d.mts.map    0.11 kB │ gzip:  0.12 kB
-ℹ dist/index.d.mts        0.19 kB │ gzip:  0.16 kB
-ℹ 4 files, total: 273.18 kB
-✔ Build complete in 1315ms

package/.turbo/turbo-typecheck.log

@@ -1,4 +0,0 @@
-
-> @fluid-app/fluid-cli-theme-dev@0.1.21 typecheck /home/runner/_work/fluid-mono/fluid-mono/packages/cli/theme-dev
-> tsc --noEmit
-

package/jest.config.cjs

@@ -1,21 +0,0 @@
-module.exports = {
-  testEnvironment: "node",
-  testMatch: ["**/src/**/__tests__/**/*.test.ts"],
-  transform: {
-    "^.+\\.(t|j)sx?$": [
-      "@swc/jest",
-      {
-        module: {
-          type: "commonjs",
-        },
-      },
-    ],
-  },
-  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
-  moduleNameMapper: {
-    // The real package only ships ESM, which Jest can't resolve in CJS mode;
-    // map it to a stateful in-memory mock for plugin-state tests.
-    "^@fluid-app/fluid-cli$": "<rootDir>/jest.mocks/fluid-cli.ts",
-    "^(\\.{1,2}/.*)\\.js$": "$1",
-  },
-};

package/jest.mocks/fluid-cli.ts

@@ -1,33 +0,0 @@
-/**
- * Jest mock for @fluid-app/fluid-cli.
- *
- * The real package only exports ESM (.mjs), which Jest can't resolve in CJS
- * mode. plugin-state.ts only uses `readConfig`/`updateConfig`, so this mock
- * backs them with an in-memory config. Tests seed/reset state through the
- * normal `updateConfig` surface, so no test-only exports are needed.
- */
-
-interface FakeConfig {
-  activeProfile: string | null;
-  profiles: Record<string, unknown>;
-  plugins: Record<string, unknown>;
-  enabledPlugins: string[] | null;
-}
-
-let config: FakeConfig = {
-  activeProfile: null,
-  profiles: {},
-  plugins: {},
-  enabledPlugins: null,
-};
-
-export function readConfig(): FakeConfig {
-  return config;
-}
-
-export function updateConfig(
-  updater: (config: FakeConfig) => FakeConfig,
-): FakeConfig {
-  config = updater(config);
-  return config;
-}

package/src/__tests__/plugin-state.test.ts

@@ -1,186 +0,0 @@
-import { existsSync } from "node:fs";
-import {
-  readConfig,
-  updateConfig,
-  type FluidConfig,
-} from "@fluid-app/fluid-cli";
-import {
-  devThemeKey,
-  getDevTheme,
-  setDevTheme,
-  clearDevTheme,
-  setLastDevThemeId,
-  getLastDevThemeId,
-} from "../plugin-state.js";
-
-// `@fluid-app/fluid-cli` is mapped to an in-memory mock (jest.mocks/fluid-cli.ts)
-// so these helpers never touch the real ~/.fluid/config.json. State is seeded
-// and reset through the normal `updateConfig` surface.
-jest.mock("node:fs", () => ({ existsSync: jest.fn() }));
-const existsSyncMock = existsSync as unknown as jest.Mock;
-
-const PLUGIN_KEY = "theme-dev";
-
-function freshConfig(): FluidConfig {
-  return {
-    activeProfile: null,
-    profiles: {},
-    plugins: {},
-    enabledPlugins: null,
-  };
-}
-
-function setPluginState(state: Record<string, unknown>): void {
-  updateConfig((config) => ({
-    ...config,
-    plugins: { ...config.plugins, [PLUGIN_KEY]: state },
-  }));
-}
-
-function pluginState(): Record<string, unknown> {
-  return readConfig().plugins[PLUGIN_KEY] as Record<string, unknown>;
-}
-
-beforeEach(() => {
-  updateConfig(() => freshConfig());
-  // Default: every stored project directory still exists (no pruning).
-  existsSyncMock.mockReset();
-  existsSyncMock.mockReturnValue(true);
-});
-
-describe("devThemeKey", () => {
-  it("combines company and theme root", () => {
-    expect(devThemeKey("acme", "/themes/store")).toBe("acme:/themes/store");
-  });
-
-  it("falls back to 'default' when company is undefined", () => {
-    expect(devThemeKey(undefined, "/themes/store")).toBe(
-      "default:/themes/store",
-    );
-  });
-});
-
-describe("setDevTheme / getDevTheme", () => {
-  it("stores and retrieves a dev theme per key", () => {
-    setDevTheme("acme:/a", { id: 1, name: "A" });
-    expect(getDevTheme("acme:/a")).toEqual({ id: 1, name: "A" });
-  });
-
-  it("isolates dev themes across keys", () => {
-    setDevTheme("acme:/a", { id: 1, name: "A" });
-    setDevTheme("acme:/b", { id: 2, name: "B" });
-    expect(getDevTheme("acme:/a")).toEqual({ id: 1, name: "A" });
-    expect(getDevTheme("acme:/b")).toEqual({ id: 2, name: "B" });
-  });
-
-  it("returns undefined for an unknown key", () => {
-    expect(getDevTheme("acme:/missing")).toBeUndefined();
-  });
-
-  it("marks the most recently stored theme as lastDevThemeId", () => {
-    setDevTheme("acme:/a", { id: 1, name: "A" });
-    setDevTheme("acme:/b", { id: 2, name: "B" });
-    expect(getLastDevThemeId()).toBe(2);
-  });
-});
-
-describe("clearDevTheme", () => {
-  it("removes only the targeted key", () => {
-    setDevTheme("acme:/a", { id: 1, name: "A" });
-    setDevTheme("acme:/b", { id: 2, name: "B" });
-    clearDevTheme("acme:/a");
-    expect(getDevTheme("acme:/a")).toBeUndefined();
-    expect(getDevTheme("acme:/b")).toEqual({ id: 2, name: "B" });
-  });
-
-  it("is a no-op for an unknown key", () => {
-    setDevTheme("acme:/a", { id: 1, name: "A" });
-    clearDevTheme("acme:/missing");
-    expect(getDevTheme("acme:/a")).toEqual({ id: 1, name: "A" });
-  });
-
-  it("clears lastDevThemeId when it pointed at the removed theme", () => {
-    setDevTheme("acme:/a", { id: 1, name: "A" });
-    expect(getLastDevThemeId()).toBe(1);
-    clearDevTheme("acme:/a");
-    expect(getLastDevThemeId()).toBeUndefined();
-  });
-
-  it("leaves lastDevThemeId when it points at a different theme", () => {
-    setDevTheme("acme:/a", { id: 1, name: "A" });
-    setDevTheme("acme:/b", { id: 2, name: "B" });
-    clearDevTheme("acme:/a"); // most-recent is /b (id 2)
-    expect(getLastDevThemeId()).toBe(2);
-  });
-});
-
-describe("devThemes map stays bounded", () => {
-  it("prunes entries whose theme directory no longer exists on the next write", () => {
-    setDevTheme("acme:/a", { id: 1, name: "A" });
-    setDevTheme("acme:/b", { id: 2, name: "B" });
-
-    // /a is deleted; /b and the new /c still exist.
-    existsSyncMock.mockImplementation((p: string) => p !== "/a");
-    setDevTheme("acme:/c", { id: 3, name: "C" });
-
-    expect(getDevTheme("acme:/a")).toBeUndefined(); // pruned
-    expect(getDevTheme("acme:/b")).toEqual({ id: 2, name: "B" });
-    expect(getDevTheme("acme:/c")).toEqual({ id: 3, name: "C" });
-    expect(
-      Object.keys(pluginState()["devThemes"] as Record<string, unknown>),
-    ).toEqual(["acme:/b", "acme:/c"]);
-  });
-
-  it("keeps the entry being written even if its own directory check fails", () => {
-    existsSyncMock.mockReturnValue(false);
-    setDevTheme("acme:/a", { id: 1, name: "A" });
-    expect(getDevTheme("acme:/a")).toEqual({ id: 1, name: "A" });
-  });
-});
-
-describe("setLastDevThemeId", () => {
-  it("updates the navigate pointer without recording a dev theme", () => {
-    setLastDevThemeId(123);
-    expect(getLastDevThemeId()).toBe(123);
-    expect(getDevTheme("acme:/a")).toBeUndefined();
-  });
-});
-
-describe("legacy migration", () => {
-  it("adopts a legacy global devThemeId for the first requesting key, then clears it", () => {
-    setPluginState({ devThemeId: 99, devThemeName: "Legacy" });
-
-    expect(getDevTheme("acme:/a")).toEqual({ id: 99, name: "Legacy" });
-
-    // Legacy fields are cleared so a second project can't adopt the same theme.
-    const state = pluginState();
-    expect(state["devThemeId"]).toBeUndefined();
-    expect(state["devThemeName"]).toBeUndefined();
-    expect(getDevTheme("acme:/b")).toBeUndefined();
-    expect(getLastDevThemeId()).toBe(99);
-  });
-
-  it("synthesizes a name when the legacy name is absent", () => {
-    setPluginState({ devThemeId: 42 });
-    expect(getDevTheme("acme:/a")).toEqual({ id: 42, name: "Development #42" });
-  });
-
-  it("prefers an explicit per-key entry over the legacy id", () => {
-    setPluginState({
-      devThemeId: 99,
-      devThemes: { "acme:/a": { id: 7, name: "Real" } },
-    });
-    expect(getDevTheme("acme:/a")).toEqual({ id: 7, name: "Real" });
-  });
-});
-
-describe("getLastDevThemeId", () => {
-  it("falls back to the legacy id before any per-project run", () => {
-    setPluginState({ devThemeId: 5 });
-    expect(getLastDevThemeId()).toBe(5);
-  });
-
-  it("returns undefined when nothing is stored", () => {
-    expect(getLastDevThemeId()).toBeUndefined();
-  });
-});

package/src/api.ts

@@ -1,28 +0,0 @@
-import {
-  createFetchClient,
-  type FetchClient,
-} from "@fluid-app/api-client-core";
-import { getAuthToken } from "@fluid-app/fluid-cli";
-
-export type ApiClient = FetchClient;
-
-/** Base URL for all API calls. Set FLUID_API_BASE to route through a BFF. */
-function getApiBase(): string {
-  return process.env["FLUID_API_BASE"] ?? "https://api.fluid.app";
-}
-
-export function createApiClient(tokenOverride?: string): ApiClient {
-  return createFetchClient({
-    baseUrl: getApiBase(),
-    getAuthToken: () => tokenOverride ?? getAuthToken() ?? null,
-  });
-}
-
-export function requireToken(): string {
-  const token = getAuthToken();
-  if (!token) {
-    console.error("Not logged in. Run `fluid login` first.");
-    process.exit(1);
-  }
-  return token;
-}

package/src/commands/dev.ts

@@ -1,186 +0,0 @@
-import { Command } from "commander";
-import { requireToken, createApiClient } from "../api.js";
-import { readThemeConfig } from "../theme-config.js";
-import {
-  devThemeKey,
-  getDevTheme,
-  setDevTheme,
-  setLastDevThemeId,
-  clearDevTheme,
-} from "../plugin-state.js";
-import { ThemeRoot } from "../theme/root.js";
-import { startDevServer } from "../theme/dev-server/index.js";
-import { themes } from "@fluid-app/themes-api-client";
-import { findTheme, type ApplicationTheme } from "../theme-picker.js";
-import { findWorkspace, resolveThemeRootFromCwd } from "../workspace.js";
-
-interface CompanyMe {
-  data: { company: { subdomain?: string; name?: string } };
-}
-
-async function ensureDevTheme(
-  api: ReturnType<typeof createApiClient>,
-  projectKey: string,
-  identifier?: string,
-): Promise<ApplicationTheme> {
-  if (identifier) {
-    const theme = await findTheme(api, identifier);
-    // Keep `navigate` pointed at whatever the dev server is actually serving.
-    setLastDevThemeId(theme.id);
-    return theme;
-  }
-
-  // Reuse this project's stored dev theme if it still exists and is still a
-  // development theme (a published/promoted theme must not be edited in place).
-  const stored = getDevTheme(projectKey);
-  if (stored) {
-    try {
-      const body = await themes.getApplicationTheme(api, stored.id);
-      const existing = body.application_theme;
-      if (existing && existing.status === "development") {
-        console.log(`Using existing dev theme #${existing.id}`);
-        // Refresh the stored name and mark it most-recent for `navigate`.
-        setDevTheme(projectKey, { id: existing.id, name: existing.name });
-        return existing;
-      }
-    } catch {
-      // Theme no longer exists — fall through to create a new one.
-    }
-    // Stored theme is gone or no longer a dev theme; forget it.
-    clearDevTheme(projectKey);
-  }
-
-  // Create a new development theme
-  const { hostname } = await import("node:os");
-  const host = hostname().split(".")[0] ?? "dev";
-  const name =
-    `Development (${host}-${Math.random().toString(36).slice(2, 8)})`.slice(
-      0,
-      50,
-    );
-
-  const body = await themes.createApplicationTheme(api, {
-    application_theme: { name, status: "development" },
-  });
-  const theme = body.application_theme;
-  setDevTheme(projectKey, { id: theme.id, name: theme.name });
-  console.log(`Created dev theme: ${theme.name} (#${theme.id})`);
-  return theme;
-}
-
-export function createDevCommand(): Command {
-  return new Command("dev")
-    .description("Start the theme dev server with hot reload")
-    .option("--host <host>", "Local server host", "127.0.0.1")
-    .option("--port <port>", "Local server port", "9292")
-    .option(
-      "-t, --theme <name-or-id>",
-      "Use an existing theme instead of dev theme",
-    )
-    .option("-f, --force", "Skip schema validation on upload")
-    .option("--live-reload <mode>", "Reload mode: full-page | off", "full-page")
-    .option("--navigate", "Open browser navigator after server starts")
-    .option("--root <path>", "Theme root directory", ".")
-    .action(
-      async (opts: {
-        host: string;
-        port: string;
-        theme?: string;
-        force?: boolean;
-        liveReload: string;
-        navigate?: 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 port = Number(opts.port);
-        if (!Number.isInteger(port) || port < 1 || port > 65535) {
-          console.error(
-            `Invalid port: '${opts.port}'. Must be an integer between 1 and 65535.`,
-          );
-          process.exit(1);
-        }
-
-        const reloadMode = opts.liveReload === "off" ? "off" : "full-page";
-        const api = createApiClient();
-        const config = readThemeConfig(themeRoot.root);
-
-        // Use company from .fluid-theme.json if available, otherwise fetch
-        let company: string;
-        if (config?.company) {
-          company = config.company;
-        } else {
-          const companyRes = await api.get<CompanyMe>(
-            "/api/company/v1/companies/me",
-          );
-          company = companyRes.data?.company?.subdomain ?? "";
-          if (!company) {
-            console.error(
-              "Could not determine company subdomain. Make sure your token is valid.",
-            );
-            process.exit(1);
-          }
-        }
-
-        // Always iterate on an isolated dev theme: reuse the stored one or
-        // create a fresh `development` theme. `--theme` is the explicit
-        // escape hatch for targeting an existing theme. We deliberately do NOT
-        // fall back to `.fluid-theme.json`'s themeId — that points at whatever
-        // was pulled (often the active/production theme), and the dev server's
-        // `delete: true` sync would overwrite it in place.
-        const projectKey = devThemeKey(company, themeRoot.root);
-        const theme = opts.theme
-          ? await ensureDevTheme(api, projectKey, opts.theme)
-          : await ensureDevTheme(api, projectKey);
-        const editorUrl = `https://admin.fluid.app/themes/${theme.id}/editor`;
-
-        let stop: (() => void) | undefined;
-
-        const cleanup = () => {
-          stop?.();
-          process.exit(0);
-        };
-        process.on("SIGINT", cleanup);
-        process.on("SIGTERM", cleanup);
-
-        stop = await startDevServer(
-          api,
-          {
-            id: theme.id,
-            name: theme.name,
-            company,
-            editorUrl,
-          },
-          themeRoot,
-          { host: opts.host, port, reloadMode, validate: !opts.force },
-          (address) => {
-            console.log(`\n  Dev server: ${address}`);
-            console.log(`  Web editor: ${editorUrl}`);
-            console.log("\n  Watching for file changes…\n");
-
-            if (opts.navigate) {
-              import("open").then((m) => m.default(`${address}/home`));
-            }
-          },
-        );
-
-        // Keep process alive
-        await new Promise(() => {});
-      },
-    );
-}

package/src/commands/init.ts

@@ -1,51 +0,0 @@
-import { Command } from "commander";
-import { execFileSync } from "node:child_process";
-import { rmSync, existsSync } from "node:fs";
-import { join } from "node:path";
-import prompts from "prompts";
-
-const DEFAULT_CLONE_URL = "git@github.com:fluid-commerce/base-theme.git";
-
-const SAFE_NAME_RE = /^[a-zA-Z0-9_][a-zA-Z0-9._-]*$/;
-
-export function createInitCommand(): Command {
-  return new Command("init")
-    .description("Initialize a new theme by cloning the base theme")
-    .argument("[name]", "Directory name for the new theme")
-    .option("-u, --clone-url <url>", "Git URL to clone from", DEFAULT_CLONE_URL)
-    .action(async (name: string | undefined, opts: { cloneUrl: string }) => {
-      if (!name) {
-        const res = await prompts(
-          {
-            type: "text",
-            name: "name",
-            message: "Theme name",
-          },
-          { onCancel: () => process.exit(130) },
-        );
-        name = res.name as string;
-        if (!name) {
-          console.error("No name provided.");
-          process.exit(1);
-        }
-      }
-
-      if (!SAFE_NAME_RE.test(name)) {
-        console.error(
-          `Invalid theme name: '${name}'. Use only letters, numbers, hyphens, underscores, and dots.`,
-        );
-        process.exit(1);
-      }
-
-      console.log(`Cloning theme from ${opts.cloneUrl} into ${name}…`);
-      execFileSync("git", ["clone", opts.cloneUrl, name], { stdio: "inherit" });
-
-      for (const dir of [".git", ".github"]) {
-        const path = join(name, dir);
-        if (existsSync(path)) rmSync(path, { recursive: true, force: true });
-      }
-
-      console.log(`\nTheme initialized in ./${name}`);
-      console.log(`Next steps:\n  cd ${name}\n  fluid theme push`);
-    });
-}