diff --git a/packages/runtime-core/src/errorHandling.ts b/packages/runtime-core/src/errorHandling.ts index 0090b6c16ad..22a3e0190a8 100644 --- a/packages/runtime-core/src/errorHandling.ts +++ b/packages/runtime-core/src/errorHandling.ts @@ -28,6 +28,7 @@ export enum ErrorCodes { SCHEDULER, COMPONENT_UPDATE, APP_UNMOUNT_CLEANUP, + RENDER_SLOTS, } export const ErrorTypeStrings: Record = { @@ -62,6 +63,7 @@ export const ErrorTypeStrings: Record = { [ErrorCodes.SCHEDULER]: 'scheduler flush', [ErrorCodes.COMPONENT_UPDATE]: 'component update', [ErrorCodes.APP_UNMOUNT_CLEANUP]: 'app unmount cleanup function', + [ErrorCodes.RENDER_SLOTS]: 'render slots', } export type ErrorTypes = LifecycleHooks | ErrorCodes | WatchErrorCodes diff --git a/packages/runtime-vapor/__tests__/component.spec.ts b/packages/runtime-vapor/__tests__/component.spec.ts index b96a932a2f3..131477a1f74 100644 --- a/packages/runtime-vapor/__tests__/component.spec.ts +++ b/packages/runtime-vapor/__tests__/component.spec.ts @@ -1,5 +1,6 @@ import { type EffectScope, + Fragment, ReactiveEffect, type Ref, inject, @@ -354,6 +355,18 @@ describe('component', () => { 'Vapor component setup() returned non-block value, and has no render function', ).toHaveBeenWarned() }) + + it('Fragment slots should be rendered', () => { + const { host } = define({ + setup() { + return createComponent(Fragment as any, null, { + default: () => template('HI', true)(), + }) + }, + }).render() + + expect(host.innerHTML).toBe('HI') + }) }) function getEffectsCount(scope: EffectScope): number { diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts index da57882c49d..59c0bbad925 100644 --- a/packages/runtime-vapor/src/component.ts +++ b/packages/runtime-vapor/src/component.ts @@ -5,6 +5,7 @@ import { type EmitFn, type EmitsOptions, ErrorCodes, + Fragment, type GenericAppContext, type GenericComponentInstance, type LifecycleHook, @@ -219,7 +220,17 @@ export function createComponent( ]) || EMPTY_OBJ : EMPTY_OBJ - if (__DEV__ && !isBlock(setupResult)) { + if (component === Fragment) { + if (instance.slots.default) { + instance.block = callWithErrorHandling( + instance.slots.default, + instance, + ErrorCodes.RENDER_SLOTS, + ) + } else { + instance.block = [] + } + } else if (__DEV__ && !isBlock(setupResult)) { if (isFunction(component)) { warn(`Functional vapor component must return a block directly.`) instance.block = []