[fix] #515: infer SFC names with a vite plugin

Author: 0x009922

packages/ui/package.json

@@ -87,6 +87,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

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vitest/config'
 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'
@@ -82,6 +83,22 @@ function checkAutoImportedTypesPlugin(checkDts = resolve('auto-imports.d.ts')):
   }
 }
 
+function sfcInferNamePlugin(): Plugin {
+  return {
+    name: 'soramitsu-ui:sfc-infer-name',
+    transform(src, id) {
+      if (/\.vue$/.test(id)) {
+        const componentName = path.basename(id, '.vue')
+        return {
+          code: src + `\n;_sfc_main.name = "${componentName}";`,
+          sourcemap: null,
+        }
+      }
+      return undefined
+    },
+  }
+}
+
 export default defineConfig({
   test: {
     include: ['src/**/*.spec.ts'],
@@ -113,6 +130,7 @@ export default defineConfig({
         },
       },
     }),
+    sfcInferNamePlugin(),
     iconsPlugin(),
     svgPlugin({
       svgo: {
@@ -150,6 +168,9 @@ export default defineConfig({
       },
     }),
     checkAutoImportedTypesPlugin(),
+
+    // save for future debugging needs
+    // inspectPlugin({ build: true, outputDir: '.vite-inspect' }),
   ],
   build: {
     sourcemap: true,