feat: implement defineVaporCustomElement#14017
Conversation
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the ✨ Finishing touches🧪 Generate unit tests (beta)
Comment |
Size ReportBundles
Usages
|
@vue/compiler-core
@vue/compiler-dom
@vue/compiler-sfc
@vue/compiler-ssr
@vue/compiler-vapor
@vue/reactivity
@vue/runtime-core
@vue/runtime-dom
@vue/runtime-vapor
@vue/server-renderer
@vue/shared
vue
@vue/compat
commit: |
a819eeb to
e808152
Compare
the template helper cannot resolve them properly they require creation via createElement
…t has been torn down
❌ Deploy Preview for vue-sfc-playground failed. Why did it fail? →
|
c423a43 to
642e253
Compare
…n useHost function
642e253 to
9b5e134
Compare
defineSSRCustomElement can only be used with custom elements that have pre-rendered declarative shadow root
| await assertInteraction('my-element-async') | ||
| }) | ||
|
|
||
| test('work with Teleport (shadowRoot: false)', async () => { |
There was a problem hiding this comment.
defineSSRCustomElement can only be used with custom elements that have pre-rendered declarative shadow root. It requires shadowRoot: true.
this is no longer needed as we will use the inner component def to create component instance after resolved.
|
Hi @edison1105 import { defineVaporCustomElement, type VaporComponent } from 'vue';
import { PrimaryButton } from '@/features/shared';
const element = defineVaporCustomElement(PrimaryButton as unknown as VaporComponent);
customElements.define('primary-button', element);However, I’m not seeing any difference in the bundle size between the Vapor and non-Vapor builds. Is this the expected behavior, or am I missing something in my setup / using Vapor incorrectly? vue version is |
|
Could you please provide a minimal repro? |
|
I was looking at this, and put together a stackblitz to illustrate the issue It contains a minimal component, and the ability to build vapor or normal mode by the vite vite build --mode vapor
vite build --mode defaultOutput was verified to contain the expected component. Output bundle sizes are similar, with vapor-mode being larger: I added a custom one-off plugin to see what's being bundled (path starts partially clipped for readability): // default mode
[
'node_modules/@vue/reactivity/node_modules/@vue/shared/dist/shared.esm-bundler.js',
'node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js',
'node_modules/@vue/runtime-core/node_modules/@vue/shared/dist/shared.esm-bundler.js',
'node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js',
'node_modules/@vue/runtime-dom/node_modules/@vue/shared/dist/shared.esm-bundler.js',
'node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js',
'src/default/component.vue?vue&type=script&setup=true&lang.ts'
]
// vapor mode
[
'node_modules/@vue/reactivity/node_modules/@vue/shared/dist/shared.esm-bundler.js',
'node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js',
'node_modules/@vue/runtime-core/node_modules/@vue/shared/dist/shared.esm-bundler.js',
'node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js',
'node_modules/@vue/runtime-dom/node_modules/@vue/shared/dist/shared.esm-bundler.js',
'node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js',
'node_modules/@vue/runtime-vapor/node_modules/@vue/shared/dist/shared.esm-bundler.js',
'node_modules/@vue/runtime-vapor/dist/runtime-vapor.esm-bundler.js',
'src/vapor/vapor-component.vue?vue&type=script&vapor=true&setup=true&lang.ts'
]I hope this is helpful to you. I'm not entirely sure what the expected result is but reading about it, I thought vapor mode would produce a smaller bundle size. |
|
@pixeloution |
No description provided.