@blocofy/cli 0.1.2 → 0.1.4

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,11 @@ 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";
+import { hyperlink, openUrl } from "../lib/term.mjs";
+import { isValidToken, isValidUrl, normalizeUrl } from "../lib/validate.mjs";
 
-const VERSION = "0.1.2";
+const VERSION = "0.1.4";
 const args = process.argv.slice(2);
 
 /** Parse `--key value` and `--flag` (boolean) arguments. */
@@ -40,51 +42,97 @@ function parseFlags(rest) {
 function printHelp() {
   console.log(`blocofy — Blocofy theme development CLI (v${VERSION})
 
-Usage:
+Develop your theme locally against live data, preview it three ways, and publish.
+
+Usage
   blocofy login [--url <url>] [--token <bcf_…>]
-                            Save your platform URL + dev token (~/.blocofy/credentials.json).
-                            Get a token from your admin panel: Settings → Theme CLI tokens.
-  blocofy theme dev [dir]   Local dev server — local theme + live data with instant preview.
-                            Edit a file and the browser reloads automatically. dir defaults to cwd.
-                            --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)
+      Save your platform URL + dev token to ~/.blocofy/credentials.json.
+      Get a token from the admin panel → Settings → Theme CLI tokens.
+
+  blocofy theme dev [dir] [--port <n>] [--no-sync]
+      Start a dev server and print 3 auto-reloading views — Local, live-domain
+      Preview, and the theme Editor. Press l / p / e to open each, q to quit.
+      Edit a file and save → every open view reloads. (dir defaults to cwd)
+        --port <n>   local port (default 3030)
+        --no-sync    local preview only (skip draft sync + remote views)
+
+  blocofy theme pull [dir]
+      Download the live theme to disk. (dir defaults to cwd)
+
+  blocofy theme push [dir] [--draft]
+      Write the local theme to the site (create/update; no delete).
+        --draft      write to a draft theme — preview & publish it from the admin panel
+
   blocofy --version
   blocofy --help
 
-The CLI does not build assets — generate them with your own tools (npm/Vite/Tailwind);
-the platform serves plain Liquid + static assets.`);
+Examples
+  blocofy login --url https://store.myblocofy.com --token bcf_xxxxxxxx
+  blocofy theme pull && blocofy theme dev
+  blocofy theme push --draft
+
+Auth: ~/.blocofy/credentials.json (from \`login\`), or BLOCOFY_URL + BLOCOFY_TOKEN env vars.
+The CLI does not build assets — bring your own (npm/Vite/Tailwind); the platform serves
+plain Liquid + static assets.`);
+}
+
+/** Geçerli yanıt alana kadar sor (max `tries`), HER yanıtı anında doğrula. */
+async function promptValid(rl, question, normalize, valid, hint, tries = 3) {
+  for (let i = 0; i < tries; i++) {
+    const answer = normalize(await rl.question(question));
+    if (valid(answer)) return answer;
+    console.error(`  ✗ ${hint}`);
+  }
+  console.error("Too many invalid attempts.");
+  process.exit(1);
 }
 
 async function login(rest) {
   const flags = parseFlags(rest);
-  let url = typeof flags.url === "string" ? flags.url : "";
-  let token = typeof flags.token === "string" ? flags.token : "";
+  let url = typeof flags.url === "string" ? normalizeUrl(flags.url) : "";
+  let token = typeof flags.token === "string" ? flags.token.trim() : "";
+
+  // Flag ile verildiyse anında doğrula (prompt'a düşmeden).
+  if (url && !isValidUrl(url)) {
+    console.error("Invalid --url — must be a valid http(s):// URL.");
+    process.exit(1);
+  }
+  if (token && !isValidToken(token)) {
+    console.error("Invalid --token — must start with bcf_.");
+    process.exit(1);
+  }
 
   if (!url || !token) {
     const rl = createInterface({ input: process.stdin, output: process.stdout });
     try {
-      if (!url) url = (await rl.question("Platform/site URL (e.g. https://store.myblocofy.com): ")).trim();
-      if (!token) token = (await rl.question("Dev token (bcf_…): ")).trim();
+      // URL'i token'dan ÖNCE iste ve ANINDA doğrula (şema yoksa https:// eklenir);
+      // geçersizse aynı anda tekrar sorar — token'a geçip sonra hata vermez.
+      if (!url) {
+        url = await promptValid(
+          rl,
+          "Platform/site URL (e.g. https://store.myblocofy.com): ",
+          normalizeUrl,
+          isValidUrl,
+          "Enter a valid URL, e.g. https://store.myblocofy.com",
+        );
+      }
+      if (!token) {
+        token = await promptValid(
+          rl,
+          "Dev token (bcf_…): ",
+          (s) => s.trim(),
+          isValidToken,
+          "Token must start with bcf_ — get one from the admin panel: Settings → Theme CLI tokens.",
+        );
+      }
     } finally {
       rl.close();
     }
   }
 
-  url = url.replace(/\/+$/, "");
-  if (!/^https?:\/\//.test(url)) {
-    console.error("Invalid URL — must start with http(s)://");
-    process.exit(1);
-  }
-  if (!token.startsWith("bcf_")) {
-    console.error("Invalid token — must start with bcf_ (admin panel: Settings → Theme CLI tokens).");
-    process.exit(1);
-  }
-
   saveCredentials({ url, token });
-  console.log(`Saved credentials: ${credentialsPath()}`);
-  console.log(`Now run, in your theme directory: blocofy theme dev`);
+  console.log(`✓ Saved credentials → ${credentialsPath()}`);
+  console.log(`Next: cd into your theme directory, then run  blocofy theme dev`);
 }
 
 /** Resolve credentials (URL + token) or exit with guidance. */
@@ -127,7 +175,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 +188,33 @@ 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.`,
+      );
+    }
+  }
+
+  const localUrl = `http://localhost:${port}`;
+  const previewUrl = session ? `${session.previewUrl}&hr=${port}` : null;
+  const editorUrl = session ? `${session.editorUrl}&hr=${port}` : null;
+
+  console.log(`\nblocofy theme dev — ${creds.url} (token ${creds.token.slice(0, 8)}…)\n`);
+  console.log(`  (l) Local      ${hyperlink(localUrl)}`);
+  if (previewUrl) console.log(`  (p) Preview    ${hyperlink(previewUrl)}`);
+  if (editorUrl) console.log(`  (e) Editor     ${hyperlink(editorUrl)}`);
+  const keys = ["l local", previewUrl && "p preview", editorUrl && "e editor", "q quit"]
+    .filter(Boolean)
+    .join("   ");
+  console.log(`\n  Press:  ${keys}`);
+  console.log(`  Edit a theme file and save — every open view reloads automatically.\n`);
 
   if (flags.dry) {
     console.log("(--dry: server not started)");
@@ -157,6 +226,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>`);
@@ -167,11 +237,37 @@ function themeDev(rest) {
     },
   });
   const shutdown = () => {
+    if (process.stdin.isTTY) {
+      try {
+        process.stdin.setRawMode(false);
+      } catch {
+        /* yoksay */
+      }
+    }
     handle.close();
     process.exit(0);
   };
   process.on("SIGINT", shutdown);
   process.on("SIGTERM", shutdown);
+
+  // Klavye kısayolları (TTY): l/p/e ilgili görünümü tarayıcıda açar, q/Ctrl-C çıkar.
+  // Raw mode'da SIGINT gelmez → Ctrl-C'yi () elle yakala.
+  if (process.stdin.isTTY) {
+    try {
+      process.stdin.setRawMode(true);
+    } catch {
+      return; // raw mode yoksa kısayolsuz devam (sunucu çalışmaya devam eder)
+    }
+    process.stdin.resume();
+    process.stdin.setEncoding("utf8");
+    process.stdin.on("data", (key) => {
+      const k = key.toLowerCase();
+      if (key === "" || k === "q") shutdown();
+      else if (k === "l") openUrl(localUrl);
+      else if (k === "p" && previewUrl) openUrl(previewUrl);
+      else if (k === "e" && editorUrl) openUrl(editorUrl);
+    });
+  }
 }
 
 const [first, ...rest] = args;
@@ -186,7 +282,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/term.mjs

@@ -0,0 +1,36 @@
+import { spawn } from "node:child_process";
+
+/**
+ * Terminal yardımcıları: URL'leri varsayılan tarayıcıda açma + tıklanabilir
+ * (OSC 8) hyperlink. `theme dev` 3 görünümü tıklanabilir + l/p/e kısayollarıyla açar.
+ */
+
+/** Platforma göre URL açma komutu (saf → test edilebilir). */
+export function openCommand(url, platform = process.platform) {
+  if (platform === "darwin") return { cmd: "open", args: [url] };
+  if (platform === "win32") return { cmd: "cmd", args: ["/c", "start", "", url] };
+  return { cmd: "xdg-open", args: [url] };
+}
+
+/** URL'i varsayılan tarayıcıda aç (detached, sessiz — opener yoksa yutulur). */
+export function openUrl(url) {
+  const { cmd, args } = openCommand(url);
+  try {
+    const child = spawn(cmd, args, { stdio: "ignore", detached: true });
+    child.on("error", () => {});
+    child.unref();
+  } catch {
+    /* opener yok → sessiz */
+  }
+}
+
+const OSC = "]8;;";
+const BEL = "";
+
+/**
+ * OSC 8 terminal hyperlink: destekleyen terminalde (iTerm2, GNOME Terminal, …)
+ * tıklanabilir; desteklemeyende `label` düz metin olarak görünür.
+ */
+export function hyperlink(url, label = url) {
+  return `${OSC}${url}${BEL}${label}${OSC}${BEL}`;
+}

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/lib/validate.mjs

@@ -0,0 +1,18 @@
+/**
+ * Login girdisi doğrulama (saf → test edilebilir). URL şema yoksa https:// eklenir
+ * (bare domain'e izin), sondaki `/` atılır; token `bcf_` ile başlamalı.
+ */
+
+export function normalizeUrl(raw) {
+  let u = (raw || "").trim().replace(/\/+$/, "");
+  if (u && !/^https?:\/\//i.test(u)) u = `https://${u}`;
+  return u;
+}
+
+export function isValidUrl(u) {
+  return /^https?:\/\/.+/i.test(u);
+}
+
+export function isValidToken(t) {
+  return typeof t === "string" && t.startsWith("bcf_") && t.length >= 12;
+}

package/package.json

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