improvement: enhance findComponent filename matching

Author: frenicohansen

assets/js/live_vue/utils.test.ts

@@ -11,6 +11,14 @@ describe("findComponent", () => {
     template: "<div>Create Workspace Component</div>",
   }
 
+  const MockListComponent = {
+    template: "<div>List Component</div>",
+  }
+
+  const MockAccountListComponent = {
+    template: "<div>Account List Component</div>",
+  }
+
   it("should find exact component match for 'workspace'", () => {
     const components: ComponentMap = {
       "../../lib/live_vue/web/pages/workspace.vue": MockComponent,
@@ -69,7 +77,7 @@ describe("findComponent", () => {
     }
 
     const result1 = findComponent(components, "workspace")
-    const result2 = findComponent(components, "dashboard")
+    const result2 = findComponent(components, "dashboard/index.vue")
 
     expect(result1).toBe(MockComponent)
     expect(result2).toBe(MockCreateWorkspaceComponent)
@@ -85,4 +93,118 @@ describe("findComponent", () => {
 
     expect(result).toBe(MockComponent)
   })
+
+  it("should find component by path suffix when filename is ambiguous", () => {
+    const components: ComponentMap = {
+      "../../lib/live_vue/web/components/workspaces/List.vue": MockListComponent,
+      "../../lib/live_vue/web/components/accounts/List.vue": MockAccountListComponent,
+    }
+
+    const result1 = findComponent(components, "workspaces/List")
+    const result2 = findComponent(components, "accounts/List")
+
+    expect(result1).toBe(MockListComponent)
+    expect(result2).toBe(MockAccountListComponent)
+  })
+
+  it("should throw ambiguous error when filename matches multiple components", () => {
+    const components: ComponentMap = {
+      "../../lib/live_vue/web/components/workspaces/List.vue": MockListComponent,
+      "../../lib/live_vue/web/components/accounts/List.vue": MockAccountListComponent,
+    }
+
+    expect(() => findComponent(components, "List")).toThrow("Component 'List' is ambiguous")
+  })
+
+  it("should match by shorter path suffix", () => {
+    const components: ComponentMap = {
+      "../../lib/live_vue/web/pages/admin/workspaces/List.vue": MockListComponent,
+    }
+
+    const result = findComponent(components, "workspaces/List")
+
+    expect(result).toBe(MockListComponent)
+  })
+
+  it("should handle components with .vue extension in name", () => {
+    const components: ComponentMap = {
+      "../../lib/live_vue/web/components/workspaces/List.vue": MockListComponent,
+    }
+
+    const result = findComponent(components, "workspaces/List.vue")
+
+    expect(result).toBe(MockListComponent)
+  })
+
+  it("should match longest unambiguous path suffix", () => {
+    const components: ComponentMap = {
+      "../../lib/live_vue/web/admin/accounts/settings/Form.vue": MockComponent,
+      "../../lib/live_vue/web/public/accounts/settings/Form.vue": MockListComponent,
+    }
+
+    const result = findComponent(components, "admin/accounts/settings/Form")
+
+    expect(result).toBe(MockComponent)
+  })
+
+  it("should handle deep nested index.vue files", () => {
+    const components: ComponentMap = {
+      "../../lib/live_vue/web/pages/admin/settings/profile/index.vue": MockComponent,
+    }
+
+    const result1 = findComponent(components, "profile")
+    const result2 = findComponent(components, "settings/profile")
+    const result3 = findComponent(components, "admin/settings/profile")
+
+    expect(result1).toBe(MockComponent)
+    expect(result2).toBe(MockComponent)
+    expect(result3).toBe(MockComponent)
+  })
+
+  it("should throw ambiguous error for multiple index.vue matches", () => {
+    const components: ComponentMap = {
+      "../../lib/live_vue/web/pages/admin/settings/index.vue": MockComponent,
+      "../../lib/live_vue/web/pages/user/settings/index.vue": MockListComponent,
+    }
+
+    expect(() => findComponent(components, "settings")).toThrow("Component 'settings' is ambiguous")
+  })
+
+  it("should handle mix of index.vue and regular .vue files", () => {
+    const components: ComponentMap = {
+      "../../lib/live_vue/web/pages/workspace/index.vue": MockComponent,
+      "../../lib/live_vue/web/pages/workspace.vue": MockListComponent,
+    }
+    
+    expect(() => findComponent(components, "workspace")).toThrow("Component 'workspace' is ambiguous")
+  })
+
+  it("should handle empty component name gracefully", () => {
+    const components: ComponentMap = {
+      "../../lib/live_vue/web/pages/workspace.vue": MockComponent,
+    }
+
+    expect(() => findComponent(components, "")).toThrow("Component '' not found!")
+  })
+
+  it("should handle names with multiple slashes", () => {
+    const components: ComponentMap = {
+      "../../lib/live_vue/web/pages/admin/users/settings/Form.vue": MockComponent,
+    }
+
+    const result = findComponent(components, "admin/users/settings/Form")
+
+    expect(result).toBe(MockComponent)
+  })
+
+  it("should not match partial directory names", () => {
+    const components: ComponentMap = {
+      "../../lib/live_vue/web/components/workspace-list/Item.vue": MockComponent,
+      "../../lib/live_vue/web/components/workspace/Item.vue": MockListComponent,
+    }
+
+    const result = findComponent(components, "workspace/Item")
+
+    expect(result).toBe(MockListComponent)
+  })
 })

assets/js/live_vue/utils.ts

@@ -33,15 +33,43 @@ export const flatMapKeys = <T>(
  * @returns The component if found, otherwise throws an error with a list of available components.
  */
 export const findComponent = (components: ComponentMap, name: string): ComponentOrComponentPromise => {
-  // we're looking for a component by exact filename match
+  const nameParts = name.replace(/\.vue$/, '').split('/').filter(part => part !== 'index')
+  const matches: [string, ComponentOrComponentPromise][] = []
+
   for (const [key, value] of Object.entries(components)) {
-    const fileName = key.split('/').pop() // Get the actual filename
-    if (fileName === `${name}.vue` || (fileName === 'index.vue' && key.endsWith(`/${name}/index.vue`))) {
-      return value
+    let keyParts = key.split('/')
+    
+    if (keyParts[keyParts.length - 1] === 'index.vue') {
+      keyParts = keyParts.slice(0, -1)
+    } else {
+      keyParts[keyParts.length - 1] = keyParts[keyParts.length - 1].replace(/\.vue$/, '')
+    }
+    
+    if (nameParts.length <= keyParts.length) {
+      let isMatch = true
+      for (let i = 0; i < nameParts.length; i++) {
+        const keyPart = keyParts[keyParts.length - nameParts.length + i]
+        if (nameParts[i] !== keyPart) {
+          isMatch = false
+          break
+        }
+      }
+      
+      if (isMatch) {
+        matches.push([key, value])
+      }
     }
   }
 
+  if (matches.length === 1) return matches[0][1]
+
+  if (matches.length > 1) {
+    const matchList = matches.map(([key]) => key).join('\n')
+    throw new Error(`Component '${name}' is ambiguous. Found multiple matches:\n\n${matchList}\n\n`)
+  }
+
   // a helpful message for the user
+
   const availableComponents = Object.keys(components)
     .map(key => key.replace("../../lib/", "").replace("/index.vue", "").replace(".vue", "").replace("./", ""))
     .filter(key => !key.startsWith("_build"))