framer-code-link 0.14.0 → 0.16.0

package/dist/index.mjs

@@ -5,10 +5,10 @@ import fs from "fs/promises";
 import path from "path";
 import { WebSocketServer } from "ws";
 import { createHash } from "crypto";
-import { setupTypeAcquisition } from "@typescript/ata";
-import ts from "typescript";
 import { execSync } from "child_process";
 import fs$1 from "fs";
+import { setupTypeAcquisition } from "@typescript/ata";
+import ts from "typescript";
 import { fileURLToPath } from "node:url";
 import chokidar from "chokidar";
 
@@ -509,6 +509,7 @@ function initConnection(port) {
 		wss.on("listening", () => {
 			isReady = true;
 			debug(`WebSocket server listening on port ${port}`);
+			let activeClient = null;
 			wss.on("connection", (ws) => {
 				const connId = ++connectionId;
 				let handshakeReceived = false;
@@ -519,8 +520,15 @@ function initConnection(port) {
 						if (message.type === "handshake") {
 							debug(`Received handshake (conn ${connId})`);
 							handshakeReceived = true;
+							const previousActiveClient = activeClient;
+							activeClient = ws;
+							if (previousActiveClient && previousActiveClient !== activeClient) {
+								debug(`Replacing active client with conn ${connId}`);
+								if (previousActiveClient.readyState === READY_STATE.OPEN || previousActiveClient.readyState === READY_STATE.CONNECTING) previousActiveClient.close();
+							}
 							handlers.onHandshake?.(ws, message);
-						} else if (handshakeReceived) handlers.onMessage?.(message);
+						} else if (handshakeReceived && activeClient === ws) handlers.onMessage?.(message);
+						else if (handshakeReceived) debug(`Ignoring ${message.type} from stale client (conn ${connId})`);
 						else debug(`Ignoring ${message.type} before handshake (conn ${connId})`);
 					} catch (err) {
 						error(`Failed to parse message:`, err);
@@ -528,7 +536,10 @@ function initConnection(port) {
 				});
 				ws.on("close", (code, reason) => {
 					debug(`Client disconnected (code: ${code}, reason: ${reason.toString()})`);
-					handlers.onDisconnect?.();
+					if (activeClient === ws) {
+						activeClient = null;
+						handlers.onDisconnect?.(ws);
+					} else debug(`Ignoring disconnect from stale client (conn ${connId})`);
 				});
 				ws.on("error", (err) => {
 					error(`WebSocket error:`, err);
@@ -680,7 +691,7 @@ async function loadPersistedState(projectDir) {
 			if (normalizedName !== fileName) debug(`Normalized persisted key "${fileName}" -> "${normalizedName}" for compatibility`);
 			result.set(normalizedName, state);
 		}
-		debug(`Loaded persisted state for ${result.size} files`);
+		debug(`Loaded persisted state for ${pluralize(result.size, "file")}`);
 		return result;
 	} catch (err) {
 		if (err.code === "ENOENT") {
@@ -702,7 +713,7 @@ async function savePersistedState(projectDir, state) {
 	};
 	try {
 		await fs.writeFile(statePath, JSON.stringify(persistedState, null, 2));
-		debug(`Saved persisted state for ${state.size} files`);
+		debug(`Saved persisted state for ${pluralize(state.size, "file")}`);
 	} catch (err) {
 		warn("Failed to save persisted state:", err);
 	}
@@ -773,7 +784,7 @@ async function detectConflicts(remoteFiles, filesDir, options = {}) {
 	const preferRemote = options.preferRemote ?? false;
 	const persistedState = options.persistedState;
 	const getPersistedState = (fileName) => persistedState?.get(fileKeyForLookup(fileName));
-	debug(`Detecting conflicts for ${String(remoteFiles.length)} remote files`);
+	debug(`Detecting conflicts for ${pluralize(remoteFiles.length, "remote file")}`);
 	const localFiles = await listFiles(filesDir);
 	const localFileMap = new Map(localFiles.map((f) => [fileKeyForLookup(f.name), f]));
 	const remoteFileMap = new Map(remoteFiles.map((f) => {
@@ -927,7 +938,7 @@ function autoResolveConflicts(conflicts, versions, options = {}) {
 * CRITICAL: Update hashTracker BEFORE writing to disk
 */
 async function writeRemoteFiles(files, filesDir, hashTracker, installer) {
-	debug(`Writing ${files.length} remote files`);
+	debug(`Writing ${pluralize(files.length, "remote file")}`);
 	for (const file of files) try {
 		const normalized = resolveRemoteReference(filesDir, file.name);
 		const fullPath = normalized.absolutePath;
@@ -1002,49 +1013,6 @@ function isSupportedExtension(fileName) {
 	return SUPPORTED_EXTENSIONS.some((ext) => lower.endsWith(ext));
 }
 
-//#endregion
-//#region src/utils/imports.ts
-/**
-* Extract npm and URL-based imports from source code.
-*/
-function extractImports(code) {
-	const imports = [];
-	const seen = /* @__PURE__ */ new Set();
-	const npmRegex = /import\s+(?:(?:\*\s+as\s+\w+)|(?:\w+)|(?:\{[^}]*\}))\s+from\s+['"]([^./][^'"]+)['"]/g;
-	const urlRegex = /import\s+(?:(?:\*\s+as\s+\w+)|(?:\w+)|(?:\{[^}]*\}))\s+from\s+['"]https?:\/\/[^'"]+['"]/g;
-	let match;
-	while ((match = npmRegex.exec(code)) !== null) {
-		const pkgName = match[1];
-		const normalized = pkgName.startsWith("@") ? pkgName.split("/").slice(0, 2).join("/") : pkgName.split("/")[0];
-		if (!seen.has(normalized)) {
-			seen.add(normalized);
-			imports.push({
-				type: "npm",
-				name: normalized,
-				raw: match[0]
-			});
-		}
-	}
-	while ((match = urlRegex.exec(code)) !== null) {
-		const pkgName = extractPackageFromUrl(match[0]);
-		if (pkgName && !seen.has(pkgName)) {
-			seen.add(pkgName);
-			imports.push({
-				type: "url",
-				name: pkgName,
-				raw: match[0]
-			});
-		}
-	}
-	return imports;
-}
-/**
-* Attempt to derive an npm-style package specifier from a URL import.
-*/
-function extractPackageFromUrl(url) {
-	return /\/(@?[^@/]+(?:\/[^@/]+)?)/.exec(url)?.[1] ?? null;
-}
-
 //#endregion
 //#region src/helpers/git.ts
 /**
@@ -1124,6 +1092,49 @@ function tryGitInit(projectDir) {
 	}
 }
 
+//#endregion
+//#region src/utils/imports.ts
+/**
+* Extract npm and URL-based imports from source code.
+*/
+function extractImports(code) {
+	const imports = [];
+	const seen = /* @__PURE__ */ new Set();
+	const npmRegex = /import\s+(?:(?:\*\s+as\s+\w+)|(?:\w+)|(?:\{[^}]*\}))\s+from\s+['"]([^./][^'"]+)['"]/g;
+	const urlRegex = /import\s+(?:(?:\*\s+as\s+\w+)|(?:\w+)|(?:\{[^}]*\}))\s+from\s+['"]https?:\/\/[^'"]+['"]/g;
+	let match;
+	while ((match = npmRegex.exec(code)) !== null) {
+		const pkgName = match[1];
+		const normalized = pkgName.startsWith("@") ? pkgName.split("/").slice(0, 2).join("/") : pkgName.split("/")[0];
+		if (!seen.has(normalized)) {
+			seen.add(normalized);
+			imports.push({
+				type: "npm",
+				name: normalized,
+				raw: match[0]
+			});
+		}
+	}
+	while ((match = urlRegex.exec(code)) !== null) {
+		const pkgName = extractPackageFromUrl(match[0]);
+		if (pkgName && !seen.has(pkgName)) {
+			seen.add(pkgName);
+			imports.push({
+				type: "url",
+				name: pkgName,
+				raw: match[0]
+			});
+		}
+	}
+	return imports;
+}
+/**
+* Attempt to derive an npm-style package specifier from a URL import.
+*/
+function extractPackageFromUrl(url) {
+	return /\/(@?[^@/]+(?:\/[^@/]+)?)/.exec(url)?.[1] ?? null;
+}
+
 //#endregion
 //#region src/helpers/skills.ts
 /**
@@ -1346,7 +1357,6 @@ var Installer = class {
 			this.ensureSkills(),
 			this.ensureGitignore()
 		]);
-		tryGitInit(this.projectDir);
 		Promise.resolve().then(async () => {
 			await this.ensureReact18Types();
 			const coreImports = CORE_LIBRARIES.map((lib) => `import "${lib}";`).join("\n");
@@ -1508,6 +1518,8 @@ declare module "*.json"
 		} catch {}
 		const content = [
 			"node_modules/",
+			".DS_Store",
+			"*.local",
 			"",
 			"# Framer Code Link",
 			".framer-sync-state.json",
@@ -1993,7 +2005,8 @@ async function getProjectHashFromCwd() {
 		return null;
 	}
 }
-async function findOrCreateProjectDirectory(projectHash, projectName, explicitDirectory) {
+async function findOrCreateProjectDirectory(options) {
+	const { projectHash, projectName, explicitDirectory, baseDirectory } = options;
 	if (explicitDirectory) {
 		const resolved = path.resolve(explicitDirectory);
 		await fs.mkdir(path.join(resolved, "files"), { recursive: true });
@@ -2002,7 +2015,7 @@ async function findOrCreateProjectDirectory(projectHash, projectName, explicitDi
 			created: false
 		};
 	}
-	const cwd = process.cwd();
+	const cwd = baseDirectory ?? process.cwd();
 	const existing = await findExistingProjectDirectory(cwd, projectHash);
 	if (existing) return {
 		directory: existing,
@@ -2012,7 +2025,7 @@ async function findOrCreateProjectDirectory(projectHash, projectName, explicitDi
 	const directoryName = toDirectoryName(projectName);
 	const pkgName = toPackageName(projectName);
 	const shortId = shortProjectHash(projectHash);
-	const projectDirectory = path.join(cwd, directoryName || shortId);
+	const { directory: projectDirectory, nameCollision } = await findAvailableDirectory(cwd, directoryName || `project-${shortId}`, shortId);
 	await fs.mkdir(path.join(projectDirectory, "files"), { recursive: true });
 	const pkg = {
 		name: pkgName || shortId,
@@ -2024,9 +2037,29 @@ async function findOrCreateProjectDirectory(projectHash, projectName, explicitDi
 	await fs.writeFile(path.join(projectDirectory, "package.json"), JSON.stringify(pkg, null, 2));
 	return {
 		directory: projectDirectory,
-		created: true
+		created: true,
+		nameCollision
 	};
 }
+/**
+* Returns a directory path that doesn't collide with an existing project.
+* Tries the bare name first, falls back to name-{shortId} if taken.
+*/
+async function findAvailableDirectory(baseDir, name, shortId) {
+	const candidate = path.join(baseDir, name);
+	try {
+		await fs.access(candidate);
+		return {
+			directory: path.join(baseDir, `${name}-${shortId}`),
+			nameCollision: true
+		};
+	} catch {
+		return {
+			directory: candidate,
+			nameCollision: false
+		};
+	}
+}
 async function findExistingProjectDirectory(baseDirectory, projectHash) {
 	if (await matchesProject(path.join(baseDirectory, "package.json"), projectHash)) return baseDirectory;
 	const entries = await fs.readdir(baseDirectory, { withFileTypes: true });
@@ -2140,7 +2173,7 @@ function transition(state, event) {
 					effects
 				};
 			}
-			effects.push(log("debug", `Received file list: ${event.files.length} files`));
+			effects.push(log("debug", `Received file list: ${pluralize(event.files.length, "file")}`));
 			effects.push({
 				type: "DETECT_CONFLICTS",
 				remoteFiles: event.files
@@ -2162,13 +2195,13 @@ function transition(state, event) {
 				};
 			}
 			const { conflicts, safeWrites, localOnly } = event;
-			if (safeWrites.length > 0) effects.push(log("debug", `Applying ${safeWrites.length} safe writes`), {
+			if (safeWrites.length > 0) effects.push(log("debug", `Applying ${safeWrites.length} safe writes`), log("success", `Applied ${pluralize(safeWrites.length, "file")} during sync`), {
 				type: "WRITE_FILES",
 				files: safeWrites,
 				silent: true
 			});
 			if (localOnly.length > 0) {
-				effects.push(log("debug", `Uploading ${localOnly.length} local-only files`));
+				effects.push(log("debug", `Uploading ${pluralize(localOnly.length, "local-only file")}`));
 				for (const file of localOnly) effects.push({
 					type: "SEND_MESSAGE",
 					payload: {
@@ -2455,9 +2488,14 @@ async function executeEffect(effect, context) {
 		case "INIT_WORKSPACE":
 			if (!config.projectDir) {
 				const projectName = config.explicitName ?? effect.projectInfo.projectName;
-				const directoryInfo = await findOrCreateProjectDirectory(config.projectHash, projectName, config.explicitDirectory);
+				const directoryInfo = await findOrCreateProjectDirectory({
+					projectHash: config.projectHash,
+					projectName,
+					explicitDirectory: config.explicitDirectory
+				});
 				config.projectDir = directoryInfo.directory;
 				config.projectDirCreated = directoryInfo.created;
+				if (directoryInfo.nameCollision) warn(`Folder ${projectName} already exists`);
 				config.filesDir = `${config.projectDir}/files`;
 				debug(`Files directory: ${config.filesDir}`);
 				await fs.mkdir(config.filesDir, { recursive: true });
@@ -2466,7 +2504,7 @@ async function executeEffect(effect, context) {
 		case "LOAD_PERSISTED_STATE":
 			if (config.projectDir) {
 				await fileMetadataCache.initialize(config.projectDir);
-				debug(`Loaded persisted metadata for ${fileMetadataCache.size()} files`);
+				debug(`Loaded persisted metadata for ${pluralize(fileMetadataCache.size(), "file")}`);
 			}
 			return [];
 		case "LIST_LOCAL_FILES": {
@@ -2585,6 +2623,7 @@ async function executeEffect(effect, context) {
 				for (const fileName of confirmedFiles) {
 					hashTracker.forget(fileName);
 					fileMetadataCache.recordDelete(fileName);
+					fileDelete(fileName);
 				}
 				if (confirmedFiles.length > 0 && syncState.socket) await sendMessage(syncState.socket, {
 					type: "file-delete",
@@ -2603,7 +2642,7 @@ async function executeEffect(effect, context) {
 			if (syncState.socket) await sendMessage(syncState.socket, { type: "sync-complete" });
 			if (wasDisconnected) {
 				if (didShowDisconnect()) {
-					success(`Reconnected, synced ${effect.totalCount} files (${effect.updatedCount} updated, ${effect.unchangedCount} unchanged)`);
+					success(`Reconnected, synced ${pluralize(effect.totalCount, "file")} (${effect.updatedCount} updated, ${effect.unchangedCount} unchanged)`);
 					status("Watching for changes...");
 				}
 				resetDisconnectState();
@@ -2613,9 +2652,10 @@ async function executeEffect(effect, context) {
 			const relativeDirectory = relative != null ? relative ? "./" + relative : "." : null;
 			if (effect.totalCount === 0 && relativeDirectory) if (config.projectDirCreated) success(`Created ${relativeDirectory} folder`);
 			else success(`Syncing to ${relativeDirectory} folder`);
-			else if (relativeDirectory && config.projectDirCreated) success(`Synced into ${relativeDirectory} (${effect.updatedCount} files added)`);
-			else if (relativeDirectory) success(`Synced into ${relativeDirectory} (${effect.updatedCount} files updated, ${effect.unchangedCount} unchanged)`);
-			else success(`Synced ${effect.totalCount} files (${effect.updatedCount} updated, ${effect.unchangedCount} unchanged)`);
+			else if (relativeDirectory && config.projectDirCreated) success(`Created ${relativeDirectory} (${pluralize(effect.updatedCount, "file")} added)`);
+			else if (relativeDirectory) success(`Synced into ${relativeDirectory} (${pluralize(effect.updatedCount, "file")} updated, ${effect.unchangedCount} unchanged)`);
+			else success(`Synced ${pluralize(effect.totalCount, "file")} (${effect.updatedCount} updated, ${effect.unchangedCount} unchanged)`);
+			if (config.projectDirCreated && config.projectDir) tryGitInit(config.projectDir);
 			status("Watching for changes...");
 			return [];
 		}
@@ -2677,6 +2717,14 @@ async function start(config) {
 		}
 		(async () => {
 			cancelDisconnectMessage();
+			if (syncState.mode !== "disconnected") {
+				if (syncState.socket === client) {
+					debug(`Ignoring duplicate handshake from active socket in ${syncState.mode} mode`);
+					return;
+				}
+				debug(`New handshake received in ${syncState.mode} mode, resetting sync state`);
+				await processEvent({ type: "DISCONNECT" });
+			}
 			if (!wasRecentlyDisconnected() && !didShowDisconnect()) success(`Connected to ${message.projectName}`);
 			await processEvent({
 				type: "HANDSHAKE",
@@ -2707,7 +2755,7 @@ async function start(config) {
 				event = { type: "REQUEST_FILES" };
 				break;
 			case "file-list":
-				debug(`Received file list: ${message.files.length} files`);
+				debug(`Received file list: ${pluralize(message.files.length, "file")}`);
 				event = {
 					type: "REMOTE_FILE_LIST",
 					files: message.files
@@ -2783,7 +2831,11 @@ async function start(config) {
 			}
 		})();
 	});
-	connection.on("disconnect", () => {
+	connection.on("disconnect", (client) => {
+		if (syncState.socket !== client) {
+			debug("[STATE] Ignoring disconnect from stale socket");
+			return;
+		}
 		scheduleDisconnectMessage(() => {
 			status("Disconnected, waiting to reconnect...");
 		});

package/package.json

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