Skip to content

Commit

Permalink
feat(custom-element): support for expose on customElement (#6256)
Browse files Browse the repository at this point in the history
close #5540
  • Loading branch information
hcg1023 authored Aug 3, 2024
1 parent 5a1a89b commit af838c1
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 0 deletions.
61 changes: 61 additions & 0 deletions packages/runtime-dom/__tests__/customElement.spec.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import type { MockedFunction } from 'vitest'
import {
type Ref,
type VueElement,
Expand Down Expand Up @@ -881,4 +882,64 @@ describe('defineCustomElement', () => {
expect(style.textContent).toBe(`div { color: red; }`)
})
})

describe('expose', () => {
test('expose attributes and callback', async () => {
type SetValue = (value: string) => void
let fn: MockedFunction<SetValue>

const E = defineCustomElement({
setup(_, { expose }) {
const value = ref('hello')

const setValue = (fn = vi.fn((_value: string) => {
value.value = _value
}))

expose({
setValue,
value,
})

return () => h('div', null, [value.value])
},
})
customElements.define('my-el-expose', E)

container.innerHTML = `<my-el-expose></my-el-expose>`
const e = container.childNodes[0] as VueElement & {
value: string
setValue: MockedFunction<SetValue>
}
expect(e.shadowRoot!.innerHTML).toBe(`<div>hello</div>`)
expect(e.value).toBe('hello')
expect(e.setValue).toBe(fn!)
e.setValue('world')
expect(e.value).toBe('world')
await nextTick()
expect(e.shadowRoot!.innerHTML).toBe(`<div>world</div>`)
})

test('warning when exposing an existing property', () => {
const E = defineCustomElement({
props: {
value: String,
},
setup(props, { expose }) {
expose({
value: 'hello',
})

return () => h('div', null, [props.value])
},
})
customElements.define('my-el-expose-two', E)

container.innerHTML = `<my-el-expose-two value="world"></my-el-expose-two>`

expect(
`[Vue warn]: Exposed property "value" already exists on custom element.`,
).toHaveBeenWarned()
})
})
})
21 changes: 21 additions & 0 deletions packages/runtime-dom/src/apiCustomElement.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,13 @@ import {
defineComponent,
getCurrentInstance,
nextTick,
unref,
warn,
} from '@vue/runtime-core'
import {
camelize,
extend,
hasOwn,
hyphenate,
isArray,
isPlainObject,
Expand Down Expand Up @@ -308,6 +310,9 @@ export class VueElement extends BaseClass {

// initial render
this._update()

// apply expose
this._applyExpose()
}

const asyncDef = (this._def as ComponentOptions).__asyncLoader
Expand Down Expand Up @@ -342,6 +347,22 @@ export class VueElement extends BaseClass {
}
}

private _applyExpose() {
const exposed = this._instance && this._instance.exposed
if (!exposed) return
for (const key in exposed) {
if (!hasOwn(this, key)) {
// exposed properties are readonly
Object.defineProperty(this, key, {
// unwrap ref to be consistent with public instance behavior
get: () => unref(exposed[key]),
})
} else if (__DEV__) {
warn(`Exposed property "${key}" already exists on custom element.`)
}
}
}

protected _setAttr(key: string) {
if (key.startsWith('data-v-')) return
let value = this.hasAttribute(key) ? this.getAttribute(key) : undefined
Expand Down

0 comments on commit af838c1

Please sign in to comment.