@blocofy/cli 0.1.2 → 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.2";
+const VERSION = "0.1.3";
 const args = process.argv.slice(2);
 
 /** Parse `--key value` and `--flag` (boolean) arguments. */
@@ -127,7 +127,7 @@ async function themePush(rest) {
   }
 }
 
-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());
@@ -140,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)");
@@ -157,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>`);
@@ -186,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,6 +34,19 @@ export async function pullTheme({ dir, url, token }) {
   return { count };
 }
 
+/**
+ * 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocofy/cli",
-  "version": "0.1.2",
+  "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",