feat(mp): support v-html (question/138290)

packages/uni-mp-compiler/__tests__/vHtml.spec.ts

+import { assert } from './testUtils'
+
+describe('compiler: transform v-html', () => {
+  test('basic', () => {
+    assert(
+      `<view v-html="html"></view>`,
+      `<view><rich-text nodes="{{a}}"/></view>`,
+      `(_ctx, _cache) => {
+  return { a: _ctx.html }
+}`
+    )
+    assert(
+      `<view v-html="'<div/>'"></view>`,
+      `<view><rich-text nodes="{{'<div/>'}}"/></view>`,
+      `(_ctx, _cache) => {
+  return {}
+}`
+    )
+  })
+  test('self closing', () => {
+    assert(
+      `<view v-html="html"/>`,
+      `<view><rich-text nodes="{{a}}"/></view>`,
+      `(_ctx, _cache) => {
+  return { a: _ctx.html }
+}`
+    )
+  })
+})

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,

packages/uni-mp-compiler/src/transforms/vHtml.ts

+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,
+  }
+}