framer-code-link 0.18.0 → 0.20.0

package/dist/index.mjs

@@ -562,6 +562,7 @@ async function getOrCreateCerts() {
 		if (existingKey || existingCert) await invalidateIncompleteServerBundle();
 		status("Generating local certificates to connect securely. You may be asked for your password.");
 		await generateCerts(mkcertPath);
+		status("Successfully generated certificates.");
 		return {
 			key: await fs.readFile(SERVER_KEY_PATH, "utf-8"),
 			cert: await fs.readFile(SERVER_CERT_PATH, "utf-8")
@@ -1452,9 +1453,21 @@ async function findSkillsSourceDir() {
 const FETCH_TIMEOUT_MS = 6e4;
 const MAX_FETCH_RETRIES = 3;
 const MAX_CONSECUTIVE_FAILURES = 10;
-const REACT_TYPES_VERSION = "18.3.12";
-const REACT_DOM_TYPES_VERSION = "18.3.1";
-const CORE_LIBRARIES = ["framer-motion", "framer"];
+const FRAMER_PACKAGE_NAME = "framer";
+const CORE_LIBRARIES = [
+	"framer-motion",
+	"framer",
+	"react",
+	"react-dom"
+];
+/** Packages with pinned type versions — used by ATA's `// types:` comment syntax */
+const DEFAULT_PINNED_TYPE_VERSIONS = {
+	"framer-motion": "12.34.3",
+	"react": "18.2.0",
+	"react-dom": "18.2.0",
+	"@types/react": "18.2.0",
+	"@types/react-dom": "18.2.0"
+};
 const JSON_EXTENSION_REGEX = /\.json$/i;
 /**
 * Packages that are officially supported for type acquisition.
@@ -1464,6 +1477,7 @@ const SUPPORTED_PACKAGES = new Set([
 	"framer",
 	"framer-motion",
 	"react",
+	"react-dom",
 	"@types/react",
 	"eventemitter3",
 	"csstype",
@@ -1479,6 +1493,8 @@ var Installer = class {
 	ata;
 	processedImports = /* @__PURE__ */ new Set();
 	initializationPromise = null;
+	pinnedTypeVersions = { ...DEFAULT_PINNED_TYPE_VERSIONS };
+	pinnedTypeVersionsPromise = null;
 	constructor(config) {
 		this.projectDir = config.projectDir;
 		this.allowUnsupportedNpm = config.allowUnsupportedNpm ?? false;
@@ -1559,10 +1575,12 @@ var Installer = class {
 			this.ensureSkills(),
 			this.ensureGitignore()
 		]);
+		this.pinnedTypeVersionsPromise = this.resolvePinnedTypeVersions();
 		Promise.resolve().then(async () => {
-			await this.ensureReact18Types();
-			const coreImports = CORE_LIBRARIES.map((lib) => `import "${lib}";`).join("\n");
-			await this.ata(coreImports);
+			const coreImports = await this.buildPinnedImports(CORE_LIBRARIES);
+			const packageJsonDeps = this.allowUnsupportedNpm ? Object.keys(this.pinnedTypeVersions).filter((name) => !SUPPORTED_PACKAGES.has(name)) : [];
+			const imports = [...coreImports, ...await this.buildPinnedImports(packageJsonDeps)].join("\n");
+			await this.ata(imports);
 		}).catch((err) => {
 			debug("Type installation failed", err);
 		});
@@ -1573,11 +1591,13 @@ var Installer = class {
 		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(",");
+		await this.pinnedTypeVersionsPromise;
+		if (this.allowUnsupportedNpm) await this.resolvePackageJsonPins();
+		const hash = imports.map((imp) => this.pinImport(imp.name)).sort().join(",");
 		if (this.processedImports.has(hash)) return;
 		this.processedImports.add(hash);
 		debug(`Processing imports for ${fileName} (${imports.length} packages)`);
-		const filteredContent = this.allowUnsupportedNpm ? content : this.buildFilteredImports(imports);
+		const filteredContent = this.allowUnsupportedNpm ? content : await this.buildFilteredImports(imports);
 		try {
 			await this.ata(filteredContent);
 		} catch (err) {
@@ -1597,8 +1617,55 @@ var Installer = class {
 	/**
 	* Build synthetic import statements for ATA from filtered imports
 	*/
-	buildFilteredImports(imports) {
-		return imports.map((imp) => `import "${imp.name}";`).join("\n");
+	async buildFilteredImports(imports) {
+		return (await this.buildPinnedImports(imports.map((imp) => imp.name))).join("\n");
+	}
+	async buildPinnedImports(imports) {
+		await this.pinnedTypeVersionsPromise;
+		return imports.map((name) => this.pinImport(name));
+	}
+	async resolvePinnedTypeVersions() {
+		try {
+			const framerManifest = await fetchNpmPackageManifest(FRAMER_PACKAGE_NAME);
+			const framerVersion = normalizePinnedVersion(framerManifest.version);
+			if (framerVersion) this.pinnedTypeVersions.framer = framerVersion;
+			for (const [pkg, defaultVersion] of Object.entries(DEFAULT_PINNED_TYPE_VERSIONS)) {
+				const manifestDep = pkg.replace(/^@types\//, "");
+				this.pinnedTypeVersions[pkg] = normalizePinnedVersion(getManifestDependencyVersion(framerManifest, manifestDep)) ?? defaultVersion;
+			}
+			debug(`Resolved ATA pins from ${FRAMER_PACKAGE_NAME}@${framerVersion ?? "latest"} (framer-motion ${this.pinnedTypeVersions["framer-motion"]}, react ${this.pinnedTypeVersions.react})`);
+		} catch (err) {
+			debug(`Falling back to default ATA pins for ${FRAMER_PACKAGE_NAME}`, err);
+		}
+		if (this.allowUnsupportedNpm) 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.
+	* Resolves the base package name for subpath imports (e.g., "framer-motion/dist" -> "framer-motion").
+	*/
+	pinImport(name) {
+		const base = name.startsWith("@") ? name.split("/").slice(0, 2).join("/") : name.split("/")[0];
+		const version = this.pinnedTypeVersions[base];
+		if (version) return `import "${name}"; // types: ${version}`;
+		return `import "${name}";`;
 	}
 	async writeTypeFile(receivedPath, code) {
 		const normalized = receivedPath.replace(/^\//, "");
@@ -1622,7 +1689,8 @@ var Installer = class {
 			const response = await fetch(`https://registry.npmjs.org/${pkgName}`);
 			if (!response.ok) return;
 			const npmData = await response.json();
-			const version = npmData["dist-tags"]?.latest;
+			const pinnedVersion = this.pinnedTypeVersions[pkgName];
+			const version = pinnedVersion ? this.findMatchingVersion(Object.keys(npmData.versions ?? {}), pinnedVersion) : npmData["dist-tags"]?.latest;
 			if (!version || !npmData.versions?.[version]) return;
 			const pkg = npmData.versions[version];
 			if (pkg.exports) for (const key of Object.keys(pkg.exports)) pkg.exports[key] = fixExportTypes(pkg.exports[key]);
@@ -1630,6 +1698,17 @@ var Installer = class {
 			await fs.writeFile(pkgJsonPath, JSON.stringify(pkg, null, 2));
 		} catch {}
 	}
+	/**
+	* Find the best matching version from a list of available versions.
+	* Supports exact versions ("18.2.0") — returns exact match if available.
+	*/
+	findMatchingVersion(versions, pinned) {
+		if (versions.includes(pinned)) return pinned;
+		const [major, minor] = pinned.split(".");
+		const prefix = `${major}.${minor}.`;
+		const matching = versions.filter((v) => v.startsWith(prefix));
+		return matching.length > 0 ? matching[matching.length - 1] : void 0;
+	}
 	async ensureTsConfig() {
 		const tsconfigPath = path.join(this.projectDir, "tsconfig.json");
 		try {
@@ -1735,61 +1814,19 @@ declare module "*.json"
 		await fs.writeFile(gitignorePath, content);
 		debug("Created .gitignore");
 	}
-	async ensureReact18Types() {
-		const reactTypesDir = path.join(this.projectDir, "node_modules/@types/react");
-		const reactFiles = [
-			"package.json",
-			"index.d.ts",
-			"global.d.ts",
-			"jsx-runtime.d.ts",
-			"jsx-dev-runtime.d.ts"
-		];
-		if (await this.hasTypePackage(reactTypesDir, REACT_TYPES_VERSION, reactFiles)) debug("📦 React types (from cache)");
-		else {
-			debug("Downloading React 18 types...");
-			await this.downloadTypePackage("@types/react", REACT_TYPES_VERSION, reactTypesDir, reactFiles);
-		}
-		const reactDomDir = path.join(this.projectDir, "node_modules/@types/react-dom");
-		const reactDomFiles = [
-			"package.json",
-			"index.d.ts",
-			"client.d.ts"
-		];
-		if (await this.hasTypePackage(reactDomDir, REACT_DOM_TYPES_VERSION, reactDomFiles)) debug("📦 React DOM types (from cache)");
-		else await this.downloadTypePackage("@types/react-dom", REACT_DOM_TYPES_VERSION, reactDomDir, reactDomFiles);
-	}
-	async hasTypePackage(destinationDir, version, files) {
-		try {
-			const pkgJsonPath = path.join(destinationDir, "package.json");
-			const pkgJson = await fs.readFile(pkgJsonPath, "utf-8");
-			if (JSON.parse(pkgJson).version !== version) return false;
-			for (const file of files) {
-				if (file === "package.json") continue;
-				await fs.access(path.join(destinationDir, file));
-			}
-			return true;
-		} catch {
-			return false;
-		}
-	}
-	async downloadTypePackage(pkgName, version, destinationDir, files) {
-		const baseUrl = `https://unpkg.com/${pkgName}@${version}`;
-		await fs.mkdir(destinationDir, { recursive: true });
-		await Promise.all(files.map(async (file) => {
-			const destination = path.join(destinationDir, file);
-			try {
-				await fs.access(destination);
-				return;
-			} catch {}
-			try {
-				const response = await fetch(`${baseUrl}/${file}`);
-				if (!response.ok) return;
-				const content = await response.text();
-				await fs.writeFile(destination, content);
-			} catch {}
-		}));
-	}
 };
+function getManifestDependencyVersion(manifest, packageName) {
+	return manifest.peerDependencies?.[packageName] ?? manifest.dependencies?.[packageName];
+}
+function normalizePinnedVersion(version) {
+	if (!version) return void 0;
+	return /\d+\.\d+\.\d+(?:-[0-9A-Za-z.-]+)?/.exec(version)?.[0];
+}
+async function fetchNpmPackageManifest(packageName) {
+	const response = await fetchWithRetry(`https://registry.npmjs.org/${packageName}/latest`);
+	if (!response.ok) throw new Error(`Failed to fetch ${packageName} manifest: ${response.status}`);
+	return await response.json();
+}
 /**
 * Transform package.json exports to include .d.ts type paths
 */
@@ -3149,7 +3186,6 @@ async function executeEffect(effect, context) {
 * Starts the sync controller with the given configuration
 */
 async function start(config) {
-	status("Waiting for Plugin connection...");
 	const hashTracker = createHashTracker();
 	const fileMetadataCache = new FileMetadataCache();
 	const pendingRenameConfirmations = /* @__PURE__ */ new Map();
@@ -3191,6 +3227,7 @@ async function start(config) {
 		info("");
 		throw new Error("TLS certificate generation failed");
 	}
+	status("Waiting for Plugin connection...");
 	const connection = await initConnection(config.port, certs);
 	connection.on("handshake", (client, message) => {
 		debug(`Received handshake: ${message.projectName} (${message.projectId})`);

package/package.json

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