`configureApp` for `defineCustomElement` Not Executed for Async Components

[farcry550]

Vue version

3.5.12

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-b9enev?file=src%2Fmain.js

Steps to reproduce

1. Open the link to the reproduction
2. Observe app-injected not displayed in the preview

What is expected?

When given an async component, defineCustomElement with the configureApp option results in configureApp being called on the loaded component's mount.

What is actually happening?

When given an async component, defineCustomElement with the configureApp option does not result in configureApp being called on the loaded component's mount.

System Info

System:
    OS: Linux 5.15 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (8) x64 Intel(R) Core(TM) i7-10610U CPU @ 1.80GHz
    Memory: 1.41 GB / 7.76 GB
    Container: Yes
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 16.20.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.19.4 - /usr/local/bin/npm
  npmPackages:
    vue: ^3.5.12 => 3.5.12

Any additional comments?

When resolving an async component, the component's loader is called and the loaded component is resolved.

https://github.com/vuejs/core/blob/06310e82f5bed62d1b9733dcb18cd8d6edc988de/packages/runtime-dom/src/apiCustomElement.ts#L404-L411

However, the configureApp function is attached to the async wrapper. When the component is loaded and the wrapper is discarded, configureApp is discarded as well. Thus when the component is mounted, configureApp is not called.

https://github.com/vuejs/core/blob/06310e82f5bed62d1b9733dcb18cd8d6edc988de/packages/runtime-dom/src/apiCustomElement.ts#L401

https://github.com/vuejs/core/blob/06310e82f5bed62d1b9733dcb18cd8d6edc988de/packages/runtime-dom/src/apiCustomElement.ts#L414-L424

A fix here may be to assign the function from the wrapper to the loaded component before reassignment of this._def.

const asyncDef = this._def.__asyncLoader;
if (asyncDef) {
  this._pendingResolve = asyncDef().then(
    (def) => {
      if (this._def.configureApp) {
        def.configureApp = this._def.configureApp;
      }
      resolve(this._def = def, true);
    }
  );
} else {
  resolve(this._def);
}

An interesting workaround is to move configureApp into the component's options as shown by this repro. I'm not sure if this is intentional or of the repercussions.

[edison1105]

@farcry550 Nice, You've found the root cause of the problem. PR welcome!

An interesting workaround is to move configureApp into the component's options as shown by this repro. I'm not sure if this is intentional or of the repercussions.

This is a hidden usage, and it's correct.

https://github.com/vuejs/core/blob/352bc88c1bd2fda09c61ab17ea1a5967ffcd7bc0/packages/runtime-dom/src/apiCustomElement.ts#L176 Ultimately, configureApp will be merged into def

[farcry550]

PR welcome!

I’ll create one!