diff --git a/packages/uni-mp-compiler/__tests__/vHtml.spec.ts b/packages/uni-mp-compiler/__tests__/vHtml.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..781cbdc3230bf58f9b5e728cdafabefb108ebfa2 --- /dev/null +++ b/packages/uni-mp-compiler/__tests__/vHtml.spec.ts @@ -0,0 +1,29 @@ +import { assert } from './testUtils' + +describe('compiler: transform v-html', () => { + test('basic', () => { + assert( + ``, + ``, + `(_ctx, _cache) => { + return { a: _ctx.html } +}` + ) + assert( + ``, + ``, + `(_ctx, _cache) => { + return {} +}` + ) + }) + test('self closing', () => { + assert( + ``, + ``, + `(_ctx, _cache) => { + return { a: _ctx.html } +}` + ) + }) +}) diff --git a/packages/uni-mp-compiler/src/compile.ts b/packages/uni-mp-compiler/src/compile.ts index 171961095c0b59c778cd1b38e0d8673904c596c4..3806b098fdea328a466d07b5d8af80904b90129d 100644 --- a/packages/uni-mp-compiler/src/compile.ts +++ b/packages/uni-mp-compiler/src/compile.ts @@ -17,6 +17,7 @@ import { transformComponent } from './transforms/transformComponent' import { transformSlot } from './transforms/vSlot' import { transformRoot } from './transforms/transformRoot' import { transformTag } from './transforms/transformTag' +import { transformHtml } from './transforms/vHtml' export type TransformPreset = [ NodeTransform[], @@ -34,6 +35,7 @@ export function getBaseTransformPreset({ const nodeTransforms = [ transformRoot, transformTag, + transformHtml, transformIf, transformFor, transformSlot, diff --git a/packages/uni-mp-compiler/src/transforms/vHtml.ts b/packages/uni-mp-compiler/src/transforms/vHtml.ts new file mode 100644 index 0000000000000000000000000000000000000000..7cc15aee201f126676ea39115471e2c1a153aea8 --- /dev/null +++ b/packages/uni-mp-compiler/src/transforms/vHtml.ts @@ -0,0 +1,47 @@ +import { + createBindDirectiveNode, + isElementNode, +} from '@dcloudio/uni-cli-shared' +import { + DirectiveNode, + ElementNode, + ElementTypes, + findDir, + NodeTypes, + PlainElementNode, +} from '@vue/compiler-core' +import { NodeTransform } from '../transform' + +export const transformHtml: NodeTransform = (node, _) => { + if (!isElementNode(node)) { + return + } + const dir = findDir(node, 'html') + if (!dir) { + return + } + // remove v-html + node.props.splice(node.props.indexOf(dir), 1) + if (node.tagType !== ElementTypes.ELEMENT) { + return + } + node.isSelfClosing = false + node.children = [createRichText(node, dir)] +} + +function createRichText( + node: PlainElementNode, + dir: DirectiveNode +): ElementNode { + return { + tag: 'rich-text', + type: NodeTypes.ELEMENT, + tagType: ElementTypes.ELEMENT, + props: [createBindDirectiveNode('nodes', dir.exp || '')], + isSelfClosing: true, + children: [], + codegenNode: undefined, + ns: node.ns, + loc: node.loc, + } +}