Fix: sync element's properties when async component is resolved

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

test/.eslintrc

@@ -0,0 +1,9 @@
+{
+    "env": {
+        "jest": true
+    },
+    "globals": {
+        "el": true,
+        "els": true
+    }
+}

test/fixtures/async.html

@@ -5,7 +5,7 @@
 const Component = () => new Promise(resolve => {
   setTimeout(() => {
     resolve({
-      template: `<div>{{ foo }} {{ someProp }}</div>`,
+      template: `<div>{{ foo }} {{ someProp }} {{ extraProp.value }}</div>`,
       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'}
 </script>
 
 <my-element></my-element>

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')