From c60db40dff1617308373868a0cf0358711332d56 Mon Sep 17 00:00:00 2001 From: Dmitry Balashov Date: Mon, 27 Mar 2023 09:31:31 +0600 Subject: [PATCH] [fix] #515: infer SFC names with a vite plugin --- packages/ui/package.json | 1 + .../ui/src/components/all-components.spec.ts | 7 +- packages/ui/vite.config.ts | 21 +++ pnpm-lock.yaml | 128 ++++++++++++------ 4 files changed, 109 insertions(+), 48 deletions(-) diff --git a/packages/ui/package.json b/packages/ui/package.json index fec56688..b87682c4 100644 --- a/packages/ui/package.json +++ b/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" diff --git a/packages/ui/src/components/all-components.spec.ts b/packages/ui/src/components/all-components.spec.ts index 2d61b647..9cea3973 100644 --- a/packages/ui/src/components/all-components.spec.ts +++ b/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) diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts index c73f91e7..320d83fa 100644 --- a/packages/ui/vite.config.ts +++ b/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, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 43a87d83..d81404f7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -100,6 +100,7 @@ importers: 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: ^3.2 vue-tsc: ^1.2.0 @@ -158,6 +159,7 @@ importers: unplugin-auto-import: 0.15.1_eyuzbu3slicqoyahr23e4yih2u unplugin-icons: 0.15.3 vite: 4.1.4_sass@1.58.3 + vite-plugin-inspect: 0.7.18_rollup@3.18.0+vite@4.1.4 vite-plugin-windicss: 1.8.10_vite@4.1.4 vue-tsc: 1.2.0_typescript@5.0.1-rc windicss: 3.5.6 @@ -173,7 +175,7 @@ importers: svgo: 3.0.2 devDependencies: tsup: 6.6.3 - vite: 4.1.4_@types+node@18.14.6 + vite: 4.1.4_sass@1.58.3 packages: @@ -2372,6 +2374,10 @@ packages: fastq: 1.15.0 dev: true + /@polka/url/1.0.0-next.21: + resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==} + dev: true + /@popperjs/core/2.11.6: resolution: {integrity: sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==} dev: false @@ -2516,7 +2522,7 @@ packages: '@storybook/csf-plugin': 7.0.0-beta.62 '@storybook/csf-tools': 7.0.0-beta.62 '@storybook/global': 5.0.0 - '@storybook/mdx2-csf': 1.0.0-next.5 + '@storybook/mdx2-csf': 1.0.0-next.6 '@storybook/node-logger': 7.0.0-beta.62 '@storybook/postinstall': 7.0.0-beta.62 '@storybook/preview-api': 7.0.0-beta.62 @@ -2793,7 +2799,7 @@ packages: '@storybook/client-logger': 7.0.0-beta.62 '@storybook/core-common': 7.0.0-beta.62 '@storybook/csf-plugin': 7.0.0-beta.62 - '@storybook/mdx2-csf': 1.0.0-next.5 + '@storybook/mdx2-csf': 1.0.0-next.6 '@storybook/node-logger': 7.0.0-beta.62 '@storybook/preview': 7.0.0-beta.62 '@storybook/preview-api': 7.0.0-beta.62 @@ -2824,12 +2830,12 @@ packages: telejson: 7.0.4 dev: true - /@storybook/channel-postmessage/7.0.0-rc.1: - resolution: {integrity: sha512-lIj0oDecEOSy6ZSNXBgWs0hqnjKudrDxuRyR0gAC5w5lZ8sMaj6er9caqaii61S4HRAcT5312RpA0V1J746hZw==} + /@storybook/channel-postmessage/7.0.0-rc.8: + resolution: {integrity: sha512-SHx9X5HtNV7/XzcjxzEYFM/3Xxn2pIsNtzFMIpe9YhfMQLGKXgmm9Hv5o5s4GXZquJN6w646XE90eOol6cwTDg==} dependencies: - '@storybook/channels': 7.0.0-rc.1 - '@storybook/client-logger': 7.0.0-rc.1 - '@storybook/core-events': 7.0.0-rc.1 + '@storybook/channels': 7.0.0-rc.8 + '@storybook/client-logger': 7.0.0-rc.8 + '@storybook/core-events': 7.0.0-rc.8 '@storybook/global': 5.0.0 qs: 6.11.1 telejson: 7.0.4 @@ -2848,8 +2854,8 @@ packages: resolution: {integrity: sha512-WG0bH5EYIi2Eh7iRNq9ScvQlzuBZqtlg0CV8FdLdEeDp6LuYRgIabdjON0PDGagwpir0ozDAqF5sRMwYkhuVPg==} dev: true - /@storybook/channels/7.0.0-rc.1: - resolution: {integrity: sha512-hBER6gliJxsrYEbWlXNljf0/1ybIlYCtaK0Vcgqdw/zmTLG6hEbBpVnxJh56T3mD0Beng8ro9D4EkcLZGQ1LlA==} + /@storybook/channels/7.0.0-rc.8: + resolution: {integrity: sha512-2tI/ECbQcXjncYGLVdrttNT8adIp6kV/bnQGJWmF5hBXZ7Izwyq1WRPTgPT++RihmOOTHvkRx4GCKfwluOrNpA==} dev: true /@storybook/cli/7.0.0-beta.62: @@ -2907,8 +2913,8 @@ packages: '@storybook/global': 5.0.0 dev: true - /@storybook/client-logger/7.0.0-rc.1: - resolution: {integrity: sha512-ltdDjd5wwq1xyFmA7Q7PT0Rx4Jrd0u8m0hnjnlou7qjKd7J+tqi8019oC4t5CSWRhl8lDg0QbI11LUM2SmkRMA==} + /@storybook/client-logger/7.0.0-rc.8: + resolution: {integrity: sha512-6pBwnK0vB0mgkO8opiHbZxBVGyaKFSpJXglfx8F15gIwA3r1njgtOZvvYx+03DCz0ExaTiSXrrbWp39mI8mo5w==} dependencies: '@storybook/global': 5.0.0 dev: true @@ -2989,8 +2995,8 @@ packages: resolution: {integrity: sha512-/301tBWbUnhv4tTg5feTR3r1iZ+ep+drEX3ii61SfQNWLugeo9sLIldtxRuEElT6X3Xypw4nCnd+fc3IKDs/Xw==} dev: true - /@storybook/core-events/7.0.0-rc.1: - resolution: {integrity: sha512-kp5p7U8H4X+XnJwzm3S9UM1vOREZ/bziQ34882FevPq7HaAQ5JI7p9gQO50JdTbDoe8gtn8cgfzxSkqO6FlY1w==} + /@storybook/core-events/7.0.0-rc.8: + resolution: {integrity: sha512-KsKf+Ob6zQ8+IJ9oDD5xqASwYGzcjT08azBjSt4yocHIJ3mY741h88YDS0wcwnM+JrV6iFYlY0hiK35lnBEddA==} dev: true /@storybook/core-server/7.0.0-beta.62: @@ -3109,14 +3115,14 @@ packages: '@storybook/preview-api': 7.0.0-beta.62 dev: true - /@storybook/instrumenter/7.0.0-rc.1: - resolution: {integrity: sha512-spihMm1Xb+lw1Vac5Uo+06m2jdDEhGGkM/nesXO3ZkYyNatC0IGXgU9NyELI6YCkhEprwK3MIXoo8in97Kjk+w==} + /@storybook/instrumenter/7.0.0-rc.8: + resolution: {integrity: sha512-esRTjLLJJAKsTun/8u/wvsS+OPlwB2eal+ZAo0cBo+YTpkw0A6R+HunhNU1elZ8ztbJsZxP2drPprrFGXgeaLQ==} dependencies: - '@storybook/channels': 7.0.0-rc.1 - '@storybook/client-logger': 7.0.0-rc.1 - '@storybook/core-events': 7.0.0-rc.1 + '@storybook/channels': 7.0.0-rc.8 + '@storybook/client-logger': 7.0.0-rc.8 + '@storybook/core-events': 7.0.0-rc.8 '@storybook/global': 5.0.0 - '@storybook/preview-api': 7.0.0-rc.1 + '@storybook/preview-api': 7.0.0-rc.8 dev: true /@storybook/manager-api/7.0.0-beta.62_biqbaboplfbrettd7655fr4n2y: @@ -3148,8 +3154,8 @@ packages: resolution: {integrity: sha512-TQKKuVpXG10EfCqKASTfH0Wdd+WEUTt04jFjKgXQ5Hwq+PuQ+Ff/FmODyOIHwYYWEtIacW1wZr1CiVeT8LtqFQ==} dev: true - /@storybook/mdx2-csf/1.0.0-next.5: - resolution: {integrity: sha512-02w0sgGZaK1agT050yCVhJ+o4rLHANWvLKWjQjeAsYbjneLC5ITt+3GDB4jRiWwJboZ8dHW1fGSK1Vg5fA34aQ==} + /@storybook/mdx2-csf/1.0.0-next.6: + resolution: {integrity: sha512-m6plojocU/rmrqWd26yvm8D+oHZPZ6PtSSFmZIgpNDEPVmc8s4fBD6LXOAB5MiPI5f8KLUr2HVhOMZ97o5pDTw==} dev: true /@storybook/node-logger/7.0.0-beta.62: @@ -3186,16 +3192,16 @@ packages: util-deprecate: 1.0.2 dev: true - /@storybook/preview-api/7.0.0-rc.1: - resolution: {integrity: sha512-KrXMxCffKsXLsWb8ptXmLcbetZOPLbPpnKU43S1iHnvc5Jp89lrJBpztHZsUnuwGMJ1K5ajdZd+l/kGs75ru6Q==} + /@storybook/preview-api/7.0.0-rc.8: + resolution: {integrity: sha512-K45I81s2ZOoeAmKC8DP0HPhR67tr94pkgKddaoWLQJHBgVq9GKuy7QCcnn2zYKOFd1d/uqcnrQyg4AkmcjkVCg==} dependencies: - '@storybook/channel-postmessage': 7.0.0-rc.1 - '@storybook/channels': 7.0.0-rc.1 - '@storybook/client-logger': 7.0.0-rc.1 - '@storybook/core-events': 7.0.0-rc.1 + '@storybook/channel-postmessage': 7.0.0-rc.8 + '@storybook/channels': 7.0.0-rc.8 + '@storybook/client-logger': 7.0.0-rc.8 + '@storybook/core-events': 7.0.0-rc.8 '@storybook/csf': 0.0.2-next.10 '@storybook/global': 5.0.0 - '@storybook/types': 7.0.0-rc.1 + '@storybook/types': 7.0.0-rc.8 '@types/qs': 6.9.7 dequal: 2.0.3 lodash: 4.17.21 @@ -3254,8 +3260,8 @@ packages: /@storybook/testing-library/0.0.14-next.1: resolution: {integrity: sha512-1CAl40IKIhcPaCC4pYCG0b9IiYNymktfV/jTrX7ctquRY3akaN7f4A1SippVHosksft0M+rQTFE0ccfWW581fw==} dependencies: - '@storybook/client-logger': 7.0.0-rc.1 - '@storybook/instrumenter': 7.0.0-rc.1 + '@storybook/client-logger': 7.0.0-rc.8 + '@storybook/instrumenter': 7.0.0-rc.8 '@testing-library/dom': 8.20.0 '@testing-library/user-event': 13.5.0_yxlyej73nftwmh2fiao7paxmlm ts-dedent: 2.2.0 @@ -3284,10 +3290,10 @@ packages: file-system-cache: 2.0.2 dev: true - /@storybook/types/7.0.0-rc.1: - resolution: {integrity: sha512-wWFGKzXXD04j52iHTE7mxCz0zkJH0J/wh7pSsYAxUgyQaYHIIqLZUb9PLWVWf1v6RiSSa5k0HXhFWnfBOJeVIQ==} + /@storybook/types/7.0.0-rc.8: + resolution: {integrity: sha512-Jz3MLLKs+Jy8dZVd+HVHuKAbxa7xcF/MLfUNldu0HxtJr3b7ybUlvjWjT5h2I60V5TYkWGf9wcKmegI6TGiJXQ==} dependencies: - '@storybook/channels': 7.0.0-rc.1 + '@storybook/channels': 7.0.0-rc.8 '@types/babel__core': 7.20.0 '@types/express': 4.17.17 file-system-cache: 2.0.2 @@ -8100,6 +8106,11 @@ packages: engines: {node: '>=4'} dev: true + /mrmime/1.0.1: + resolution: {integrity: sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==} + engines: {node: '>=10'} + dev: true + /ms/2.0.0: resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==} dev: true @@ -9548,6 +9559,15 @@ packages: semver: 7.0.0 dev: true + /sirv/2.0.2: + resolution: {integrity: sha512-4Qog6aE29nIjAOKe/wowFTxOdmbEZKb+3tsLljaBRzJwtqto0BChD2zzH0LhgCSXiI+V7X+Y45v14wBZQ1TK3w==} + engines: {node: '>= 10'} + dependencies: + '@polka/url': 1.0.0-next.21 + mrmime: 1.0.1 + totalist: 3.0.0 + dev: true + /sisteransi/1.0.5: resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==} dev: true @@ -10080,6 +10100,11 @@ packages: resolution: {integrity: sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==} dev: true + /totalist/3.0.0: + resolution: {integrity: sha512-eM+pCBxXO/njtF7vdFsHuqb+ElbxqtI4r5EAvk6grfAFyJ6IvWlSkfZ5T9ozC6xWw3Fj1fGoSmrl0gUs46JVIw==} + engines: {node: '>=6'} + dev: true + /tough-cookie/2.5.0: resolution: {integrity: sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==} engines: {node: '>=0.8'} @@ -10580,7 +10605,7 @@ packages: mlly: 1.1.1 pathe: 1.1.0 picocolors: 1.0.0 - vite: 4.1.4_@types+node@18.14.6 + vite: 4.2.1_@types+node@18.14.6 transitivePeerDependencies: - '@types/node' - less @@ -10591,6 +10616,25 @@ packages: - terser dev: true + /vite-plugin-inspect/0.7.18_rollup@3.18.0+vite@4.1.4: + resolution: {integrity: sha512-hyIxg2qJaRs0LoB3Tqy9ML8yEublIzTzFVXmNhgw2jsjETJUXeR6iQ4YPHk3Q6kTbbiwgoPPyXimlAfEwektnA==} + engines: {node: '>=14'} + peerDependencies: + vite: ^3.1.0 || ^4.0.0 + dependencies: + '@antfu/utils': 0.7.2 + '@rollup/pluginutils': 5.0.2_rollup@3.18.0 + debug: 4.3.4_supports-color@8.1.1 + fs-extra: 11.1.0 + kolorist: 1.7.0 + sirv: 2.0.2 + ufo: 1.1.1 + vite: 4.1.4_sass@1.58.3 + transitivePeerDependencies: + - rollup + - supports-color + dev: true + /vite-plugin-windicss/1.8.10_vite@4.1.4: resolution: {integrity: sha512-scywsuzo46lcTBohspmF0WiwhWEte6p+OUVrX4yr7VMRvLHMHVfLtJReyD5pppjijG7YOwVsZn7XBWWZtF658Q==} peerDependencies: @@ -10605,7 +10649,7 @@ packages: - supports-color dev: true - /vite/4.1.4_@types+node@18.14.6: + /vite/4.1.4_sass@1.58.3: resolution: {integrity: sha512-3knk/HsbSTKEin43zHu7jTwYWv81f8kgAL99G5NWBcA1LKvtvcVAC4JjBH1arBunO9kQka+1oGbrMKOjk4ZrBg==} engines: {node: ^14.18.0 || >=16.0.0} hasBin: true @@ -10630,17 +10674,17 @@ packages: terser: optional: true dependencies: - '@types/node': 18.14.6 esbuild: 0.16.17 postcss: 8.4.21 resolve: 1.22.1 rollup: 3.18.0 + sass: 1.58.3 optionalDependencies: fsevents: 2.3.2 dev: true - /vite/4.1.4_sass@1.58.3: - resolution: {integrity: sha512-3knk/HsbSTKEin43zHu7jTwYWv81f8kgAL99G5NWBcA1LKvtvcVAC4JjBH1arBunO9kQka+1oGbrMKOjk4ZrBg==} + /vite/4.2.1_@types+node@18.14.6: + resolution: {integrity: sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==} engines: {node: ^14.18.0 || >=16.0.0} hasBin: true peerDependencies: @@ -10664,11 +10708,11 @@ packages: terser: optional: true dependencies: - esbuild: 0.16.17 + '@types/node': 18.14.6 + esbuild: 0.17.11 postcss: 8.4.21 resolve: 1.22.1 rollup: 3.18.0 - sass: 1.58.3 optionalDependencies: fsevents: 2.3.2 dev: true @@ -10716,7 +10760,7 @@ packages: tinybench: 2.4.0 tinypool: 0.3.1 tinyspy: 1.1.1 - vite: 4.1.4_@types+node@18.14.6 + vite: 4.2.1_@types+node@18.14.6 vite-node: 0.29.2_@types+node@18.14.6 why-is-node-running: 2.2.2 transitivePeerDependencies: