[BUG] - Style tags not added when using externals

wassim-ben-amor commented 12 months ago

Describe the bug

Hello, When I try to make 'vue' as external in vite config in order to use importmaps:

rollupOptions: {
        external: ['vue', 'vue-router', 'vuex'],

I have found that the style tags are no more added to the DOM. I even don't find the keyword data-v-ce in the generated sources. In the provided reproduction link, I can not reproduce the issue as I couldn't replicate all the environment I have (transforming my vue3 app into a web component and using it in another container). I will try to create a full reproduction on a separate git repo.

I wanted to know if this is a known limitation ? Thank you,

Reproduction

https://stackblitz.com/edit/github-ajr7vy?file=vite.config.ts

System Info

No response

Used Package Manager

yarn

Validations

[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Make sure this is a unplugin-vue-ce issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs instead.
[X] The provided reproduction is a minimal reproducible example of the bug.

stackblitz[bot] commented 12 months ago

Start a new pull request in StackBlitz Codeflow.

github-ajr7vy (Open reproduction)

baiwusanyu-c commented 12 months ago

In the reproduction repository you provided, I noticed that you seem to want to import vue from CDN. Sorry, unplugin-vue-ce is not supported. Because the specific implementation code of unplugin-vue-ce comes from my own PR in vue/core, which is deeply bound to the vue runtime, but vue does not have a public method to deeply modify the runtime, so unplugin-vue- ce injects the implementation code into the vue runtime through compilation (as described in the README). Therefore, using vue from cdn is not supported

wassim-ben-amor commented 12 months ago

@baiwusanyu-c , Thank you for the answer. Do you think we can we consider these potential workarounds:

Use yarn patch to edit vue/core to add the unplugin-vue-ce transformation, we can imagine hosting the patched version on a separate CDN (esm build).
Use rollup to build a custom version of vue/core that is handling unplugin-vue-ce transformation. And again host the generated esm file on a separate CDN.

Thank you,

carlos22 commented 11 months ago

@baiwusanyu-c thanks for this cool repo! I also did not get that "inject" means that we need to have it at build time, maybe you can update the note banner in the repo to be more precise about that, and use terms like here with patch and does not work for externals etc.

~~Is there any way we can patch the lib ourself? Like just adding the plugin does not seem to work for me. In my setup I have a app that dynamically loads a lib which should use the ce feature.~~

EDIT: This seems to work, just was another thing that breaks not sure why yet :)

baiwusanyu-c commented 11 months ago

I also did not get that "inject" means that we need to have it at build time

Sorry to cause trouble to you, what I mean is that the plugin will modify the code content of vue during compilation to achieve the functions we want. This is actually risky, and I hope you can understand this. So it must be vite compiled.

baiwusanyu-c commented 11 months ago

In theory, it is possible to use plugins combined with rollup to build and distribute a vue separately, but I have not tried it. All my projects build the vue runtime code directly into the final product.

carlos22 commented 11 months ago

Yeah I got that now thank you very much :) What is the blocker to add this to vue itself? I know that patching it might fail on updates etc.

unplugin / unplugin-vue-ce