@fluid-app/fluid-cli-theme-dev 0.1.2 → 0.1.4

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @fluid-app/fluid-cli-theme-dev@0.1.2 build /home/runner/_work/fluid-mono/fluid-mono/packages/cli/theme-dev
+> @fluid-app/fluid-cli-theme-dev@0.1.4 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
@@ -8,11 +8,9 @@
 ℹ target: node18
 ℹ tsconfig: tsconfig.json
 ℹ Build start
-ℹ dist/index.mjs        38.99 kB │ gzip: 11.20 kB
-ℹ dist/index.mjs.map    86.91 kB │ gzip: 21.69 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: 126.20 kB
-[PLUGIN_TIMINGS] Warning: Your build spent significant time in plugin `rolldown-plugin-dts:generate`. See https://rolldown.rs/options/checks#plugintimings for more details.
-
-✔ Build complete in 4554ms
+ℹ dist/index.mjs         41.47 kB │ gzip: 11.70 kB
+ℹ dist/index.mjs.map    110.82 kB │ gzip: 24.52 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: 152.60 kB
+✔ Build complete in 1219ms

package/README.md

@@ -0,0 +1,100 @@
+# @fluid-app/fluid-cli-theme-dev
+
+Fluid CLI plugin for theme development. Adds `fluid theme` commands for local dev server, push, pull, and scaffolding.
+
+## Installation
+
+```bash
+npm install -g @fluid-app/fluid-cli @fluid-app/fluid-cli-theme-dev
+```
+
+Requires `@fluid-app/fluid-cli` as the core CLI.
+
+## Authentication
+
+Log in before using any theme commands:
+
+```bash
+fluid login
+```
+
+## Commands
+
+### `fluid theme dev`
+
+Start a local dev server that proxies your storefront with hot reload:
+
+```bash
+fluid theme dev
+```
+
+The dev server will:
+
+1. Create (or reuse) a development theme
+2. Upload all local files to the dev theme
+3. Watch for file changes and sync them automatically
+4. Proxy requests to `{company}.fluid.app` with local file overrides
+
+| Flag                       | Default     | Description                               |
+| -------------------------- | ----------- | ----------------------------------------- |
+| `--host <host>`            | `127.0.0.1` | Local server host                         |
+| `--port <port>`            | `9292`      | Local server port                         |
+| `-t, --theme <name-or-id>` | auto        | Use a specific theme instead of dev theme |
+| `--live-reload <mode>`     | `full-page` | Reload mode: `full-page` or `off`         |
+| `--navigate`               | off         | Open browser navigator after start        |
+| `--root <path>`            | `.`         | Theme root directory                      |
+
+### `fluid theme push`
+
+Upload local theme files to a remote theme:
+
+```bash
+fluid theme push                        # Interactive theme selection
+fluid theme push --theme "My Theme"     # By name
+fluid theme push --theme 42             # By ID
+fluid theme push --publish              # Push and publish
+fluid theme push --nodelete             # Keep remote files not present locally
+```
+
+### `fluid theme pull`
+
+Download a remote theme to your local directory:
+
+```bash
+fluid theme pull                        # Interactive theme selection
+fluid theme pull --theme "My Theme"     # By name or ID
+fluid theme pull --nodelete             # Keep local files not present on remote
+```
+
+### `fluid theme init`
+
+Scaffold a new theme from the base template:
+
+```bash
+fluid theme init my-theme
+cd my-theme
+fluid theme dev
+```
+
+### `fluid theme navigate`
+
+Interactively select a route and open it in the browser (requires a running dev server):
+
+```bash
+fluid theme navigate
+```
+
+## Theme Directory Structure
+
+A valid theme directory must contain at least one of: `templates/`, `assets/`, or `config/`.
+
+Use a `.fluidignore` file (same syntax as `.gitignore`) to exclude files from syncing.
+
+## Development
+
+For contributors working in `fluid-mono`:
+
+```bash
+pnpm --filter @fluid-app/fluid-cli-theme-dev build
+node packages/cli/core/dist/bin/fluid.mjs theme --help
+```

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { Command } from "commander";
 import { getAuthToken, readConfig, updateConfig } from "@fluid-app/fluid-cli";
 import { existsSync, mkdirSync, readFileSync, readdirSync, rmSync, statSync, writeFileSync } from "node:fs";
-import { basename, dirname, extname, join, relative, resolve, sep } from "node:path";
+import { basename, dirname, extname, isAbsolute, join, relative, resolve, sep } from "node:path";
 import { createHash } from "node:crypto";
 import http from "node:http";
 import https from "node:https";
@@ -377,7 +377,7 @@ var ThemeRoot = class {
 	}
 	file(pathOrFile) {
 		if (pathOrFile instanceof ThemeFile) return pathOrFile;
-		return new ThemeFile(join(this.root, pathOrFile), this.root);
+		return new ThemeFile(isAbsolute(pathOrFile) ? pathOrFile : join(this.root, pathOrFile), this.root);
 	}
 	glob(dir) {
 		const results = [];
@@ -610,6 +610,92 @@ function watchTheme(root, handler) {
 	return () => watcher.close();
 }
 //#endregion
+//#region ../../api-clients/themes/src/namespaces/v0.ts
+/**
+* List application themes
+* Get all application themes with optional filters
+*
+* @param client - Fetch client instance
+* @param [params] - params
+*/
+async function listApplicationThemes(client, params) {
+	return client.get(`/api/application_themes`, params);
+}
+/**
+* Create an application theme
+*
+*
+* @param client - Fetch client instance
+* @param body - body
+*/
+async function createApplicationTheme(client, body) {
+	return client.post(`/api/application_themes`, body);
+}
+/**
+* Get an application theme
+*
+*
+* @param client - Fetch client instance
+* @param id - id
+* @param [params] - params
+*/
+async function getApplicationTheme(client, id, params) {
+	return client.get(`/api/application_themes/${id}`, params);
+}
+/**
+* Returns available themeables for a given type scoped to the theme's company
+*
+*
+* @param client - Fetch client instance
+* @param id - id
+* @param [params] - params
+*/
+async function getApplicationThemeAvailableThemeables(client, id, params) {
+	return client.get(`/api/application_themes/${id}/available_themeables`, params);
+}
+/**
+* Publishes the theme
+*
+*
+* @param client - Fetch client instance
+* @param id - id
+*/
+async function publishApplicationTheme(client, id) {
+	return client.post(`/api/application_themes/${id}/publish`);
+}
+/**
+* Lists all theme resources
+*
+*
+* @param client - Fetch client instance
+* @param application_theme_id - application_theme_id
+*/
+async function listThemeResources(client, application_theme_id) {
+	return client.get(`/api/application_themes/${application_theme_id}/resources`);
+}
+/**
+* Updates a theme resource
+*
+*
+* @param client - Fetch client instance
+* @param application_theme_id - application_theme_id
+* @param body - body
+*/
+async function updateThemeResource(client, application_theme_id, body) {
+	return client.put(`/api/application_themes/${application_theme_id}/resources`, body);
+}
+/**
+* Deletes a theme resource
+*
+*
+* @param client - Fetch client instance
+* @param application_theme_id - application_theme_id
+* @param body - body
+*/
+async function deleteThemeResource(client, application_theme_id, body) {
+	return client.delete(`/api/application_themes/${application_theme_id}/resources`, { body });
+}
+//#endregion
 //#region src/theme/syncer.ts
 var Syncer = class {
 	checksums = /* @__PURE__ */ new Map();
@@ -619,11 +705,11 @@ var Syncer = class {
 		this.themeRoot = themeRoot;
 	}
 	async fetchChecksums() {
-		const body = await this.api.get(`/api/application_themes/${this.themeId}/resources`);
+		const body = await listThemeResources(this.api, this.themeId);
 		this.updateChecksums(body.application_theme_resources ?? []);
 	}
 	updateChecksums(resources) {
-		for (const r of resources) if (r.key) this.checksums.set(r.key, r.checksum);
+		for (const r of resources) if (r.key && r.checksum) 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) {
@@ -633,14 +719,13 @@ var Syncer = class {
 		return [...this.checksums.keys()];
 	}
 	async uploadFile(file) {
-		const path = `/api/application_themes/${this.themeId}/resources`;
-		if (file.isText) await this.api.put(path, { application_theme_resource: {
+		if (file.isText) await updateThemeResource(this.api, this.themeId, { application_theme_resource: {
 			key: file.relativePath,
 			content: file.read()
 		} });
-		else await this.uploadBinaryFile(file, path);
+		else await this.uploadBinaryFile(file);
 	}
-	async uploadBinaryFile(file, resourcePath) {
+	async uploadBinaryFile(file) {
 		const asset = (await this.api.post("/api/dam/assets", { placeholder_asset: {
 			description: `Uploaded via Fluid CLI: ${file.name}`,
 			mime_type: file.mime.name,
@@ -675,7 +760,7 @@ var Syncer = class {
 		if (ikBody.height) backfillPayload["asset"]["height"] = ikBody.height;
 		if (ikBody.width) backfillPayload["asset"]["width"] = ikBody.width;
 		const backfillBody = await this.api.post("/api/dam/assets/backfill_imagekit", backfillPayload);
-		await this.api.put(resourcePath, { application_theme_resource: {
+		await updateThemeResource(this.api, this.themeId, { application_theme_resource: {
 			key: file.relativePath,
 			dam_asset: {
 				dam_asset_code: backfillBody.asset.code,
@@ -702,13 +787,13 @@ var Syncer = class {
 		}[category] ?? "files"}/${assetCode}`;
 	}
 	async deleteRemoteFile(relativePath) {
-		await this.api.delete(`/api/application_themes/${this.themeId}/resources`, { body: { application_theme_resource: { key: relativePath } } });
+		await deleteThemeResource(this.api, this.themeId, { application_theme_resource: { key: relativePath } });
 		this.checksums.delete(relativePath);
 	}
 	async downloadAll() {
-		const body = await this.api.get(`/api/application_themes/${this.themeId}/resources`);
-		this.updateChecksums(body.application_theme_resources ?? []);
-		return body.application_theme_resources ?? [];
+		const resources = (await listThemeResources(this.api, this.themeId)).application_theme_resources ?? [];
+		this.updateChecksums(resources);
+		return resources;
 	}
 	async downloadBinaryAsset(url) {
 		const resp = await fetch(url);
@@ -767,7 +852,10 @@ var Syncer = class {
 				if (resource.resource_type === "FileResource" && resource.url) {
 					const buf = await this.downloadBinaryAsset(resource.url);
 					file.write(buf);
-				} else if (resource.content !== void 0) file.write(resource.content);
+				} else if (resource.content !== void 0 && resource.content !== null) {
+					const content = typeof resource.content === "string" ? resource.content : JSON.stringify(resource.content);
+					file.write(content);
+				}
 				result.downloaded++;
 			} catch (e) {
 				result.errors.push(`Download ${resource.key}: ${e}`);
@@ -856,7 +944,7 @@ async function startDevServer(api, theme, themeRoot, opts, onReady) {
 //#region src/commands/dev.ts
 async function ensureDevTheme(api, identifier) {
 	if (identifier) {
-		const body = await api.get("/api/application_themes");
+		const body = await listApplicationThemes(api);
 		const found = (body.application_themes ?? []).find((t) => String(t.id) === identifier) ?? (body.application_themes ?? []).find((t) => t.name.toLowerCase() === identifier.toLowerCase());
 		if (!found) {
 			console.error(`Theme not found: ${identifier}`);
@@ -866,17 +954,16 @@ async function ensureDevTheme(api, identifier) {
 	}
 	const { devThemeId } = getPluginState();
 	if (devThemeId) try {
-		const body = await api.get(`/api/application_themes/${devThemeId}`);
+		const body = await getApplicationTheme(api, devThemeId);
 		if (body.application_theme) {
 			console.log(`Using existing dev theme #${devThemeId}`);
 			return body.application_theme;
 		}
 	} catch {}
 	const { hostname } = await import("node:os");
-	const name = `Development (${hostname().split(".")[0] ?? "dev"}-${Math.random().toString(36).slice(2, 8)})`.slice(0, 50);
-	const theme = (await api.post("/api/application_themes", { application_theme: {
-		name,
-		role: "development"
+	const theme = (await createApplicationTheme(api, { application_theme: {
+		name: `Development (${hostname().split(".")[0] ?? "dev"}-${Math.random().toString(36).slice(2, 8)})`.slice(0, 50),
+		status: "development"
 	} })).application_theme;
 	setPluginState({
 		devThemeId: theme.id,
@@ -893,8 +980,18 @@ function createDevCommand() {
 			console.error(`'${opts.root}' 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 company = (await api.get("/api/company/v1/companies/me")).data?.company?.subdomain;
+		if (!company) {
+			console.error("Could not determine company subdomain. Make sure your token is valid.");
+			process.exit(1);
+		}
 		const theme = await ensureDevTheme(api, opts.theme);
 		let stop;
 		const cleanup = () => {
@@ -903,16 +1000,11 @@ function createDevCommand() {
 		};
 		process.on("SIGINT", cleanup);
 		process.on("SIGTERM", cleanup);
-		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);
-		}
 		stop = await startDevServer(api, {
 			id: theme.id,
 			name: theme.name,
-			company: theme.company,
-			editorUrl: theme.editor_url
+			company,
+			editorUrl: theme.editor_url ?? void 0
 		}, themeRoot, {
 			host: opts.host,
 			port,
@@ -929,8 +1021,8 @@ function createDevCommand() {
 //#endregion
 //#region src/commands/push.ts
 async function selectTheme(api) {
-	const themes = (await api.get("/api/application_themes")).application_themes ?? [];
-	if (!themes.length) {
+	const themeList = (await listApplicationThemes(api)).application_themes ?? [];
+	if (!themeList.length) {
 		console.error("No themes found.");
 		process.exit(1);
 	}
@@ -938,7 +1030,7 @@ async function selectTheme(api) {
 		type: "select",
 		name: "id",
 		message: "Select a theme to push to",
-		choices: themes.map((t) => ({
+		choices: themeList.map((t) => ({
 			title: `${t.name} (#${t.id})`,
 			value: t.id
 		}))
@@ -947,11 +1039,11 @@ async function selectTheme(api) {
 		console.error("No theme selected.");
 		process.exit(1);
 	}
-	return themes.find((t) => t.id === id);
+	return themeList.find((t) => t.id === id);
 }
 async function findTheme(api, identifier) {
-	const themes = (await api.get("/api/application_themes")).application_themes ?? [];
-	const found = themes.find((t) => String(t.id) === identifier) ?? themes.find((t) => t.name.toLowerCase() === identifier.toLowerCase());
+	const themeList = (await listApplicationThemes(api)).application_themes ?? [];
+	const found = themeList.find((t) => String(t.id) === identifier) ?? themeList.find((t) => t.name.toLowerCase() === identifier.toLowerCase());
 	if (!found) {
 		console.error(`No theme found with identifier: ${identifier}`);
 		process.exit(1);
@@ -983,7 +1075,7 @@ function createPushCommand() {
 		if (opts.publish) {
 			const pubSpinner = ora("Publishing theme…").start();
 			try {
-				await api.post(`/api/application_themes/${theme.id}/publish`);
+				await publishApplicationTheme(api, theme.id);
 				pubSpinner.succeed("Theme published.");
 			} catch (e) {
 				pubSpinner.fail(`Publish failed: ${e}`);
@@ -994,13 +1086,13 @@ function createPushCommand() {
 //#endregion
 //#region src/commands/pull.ts
 async function selectOrFindTheme(api, identifier) {
-	const themes = (await api.get("/api/application_themes")).application_themes ?? [];
-	if (!themes.length) {
+	const themeList = (await listApplicationThemes(api)).application_themes ?? [];
+	if (!themeList.length) {
 		console.error("No themes found.");
 		process.exit(1);
 	}
 	if (identifier) {
-		const found = themes.find((t) => String(t.id) === identifier) ?? themes.find((t) => t.name.toLowerCase() === identifier.toLowerCase());
+		const found = themeList.find((t) => String(t.id) === identifier) ?? themeList.find((t) => t.name.toLowerCase() === identifier.toLowerCase());
 		if (!found) {
 			console.error(`No theme found with identifier: ${identifier}`);
 			process.exit(1);
@@ -1011,7 +1103,7 @@ async function selectOrFindTheme(api, identifier) {
 		type: "select",
 		name: "id",
 		message: "Select a theme to pull",
-		choices: themes.map((t) => ({
+		choices: themeList.map((t) => ({
 			title: `${t.name} (#${t.id})`,
 			value: t.id
 		}))
@@ -1020,7 +1112,7 @@ async function selectOrFindTheme(api, identifier) {
 		console.error("No theme selected.");
 		process.exit(1);
 	}
-	return themes.find((t) => t.id === id);
+	return themeList.find((t) => t.id === id);
 }
 function createPullCommand() {
 	return new Command("pull").description("Pull a remote theme to your local directory").option("-t, --theme <name-or-id>", "Theme name or ID to pull").option("-n, --nodelete", "Do not delete local files missing on remote").option("--root <path>", "Theme root directory", ".").action(async (opts) => {
@@ -1188,7 +1280,7 @@ function createNavigateCommand() {
 		let path;
 		if (typeof dest === "string") path = dest;
 		else {
-			const resources = (await createApiClient().get(`/api/application_themes/${themeId}/available_themeables`, {
+			const resources = (await getApplicationThemeAvailableThemeables(createApiClient(), themeId, {
 				themeable: dest.resourceType,
 				per_page: 50
 			})).available_themeables ?? [];
@@ -1201,7 +1293,7 @@ function createNavigateCommand() {
 					name: "slug",
 					message: `Select a ${dest.label.toLowerCase()}`,
 					choices: resources.map((r) => ({
-						title: r.title ?? r.slug,
+						title: r.title ?? r.slug ?? "Untitled",
 						value: r.slug
 					}))
 				}, { onCancel });