@fluid-app/fluid-cli-theme-dev 0.1.0

package/src/theme/file.ts

@@ -0,0 +1,68 @@
+import {
+  readFileSync,
+  writeFileSync,
+  mkdirSync,
+  existsSync,
+  statSync,
+} from "node:fs";
+import { extname, basename, relative, dirname } from "node:path";
+import { createHash } from "node:crypto";
+import { mimeTypeFor, type MimeType } from "./mime-type.js";
+
+export class ThemeFile {
+  readonly absolutePath: string;
+  readonly relativePath: string;
+  readonly mime: MimeType;
+
+  constructor(absolutePath: string, root: string) {
+    this.absolutePath = absolutePath;
+    this.relativePath = relative(root, absolutePath);
+    this.mime = mimeTypeFor(extname(absolutePath).toLowerCase());
+  }
+
+  get name(): string {
+    return basename(this.absolutePath);
+  }
+
+  get isText(): boolean {
+    return this.mime.isText;
+  }
+
+  get isLiquid(): boolean {
+    return this.absolutePath.endsWith(".liquid");
+  }
+
+  get isJson(): boolean {
+    return this.absolutePath.endsWith(".json");
+  }
+
+  get exists(): boolean {
+    return existsSync(this.absolutePath);
+  }
+
+  read(): string {
+    return readFileSync(this.absolutePath, "utf-8");
+  }
+
+  readBinary(): Buffer {
+    return readFileSync(this.absolutePath);
+  }
+
+  write(content: string | Buffer): void {
+    mkdirSync(dirname(this.absolutePath), { recursive: true });
+    if (typeof content === "string") {
+      writeFileSync(this.absolutePath, content, "utf-8");
+    } else {
+      writeFileSync(this.absolutePath, content);
+    }
+  }
+
+  checksum(): string {
+    const content = this.isText ? this.read() : this.readBinary();
+    return createHash("sha256").update(content).digest("hex");
+  }
+
+  size(): number {
+    return statSync(this.absolutePath).size;
+  }
+}

package/src/theme/fluid-ignore.ts

@@ -0,0 +1,64 @@
+import { readFileSync, existsSync } from "node:fs";
+import { join, basename } from "node:path";
+
+const IGNORE_FILE = ".fluidignore";
+
+interface Pattern {
+  negated: boolean;
+  pattern: string;
+}
+
+export class FluidIgnore {
+  private patterns: Pattern[];
+
+  constructor(root: string) {
+    this.patterns = this.parse(join(root, IGNORE_FILE));
+  }
+
+  ignore(relativePath: string): boolean {
+    let result = false;
+    for (const { negated, pattern } of this.patterns) {
+      if (this.match(pattern, relativePath)) {
+        result = !negated;
+      }
+    }
+    return result;
+  }
+
+  private parse(filePath: string): Pattern[] {
+    if (!existsSync(filePath)) return [];
+    return readFileSync(filePath, "utf-8")
+      .split("\n")
+      .map((l) => l.trim())
+      .filter((l) => l && !l.startsWith("#"))
+      .map((l) => {
+        const negated = l.startsWith("!");
+        let pattern = negated ? l.slice(1) : l;
+        if (pattern.startsWith("/")) pattern = pattern.slice(1);
+        return { negated, pattern };
+      });
+  }
+
+  private match(pattern: string, path: string): boolean {
+    if (pattern.endsWith("/")) {
+      return path.startsWith(pattern) || path === pattern.slice(0, -1);
+    }
+    if (pattern.includes("/")) {
+      return this.fnmatch(pattern, path);
+    }
+    return this.fnmatch(pattern, path) || this.fnmatch(pattern, basename(path));
+  }
+
+  private fnmatch(pattern: string, str: string): boolean {
+    const re = pattern
+      .split("**")
+      .map((p) =>
+        p
+          .replace(/[.+^${}()|[\]\\]/g, "\\$&")
+          .replace(/\*/g, "[^/]*")
+          .replace(/\?/g, "[^/]"),
+      )
+      .join(".*");
+    return new RegExp(`^${re}$`).test(str);
+  }
+}

package/src/theme/mime-type.ts

@@ -0,0 +1,45 @@
+const TEXT_TYPES: Record<string, string> = {
+  ".liquid": "text/x-liquid",
+  ".json": "application/json",
+  ".css": "text/css",
+  ".js": "application/javascript",
+  ".html": "text/html",
+  ".txt": "text/plain",
+  ".md": "text/markdown",
+  ".svg": "image/svg+xml",
+};
+
+const BINARY_TYPES: Record<string, string> = {
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".gif": "image/gif",
+  ".webp": "image/webp",
+  ".ico": "image/x-icon",
+  ".woff": "font/woff",
+  ".woff2": "font/woff2",
+  ".ttf": "font/ttf",
+  ".eot": "application/vnd.ms-fontobject",
+  ".otf": "font/otf",
+  ".pdf": "application/pdf",
+  ".zip": "application/zip",
+  ".mp4": "video/mp4",
+  ".webm": "video/webm",
+  ".mp3": "audio/mpeg",
+  ".wav": "audio/wav",
+};
+
+export interface MimeType {
+  name: string;
+  isText: boolean;
+}
+
+export function mimeTypeFor(ext: string): MimeType {
+  const text = TEXT_TYPES[ext];
+  if (text) return { name: text, isText: true };
+
+  const binary = BINARY_TYPES[ext];
+  if (binary) return { name: binary, isText: false };
+
+  return { name: "application/octet-stream", isText: false };
+}

package/src/theme/root.ts

@@ -0,0 +1,51 @@
+import { readdirSync, statSync } from "node:fs";
+import { join, resolve } from "node:path";
+import { ThemeFile } from "./file.js";
+import { FluidIgnore } from "./fluid-ignore.js";
+
+const THEME_MARKERS = ["templates", "assets", "config"];
+
+export class ThemeRoot {
+  readonly root: string;
+  readonly ignore: FluidIgnore;
+
+  constructor(root: string) {
+    this.root = resolve(root);
+    this.ignore = new FluidIgnore(this.root);
+  }
+
+  isValid(): boolean {
+    return THEME_MARKERS.some((m) => {
+      try {
+        return statSync(join(this.root, m)).isDirectory();
+      } catch {
+        return false;
+      }
+    });
+  }
+
+  files(): ThemeFile[] {
+    return this.glob(this.root).filter(
+      (f) => !this.ignore.ignore(f.relativePath),
+    );
+  }
+
+  file(pathOrFile: string | ThemeFile): ThemeFile {
+    if (pathOrFile instanceof ThemeFile) return pathOrFile;
+    return new ThemeFile(join(this.root, pathOrFile), this.root);
+  }
+
+  private glob(dir: string): ThemeFile[] {
+    const results: ThemeFile[] = [];
+    for (const entry of readdirSync(dir, { withFileTypes: true })) {
+      if (entry.name.startsWith(".")) continue;
+      const full = join(dir, entry.name);
+      if (entry.isDirectory()) {
+        results.push(...this.glob(full));
+      } else if (entry.isFile()) {
+        results.push(new ThemeFile(full, this.root));
+      }
+    }
+    return results;
+  }
+}

package/src/theme/syncer.ts

@@ -0,0 +1,310 @@
+import { sep } from "node:path";
+import type { ApiClient } from "../api.js";
+import type { ThemeFile } from "./file.js";
+import type { ThemeRoot } from "./root.js";
+
+export interface RemoteResource {
+  key: string;
+  checksum: string;
+  content?: string;
+  url?: string;
+  resource_type: string;
+}
+
+export interface SyncResult {
+  uploaded: number;
+  downloaded: number;
+  deleted: number;
+  errors: string[];
+}
+
+export class Syncer {
+  private checksums = new Map<string, string>();
+
+  constructor(
+    private api: ApiClient,
+    private themeId: number,
+    private themeRoot: ThemeRoot,
+  ) {}
+
+  // ─── Checksum Management ──────────────────────────────────────────────────
+
+  async fetchChecksums(): Promise<void> {
+    const body = await this.api.get<{
+      application_theme_resources: RemoteResource[];
+    }>(`/api/application_themes/${this.themeId}/resources`);
+    this.updateChecksums(body.application_theme_resources ?? []);
+  }
+
+  private updateChecksums(resources: RemoteResource[]): void {
+    for (const r of resources) {
+      if (r.key) this.checksums.set(r.key, r.checksum);
+    }
+    for (const key of this.checksums.keys()) {
+      if (this.checksums.has(`${key}.liquid`)) this.checksums.delete(key);
+    }
+  }
+
+  hasChanged(file: ThemeFile): boolean {
+    return file.checksum() !== this.checksums.get(file.relativePath);
+  }
+
+  remoteKeys(): string[] {
+    return [...this.checksums.keys()];
+  }
+
+  // ─── Upload ───────────────────────────────────────────────────────────────
+
+  async uploadFile(file: ThemeFile): Promise<void> {
+    const path = `/api/application_themes/${this.themeId}/resources`;
+    if (file.isText) {
+      await this.api.put(path, {
+        application_theme_resource: {
+          key: file.relativePath,
+          content: file.read(),
+        },
+      });
+    } else {
+      await this.uploadBinaryFile(file, path);
+    }
+  }
+
+  private async uploadBinaryFile(
+    file: ThemeFile,
+    resourcePath: string,
+  ): Promise<void> {
+    // Step 1: Create DAM placeholder
+    const placeholderBody = await this.api.post<{
+      asset: { id: number; canonical_path: string };
+    }>("/api/dam/assets", {
+      placeholder_asset: {
+        description: `Uploaded via Fluid CLI: ${file.name}`,
+        mime_type: file.mime.name,
+        name: file.name,
+      },
+    });
+    const asset = placeholderBody.asset;
+
+    // Step 2: Get ImageKit auth token
+    const authBody = await this.api.post<{
+      token: string;
+      signature: string;
+      expire: number;
+    }>("/api/dam/assets/imagekit_auth", {});
+
+    // Step 3: Upload to ImageKit via multipart
+    const folder = this.canonicalPathToImageKitFolder(asset.canonical_path);
+    const formData = new FormData();
+    const blob = new Blob([file.readBinary() as unknown as ArrayBuffer], {
+      type: file.mime.name,
+    });
+    formData.append("file", blob, file.name);
+    formData.append("token", authBody.token);
+    formData.append("signature", authBody.signature);
+    formData.append("expire", String(authBody.expire));
+    formData.append("folder", folder);
+    formData.append("fileName", file.name);
+    formData.append("publicKey", "public_j7s4Ih9ETh/OCp41mVQH7tlXBdU=");
+
+    const ikResp = await fetch(
+      "https://upload.imagekit.io/api/v1/files/upload",
+      {
+        method: "POST",
+        body: formData,
+      },
+    );
+    if (!ikResp.ok) throw new Error(`ImageKit upload failed: ${ikResp.status}`);
+    const ikBody = (await ikResp.json()) as {
+      fileId: string;
+      url: string;
+      thumbnailUrl: string;
+      size: number;
+      height?: number;
+      width?: number;
+    };
+
+    // Step 4: Backfill DAM asset
+    const backfillPayload: Record<string, unknown> = {
+      asset: {
+        id: asset.id,
+        imagekit_file_id: ikBody.fileId,
+        imagekit_url: ikBody.url,
+        mime_type: file.mime.name,
+        name: file.name,
+        file_size: ikBody.size,
+        expected_path: asset.canonical_path,
+      },
+    };
+    if (ikBody.height)
+      (backfillPayload["asset"] as Record<string, unknown>)["height"] =
+        ikBody.height;
+    if (ikBody.width)
+      (backfillPayload["asset"] as Record<string, unknown>)["width"] =
+        ikBody.width;
+
+    const backfillBody = await this.api.post<{
+      asset: { code: string; default_variant_url: string };
+    }>("/api/dam/assets/backfill_imagekit", backfillPayload);
+
+    // Step 5: Associate with theme resource
+    await this.api.put(resourcePath, {
+      application_theme_resource: {
+        key: file.relativePath,
+        dam_asset: {
+          dam_asset_code: backfillBody.asset.code,
+          content_type: file.mime.name,
+          content_size: ikBody.size,
+          filename: file.name,
+          handle: backfillBody.asset.code,
+          url: backfillBody.asset.default_variant_url,
+          preview_image_url: ikBody.thumbnailUrl,
+        },
+      },
+    });
+  }
+
+  private canonicalPathToImageKitFolder(canonicalPath: string): string {
+    const parts = canonicalPath.split(".");
+    const companyId = parts[0] ?? "unknown";
+    const category = parts[1] ?? "files";
+    const assetCode = parts[2] ?? "unknown";
+    const folderMap: Record<string, string> = {
+      images: "images",
+      videos: "videos",
+      audio: "audio",
+      documents: "documents",
+      files: "files",
+    };
+    return `${companyId}/${folderMap[category] ?? "files"}/${assetCode}`;
+  }
+
+  // ─── Delete ───────────────────────────────────────────────────────────────
+
+  async deleteRemoteFile(relativePath: string): Promise<void> {
+    await this.api.delete(`/api/application_themes/${this.themeId}/resources`, {
+      body: { application_theme_resource: { key: relativePath } },
+    });
+    this.checksums.delete(relativePath);
+  }
+
+  // ─── Download ─────────────────────────────────────────────────────────────
+
+  async downloadAll(): Promise<RemoteResource[]> {
+    const body = await this.api.get<{
+      application_theme_resources: RemoteResource[];
+    }>(`/api/application_themes/${this.themeId}/resources`);
+    this.updateChecksums(body.application_theme_resources ?? []);
+    return body.application_theme_resources ?? [];
+  }
+
+  async downloadBinaryAsset(url: string): Promise<Buffer> {
+    const resp = await fetch(url);
+    if (!resp.ok) throw new Error(`Failed to download asset: ${resp.status}`);
+    return Buffer.from(await resp.arrayBuffer());
+  }
+
+  // ─── Full Upload ──────────────────────────────────────────────────────────
+
+  async uploadTheme(
+    opts: {
+      delete?: boolean;
+      onProgress?: (done: number, total: number) => void;
+    } = {},
+  ): Promise<SyncResult> {
+    await this.fetchChecksums();
+
+    const localFiles = this.themeRoot.files();
+    const result: SyncResult = {
+      uploaded: 0,
+      deleted: 0,
+      downloaded: 0,
+      errors: [],
+    };
+
+    const toUpload = localFiles.filter((f) => f.exists && this.hasChanged(f));
+    let done = 0;
+    for (const file of toUpload) {
+      try {
+        await this.uploadFile(file);
+        result.uploaded++;
+      } catch (e) {
+        result.errors.push(`Upload ${file.relativePath}: ${e}`);
+      }
+      opts.onProgress?.(++done, toUpload.length);
+    }
+
+    if (opts.delete) {
+      const localPaths = new Set(localFiles.map((f) => f.relativePath));
+      const toDelete = this.remoteKeys().filter((k) => !localPaths.has(k));
+      for (const key of toDelete) {
+        try {
+          await this.deleteRemoteFile(key);
+          result.deleted++;
+        } catch (e) {
+          result.errors.push(`Delete ${key}: ${e}`);
+        }
+      }
+    }
+
+    return result;
+  }
+
+  // ─── Full Download ────────────────────────────────────────────────────────
+
+  async downloadTheme(
+    opts: {
+      delete?: boolean;
+      onProgress?: (done: number, total: number) => void;
+    } = {},
+  ): Promise<SyncResult> {
+    const resources = await this.downloadAll();
+    const result: SyncResult = {
+      uploaded: 0,
+      deleted: 0,
+      downloaded: 0,
+      errors: [],
+    };
+
+    let done = 0;
+    for (const resource of resources) {
+      const file = this.themeRoot.file(resource.key);
+
+      // Guard against path traversal from malicious API responses
+      if (!file.absolutePath.startsWith(this.themeRoot.root + sep)) {
+        result.errors.push(`Download ${resource.key}: path traversal detected`);
+        opts.onProgress?.(++done, resources.length);
+        continue;
+      }
+
+      try {
+        if (resource.resource_type === "FileResource" && resource.url) {
+          const buf = await this.downloadBinaryAsset(resource.url);
+          file.write(buf);
+        } else if (resource.content !== undefined) {
+          file.write(resource.content);
+        }
+        result.downloaded++;
+      } catch (e) {
+        result.errors.push(`Download ${resource.key}: ${e}`);
+      }
+      opts.onProgress?.(++done, resources.length);
+    }
+
+    if (opts.delete) {
+      const remoteKeys = new Set(resources.map((r) => r.key));
+      for (const file of this.themeRoot.files()) {
+        if (!remoteKeys.has(file.relativePath)) {
+          try {
+            const { unlinkSync } = await import("node:fs");
+            unlinkSync(file.absolutePath);
+            result.deleted++;
+          } catch {
+            // ignore
+          }
+        }
+      }
+    }
+
+    return result;
+  }
+}

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@fluid-app/typescript-config/base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "incremental": false
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/tsdown.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from "tsdown";
+
+export default defineConfig({
+  entry: { index: "src/index.ts" },
+  format: ["esm"],
+  dts: { eager: true },
+  clean: true,
+  target: "node18",
+  deps: {
+    neverBundle: [
+      "@fluid-app/fluid-cli",
+      "commander",
+      "chokidar",
+      "open",
+      "ora",
+      "prompts",
+    ],
+  },
+});