From: Evan You <yyx990803@gmail.com>
Date: Thu, 22 Jul 2021 21:48:15 +0000 (-0400)
Subject: feat(runtime-dom): hmr for custom elements
X-Git-Tag: v3.2.0-beta.5~7
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=7a7e1d8e9fed27bc2dbf24076642e83d0c80d9af;p=thirdparty%2Fvuejs%2Fcore.git

feat(runtime-dom): hmr for custom elements
---

diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
index adbeb7608b..31302e13b0 100644
--- a/packages/runtime-dom/src/apiCustomElement.ts
+++ b/packages/runtime-dom/src/apiCustomElement.ts
@@ -130,6 +130,7 @@ export function defineCustomElement(
   const propKeys = rawKeys.map(camelize)
 
   class VueCustomElement extends VueElement {
+    static def = Comp
     static get observedAttributes() {
       return attrKeys
     }
@@ -192,13 +193,7 @@ export class VueElement extends BaseClass {
         )
       }
       this.attachShadow({ mode: 'open' })
-      if (_def.styles) {
-        _def.styles.forEach(css => {
-          const s = document.createElement('style')
-          s.textContent = css
-          this.shadowRoot!.appendChild(s)
-        })
-      }
+      this._applyStyles()
     }
   }
 
@@ -268,6 +263,16 @@ export class VueElement extends BaseClass {
       vnode.ce = instance => {
         this._instance = instance
         instance.isCE = true
+        // HMR
+        if (__DEV__) {
+          instance.appContext.reload = () => {
+            render(this._createVNode(), this.shadowRoot!)
+            this.shadowRoot!.querySelectorAll('style').forEach(s => {
+              this.shadowRoot!.removeChild(s)
+            })
+            this._applyStyles()
+          }
+        }
 
         // intercept emit
         instance.emit = (event: string, ...args: any[]) => {
@@ -293,4 +298,14 @@ export class VueElement extends BaseClass {
     }
     return vnode
   }
+
+  private _applyStyles() {
+    if (this._def.styles) {
+      this._def.styles.forEach(css => {
+        const s = document.createElement('style')
+        s.textContent = css
+        this.shadowRoot!.appendChild(s)
+      })
+    }
+  }
 }