feat: js proxy

oaer/lib/cfg.ts

@@ -5,7 +5,8 @@
  * Distributed under terms of the MIT license.
  */
 
-let cfg = {
+import proxy from './components/proxy'
+let cfg = proxy.Watch({
   uuid: '',
   refresh: '',
   token: '',
@@ -57,7 +58,7 @@ let cfg = {
   appFileUrl() {
     return `/fs/a/${this.uuid}/`
   },
-}
+})
 
 
 export default cfg

oaer/lib/components/account.ts

@@ -7,20 +7,15 @@
 import b from './build'
 import cfg from '../cfg'
 
-export default class {
-  main: HTMLElement
-  constructor() {
-    this.main = b('voa-account', [
-      b('voa-account-header', [b('voa-ah-1', '我的账户'), b('voa-ah-2')]),
-      b('voa-account-body', [
-        b('voa-ab-ico', [b('img', '', (d) => { d.setAttribute('src', cfg.user.icon) })]),
-        b('voa-ab-info', [
-          b('voa-abi-1', [b('span', '昵称：'), b('span', '', (d) => { d.innerHTML = cfg.user.nickname })]),
-          b('voa-abi-2', [b('span', '账户：'), b('span', '', (d) => { d.innerHTML = cfg.user.username })]),
-          b('voa-abi-3', [b('span', '邮箱：'), b('span', '', (d) => { d.innerHTML = cfg.user.email })]),
-          b('voa-abi-4', [b('span', '手机：'), b('span', '', (d) => { d.innerHTML = cfg.user.phone })]),
-        ])
-      ])
+export default b('voa-account', [
+  b('voa-account-header', [b('voa-ah-1', '我的账户'), b('voa-ah-2')]),
+  b('voa-account-body', [
+    b('voa-ab-ico', [b('img', '', (d) => { d.setAttribute('src', cfg.user.icon) })]),
+    b('voa-ab-info', [
+      b('voa-abi-1', [b('span', '昵称：'), b('span', '', (d) => { d.innerHTML = cfg.user.nickname })]),
+      b('voa-abi-2', [b('span', '账户：'), b('span', '', (d) => { d.innerHTML = cfg.user.username })]),
+      b('voa-abi-3', [b('span', '邮箱：'), b('span', '', (d) => { d.innerHTML = cfg.user.email })]),
+      b('voa-abi-4', [b('span', '手机：'), b('span', '', (d) => { d.innerHTML = cfg.user.phone })]),
     ])
-  }
-}
+  ])
+])

oaer/lib/components/build.ts

@@ -5,6 +5,8 @@
  * Distributed under terms of the GPL license.
  */
 
+import proxy from "./proxy"
+
 
 interface buildOpts {
   id?: string
@@ -18,13 +20,6 @@ interface buildOpts {
 }
 
 const typs = ['div', 'img', 'span', 'p', 'a']
-const caches: (() => void)[] = []
-function update() {
-  for (let c of caches) {
-    c()
-  }
-}
-export { update }
 
 export default (opts: buildOpts | string, inner?: string | HTMLElement[], updator?: (p: HTMLElement) => void) => {
   if (typeof opts === 'string') {
@@ -68,16 +63,14 @@ export default (opts: buildOpts | string, inner?: string | HTMLElement[], updato
     while ((match = regex.exec(opts.style)) !== null) {
       const key = match[1].trim();
       const value = match[2].trim();
-      console.log([key, value])
       dom.style.setProperty(key, value)
     }
   }
   dom.setAttribute('voa', '1')
   if (updator) {
-    caches.push(() => {
+    proxy.Listen(() => {
       updator(dom)
     })
-    updator(dom)
   }
   return dom
 }

oaer/lib/components/proxy.ts

@@ -0,0 +1,73 @@
+/*
+ * proxy.ts
+ * Copyright (C) 2024 veypi <i@veypi.com>
+ * 2024-10-23 17:20
+ * Distributed under terms of the GPL license.
+ */
+
+type voidFn = () => void
+const callbackCache: voidFn[] = []
+
+
+function ForceUpdate() {
+  for (let c of callbackCache) {
+    c()
+  }
+}
+
+var listen_tag = -1
+function Listen(callback: voidFn) {
+  if (listen_tag >= 0) {
+    console.warn('it shuold not happen')
+    return
+  }
+  listen_tag = callbackCache.length
+  callbackCache.push(callback)
+  callback()
+  listen_tag = -1
+}
+
+
+function Watch<T extends Object>(target: T) {
+  const listeners: { [key: string]: number[] } = {}
+  const handler = {
+    get(target: Object, key: string, receiver: any) {
+      console.log(`get ${key} ${listen_tag}`)
+      const value = Reflect.get(target, key, receiver);
+      if (typeof value === 'object' && value !== null) {
+        return new Proxy(value, handler);
+      }
+      if (listen_tag >= 0) {
+        if (!listeners[key]) {
+          listeners[key] = []
+        }
+        listeners[key].push(listen_tag)
+      }
+      return value;
+    },
+    set(target: Object, key: string, newValue: any, receiver: any) {
+      console.log(`set ${key} ${newValue}`)
+      const result = Reflect.set(target, key, newValue, receiver);
+      if (result) {
+        if (listeners[key]) {
+          console.log(listeners[key])
+          for (let cb of listeners[key]) {
+            callbackCache[cb]()
+          }
+        }
+      }
+      return result;
+    },
+    deleteProperty(target: Object, key: string) {
+      console.log(`del ${key}`)
+      const result = Reflect.deleteProperty(target, key);
+      if (result) {
+      }
+      return result
+    }
+  };
+
+  return new Proxy<T>(target, handler);
+}
+
+export default { Watch, Listen, ForceUpdate }

oaer/lib/components/slide.ts

@@ -7,6 +7,7 @@
 import b from './build'
 import bus from '../bus'
 import account from './account'
+import cfg from '../cfg'
 
 /*
 mask
@@ -38,9 +39,13 @@ export default class {
     this.main = b({
       class: 'voa-slide-main',
       children: [
-        new account().main,
+        account,
         b({ class: 'voa-sm-separate' })
-      ]
+      ],
+      onclick: () => {
+        console.log(cfg)
+        cfg.user.phone = new Date().toLocaleString()
+      }
     })
     this.body = b({
       class: 'voa-slide-body voa-animate-slow',