Subscribe on changes!

[compiler-sfc] the `inlineTemplate` option makes it hard to expose component name to dev tools

avatar
Mar 1st 2022

What problem does this feature solve?

As previously discussed in private, the inlineTemplate option should always be turned on for production for best performance. https://github.com/vuejs/core/blob/5898629d723e82b68e9b17b91bf8b1a8390a3912/packages/compiler-sfc/src/compileScript.ts#L107-L114

But it surfaces another problem: enabling this option makes it hard to expose necessary information to the devtools in production.

As described in https://github.com/vitejs/vite/pull/4984#discussion_r716567404, devtools relies on the __file field to infer the component's name. But with inlineTemplates enabled, <script setup> components are closed by default, therefore the devtools cannot get the field from the component instances.

It is hard for build tools to expose this field automatically, because of the dynamic nature of the expose call. Users may or may not have called defineExpose by themselves, or have defined the expose field in a sibling <script> block. Even if it can be implemented on the @vite/plugin-vue or vue-loader side, it would be a burden to keep maintaining.

What does the proposed API look like?

So I think the best solution is to auto-expose __file in the @vue/compiler-sfc package.

The __file field is like __vccOpts, served as an undocumented convention for various core libraries to work better together.