framer-code-link 0.21.0-alpha.1 → 0.21.0-alpha.3

package/dist/index.mjs

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 import { createRequire } from "node:module";
-import { Command, InvalidArgumentError } from "commander";
+import { Command, InvalidArgumentError, Option } from "commander";
 import fs from "fs/promises";
 import path from "path";
 import { execFile } from "node:child_process";
@@ -16,6 +16,7 @@ import { createHash as createHash$1 } from "crypto";
 import { execSync } from "child_process";
 import fs$2 from "fs";
 import { setupTypeAcquisition } from "@typescript/ata";
+import { parseImports } from "parse-imports";
 import ts from "typescript";
 import { fileURLToPath } from "node:url";
 import chokidar from "chokidar";
@@ -916,32 +917,31 @@ const DEFAULT_REMOTE_DRIFT_MS = 2e3;
 */
 async function listFiles(filesDir) {
 	const files = [];
-	async function walk(currentDir) {
-		const entries = await fs.readdir(currentDir, { withFileTypes: true });
-		for (const entry of entries) {
-			const entryPath = path.join(currentDir, entry.name);
-			if (entry.isDirectory()) {
-				await walk(entryPath);
-				continue;
-			}
-			if (!isSupportedExtension(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)]);
-				files.push({
-					name: sanitizedPath,
-					content,
-					modifiedAt: stats.mtimeMs
-				});
-			} catch (err) {
-				warn(`Failed to read ${entryPath}:`, err);
-			}
-		}
-	}
+	let entries;
 	try {
-		await walk(filesDir);
+		entries = await fs.readdir(filesDir, {
+			withFileTypes: true,
+			recursive: true
+		});
 	} catch (err) {
 		warn("Failed to list files:", err);
+		return files;
+	}
+	for (const entry of entries) {
+		if (!entry.isFile()) continue;
+		if (!isSupportedExtension(entry.name)) continue;
+		const entryPath = path.join(entry.parentPath, entry.name);
+		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)]);
+			files.push({
+				name: sanitizedPath,
+				content,
+				modifiedAt: stats.mtimeMs
+			});
+		} catch (err) {
+			warn(`Failed to read ${entryPath}:`, err);
+		}
 	}
 	return files;
 }
@@ -1288,49 +1288,6 @@ 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
 /**
@@ -1464,10 +1421,9 @@ const DEFAULT_PINNED_TYPE_VERSIONS = {
 };
 const JSON_EXTENSION_REGEX = /\.json$/i;
 /**
-* Packages that are officially supported for type acquisition.
-* Use --unsupported-npm flag to allow other packages.
+* Packages that receive ATA types even when unsupported npm is not enabled.
 */
-const SUPPORTED_PACKAGES = new Set([
+const DEFAULT_PACKAGES = new Set([
 	"framer",
 	"framer-motion",
 	"react",
@@ -1487,14 +1443,12 @@ var Installer = class {
 	requestDependencyVersions;
 	ata;
 	processedImports = /* @__PURE__ */ new Set();
-	packageManagerPackages = /* @__PURE__ */ new Set();
-	packageJsonRefreshPromise = Promise.resolve();
 	initializationPromise = null;
 	pinnedTypeVersions = { ...DEFAULT_PINNED_TYPE_VERSIONS };
 	pinnedTypeVersionsPromise = null;
 	constructor(config) {
 		this.projectDir = config.projectDir;
-		this.npmStrategy = config.npmStrategy ?? "none";
+		this.npmStrategy = config.npmStrategy;
 		this.requestDependencyVersions = config.requestDependencyVersions ?? (async (packages) => Object.fromEntries(packages.map((packageName) => [packageName, null])));
 		const seenPackages = /* @__PURE__ */ new Set();
 		this.ata = setupTypeAcquisition({
@@ -1553,16 +1507,21 @@ var Installer = class {
 		return this.initializationPromise;
 	}
 	/**
-	* Fire-and-forget processing of a component file to fetch missing types.
+	* Process component files to fetch missing types or add `package.json` dependencies.
 	* JSON files are ignored.
 	*/
-	process(fileName, content) {
-		if (!content || JSON_EXTENSION_REGEX.test(fileName)) return;
-		Promise.resolve().then(async () => {
-			await this.processImports(fileName, content);
-		}).catch((err) => {
-			debug(`Type installer failed for ${fileName}`, err);
-		});
+	async processFiles(files) {
+		const packageNames = /* @__PURE__ */ new Set();
+		for (const file of files) {
+			if (!file.content || JSON_EXTENSION_REGEX.test(file.name)) continue;
+			try {
+				const imports = await extractNpmPackageNames(file.content);
+				for (const packageName of imports) packageNames.add(packageName);
+			} catch (err) {
+				debug(`Type installer failed to parse imports for ${file.name}`, err);
+			}
+		}
+		await this.processNpmPackages(packageNames, files.length);
 	}
 	async initializeProject() {
 		await Promise.all([
@@ -1575,83 +1534,48 @@ var Installer = class {
 		]);
 		if (this.npmStrategy === "package-manager") {
 			await this.resolvePinnedTypeVersions();
-			await this.enqueuePackageJsonRefresh(await this.collectPackageManagerPackageNames());
 			return;
 		}
 		this.pinnedTypeVersionsPromise = this.resolvePinnedTypeVersions();
 		Promise.resolve().then(async () => {
-			const coreImports = await this.buildPinnedImports(CORE_LIBRARIES);
-			const packageJsonDeps = this.npmStrategy === "acquire-types" ? Object.keys(this.pinnedTypeVersions).filter((name) => !SUPPORTED_PACKAGES.has(name)) : [];
-			const imports = [...coreImports, ...await this.buildPinnedImports(packageJsonDeps)].join("\n");
-			await this.ata(imports);
+			await this.ata((await this.buildPinnedImports(CORE_LIBRARIES)).join("\n"));
 		}).catch((err) => {
 			debug("Type installation failed", err);
 		});
 	}
-	async processImports(fileName, content) {
-		const allImports = extractImports(content).filter((i) => i.type === "npm");
-		if (allImports.length === 0) return;
+	async processNpmPackages(packageNames, fileCount) {
+		const allPackageNames = [...packageNames];
 		if (this.npmStrategy === "package-manager") {
-			await this.enqueuePackageJsonRefresh(allImports.map((imp) => getBasePackageName(imp.name)));
+			for (const packageName of [...CORE_LIBRARIES, ...PACKAGE_MANAGER_DEV_DEPENDENCIES]) allPackageNames.push(packageName);
+			try {
+				await this.updatePackageJsonDependencies(allPackageNames);
+			} catch (err) {
+				warn("Could not update package.json dependency versions", err);
+			}
 			return;
 		}
-		const imports = this.npmStrategy === "acquire-types" ? allImports : allImports.filter((i) => this.isSupportedPackage(i.name));
-		if (allImports.length - imports.length > 0 && this.npmStrategy !== "acquire-types") 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;
+		if (allPackageNames.length === 0) return;
+		let packagesForAta;
+		if (this.npmStrategy === "acquire-types") packagesForAta = allPackageNames;
+		else {
+			packagesForAta = allPackageNames.filter((packageName) => this.isDefaultPackage(packageName));
+			const unsupportedPackages = allPackageNames.filter((packageName) => !this.isDefaultPackage(packageName));
+			if (unsupportedPackages.length > 0) debug(`Skipping unsupported packages: ${unsupportedPackages.join(", ")} (use --unsupported-npm to enable)`);
+		}
+		if (packagesForAta.length === 0) return;
 		await this.pinnedTypeVersionsPromise;
-		if (this.npmStrategy === "acquire-types") await this.resolvePackageJsonPins();
-		const hash = imports.map((imp) => this.pinImport(imp.name)).sort().join(",");
+		const hash = packagesForAta.map((packageName) => this.pinImport(packageName)).sort().join(",");
 		if (this.processedImports.has(hash)) return;
 		this.processedImports.add(hash);
-		debug(`Processing imports for ${fileName} (${imports.length} packages)`);
-		const filteredContent = this.npmStrategy === "acquire-types" ? content : await this.buildFilteredImports(imports);
+		debug(`Processing imports from ${fileCount} ${fileCount === 1 ? "file" : "files"} (${packagesForAta.length} packages)`);
 		try {
-			await this.ata(filteredContent);
+			await this.ata((await this.buildPinnedImports(packagesForAta)).join("\n"));
 		} catch (err) {
-			warn(`Type fetching failed for ${fileName}`);
-			debug(`ATA error for ${fileName}:`, err);
+			warn("Type fetching failed");
+			debug("ATA error:", err);
 		}
 	}
-	async collectPackageManagerPackageNames() {
-		const packageNames = new Set([...CORE_LIBRARIES, ...PACKAGE_MANAGER_DEV_DEPENDENCIES]);
-		await this.addPackageNamesFromDirectory(path.join(this.projectDir, "files"), packageNames);
-		return [...packageNames];
-	}
-	async addPackageNamesFromDirectory(directory, packageNames) {
-		let entries;
-		try {
-			entries = await fs.readdir(directory, { withFileTypes: true });
-		} catch {
-			return;
-		}
-		await Promise.all(entries.map(async (entry) => {
-			const entryPath = path.join(directory, entry.name);
-			if (entry.isDirectory()) {
-				await this.addPackageNamesFromDirectory(entryPath, packageNames);
-				return;
-			}
-			if (!entry.isFile() || JSON_EXTENSION_REGEX.test(entry.name)) return;
-			try {
-				const content = await fs.readFile(entryPath, "utf-8");
-				for (const imported of extractImports(content).filter((i) => i.type === "npm")) packageNames.add(getBasePackageName(imported.name));
-			} catch {}
-		}));
-	}
-	async enqueuePackageJsonRefresh(packageNames) {
-		const missingPackageNames = packageNames.map((name) => getBasePackageName(name)).filter((name) => {
-			if (this.packageManagerPackages.has(name)) return false;
-			this.packageManagerPackages.add(name);
-			return true;
-		});
-		if (missingPackageNames.length === 0) return this.packageJsonRefreshPromise;
-		this.packageJsonRefreshPromise = this.packageJsonRefreshPromise.then(async () => {
-			await this.refreshPackageJsonFromPlugin(missingPackageNames);
-		}).catch((err) => {
-			warn("Could not refresh package.json dependency versions", err);
-		});
-		return this.packageJsonRefreshPromise;
-	}
-	async refreshPackageJsonFromPlugin(packageNames) {
+	async updatePackageJsonDependencies(packageNames) {
 		const uniquePackageNames = [...new Set(packageNames)].sort();
 		const versions = await this.requestDependencyVersions(uniquePackageNames);
 		const packagePath = path.join(this.projectDir, "package.json");
@@ -1675,26 +1599,19 @@ var Installer = class {
 			}
 		}
 		if (!changed) return;
-		pkg.dependencies = dependencies;
-		pkg.devDependencies = devDependencies;
+		pkg.dependencies = sortDependencyMap(dependencies);
+		pkg.devDependencies = sortDependencyMap(devDependencies);
 		await fs.writeFile(packagePath, JSON.stringify(pkg, null, 4));
-		success("Updated dependencies. Run your package manager to install them.");
+		status("Updated dependencies. Run your package manager to install them.");
 		debug(`Updated package.json dependency versions for ${uniquePackageNames.join(", ")}`);
 	}
 	/**
-	* Check if a package is in the supported list.
-	* Also checks for subpath imports (e.g., "framer/build" -> "framer")
+	* Check if a package receives ATA types without unsupported npm enabled.
 	*/
-	isSupportedPackage(pkgName) {
-		if (SUPPORTED_PACKAGES.has(pkgName)) return true;
+	isDefaultPackage(pkgName) {
+		if (DEFAULT_PACKAGES.has(pkgName)) return true;
 		const basePkg = getBasePackageName(pkgName);
-		return SUPPORTED_PACKAGES.has(basePkg);
-	}
-	/**
-	* Build synthetic import statements for ATA from filtered imports
-	*/
-	async buildFilteredImports(imports) {
-		return (await this.buildPinnedImports(imports.map((imp) => imp.name))).join("\n");
+		return DEFAULT_PACKAGES.has(basePkg);
 	}
 	async buildPinnedImports(imports) {
 		await this.pinnedTypeVersionsPromise;
@@ -1713,25 +1630,6 @@ var Installer = class {
 		} catch (err) {
 			debug(`Falling back to default ATA pins for ${FRAMER_PACKAGE_NAME}`, err);
 		}
-		if (this.npmStrategy === "acquire-types") await this.resolvePackageJsonPins();
-	}
-	async resolvePackageJsonPins() {
-		try {
-			const pkgPath = path.join(this.projectDir, "package.json");
-			const raw = await fs.readFile(pkgPath, "utf-8");
-			const pkg = JSON.parse(raw);
-			const allDeps = {
-				...pkg.dependencies ?? {},
-				...pkg.devDependencies ?? {}
-			};
-			for (const [name, range] of Object.entries(allDeps)) {
-				const version = normalizePinnedVersion(range);
-				if (version) this.pinnedTypeVersions[name] = version;
-			}
-			debug(`Resolved ${Object.keys(allDeps).length} package.json version pins`);
-		} catch {
-			warn("Could not read package.json for version pinning");
-		}
 	}
 	/**
 	* Build an import statement with an optional `// types:` version pin for ATA.
@@ -1899,6 +1797,19 @@ function getBasePackageName(packageName) {
 	if (packageName.startsWith("@")) return parts.length >= 2 ? parts.slice(0, 2).join("/") : packageName;
 	return parts[0] ?? packageName;
 }
+async function extractNpmPackageNames(code) {
+	const imports = await parseImports(code);
+	const seen = /* @__PURE__ */ new Set();
+	for (const imported of imports) {
+		const specifier = imported.moduleSpecifier;
+		if (specifier.type !== "package" || !specifier.isConstant || !specifier.value) continue;
+		seen.add(getBasePackageName(specifier.value));
+	}
+	return [...seen];
+}
+function sortDependencyMap(dependencies) {
+	return Object.fromEntries(Object.entries(dependencies).sort(([a], [b]) => a.localeCompare(b)));
+}
 function normalizePinnedVersion(version) {
 	if (!version) return void 0;
 	return /\d+\.\d+\.\d+(?:-[0-9A-Za-z.-]+)?/.exec(version)?.[0];
@@ -2094,12 +2005,6 @@ async function matchesProject(packageJsonPath, projectHash) {
 //#endregion
 //#region src/helpers/npm-strategy.ts
 const CONFIG_FIELD = "codeLink.npmStrategy";
-const LOCKFILES = [
-	"yarn.lock",
-	"pnpm-lock.yaml",
-	"package-lock.json",
-	"bun.lockb"
-];
 async function resolveNpmStrategy(config, projectDir) {
 	if (config.npmStrategy) {
 		debug(`Using npm strategy from CLI flag: ${config.npmStrategy}`);
@@ -2110,13 +2015,7 @@ async function resolveNpmStrategy(config, projectDir) {
 		debug(`Using npm strategy from package.json ${CONFIG_FIELD}: ${packageJsonStrategy}`);
 		return packageJsonStrategy;
 	}
-	const detectedLockfile = await detectLockfile(projectDir);
-	if (detectedLockfile) {
-		debug(`Using npm strategy package-manager from ${detectedLockfile}`);
-		return "package-manager";
-	}
-	debug("Using default npm strategy: none");
-	return "none";
+	debug("No npm strategy from CLI or package.json");
 }
 async function readPackageJsonStrategy(projectDir) {
 	try {
@@ -2131,15 +2030,8 @@ async function readPackageJsonStrategy(projectDir) {
 		return null;
 	}
 }
-async function detectLockfile(projectDir) {
-	for (const fileName of LOCKFILES) try {
-		await fs.access(path.join(projectDir, fileName));
-		return fileName;
-	} catch {}
-	return null;
-}
 function isNpmStrategy(value) {
-	return value === "none" || value === "acquire-types" || value === "package-manager";
+	return value === "acquire-types" || value === "package-manager";
 }
 
 //#endregion
@@ -3423,12 +3315,14 @@ async function writeFiles(files, ctx, options) {
 	const filesToWrite = options.echoPolicy === "skip-expected-echoes" ? filterEchoedFiles(files, runtime.memory) : files;
 	if (options.echoPolicy === "skip-expected-echoes" && filesToWrite.length !== files.length) debug(`Skipped ${pluralize(files.length - filesToWrite.length, "echoed change")}`);
 	const results = await writeRemoteFiles(filesToWrite, runtime.workspace.filesDir, runtime.memory);
+	const installerFiles = [];
 	for (const result of results) {
 		if (!result.ok) continue;
 		if (!options.silent) fileDown(result.path);
 		runtime.memory.recordSyncedContent(result.path, result.file.content, result.file.modifiedAt ?? Date.now());
-		runtime.installer?.process(result.path, result.file.content);
+		if (!options.silent) installerFiles.push(result.file);
 	}
+	await processInstallerFiles(runtime, installerFiles);
 }
 async function deleteFiles(fileNames, ctx) {
 	const { runtime } = ctx;
@@ -3455,7 +3349,10 @@ async function sendLocalChange(fileName, content, ctx) {
 	})) return;
 	runtime.memory.armContentEcho(fileName, content);
 	fileUp(fileName);
-	runtime.installer?.process(fileName, content);
+	await processInstallerFiles(runtime, [{
+		name: fileName,
+		content
+	}]);
 }
 async function sendFileDelete(fileNames, ctx) {
 	if (fileNames.length === 0) return;
@@ -3551,19 +3448,22 @@ async function applySyncComplete(effect, ctx) {
 	const wasDisconnected = runtime.disconnectUi.wasRecentlyDisconnected();
 	let shouldShutdown = !!config.once;
 	let shouldTryGitInit = false;
+	let statusMessage = null;
 	if (wasDisconnected) {
 		const didShow = runtime.disconnectUi.didShowNotice();
 		shouldShutdown = didShow && !!config.once;
 		if (didShow) {
 			success(`Reconnected, synced ${pluralize(effect.totalCount, "file")} (${effect.updatedCount} updated, ${effect.unchangedCount} unchanged)`);
-			status(syncCompleteStatusMessage(config));
+			statusMessage = syncCompleteStatusMessage(config);
 		}
 	} else {
 		const message = syncCompleteSuccessMessage(runtime, effect);
 		if (message) success(message);
-		status(syncCompleteStatusMessage(config));
+		statusMessage = syncCompleteStatusMessage(config);
 		shouldTryGitInit = !!(runtime.workspace.projectDirCreated && runtime.workspace.projectDir);
 	}
+	await processAllInstallerFiles(ctx);
+	if (statusMessage) status(statusMessage);
 	await sendToPlugin(syncState.socket, {
 		type: "sync-status",
 		status: "ready"
@@ -3573,6 +3473,21 @@ async function applySyncComplete(effect, ctx) {
 	if (shouldTryGitInit && runtime.workspace.projectDir) tryGitInit(runtime.workspace.projectDir);
 	if (shouldShutdown) await shutdown();
 }
+async function processInstallerFiles(runtime, files) {
+	if (!runtime.installer || runtime.lastEmittedSyncStatus !== "ready") return;
+	if (files.length === 0) return;
+	try {
+		await runtime.installer.processFiles(files);
+	} catch (err) {
+		debug("Type installer failed", err);
+	}
+}
+async function processAllInstallerFiles(ctx) {
+	const { runtime } = ctx;
+	if (!runtime.installer || !runtime.workspace.filesDir) return;
+	const files = await listFiles(runtime.workspace.filesDir);
+	await runtime.installer.processFiles(files);
+}
 async function flushPendingSyncComplete(ctx) {
 	const result = ctx.runtime.claimPendingSyncComplete();
 	if (result.status === "ready") await applySyncComplete({
@@ -4073,7 +3988,6 @@ async function start(config) {
 const { version } = createRequire(import.meta.url)("../package.json");
 const program = new Command();
 function parseUnsupportedNpmMode(mode) {
-	if (mode === void 0) return "acquire-types";
 	if (mode === "acquire-types" || mode === "package-manager") return mode;
 	throw new InvalidArgumentError("unsupported npm mode must be 'acquire-types' or 'package-manager'");
 }
@@ -4084,7 +3998,7 @@ program.exitOverride((err) => {
 	}
 	throw err;
 });
-program.name("framer-code-link").description("Sync Framer code components to your local filesystem").version(version).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("--once", "Exit after the initial sync completes").option("-v, --verbose", "Enable verbose logging").option("--log-level <level>", "Set log level (debug, info, warn, error)").option("--dangerously-auto-delete", "Automatically delete remote files without confirmation").option("--unsupported-npm [mode]", "Handle unsupported npm packages (acquire-types or package-manager)", parseUnsupportedNpmMode).action(async (projectHash, options) => {
+program.name("framer-code-link").description("Sync Framer code components to your local filesystem").version(version).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("--once", "Exit after the initial sync completes").option("-v, --verbose", "Enable verbose logging").option("--log-level <level>", "Set log level (debug, info, warn, error)").option("--dangerously-auto-delete", "Automatically delete remote files without confirmation").addOption(new Option("--unsupported-npm [mode]", "Handle unsupported npm packages (default without mode: acquire-types; modes: acquire-types, package-manager)").argParser(parseUnsupportedNpmMode).preset("acquire-types")).action(async (projectHash, options) => {
 	if (!projectHash) {
 		const detected = await getProjectHashFromCwd();
 		if (detected) projectHash = detected;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framer-code-link",
-  "version": "0.21.0-alpha.1",
+  "version": "0.21.0-alpha.3",
   "description": "CLI tool for syncing Framer code components - controller-centric architecture",
   "main": "dist/index.mjs",
   "type": "module",
@@ -26,6 +26,7 @@
     "@typescript/ata": "^0.9.8",
     "chokidar": "^5.0.0",
     "commander": "^14.0.3",
+    "parse-imports": "^3.0.0",
     "prettier": "^3.7.4",
     "typescript": "^5.9.3",
     "ws": "^8.18.3"