feat(compiler-dom): transform for v-html

packages/compiler-dom/__tests__/transforms/vHtml.spec.ts

@@ -0,0 +1,74 @@
+import {
+  parse,
+  transform,
+  PlainElementNode,
+  CompilerOptions,
+  ErrorCodes
+} from '@vue/compiler-core'
+import { transformVHtml } from '../../src/transforms/vHtml'
+import { transformElement } from '../../../compiler-core/src/transforms/transformElement'
+import {
+  createObjectMatcher,
+  genFlagText
+} from '../../../compiler-core/__tests__/testUtils'
+import { PatchFlags } from '@vue/shared'
+
+function transformWithVHtml(template: string, options: CompilerOptions = {}) {
+  const ast = parse(template)
+  transform(ast, {
+    nodeTransforms: [transformElement],
+    directiveTransforms: {
+      html: transformVHtml
+    },
+    ...options
+  })
+  return ast
+}
+
+describe('compiler: v-html transform', () => {
+  it('should convert v-html to innerHTML', () => {
+    const ast = transformWithVHtml(`<div v-html="test"/>`)
+    expect((ast.children[0] as PlainElementNode).codegenNode).toMatchObject({
+      arguments: [
+        `"div"`,
+        createObjectMatcher({
+          innerHTML: `[test]`
+        }),
+        `null`,
+        genFlagText(PatchFlags.PROPS),
+        `["innerHTML"]`
+      ]
+    })
+  })
+
+  it('should raise error and ignore children when v-html is present', () => {
+    const onError = jest.fn()
+    const ast = transformWithVHtml(`<div v-html="test">hello</div>`, {
+      onError
+    })
+    expect(onError.mock.calls).toMatchObject([
+      [{ code: ErrorCodes.X_V_HTML_WITH_CHILDREN }]
+    ])
+    expect((ast.children[0] as PlainElementNode).codegenNode).toMatchObject({
+      arguments: [
+        `"div"`,
+        createObjectMatcher({
+          innerHTML: `[test]`
+        }),
+        `null`, // <-- children should have been removed
+        genFlagText(PatchFlags.PROPS),
+        `["innerHTML"]`
+      ]
+    })
+  })
+
+  it('should raise error if has no expression', () => {
+    const onError = jest.fn()
+    transformWithVHtml(`<div v-html></div>`, {
+      onError
+    })
+    expect(onError.mock.calls).toMatchObject([
+      [{ code: ErrorCodes.X_V_HTML_NO_EXPRESSION }]
+    ])
+  })
+})

packages/compiler-dom/src/index.ts

@@ -2,6 +2,7 @@ import { baseCompile, CompilerOptions, CodegenResult } from '@vue/compiler-core'
 import { parserOptionsMinimal } from './parserOptionsMinimal'
 import { parserOptionsStandard } from './parserOptionsStandard'
 import { transformStyle } from './transforms/transformStyle'
+import { transformVHtml } from './transforms/vHtml'
 
 export function compile(
   template: string,
@@ -12,7 +13,7 @@ export function compile(
     ...(__BROWSER__ ? parserOptionsMinimal : parserOptionsStandard),
     nodeTransforms: [transformStyle, ...(options.nodeTransforms || [])],
     directiveTransforms: {
-      // TODO include DOM-specific directiveTransforms
+      html: transformVHtml,
       ...(options.directiveTransforms || {})
     }
   })

packages/compiler-dom/src/transforms/vHtml.ts

@@ -1 +1,25 @@
-// TODO
+import {
+  DirectiveTransform,
+  createCompilerError,
+  ErrorCodes,
+  createObjectProperty,
+  createSimpleExpression
+} from '@vue/compiler-core'
+
+export const transformVHtml: DirectiveTransform = (dir, node, context) => {
+  const { exp, loc } = dir
+  if (!exp) {
+    context.onError(createCompilerError(ErrorCodes.X_V_HTML_NO_EXPRESSION, loc))
+  }
+  if (node.children.length) {
+    context.onError(createCompilerError(ErrorCodes.X_V_HTML_WITH_CHILDREN, loc))
+    node.children.length = 0
+  }
+  return {
+    props: createObjectProperty(
+      createSimpleExpression(`innerHTML`, true, loc),
+      exp || createSimpleExpression('', true)
+    ),
+    needRuntime: false
+  }
+}