fix(hmr): support hmr for static nodes

diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts
index c31667458f9454061779c016eae5cdb2cf67229e..1891131caeaa45a1774bc4aee982152f120a59d7 100644 (file)
--- a/packages/runtime-core/src/renderer.ts
+++ b/packages/runtime-core/src/renderer.ts
@@ -115,6 +115,7 @@ export interface RendererOptions<
     anchor: HostNode | null,
     isSVG: boolean
   ): HostElement
+  setStaticContent?(node: HostElement, content: string): void
 }
 
 // Renderer Node can technically be any object in the context of core renderer
@@ -330,7 +331,8 @@ function baseCreateRenderer(
     nextSibling: hostNextSibling,
     setScopeId: hostSetScopeId = NOOP,
     cloneNode: hostCloneNode,
-    insertStaticContent: hostInsertStaticContent
+    insertStaticContent: hostInsertStaticContent,
+    setStaticContent: hostSetStaticContent
   } = options
 
   // Note: functions inside this closure should use `const xxx = () => {}`
@@ -363,7 +365,13 @@ function baseCreateRenderer(
       case Static:
         if (n1 == null) {
           mountStaticNode(n2, container, anchor, isSVG)
-        } // static nodes are noop on patch
+        } else if (__DEV__) {
+          // static nodes are only patched during dev for HMR
+          n2.el = n1.el
+          if (n2.children !== n1.children) {
+            hostSetStaticContent!(n2.el!, n2.children as string)
+          }
+        }
         break
       case Fragment:
         processFragment(

diff --git a/packages/runtime-dom/src/nodeOps.ts b/packages/runtime-dom/src/nodeOps.ts
index b147da308f5a21f06f4a5045291c3c76ad87dbd5..42e7ee03d25aa37152f393f2aa92cbfd7fda5c91 100644 (file)
--- a/packages/runtime-dom/src/nodeOps.ts
+++ b/packages/runtime-dom/src/nodeOps.ts
@@ -69,3 +69,12 @@ export const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'> = {
     return node
   }
 }
+
+if (__DEV__) {
+  // __UNSAFE__
+  // Reason: innerHTML.
+  // same as `insertStaticContent`, but this is also dev only (for HMR).
+  nodeOps.setStaticContent = (el, content) => {
+    el.innerHTML = content
+  }
+}