From 8aaa77cfcc59b1b1e1f65ab9d7c1e1d389d23ae2 Mon Sep 17 00:00:00 2001 From: daiwei Date: Sun, 3 Jan 2021 15:31:21 +0800 Subject: [PATCH 1/6] fix(runtime-core): improve isSVG check --- packages/runtime-core/src/hydration.ts | 2 +- packages/runtime-core/src/renderer.ts | 8 ++++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts index c7c88eb65de..34d1c392d17 100644 --- a/packages/runtime-core/src/hydration.ts +++ b/packages/runtime-core/src/hydration.ts @@ -33,7 +33,7 @@ const enum DOMNodeTypes { let hasMismatch = false -const isSVGContainer = (container: Element) => +export const isSVGContainer = (container: Element) => /svg/.test(container.namespaceURI!) && container.tagName !== 'foreignObject' const isComment = (node: Node): node is Comment => diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts index da86040d0a1..0bc4f58cd50 100644 --- a/packages/runtime-core/src/renderer.ts +++ b/packages/runtime-core/src/renderer.ts @@ -68,7 +68,11 @@ import { callWithErrorHandling, callWithAsyncErrorHandling } from './errorHandling' -import { createHydrationFunctions, RootHydrateFunction } from './hydration' +import { + createHydrationFunctions, + RootHydrateFunction, + isSVGContainer +} from './hydration' import { invokeDirectiveHook } from './directives' import { startMeasure, endMeasure } from './profiling' import { ComponentPublicInstance } from './componentPublicInstance' @@ -662,7 +666,7 @@ function baseCreateRenderer( isSVG: boolean, optimized: boolean ) => { - isSVG = isSVG || (n2.type as string) === 'svg' + isSVG = isSVG || (n2.type as string) === 'svg' || isSVGContainer(container) if (n1 == null) { mountElement( n2, From 52be90707d44201be93d10e6767a181c3e507341 Mon Sep 17 00:00:00 2001 From: daiwei Date: Sun, 3 Jan 2021 15:41:48 +0800 Subject: [PATCH 2/6] fix(runtime-core): improve isSVG check --- packages/runtime-core/src/components/Teleport.ts | 2 +- packages/runtime-core/src/renderer.ts | 11 ++++------- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/runtime-core/src/components/Teleport.ts b/packages/runtime-core/src/components/Teleport.ts index fa61c636a88..1fa5cc79d57 100644 --- a/packages/runtime-core/src/components/Teleport.ts +++ b/packages/runtime-core/src/components/Teleport.ts @@ -24,7 +24,7 @@ export const isTeleport = (type: any): boolean => type.__isTeleport export const isTeleportDisabled = (props: VNode['props']): boolean => props && (props.disabled || props.disabled === '') -const isTargetSVG = (target: RendererElement): boolean => +export const isTargetSVG = (target: RendererElement): boolean => typeof SVGElement !== 'undefined' && target instanceof SVGElement const resolveTarget = ( diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts index 0bc4f58cd50..f13dc2c5524 100644 --- a/packages/runtime-core/src/renderer.ts +++ b/packages/runtime-core/src/renderer.ts @@ -59,7 +59,8 @@ import { import { isTeleportDisabled, TeleportImpl, - TeleportVNode + TeleportVNode, + isTargetSVG } from './components/Teleport' import { isKeepAlive, KeepAliveContext } from './components/KeepAlive' import { registerHMR, unregisterHMR, isHmrUpdating } from './hmr' @@ -68,11 +69,7 @@ import { callWithErrorHandling, callWithAsyncErrorHandling } from './errorHandling' -import { - createHydrationFunctions, - RootHydrateFunction, - isSVGContainer -} from './hydration' +import { createHydrationFunctions, RootHydrateFunction } from './hydration' import { invokeDirectiveHook } from './directives' import { startMeasure, endMeasure } from './profiling' import { ComponentPublicInstance } from './componentPublicInstance' @@ -666,7 +663,7 @@ function baseCreateRenderer( isSVG: boolean, optimized: boolean ) => { - isSVG = isSVG || (n2.type as string) === 'svg' || isSVGContainer(container) + isSVG = isSVG || (n2.type as string) === 'svg' || isTargetSVG(container) if (n1 == null) { mountElement( n2, From 2f8a4beb9fdd1617adaa5d0f2d60fab5a10d140a Mon Sep 17 00:00:00 2001 From: daiwei Date: Sun, 3 Jan 2021 15:43:24 +0800 Subject: [PATCH 3/6] fix(runtime-core): clean --- packages/runtime-core/src/hydration.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts index 34d1c392d17..c7c88eb65de 100644 --- a/packages/runtime-core/src/hydration.ts +++ b/packages/runtime-core/src/hydration.ts @@ -33,7 +33,7 @@ const enum DOMNodeTypes { let hasMismatch = false -export const isSVGContainer = (container: Element) => +const isSVGContainer = (container: Element) => /svg/.test(container.namespaceURI!) && container.tagName !== 'foreignObject' const isComment = (node: Node): node is Comment => From 7558767854d275d4bbb3a8e7c13f9d20c9c3c6a0 Mon Sep 17 00:00:00 2001 From: daiwei Date: Sun, 3 Jan 2021 16:10:55 +0800 Subject: [PATCH 4/6] fix(runtime-core): improve isSVG check --- packages/runtime-core/src/hydration.ts | 2 +- packages/runtime-core/src/renderer.ts | 11 +++++++++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts index c7c88eb65de..34d1c392d17 100644 --- a/packages/runtime-core/src/hydration.ts +++ b/packages/runtime-core/src/hydration.ts @@ -33,7 +33,7 @@ const enum DOMNodeTypes { let hasMismatch = false -const isSVGContainer = (container: Element) => +export const isSVGContainer = (container: Element) => /svg/.test(container.namespaceURI!) && container.tagName !== 'foreignObject' const isComment = (node: Node): node is Comment => diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts index f13dc2c5524..0f305ac55f9 100644 --- a/packages/runtime-core/src/renderer.ts +++ b/packages/runtime-core/src/renderer.ts @@ -69,7 +69,11 @@ import { callWithErrorHandling, callWithAsyncErrorHandling } from './errorHandling' -import { createHydrationFunctions, RootHydrateFunction } from './hydration' +import { + createHydrationFunctions, + RootHydrateFunction, + isSVGContainer +} from './hydration' import { invokeDirectiveHook } from './directives' import { startMeasure, endMeasure } from './profiling' import { ComponentPublicInstance } from './componentPublicInstance' @@ -663,7 +667,10 @@ function baseCreateRenderer( isSVG: boolean, optimized: boolean ) => { - isSVG = isSVG || (n2.type as string) === 'svg' || isTargetSVG(container) + isSVG = + isSVG || + (n2.type as string) === 'svg' || + (isTargetSVG(container) && isSVGContainer(container as Element)) if (n1 == null) { mountElement( n2, From 06ed0f99e6f8748aeeffee97fec66751e8796b95 Mon Sep 17 00:00:00 2001 From: daiwei Date: Sun, 3 Jan 2021 16:13:59 +0800 Subject: [PATCH 5/6] fix(runtime-core): improve isSVG check --- packages/runtime-core/src/renderer.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts index 0f305ac55f9..629e6fb2a9c 100644 --- a/packages/runtime-core/src/renderer.ts +++ b/packages/runtime-core/src/renderer.ts @@ -59,8 +59,7 @@ import { import { isTeleportDisabled, TeleportImpl, - TeleportVNode, - isTargetSVG + TeleportVNode } from './components/Teleport' import { isKeepAlive, KeepAliveContext } from './components/KeepAlive' import { registerHMR, unregisterHMR, isHmrUpdating } from './hmr' @@ -670,7 +669,7 @@ function baseCreateRenderer( isSVG = isSVG || (n2.type as string) === 'svg' || - (isTargetSVG(container) && isSVGContainer(container as Element)) + isSVGContainer(container as Element) if (n1 == null) { mountElement( n2, From 4671bf490664917c1675a47b05f36d2af8c7df5e Mon Sep 17 00:00:00 2001 From: daiwei Date: Sun, 3 Jan 2021 16:15:55 +0800 Subject: [PATCH 6/6] fix(runtime-core): improve isSVG check --- packages/runtime-core/src/components/Teleport.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/runtime-core/src/components/Teleport.ts b/packages/runtime-core/src/components/Teleport.ts index 1fa5cc79d57..fa61c636a88 100644 --- a/packages/runtime-core/src/components/Teleport.ts +++ b/packages/runtime-core/src/components/Teleport.ts @@ -24,7 +24,7 @@ export const isTeleport = (type: any): boolean => type.__isTeleport export const isTeleportDisabled = (props: VNode['props']): boolean => props && (props.disabled || props.disabled === '') -export const isTargetSVG = (target: RendererElement): boolean => +const isTargetSVG = (target: RendererElement): boolean => typeof SVGElement !== 'undefined' && target instanceof SVGElement const resolveTarget = (