fix(runtime-vapor): add __vapor flag for dynamic component

packages/runtime-vapor/__tests__/_utils.ts

@@ -93,7 +93,10 @@ export interface InteropRenderContext {
   html: () => string
 }
 
-export function makeInteropRender(): (comp: Component) => InteropRenderContext {
+export function makeInteropRender(): {
+  define: (comp: Component) => InteropRenderContext
+  defineVapor: (comp: VaporComponent) => InteropRenderContext
+} {
   let host: HTMLElement
   beforeEach(() => {
     host = document.createElement('div')
@@ -102,36 +105,41 @@ export function makeInteropRender(): (comp: Component) => InteropRenderContext {
     host.remove()
   })
 
-  function define(comp: Component) {
-    let app: App
-    function render(
-      props: RawProps | undefined = undefined,
-      container: string | ParentNode = host,
-    ) {
-      app?.unmount()
-      app = createApp(comp, props)
-      app.use(vaporInteropPlugin)
-      return mount(container)
-    }
+  const defineFactory =
+    (createAppFactory: typeof createApp | typeof createVaporApp) =>
+    (comp: Component | VaporComponent) => {
+      let app: App
+      function render(
+        props: RawProps | undefined = undefined,
+        container: string | ParentNode = host,
+      ) {
+        app?.unmount()
+        app = createAppFactory(comp as any, props)
+        app.use(vaporInteropPlugin)
+        return mount(container)
+      }
+
+      function mount(container: string | ParentNode = host) {
+        app.mount(container)
+        return res()
+      }
+
+      function html() {
+        return host.innerHTML
+      }
+
+      const res = () => ({
+        host,
+        mount,
+        render,
+        html,
+      })
 
-    function mount(container: string | ParentNode = host) {
-      app.mount(container)
       return res()
     }
 
-    function html() {
-      return host.innerHTML
-    }
-
-    const res = () => ({
-      host,
-      mount,
-      render,
-      html,
-    })
-
-    return res()
+  return {
+    define: defineFactory(createApp),
+    defineVapor: defineFactory(createVaporApp),
   }
-
-  return define
 }

packages/runtime-vapor/__tests__/vdomInterop.spec.ts

@@ -13,13 +13,14 @@ import {
   applyTextModel,
   child,
   createComponent,
+  createDynamicComponent,
   defineVaporComponent,
   renderEffect,
   setText,
   template,
 } from '../src'
 
-const define = makeInteropRender()
+const { define, defineVapor } = makeInteropRender()
 
 describe('vdomInterop', () => {
   describe('props', () => {
@@ -179,7 +180,23 @@ describe('vdomInterop', () => {
 
   describe.todo('template ref', () => {})
 
-  describe.todo('dynamic component', () => {})
+  describe('dynamic component', () => {
+    it('should not render to Virtual DOM', () => {
+      const VaporChild = defineVaporComponent({
+        setup() {
+          return createDynamicComponent(
+            () => () => document.createTextNode('foo'),
+          )
+        },
+      })
+
+      const { host } = defineVapor(VaporChild).render()
+
+      expect(host.innerHTML).toMatchInlineSnapshot(
+        `"foo<!--dynamic-component-->"`,
+      )
+    })
+  })
 
   describe('attribute fallthrough', () => {
     it('should not fallthrough emit handlers to vdom child', () => {

packages/runtime-vapor/src/apiCreateDynamicComponent.ts

@@ -1,4 +1,4 @@
-import { resolveDynamicComponent } from '@vue/runtime-dom'
+import { currentInstance, resolveDynamicComponent } from '@vue/runtime-dom'
 import { DynamicFragment, type VaporFragment, insert } from './block'
 import { createComponentWithFallback } from './component'
 import { renderEffect } from './renderEffect'
@@ -31,6 +31,9 @@ export function createDynamicComponent(
 
   renderEffect(() => {
     const value = getter()
+    if (currentInstance && currentInstance.appContext.vapor) {
+      value.__vapor = true
+    }
     frag.update(
       () =>
         createComponentWithFallback(