fix(jwc-runtime): vnode attrs do not be updated

Author: wibus-wee

.vscode/launch.json

@@ -4,8 +4,8 @@
     {
       "type": "chrome",
       "request": "launch",
-      "name": "127.0.0.1 Debugger",
-      "url": "http://127.0.0.1:5173",
+      "name": "针对 localhost 启动 Chrome",
+      "url": "http://localhost:5173",
       "webRoot": "${workspaceFolder}"
     }
   ]

packages/jwc-core/src/wc-class.ts

@@ -1,5 +1,5 @@
-import { createCSSElement, defineProxy, reactiveData, reactiveEvent } from "@jwcjs/reactively";
-import { createElement, diff, patch, removeIsNew, VNode } from "@jwcjs/runtime";
+import { createCSSElement, defineProxy } from "@jwcjs/reactively";
+import { createElement, diff, removeAttrs } from "@jwcjs/runtime";
 import { COMPONENT_PROP_METADATA_KEY, COMPONENT_STATE_METADATA_KEY } from "./constants/metas.constant";
 import { JwcElement, PropOptions } from "./types/jwc-element.interface";
 import { WatcherOptions } from "./types/watcher.interface";
@@ -149,7 +149,8 @@ export class JwcComponent extends HTMLElement implements JwcElement {
     const previous = this.$lastRender;
     const current = this.render(this.$data);
     if (previous) {
-      diff(removeIsNew(previous), removeIsNew(current), this.shadowRoot);
+      this.$lastRender = null
+      this.$lastRender = diff(removeAttrs(previous), removeAttrs(current), this.shadowRoot);
     }
   }
 
@@ -174,19 +175,24 @@ export class JwcComponent extends HTMLElement implements JwcElement {
      * mounted
      */
     const rendered = this.render(this.$data);
-    this.rootNode = createElement(removeIsNew(rendered) as any);
+    this.rootNode = createElement(removeAttrs(rendered) as any);
     if (this.$options.isMounted) {
       this.rootNode && shadowRoot.appendChild(this.rootNode);
     }
 
-    this.$lastRender = removeIsNew(rendered);
+    this.$lastRender = removeAttrs(rendered);
+  }
+
+  public disconnectedCallback() {
+    this.$options.isMounted = false;
+    this.rootNode && this.rootNode.remove();
   }
 
   public attributeChangedCallback(name: string, oldValue: string, newValue: string) {
     if (oldValue !== newValue) {
       this.props[name] = newValue;
     }
-    diff(this, this.$lastRender);
+    this.$lastRender = diff(this, this.$lastRender);
   }
 
   public render(data: {}): any { }

packages/jwc-runtime/v-dom/diff.ts

@@ -63,6 +63,8 @@ export function diff(oldVNode: any, newVNode: any, host?: Node) {
       }
     }
   }
+
+  return removeAttrs(updated, ["isUpdated", "isNew", "isDeleted"]);
 }
 
 export function patch(host: Node, vnode: VNode, old: VNode, index: number) {
@@ -310,14 +312,14 @@ function updateElement(oldNode: VNode, newNode: VNode) {
   return el;
 }
 
-export function removeIsNew(vnode: VNode) {
-  if (vnode.isNew) {
-    vnode.isNew = false;
+export function removeAttrs(vnode: VNode, attrs: string[] = ["isNew",]) {
+  for (const attr of attrs) {
+    vnode[attr] ? vnode[attr] = false : null;
   }
   if (vnode.children) {
-    vnode.children.forEach((child: VNode) => {
-      removeIsNew(child);
-    });
+    for (const child of Object.values(vnode.children)) {
+      removeAttrs(child, attrs);
+    }
   }
   return vnode;
 }

packages/jwc-starter-vite-ts/src/App.tsx

@@ -1,4 +1,4 @@
-import { JwcComponent, Component, Prop, Event } from "@jwcjs/core";
+import { JwcComponent, Component, Prop } from "@jwcjs/core";
 import { h } from "@jwcjs/runtime";
 import styles from './App.css?inline';
 
@@ -25,6 +25,21 @@ export class App extends JwcComponent {
       : "light";
   }
 
+  public override connectedCallback() {
+    super.connectedCallback();
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
+      this.updateDiff();
+      console.log("change");
+    });
+  }
+
+  public override disconnectedCallback() {
+    super.disconnectedCallback();
+    window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", (e) => {
+      this.updateDiff();
+    });
+  }
+
   public override render() {
     return (
       <div>