fix: guard against missing MathMLElement and better type

Author: sto3psl

packages/runtime-core/src/apiCreateApp.ts

@@ -47,7 +47,7 @@ export interface App<HostElement = any> {
   mount(
     rootContainer: HostElement | string,
     isHydrate?: boolean,
-    namespace?: ElementNamespace
+    namespace?: boolean | ElementNamespace
   ): ComponentPublicInstance
   unmount(): void
   provide<T>(key: InjectionKey<T> | string, value: T): this
@@ -297,7 +297,7 @@ export function createAppAPI<HostElement>(
       mount(
         rootContainer: HostElement,
         isHydrate?: boolean,
-        namespace?: 'svg' | 'mathml'
+        namespace?: boolean | ElementNamespace
       ): any {
         if (!isMounted) {
           // #5571
@@ -313,10 +313,24 @@ export function createAppAPI<HostElement>(
           // this will be set on the root instance on initial mount.
           vnode.appContext = context
 
+          if (namespace === true) {
+            namespace = 'svg'
+          }
+
+          if (namespace === false) {
+            namespace = undefined
+          }
+
           // HMR root reload
           if (__DEV__) {
             context.reload = () => {
-              render(cloneVNode(vnode), rootContainer, namespace)
+              // casting to ElementNamespace because TS doesn't guarantee type narrowing
+              // over function boundaries
+              render(
+                cloneVNode(vnode),
+                rootContainer,
+                namespace as ElementNamespace
+              )
             }
           }
 

packages/runtime-core/src/compat/global.ts

@@ -505,7 +505,11 @@ function installCompatMount(
 
       let namespace: ElementNamespace
       if (container instanceof SVGElement) namespace = 'svg'
-      else if (container instanceof MathMLElement) namespace = 'mathml'
+      else if (
+        typeof MathMLElement === 'function' &&
+        container instanceof MathMLElement
+      )
+        namespace = 'mathml'
 
       // HMR root reload
       if (__DEV__) {

packages/runtime-core/src/components/Teleport.ts

@@ -30,7 +30,7 @@ const isTargetSVG = (target: RendererElement): boolean =>
   typeof SVGElement !== 'undefined' && target instanceof SVGElement
 
 const isTargetMathML = (target: RendererElement): boolean =>
-  typeof MathMLElement !== 'undefined' && target instanceof MathMLElement
+  typeof MathMLElement === 'function' && target instanceof MathMLElement
 
 const resolveTarget = <T = RendererElement>(
   props: TeleportProps | null,
@@ -113,7 +113,7 @@ export const TeleportImpl = {
       if (target) {
         insert(targetAnchor, target)
         // #2652 we could be teleporting from a non-SVG tree into an SVG tree
-        if (namespace === true || namespace === 'svg' || isTargetSVG(target)) {
+        if (namespace === 'svg' || isTargetSVG(target)) {
           namespace = 'svg'
         }
         if (namespace === 'mathml' || isTargetMathML(target)) {
@@ -155,7 +155,7 @@ export const TeleportImpl = {
       const currentContainer = wasDisabled ? container : target
       const currentAnchor = wasDisabled ? mainAnchor : targetAnchor
 
-      if (namespace === true || namespace === 'svg' || isTargetSVG(target)) {
+      if (namespace === 'svg' || isTargetSVG(target)) {
         namespace = 'svg'
       }
       if (namespace === 'mathml' || isTargetMathML(target)) {

packages/runtime-core/src/renderer.ts

@@ -86,7 +86,7 @@ export interface HydrationRenderer extends Renderer<Element | ShadowRoot> {
 /**
  * `boolean` is kept for backwards compatibility with the old `isSVG` attribute.
  */
-export type ElementNamespace = boolean | 'svg' | 'mathml' | undefined
+export type ElementNamespace = 'svg' | 'mathml' | undefined
 
 export type RootRenderFunction<HostElement = RendererElement> = (
   vnode: VNode | null,

packages/runtime-dom/src/index.ts

@@ -103,7 +103,11 @@ export const createApp = ((...args) => {
     container.innerHTML = ''
     let namespace: ElementNamespace
     if (container instanceof SVGElement) namespace = 'svg'
-    else if (container instanceof MathMLElement) namespace = 'mathml'
+    else if (
+      typeof MathMLElement === 'function' &&
+      container instanceof MathMLElement
+    )
+      namespace = 'mathml'
     const proxy = mount(container, false, namespace)
     if (container instanceof Element) {
       container.removeAttribute('v-cloak')
@@ -129,7 +133,11 @@ export const createSSRApp = ((...args) => {
     if (container) {
       let namespace: ElementNamespace
       if (container instanceof SVGElement) namespace = 'svg'
-      else if (container instanceof MathMLElement) namespace = 'mathml'
+      else if (
+        typeof MathMLElement === 'function' &&
+        container instanceof MathMLElement
+      )
+        namespace = 'mathml'
       return mount(container, true, namespace)
     }
   }

packages/runtime-dom/src/modules/attrs.ts

@@ -20,7 +20,7 @@ export function patchAttr(
   namespace?: ElementNamespace,
   instance?: ComponentInternalInstance | null
 ) {
-  if ((namespace === true || namespace === 'svg') && key.startsWith('xlink:')) {
+  if (namespace === 'svg' && key.startsWith('xlink:')) {
     if (value == null) {
       el.removeAttributeNS(xlinkNS, key.slice(6, key.length))
     } else {

packages/runtime-dom/src/modules/class.ts

@@ -19,7 +19,7 @@ export function patchClass(
   }
   if (value == null) {
     el.removeAttribute('class')
-  } else if (namespace === 'svg' || namespace === true) {
+  } else if (namespace === 'svg') {
     el.setAttribute('class', value)
   } else {
     el.className = value

packages/runtime-dom/src/nodeOps.ts

@@ -93,7 +93,7 @@ export const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'> = {
       }
 
       const template = templateContainer.content
-      if (namespace === true || namespace === 'svg' || namespace === 'mathml') {
+      if (namespace === 'svg' || namespace === 'mathml') {
         // remove outer svg/math wrapper
         const wrapper = template.firstChild!
         while (wrapper.firstChild) {

packages/runtime-dom/src/patchProp.ts

@@ -71,7 +71,7 @@ function shouldSetAsProp(
   value: unknown,
   namespace?: ElementNamespace
 ) {
-  if (namespace === 'svg' || namespace === true) {
+  if (namespace === 'svg') {
     // most keys must be set as attribute on svg elements to work
     // ...except innerHTML & textContent
     if (key === 'innerHTML' || key === 'textContent') {