@jxsuite/studio 0.35.0 → 0.37.0

package/src/platforms/devserver.ts

@@ -9,6 +9,7 @@
  */
 
 import { streamImport } from "../services/import-client";
+import type { WsCollabConnection } from "@jxsuite/collab/client";
 import type { ProjectConfig } from "@jxsuite/schema/types";
 import type {
   DirEntry,
@@ -46,6 +47,13 @@ interface SiteEntry {
  */
 export function createDevServerPlatform() {
   let _projectRoot = "";
+  /** Lazy /__studio/collab capability probe (null = not asked yet). */
+  let _collabProbe: Promise<boolean> | null = null;
+  /**
+   * One multiplexed collab socket per page; per-doc handles come from openDoc. Memoized as a
+   * promise so concurrent first opens share the connection instead of racing two sockets.
+   */
+  let _collabConnection: Promise<WsCollabConnection> | null = null;
 
   /**
    * Prefix a project-relative path with the active project root for server API calls.
@@ -390,6 +398,35 @@ export function createDevServerPlatform() {
       };
     },
 
+    /**
+     * Realtime co-editing over the dev server's /__studio/collab endpoint (rooms keyed by
+     * server-root-relative path). Probes capability once — older servers without the endpoint
+     * degrade to solo editing; the wire client's evaluation defers behind the dynamic import until
+     * a doc opens.
+     */
+    async collab(docPath: string) {
+      if (typeof WebSocket === "undefined" || typeof location === "undefined") {
+        return null;
+      }
+      if (_collabProbe === null) {
+        _collabProbe = fetch("/__studio/collab")
+          .then((res) => res.ok)
+          .catch(() => false);
+      }
+      if (!(await _collabProbe)) {
+        return null;
+      }
+      _collabConnection ??= (async () => {
+        const { createWsCollabConnection } = await import("@jxsuite/collab/client");
+        const scheme = location.protocol === "https:" ? "wss" : "ws";
+        return createWsCollabConnection({
+          url: `${scheme}://${location.host}/__studio/collab`,
+        });
+      })();
+      const connection = await _collabConnection;
+      return connection.openDoc(serverPath(docPath));
+    },
+
     /** @param {string} _path */
     async createDirectory(_path: string) {
       // The server creates directories implicitly when writing files.
@@ -837,6 +874,76 @@ export function createDevServerPlatform() {
       }
     },
 
+    // ─── Cloudflare publish surface (token-backed; see services/cf-settings) ─
+
+    /**
+     * Allowlisted Cloudflare API passthrough. The token comes from the client's cf-settings store
+     * and rides in a header to the same-origin proxy (api.cloudflare.com is not CORS-enabled).
+     */
+    async cfApi(apiPath: string, init?: { method?: string; body?: unknown }) {
+      const { getCfToken } = await import("../services/cf-settings");
+      const token = getCfToken();
+      if (!token) {
+        throw new Error("No Cloudflare API token configured");
+      }
+      const res = await fetch("/__studio/cf/proxy", {
+        method: "POST",
+        headers: { "Content-Type": "application/json", "X-CF-Token": token },
+        body: JSON.stringify({ path: apiPath, method: init?.method ?? "GET", body: init?.body }),
+      });
+      const envelope = (await res.json()) as {
+        success?: boolean;
+        result?: unknown;
+        errors?: { message: string }[];
+        error?: string;
+      };
+      if (!res.ok || envelope.success === false) {
+        const message =
+          envelope.errors?.map((e) => e.message).join("; ") ?? envelope.error ?? res.statusText;
+        throw new Error(`Cloudflare API: ${message}`);
+      }
+      return envelope.result ?? envelope;
+    },
+
+    /** Verify the stored token by listing accounts; null when none/invalid. */
+    async cfConnection() {
+      const { getCfAccountId, getCfToken, setCfAccountId } =
+        await import("../services/cf-settings");
+      if (!getCfToken()) {
+        return null;
+      }
+      try {
+        const accounts = (await this.cfApi?.("/accounts")) as { id: string; name: string }[];
+        if (!accounts?.length) {
+          return { connected: false };
+        }
+        const chosen = accounts.find((a) => a.id === getCfAccountId()) ?? accounts[0]!;
+        setCfAccountId(chosen.id);
+        return { connected: true, accountId: chosen.id, accountName: chosen.name };
+      } catch {
+        return { connected: false };
+      }
+    },
+
+    // ─── Project catalogue ──────────────────────────────────────────────────
+
+    /** Every site under the server root, from the /__studio/sites glob. */
+    async listProjects() {
+      const res = await fetch("/__studio/sites");
+      if (!res.ok) {
+        return [];
+      }
+      const sites = await readJson<SiteEntry[]>(res);
+      return sites.map((site) => {
+        const config = site.config as { name?: string } | null;
+        return {
+          name: config?.name || site.path.split("/").at(-1) || site.path,
+          root: site.path,
+          description: site.path,
+        };
+      });
+    },
+
     // ─── AI Assistant (Stack B: OpenAI-compatible SSE proxy) ───────────────────
 
     aiChatUrl() {

package/src/project-list.ts

@@ -0,0 +1,38 @@
+/**
+ * Project catalogue — a synchronous render cache over the optional `platform.listProjects` PAL
+ * member (dev server sites, cloud platforms). Hydrated once at boot (studio.ts) like the
+ * recent-projects cache; the welcome screen reads it synchronously.
+ */
+import { getPlatform, hasPlatform } from "./platform";
+import type { ProjectListEntry } from "./types";
+
+let cache: ProjectListEntry[] = [];
+
+/** True when the active platform exposes a project catalogue. */
+export function platformListsProjects(): boolean {
+  return hasPlatform() && typeof getPlatform().listProjects === "function";
+}
+
+/** Refresh the cache from the platform; resolves to [] when unsupported or failing. */
+export async function hydrateProjectList(): Promise<void> {
+  if (!platformListsProjects()) {
+    cache = [];
+    return;
+  }
+  try {
+    cache = (await getPlatform().listProjects?.()) ?? [];
+  } catch {
+    // Catalogue is progressive enhancement; a failed fetch leaves the section hidden.
+    cache = [];
+  }
+}
+
+/** Synchronous snapshot for render paths (never awaits). */
+export function getProjectList(): ProjectListEntry[] {
+  return cache;
+}
+
+/** Reset seam for tests. */
+export function resetProjectList(): void {
+  cache = [];
+}

package/src/publish/pages-service.ts

@@ -0,0 +1,186 @@
+/// <reference lib="dom" />
+/**
+ * Pages-service — Cloudflare Pages publish domain logic over the PAL's
+ * `cfApi` passthrough. Works identically on every platform that provides it:
+ * the dev server / desktop (user API token via cf-settings → /__studio/cf/proxy)
+ * and the cloud platform (hosted OAuth). Publish state is written to
+ * project.json `build.deploy` — it travels with the repo, so any Studio can
+ * tell whether the publish workflow already exists.
+ *
+ * @license MIT
+ */
+
+import { updateWranglerConfig } from "@jxsuite/create/scaffold";
+import type { DeployConfig, ProjectConfig } from "@jxsuite/schema/types";
+import { getPlatform } from "../platform";
+import { updateSiteConfig } from "../site-context";
+
+export interface CfAccount {
+  id: string;
+  name: string;
+}
+
+export interface PagesDeploymentInfo {
+  id: string;
+  url: string;
+  environment: string;
+  /** Latest stage name/status, e.g. "deploy: success" or "build: failure". */
+  stage: string;
+  status: string;
+  createdOn: string;
+}
+
+export interface ConnectOptions {
+  accountId: string;
+  projectName: string;
+  productionBranch: string;
+  owner: string;
+  repo: string;
+}
+
+/** True when the active platform can reach the Cloudflare API. */
+export function platformSupportsPublish(): boolean {
+  return typeof getPlatform().cfApi === "function";
+}
+
+async function cfApi<T>(path: string, init?: { method?: string; body?: unknown }): Promise<T> {
+  const api = getPlatform().cfApi;
+  if (!api) {
+    throw new Error("This platform cannot reach the Cloudflare API");
+  }
+  return (await api(path, init)) as T;
+}
+
+export async function listAccounts(): Promise<CfAccount[]> {
+  return cfApi<CfAccount[]>("/accounts");
+}
+
+interface PagesProjectWire {
+  name: string;
+  subdomain?: string;
+  domains?: string[];
+}
+
+/** The Pages project, or null when it does not exist yet. */
+export async function getPagesProject(
+  accountId: string,
+  projectName: string,
+): Promise<PagesProjectWire | null> {
+  try {
+    return await cfApi<PagesProjectWire>(`/accounts/${accountId}/pages/projects/${projectName}`);
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Create a GitHub-connected Pages project that builds `bunx jx build` on every push. Requires the
+ * Cloudflare Pages GitHub App on the repo — the characteristic failure is surfaced to the caller
+ * with an install hint.
+ */
+export async function createPagesProject(opts: ConnectOptions): Promise<PagesProjectWire> {
+  return cfApi<PagesProjectWire>(`/accounts/${opts.accountId}/pages/projects`, {
+    method: "POST",
+    body: {
+      name: opts.projectName,
+      production_branch: opts.productionBranch,
+      build_config: {
+        build_command: "bunx jx build",
+        destination_dir: "dist",
+      },
+      source: {
+        type: "github",
+        config: {
+          owner: opts.owner,
+          repo_name: opts.repo,
+          production_branch: opts.productionBranch,
+          deployments_enabled: true,
+        },
+      },
+    },
+  });
+}
+
+interface DeploymentWire {
+  id: string;
+  url: string;
+  environment: string;
+  latest_stage?: { name?: string; status?: string };
+  created_on: string;
+}
+
+/** The most recent deployment of the connected project, or null when none. */
+export async function latestDeployment(deploy: DeployConfig): Promise<PagesDeploymentInfo | null> {
+  const deployments = await cfApi<DeploymentWire[]>(
+    `/accounts/${deploy.accountId}/pages/projects/${deploy.projectName}/deployments`,
+  );
+  const [latest] = deployments;
+  if (!latest) {
+    return null;
+  }
+  return {
+    id: latest.id,
+    url: latest.url,
+    environment: latest.environment,
+    stage: latest.latest_stage?.name ?? "unknown",
+    status: latest.latest_stage?.status ?? "unknown",
+    createdOn: latest.created_on,
+  };
+}
+
+/**
+ * Write (or with null, remove) the `build.deploy` block, preserving the rest of `build`. On
+ * connect, wrangler.jsonc is patched so its `name` matches the connected Pages project
+ * (comment-bearing JSONC is left alone).
+ */
+export async function writeDeployConfig(
+  config: ProjectConfig,
+  deploy: DeployConfig | null,
+): Promise<void> {
+  const build: NonNullable<ProjectConfig["build"]> = { ...config.build };
+  if (deploy === null) {
+    delete build.deploy;
+  } else {
+    build.deploy = deploy;
+  }
+  await updateSiteConfig({ build });
+
+  if (deploy !== null) {
+    const platform = getPlatform();
+    let existing: string | null = null;
+    try {
+      existing = await platform.readFile("wrangler.jsonc");
+    } catch {
+      existing = null;
+    }
+    const adapter =
+      build.adapter === "cloudflare-workers" ? "cloudflare-workers" : "cloudflare-pages";
+    const { content, patched } = updateWranglerConfig(existing, {
+      adapter,
+      slug: deploy.projectName,
+    });
+    if (patched) {
+      await platform.writeFile("wrangler.jsonc", content);
+    }
+  }
+}
+
+/**
+ * The whole connect flow: reuse the Pages project when it already exists, create it otherwise, then
+ * persist `build.deploy` (+ wrangler.jsonc sync).
+ */
+export async function connectDeploy(
+  config: ProjectConfig,
+  opts: ConnectOptions,
+): Promise<DeployConfig> {
+  const existing = await getPagesProject(opts.accountId, opts.projectName);
+  const project = existing ?? (await createPagesProject(opts));
+  const deploy: DeployConfig = {
+    provider: "cloudflare-pages",
+    accountId: opts.accountId,
+    projectName: opts.projectName,
+    ...(project.subdomain ? { productionUrl: `https://${project.subdomain}` } : {}),
+  };
+  await writeDeployConfig(config, deploy);
+  return deploy;
+}