framer-code-link 0.3.0 → 0.4.0

package/dist/index.mjs

@@ -5,6 +5,7 @@ import fs from "fs/promises";
 import { WebSocketServer } from "ws";
 import chokidar from "chokidar";
 import path from "path";
+import { getPortFromHash, isSupportedExtension, normalizePath, pluralize, sanitizeFilePath, shortProjectHash } from "@code-link/shared";
 import { createHash } from "crypto";
 import { setupTypeAcquisition } from "@typescript/ata";
 import ts from "typescript";
@@ -118,7 +119,6 @@ let LogLevel = /* @__PURE__ */ function(LogLevel$1) {
 let currentLevel = LogLevel.INFO;
 let lastMessage = "";
 let lastMessageCount = 0;
-let lastCategory = "other";
 const CLEAR_LINE = "\x1B[2K";
 const MOVE_CURSOR_UP = "\x1B[1A";
 function rewriteLastLine(text) {
@@ -144,16 +144,6 @@ function flushDedupe() {
 	lastMessageCount = 0;
 }
 /**
-* Handle category transition - adds newline when switching categories
-*/
-function transitionCategory(newCategory) {
-	if (lastCategory !== newCategory) {
-		flushDedupe();
-		console.log();
-		lastCategory = newCategory;
-	}
-}
-/**
 * Log with deduplication - repeated messages within window get counted
 */
 function logWithDedupe(message, writer) {
@@ -187,7 +177,6 @@ function debug(message, ...args) {
 */
 function info(message, ...args) {
 	if (currentLevel <= LogLevel.INFO) {
-		transitionCategory("other");
 		const formatted = args.length > 0 ? `${message} ${args.join(" ")}` : message;
 		logWithDedupe(formatted, () => console.log(formatted));
 	}
@@ -198,7 +187,6 @@ function info(message, ...args) {
 function warn(message, ...args) {
 	if (currentLevel <= LogLevel.WARN) {
 		if (message === lastMessage) return;
-		transitionCategory("other");
 		flushDedupe();
 		lastMessage = message;
 		lastMessageCount = 1;
@@ -210,7 +198,6 @@ function warn(message, ...args) {
 */
 function error(message, ...args) {
 	if (currentLevel <= LogLevel.ERROR) {
-		transitionCategory("other");
 		flushDedupe();
 		console.error(import_picocolors.default.red(`✗ ${message}`), ...args);
 	}
@@ -220,7 +207,6 @@ function error(message, ...args) {
 */
 function success(message, ...args) {
 	if (currentLevel <= LogLevel.INFO) {
-		transitionCategory("other");
 		flushDedupe();
 		console.log(import_picocolors.default.green(`✓ ${message}`), ...args);
 	}
@@ -230,21 +216,18 @@ function success(message, ...args) {
 */
 function fileDown(fileName) {
 	if (currentLevel <= LogLevel.INFO) {
-		transitionCategory("file-sync");
 		const msg = `  ${import_picocolors.default.blue("↓")} ${fileName}`;
 		logWithDedupe(msg, () => console.log(msg));
 	}
 }
 function fileUp(fileName) {
 	if (currentLevel <= LogLevel.INFO) {
-		transitionCategory("file-sync");
 		const msg = `  ${import_picocolors.default.green("↑")} ${fileName}`;
 		logWithDedupe(msg, () => console.log(msg));
 	}
 }
 function fileDelete(fileName) {
 	if (currentLevel <= LogLevel.INFO) {
-		transitionCategory("file-sync");
 		const msg = `  ${import_picocolors.default.red("×")} ${fileName}`;
 		logWithDedupe(msg, () => console.log(msg));
 	}
@@ -254,7 +237,6 @@ function fileDelete(fileName) {
 */
 function status(message) {
 	if (currentLevel <= LogLevel.INFO) {
-		transitionCategory("other");
 		flushDedupe();
 		console.log(import_picocolors.default.dim(`  ${message}`));
 	}
@@ -307,8 +289,7 @@ function resetDisconnectState() {
 /**
 * WebSocket connection helper
 *
-* Thin wrapper around ws.Server that normalizes handshake and surfaces
-* simple callbacks. Keeps raw socket API localized.
+* Wrapper around ws.Server that normalizes handshake and surfaces callbacks.
 */
 /**
 * Initializes a WebSocket server and returns a connection interface
@@ -421,174 +402,7 @@ function sendMessage(socket, message) {
 }
 
 //#endregion
-//#region ../shared/dist/hash.js
-/**
-* Base58 alphabet (no 0/O/I/l to avoid confusion)
-*/
-const BASE58 = "123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz";
-/**
-* Derive a short, deterministic hash from the full Framer project hash.
-* Uses a simple numeric hash encoded in base58 for compactness.
-* Idempotent: if input is already the target length, returns it unchanged.
-*/
-function shortProjectHash(fullHash, length = 8) {
-	if (fullHash.length === length) return fullHash;
-	let h1 = 0;
-	let h2 = 0;
-	for (let i = 0; i < fullHash.length; i++) {
-		const char = fullHash.charCodeAt(i);
-		h1 = Math.imul(h1 ^ char, 2246822507);
-		h2 = Math.imul(h2 ^ char, 3266489909);
-	}
-	h1 ^= h2 >>> 16;
-	h2 ^= h1 >>> 13;
-	let result = "";
-	const combined = [Math.abs(h1), Math.abs(h2)];
-	for (const num of combined) {
-		let n = num >>> 0;
-		while (n > 0 && result.length < length) {
-			result += BASE58[n % 58];
-			n = Math.floor(n / 58);
-		}
-	}
-	while (result.length < length) result += BASE58[0];
-	return result.slice(0, length);
-}
-
-//#endregion
-//#region ../shared/dist/ports.js
-/**
-* Generate a deterministic port number from a project hash (full or short).
-* Port range: 3847-4096 (250 possible ports)
-* Must match between CLI and plugin.
-*
-* Internally normalizes to the short id so both full and short inputs yield the same port.
-*/
-function getPortFromHash(projectHash) {
-	const shortId = shortProjectHash(projectHash);
-	let hash = 0;
-	for (let i = 0; i < shortId.length; i++) {
-		const char = shortId.charCodeAt(i);
-		hash = (hash << 5) - hash + char;
-		hash = hash & hash;
-	}
-	return 3847 + Math.abs(hash) % 250;
-}
-
-//#endregion
-//#region ../shared/dist/paths.js
-/**
-* File path normalization utilities
-* Framer code files include extensions in their paths (.tsx, .ts, etc.)
-*/
-const firstCharacterRegex = /^[a-zA-Z$_]/;
-const remainingCharactersRegex = /[^a-zA-Z0-9$_]/g;
-const onlyDotsRegex = /^\.+$/;
-const tsxExtension = ".tsx";
-var NameType;
-(function(NameType$1) {
-	NameType$1["Variable"] = "Variable";
-	NameType$1["Selector"] = "Selector";
-	NameType$1["Directory"] = "Directory";
-})(NameType || (NameType = {}));
-function sanitizedName(type, name) {
-	if (!name) return null;
-	let validName = name.trim();
-	if (validName.length === 0) return null;
-	const validFirstChar = type === NameType.Selector ? "_" : "$";
-	if (type === NameType.Directory) {
-		if (onlyDotsRegex.test(validName)) return null;
-	} else if (!firstCharacterRegex.test(validName)) validName = validFirstChar + validName;
-	validName = validName.replace(remainingCharactersRegex, "_");
-	validName = validName.replace(/_+/g, "_");
-	validName = validName.replace(/^\$_/u, validFirstChar);
-	return validName;
-}
-function sanitizedVariableName(name) {
-	return sanitizedName(NameType.Variable, name);
-}
-function sanitizedDirectoryName(name) {
-	return sanitizedName(NameType.Directory, name);
-}
-function capitalizeFirstLetter(str) {
-	if (str.length === 0) return str;
-	return str.charAt(0).toUpperCase() + str.slice(1);
-}
-function hasValidExtension(fileName) {
-	if (fileName.endsWith(".json")) return true;
-	return /\.[tj]sx?$/u.test(fileName);
-}
-function splitExtension(fileName) {
-	const match = fileName.match(/^(.+?)(\.[^.]+)?$/);
-	if (!match) return [fileName, ""];
-	return [match[1], match[2]?.slice(1) || ""];
-}
-function dirname(filePath) {
-	const at = filePath.lastIndexOf("/");
-	if (at < 0) return "";
-	return filePath.slice(0, at);
-}
-function filename(filePath) {
-	const at = filePath.lastIndexOf("/") + 1;
-	return filePath.slice(at);
-}
-function pathJoin(...parts) {
-	let res = "";
-	parts.forEach((part) => {
-		while (part.startsWith("/")) part = part.slice(1);
-		while (part.endsWith("/")) part = part.slice(0, -1);
-		if (part === "") return;
-		if (res !== "") res += "/";
-		res += part;
-	});
-	return res;
-}
-function normalizePath(filePath) {
-	if (!filePath) return "";
-	const isAbsolute = filePath.startsWith("/");
-	const segments = filePath.replace(/\\/g, "/").split("/");
-	const stack = [];
-	for (const segment of segments) {
-		if (!segment || segment === ".") continue;
-		if (segment === "..") {
-			if (stack.length > 0) stack.pop();
-			continue;
-		}
-		stack.push(segment);
-	}
-	const normalized = stack.join("/");
-	if (isAbsolute) return `/${normalized}`;
-	return normalized;
-}
-function sanitizeFilePath(input, capitalizeReactComponent = true) {
-	const trimmed = input.trim();
-	let [inputName, extension] = splitExtension(filename(trimmed));
-	if (extension) extension = `.${extension}`;
-	const dirName = dirname(trimmed).split("/").map((part) => sanitizedDirectoryName(part)).filter((part) => Boolean(part)).join("/");
-	let name = sanitizedVariableName(inputName) ?? "MyComponent";
-	if ((!hasValidExtension(extension) || extension === tsxExtension) && capitalizeReactComponent) name = capitalizeFirstLetter(name);
-	return {
-		path: pathJoin(dirName, name + extension),
-		dirName,
-		name,
-		extension
-	};
-}
-function isSupportedExtension$1(filePath) {
-	return /\.(tsx?|jsx?|json)$/i.test(filePath);
-}
-/**
-* Pluralize a word based on count
-* @example pluralize(1, "file") => "1 file"
-* @example pluralize(3, "file") => "3 files"
-* @example pluralize(0, "conflict") => "0 conflicts"
-*/
-function pluralize(count, singular, plural) {
-	return `${count} ${count === 1 ? singular : plural ?? `${singular}s`}`;
-}
-
-//#endregion
-//#region src/utils/paths.ts
+//#region src/utils/node-paths.ts
 /**
 * Path manipulation utilities
 */
@@ -627,9 +441,7 @@ function normalizePath$1(filePath) {
 /**
 * File watcher helper
 *
-* Thin wrapper around chokidar that normalizes file paths and emits
-* only supported file types (ts, tsx, js, json). Controller never worries
-* about addDir or platform separators.
+* Wrapper around chokidar that normalizes file paths and filters to ts, tsx, js, json.
 */
 /**
 * Initializes a file watcher for the given directory
@@ -643,7 +455,7 @@ function initWatcher(filesDir) {
 	});
 	debug(`Watching directory: ${filesDir}`);
 	const emitEvent = async (kind, absolutePath) => {
-		if (!isSupportedExtension$1(absolutePath)) return;
+		if (!isSupportedExtension(absolutePath)) return;
 		const rawRelativePath = normalizePath(getRelativePath(filesDir, absolutePath));
 		const relativePath = sanitizeFilePath(rawRelativePath, false).path;
 		let effectiveAbsolutePath = absolutePath;
@@ -696,7 +508,7 @@ function initWatcher(filesDir) {
 * (hash matches), because that means the file wasn't edited while CLI was offline.
 */
 const STATE_FILE_NAME = ".framer-sync-state.json";
-const CURRENT_VERSION = 2;
+const CURRENT_VERSION = 1;
 const SUPPORTED_EXTENSIONS$1 = [
 	".ts",
 	".tsx",
@@ -801,7 +613,7 @@ async function listFiles(filesDir) {
 				await walk(entryPath);
 				continue;
 			}
-			if (!isSupportedExtension(entry.name)) continue;
+			if (!isSupportedExtension$1(entry.name)) continue;
 			const sanitizedPath = sanitizeFilePath(normalizePath(path.relative(filesDir, entryPath)), false).path;
 			try {
 				const [content, stats] = await Promise.all([fs.readFile(entryPath, "utf-8"), fs.stat(entryPath)]);
@@ -1026,6 +838,16 @@ async function readFileSafe(fileName, filesDir) {
 		return null;
 	}
 }
+/**
+* Filter out files whose content matches the last remembered hash.
+* Used to skip inbound echoes of our own local sends.
+*/
+function filterEchoedFiles(files, hashTracker) {
+	return files.filter((file) => {
+		if (file.content === void 0) return true;
+		return !hashTracker.shouldSkip(file.name, file.content);
+	});
+}
 function resolveRemoteReference(filesDir, rawName) {
 	const normalized = sanitizeRelativePath(rawName);
 	const absolutePath = path.join(filesDir, normalized.relativePath);
@@ -1043,7 +865,7 @@ function sanitizeRelativePath(relativePath) {
 		extension: sanitized.extension || path.extname(normalized) || DEFAULT_EXTENSION
 	};
 }
-function isSupportedExtension(fileName) {
+function isSupportedExtension$1(fileName) {
 	const lower = fileName.toLowerCase();
 	return SUPPORTED_EXTENSIONS.some((ext) => lower.endsWith(ext));
 }
@@ -1210,10 +1032,10 @@ var Installer = class {
 		});
 	}
 	async processImports(fileName, content) {
-		const allImports = extractImports(content).filter((imp) => imp.type === "npm");
+		const allImports = extractImports(content).filter((i) => i.type === "npm");
 		if (allImports.length === 0) return;
-		const imports = this.allowUnsupportedNpm ? allImports : allImports.filter((imp) => this.isSupportedPackage(imp.name));
-		if (allImports.length - imports.length > 0 && !this.allowUnsupportedNpm) debug(`Skipping unsupported packages: ${allImports.filter((imp) => !this.isSupportedPackage(imp.name)).map((imp) => imp.name).join(", ")} (use --unsupported-npm to enable)`);
+		const imports = this.allowUnsupportedNpm ? allImports : allImports.filter((i) => this.isSupportedPackage(i.name));
+		if (allImports.length - imports.length > 0 && !this.allowUnsupportedNpm) debug(`Skipping unsupported packages: ${allImports.filter((i) => !this.isSupportedPackage(i.name)).map((i) => i.name).join(", ")} (use --unsupported-npm to enable)`);
 		if (imports.length === 0) return;
 		const hash = imports.map((imp) => imp.name).sort().join(",");
 		if (this.processedImports.has(hash)) return;
@@ -1700,7 +1522,7 @@ var UserActionCoordinator = class {
 * Note: This is for INCOMING changes from remote. Local changes (from watcher)
 * are handled separately and always sent during watching mode.
 */
-function validateIncomingChange(file, fileMeta, currentMode) {
+function validateIncomingChange(fileMeta, currentMode) {
 	if (currentMode === "snapshot_processing" || currentMode === "handshaking") return {
 		action: "queue",
 		reason: "snapshot-in-progress"
@@ -1751,7 +1573,7 @@ async function findOrCreateProjectDir(projectHash, projectName, explicitDir) {
 	const cwd = process.cwd();
 	const existing = await findExistingProjectDir(cwd, projectHash);
 	if (existing) return existing;
-	if (!projectName) throw new Error("Project name is required when creating a new workspace. Pass --name <project name>.");
+	if (!projectName) throw new Error("Failed to get Project name. Pass --name <project name>.");
 	const dirName = toDirName(projectName);
 	const pkgName = toPackageName(projectName);
 	const shortId = shortProjectHash(projectHash);
@@ -1792,9 +1614,10 @@ async function matchesProject(packageJsonPath, projectHash) {
 //#endregion
 //#region src/controller.ts
 /**
-* Controller
-* Single source of truth for all runtime state and orchestrates the sync lifecycle.
-* Helpers are functions that provide data - they never hold control or callbacks.
+* CLI Controller
+*
+* All runtime state and orchestrates the sync lifecycle.
+* Helpers should provide data, nevering hold control or callbacks.
 */
 /** Log helper */
 function log(level, message) {
@@ -1805,16 +1628,6 @@ function log(level, message) {
 	};
 }
 /**
-* Filter out files whose content matches the last remembered hash.
-* Used to skip inbound echoes of our own local sends.
-*/
-function filterEchoedFiles(files, hashTracker) {
-	return files.filter((file) => {
-		if (file.content === void 0) return true;
-		return !hashTracker.shouldSkip(file.name, file.content);
-	});
-}
-/**
 * Pure state transition function
 * Takes current state + event, returns new state + effects to execute
 */
@@ -1844,7 +1657,7 @@ function transition(state, event) {
 				},
 				effects
 			};
-		case "FILE_SYNCED":
+		case "FILE_SYNCED_CONFIRMATION":
 			effects.push(log("debug", `Remote confirmed sync: ${event.fileName}`), {
 				type: "UPDATE_FILE_METADATA",
 				fileName: event.fileName,
@@ -1905,7 +1718,7 @@ function transition(state, event) {
 				state: {
 					...state,
 					mode: "snapshot_processing",
-					queuedDiffs: event.files
+					pendingRemoteChanges: event.files
 				},
 				effects
 			};
@@ -1948,7 +1761,7 @@ function transition(state, event) {
 					effects
 				};
 			}
-			const remoteTotal = state.queuedDiffs.length;
+			const remoteTotal = state.pendingRemoteChanges.length;
 			const totalCount = remoteTotal + localOnly.length;
 			const updatedCount = safeWrites.length + localOnly.length;
 			const unchangedCount = Math.max(0, remoteTotal - safeWrites.length);
@@ -1962,19 +1775,19 @@ function transition(state, event) {
 				state: {
 					...state,
 					mode: "watching",
-					queuedDiffs: []
+					pendingRemoteChanges: []
 				},
 				effects
 			};
 		}
 		case "FILE_CHANGE": {
-			const validation = validateIncomingChange(event.file, event.fileMeta, state.mode);
+			const validation = validateIncomingChange(event.fileMeta, state.mode);
 			if (validation.action === "queue") {
 				effects.push(log("debug", `Queueing file change: ${event.file.name} (${validation.reason})`));
 				return {
 					state: {
 						...state,
-						queuedDiffs: [...state.queuedDiffs, event.file]
+						pendingRemoteChanges: [...state.pendingRemoteChanges, event.file]
 					},
 					effects
 				};
@@ -2012,7 +1825,7 @@ function transition(state, event) {
 				state,
 				effects
 			};
-		case "REMOTE_DELETE_CONFIRMED":
+		case "LOCAL_DELETE_APPROVED":
 			effects.push(log("debug", `Delete confirmed: ${event.fileName}`), {
 				type: "DELETE_LOCAL_FILES",
 				names: [event.fileName]
@@ -2021,7 +1834,7 @@ function transition(state, event) {
 				state,
 				effects
 			};
-		case "REMOTE_DELETE_CANCELLED":
+		case "LOCAL_DELETE_REJECTED":
 			effects.push(log("debug", `Delete cancelled: ${event.fileName}`));
 			effects.push({
 				type: "WRITE_FILES",
@@ -2194,7 +2007,7 @@ function transition(state, event) {
 				state: {
 					...rest,
 					mode: "watching",
-					queuedDiffs: []
+					pendingRemoteChanges: []
 				},
 				effects
 			};
@@ -2397,7 +2210,7 @@ async function start(config) {
 	let syncState = {
 		mode: "disconnected",
 		socket: null,
-		queuedDiffs: [],
+		pendingRemoteChanges: [],
 		pendingOperations: /* @__PURE__ */ new Map(),
 		nextOperationId: 1
 	};
@@ -2461,15 +2274,13 @@ async function start(config) {
 			case "request-files":
 				event = { type: "REQUEST_FILES" };
 				break;
-			case "file-list": {
-				const totalSize = message.files.reduce((sum, f) => sum + (f.content?.length ?? 0), 0);
-				debug(`Received file list: ${message.files.length} files (${(totalSize / 1024).toFixed(1)}KB)`);
+			case "file-list":
+				debug(`Received file list: ${message.files.length} files`);
 				event = {
 					type: "FILE_LIST",
 					files: message.files
 				};
 				break;
-			}
 			case "file-change":
 				event = {
 					type: "FILE_CHANGE",
@@ -2491,7 +2302,7 @@ async function start(config) {
 				const unmatched = [];
 				for (const fileName of message.fileNames) if (!userActions.handleConfirmation(`delete:${fileName}`, true)) unmatched.push(fileName);
 				for (const fileName of unmatched) await processEvent({
-					type: "REMOTE_DELETE_CONFIRMED",
+					type: "LOCAL_DELETE_APPROVED",
 					fileName
 				});
 				return;
@@ -2500,7 +2311,7 @@ async function start(config) {
 				for (const file of message.files) {
 					userActions.handleConfirmation(`delete:${file.fileName}`, false);
 					await processEvent({
-						type: "REMOTE_DELETE_CANCELLED",
+						type: "LOCAL_DELETE_REJECTED",
 						fileName: file.fileName,
 						content: file.content ?? ""
 					});
@@ -2508,7 +2319,7 @@ async function start(config) {
 				return;
 			case "file-synced":
 				event = {
-					type: "FILE_SYNCED",
+					type: "FILE_SYNCED_CONFIRMATION",
 					fileName: message.fileName,
 					remoteModifiedAt: message.remoteModifiedAt
 				};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framer-code-link",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "CLI tool for syncing Framer code components - controller-centric architecture",
   "main": "dist/index.mjs",
   "type": "module",
@@ -22,6 +22,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
+    "@code-link/shared": "1.0.0",
     "@typescript/ata": "^0.9.8",
     "chokidar": "^5.0.0",
     "commander": "^14.0.2",