Introducing publish example

Author: elmarburke

examples/publish/README.md

@@ -0,0 +1,38 @@
+# Publish CLI
+
+A CLI tool that continuously monitors a Framer project for changes and automatically publishes and deploys them at a set interval.
+
+## How it works
+
+1. Connects to your Framer project
+2. Checks for unpublished changes
+3. If changes exist, publishes and deploys them
+4. Waits for the configured interval
+5. Repeats
+
+Each check creates a fresh connection to avoid long-running sessions.
+
+## Usage
+
+Interactive mode (prompts for interval and confirmation):
+
+```bash
+node --env-file=../../.env index.ts
+
+bun --env-file=../../.env run index.ts
+
+deno --env-file=../../.env run index.ts
+```
+
+Automated mode (no prompts):
+
+```bash
+INTERVAL_MINUTES=10 node --env-file=../../.env index.ts
+```
+
+## Environment Variables
+
+| Variable | Required | Description |
+|----------|----------|-------------|
+| `EXAMPLE_PROJECT_URL` | Yes | Your Framer project URL |
+| `INTERVAL_MINUTES` | No | Interval in minutes. If set, skips all prompts |

examples/publish/index.ts

@@ -0,0 +1,78 @@
+import assert from "node:assert";
+import { confirm, input } from "@inquirer/prompts";
+import { connect, type Framer } from "framer-api";
+
+// --- Configuration ---
+
+const projectUrl = process.env["EXAMPLE_PROJECT_URL"];
+assert(projectUrl, "EXAMPLE_PROJECT_URL environment variable is required");
+
+const intervalFromEnv = process.env["INTERVAL_MINUTES"];
+
+// --- Main ---
+
+const minutes = intervalFromEnv
+    ? parseInt(intervalFromEnv, 10)
+    : parseInt(await input({ message: "Interval in minutes:", default: "10" }), 10);
+
+const shouldStart =
+    intervalFromEnv ||
+    (await confirm({
+        message: `🔄 This will publish and deploy every ${minutes} minute(s). Start?`,
+        default: true,
+    }));
+
+if (!shouldStart) {
+    console.log("🛑 Cancelled.");
+    process.exit(0);
+}
+
+console.log(`\n🔄 Will check for changes and publish every ${minutes} minute(s)`);
+console.log(`   Press Ctrl+C to stop\n`);
+
+const checkAndPublish = async () => {
+    using framer = await connect(projectUrl);
+
+    const timestamp = new Date().toLocaleTimeString();
+    const hasChanges = await showChanges(framer);
+
+    if (hasChanges) {
+        console.log(`[${timestamp}] Publishing...`);
+        await publishAndDeploy(framer);
+    } else {
+        console.log(`[${timestamp}] ⏳ No changes`);
+    }
+};
+
+await checkAndPublish();
+setInterval(checkAndPublish, minutes * 60 * 1000);
+
+// --- Helper Functions ---
+
+async function showChanges(framer: Framer): Promise<boolean> {
+    const changedPaths = await framer.getChangedPaths();
+    const entries = Object.entries(changedPaths);
+    const totalChanges = entries.reduce((sum, [, paths]) => sum + paths.length, 0);
+
+    if (totalChanges === 0) return false;
+
+    console.log(`📄 ${totalChanges} change(s):`);
+    for (const [type, paths] of entries) {
+        for (const path of paths) {
+            console.log(`   ${type}: ${path}`);
+        }
+    }
+
+    return true;
+}
+
+async function publishAndDeploy(framer: Framer) {
+    const { deployment } = await framer.publish();
+    console.log(`🚀 Published deployment ${deployment.id}`);
+
+    const deployedHostnames = await framer.deploy(deployment.id);
+    console.log(`✅ Deployed to:`);
+    for (const hostname of deployedHostnames) {
+        console.log(`   https://${hostname.hostname}`);
+    }
+}

examples/publish/package.json

@@ -0,0 +1,17 @@
+{
+    "name": "publish",
+    "version": "0.0.1",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "typecheck": "tsc --noEmit"
+    },
+    "dependencies": {
+        "@inquirer/prompts": "^7.2.1",
+        "framer-api": "^0.0.1-beta.0",
+        "typescript": "^5.9.3"
+    },
+    "devDependencies": {
+        "@types/node": "^22.10.2"
+    }
+}

examples/publish/tsconfig.json

@@ -0,0 +1,4 @@
+{
+    "extends": "../../tsconfig.base.json",
+    "include": ["index.ts"]
+}