Update from feedback

huntercaron · huntercaron · commit 504fb7c06862 · 2026-03-10T12:28:40.000+01:00
diff --git a/plugins/code-link/src/App.tsx b/plugins/code-link/src/App.tsx
@@ -1,9 +1,7 @@
 import {
-    type CliToPluginMessage,
     type ConflictSummary,
     createSyncTracker,
     type Mode,
-    normalizeCodeFileName,
     type PendingDelete,
     type ProjectInfo,
     type SyncTracker,
@@ -12,6 +10,7 @@ import {
 import { framer } from "framer-plugin"
 import { useCallback, useEffect, useReducer, useRef, useState } from "react"
 import { CodeFilesAPI } from "./api"
+import { createMessageHandler } from "./messages"
 import { copyToClipboard } from "./utils/clipboard"
 import { computeLineDiff } from "./utils/diffing"
 import * as log from "./utils/logger"
@@ -535,93 +534,3 @@ function ConflictPanel({ conflicts, onResolve }: ConflictPanelProps) {
         </main>
     )
 }
-
-function createMessageHandler({
-    dispatch,
-    api,
-    syncTracker,
-}: {
-    dispatch: (action: Action) => void
-    api: CodeFilesAPI
-    syncTracker: SyncTracker
-}) {
-    return async function handleMessage(message: CliToPluginMessage, socket: WebSocket) {
-        log.debug("Handling message:", message.type)
-
-        switch (message.type) {
-            case "request-files":
-                log.debug("Publishing snapshot to CLI")
-                await api.publishSnapshot(socket)
-                dispatch({
-                    type: "set-mode",
-                    mode: "syncing",
-                })
-                break
-            case "file-change":
-                log.debug("Applying remote change:", message.fileName)
-                await api.applyRemoteChange(message.fileName, message.content, socket)
-                syncTracker.remember(normalizeCodeFileName(message.fileName), message.content)
-                dispatch({ type: "set-mode", mode: "idle" })
-                break
-            case "file-rename": {
-                const { oldFileName, newFileName, content } = message
-                log.debug(`Renaming file: ${oldFileName} → ${newFileName}`)
-                if (await api.applyRemoteRename(oldFileName, newFileName, socket)) {
-                    syncTracker.forget(oldFileName)
-                    syncTracker.remember(normalizeCodeFileName(newFileName), content)
-                }
-                dispatch({ type: "set-mode", mode: "idle" })
-                break
-            }
-            case "file-delete":
-                if (message.requireConfirmation) {
-                    log.debug(`Delete requires confirmation for ${message.fileNames.length} file(s)`)
-                    const files: PendingDelete[] = []
-                    for (const fileName of message.fileNames) {
-                        const content = await api.readCurrentContent(fileName)
-                        // Only include files that exist in Framer (have content to restore)
-                        if (content !== undefined) {
-                            files.push({ fileName, content })
-                        }
-                    }
-                    if (files.length === 0) {
-                        // No files exist in Framer, nothing to confirm
-                        break
-                    }
-                    dispatch({
-                        type: "pending-deletes",
-                        files,
-                    })
-                } else {
-                    for (const fileName of message.fileNames) {
-                        log.debug("Deleting file:", fileName)
-                        await api.applyRemoteDelete(fileName)
-                    }
-                }
-                break
-            case "conflicts-detected":
-                log.debug(`Received ${message.conflicts.length} conflicts from CLI`)
-                dispatch({ type: "conflicts", conflicts: message.conflicts })
-                break
-            case "conflict-version-request": {
-                log.debug(`Fetching conflict versions for ${message.conflicts.length} files`)
-                const versions = await api.fetchConflictVersions(message.conflicts)
-                log.debug(`Sending version response for ${versions.length} files`)
-                socket.send(
-                    JSON.stringify({
-                        type: "conflict-version-response",
-                        versions,
-                    })
-                )
-                break
-            }
-            case "sync-complete":
-                log.debug("Sync complete, transitioning to idle")
-                dispatch({ type: "set-mode", mode: "idle" })
-                break
-            default:
-                log.warn("Unknown message type:", (message as unknown as { type: string }).type)
-                break
-        }
-    }
-}
diff --git a/plugins/code-link/src/api.test.ts b/plugins/code-link/src/api.test.ts
@@ -221,6 +221,30 @@ describe("CodeFilesAPI", () => {
         expect(trackerRemember).not.toHaveBeenCalled()
     })
 
+    it("updates an existing extensionless Framer file instead of creating a duplicate", async () => {
+        const { api, socket, tracker, trackerRemember } = setup()
+        const oldContent = "export const New = 1"
+        const newContent = "export const New = 2"
+        const existing = createCodeFile({ name: "New", content: oldContent })
+
+        framerMock.getCodeFiles.mockResolvedValueOnce([existing])
+
+        await api.applyRemoteChange("New", newContent, socket as unknown as WebSocket)
+
+        expect(existing.setFileContent).toHaveBeenCalledWith(newContent)
+        expect(framerMock.createCodeFile).not.toHaveBeenCalled()
+        const [syncMessage] = getSentMessages(socket)
+        expectFileSyncedMessage(syncMessage, "New.tsx")
+
+        socket.send.mockClear()
+        mockCodeFiles([createCodeFile({ name: "New", content: newContent })])
+
+        await api.handleFramerFilesChanged(socket as unknown as WebSocket, tracker)
+
+        expect(socket.send).not.toHaveBeenCalled()
+        expect(trackerRemember).not.toHaveBeenCalled()
+    })
+
     it("seeds snapshot before a remote write finishes to avoid echoing subscription updates", async () => {
         const { api, socket, tracker, trackerRemember } = setup()
         const oldContent = "export const Race = 1"
@@ -312,6 +336,53 @@ describe("CodeFilesAPI", () => {
         expect(trackerRemember).not.toHaveBeenCalled()
     })
 
+    it("finds an extensionless rename source using its normalized name", async () => {
+        const { api, socket, tracker, trackerRemember } = setup()
+        const content = "export const Old = 1"
+        const existing = createCodeFile({ name: "Old", content })
+
+        await publishSnapshotAndClear({
+            api,
+            socket,
+            files: [createCodeFile({ name: "Old", content })],
+        })
+
+        framerMock.getCodeFiles.mockResolvedValueOnce([existing])
+
+        await expect(api.applyRemoteRename("Old.tsx", "New", socket as unknown as WebSocket)).resolves.toBe(true)
+
+        expect(existing.rename).toHaveBeenCalledWith("New.tsx")
+
+        socket.send.mockClear()
+        mockCodeFiles([createCodeFile({ name: "New", content })])
+
+        await api.handleFramerFilesChanged(socket as unknown as WebSocket, tracker)
+
+        expect(socket.send).not.toHaveBeenCalled()
+        expect(trackerRemember).not.toHaveBeenCalled()
+    })
+
+    it("deletes an extensionless Framer file using a normalized name", async () => {
+        const { api, socket, tracker } = setup()
+        const existing = createCodeFile({ name: "DeleteMe", content: "export const DeleteMe = 1" })
+
+        await publishSnapshotAndClear({
+            api,
+            socket,
+            files: [createCodeFile({ name: "DeleteMe", content: "export const DeleteMe = 1" })],
+        })
+
+        framerMock.getCodeFiles.mockResolvedValueOnce([existing])
+
+        await api.applyRemoteDelete("DeleteMe.tsx")
+
+        expect(existing.remove).toHaveBeenCalled()
+
+        mockCodeFiles([])
+        await api.handleFramerFilesChanged(socket as unknown as WebSocket, tracker)
+        expect(socket.send).not.toHaveBeenCalled()
+    })
+
     it("returns an error when rename cannot fetch code files", async () => {
         const { api, socket } = setup()
 
diff --git a/plugins/code-link/src/api.ts b/plugins/code-link/src/api.ts
@@ -1,4 +1,4 @@
-import { canonicalFileName, normalizeCodeFileName, type SyncTracker } from "@code-link/shared"
+import { normalizeCodeFileName, type SyncTracker } from "@code-link/shared"
 import { framer } from "framer-plugin"
 import * as log from "./utils/logger"
 
@@ -26,7 +26,7 @@ export class CodeFilesAPI {
         return codeFiles.map(file => {
             const source = file.path || file.name
             return {
-                name: canonicalFileName(source),
+                name: normalizeCodeFileName(source),
                 content: file.content,
             }
         })
@@ -111,12 +111,12 @@ export class CodeFilesAPI {
 
     async applyRemoteDelete(fileName: string) {
         await deleteFramerFile(fileName)
-        this.lastSnapshot.delete(canonicalFileName(fileName))
+        this.lastSnapshot.delete(normalizeCodeFileName(fileName))
     }
 
     async readCurrentContent(fileName: string) {
         const files = await this.getCodeFilesWithCanonicalNames()
-        const normalizedName = canonicalFileName(fileName)
+        const normalizedName = normalizeCodeFileName(fileName)
         return files.find(file => file.name === normalizedName)?.content
     }
 
@@ -136,7 +136,7 @@ export class CodeFilesAPI {
 
         const versionPromises = requests.map(async request => {
             const file = codeFiles.find(
-                f => canonicalFileName(f.path || f.name) === canonicalFileName(request.fileName)
+                f => normalizeCodeFileName(f.path || f.name) === normalizeCodeFileName(request.fileName)
             )
 
             if (!file) {
@@ -174,7 +174,7 @@ export class CodeFilesAPI {
     }
 
     async applyRemoteRename(oldFileName: string, newFileName: string, socket: WebSocket): Promise<boolean> {
-        const sourceFileName = canonicalFileName(oldFileName)
+        const sourceFileName = normalizeCodeFileName(oldFileName)
         const targetFileName = normalizeCodeFileName(newFileName)
 
         let codeFiles
@@ -193,7 +193,7 @@ export class CodeFilesAPI {
             return false
         }
 
-        const existing = codeFiles.find(file => canonicalFileName(file.path || file.name) === sourceFileName)
+        const existing = codeFiles.find(file => normalizeCodeFileName(file.path || file.name) === sourceFileName)
 
         if (!existing) {
             this.lastSnapshot.delete(sourceFileName)
@@ -242,7 +242,7 @@ export class CodeFilesAPI {
 async function upsertFramerFile(fileName: string, content: string): Promise<number | undefined> {
     const normalisedName = normalizeCodeFileName(fileName)
     const codeFiles = await framer.getCodeFiles()
-    const existing = codeFiles.find(file => canonicalFileName(file.path || file.name) === normalisedName)
+    const existing = codeFiles.find(file => normalizeCodeFileName(file.path || file.name) === normalisedName)
 
     if (existing) {
         await existing.setFileContent(content)
@@ -257,9 +257,9 @@ async function upsertFramerFile(fileName: string, content: string): Promise<numb
 }
 
 async function deleteFramerFile(fileName: string) {
-    const normalisedName = canonicalFileName(fileName)
+    const normalisedName = normalizeCodeFileName(fileName)
     const codeFiles = await framer.getCodeFiles()
-    const existing = codeFiles.find(file => canonicalFileName(file.path || file.name) === normalisedName)
+    const existing = codeFiles.find(file => normalizeCodeFileName(file.path || file.name) === normalisedName)
 
     if (existing) {
         await existing.remove()
diff --git a/plugins/code-link/src/messages.ts b/plugins/code-link/src/messages.ts
@@ -0,0 +1,105 @@
+import {
+    type CliToPluginMessage,
+    type ConflictSummary,
+    type Mode,
+    normalizeCodeFileName,
+    type PendingDelete,
+    type SyncTracker,
+} from "@code-link/shared"
+import type { CodeFilesAPI } from "./api"
+import * as log from "./utils/logger"
+
+type MessageHandlerAction =
+    | { type: "set-mode"; mode: Mode }
+    | { type: "pending-deletes"; files: PendingDelete[] }
+    | { type: "conflicts"; conflicts: ConflictSummary[] }
+
+export function createMessageHandler({
+    dispatch,
+    api,
+    syncTracker,
+}: {
+    dispatch: (action: MessageHandlerAction) => void
+    api: CodeFilesAPI
+    syncTracker: SyncTracker
+}) {
+    return async function handleMessage(message: CliToPluginMessage, socket: WebSocket) {
+        log.debug("Handling message:", message.type)
+
+        switch (message.type) {
+            case "request-files":
+                log.debug("Publishing snapshot to CLI")
+                await api.publishSnapshot(socket)
+                dispatch({
+                    type: "set-mode",
+                    mode: "syncing",
+                })
+                break
+            case "file-change":
+                log.debug("Applying remote change:", message.fileName)
+                await api.applyRemoteChange(message.fileName, message.content, socket)
+                syncTracker.remember(normalizeCodeFileName(message.fileName), message.content)
+                dispatch({ type: "set-mode", mode: "idle" })
+                break
+            case "file-rename": {
+                const { oldFileName, newFileName, content } = message
+                log.debug(`Renaming file: ${oldFileName} → ${newFileName}`)
+                if (await api.applyRemoteRename(oldFileName, newFileName, socket)) {
+                    syncTracker.forget(normalizeCodeFileName(oldFileName))
+                    syncTracker.remember(normalizeCodeFileName(newFileName), content)
+                }
+                dispatch({ type: "set-mode", mode: "idle" })
+                break
+            }
+            case "file-delete":
+                if (message.requireConfirmation) {
+                    log.debug(`Delete requires confirmation for ${message.fileNames.length} file(s)`)
+                    const files: PendingDelete[] = []
+                    for (const fileName of message.fileNames) {
+                        const content = await api.readCurrentContent(fileName)
+                        // Only include files that exist in Framer (have content to restore)
+                        if (content !== undefined) {
+                            files.push({ fileName, content })
+                        }
+                    }
+                    if (files.length === 0) {
+                        // No files exist in Framer, nothing to confirm
+                        break
+                    }
+                    dispatch({
+                        type: "pending-deletes",
+                        files,
+                    })
+                } else {
+                    for (const fileName of message.fileNames) {
+                        log.debug("Deleting file:", fileName)
+                        await api.applyRemoteDelete(fileName)
+                    }
+                }
+                break
+            case "conflicts-detected":
+                log.debug(`Received ${message.conflicts.length} conflicts from CLI`)
+                dispatch({ type: "conflicts", conflicts: message.conflicts })
+                break
+            case "conflict-version-request": {
+                log.debug(`Fetching conflict versions for ${message.conflicts.length} files`)
+                const versions = await api.fetchConflictVersions(message.conflicts)
+                log.debug(`Sending version response for ${versions.length} files`)
+                socket.send(
+                    JSON.stringify({
+                        type: "conflict-version-response",
+                        versions,
+                    })
+                )
+                break
+            }
+            case "sync-complete":
+                log.debug("Sync complete, transitioning to idle")
+                dispatch({ type: "set-mode", mode: "idle" })
+                break
+            default:
+                log.warn("Unknown message type:", (message as unknown as { type: string }).type)
+                break
+        }
+    }
+}
