状态管理重构;全局变量wkitd优化

Readme.md

@@ -12,6 +12,7 @@
 
 - 提供迷你的单页应用开发环境
 - 无需`node.js`编译, 即写即用。
+- 本项目适合开发一些快速迭代简单页面、app内嵌的`webview`页面(无须搭建复杂的前端开发环境)
 
 
 ### 一些注意事项
@@ -20,7 +21,7 @@
 - `$router`对象, 只注入到使用`wkit`创建的组件, 其他地方可以使用`getRouter()`获取`$router`对象。
 - 所有路由页面和组件, 均可使用`getCurrentPage()`获取当前的页面的信息; 也可以用`$router.route`获取。 
 - `$store`对象, 只注入到使用`wkit`创建的组件, 其他组件可使用`getStore()`获取。
-- `$store`对象为非响应式, 后续可能会支持(时间无限期延后)。
+
 
 
 ### 示例

package.json

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

src/constants.js

@@ -0,0 +1,10 @@
+/**
+ * {框架常量}
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2023/08/15 10:15:54
+ */
+
+export const __ROUTER__ = Symbol('router')
+export const __ROUTER_VIEW__ = Symbol('router-view')
+export const __STORE__ = Symbol('store')
+export const WKITD_COMPONENTS = new Set()

src/index.js

@@ -7,6 +7,7 @@
 import './init.js'
 import { html, css, Component } from 'wkit'
 import { noop } from './utils.js'
+import { __ROUTER__, __STORE__, __ROUTER_VIEW__ } from './constants.js'
 
 export * from './router/index.js'
 export { createStore } from './store.js'
@@ -26,11 +27,11 @@ export function createApp({
     Object.assign(App.prototype, methods, { mounted })
 
     this.use = function (plugin = noop, ...args) {
-      plugin.apply(this, args)
+      plugin.apply(App.prototype, args)
       return this
     }
     this.mount = function () {
-      let $router = window.__wkitd__.get('$router')
+      let $router = window.wkitd.get(__ROUTER__)
       if (render) {
         App.prototype.render = render
       } else {
@@ -70,7 +71,7 @@ export function createApp({
       }
       if ($router) {
         App.prototype.mounted = function (...args) {
-          let $view = window.__wkitd__.get('ROUTER_VIEW')
+          let $view = window.wkitd.get(__ROUTER_VIEW__)
           if ($view) {
             $view.sync($router.views)
             $router.init() // mounted 时正式初始化路由
@@ -88,13 +89,13 @@ export function createApp({
 }
 
 export function getStore() {
-  return window.__wkitd__.get('$store')
+  return window.wkitd.get(__STORE__)
 }
 
 export function getRouter() {
-  return window.__wkitd__.get('$router')
+  return window.wkitd.get(__ROUTER__)
 }
 
 export function getCurrentPage() {
-  return window.__wkitd__.get('$router')?.route
+  return window.wkitd.get(__ROUTER__)?.route
 }

src/init.js

@@ -4,15 +4,40 @@
  * @date 2023/08/10 10:19:12
  */
 
-const __WKITD__ = new Map()
+import { Component } from 'wkit'
+import { WKITD_COMPONENTS } from './constants.js'
 
-Object.defineProperty(window, '__wkitd__', {
+class Wkitd extends WeakMap {
+  /**
+   * 广播式推送更新
+   */
+  broadcast() {
+    for (let it of WKITD_COMPONENTS) {
+      it.$requestUpdate()
+    }
+  }
+  /**
+   * 注册缓存组件
+   */
+  assign(target) {
+    WKITD_COMPONENTS.add(target)
+  }
+  /**
+   * 取消注册
+   */
+  deassign(target) {
+    WKITD_COMPONENTS.add(target)
+  }
+}
+
+const __WKITD__ = new Wkitd()
+
+Object.defineProperty(window, 'wkitd', {
   get() {
     return __WKITD__
   },
   set(val) {
-    console.error('Can not set readonly property __wkitd__ of window')
+    console.error('Can not set readonly property wkitd of window')
   },
-  writable: false,
   enumerable: false
 })

src/router/index.js

@@ -6,6 +6,7 @@
 import { Component } from 'wkit'
 import { createWebHashHistory, createWebHistory } from './router-engine.js'
 import './router-components.js'
+import { __ROUTER__ } from '../constants.js'
 
 export { createWebHashHistory, createWebHistory }
 
@@ -15,13 +16,13 @@ export function createRouter({
 } = {}) {
   let $router = history()
 
-  window.__wkitd__.set('$router', $router)
+  window.wkitd.set(__ROUTER__, $router)
 
   $router.addRoute(routes)
   function wrapper() {
     Object.defineProperty(Component.prototype, '$router', {
       get() {
-        return window.__wkitd__.get('$router')
+        return window.wkitd.get(__ROUTER__)
       },
       set(val) {
         console.error('Can not set readonly property $router of Component')
@@ -32,11 +33,3 @@ export function createRouter({
   wrapper.beforeEach = $router.beforeEach.bind($router)
   return wrapper
 }
-
-export function getRouter() {
-  return window.__wkitd__.get('$router')
-}
-
-export function getCurrentPage() {
-  return getRouter().route
-}

src/router/router-components.js

@@ -1,6 +1,7 @@
 //
 import { Component, html, css, raw } from 'wkit'
 import { object2query } from '../utils.js'
+import { __ROUTER_VIEW__ } from '../constants.js'
 
 class RouterView extends Component {
   static props = {
@@ -26,7 +27,7 @@ class RouterView extends Component {
   #views = []
 
   created() {
-    window.__wkitd__.set('ROUTER_VIEW', this)
+    window.wkitd.set(__ROUTER_VIEW__, this)
   }
 
   sync(views) {

src/router/router-engine.js

@@ -6,6 +6,7 @@
  */
 import { bind, fire } from 'wkit'
 import { noop, query2object, object2query } from '../utils.js'
+import { __ROUTER_VIEW__ } from '../constants.js'
 
 //hash前缀正则
 const PREFIX_REGEXP = /^(#!|#)[\/]+?/
@@ -95,7 +96,7 @@ class Router {
   // 路由检测
   #check() {
     let isHash = this.type === MODE_HASH
-    let $view = window.__wkitd__.get('ROUTER_VIEW')
+    let $view = window.wkitd.get(__ROUTER_VIEW__)
     let hash = location.hash
     let path = isHash
       ? location.hash
@@ -141,7 +142,7 @@ class Router {
   }
 
   #exec(route) {
-    let $view = window.__wkitd__.get('ROUTER_VIEW')
+    let $view = window.wkitd.get(__ROUTER_VIEW__)
     $view.current = route.name
     this.#route = route
     this.#rsync()

src/store.js

@@ -5,27 +5,36 @@
  */
 
 import { Component } from 'wkit'
+import { __STORE__ } from './constants.js'
 
 export function createStore(obj = {}) {
-  window.__wkitd__.set(
+  let defined = false
-    '$store',
-    new Proxy(obj, {
-      set(target, prop, value) {
-        target[prop] = value
-        return true
-      }
-    })
-  )
 
   return function () {
     Object.defineProperty(Component.prototype, '$store', {
       get() {
-        return window.__wkitd__.get('$store')
+        return window.wkitd.get(__STORE__)
       },
       set(val) {
-        console.error('Can not set readonly property $store of Component')
+        if (defined) {
+          return console.error(
+            'Can not set readonly property $store of Component'
+          )
+        }
+        window.wkitd.set(
+          __STORE__,
+          new Proxy(val, {
+            set(target, prop, value) {
+              target[prop] = value
+              window.wkitd.broadcast()
+              return true
+            }
+          })
+        )
+        defined = true
       },
       enumerable: false
     })
+    Component.prototype.$store = obj
   }
 }