Merge pull request #76 from dyf19118/render-watcher

Render watcher

Author: xxxsf

demo/src/index.tsx

@@ -1,4 +1,4 @@
-import { QuarkElement, property, customElement } from "quarkc"
+import { QuarkElement, property, customElement, state, computed } from "quarkc"
 import { Router } from "quark-router"
 import "./pages/home"
 import "./pages/sub"
@@ -14,7 +14,7 @@ declare global {
 @customElement({ tag: "my-component", style })
 class MyComponent extends QuarkElement {
   private _routes = new Router(this, [
-    {path: '/', render: () => <home-component/>},
+    {path: '/', render: () => <home-component count={this.resolvedCount} />},
     {path: '/sub/:id', render: ({id}) => <sub-component id={id}/>},
     {path: '/child/*', render: () => <child-component/>},
     {path: '/child', render: () => <child-component/>},
@@ -29,16 +29,35 @@ class MyComponent extends QuarkElement {
   @property({ type: String })
   text
 
+  @state()
+  innerCount = 0;
+
+  @computed()
+  get resolvedCount() {
+    return this.count + this.innerCount;
+  }
+
   add = () => {
     // 内部事件
-    this.count += 1
+    this.innerCount += 1
   };
 
-  componentDidMount() {
-    console.log("dom loaded!")
-    // ...
+  shouldComponentUpdate(propName, oldValue, newValue) {
+    if (propName === 'innerCount') {
+      return newValue <= 10;
+    }
+
+    return true;
   }
 
+  componentDidUpdate() {
+    console.log("parent dom updated!")
+  }
+
+  // componentDidMount() {
+  //   console.log("parent dom loaded!")
+  // }
+
   render() {
     return (
       <>
@@ -56,7 +75,7 @@ class MyComponent extends QuarkElement {
           <h1>{this.text} Quarkc</h1>
 
           <div className="card">
-            <button onClick={this.add}>count is: {this.count}</button>
+            <button onClick={this.add}>count is: {this.resolvedCount}</button>
           </div>
         </div>
         <ul>

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

@@ -1,4 +1,4 @@
-import { QuarkElement, property, customElement } from "quarkc"
+import { QuarkElement, property, customElement, watch, state, computed } from "quarkc"
 import style from "./style.less?inline"
 
 declare global {
@@ -12,16 +12,60 @@ class MyComponent extends QuarkElement {
   @property({ type: String })
   text = "hello world"
 
+  @property({ type: Number })
+  count = 0
+
+  @state()
+  loggerRunCount = 0
+
+  @state()
+  counter = 0;
+
+  private _counterTimer = 0;
+
+  initCounter() {
+    const runCounter = () => {
+      this._counterTimer = window.setTimeout(() => {
+        this.counter++;
+        runCounter();
+      }, 1000)
+    };
+    runCounter();
+  }
 
   componentDidMount() {
-    console.log("dom loaded!")
-    // ...
+    console.log("home dom loaded!")
+    this.initCounter();
+  }
+
+  componentWillUnmount() {
+    console.log('home dom will unmount');
+    window.clearTimeout(this._counterTimer);
+  }
+
+  @watch('count', { immediate: true })
+  countLogger(newVal, oldVal) {
+    console.log('home countLogger', newVal, oldVal);
+    this.loggerRunCount++;
+  }
+
+  @computed()
+  get counterGreet() {
+    console.log('home @computed counterGreet')
+    return `${this.text} ${this.counter} times`;
+  }
+
+  componentDidUpdate(propName, oldVal, newVal) {
+    console.log("home dom updated!", propName, oldVal, newVal)
   }
 
   render() {
     return (
       <div className="main">
-        home {this.text}
+        home
+        <br/>passed down count: {this.count}
+        <br />watcher run count: {this.loggerRunCount}
+        <br/>{this.counterGreet}
       </div>
     );
   }

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/app-header/index.tsx

@@ -1,4 +1,4 @@
-import { QuarkElement, customElement } from "quarkc"
+import { QuarkElement, customElement, state, watch, createRef } from "quarkc"
 import style from "./index.less?inline"
 import suntzu from "./suntzu.jpeg"
 
@@ -10,15 +10,39 @@ import { store } from '../store';
 
 @customElement({ tag: "app-header", style })
 class MyComponent extends connectStore(QuarkElement) {
+  @state()
+  showAuthorName = false
 
+  @watch('showAuthorName')
+  handleShowChange(newVal) {
+    console.log('handleShowChange', newVal)
+    store.author = newVal ? 'Sun Tzu' : 'Guess who?';
+    this.$nextTick(() => {
+      const { current: btn } = this.btn;
+      if (btn) {
+        console.log('nextTick, content of btn:', btn.textContent)
+      }
+    })
+  }
+  
   handleSwitch = () => {
-    store.author = store.author === 'Sun Tzu' ? 'Guess who?' : 'Sun Tzu';
+    this.showAuthorName = !this.showAuthorName;
+  }
+
+  componentDidUpdate(propName, oldVal, newVal) {
+    console.log('componentDidUpdate', propName, oldVal, newVal)
   }
 
+  componentUpdated() {
+    console.log('componentUpdated', this.showAuthorName, store.author)
+  }
+
+  btn = createRef(null)
+
   render() {
     return (
       <header>
-        <h1 onClick={this.handleSwitch}>The Art of War - <span class="btn">{store.author}</span></h1>
+        <h1 onClick={this.handleSwitch}>The Art of War - <span class="btn" ref={this.btn}>{store.author}</span></h1>
         {
           store.author === 'Sun Tzu' ?
             <img src={suntzu} alt="" /> : ''

demo4gluang/src/gluang.ts

@@ -15,17 +15,25 @@ export const connectStore = superclass => {
     constructor() {
         super();
         this._observers = [];
+    }
 
-        // 区分 lit（lit 中存在 performUpdate）
-        if(!this.performUpdate) {
-          this.update(); // quarkc 中先去执行
-        }
+    connectedCallback() {
+      // 区分 lit（lit 中存在 performUpdate）
+      if(!this.performUpdate) {
+        this.update(true); // quarkc 中先去执行
+      }
     }
 
     // Your framework need this function to init observe state
-    update() {
+    update(init = false) {
       stateRecorder.start();
-      super.update();
+
+      if (!init) {
+        super.update();
+      } else {
+        super.connectedCallback();
+      }
+
       this._initStateObservers();
     }
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quarkc",
-  "version": "1.0.58",
+  "version": "2.0.0",
   "description": "A Web Components framework",
   "type": "module",
   "main": "./lib/index.umd.js",