From 2e60f5396c9f0ddd0e42e1014a61e3b55536e98e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivan=20Nikoli=C4=87?= <niksy5@gmail.com>
Date: Thu, 10 Oct 2024 10:46:37 +0200
Subject: [PATCH] feat: Add support for better naming of `index.vue` components

---
 packages/devtools-kit/src/core/component/utils/index.ts  | 6 +++++-
 .../basic/src/components/IndexComponent/index.vue        | 9 +++++++++
 packages/playground/basic/src/pages/Home.vue             | 2 ++
 packages/shared/src/general.ts                           | 6 ++++--
 4 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 packages/playground/basic/src/components/IndexComponent/index.vue

diff --git a/packages/devtools-kit/src/core/component/utils/index.ts b/packages/devtools-kit/src/core/component/utils/index.ts
index a53d10f80..39afe95f3 100644
--- a/packages/devtools-kit/src/core/component/utils/index.ts
+++ b/packages/devtools-kit/src/core/component/utils/index.ts
@@ -3,7 +3,11 @@ import { basename, classify } from '@vue/devtools-shared'
 import { Fragment } from '../../../shared/stub-vue'
 
 function getComponentTypeName(options: VueAppInstance['type']) {
-  return options.name || options._componentTag || options.__VUE_DEVTOOLS_COMPONENT_GUSSED_NAME__ || options.__name
+  const name = options.name || options._componentTag || options.__VUE_DEVTOOLS_COMPONENT_GUSSED_NAME__ || options.__name
+  if (name === 'index' && options.__file?.endsWith('index.vue')) {
+    return ''
+  }
+  return name
 }
 
 function getComponentFileName(options: VueAppInstance['type']) {
diff --git a/packages/playground/basic/src/components/IndexComponent/index.vue b/packages/playground/basic/src/components/IndexComponent/index.vue
new file mode 100644
index 000000000..065c3a0d5
--- /dev/null
+++ b/packages/playground/basic/src/components/IndexComponent/index.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+const text = ref('Index')
+</script>
+
+<template>
+  <div>
+    {{ text }} Component
+  </div>
+</template>
diff --git a/packages/playground/basic/src/pages/Home.vue b/packages/playground/basic/src/pages/Home.vue
index d3242f5fa..085d5893c 100644
--- a/packages/playground/basic/src/pages/Home.vue
+++ b/packages/playground/basic/src/pages/Home.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import Foo from '../components/Foo.vue'
+import IndexComponent from '../components/IndexComponent/index.vue'
 
 const visible = ref(false)
 
@@ -23,6 +24,7 @@ const toRefObj = toRefs(obj)
   <div class="m-auto mt-3 h-80 w-120 flex flex-col items-center justify-center rounded bg-[#363636]">
     Home
     <Foo v-if="visible" />
+    <IndexComponent v-if="visible" />
     <img src="/vite.svg" alt="Vite Logo">
     <button class="w-30 cursor-pointer" @click="visible = !visible">
       Toggle Foo
diff --git a/packages/shared/src/general.ts b/packages/shared/src/general.ts
index f0062f475..aecd38549 100644
--- a/packages/shared/src/general.ts
+++ b/packages/shared/src/general.ts
@@ -28,10 +28,12 @@ export function kebabize(str: string) {
 }
 
 export function basename(filename: string, ext: string): string {
-  const normalizedFilename = filename.replace(/^[a-z]:/i, '').replace(/\\/g, '/')
+  let normalizedFilename = filename.replace(/^[a-z]:/i, '').replace(/\\/g, '/')
+  if (normalizedFilename.endsWith(`index${ext}`)) {
+    normalizedFilename = normalizedFilename.replace(`/index${ext}`, ext)
+  }
   const lastSlashIndex = normalizedFilename.lastIndexOf('/')
   const baseNameWithExt = normalizedFilename.substring(lastSlashIndex + 1)
-
   if (ext) {
     const extIndex = baseNameWithExt.lastIndexOf(ext)
     return baseNameWithExt.substring(0, extIndex)