From c9306662ba77cbcd9e4239cd354185cce96a398f Mon Sep 17 00:00:00 2001 From: linzhe Date: Thu, 26 Sep 2024 00:07:55 +0800 Subject: [PATCH 1/5] wip: fix patch prop --- packages/runtime-dom/src/patchProp.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/runtime-dom/src/patchProp.ts b/packages/runtime-dom/src/patchProp.ts index 98b69967c71..c763c3bc04e 100644 --- a/packages/runtime-dom/src/patchProp.ts +++ b/packages/runtime-dom/src/patchProp.ts @@ -3,7 +3,13 @@ import { patchStyle } from './modules/style' import { patchAttr } from './modules/attrs' import { patchDOMProp } from './modules/props' import { patchEvent } from './modules/events' -import { isFunction, isModelListener, isOn, isString } from '@vue/shared' +import { + camelize, + isFunction, + isModelListener, + isOn, + isString, +} from '@vue/shared' import type { RendererOptions } from '@vue/runtime-core' import type { VueElement } from './apiCustomElement' @@ -41,6 +47,7 @@ export const patchProp: DOMRendererOptions['patchProp'] = ( ? ((key = key.slice(1)), false) : shouldSetAsProp(el, key, nextValue, isSVG) ) { + key = camelize(key) patchDOMProp(el, key, nextValue, parentComponent) // #6007 also set form state as attributes so they work with // or libs / extensions that expect attributes @@ -128,7 +135,7 @@ function shouldSetAsProp( return false } - if (key in el) { + if (camelize(key) in el) { return true } From dc6635553069061fe921b192d95457138bc1a3a7 Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Thu, 26 Sep 2024 10:02:10 +0800 Subject: [PATCH 2/5] chore: update --- .../runtime-dom/__tests__/customElement.spec.ts | 15 +++++++++++++++ packages/runtime-dom/src/modules/props.ts | 4 ++-- packages/runtime-dom/src/patchProp.ts | 1 - 3 files changed, 17 insertions(+), 3 deletions(-) diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts index 51113edef69..ef5051f42f7 100644 --- a/packages/runtime-dom/__tests__/customElement.spec.ts +++ b/packages/runtime-dom/__tests__/customElement.spec.ts @@ -223,6 +223,21 @@ describe('defineCustomElement', () => { expect(e.getAttribute('baz-qux')).toBe('four') }) + test('props via hyphen property', async () => { + const Comp = defineCustomElement({ + props: { + fooBar: Boolean, + }, + render() { + return 'Comp' + }, + }) + customElements.define('my-el-comp', Comp) + render(h('my-el-comp', { 'foo-bar': true }), container) + const el = container.children[0] + expect((el as any).outerHTML).toBe('') + }) + test('attribute -> prop type casting', async () => { const E = defineCustomElement({ props: { diff --git a/packages/runtime-dom/src/modules/props.ts b/packages/runtime-dom/src/modules/props.ts index 93d45c9e160..86424eb0d66 100644 --- a/packages/runtime-dom/src/modules/props.ts +++ b/packages/runtime-dom/src/modules/props.ts @@ -1,5 +1,5 @@ import { DeprecationTypes, compatUtils, warn } from '@vue/runtime-core' -import { includeBooleanAttr } from '@vue/shared' +import { camelize, includeBooleanAttr } from '@vue/shared' import { unsafeToTrustedHTML } from '../nodeOps' // functions. The user is responsible for using them with only trusted content. @@ -95,7 +95,7 @@ export function patchDOMProp( // some properties has getter, no setter, will error in 'use strict' // eg. try { - el[key] = value + el[camelize(key)] = value } catch (e: any) { // do not warn if value is auto-coerced from nullish values if (__DEV__ && !needRemove) { diff --git a/packages/runtime-dom/src/patchProp.ts b/packages/runtime-dom/src/patchProp.ts index c763c3bc04e..d3da526e381 100644 --- a/packages/runtime-dom/src/patchProp.ts +++ b/packages/runtime-dom/src/patchProp.ts @@ -47,7 +47,6 @@ export const patchProp: DOMRendererOptions['patchProp'] = ( ? ((key = key.slice(1)), false) : shouldSetAsProp(el, key, nextValue, isSVG) ) { - key = camelize(key) patchDOMProp(el, key, nextValue, parentComponent) // #6007 also set form state as attributes so they work with // or libs / extensions that expect attributes From 95c986970ac007817a23f18a56d850037b6db427 Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Thu, 26 Sep 2024 10:11:04 +0800 Subject: [PATCH 3/5] chore: update for e2e --- 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 d3da526e381..a1d8a112562 100644 --- a/packages/runtime-dom/src/patchProp.ts +++ b/packages/runtime-dom/src/patchProp.ts @@ -133,7 +133,7 @@ function shouldSetAsProp( if (isNativeOn(key) && isString(value)) { return false } - + // if el is a Vue custom element, it should be passed as a prop. if (camelize(key) in el) { return true } From 74bd0147ebe7236d98b60a7504d9c3daf21dd353 Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Thu, 26 Sep 2024 10:21:31 +0800 Subject: [PATCH 4/5] chore: update --- packages/runtime-dom/src/patchProp.ts | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/packages/runtime-dom/src/patchProp.ts b/packages/runtime-dom/src/patchProp.ts index a1d8a112562..01c80a4d490 100644 --- a/packages/runtime-dom/src/patchProp.ts +++ b/packages/runtime-dom/src/patchProp.ts @@ -3,13 +3,7 @@ import { patchStyle } from './modules/style' import { patchAttr } from './modules/attrs' import { patchDOMProp } from './modules/props' import { patchEvent } from './modules/events' -import { - camelize, - isFunction, - isModelListener, - isOn, - isString, -} from '@vue/shared' +import { isFunction, isModelListener, isOn, isString } from '@vue/shared' import type { RendererOptions } from '@vue/runtime-core' import type { VueElement } from './apiCustomElement' @@ -133,8 +127,7 @@ function shouldSetAsProp( if (isNativeOn(key) && isString(value)) { return false } - // if el is a Vue custom element, it should be passed as a prop. - if (camelize(key) in el) { + if (key in el) { return true } From e5dbce55c6b15bbbeeac96869902eaab11b29213 Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Thu, 26 Sep 2024 10:25:20 +0800 Subject: [PATCH 5/5] chore: update --- packages/runtime-dom/src/patchProp.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/runtime-dom/src/patchProp.ts b/packages/runtime-dom/src/patchProp.ts index 01c80a4d490..98b69967c71 100644 --- a/packages/runtime-dom/src/patchProp.ts +++ b/packages/runtime-dom/src/patchProp.ts @@ -127,6 +127,7 @@ function shouldSetAsProp( if (isNativeOn(key) && isString(value)) { return false } + if (key in el) { return true }