增加watch方法;优化状态管理;优化路由;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wkitd",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "type": "module",
   "main": "dist/index.js",
   "files": [

src/constants.js

@@ -8,3 +8,5 @@ export const __ROUTER__ = Symbol('router')
 export const __ROUTER_VIEW__ = Symbol('router-view')
 export const __STORE__ = Symbol('store')
 export const WKITD_COMPONENTS = new Set()
+export const STORE_CALLBACKS = new Map()
+export const ROUTE_CALLBACKS = new Set()

src/index.js

@@ -10,7 +10,7 @@ import { noop, readonlyProp } from './utils.js'
 import { __ROUTER__, __STORE__, __ROUTER_VIEW__ } from './constants.js'
 
 export * from './router/index.js'
-export { createStore } from './store.js'
+export { createStore, watch } from './store.js'
 
 class App extends Component {}
 

src/init.js

@@ -13,20 +13,26 @@ class Wkitd extends WeakMap {
    */
   broadcast() {
     for (let it of WKITD_COMPONENTS) {
+      if (it.removed) {
+        this.deassign(it)
+        continue
+      }
       it.$requestUpdate()
     }
   }
+
   /**
    * 注册缓存组件
    */
   assign(target) {
     WKITD_COMPONENTS.add(target)
   }
+
   /**
    * 取消注册
    */
   deassign(target) {
-    WKITD_COMPONENTS.add(target)
+    WKITD_COMPONENTS.delete(target)
   }
 }
 

src/router/index.js

@@ -22,12 +22,13 @@ export function createRouter({
   function wrapper() {
     Object.defineProperty(Component.prototype, '$router', {
       get() {
-        return window.wkitd.get(__ROUTER__)
-      },
-      set(val) {
-        console.error('Can not set readonly property $router of Component')
-      },
-      enumerable: false
+        return $router
+      }
+    })
+    Object.defineProperty(Component.prototype, '$route', {
+      get() {
+        return $router.route
+      }
     })
   }
   wrapper.beforeEach = $router.beforeEach.bind($router)

src/router/router-components.js

@@ -1,7 +1,8 @@
 //
 import { Component, html, css, raw } from 'wkit'
 import { object2query } from '../utils.js'
-import { __ROUTER_VIEW__ } from '../constants.js'
+import { __ROUTER_VIEW__, ROUTE_CALLBACKS } from '../constants.js'
+import { watch } from '../store.js'
 
 class RouterView extends Component {
   static props = {
@@ -24,6 +25,7 @@ class RouterView extends Component {
     if (this.keepAlive) {
       if (old) {
         if (this.$refs[old]) {
+          this.$refs[old].removed = true
           this.$refs[old].deactivated()
           this.$refs[old].remove()
         } else {
@@ -39,6 +41,7 @@ class RouterView extends Component {
           if (this.transition) {
             this.$refs[v].$animate()
           }
+          this.$refs[v].removed = false
           this.$refs[v].activated()
         } else {
           this.$requestUpdate()
@@ -150,16 +153,30 @@ class RouterLink extends Component {
     return '/' + path
   }
 
+  activated() {
+    this.mounted()
+  }
+  deactivated() {
+    this.unmounted()
+  }
+
   mounted() {
-    this.$router.rsync(this, route => {
+    watch('$route', route => {
+      if (this.removed) {
+        return
+      }
       this.classList.toggle('active', route.path === this.to.path)
     })
   }
 
+  unmounted() {
+    ROUTE_CALLBACKS.delete(this)
+  }
+
   render() {
     this.#href = this.#parsePath()
-    return html`<a title=${this.#href} @click=${this.#navigate}>
-      <slot></slot
+    return html`<a title=${this.#href} @click=${this.#navigate}
+      ><slot></slot
     ></a>`
   }
 }

src/router/router-engine.js

@@ -6,7 +6,7 @@
  */
 import { bind, fire } from 'wkit'
 import { noop, query2object, object2query } from '../utils.js'
-import { __ROUTER_VIEW__ } from '../constants.js'
+import { __ROUTER_VIEW__, ROUTE_CALLBACKS } from '../constants.js'
 
 //hash前缀正则
 const PREFIX_REGEXP = /^(#!|#)[\/]+?/
@@ -21,8 +21,6 @@ class Router {
   #tables = new Map()
   #views = new Set()
 
-  #targets = new Map()
-
   #ready = false
   #route = Object.create(null)
 
@@ -146,12 +144,15 @@ class Router {
     let $view = window.wkitd.get(__ROUTER_VIEW__)
     $view.current = route.name
     this.#route = route
-    this.#rsync()
+    this.#broadcast()
   }
 
-  #rsync() {
-    for (let [target, callback] of this.#targets) {
-      callback.call(target, this.route)
+  // 广播通知
+  #broadcast() {
+    if (this.#ready) {
+      for (let callback of ROUTE_CALLBACKS) {
+        callback(this.route)
+      }
     }
   }
 
@@ -162,17 +163,6 @@ class Router {
     this.#hashchange()
   }
 
-  /**
-   * 用于同步路由到组件的
-   */
-  rsync(target, callback) {
-    this.#targets.set(target, callback)
-    // 路由已经初始化完成时, 还有新的同步请求则立刻执行
-    if (this.#ready) {
-      this.#rsync()
-    }
-  }
-
   beforeEach(callback = noop) {
     this.#beforeEach = callback
   }

src/store.js

@@ -5,9 +5,15 @@
  */
 
 import { Component } from 'wkit'
-import { __STORE__ } from './constants.js'
+import {
+  __STORE__,
+  __ROUTER__,
+  STORE_CALLBACKS,
+  ROUTE_CALLBACKS
+} from './constants.js'
+import { noop } from './utils.js'
 
-function observe(obj) {
+function observe(obj, paths = ['$store']) {
   if (obj === null) {
     return obj
   }
@@ -17,24 +23,52 @@ function observe(obj) {
       let value = Reflect.get(target, key, receiver)
       // 当访问的值是对象时，需要对这个对象也进行代理
       if (typeof value === 'object') {
-        return observe(value)
+        return observe(value, paths.concat(key))
       }
       return value
     },
     set(target, key, value, receiver) {
+      let full = paths.concat(key).join('.')
+      if (target[key] === value) {
+        return true
+      }
       Reflect.set(target, key, value, receiver)
+      if (STORE_CALLBACKS.get(full)) {
+        STORE_CALLBACKS.get(full).forEach(callback => {
+          callback(value)
+        })
+      }
       window.wkitd.broadcast()
       return true
     }
   })
 }
 
+export function watch(key, callback = noop) {
+  if (key.startsWith('$store.')) {
+    let list = STORE_CALLBACKS.get(key)
+    if (list) {
+      list.add(callback)
+    } else {
+      list = new Set()
+      list.add(callback)
+      STORE_CALLBACKS.set(key, list)
+    }
+  } else if (key.startsWith('$route')) {
+    ROUTE_CALLBACKS.add(callback)
+    callback(window.wkitd.get(__ROUTER__).route)
+  } else {
+    return console.error('watch() only work on $store and $route')
+  }
+}
+
 export function createStore(obj = {}) {
   let defined = false
 
   return function () {
     Object.defineProperty(Component.prototype, '$store', {
       get() {
+        window.wkitd.assign(this)
         return window.wkitd.get(__STORE__)
       },
       set(val) {
@@ -45,8 +79,7 @@ export function createStore(obj = {}) {
         }
         window.wkitd.set(__STORE__, observe(val))
         defined = true
-      },
-      enumerable: false
+      }
     })
     Component.prototype.$store = obj
   }

src/utils.js

@@ -13,9 +13,7 @@ export function readonlyProp(host, name, value) {
   Object.defineProperty(host, name, {
     get() {
       return value
-    },
-    set(vale) {},
-    enumerable: false
+    }
   })
 }