From 050042cda5893091354052c9e8851de1f20eef81 Mon Sep 17 00:00:00 2001
From: likui <2218301630@qq.com>
Date: Mon, 13 Apr 2020 15:53:40 +0800
Subject: [PATCH 1/3] fix(runtime-dom): should patch svg innerHtml
fix #954
---
.../runtime-dom/__tests__/patchProps.spec.ts | 16 ++++++++++++++++
packages/runtime-dom/src/patchProp.ts | 9 +++++----
2 files changed, 21 insertions(+), 4 deletions(-)
diff --git a/packages/runtime-dom/__tests__/patchProps.spec.ts b/packages/runtime-dom/__tests__/patchProps.spec.ts
index 96f3037cf13..ce30f91162f 100644
--- a/packages/runtime-dom/__tests__/patchProps.spec.ts
+++ b/packages/runtime-dom/__tests__/patchProps.spec.ts
@@ -45,6 +45,22 @@ describe('runtime-dom: props patching', () => {
expect(fn).toHaveBeenCalled()
})
+ // #954
+ test('(svg) innerHTML unmount prev children', () => {
+ const fn = jest.fn()
+ const comp = {
+ render: () => 'foo',
+ unmounted: fn
+ }
+ const root = document.createElement('div')
+ render(h('div', null, [h(comp)]), root)
+ expect(root.innerHTML).toBe(`
foo
`)
+
+ render(h('svg', { innerHTML: '' }), root)
+ expect(root.innerHTML).toBe(``)
+ expect(fn).toHaveBeenCalled()
+ })
+
test('textContent unmount prev children', () => {
const fn = jest.fn()
const comp = {
diff --git a/packages/runtime-dom/src/patchProp.ts b/packages/runtime-dom/src/patchProp.ts
index 71d64155517..21766af98bd 100644
--- a/packages/runtime-dom/src/patchProp.ts
+++ b/packages/runtime-dom/src/patchProp.ts
@@ -34,10 +34,11 @@ export const patchProp: RendererOptions['patchProp'] = (
patchEvent(el, key, prevValue, nextValue, parentComponent)
}
} else if (
- !isSVG &&
- key in el &&
- // onclick="foo" needs to be set as an attribute to work
- !(nativeOnRE.test(key) && isString(nextValue))
+ (!isSVG &&
+ key in el &&
+ // onclick="foo" needs to be set as an attribute to work
+ !(nativeOnRE.test(key) && isString(nextValue))) ||
+ (isSVG && key === 'innerHTML')
) {
patchDOMProp(
el,
From 3d6b1f21d428c60aef4893f849ae3055b19251ea Mon Sep 17 00:00:00 2001
From: Evan You
Date: Mon, 13 Apr 2020 12:07:43 -0400
Subject: [PATCH 2/3] Update patchProp.ts
---
packages/runtime-dom/src/patchProp.ts | 15 ++++++++++-----
1 file changed, 10 insertions(+), 5 deletions(-)
diff --git a/packages/runtime-dom/src/patchProp.ts b/packages/runtime-dom/src/patchProp.ts
index 21766af98bd..e8c826edb62 100644
--- a/packages/runtime-dom/src/patchProp.ts
+++ b/packages/runtime-dom/src/patchProp.ts
@@ -34,11 +34,16 @@ export const patchProp: RendererOptions['patchProp'] = (
patchEvent(el, key, prevValue, nextValue, parentComponent)
}
} else if (
- (!isSVG &&
- key in el &&
- // onclick="foo" needs to be set as an attribute to work
- !(nativeOnRE.test(key) && isString(nextValue))) ||
- (isSVG && key === 'innerHTML')
+ isSVG
+ ? // most keys must be set as attribute on svg elements to work
+ // ...except innerHTML
+ key === 'innerHTML' ||
+ // or native onclick with function values
+ (key in el && nativeOnRE.test(key) && isFunction(nextValue))
+ : // for normal html elements, set as a property if it exists
+ key in el &&
+ // except native onclick with string values
+ !(nativeOnRE.test(key) && isString(nextValue))
) {
patchDOMProp(
el,
From d53660c944b1715831535d0be56957edc55edea8 Mon Sep 17 00:00:00 2001
From: Evan You
Date: Mon, 13 Apr 2020 12:09:25 -0400
Subject: [PATCH 3/3] Update patchProp.ts
---
packages/runtime-dom/src/patchProp.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/runtime-dom/src/patchProp.ts b/packages/runtime-dom/src/patchProp.ts
index e8c826edb62..4543bd1a54d 100644
--- a/packages/runtime-dom/src/patchProp.ts
+++ b/packages/runtime-dom/src/patchProp.ts
@@ -3,7 +3,7 @@ import { patchStyle } from './modules/style'
import { patchAttr } from './modules/attrs'
import { patchDOMProp } from './modules/props'
import { patchEvent } from './modules/events'
-import { isOn, isString } from '@vue/shared'
+import { isOn, isString, isFunction } from '@vue/shared'
import { RendererOptions } from '@vue/runtime-core'
const nativeOnRE = /^on[a-z]/