fix(custom-elements): ensure props are available before initial render.

LinusBorg · LinusBorg · commit 6ce91424e57b · 2021-10-13T21:31:30.000+02:00
diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts
@@ -191,13 +191,21 @@ describe('defineCustomElement', () => {
 
     test('handling properties set before upgrading', () => {
       const E = defineCustomElement({
-        props: ['foo'],
+        props: {
+          foo: String,
+          dataAge: Number
+        },
+        setup(props) {
+          expect(props.foo).toBe('hello')
+          expect(props.dataAge).toBe(5)
+        },
         render() {
           return `foo: ${this.foo}`
         }
       })
       const el = document.createElement('my-el-upgrade') as any
       el.foo = 'hello'
+      el.dataset.age = 5
       container.appendChild(el)
       customElements.define('my-el-upgrade', E)
       expect(el.shadowRoot.innerHTML).toBe(`foo: hello`)
diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
@@ -233,7 +233,7 @@ export class VueElement extends BaseClass {
       }
       if (numberProps) {
         this._numberProps = numberProps
-        this._update()
+        // this._update()
       }
 
       // check if there are props set pre-upgrade or connect
@@ -258,7 +258,9 @@ export class VueElement extends BaseClass {
 
     const asyncDef = (this._def as ComponentOptions).__asyncLoader
     if (asyncDef) {
-      asyncDef().then(resolve)
+      asyncDef()
+        .then(resolve)
+        .then(() => this._update())
     } else {
       resolve(this._def)
     }

Original file line number	Diff line number	Diff line change
`@@ -233,7 +233,7 @@ export class VueElement extends BaseClass {`
`233`	`233`	`}`
`234`	`234`	`if (numberProps) {`
`235`	`235`	`this._numberProps = numberProps`
`236`		`- this._update()`
	`236`	`+ // this._update()`
`237`	`237`	`}`
`238`	`238`
`239`	`239`	`// check if there are props set pre-upgrade or connect`
`@@ -258,7 +258,9 @@ export class VueElement extends BaseClass {`
`258`	`258`
`259`	`259`	`const asyncDef = (this._def as ComponentOptions).__asyncLoader`
`260`	`260`	`if (asyncDef) {`
`261`		`- asyncDef().then(resolve)`
	`261`	`+ asyncDef()`
	`262`	`+ .then(resolve)`
	`263`	`+ .then(() => this._update())`
`262`	`264`	`} else {`
`263`	`265`	`resolve(this._def)`
`264`	`266`	`}`