resolver not called when isCustomElement is set

[robin-ln]

Describe the bug

I use a design system that exposes web components and I want unplugin-vue-components to auto-import these components via a custom resolver. To avoid a runtime rendering error from Vue with the web components, I had to define the isCustomElement function in the Vue compiler options.

When I enable isCustomElement (so Vue treats ux-* tags as custom elements), the resolver for unplugin-vue-components no longer appears to be invoked.

Reproducing configuration

import { defineConfig } from 'vitest/config';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import path from 'node:path';

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag: string) => tag.startsWith('ux-'), // comment and un comment this line
        },
      },
    }),
    Components({
      resolvers: [
        (name: string) => {
          if (name.startsWith('Ux')) {
            return {
              name,
              from: `@mylib/${name}`,
            };
          }
        },
      ],
      globs: 'src/**/*.vue',
    }),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

Expected behavior

• The resolver should be called, even when isCustomElement is set so that Vue does not transform ux-* tags into Vue components.

Actual behavior

• When isCustomElement is set no longer appears: the resolver is not invoked.

Reproduction

https://stackblitz.com/edit/vitejs-vite-yqwafxpa

System Info

npx envinfo --system --binaries --browsers
Need to install the following packages:
envinfo@7.21.0
Ok to proceed? (y) y


  System:
    OS: Linux 5.0 undefined
    CPU: (6) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

[bolt-new-by-stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-yqwafxpa (Open reproduction)

[robin-ln]

maybe update this regexp ?

unplugin-vue-components/src/core/transforms/component.ts

Line 19 in eaab6c2

for (const match of code.matchAll(/_?resolveComponent\d*\("(.+?)"\)/g)) {

Exemple of code :

`import { defineComponent as _defineComponent } from "vue";
import { h } from "vue";
const _sfc_main = /* @__PURE__ */ _defineComponent({
  __name: "App",
  setup(__props, { expose: __expose }) {
    __expose();
    const hnode = h("ux-test");
    const __returned__ = { hnode };
    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
    return __returned__;
  }
});
import { createVNode as _createVNode, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return _openBlock(), _createElementBlock("div", null, [
    _createVNode($setup["hnode"]),
    _cache[0] || (_cache[0] = _createElementVNode(
      "ux-test",
      null,
      null,
      -1
      /* CACHED */
    )),
    _cache[1] || (_cache[1] = _createElementVNode(
      "p",
      null,
      "test",
      -1
      /* CACHED */
    ))
  ]);
}
_sfc_main.__hmrId = "7a7a37b1";
typeof __VUE_HMR_RUNTIME__ !== "undefined" && __VUE_HMR_RUNTIME__.createRecord(_sfc_main.__hmrId, _sfc_main);
import.meta.hot.on("file-changed", ({ file }) => {
  __VUE_HMR_RUNTIME__.CHANGED_FILE = file;
});
import.meta.hot.accept((mod) => {
  if (!mod) return;
  const { default: updated, _rerender_only } = mod;
  if (_rerender_only) {
    __VUE_HMR_RUNTIME__.rerender(updated.__hmrId, updated.render);
  } else {
    __VUE_HMR_RUNTIME__.reload(updated.__hmrId, updated);
  }
});
import _export_sfc from "\\0plugin-vue:export-helper";
export default /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/rlouarn/Downloads/vitejs-vite-yqwafxpa/src/App.vue"]]);
`

• add _createElementVNode and. h("...")in regexp ?
• add an option in config file for overide the regexp ?
• add an other type "component", "dirrective", "custom" ?

[userquin]

Web components should be registered with the web component stuff, you need to add the web component import that registers itself, there is nothing we can do here, isCustomElement at vue compiler options just prevents vue compiler to import the component (resolving the component from global registered components), it is just a web component.

We may add here a hook to load web components map (name and import), but web components should be registered in the main entry point and included at isCustomComponent since we dont have direct access to the vue compiler options (it is lazy loaded and hard to add a hack, check vitejs/vite-plugin-vue#474 and vitejs/vite-plugin-vue#475).

So, you need to handle web components on your side.