From 687d23823d6cb57c2e35a945aa2912d0309e5c47 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivan=20Nikoli=C4=87?= <niksy5@gmail.com>
Date: Sun, 4 Feb 2024 12:38:07 +0100
Subject: [PATCH] feat(component): Add support for better naming of
 `/index.vue` components (#1994)

---
 packages/app-backend-vue3/src/components/util.ts     | 3 +--
 packages/app-backend-vue3/src/util.ts                | 9 ---------
 packages/shared-utils/src/util.ts                    | 8 ++++++--
 packages/shell-dev-vue3/src/App.vue                  | 3 +++
 packages/shell-dev-vue3/src/IndexComponent/index.vue | 3 +++
 5 files changed, 13 insertions(+), 13 deletions(-)
 create mode 100644 packages/shell-dev-vue3/src/IndexComponent/index.vue

diff --git a/packages/app-backend-vue3/src/components/util.ts b/packages/app-backend-vue3/src/components/util.ts
index a193c5a2e..11edccc79 100644
--- a/packages/app-backend-vue3/src/components/util.ts
+++ b/packages/app-backend-vue3/src/components/util.ts
@@ -1,5 +1,4 @@
-import { classify } from '@vue-devtools/shared-utils'
-import { basename } from '../util'
+import { classify, basename } from '@vue-devtools/shared-utils'
 import { ComponentInstance, App } from '@vue/devtools-api'
 import { BackendContext } from '@vue-devtools/app-backend-api'
 
diff --git a/packages/app-backend-vue3/src/util.ts b/packages/app-backend-vue3/src/util.ts
index 1e8efa9f3..c03747cfc 100644
--- a/packages/app-backend-vue3/src/util.ts
+++ b/packages/app-backend-vue3/src/util.ts
@@ -9,15 +9,6 @@ export function flatten (items) {
   }, [])
 }
 
-// Use a custom basename functions instead of the shimed version
-// because it doesn't work on Windows
-export function basename (filename, ext) {
-  return path.basename(
-    filename.replace(/^[a-zA-Z]:/, '').replace(/\\/g, '/'),
-    ext,
-  )
-}
-
 export function returnError (cb: () => any) {
   try {
     return cb()
diff --git a/packages/shared-utils/src/util.ts b/packages/shared-utils/src/util.ts
index 78bcdf1f4..60a092ee7 100644
--- a/packages/shared-utils/src/util.ts
+++ b/packages/shared-utils/src/util.ts
@@ -359,9 +359,13 @@ export function getCustomDateDetails (val: Date) {
 
 // Use a custom basename functions instead of the shimed version
 // because it doesn't work on Windows
-function basename (filename, ext) {
+export function basename (filename, ext) {
+  filename = filename.replace(/\\/g, '/')
+  if (filename.includes(`/index${ext}`)) {
+    filename = filename.replace(`/index${ext}`, ext)
+  }
   return path.basename(
-    filename.replace(/^[a-zA-Z]:/, '').replace(/\\/g, '/'),
+    filename.replace(/^[a-zA-Z]:/, ''),
     ext,
   )
 }
diff --git a/packages/shell-dev-vue3/src/App.vue b/packages/shell-dev-vue3/src/App.vue
index b850ccf20..cb58be6e2 100644
--- a/packages/shell-dev-vue3/src/App.vue
+++ b/packages/shell-dev-vue3/src/App.vue
@@ -21,6 +21,7 @@ import SetupScript from './SetupScript.vue'
 import SetupDataLike from './SetupDataLike.vue'
 import SetupTSScriptProps from './SetupTSScriptProps.vue'
 import DomOrder from './DomOrder.vue'
+import IndexComponent from './IndexComponent/index.vue'
 
 import { h, createApp } from 'vue'
 import SimplePlugin from './devtools-plugin/simple'
@@ -51,6 +52,7 @@ export default {
     SetupDataLike,
     SetupTSScriptProps,
     DomOrder,
+    IndexComponent,
     inline: {
       render: () => h('h3', 'Inline component definition'),
     },
@@ -122,6 +124,7 @@ export default {
   </div>
 
   <Child question="Life" />
+  <IndexComponent />
   <NestedMore />
   <NativeTypes ref="nativeTypes" />
   <EventEmit
diff --git a/packages/shell-dev-vue3/src/IndexComponent/index.vue b/packages/shell-dev-vue3/src/IndexComponent/index.vue
new file mode 100644
index 000000000..a7e5dfc24
--- /dev/null
+++ b/packages/shell-dev-vue3/src/IndexComponent/index.vue
@@ -0,0 +1,3 @@
+<template>
+  <h2>Index component</h2>
+</template>