diff --git a/packages/compiler-vapor/src/compile.ts b/packages/compiler-vapor/src/compile.ts index b795974b4..7b745fd37 100644 --- a/packages/compiler-vapor/src/compile.ts +++ b/packages/compiler-vapor/src/compile.ts @@ -8,14 +8,19 @@ import { ErrorCodes, } from '@vue/compiler-dom' import { extend, isString } from '@vue/shared' -import { DirectiveTransform, NodeTransform, transform } from './transform' +import { + type DirectiveTransform, + type NodeTransform, + transform, +} from './transform' import { generate } from './generate' -import { HackOptions } from './hack' import { transformOnce } from './transforms/vOnce' import { transformElement } from './transforms/transformElement' import { transformVHtml } from './transforms/vHtml' import { transformVText } from './transforms/vText' import { transformVOn } from './transforms/vOn' +import { transformInterpolation } from './transforms/transformInterpolation' +import type { HackOptions } from './ir' export type CompilerOptions = HackOptions @@ -88,7 +93,7 @@ export function getBaseTransformPreset( prefixIdentifiers?: boolean, ): TransformPreset { return [ - [transformOnce, transformElement], + [transformOnce, transformInterpolation, transformElement], { on: transformVOn, html: transformVHtml, diff --git a/packages/compiler-vapor/src/hack.ts b/packages/compiler-vapor/src/hack.ts deleted file mode 100644 index a2fb6cb5a..000000000 --- a/packages/compiler-vapor/src/hack.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type { Prettify } from '@vue/shared' -import type { DirectiveTransform, NodeTransform } from './transform' - -type Overwrite = Pick> & - Pick> - -export type HackOptions = Prettify< - Overwrite< - T, - { - nodeTransforms?: NodeTransform[] - directiveTransforms?: Record - } - > -> diff --git a/packages/compiler-vapor/src/ir.ts b/packages/compiler-vapor/src/ir.ts index dd0efe08c..4e4c06e52 100644 --- a/packages/compiler-vapor/src/ir.ts +++ b/packages/compiler-vapor/src/ir.ts @@ -3,6 +3,8 @@ import type { RootNode, SourceLocation, } from '@vue/compiler-dom' +import type { Prettify } from '@vue/shared' +import type { DirectiveTransform, NodeTransform } from './transform' export enum IRNodeTypes { ROOT, @@ -139,3 +141,16 @@ export interface IREffect { expressions: IRExpression[] operations: OperationNode[] } + +type Overwrite = Pick> & + Pick> + +export type HackOptions = Prettify< + Overwrite< + T, + { + nodeTransforms?: NodeTransform[] + directiveTransforms?: Record + } + > +> diff --git a/packages/compiler-vapor/src/transform.ts b/packages/compiler-vapor/src/transform.ts index 878092f39..2132fcf43 100644 --- a/packages/compiler-vapor/src/transform.ts +++ b/packages/compiler-vapor/src/transform.ts @@ -2,7 +2,6 @@ import { type RootNode, type TemplateChildNode, type ElementNode, - type InterpolationNode, type TransformOptions as BaseTransformOptions, type ParentNode, type AllNode, @@ -20,7 +19,7 @@ import { type IRExpression, IRNodeTypes, } from './ir' -import type { HackOptions } from './hack' +import type { HackOptions } from './ir' export type NodeTransform = ( node: RootNode | TemplateChildNode, @@ -225,7 +224,7 @@ export function transform( function transformNode( context: TransformContext, ) { - let { node, index } = context + let { node } = context // apply transform plugins const { nodeTransforms } = context.options @@ -248,10 +247,6 @@ function transformNode( } } - const parentChildren = context.parent ? context.parent.node.children : [] - const isFirst = index === 0 - const isLast = index === parentChildren.length - 1 - switch (node.type) { case NodeTypes.ROOT: case NodeTypes.ELEMENT: { @@ -266,25 +261,6 @@ function transformNode( context.template += `` break } - case NodeTypes.INTERPOLATION: { - transformInterpolation( - context as TransformContext, - isFirst, - isLast, - ) - break - } - case NodeTypes.TEXT_CALL: - // never - break - default: { - // TODO handle other types - // CompoundExpressionNode - // IfNode - // IfBranchNode - // ForNode - context.template += `[type: ${node.type}]` - } } // exit transforms @@ -370,49 +346,3 @@ function processDynamicChildren(ctx: TransformContext) { } } } - -function transformInterpolation( - ctx: TransformContext, - isFirst: boolean, - isLast: boolean, -) { - const { node } = ctx - - const expr = node.content - - if (isFirst && isLast) { - const parent = ctx.parent! - const parentId = parent.reference() - ctx.registerEffect( - [expr], - [ - { - type: IRNodeTypes.SET_TEXT, - loc: node.loc, - element: parentId, - value: expr, - }, - ], - ) - } else { - const id = ctx.reference() - ctx.dynamic.ghost = true - ctx.registerOperation({ - type: IRNodeTypes.CREATE_TEXT_NODE, - loc: node.loc, - id, - value: expr, - }) - ctx.registerEffect( - [expr], - [ - { - type: IRNodeTypes.SET_TEXT, - loc: node.loc, - element: id, - value: expr, - }, - ], - ) - } -} diff --git a/packages/compiler-vapor/src/transforms/transformInterpolation.ts b/packages/compiler-vapor/src/transforms/transformInterpolation.ts new file mode 100644 index 000000000..4bd51a571 --- /dev/null +++ b/packages/compiler-vapor/src/transforms/transformInterpolation.ts @@ -0,0 +1,48 @@ +import { NodeTypes } from '@vue/compiler-dom' +import { NodeTransform } from '../transform' +import { IRNodeTypes } from '../ir' + +export const transformInterpolation: NodeTransform = (node, ctx) => { + if (node.type !== NodeTypes.INTERPOLATION) return + + const expr = node.content + const parentChildren = ctx.parent ? ctx.parent.node.children : [] + const isFirst = ctx.index === 0 + const isLast = ctx.index === parentChildren.length - 1 + + if (isFirst && isLast) { + const parent = ctx.parent! + const parentId = parent.reference() + ctx.registerEffect( + [expr], + [ + { + type: IRNodeTypes.SET_TEXT, + loc: node.loc, + element: parentId, + value: expr, + }, + ], + ) + } else { + const id = ctx.reference() + ctx.dynamic.ghost = true + ctx.registerOperation({ + type: IRNodeTypes.CREATE_TEXT_NODE, + loc: node.loc, + id, + value: expr, + }) + ctx.registerEffect( + [expr], + [ + { + type: IRNodeTypes.SET_TEXT, + loc: node.loc, + element: id, + value: expr, + }, + ], + ) + } +}