loops-cli 0.1.0

package/dist/chunk-BOQYMFCY.js

@@ -0,0 +1,37 @@
+// src/config.ts
+import fs from "fs/promises";
+import path from "path";
+var CONFIG_FILE = ".loops.json";
+async function loadConfig(dir) {
+  try {
+    const raw = await fs.readFile(path.join(dir, CONFIG_FILE), "utf-8");
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+async function saveConfig(dir, config) {
+  await fs.writeFile(
+    path.join(dir, CONFIG_FILE),
+    JSON.stringify(config, null, 2) + "\n"
+  );
+}
+async function findProjects(baseDir) {
+  const projects = [];
+  const entries = await fs.readdir(baseDir, { withFileTypes: true });
+  for (const entry of entries) {
+    if (!entry.isDirectory() || entry.name.startsWith(".")) continue;
+    const dir = path.join(baseDir, entry.name);
+    const config = await loadConfig(dir);
+    if (config) {
+      projects.push({ dir, config });
+    }
+  }
+  return projects;
+}
+
+export {
+  loadConfig,
+  saveConfig,
+  findProjects
+};

package/dist/config-MNZSQUWZ.js

@@ -0,0 +1,10 @@
+import {
+  findProjects,
+  loadConfig,
+  saveConfig
+} from "./chunk-BOQYMFCY.js";
+export {
+  findProjects,
+  loadConfig,
+  saveConfig
+};

package/dist/index.js

@@ -0,0 +1,400 @@
+#!/usr/bin/env node
+import {
+  findProjects,
+  loadConfig,
+  saveConfig
+} from "./chunk-BOQYMFCY.js";
+
+// src/index.ts
+import { program } from "commander";
+
+// src/commands/init.ts
+import fs from "fs/promises";
+import path from "path";
+var DEFAULT_API = "http://localhost:8787";
+async function initCommand(projectName, opts) {
+  const apiUrl = opts.apiUrl || DEFAULT_API;
+  const projectDir = path.resolve(projectName);
+  await fs.mkdir(projectDir, { recursive: true });
+  await fs.mkdir(path.join(projectDir, "scripts"), { recursive: true });
+  const res = await fetch(`${apiUrl}/projects`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ name: projectName })
+  });
+  if (!res.ok) {
+    const body = await res.text();
+    console.error(`Failed to create project: ${res.status} ${body}`);
+    process.exit(1);
+  }
+  const { projectId, authToken, baseTag } = await res.json();
+  await saveConfig(projectDir, {
+    name: projectName,
+    projectId,
+    apiUrl,
+    authToken,
+    scripts: []
+  });
+  const guide = `# Loops Project: ${projectName}
+
+## How this works
+- Scripts live in ./scripts/ \u2014 each file is served to your Webflow site
+- Edit scripts here, they auto-sync to the live site when \`loops start\` is running
+- Read logs.json to see browser output and errors
+- To add a new script: \`loops add ${projectName} <name>\`
+
+## Scripts in this project
+(none yet \u2014 use \`loops add\` to create scripts)
+
+## Webflow coding rules
+- The HTML and CSS are built in Webflow. NEVER generate HTML with JavaScript.
+- Select elements by their Webflow class names (\`.hero-section_home\`, \`.nav_link\`).
+- Code adds BEHAVIOR: animations, interactions, form logic, API calls.
+- Use GSAP/ScrollTrigger for animations.
+- Work with the existing DOM \u2014 query it, animate it, enhance it. Don't replace it.
+- Always verify selectors exist before operating on them. Log if not found.
+`;
+  await fs.writeFile(path.join(projectDir, "LOOPS.md"), guide);
+  await fs.writeFile(path.join(projectDir, "logs.json"), "[]\n");
+  console.log(`
+Created project "${projectName}" (${projectId})
+`);
+  console.log(`Paste this in Webflow \u2192 Site Settings \u2192 Custom Code \u2192 Before </body>:
+`);
+  console.log(`  ${baseTag}
+`);
+  console.log(`Now add scripts with: loops add ${projectName} <script-name>
+`);
+}
+
+// src/commands/add.ts
+import fs2 from "fs/promises";
+import path2 from "path";
+async function addCommand(projectName, scriptName, opts) {
+  const projectDir = path2.resolve(projectName);
+  const config = await loadConfig(projectDir);
+  if (!config) {
+    console.error(
+      `No .loops.json found in ${projectDir}. Run "loops init ${projectName}" first.`
+    );
+    process.exit(1);
+  }
+  if (config.scripts.includes(scriptName)) {
+    console.error(`Script "${scriptName}" already exists in ${projectName}.`);
+    process.exit(1);
+  }
+  const scriptPath = path2.join(projectDir, "scripts", `${scriptName}.js`);
+  await fs2.writeFile(
+    scriptPath,
+    `// ${scriptName} \u2014 ${config.name}
+console.log("[Loops] ${scriptName} loaded");
+`
+  );
+  config.scripts.push(scriptName);
+  await saveConfig(projectDir, config);
+  await updateLoopsMd(projectDir, config.scripts, config.name);
+  const scriptTag = `<script src="${config.apiUrl}/s/${config.projectId}/${scriptName}"></script>`;
+  console.log(`
+Added script "${scriptName}" to ${projectName}
+`);
+  console.log(`Paste this on the relevant page in Webflow \u2192 Before </body>:
+`);
+  console.log(`  ${scriptTag}
+`);
+}
+async function updateLoopsMd(projectDir, scripts, projectName) {
+  const mdPath = path2.join(projectDir, "LOOPS.md");
+  try {
+    let content = await fs2.readFile(mdPath, "utf-8");
+    const scriptsSection = scripts.length > 0 ? scripts.map((s) => `- ${s}.js`).join("\n") : "(none yet)";
+    content = content.replace(
+      /## Scripts in this project\n[\s\S]*?(?=\n## )/,
+      `## Scripts in this project
+${scriptsSection}
+
+`
+    );
+    await fs2.writeFile(mdPath, content);
+  } catch {
+  }
+}
+
+// src/commands/remove.ts
+import fs3 from "fs/promises";
+import path3 from "path";
+async function removeCommand(projectName, scriptName) {
+  const projectDir = path3.resolve(projectName);
+  const config = await loadConfig(projectDir);
+  if (!config) {
+    console.error(
+      `No .loops.json found in ${projectDir}. Run "loops init ${projectName}" first.`
+    );
+    process.exit(1);
+  }
+  if (!config.scripts.includes(scriptName)) {
+    console.error(`Script "${scriptName}" not found in ${projectName}.`);
+    process.exit(1);
+  }
+  try {
+    await fetch(`${config.apiUrl}/code/${config.projectId}/${scriptName}`, {
+      method: "DELETE",
+      headers: { Authorization: `Bearer ${config.authToken}` }
+    });
+  } catch {
+    console.error("Warning: could not delete from API (may not be running).");
+  }
+  const scriptPath = path3.join(projectDir, "scripts", `${scriptName}.js`);
+  try {
+    await fs3.unlink(scriptPath);
+  } catch {
+  }
+  config.scripts = config.scripts.filter((s) => s !== scriptName);
+  await saveConfig(projectDir, config);
+  console.log(`Removed script "${scriptName}" from ${projectName}.`);
+}
+
+// src/commands/start.ts
+import fs4 from "fs/promises";
+import path4 from "path";
+import { watch } from "chokidar";
+async function startCommand(opts) {
+  const interval = parseInt(opts.pollInterval || "3000", 10);
+  const cwd = process.cwd();
+  const projects = await findProjects(cwd);
+  if (projects.length === 0) {
+    const { loadConfig: loadConfig2 } = await import("./config-MNZSQUWZ.js");
+    const config = await loadConfig2(cwd);
+    if (config) {
+      projects.push({ dir: cwd, config });
+    } else {
+      console.error(
+        "No Loops projects found. Run `loops init <name>` first."
+      );
+      process.exit(1);
+    }
+  }
+  console.log(`
+Watching ${projects.length} project(s)
+`);
+  for (const { dir, config } of projects) {
+    const scriptCount = config.scripts.length;
+    console.log(
+      `  ${config.name}: ${scriptCount} script(s)`
+    );
+    startWatcher(dir, config);
+    startPoller(dir, config, interval);
+  }
+  console.log("");
+  process.on("SIGINT", () => {
+    console.log("\nLoops stopped.");
+    process.exit(0);
+  });
+}
+function startWatcher(projectDir, config) {
+  const scriptsDir = path4.join(projectDir, "scripts");
+  const watcher = watch(path4.join(scriptsDir, "*.js"), {
+    ignoreInitial: false,
+    awaitWriteFinish: { stabilityThreshold: 300, pollInterval: 100 }
+  });
+  let pushing = false;
+  const pushFile = async (filePath) => {
+    if (pushing) return;
+    pushing = true;
+    try {
+      const scriptName = path4.basename(filePath, ".js");
+      const code = await fs4.readFile(filePath, "utf-8");
+      const res = await fetch(
+        `${config.apiUrl}/code/${config.projectId}/${scriptName}`,
+        {
+          method: "PUT",
+          headers: {
+            "Content-Type": "text/plain",
+            Authorization: `Bearer ${config.authToken}`
+          },
+          body: code
+        }
+      );
+      if (!res.ok) {
+        const body = await res.text();
+        console.error(`  Push failed (${scriptName}): ${res.status} ${body}`);
+      } else {
+        const { version } = await res.json();
+        const time = (/* @__PURE__ */ new Date()).toLocaleTimeString();
+        console.log(
+          `[${time}] ${config.name}/${scriptName} \u2192 v${version} (${code.length}b)`
+        );
+      }
+    } catch (err) {
+      console.error(`  Push error: ${err.message}`);
+    } finally {
+      pushing = false;
+    }
+  };
+  watcher.on("add", pushFile);
+  watcher.on("change", pushFile);
+}
+function startPoller(projectDir, config, intervalMs) {
+  const logsPath = path4.join(projectDir, "logs.json");
+  let lastTimestamp = null;
+  const poll = async () => {
+    try {
+      const url = new URL(`${config.apiUrl}/logs/${config.projectId}`);
+      if (lastTimestamp) {
+        url.searchParams.set("since", lastTimestamp);
+      }
+      const res = await fetch(url.toString(), {
+        headers: { Authorization: `Bearer ${config.authToken}` }
+      });
+      if (!res.ok) return;
+      const newEntries = await res.json();
+      if (newEntries.length === 0) return;
+      let existing = [];
+      try {
+        const raw = await fs4.readFile(logsPath, "utf-8");
+        existing = JSON.parse(raw);
+      } catch {
+        existing = [];
+      }
+      const merged = [...existing, ...newEntries].slice(-1e3);
+      await fs4.writeFile(logsPath, JSON.stringify(merged, null, 2) + "\n");
+      const pageHtmlEntries = newEntries.filter((e) => e.type === "page-html");
+      if (pageHtmlEntries.length > 0) {
+        const latest = pageHtmlEntries[pageHtmlEntries.length - 1];
+        const html = Array.isArray(latest.args) ? latest.args[0] : "";
+        if (typeof html === "string" && html.length > 0) {
+          const contextPath = path4.join(projectDir, "page-context.html");
+          await fs4.writeFile(contextPath, html);
+        }
+      }
+      lastTimestamp = newEntries[newEntries.length - 1].timestamp;
+      const errors = newEntries.filter(
+        (e) => e.type === "error" || e.type === "unhandled-error" || e.type === "unhandled-rejection"
+      );
+      const time = (/* @__PURE__ */ new Date()).toLocaleTimeString();
+      if (errors.length > 0) {
+        console.log(
+          `[${time}] ${config.name}: +${newEntries.length} logs (${errors.length} error(s))`
+        );
+      } else {
+        console.log(`[${time}] ${config.name}: +${newEntries.length} logs`);
+      }
+    } catch {
+    }
+  };
+  poll();
+  setInterval(poll, intervalMs);
+}
+
+// src/commands/status.ts
+async function statusCommand() {
+  const cwd = process.cwd();
+  const projects = await findProjects(cwd);
+  const cwdConfig = await loadConfig(cwd);
+  if (cwdConfig) {
+    projects.push({ dir: cwd, config: cwdConfig });
+  }
+  if (projects.length === 0) {
+    console.log("No Loops projects found.");
+    return;
+  }
+  console.log(`
+${projects.length} project(s)
+`);
+  for (const { config } of projects) {
+    console.log(`  ${config.name} (${config.projectId})`);
+    console.log(`    API: ${config.apiUrl}`);
+    if (config.scripts.length > 0) {
+      console.log(`    Scripts: ${config.scripts.join(", ")}`);
+    } else {
+      console.log(`    Scripts: (none)`);
+    }
+    console.log("");
+  }
+}
+
+// src/commands/exportCmd.ts
+import fs5 from "fs/promises";
+import path5 from "path";
+async function exportCommand(projectName, opts) {
+  const projectDir = path5.resolve(projectName);
+  const config = await loadConfig(projectDir);
+  if (!config) {
+    console.error(
+      `No .loops.json found in ${projectDir}. Run "loops init ${projectName}" first.`
+    );
+    process.exit(1);
+  }
+  if (config.scripts.length === 0) {
+    console.log("No scripts to export.");
+    return;
+  }
+  if (opts.inline) {
+    console.log("<!-- Loops export: paste in Webflow Custom Code -->");
+    console.log("<script>");
+    for (const scriptName of config.scripts) {
+      const scriptPath = path5.join(
+        projectDir,
+        "scripts",
+        `${scriptName}.js`
+      );
+      const code = await fs5.readFile(scriptPath, "utf-8");
+      console.log(`
+// === ${scriptName}.js ===`);
+      console.log(`(function(){`);
+      console.log(code);
+      console.log(`})();`);
+    }
+    console.log("</script>");
+  } else {
+    const exportDir = path5.join(projectDir, "export");
+    await fs5.mkdir(exportDir, { recursive: true });
+    for (const scriptName of config.scripts) {
+      const srcPath = path5.join(projectDir, "scripts", `${scriptName}.js`);
+      const code = await fs5.readFile(srcPath, "utf-8");
+      const wrapped = `(function(){
+${code}
+})();
+`;
+      const destPath = path5.join(exportDir, `${scriptName}.js`);
+      await fs5.writeFile(destPath, wrapped);
+      console.log(`  Exported: export/${scriptName}.js`);
+    }
+    console.log(`
+${config.scripts.length} script(s) exported to ${exportDir}`);
+  }
+}
+
+// src/commands/clearLogs.ts
+import fs6 from "fs/promises";
+import path6 from "path";
+async function clearLogsCommand(project) {
+  const projectDir = path6.resolve(project);
+  const config = await loadConfig(projectDir);
+  if (!config) {
+    console.error(`No Loops project found in "${project}".`);
+    process.exit(1);
+  }
+  const res = await fetch(`${config.apiUrl}/logs/${config.projectId}`, {
+    method: "DELETE",
+    headers: { Authorization: `Bearer ${config.authToken}` }
+  });
+  if (!res.ok) {
+    const body = await res.text();
+    console.error(`Failed to clear remote logs: ${res.status} ${body}`);
+    process.exit(1);
+  }
+  const logsPath = path6.join(projectDir, "logs.json");
+  await fs6.writeFile(logsPath, "[]\n");
+  console.log(`Cleared logs for "${config.name}".`);
+}
+
+// src/index.ts
+program.name("loops").description("Live coding tool for Webflow").version("0.1.0");
+program.command("init <project-name>").description("Create a new Loops project").option("--api-url <url>", "API URL", "http://localhost:8787").action(initCommand);
+program.command("add <project> <script-name>").description("Add a script to a project").action(addCommand);
+program.command("remove <project> <script-name>").description("Remove a script from a project").action(removeCommand);
+program.command("start").description("Watch all projects and sync scripts/logs").option("--poll-interval <ms>", "Log poll interval in ms", "3000").action(startCommand);
+program.command("status").description("Show all projects and scripts").action(statusCommand);
+program.command("export <project>").description("Export scripts for self-hosting").option("--inline", "Output code ready to paste in Webflow").action(exportCommand);
+program.command("clear-logs <project>").description("Delete all logs for a project (remote + local)").action(clearLogsCommand);
+program.parse();

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "loops-cli",
+  "version": "0.1.0",
+  "description": "Live coding tool for Webflow. Edit scripts locally, sync to staging, debug with live logs.",
+  "type": "module",
+  "license": "MIT",
+  "bin": {
+    "loops": "./dist/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "keywords": [
+    "webflow",
+    "live-coding",
+    "cli",
+    "scripts",
+    "staging"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --target node22 --clean",
+    "dev": "tsup src/index.ts --format esm --target node22 --watch"
+  },
+  "dependencies": {
+    "commander": "^13.0.0",
+    "chokidar": "^4.0.0"
+  },
+  "devDependencies": {
+    "@loops/shared": "*",
+    "tsup": "^8.0.0",
+    "typescript": "^5.5.0",
+    "@types/node": "^22.0.0"
+  }
+}