Component Lookup Improvements

assets/js/live_vue/utils.test.ts

@@ -0,0 +1,136 @@
+import { describe, it, expect } from "vitest"
+import { findComponent } from "./utils"
+import type { ComponentMap } from "./types"
+
+describe("findComponent", () => {
+  const MockWorkspaceComponent = {
+    template: "<div>Mock Component</div>",
+  }
+
+  const MockCreateWorkspaceComponent = {
+    template: "<div>Create Workspace Component</div>",
+  }
+
+  it("should find exact component match for 'workspace'", () => {
+    const components: ComponentMap = {
+      "../../lib/live_vue/web/pages/workspace.vue": MockWorkspaceComponent,
+      "../../lib/live_vue/web/pages/create-workspace.vue": MockCreateWorkspaceComponent,
+    }
+
+    const result = findComponent(components, "workspace")
+
+    expect(result).toBe(MockWorkspaceComponent)
+  })
+
+  it("should NOT match 'workspace' to 'create-workspace'", () => {
+    const components: ComponentMap = {
+      "../../lib/live_vue/web/pages/create-workspace.vue": MockCreateWorkspaceComponent,
+      "../../lib/live_vue/web/pages/workspace.vue": MockWorkspaceComponent,
+    }
+
+    const result = findComponent(components, "workspace")
+
+    expect(result).toBe(MockWorkspaceComponent)
+  })
+
+  it("should find 'create-workspace' component when requested", () => {
+    const components: ComponentMap = {
+      "../../lib/live_vue/web/pages/workspace.vue": MockWorkspaceComponent,
+      "../../lib/live_vue/web/pages/create-workspace.vue": MockCreateWorkspaceComponent,
+    }
+
+    const result = findComponent(components, "create-workspace")
+
+    expect(result).toBe(MockCreateWorkspaceComponent)
+  })
+
+  it("should throw error when component is not found", () => {
+    const components: ComponentMap = {
+      "../../lib/leuchtturm/web/pages/workspace.vue": MockWorkspaceComponent,
+    }
+
+    expect(() => findComponent(components, "nonexistent")).toThrow("Component 'nonexistent' not found!")
+  })
+
+  it("should handle index.vue files", () => {
+    const components: ComponentMap = {
+      "../../lib/live_vue/web/pages/workspace/index.vue": MockWorkspaceComponent,
+    }
+
+    const result = findComponent(components, "workspace")
+
+    expect(result).toBe(MockWorkspaceComponent)
+  })
+
+  it("should handle index.vue files with multiple nested paths", () => {
+    const components: ComponentMap = {
+      "../../lib/live_vue/web/pages/admin/workspace/index.vue": MockWorkspaceComponent,
+      "../../lib/live_vue/web/pages/public/dashboard/index.vue": MockCreateWorkspaceComponent,
+    }
+
+    const result1 = findComponent(components, "workspace")
+    const result2 = findComponent(components, "dashboard/index.vue")
+
+    expect(result1).toBe(MockWorkspaceComponent)
+    expect(result2).toBe(MockCreateWorkspaceComponent)
+  })
+
+  it("should avoid false matches due to substring matching", () => {
+    const components: ComponentMap = {
+      "../../lib/live_vue/web/pages/create-workspace.vue": MockCreateWorkspaceComponent,
+      "../../lib/live_vue/web/pages/workspace.vue": MockWorkspaceComponent,
+    }
+
+    const result = findComponent(components, "workspace")
+
+    expect(result).toBe(MockWorkspaceComponent)
+  })
+
+  it("should find component by path suffix", () => {
+    const components: ComponentMap = {
+      "../../lib/live_vue/web/components/admin/workspace.vue": MockWorkspaceComponent,
+      "../../lib/live_vue/web/components/public/workspace.vue": MockCreateWorkspaceComponent,
+    }
+
+    const result1 = findComponent(components, "admin/workspace")
+    const result2 = findComponent(components, "public/workspace.vue")
+
+    expect(result1).toBe(MockWorkspaceComponent)
+    expect(result2).toBe(MockCreateWorkspaceComponent)
+  })
+
+  it("should throw ambiguous error when filename matches multiple components", () => {
+    const components: ComponentMap = {
+      "../../lib/live_vue/web/components/workspace/index.vue": MockWorkspaceComponent,
+      "../../lib/live_vue/web/components/create/workspace.vue": MockCreateWorkspaceComponent,
+    }
+
+    expect(() => findComponent(components, "workspace")).toThrow("Component 'workspace' is ambiguous")
+  })
+
+  it("should throw ambiguous error for multiple index.vue matches", () => {
+    const components: ComponentMap = {
+      "../../lib/live_vue/web/pages/admin/workspace/index.vue": MockWorkspaceComponent,
+      "../../lib/live_vue/web/pages/user/workspace/index.vue": MockCreateWorkspaceComponent,
+    }
+
+    expect(() => findComponent(components, "workspace")).toThrow("Component 'workspace' is ambiguous")
+  })
+
+  it("should handle mix of index.vue and regular .vue files", () => {
+    const components: ComponentMap = {
+      "../../lib/live_vue/web/pages/workspace/index.vue": MockWorkspaceComponent,
+      "../../lib/live_vue/web/pages/workspace.vue": MockCreateWorkspaceComponent,
+    }
+
+    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": MockWorkspaceComponent,
+    }
+
+    expect(() => findComponent(components, "")).toThrow("Component '' not found!")
+  })
+})

assets/js/live_vue/utils.ts

@@ -33,14 +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 name or path suffix.
+  const nameParts = name.replace(/\.vue$/, '').split('/').filter(part => part !== 'index')
+  const matches: [string, ComponentOrComponentPromise][] = []
+
   for (const [key, value] of Object.entries(components)) {
-    if (key.endsWith(`${name}.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"))