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

… namespace after patching (vuejs#10891)

Co-authored-by: linzhe141 <linzhe141@qq.com>

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)
+ })
  })
 })