From 6773f86085bd50bc506a58dc7c7b80fd28cb53c6 Mon Sep 17 00:00:00 2001
From: linzhe141 <1572213544@qq.com>
Date: Tue, 10 Dec 2024 15:18:07 +0800
Subject: [PATCH 1/2] fix: v-html and v-text  can only be used on elements

---
 .../__tests__/transforms/vHtml.spec.ts        | 23 ++++++++++++++++++-
 .../__tests__/transforms/vText.spec.ts        | 23 ++++++++++++++++++-
 packages/compiler-dom/src/errors.ts           |  4 ++++
 packages/compiler-dom/src/transforms/vHtml.ts |  6 +++++
 packages/compiler-dom/src/transforms/vText.ts |  6 +++++
 packages/compiler-ssr/src/errors.ts           |  2 +-
 6 files changed, 61 insertions(+), 3 deletions(-)

diff --git a/packages/compiler-dom/__tests__/transforms/vHtml.spec.ts b/packages/compiler-dom/__tests__/transforms/vHtml.spec.ts
index bca2fdf95..bff4d57f6 100644
--- a/packages/compiler-dom/__tests__/transforms/vHtml.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/vHtml.spec.ts
@@ -6,6 +6,7 @@ import {
 } from '@vue/compiler-core'
 import { transformVHtml } from '../../src/transforms/vHtml'
 import { transformElement } from '../../../compiler-core/src/transforms/transformElement'
+import { transformSlotOutlet } from '../../../compiler-core/src/transforms/transformSlotOutlet'
 import { createObjectMatcher } from '../../../compiler-core/__tests__/testUtils'
 import { PatchFlags } from '@vue/shared'
 import { DOMErrorCodes } from '../../src/errors'
@@ -13,7 +14,7 @@ import { DOMErrorCodes } from '../../src/errors'
 function transformWithVHtml(template: string, options: CompilerOptions = {}) {
   const ast = parse(template)
   transform(ast, {
-    nodeTransforms: [transformElement],
+    nodeTransforms: [transformElement, transformSlotOutlet],
     directiveTransforms: {
       html: transformVHtml,
     },
@@ -64,4 +65,24 @@ describe('compiler: v-html transform', () => {
       [{ code: DOMErrorCodes.X_V_HTML_NO_EXPRESSION }],
     ])
   })
+
+  it('should raise error if uses on component', () => {
+    const onError = vi.fn()
+    transformWithVHtml(`<Comp v-html="'<div>foo</div>'"></Comp>`, {
+      onError,
+    })
+    expect(onError.mock.calls).toMatchObject([
+      [{ code: DOMErrorCodes.X_V_HTML_ON_INVALID_ELEMENT }],
+    ])
+  })
+
+  it('should raise error if uses on slot', () => {
+    const onError = vi.fn()
+    transformWithVHtml(`<slot v-html="'<div>foo</div>'"></slot>`, {
+      onError,
+    })
+    expect(onError.mock.calls).toMatchObject([
+      [{ code: DOMErrorCodes.X_V_HTML_ON_INVALID_ELEMENT }],
+    ])
+  })
 })
diff --git a/packages/compiler-dom/__tests__/transforms/vText.spec.ts b/packages/compiler-dom/__tests__/transforms/vText.spec.ts
index e96ab2972..0086d97ff 100644
--- a/packages/compiler-dom/__tests__/transforms/vText.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/vText.spec.ts
@@ -6,6 +6,7 @@ import {
 } from '@vue/compiler-core'
 import { transformVText } from '../../src/transforms/vText'
 import { transformElement } from '../../../compiler-core/src/transforms/transformElement'
+import { transformSlotOutlet } from '../../../compiler-core/src/transforms/transformSlotOutlet'
 import { createObjectMatcher } from '../../../compiler-core/__tests__/testUtils'
 import { PatchFlags } from '@vue/shared'
 import { DOMErrorCodes } from '../../src/errors'
@@ -13,7 +14,7 @@ import { DOMErrorCodes } from '../../src/errors'
 function transformWithVText(template: string, options: CompilerOptions = {}) {
   const ast = parse(template)
   transform(ast, {
-    nodeTransforms: [transformElement],
+    nodeTransforms: [transformElement, transformSlotOutlet],
     directiveTransforms: {
       text: transformVText,
     },
@@ -68,4 +69,24 @@ describe('compiler: v-text transform', () => {
       [{ code: DOMErrorCodes.X_V_TEXT_NO_EXPRESSION }],
     ])
   })
+
+  it('should raise error if uses on component', () => {
+    const onError = vi.fn()
+    transformWithVText(`<Comp v-text="xxxxx'"></Comp>`, {
+      onError,
+    })
+    expect(onError.mock.calls).toMatchObject([
+      [{ code: DOMErrorCodes.X_V_TEXT_ON_INVALID_ELEMENT }],
+    ])
+  })
+
+  it('should raise error if uses on slot', () => {
+    const onError = vi.fn()
+    transformWithVText(`<slot v-text="xxxxx"></slot>`, {
+      onError,
+    })
+    expect(onError.mock.calls).toMatchObject([
+      [{ code: DOMErrorCodes.X_V_TEXT_ON_INVALID_ELEMENT }],
+    ])
+  })
 })
diff --git a/packages/compiler-dom/src/errors.ts b/packages/compiler-dom/src/errors.ts
index b47624840..2b5fe3edb 100644
--- a/packages/compiler-dom/src/errors.ts
+++ b/packages/compiler-dom/src/errors.ts
@@ -23,8 +23,10 @@ export function createDOMCompilerError(
 export enum DOMErrorCodes {
   X_V_HTML_NO_EXPRESSION = 53 /* ErrorCodes.__EXTEND_POINT__ */,
   X_V_HTML_WITH_CHILDREN,
+  X_V_HTML_ON_INVALID_ELEMENT,
   X_V_TEXT_NO_EXPRESSION,
   X_V_TEXT_WITH_CHILDREN,
+  X_V_TEXT_ON_INVALID_ELEMENT,
   X_V_MODEL_ON_INVALID_ELEMENT,
   X_V_MODEL_ARG_ON_ELEMENT,
   X_V_MODEL_ON_FILE_INPUT_ELEMENT,
@@ -51,8 +53,10 @@ if (__TEST__) {
 export const DOMErrorMessages: { [code: number]: string } = {
   [DOMErrorCodes.X_V_HTML_NO_EXPRESSION]: `v-html is missing expression.`,
   [DOMErrorCodes.X_V_HTML_WITH_CHILDREN]: `v-html will override element children.`,
+  [DOMErrorCodes.X_V_HTML_ON_INVALID_ELEMENT]: `v-html can only be used on elements.`,
   [DOMErrorCodes.X_V_TEXT_NO_EXPRESSION]: `v-text is missing expression.`,
   [DOMErrorCodes.X_V_TEXT_WITH_CHILDREN]: `v-text will override element children.`,
+  [DOMErrorCodes.X_V_TEXT_ON_INVALID_ELEMENT]: `v-text can only be used on elements.`,
   [DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT]: `v-model can only be used on <input>, <textarea> and <select> elements.`,
   [DOMErrorCodes.X_V_MODEL_ARG_ON_ELEMENT]: `v-model argument is not supported on plain elements.`,
   [DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT]: `v-model cannot be used on file inputs since they are read-only. Use a v-on:change listener instead.`,
diff --git a/packages/compiler-dom/src/transforms/vHtml.ts b/packages/compiler-dom/src/transforms/vHtml.ts
index d44ae508f..37e84bc61 100644
--- a/packages/compiler-dom/src/transforms/vHtml.ts
+++ b/packages/compiler-dom/src/transforms/vHtml.ts
@@ -1,5 +1,6 @@
 import {
   type DirectiveTransform,
+  ElementTypes,
   createObjectProperty,
   createSimpleExpression,
 } from '@vue/compiler-core'
@@ -7,6 +8,11 @@ import { DOMErrorCodes, createDOMCompilerError } from '../errors'
 
 export const transformVHtml: DirectiveTransform = (dir, node, context) => {
   const { exp, loc } = dir
+  if (node.tagType !== ElementTypes.ELEMENT) {
+    context.onError(
+      createDOMCompilerError(DOMErrorCodes.X_V_HTML_ON_INVALID_ELEMENT, loc),
+    )
+  }
   if (!exp) {
     context.onError(
       createDOMCompilerError(DOMErrorCodes.X_V_HTML_NO_EXPRESSION, loc),
diff --git a/packages/compiler-dom/src/transforms/vText.ts b/packages/compiler-dom/src/transforms/vText.ts
index de46e40ff..3731820d7 100644
--- a/packages/compiler-dom/src/transforms/vText.ts
+++ b/packages/compiler-dom/src/transforms/vText.ts
@@ -1,5 +1,6 @@
 import {
   type DirectiveTransform,
+  ElementTypes,
   TO_DISPLAY_STRING,
   createCallExpression,
   createObjectProperty,
@@ -10,6 +11,11 @@ import { DOMErrorCodes, createDOMCompilerError } from '../errors'
 
 export const transformVText: DirectiveTransform = (dir, node, context) => {
   const { exp, loc } = dir
+  if (node.tagType !== ElementTypes.ELEMENT) {
+    context.onError(
+      createDOMCompilerError(DOMErrorCodes.X_V_TEXT_ON_INVALID_ELEMENT, loc),
+    )
+  }
   if (!exp) {
     context.onError(
       createDOMCompilerError(DOMErrorCodes.X_V_TEXT_NO_EXPRESSION, loc),
diff --git a/packages/compiler-ssr/src/errors.ts b/packages/compiler-ssr/src/errors.ts
index e4fd505d2..57ae1ca2e 100644
--- a/packages/compiler-ssr/src/errors.ts
+++ b/packages/compiler-ssr/src/errors.ts
@@ -17,7 +17,7 @@ export function createSSRCompilerError(
 }
 
 export enum SSRErrorCodes {
-  X_SSR_UNSAFE_ATTR_NAME = 65 /* DOMErrorCodes.__EXTEND_POINT__ */,
+  X_SSR_UNSAFE_ATTR_NAME = 67 /* DOMErrorCodes.__EXTEND_POINT__ */,
   X_SSR_NO_TELEPORT_TARGET,
   X_SSR_INVALID_AST_NODE,
 }

From 20ea3495050d3e93b0d683c1b5e7955f42998dbb Mon Sep 17 00:00:00 2001
From: linzhe141 <1572213544@qq.com>
Date: Wed, 11 Dec 2024 18:00:47 +0800
Subject: [PATCH 2/2] wip: .

---
 packages/compiler-dom/src/runtimeHelpers.ts   |  2 ++
 packages/compiler-dom/src/transforms/vHtml.ts | 19 +++++++++++++++
 packages/runtime-core/src/directives.ts       | 18 ++++++++++++++-
 packages/runtime-dom/src/directives/vHtml.ts  | 23 +++++++++++++++++++
 packages/runtime-dom/src/index.ts             |  1 +
 5 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 packages/runtime-dom/src/directives/vHtml.ts

diff --git a/packages/compiler-dom/src/runtimeHelpers.ts b/packages/compiler-dom/src/runtimeHelpers.ts
index c5349ad79..7a7ea01f2 100644
--- a/packages/compiler-dom/src/runtimeHelpers.ts
+++ b/packages/compiler-dom/src/runtimeHelpers.ts
@@ -20,6 +20,7 @@ export const V_ON_WITH_KEYS: unique symbol = Symbol(
 )
 
 export const V_SHOW: unique symbol = Symbol(__DEV__ ? `vShow` : ``)
+export const V_HTML: unique symbol = Symbol(__DEV__ ? `vHtml` : ``)
 
 export const TRANSITION: unique symbol = Symbol(__DEV__ ? `Transition` : ``)
 export const TRANSITION_GROUP: unique symbol = Symbol(
@@ -35,6 +36,7 @@ registerRuntimeHelpers({
   [V_ON_WITH_MODIFIERS]: `withModifiers`,
   [V_ON_WITH_KEYS]: `withKeys`,
   [V_SHOW]: `vShow`,
+  [V_HTML]: `vHtml`,
   [TRANSITION]: `Transition`,
   [TRANSITION_GROUP]: `TransitionGroup`,
 })
diff --git a/packages/compiler-dom/src/transforms/vHtml.ts b/packages/compiler-dom/src/transforms/vHtml.ts
index 37e84bc61..2e3b824a7 100644
--- a/packages/compiler-dom/src/transforms/vHtml.ts
+++ b/packages/compiler-dom/src/transforms/vHtml.ts
@@ -1,13 +1,32 @@
 import {
+  type ComponentNode,
   type DirectiveTransform,
   ElementTypes,
+  RESOLVE_DYNAMIC_COMPONENT,
   createObjectProperty,
   createSimpleExpression,
+  resolveComponentType,
 } from '@vue/compiler-core'
 import { DOMErrorCodes, createDOMCompilerError } from '../errors'
+import { isObject } from '@vue/shared'
+import { V_HTML } from '../runtimeHelpers'
 
 export const transformVHtml: DirectiveTransform = (dir, node, context) => {
   const { exp, loc } = dir
+  const { tag } = node
+  const isComponent = node.tagType === ElementTypes.COMPONENT
+  let vnodeTag = isComponent
+    ? resolveComponentType(node as ComponentNode, context)
+    : `"${tag}"`
+
+  const isDynamicComponent =
+    isObject(vnodeTag) && vnodeTag.callee === RESOLVE_DYNAMIC_COMPONENT
+  if (isDynamicComponent) {
+    return {
+      props: [],
+      needRuntime: context.helper(V_HTML),
+    }
+  }
   if (node.tagType !== ElementTypes.ELEMENT) {
     context.onError(
       createDOMCompilerError(DOMErrorCodes.X_V_HTML_ON_INVALID_ELEMENT, loc),
diff --git a/packages/runtime-core/src/directives.ts b/packages/runtime-core/src/directives.ts
index f6a33f5a2..a36ed086e 100644
--- a/packages/runtime-core/src/directives.ts
+++ b/packages/runtime-core/src/directives.ts
@@ -12,7 +12,12 @@ return withDirectives(h(comp), [
 */
 
 import type { VNode } from './vnode'
-import { EMPTY_OBJ, isBuiltInDirective, isFunction } from '@vue/shared'
+import {
+  EMPTY_OBJ,
+  ShapeFlags,
+  isBuiltInDirective,
+  isFunction,
+} from '@vue/shared'
 import { warn } from './warning'
 import {
   type ComponentInternalInstance,
@@ -127,6 +132,12 @@ export type DirectiveArguments = Array<
   | [Directive | undefined, any, string | undefined, DirectiveModifiers]
 >
 
+function isComponent(vnode: VNode): boolean {
+  const { shapeFlag } = vnode
+  if (shapeFlag & ShapeFlags.COMPONENT) return true
+  return false
+}
+
 /**
  * Adds directives to a VNode.
  */
@@ -143,6 +154,11 @@ export function withDirectives<T extends VNode>(
   for (let i = 0; i < directives.length; i++) {
     let [dir, value, arg, modifiers = EMPTY_OBJ] = directives[i]
     if (dir) {
+      // @ts-expect-error check v-html
+      if (isComponent(vnode) && dir.name === '__v-html') {
+        warn(`v-html can only be used on elements.`, vnode)
+        continue
+      }
       if (isFunction(dir)) {
         dir = {
           mounted: dir,
diff --git a/packages/runtime-dom/src/directives/vHtml.ts b/packages/runtime-dom/src/directives/vHtml.ts
new file mode 100644
index 000000000..c1e839b8b
--- /dev/null
+++ b/packages/runtime-dom/src/directives/vHtml.ts
@@ -0,0 +1,23 @@
+import type { ObjectDirective } from '@vue/runtime-core'
+
+export type VHtmlElementDirective = ObjectDirective<HTMLElement> & {
+  name: '__v-html'
+}
+// only work with resolveDynamicComponent
+export const vHtml: VHtmlElementDirective = {
+  name: '__v-html',
+  beforeMount(el, { value }) {
+    setInnerHTML(el, value)
+  },
+  updated(el, { value, oldValue }) {
+    if (!value === !oldValue) return
+    setInnerHTML(el, value)
+  },
+  beforeUnmount(el, { value }) {
+    setInnerHTML(el, value)
+  },
+}
+
+function setInnerHTML(el: HTMLElement, value: unknown): void {
+  el.innerHTML = String(value)
+}
diff --git a/packages/runtime-dom/src/index.ts b/packages/runtime-dom/src/index.ts
index ca9a307dd..f626c00d0 100644
--- a/packages/runtime-dom/src/index.ts
+++ b/packages/runtime-dom/src/index.ts
@@ -282,6 +282,7 @@ export {
 } from './directives/vModel'
 export { withModifiers, withKeys } from './directives/vOn'
 export { vShow } from './directives/vShow'
+export { vHtml } from './directives/vHtml'
 
 import { initVModelForSSR } from './directives/vModel'
 import { initVShowForSSR } from './directives/vShow'