feat: implement error handling for v-html

vuejs · Dec 1, 2023 · 8569934 · 8569934
1 parent fe1780d
commit 8569934
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 4 deletions.
diff --git a/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap b/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap
@@ -39,7 +39,23 @@ export function render(_ctx) {
 "
 `;
 
-exports[`compile > directives > v-html > no expression 1`] = `
+exports[`compile > directives > v-html > should raise error and ignore children when v-html is present 1`] = `
+"import { template as _template, children as _children, effect as _effect, setHtml as _setHtml } from 'vue/vapor';
+const t0 = _template('<div></div>');
+export function render(_ctx) {
+  const n0 = t0();
+  const {
+    0: [n1],
+  } = _children(n0);
+  _effect(() => {
+    _setHtml(n1, undefined, test);
+  });
+  return n0;
+}
+"
+`;
+
+exports[`compile > directives > v-html > should raise error if has no expression 1`] = `
 "import { template as _template, children as _children, effect as _effect, setHtml as _setHtml } from 'vue/vapor';
 const t0 = _template('<div></div>');
 export function render(_ctx) {

diff --git a/packages/compiler-vapor/__tests__/compile.test.ts b/packages/compiler-vapor/__tests__/compile.test.ts
@@ -1,4 +1,9 @@
-import { type RootNode, BindingTypes, ErrorCodes } from '@vue/compiler-dom'
+import {
+  type RootNode,
+  BindingTypes,
+  ErrorCodes,
+  DOMErrorCodes,
+} from '@vue/compiler-dom'
 import { type CompilerOptions, compile as _compile } from '../src'
 
 // TODO remove it
@@ -144,9 +149,26 @@ describe('compile', () => {
         expect(code).matchSnapshot()
       })
 
-      test('no expression', async () => {
-        const code = await compile(`<div v-html></div>`)
+      test('should raise error and ignore children when v-html is present', async () => {
+        const onError = vi.fn()
+        const code = await compile(`<div v-html="test">hello</div>`, {
+          onError,
+        })
+        expect(code).matchSnapshot()
+        expect(onError.mock.calls).toMatchObject([
+          [{ code: DOMErrorCodes.X_V_HTML_WITH_CHILDREN }],
+        ])
+      })
+
+      test('should raise error if has no expression', async () => {
+        const onError = vi.fn()
+        const code = await compile(`<div v-html></div>`, {
+          onError,
+        })
         expect(code).matchSnapshot()
+        expect(onError.mock.calls).toMatchObject([
+          [{ code: DOMErrorCodes.X_V_HTML_NO_EXPRESSION }],
+        ])
       })
     })
 

diff --git a/packages/compiler-vapor/src/transform.ts b/packages/compiler-vapor/src/transform.ts
@@ -16,6 +16,8 @@ import {
   defaultOnWarn,
   ErrorCodes,
   createCompilerError,
+  DOMErrorCodes,
+  createDOMCompilerError,
 } from '@vue/compiler-dom'
 import { EMPTY_OBJ, NOOP, isArray, isVoidTag } from '@vue/shared'
 import {
@@ -493,6 +495,18 @@ function transformProp(
       break
     }
     case 'html': {
+      if (!exp) {
+        ctx.options.onError!(
+          createDOMCompilerError(DOMErrorCodes.X_V_HTML_NO_EXPRESSION, loc),
+        )
+      }
+      if (ctx.node.children.length) {
+        ctx.options.onError!(
+          createDOMCompilerError(DOMErrorCodes.X_V_HTML_WITH_CHILDREN, loc),
+        )
+        ctx.node.children.length = 0
+      }
+
       const value = expr || '""'
       ctx.registerEffect(value, {
         type: IRNodeTypes.SET_HTML,