diff --git a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts index 1258398d465..33fdb7dba19 100644 --- a/packages/compiler-core/__tests__/transforms/transformElement.spec.ts +++ b/packages/compiler-core/__tests__/transforms/transformElement.spec.ts @@ -3,7 +3,8 @@ import { baseParse as parse, transform, ErrorCodes, - BindingTypes + BindingTypes, + NodeTransform } from '../../src' import { RESOLVE_COMPONENT, @@ -939,4 +940,35 @@ describe('compiler: element transform', () => { isBlock: true }) }) + + test('should process node when node has been replaced', () => { + // a NodeTransform that swaps out
with + const customNodeTransform: NodeTransform = (node, context) => { + if ( + node.type === NodeTypes.ELEMENT && + node.tag === 'div' && + node.props.some( + prop => + prop.type === NodeTypes.ATTRIBUTE && + prop.name === 'id' && + prop.value && + prop.value.content === 'foo' + ) + ) { + context.replaceNode({ + ...node, + tag: 'span' + }) + } + } + const ast = parse(`
`) + transform(ast, { + nodeTransforms: [transformElement, transformText, customNodeTransform] + }) + expect((ast as any).children[0].children[0].codegenNode).toMatchObject({ + type: NodeTypes.VNODE_CALL, + tag: '"span"', + isBlock: false + }) + }) }) diff --git a/packages/compiler-core/src/transforms/transformElement.ts b/packages/compiler-core/src/transforms/transformElement.ts index 9f4f3389564..113b03dd856 100644 --- a/packages/compiler-core/src/transforms/transformElement.ts +++ b/packages/compiler-core/src/transforms/transformElement.ts @@ -62,18 +62,21 @@ const directiveImportMap = new WeakMap() // generate a JavaScript AST for this element's codegen export const transformElement: NodeTransform = (node, context) => { - if ( - !( - node.type === NodeTypes.ELEMENT && - (node.tagType === ElementTypes.ELEMENT || - node.tagType === ElementTypes.COMPONENT) - ) - ) { - return - } // perform the work on exit, after all child expressions have been // processed and merged. return function postTransformElement() { + node = context.currentNode! + + if ( + !( + node.type === NodeTypes.ELEMENT && + (node.tagType === ElementTypes.ELEMENT || + node.tagType === ElementTypes.COMPONENT) + ) + ) { + return + } + const { tag, props } = node const isComponent = node.tagType === ElementTypes.COMPONENT