diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap index 5d31be656..f296d7257 100644 --- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap +++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap @@ -274,3 +274,68 @@ export function render(_ctx) { return n6 }" `; + +exports[`compiler: transform slot > with whitespace: 'preserve' > implicit default slot 1`] = ` +"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue'; +const t0 = _template(" Header ") +const t1 = _template(" ") +const t2 = _template("

") + +export function render(_ctx) { + const _component_Comp = _resolveComponent("Comp") + const n4 = _createComponentWithFallback(_component_Comp, null, { + "header": () => { + const n0 = t0() + return n0 + }, + "default": () => { + const n2 = t1() + const n3 = t2() + return [n2, n3] + } + }, true) + return n4 +}" +`; + +exports[`compiler: transform slot > with whitespace: 'preserve' > named default slot + implicit whitespace content 1`] = ` +"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue'; +const t0 = _template(" Header ") +const t1 = _template(" Default ") + +export function render(_ctx) { + const _component_Comp = _resolveComponent("Comp") + const n5 = _createComponentWithFallback(_component_Comp, null, { + "header": () => { + const n0 = t0() + return n0 + }, + "default": () => { + const n3 = t1() + return n3 + } + }, true) + return n5 +}" +`; + +exports[`compiler: transform slot > with whitespace: 'preserve' > should not generate whitespace only default slot 1`] = ` +"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue'; +const t0 = _template(" Header ") +const t1 = _template(" Footer ") + +export function render(_ctx) { + const _component_Comp = _resolveComponent("Comp") + const n5 = _createComponentWithFallback(_component_Comp, null, { + "header": () => { + const n0 = t0() + return n0 + }, + "footer": () => { + const n3 = t1() + return n3 + } + }, true) + return n5 +}" +`; diff --git a/packages/compiler-vapor/__tests__/transforms/vSlot.spec.ts b/packages/compiler-vapor/__tests__/transforms/vSlot.spec.ts index 978f988d5..8db1386b3 100644 --- a/packages/compiler-vapor/__tests__/transforms/vSlot.spec.ts +++ b/packages/compiler-vapor/__tests__/transforms/vSlot.spec.ts @@ -509,4 +509,60 @@ describe('compiler: transform slot', () => { }) }) }) + + describe(`with whitespace: 'preserve'`, () => { + test('named default slot + implicit whitespace content', () => { + const source = ` + + + + + ` + const { code } = compileWithSlots(source, { + whitespace: 'preserve', + }) + + expect( + `Extraneous children found when component already has explicitly named default slot.`, + ).not.toHaveBeenWarned() + expect(code).toMatchSnapshot() + }) + + test('implicit default slot', () => { + const source = ` + + +

+ + ` + const { code } = compileWithSlots(source, { + whitespace: 'preserve', + }) + + expect( + `Extraneous children found when component already has explicitly named default slot.`, + ).not.toHaveBeenWarned() + expect(code).toMatchSnapshot() + }) + + test('should not generate whitespace only default slot', () => { + const source = ` + + + + + ` + const { code, ir } = compileWithSlots(source, { + whitespace: 'preserve', + }) + + const slots = (ir.block.dynamic.children[0].operation as any).slots[0] + .slots + // should be: header, footer (no default) + expect(Object.keys(slots).length).toBe(2) + expect(!!slots['default']).toBe(false) + + expect(code).toMatchSnapshot() + }) + }) }) diff --git a/packages/compiler-vapor/src/transforms/transformText.ts b/packages/compiler-vapor/src/transforms/transformText.ts index 7cdb1b1a7..5f858058f 100644 --- a/packages/compiler-vapor/src/transforms/transformText.ts +++ b/packages/compiler-vapor/src/transforms/transformText.ts @@ -23,6 +23,13 @@ const seen = new WeakMap< WeakSet >() +export function markNonTemplate( + node: TemplateChildNode, + context: TransformContext, +): void { + seen.get(context.root)!.add(node) +} + export const transformText: NodeTransform = (node, context) => { if (!seen.has(context.root)) seen.set(context.root, new WeakSet()) if (seen.get(context.root)!.has(node)) { @@ -68,7 +75,7 @@ export const transformText: NodeTransform = (node, context) => { prev.type === NodeTypes.TEXT ) { // mark leading text node for skipping - seen.get(context.root)!.add(prev) + markNonTemplate(prev, context) } } } @@ -143,7 +150,7 @@ function processTextContainer( } function createTextLikeExpression(node: TextLike, context: TransformContext) { - seen.get(context.root)!.add(node) + markNonTemplate(node, context) if (node.type === NodeTypes.TEXT) { return createSimpleExpression(node.content, true, node.loc) } else { diff --git a/packages/compiler-vapor/src/transforms/vSlot.ts b/packages/compiler-vapor/src/transforms/vSlot.ts index d1bf1c6b0..d1f08d614 100644 --- a/packages/compiler-vapor/src/transforms/vSlot.ts +++ b/packages/compiler-vapor/src/transforms/vSlot.ts @@ -24,6 +24,7 @@ import { type VaporDirectiveNode, } from '../ir' import { findDir, resolveExpression } from '../utils' +import { markNonTemplate } from './transformText' export const transformVSlot: NodeTransform = (node, context) => { if (node.type !== NodeTypes.ELEMENT) return @@ -66,11 +67,21 @@ function transformComponentSlot( ) { const { children } = node const arg = dir && dir.arg - const nonSlotTemplateChildren = children.filter( - n => - isNonWhitespaceContent(node) && - !(n.type === NodeTypes.ELEMENT && n.props.some(isVSlot)), - ) + + // whitespace: 'preserve' + const emptyTextNodes: TemplateChildNode[] = [] + const nonSlotTemplateChildren = children.filter(n => { + if (isNonWhitespaceContent(n)) { + return !(n.type === NodeTypes.ELEMENT && n.props.some(isVSlot)) + } else { + emptyTextNodes.push(n) + } + }) + if (!nonSlotTemplateChildren.length) { + emptyTextNodes.forEach(n => { + markNonTemplate(n, context) + }) + } const [block, onExit] = createSlotBlock(node, dir, context)