feat(component): Add support for better naming of /index.vue compon…

…ents (#1994)
vuejs · Feb 4, 2024 · 687d238 · 687d238
1 parent dbea1f0
commit 687d238
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,3 @@
+<template>
+  <h2>Index component</h2>
+</template>