@blocofy/cli 0.1.1 → 0.1.3

package/README.md

@@ -15,8 +15,9 @@ npx @blocofy/cli theme dev       # http://localhost:3030 — local theme + live
 ```bash
 blocofy login [--url <url>] [--token <bcf_…>]
                           # Save your platform URL + dev token (~/.blocofy/credentials.json, 0600).
-blocofy theme dev [dir]   # Local dev server: edit a file and the browser reloads automatically.
-                          # --port <n> (default 3030)
+blocofy theme dev [dir]   # Local dev server. Prints 3 views — local preview, a live-domain
+                          # preview link, and the theme editor — all auto-reloading on save.
+                          # --port <n> (default 3030), --no-sync (local preview only)
 blocofy theme pull [dir]  # Download the live theme to disk.
 blocofy theme push [dir]  # Write the local theme to the live site (create/update; no delete).
 blocofy --version
@@ -28,8 +29,13 @@ blocofy --help
 `theme dev` starts a local HTTP server. For each page request it reads your local theme
 files and sends them to the platform's dev-render endpoint (`/api/dev/render`). The platform
 renders them with the site's **live data** and returns HTML — so the CLI ships no rendering
-engine and you see exactly the production output. A file watcher reloads the browser over
-Server-Sent Events when you save.
+engine and you see exactly the production output.
+
+It also continuously syncs your local files to a **draft theme** so you can view the same work
+three ways — the local preview, a shareable live-domain preview link, and the admin theme
+editor — without affecting your published theme. Save a file and **every open view reloads**
+(the platform-rendered pages connect back to the local dev server's reload channel). Publish
+the draft from the theme editor when you're ready.
 
 Credentials come from `~/.blocofy/credentials.json` (written by `blocofy login`) or the
 `BLOCOFY_URL` + `BLOCOFY_TOKEN` environment variables (for CI/automation).

package/bin/blocofy.mjs

@@ -14,9 +14,9 @@ import { createInterface } from "node:readline/promises";
 
 import { credentialsPath, loadCredentials, saveCredentials } from "../lib/credentials.mjs";
 import { startDevServer } from "../lib/dev-server.mjs";
-import { pullTheme, pushTheme } from "../lib/theme-sync.mjs";
+import { fetchDevSession, pullTheme, pushTheme } from "../lib/theme-sync.mjs";
 
-const VERSION = "0.1.1";
+const VERSION = "0.1.3";
 const args = process.argv.slice(2);
 
 /** Parse `--key value` and `--flag` (boolean) arguments. */
@@ -49,6 +49,7 @@ Usage:
                             --port <n> (default 3030)
   blocofy theme pull [dir]  Download the live theme to disk. dir defaults to cwd.
   blocofy theme push [dir]  Write the local theme to the live site (create/update; no delete).
+                            --draft  write to a draft theme instead (preview & publish from the admin panel)
   blocofy --version
   blocofy --help
 
@@ -105,6 +106,7 @@ async function themePull(rest) {
 }
 
 async function themePush(rest) {
+  const flags = parseFlags(rest);
   const positional = rest.filter((a) => !a.startsWith("--"));
   const dir = resolve(positional[0] ?? process.cwd());
   if (!existsSync(dir)) {
@@ -112,14 +114,20 @@ async function themePush(rest) {
     process.exit(1);
   }
   const creds = requireCreds();
-  const result = await pushTheme({ dir, url: creds.url, token: creds.token });
-  const extra = result.skippedDeletes
-    ? `, ${result.skippedDeletes} remote file(s) absent locally (not deleted)`
-    : "";
-  console.log(`Push: ${result.created} created, ${result.updated} updated${extra}.`);
+  const draft = Boolean(flags.draft);
+  const result = await pushTheme({ dir, url: creds.url, token: creds.token, draft });
+  if (result.draft) {
+    console.log(`Pushed to draft theme #${result.instanceId} (${result.created} created, ${result.updated} updated).`);
+    console.log(`Preview & publish it in the admin panel: Theme → Theme library → "Open in editor".`);
+  } else {
+    const extra = result.skippedDeletes
+      ? `, ${result.skippedDeletes} remote file(s) absent locally (not deleted)`
+      : "";
+    console.log(`Push: ${result.created} created, ${result.updated} updated${extra}.`);
+  }
 }
 
-function themeDev(rest) {
+async function themeDev(rest) {
   const flags = parseFlags(rest);
   const positional = rest.filter((a) => !a.startsWith("--"));
   const themeDir = resolve(positional[0] ?? process.cwd());
@@ -132,12 +140,27 @@ function themeDev(rest) {
   const creds = requireCreds();
   const port = Number(flags.port) || 3030;
 
-  console.log(`blocofy theme dev`);
-  console.log(`  theme dir : ${themeDir}`);
-  console.log(`  platform  : ${creds.url}`);
-  console.log(`  token     : ${creds.token.slice(0, 8)}… (${creds.source})`);
-  console.log(`  preview   : http://localhost:${port}`);
-  console.log(`  → edit a theme file and save = the browser reloads automatically (livereload)`);
+  // Dev session: live-domain preview + theme editor URLs (+ a draft to sync into).
+  // Graceful: if the platform can't provide one, fall back to local-only preview.
+  let session = null;
+  if (!flags["no-sync"]) {
+    try {
+      session = await fetchDevSession({ url: creds.url, token: creds.token });
+    } catch (error) {
+      console.warn(
+        `Warning: dev session unavailable (${error?.message ?? error}). ` +
+          `Local preview only — live-domain/editor views + draft sync disabled.`,
+      );
+    }
+  }
+
+  console.log(`\nblocofy theme dev — ${creds.url} (token ${creds.token.slice(0, 8)}…)\n`);
+  console.log(`  Local:    http://localhost:${port}`);
+  if (session) {
+    console.log(`  Preview:  ${session.previewUrl}&hr=${port}`);
+    console.log(`  Editor:   ${session.editorUrl}&hr=${port}`);
+  }
+  console.log(`\n  Edit a theme file and save — every open view reloads automatically.\n`);
 
   if (flags.dry) {
     console.log("(--dry: server not started)");
@@ -149,6 +172,7 @@ function themeDev(rest) {
     url: creds.url,
     token: creds.token,
     port,
+    syncDraft: Boolean(session),
     onError: (err) => {
       if (err && err.code === "EADDRINUSE") {
         console.error(`Port ${port} is in use. Try a different port: blocofy theme dev --port <n>`);
@@ -178,7 +202,10 @@ if (first === "--version" || first === "-v") {
     process.exit(1);
   });
 } else if (first === "theme" && rest[0] === "dev") {
-  themeDev(rest.slice(1));
+  themeDev(rest.slice(1)).catch((error) => {
+    console.error(error?.message ?? error);
+    process.exit(1);
+  });
 } else if (first === "theme" && rest[0] === "pull") {
   themePull(rest.slice(1)).catch((error) => {
     console.error(error?.message ?? error);

package/lib/dev-server.mjs

@@ -8,6 +8,7 @@ import {
   injectLivereload,
   readLocalTemplates,
 } from "./local-theme.mjs";
+import { pushTheme } from "./theme-sync.mjs";
 
 /**
  * Standalone dev server. For each page request it reads the local theme files and
@@ -18,7 +19,7 @@ import {
  * separate request); direct `/asset/*` references are served from disk. Images/JS
  * are remote (Directus/CDN), so no local serving is needed for them.
  */
-export function startDevServer({ dir, url, token, port, onError }) {
+export function startDevServer({ dir, url, token, port, syncDraft = false, onError }) {
   const base = url.replace(/\/+$/, "");
   const clients = new Set();
 
@@ -56,6 +57,8 @@ export function startDevServer({ dir, url, token, port, onError }) {
           "content-type": "text/event-stream",
           "cache-control": "no-cache, no-transform",
           connection: "keep-alive",
+          // Cross-origin iframe'ler (canlı-domain önizleme + editör) subscribe edebilsin.
+          "access-control-allow-origin": "*",
         });
         res.write("retry: 1000\n\n");
         clients.add(res);
@@ -83,10 +86,27 @@ export function startDevServer({ dir, url, token, port, onError }) {
 
   if (onError) server.on("error", onError);
 
-  const watcher = startWatch(dir, () => {
+  const broadcast = () => {
     for (const client of clients) client.write("data: reload\n\n");
+  };
+  // Değişimde: önce taslağa senkronla (canlı-domain önizleme + editör güncel olsun),
+  // SONRA reload yayınla → tüm görünümler en güncel taslağı çeker.
+  const watcher = startWatch(dir, async () => {
+    if (syncDraft) {
+      try {
+        await pushTheme({ dir, url, token, draft: true });
+      } catch {
+        /* senkron hatası reload'u engellemesin */
+      }
+    }
+    broadcast();
   });
 
+  // Açılışta taslağı bir kez doldur → uzak görünümler hemen güncel local'i gösterir.
+  if (syncDraft) {
+    void pushTheme({ dir, url, token, draft: true }).catch(() => {});
+  }
+
   server.listen(port);
 
   return {

package/lib/theme-sync.mjs

@@ -34,14 +34,31 @@ export async function pullTheme({ dir, url, token }) {
   return { count };
 }
 
-/** Write the local theme to the live site (create/update; no delete). */
-export async function pushTheme({ dir, url, token }) {
+/**
+ * Dev session bilgisi (#119 `theme dev`): platform draft instance'ı hazırlar ve
+ * 3 görünümün URL'lerini döner — `{ draftInstanceId, previewUrl, editorUrl, site }`.
+ */
+export async function fetchDevSession({ url, token }) {
+  const base = url.replace(/\/+$/, "");
+  const res = await fetch(`${base}/api/dev/session`, {
+    headers: { authorization: `Bearer ${token}` },
+  });
+  if (!res.ok) throw new Error(await errorText(res));
+  return res.json();
+}
+
+/**
+ * Write the local theme to the site (create/update; no delete). With `draft`,
+ * writes to a draft theme instance instead of the live theme — preview & publish
+ * it from the admin panel without affecting the live site.
+ */
+export async function pushTheme({ dir, url, token, draft = false }) {
   const base = url.replace(/\/+$/, "");
   const files = readLocalTemplates(dir);
   const res = await fetch(`${base}/api/dev/theme`, {
     method: "POST",
     headers: { "content-type": "application/json", authorization: `Bearer ${token}` },
-    body: JSON.stringify({ files }),
+    body: JSON.stringify({ files, draft }),
   });
   if (!res.ok) throw new Error(await errorText(res));
   return res.json();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocofy/cli",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Develop your Blocofy theme locally against live data with instant preview — login, theme dev, pull, push.",
   "type": "module",
   "license": "MIT",