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]/