feat: stash

Author: dyf19118

demo/src/index.tsx

@@ -35,7 +35,7 @@ class MyComponent extends QuarkElement {
   };
 
   componentDidMount() {
-    console.log("dom loaded!")
+    console.log("dom loaded!", 'parent')
     // ...
   }
 

demo/src/pages/child-second.tsx

@@ -16,6 +16,7 @@ class Child2 extends QuarkElement {
   ])
 
   componentDidMount() {
+    console.log('dom loaded!', 'child-second')
   }
 
   render() {

demo/src/pages/child.tsx

@@ -17,6 +17,7 @@ class Child1 extends QuarkElement {
 
 
   componentDidMount() {
+    console.log('dom loaded!', 'child')
   }
 
   goToLink() {

demo/src/pages/home.tsx

@@ -14,7 +14,7 @@ class MyComponent extends QuarkElement {
 
 
   componentDidMount() {
-    console.log("dom loaded!")
+    console.log("dom loaded!", 'home')
     // ...
   }
 

demo/src/pages/sub.tsx

@@ -14,7 +14,7 @@ class MyComponent extends QuarkElement {
 
 
   componentDidMount() {
-    console.log("dom loaded!")
+    console.log("dom loaded!", 'sub')
     // ...
   }
 

demo4gluang/src/gluang.ts

@@ -18,12 +18,14 @@ export const connectStore = superclass => {
 
         // 区分 lit（lit 中存在 performUpdate）
         if(!this.performUpdate) {
+          console.log('before update')
           this.update(); // quarkc 中先去执行
         }
     }
 
     // Your framework need this function to init observe state
     update() {
+      console.log('gluang update')
       stateRecorder.start();
       super.update();
       this._initStateObservers();

packages/core/src/index.ts

@@ -468,15 +468,15 @@ export class QuarkElement extends HTMLElement implements ReactiveControllerHost
 
   // Reserve, may expand in the future
   requestUpdate() {
-    // this._render();
-    // this._controllers?.forEach((c) => c.hostUpdated?.());
-    this._renderWatcher?.update();
+    console.log('requestUpdate')
+    this.getOrInitRenderWatcher().update();
   }
 
   // Reserve, may expand in the future
   update() {
+    console.log('update')
     // this._render()
-    this._renderWatcher?.update();
+    this.getOrInitRenderWatcher().update()
   }
 
   $on = (eventName: string, eventHandler: EventHandler, el?: Element) => {
@@ -531,25 +531,39 @@ export class QuarkElement extends HTMLElement implements ReactiveControllerHost
     return "" as any;
   }
 
+  private getOrInitRenderWatcher() {
+    if (!this._renderWatcher) {
+      console.error('getOrInitRenderWatcher if', this);
+      let initRender = true;
+      this._renderWatcher = new Watcher(
+        this,
+        () => {
+          console.error('render watcher callback')
+          this._render();
+          const renderCbType = !initRender ? 'hostUpdated' : 'hostMounted';
+          this._controllers?.forEach((c) => c[renderCbType]?.());
+  
+          if (initRender) {
+            initRender = false;
+
+            if (isFunction(this.componentDidMount)) {
+              this.componentDidMount();
+            }
+          } else {
+            this.flushUpdatedQueue();
+          }
+        },
+        { render: true },
+      );
+    }
+
+    return this._renderWatcher
+  }
+
   connectedCallback() {
     this._updateProps();
     this._controllers?.forEach((c) => c.hostConnected?.());
-    let initRender = true;
-    this._renderWatcher = new Watcher(
-      this,
-      () => {
-        this._render();
-        const renderCbType = !initRender ? 'hostUpdated' : 'hostMounted';
-        this._controllers?.forEach((c) => c[renderCbType]?.());
-        initRender = false;
-      },
-      { render: true },
-    );
-    this.flushUpdatedQueue();
-
-    if (isFunction(this.componentDidMount)) {
-      this.componentDidMount();
-    }
+    this.getOrInitRenderWatcher();
   }
 
   /** log old 'false' attribute value before resetting and removing it */

packages/router/package.json

@@ -41,7 +41,7 @@
     "urlpattern-polyfill": "^9.0.0"
   },
   "peerDependencies": {
-    "quarkc": "^1.0.41"
+    "quarkc": "^1.0.40"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",