framer-code-link 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framer-code-link",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "CLI tool for syncing Framer code components - controller-centric architecture",
   "main": "dist/index.js",
   "type": "module",

package/src/controller.ts

@@ -760,7 +760,12 @@ async function executeEffect(
 
     case "SEND_MESSAGE": {
       if (syncState.socket) {
-        await sendMessage(syncState.socket, effect.payload)
+        const sent = await sendMessage(syncState.socket, effect.payload)
+        if (!sent) {
+          warn(`Failed to send message: ${effect.payload.type}`)
+        }
+      } else {
+        warn(`No socket available to send: ${effect.payload.type}`)
       }
       return []
     }
@@ -976,11 +981,30 @@ export async function start(config: Config): Promise<void> {
   // State Machine Execution Helper
   // Process events through state machine and execute effects recursively
   async function processEvent(event: SyncEvent) {
+    const socketState = syncState.socket?.readyState
+    info(
+      `[STATE] Processing event: ${event.type} (mode: ${syncState.mode}, socket: ${socketState ?? "none"})`
+    )
+
     const result = transition(syncState, event)
     syncState = result.state
 
+    if (result.effects.length > 0) {
+      info(
+        `[STATE] Event produced ${result.effects.length} effects: ${result.effects.map((e) => e.type).join(", ")}`
+      )
+    }
+
     // Execute all effects and process any follow-up events
     for (const effect of result.effects) {
+      // Check socket state before each effect
+      const currentSocketState = syncState.socket?.readyState
+      if (currentSocketState !== undefined && currentSocketState !== 1) {
+        warn(
+          `[STATE] Socket not open (state: ${currentSocketState}) before executing ${effect.type}`
+        )
+      }
+
       const followUpEvents = await executeEffect(effect, {
         config,
         hashTracker,
@@ -1051,9 +1075,17 @@ export async function start(config: Config): Promise<void> {
         event = { type: "REQUEST_FILES" }
         break
 
-      case "file-list":
+      case "file-list": {
+        const totalSize = message.files.reduce(
+          (sum, f) => sum + (f.content?.length ?? 0),
+          0
+        )
+        info(
+          `[FILE_LIST] Received ${message.files.length} files (${(totalSize / 1024).toFixed(1)}KB total)`
+        )
         event = { type: "FILE_LIST", files: message.files }
         break
+      }
 
       case "file-change":
         event = {

package/src/helpers/connection.ts

@@ -33,11 +33,13 @@ export interface Connection {
 export function initConnection(port: number): Connection {
   const wss = new WebSocketServer({ port })
   const handlers: Partial<ConnectionCallbacks> = {}
+  let connectionId = 0
 
   info(`WebSocket server listening on port ${port}`)
 
   wss.on("connection", (ws: WebSocket) => {
-    info("Client connected")
+    const connId = ++connectionId
+    info(`[CONN ${connId}] Client connected (readyState: ${ws.readyState})`)
 
     ws.on("message", (data: Buffer) => {
       try {
@@ -45,22 +47,25 @@ export function initConnection(port: number): Connection {
 
         // Special handling for handshake
         if (message.type === "handshake") {
+          info(`[CONN ${connId}] Received handshake`)
           handlers.onHandshake?.(ws, message)
         } else {
           handlers.onMessage?.(message)
         }
       } catch (err) {
-        error("Failed to parse message:", err)
+        error(`[CONN ${connId}] Failed to parse message:`, err)
       }
     })
 
-    ws.on("close", () => {
-      info("Client disconnected")
+    ws.on("close", (code, reason) => {
+      info(
+        `[CONN ${connId}] Client disconnected (code: ${code}, reason: ${reason?.toString() || "none"})`
+      )
       handlers.onDisconnect?.()
     })
 
     ws.on("error", (err) => {
-      error("WebSocket error:", err)
+      error(`[CONN ${connId}] WebSocket error:`, err)
     })
   })
 
@@ -86,17 +91,50 @@ export function initConnection(port: number): Connection {
   }
 }
 
+/**
+ * WebSocket readyState constants for reference
+ */
+const READY_STATE = {
+  CONNECTING: 0,
+  OPEN: 1,
+  CLOSING: 2,
+  CLOSED: 3,
+} as const
+
+function readyStateToString(state: number): string {
+  switch (state) {
+    case 0: return "CONNECTING"
+    case 1: return "OPEN"
+    case 2: return "CLOSING"
+    case 3: return "CLOSED"
+    default: return `UNKNOWN(${state})`
+  }
+}
+
 /**
  * Sends a message to a connected socket
+ * Returns false if the socket is not open (instead of throwing)
  */
 export function sendMessage(
   socket: WebSocket,
   message: OutgoingMessage
-): Promise<void> {
-  return new Promise((resolve, reject) => {
+): Promise<boolean> {
+  return new Promise((resolve) => {
+    // Check socket state before attempting to send
+    if (socket.readyState !== READY_STATE.OPEN) {
+      const stateStr = readyStateToString(socket.readyState)
+      info(`[WS] Cannot send ${message.type}: socket is ${stateStr}`)
+      resolve(false)
+      return
+    }
+
     socket.send(JSON.stringify(message), (err) => {
-      if (err) reject(err)
-      else resolve()
+      if (err) {
+        error(`[WS] Send error for ${message.type}:`, err.message)
+        resolve(false)
+      } else {
+        resolve(true)
+      }
     })
   })
 }

package/src/index.ts

@@ -12,6 +12,7 @@ import { start } from "./controller.js"
 import type { Config } from "./types.js"
 import { setLogLevel, LogLevel, info } from "./utils/logging.js"
 import { getPortFromHash } from "./utils/hashing.js"
+import { getProjectHashFromCwd } from "./utils/project.js"
 
 const program = new Command()
 
@@ -27,7 +28,10 @@ program
   .name("code-link")
   .description("Sync Framer code components to your local filesystem")
   .version("0.1.0")
-  .argument("<projectHash>", "Framer Project ID Hash")
+  .argument(
+    "[projectHash]",
+    "Framer Project ID Hash (auto-detected from package.json if omitted)"
+  )
   .option("-n, --name <name>", "Project name (optional)")
   .option("-d, --dir <directory>", "Explicit project directory")
   .option("-v, --verbose", "Enable verbose logging")
@@ -36,7 +40,23 @@ program
     "--dangerously-auto-delete",
     "Automatically delete remote files without confirmation"
   )
-  .action(async (projectHash: string, options) => {
+  .action(async (projectHash: string | undefined, options) => {
+    // If no projectHash provided, try to read from cwd's package.json
+    if (!projectHash) {
+      const detected = await getProjectHashFromCwd()
+      if (detected) {
+        projectHash = detected
+      } else {
+        console.error(
+          "No project ID provided and no framerProjectId found in package.json."
+        )
+        console.error(
+          "Either run this command from a project directory or copy the command from the Code Link Plugin."
+        )
+        process.exit(1)
+      }
+    }
+
     // Auto-enable debug in development unless overridden
     const isDev = process.env.NODE_ENV === "development"
 

package/src/utils/project.ts

@@ -17,6 +17,24 @@ export function toPackageName(name: string): string {
     .replace(/-+/g, "-")
 }
 
+export function toDirName(name: string): string {
+  return name
+    .replace(/[^a-zA-Z0-9-]/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .replace(/-+/g, "-")
+}
+
+export async function getProjectHashFromCwd(): Promise<string | null> {
+  try {
+    const packageJsonPath = path.join(process.cwd(), "package.json")
+    const content = await fs.readFile(packageJsonPath, "utf-8")
+    const pkg = JSON.parse(content) as PackageJson
+    return pkg.framerProjectId ?? null
+  } catch {
+    return null
+  }
+}
+
 export async function findOrCreateProjectDir(
   projectHash: string,
   projectName?: string,
@@ -40,12 +58,13 @@ export async function findOrCreateProjectDir(
     )
   }
 
-  const dirName = toPackageName(projectName)
+  const dirName = toDirName(projectName)
+  const pkgName = toPackageName(projectName)
   const projectDir = path.join(cwd, dirName || projectHash.slice(0, 6))
 
   await fs.mkdir(path.join(projectDir, "files"), { recursive: true })
   const pkg: PackageJson = {
-    name: dirName || projectHash,
+    name: pkgName || projectHash,
     version: "1.0.0",
     private: true,
     framerProjectId: projectHash,