feat: implementing v-html transform

packages/compiler-core/src/errors.ts

@@ -68,6 +68,8 @@ export const enum ErrorCodes {
   X_FOR_MALFORMED_EXPRESSION,
   X_V_BIND_NO_EXPRESSION,
   X_V_ON_NO_EXPRESSION,
+  X_V_HTML_NO_EXPRESSION,
+  X_V_HTML_UNEXPECTED_USAGE,
   X_UNEXPECTED_DIRECTIVE_ON_SLOT_OUTLET,
   X_NAMED_SLOT_ON_COMPONENT,
   X_MIXED_SLOT_USAGE,

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

@@ -0,0 +1,67 @@
+import {
+  parse,
+  transform,
+  CompilerOptions,
+  ElementNode,
+  NodeTypes
+} from '@vue/compiler-core'
+import { mockWarn } from '@vue/runtime-test'
+import { transformHtml } from '../../src/transforms/vHtml'
+
+function transformWithHtmlTransform(
+  template: string,
+  options: CompilerOptions = {}
+) {
+  const ast = parse(template)
+  transform(ast, {
+    nodeTransforms: [transformHtml],
+    ...options
+  })
+  return {
+    root: ast,
+    node: ast.children[0] as ElementNode
+  }
+}
+
+describe('compiler: html transform', () => {
+  mockWarn()
+  it('should add `innerHtml` prop', () => {
+    const { node } = transformWithHtmlTransform(`<div v-html="test"/>`)
+    expect(node.props[0]).toMatchObject({
+      type: NodeTypes.DIRECTIVE,
+      name: `bind`,
+      arg: {
+        type: NodeTypes.SIMPLE_EXPRESSION,
+        content: `innerHTML`,
+        isStatic: true
+      },
+      exp: {
+        type: NodeTypes.SIMPLE_EXPRESSION,
+        content: `test`,
+        isStatic: false
+      }
+    })
+  })
+
+  it('should remove all children', () => {
+    const { node } = transformWithHtmlTransform(
+      `<div v-html="test"><p>foo</p><p>bar</p></div>`
+    )
+    expect(node.children).toHaveLength(0)
+    expect(node.props[0]).toMatchObject({
+      type: NodeTypes.DIRECTIVE,
+      name: `bind`,
+      arg: {
+        type: NodeTypes.SIMPLE_EXPRESSION,
+        content: `innerHTML`,
+        isStatic: true
+      },
+      exp: {
+        type: NodeTypes.SIMPLE_EXPRESSION,
+        content: `test`,
+        isStatic: false
+      }
+    })
+    expect(`"v-html" replaced children on "div" element`).toHaveBeenWarned()
+  })
+})

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 { transformHtml } from './transforms/vHtml'
 
 export function compile(
   template: string,
@@ -10,7 +11,11 @@ export function compile(
   return baseCompile(template, {
     ...options,
     ...(__BROWSER__ ? parserOptionsMinimal : parserOptionsStandard),
-    nodeTransforms: [transformStyle, ...(options.nodeTransforms || [])],
+    nodeTransforms: [
+      transformStyle,
+      transformHtml,
+      ...(options.nodeTransforms || [])
+    ],
     directiveTransforms: {
       // TODO include DOM-specific directiveTransforms
       ...(options.directiveTransforms || {})

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

@@ -1 +1,45 @@
-// TODO
+import {
+  createStructuralDirectiveTransform,
+  createCompilerError,
+  ErrorCodes,
+  createSimpleExpression,
+  SimpleExpressionNode,
+  NodeTypes
+} from '@vue/compiler-core'
+
+export const transformHtml = createStructuralDirectiveTransform(
+  'html',
+  (node, dir, context) => {
+    if (!dir.exp || !(dir.exp as SimpleExpressionNode).content.trim()) {
+      const loc = dir.exp ? dir.exp.loc : node.loc
+      context.onError(
+        createCompilerError(ErrorCodes.X_V_HTML_NO_EXPRESSION, dir.loc)
+      )
+      dir.exp = createSimpleExpression('', true, loc)
+    }
+
+    // v-show can't be used outside of an element
+    if (node.type !== NodeTypes.ELEMENT) {
+      createCompilerError(ErrorCodes.X_V_HTML_UNEXPECTED_USAGE, dir.loc)
+    }
+
+    // add prop innerHTML
+    node.props.push({
+      type: NodeTypes.DIRECTIVE,
+      name: `bind`,
+      arg: createSimpleExpression(`innerHTML`, true, dir.loc),
+      exp: dir.exp,
+      modifiers: [],
+      loc: dir.loc
+    })
+
+    if (node.children.length > 0) {
+      // remove all the children, since they will be overridden by the `innerHTML`
+      node.children = []
+
+      if (__DEV__) {
+        console.warn(`"v-html" replaced children on "${node.tag}" element`)
+      }
+    }
+  }
+)