feat(component): Add support for better naming of /index.vue components (#1994)

Author: niksy

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'
 

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()

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,
   )
 }

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

packages/shell-dev-vue3/src/IndexComponent/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <h2>Index component</h2>
+</template>