[fix] #515: infer SFC names

packages/ui/.gitignore

@@ -1,3 +1,4 @@
 storybook-static
 cypress/screenshots
-ts-build
+ts-build
+.vite-inspect

packages/ui/package.json

@@ -88,6 +88,7 @@
     "unplugin-auto-import": "^0.15.1",
     "unplugin-icons": "^0.15.3",
     "vite": "^4.1.4",
+    "vite-plugin-inspect": "^0.7.18",
     "vite-plugin-windicss": "^1.8.10",
     "vue-tsc": "^1.2.0",
     "windicss": "^3.5.4"

packages/ui/src/components/all-components.spec.ts

@@ -3,12 +3,7 @@ import { COMPONENTS } from './all-components'
 import { getComponentName } from '../util'
 
 for (const [nameExpected, component] of Object.entries(COMPONENTS)) {
-  // FIXME it seems that automatic name inference does not work anymore
-  //       https://vuejs.org/api/sfc-spec.html#automatic-name-inference
-  //       Should we really set it? Reasons:
-  //       - DevTools inspection and dev warnings (should work without setting `.name`, need to check)
-  //       - Global components registration
-  test.skip(`Component "${nameExpected}" should have the same actual "name"`, () => {
+  test(`Component "${nameExpected}" should have the same actual "name"`, () => {
     const nameActual = getComponentName(component)
 
     expect(nameActual).toEqual(nameExpected)

packages/ui/vite.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from 'vitest/config'
 // @ts-ignore FIXME update when this package fixes its `exports`
 import windiPlugin from 'vite-plugin-windicss'
 import vuePlugin from '@vitejs/plugin-vue'
+import inspectPlugin from 'vite-plugin-inspect'
 import type { RootNode, TemplateChildNode } from '@vue/compiler-core'
 import iconsPlugin from 'unplugin-icons/vite'
 import svgPlugin from '@soramitsu-ui/vite-plugin-svg'
@@ -83,6 +84,19 @@ function checkAutoImportedTypesPlugin(checkDts = resolve('auto-imports.d.ts')):
   }
 }
 
+function sfcInferNamePlugin(): Plugin {
+  return {
+    name: 'soramitsu-ui:sfc-infer-name',
+    transform(src, id) {
+      if (/\.vue(\?vue&type=script&setup=true)?/.test(id)) {
+        const code = src.replace(/(__name: "(\w+)")/, `$1, name: "$2"`)
+        return { code, map: null }
+      }
+      return undefined
+    },
+  }
+}
+
 export default defineConfig({
   test: {
     include: ['src/**/*.spec.ts'],
@@ -114,6 +128,7 @@ export default defineConfig({
         },
       },
     }),
+    sfcInferNamePlugin(),
     iconsPlugin(),
     svgPlugin({
       svgo: {
@@ -151,6 +166,9 @@ export default defineConfig({
       },
     }),
     checkAutoImportedTypesPlugin(),
+
+    // save for future debugging needs
+    // inspectPlugin({ build: true, outputDir: '.vite-inspect' }),
   ],
   build: {
     sourcemap: true,