diff --git a/src/index.js b/src/index.js index 4409bd7..0f14996 100644 --- a/src/index.js +++ b/src/index.js @@ -152,6 +152,12 @@ export default function wrap (Vue, Component) { } initialize(resolved) syncInitialAttributes() + // sync existing element properties with props + camelizedPropsList.forEach(prop => { + if (typeof this[prop] !== 'undefined') { + wrapper.props[prop] = this[prop] + } + }) }) } // initialize children diff --git a/test/.eslintrc b/test/.eslintrc new file mode 100644 index 0000000..d36a491 --- /dev/null +++ b/test/.eslintrc @@ -0,0 +1,9 @@ +{ + "env": { + "jest": true + }, + "globals": { + "el": true, + "els": true + } +} diff --git a/test/fixtures/async.html b/test/fixtures/async.html index c0fb681..3627f92 100644 --- a/test/fixtures/async.html +++ b/test/fixtures/async.html @@ -5,7 +5,7 @@ const Component = () => new Promise(resolve => { setTimeout(() => { resolve({ - template: `
{{ foo }} {{ someProp }}
`, + template: `
{{ foo }} {{ someProp }} {{ extraProp.value }}
`, props: { foo: { type: Number, @@ -14,6 +14,10 @@ 'some-prop': { type: String, default: 'bar' + }, + extraProp: { + type: Object, + default: () => ({value: 'banana'}) } } }) @@ -26,6 +30,7 @@ customElements.define('my-element', wrap(Vue, Component)) window.els = document.querySelectorAll('my-element') +window.els[1].extraProp = {value: 'apple'} diff --git a/test/test.js b/test/test.js index 9423d7a..cc1fe2c 100644 --- a/test/test.js +++ b/test/test.js @@ -16,9 +16,9 @@ test('properties', async () => { el.foo = 234 el.someProp = 'lol' }) - const newFoo = await page.evaluate(() => el.vueComponent.foo) + const newFoo = await page.evaluate(() => el.vueComponent.foo) expect(newFoo).toBe(234) - const newBar = await page.evaluate(() => el.vueComponent.someProp) + const newBar = await page.evaluate(() => el.vueComponent.someProp) expect(newBar).toBe('lol') }) @@ -114,6 +114,9 @@ test('async', async () => { expect(await page.evaluate(() => els[0].shadowRoot.textContent)).toMatch(`123 bar`) expect(await page.evaluate(() => els[1].shadowRoot.textContent)).toMatch(`234 baz`) + // props assigned as node properties should be synced + expect(await page.evaluate(() => els[1].shadowRoot.textContent)).toMatch(`apple`) + // attribute sync should work await page.evaluate(() => { els[0].setAttribute('foo', '345')