fix(compiler-core): should set <math> tag as block to retain MathML…

… namespace after patching (#10891)

Co-authored-by: linzhe141 <[email protected]>

packages/compiler-core/__tests__/transforms/transformElement.spec.ts

@@ -1284,6 +1284,18 @@ describe('compiler: element transform', () => {
     })
   })
 
+  test('<math> should be forced into blocks', () => {
+    const ast = parse(`<div><math/></div>`)
+    transform(ast, {
+      nodeTransforms: [transformElement],
+    })
+    expect((ast as any).children[0].children[0].codegenNode).toMatchObject({
+      type: NodeTypes.VNODE_CALL,
+      tag: `"math"`,
+      isBlock: true,
+    })
+  })
+
   test('force block for runtime custom directive w/ children', () => {
     const { node } = parseWithElementTransform(`<div v-foo>hello</div>`)
     expect(node.isBlock).toBe(true)

packages/compiler-core/src/transforms/hoistStatic.ts

@@ -174,7 +174,8 @@ export function getConstantType(
       if (
         codegenNode.isBlock &&
         node.tag !== 'svg' &&
-        node.tag !== 'foreignObject'
+        node.tag !== 'foreignObject' &&
+        node.tag !== 'math'
       ) {
         return ConstantTypes.NOT_CONSTANT
       }

packages/compiler-core/src/transforms/transformElement.ts

@@ -117,7 +117,7 @@ export const transformElement: NodeTransform = (node, context) => {
         // updates inside get proper isSVG flag at runtime. (#639, #643)
         // This is technically web-specific, but splitting the logic out of core
         // leads to too much unnecessary complexity.
-        (tag === 'svg' || tag === 'foreignObject'))
+        (tag === 'svg' || tag === 'foreignObject' || tag === 'math'))
 
     // props
     if (props.length > 0) {

packages/runtime-dom/__tests__/nodeOps.spec.ts

@@ -1,5 +1,6 @@
-import { nodeOps, svgNS } from '../src/nodeOps'
-
+import { defineComponent, h, nextTick, ref } from 'vue'
+import { mathmlNS, nodeOps, svgNS } from '../src/nodeOps'
+import { render } from '@vue/runtime-dom'
 describe('runtime-dom: node-ops', () => {
   test("the <select>'s multiple attr should be set in createElement", () => {
     const el = nodeOps.createElement('select', undefined, undefined, {
@@ -106,5 +107,38 @@ describe('runtime-dom: node-ops', () => {
       expect(nodes[0]).toBe(parent.firstChild)
       expect(nodes[1]).toBe(parent.childNodes[parent.childNodes.length - 2])
     })
+
+    test('The math elements should keep their MathML namespace', async () => {
+      let root = document.createElement('div') as any
+
+      let countRef: any
+      const component = defineComponent({
+        data() {
+          return { value: 0 }
+        },
+        setup() {
+          const count = ref(0)
+          countRef = count
+          return {
+            count,
+          }
+        },
+        template: `
+          <div>
+            <math>
+              <mrow class="bar" v-if="count % 2">Bar</mrow>
+              <msup class="foo" v-else>Foo</msup>
+            </math>
+          </div>
+        `,
+      })
+      render(h(component), root)
+      const foo = root.querySelector('.foo')
+      expect(foo.namespaceURI).toBe(mathmlNS)
+      countRef.value++
+      await nextTick()
+      const bar = root.querySelector('.bar')
+      expect(bar.namespaceURI).toBe(mathmlNS)
+    })
   })
 })