OneAuth/ui/vhtml/vproxy.js

/*
 * proxy.js
 * Copyright (C) 2024 veypi <i@veypi.com>
 *
 * Distributed under terms of the MIT license.
 */


/** @type {([boolean, ()=>void])[]} */
const callbackList = []
/** @type {number[]} */
const cacheUpdateList = []
// 界面更新响应频率40hz
const sync = () => {
  let list = new Set(cacheUpdateList.splice(0))
  let c = 0
  for (let l of list) {
    if (callbackList[l]) {
      callbackList[l]()
      c++
    }
  }
  if (c > 0) {
    console.log(`update ${c}`)
    // sync()
  }
  return c
}
setInterval(sync, 25)

function GenUniqueID() {
  const timestamp = performance.now().toString(36);
  const random = Math.random().toString(36).substring(2, 5);
  return `${timestamp}-${random}`;
}

function ForceUpdate() {
  for (let c of callbackList) {
    if (c) {
      c()
    }
  }
}

window.$vupdate = (id) => {
  console.log('update', id)
  callbackList[id]()
}

function deepAccess(obj, seen = new Set()) {
  if (obj && typeof obj === 'object' && !seen.has(obj)) {
    seen.add(obj)
    for (let key in obj) {
      deepAccess(obj[key], seen)
    }
  }
  return obj
}

/** @type {number[]} */
var listen_tags = []
/**
* @param {()=>void} callback
* @returns number
*/
function Watch(target, callback, options) {
  let idx = callbackList.length
  listen_tags.push(idx)
  if (typeof callback === 'function') {
    callbackList.push(() => {
      callback(target())
    })
  } else {
    callbackList.push(target)
  }
  let res
  try {
    res = target()
    if (options && options.deep) {
      deepAccess(res)
    }
  } catch (e) {
    console.warn('running \n%s\n failed:', target, e)
  } finally {
    listen_tags.pop()
  }
  if (typeof callback === 'function') {
    callback(res)
  }
  return idx
}

function Cancel(idx) {
  if (idx < 0 || idx >= callbackList.length) {
    return
  }
  callbackList[idx] = null
}

const isProxy = Symbol("isProxy")
const DataID = Symbol("DataID")
const DataBind = Symbol("bind")
const rootObj = Symbol("root")
const rootArg = Symbol("root arg")


function SetDataRoot(data, root) {
  data[rootObj] = root
  Object.keys(root).forEach(k => {
    if (k in data) {
    } else {
      data[k] = rootArg
    }
  })
}

function isProxyType(v) {
  if (!v || typeof v !== 'object') {
    return false
  }
  if (v instanceof Node || v instanceof Date || v instanceof RegExp || v instanceof Event) {
    return false
  }
  if (v.__noproxy) {
    return false
  }
  if (v.constructor !== Object && v.constructor !== Array) {
    return false
  }
  return true
}

// oldValue只集成值， 不继承事件
function copyBind(oldValue, newValue) {
  if (!oldValue || !oldValue[isProxy] || !isProxyType(newValue)) {
    return newValue
  }
  let binds = oldValue[DataBind]
  if (newValue[isProxy]) {
    // 新值也是代理对象，继承旧值的事件绑定, 使用新的代理对象
    if (newValue[DataID] === oldValue[DataID]) {
      return newValue
    }
    for (let k in binds) {
      if (newValue[DataBind][k]?.indexOf) {
        const currentBinds = newValue[DataBind][k]
        const bindSet = new Set(currentBinds)
        for (let i of binds[k]) {
          if (!bindSet.has(i)) {
            currentBinds.push(i)
            bindSet.add(i)
          }
        }
      } else {
        newValue[DataBind][k] = binds[k]
      }
    }
  } else {
    // 新值不是代理对象，继承值，使用旧的代理对象
    if (Array.isArray(newValue) && Array.isArray(oldValue)) {
      oldValue.length = 0
      for (let i = 0; i < newValue.length; i++) {
        oldValue.push(newValue[i])
      }
      return oldValue
    }
    Object.keys(oldValue).forEach(k => {
      if (!newValue.hasOwnProperty(k)) {
        delete oldValue[k]
      }
    })
    Object.keys(newValue).forEach(k => {
      if (oldValue[k]?.[isProxy]) {
        oldValue[k] = copyBind(oldValue[k], newValue[k])
      } else {
        oldValue[k] = newValue[k]
      }
    })
    return oldValue
  }
  for (let k in newValue) {
    if (k in oldValue && oldValue[k]?.[isProxy]) {
      newValue[k] = copyBind(oldValue[k], newValue[k])
    }
  }
  return newValue
}


let stopChecking = false
function Wrap(data, root = undefined) {
  const did = GenUniqueID()
  let isArray = false
  if (Object.prototype.toString.call(data) === '[object Array]') {
    isArray = true
  }
  if (root) {
    SetDataRoot(data, root)
  }
  // data[DataID] = did
  const listeners = {}
  const handler = {
    /**
    * @param {Object} target
    * @param {string|symbol} key
    *
     * */
    get(target, key, receiver) {
      if (key === DataID) {
        return did
      } else if (key === isProxy) {
        return true
      } else if (key === DataBind) {
        return listeners
      }
      const value = Reflect.get(target, key, receiver)
      if (value === rootArg) {
        return target[rootObj][key]
      }
      if (typeof key === 'symbol' && stopChecking) {
        return value
      } else if (typeof value === 'function') {
        return value
      }
      let idx = -1
      if (listen_tags.length > 0) {
        let lkey = key
        idx = listen_tags[listen_tags.length - 1]
        if (isArray) {
          lkey = ''
        }
        if (!listeners.hasOwnProperty(lkey)) {
          listeners[lkey] = [idx]
        } else if (listeners[lkey].indexOf(idx) == -1) {
          listeners[lkey].push(idx)
        }
      }
      if (window.vdev) {
        console.log(`${did} get ${key.toString()}:|${value}| `)
      }
      if (isProxyType(value) && !value[isProxy]) {
        let newValue = Wrap(value, undefined)
        Reflect.set(target, key, newValue, receiver)
        return newValue
      }
      return value;
    },
    set(target, key, newValue, receiver) {
      const oldValue = Reflect.get(target, key, receiver)
      if (oldValue === rootArg) {
        target[rootObj][key] = newValue
        return true
      }
      if (oldValue === newValue) {
        return true
      } else if (stopChecking) {
        return Reflect.set(target, key, newValue, receiver)
      }
      let result = true
      if (Array.isArray(newValue) && Array.isArray(oldValue)) {
        stopChecking = true
        oldValue.length = 0
        for (let i = 0; i < newValue.length; i++) {
          oldValue.push(newValue[i])
        }
        stopChecking = false
      } else if (oldValue && oldValue[isProxy] && isProxyType(newValue)) {
        // 监听对象只赋值可迭代属性
        newValue = copyBind(oldValue, newValue)
        result = Reflect.set(target, key, newValue, receiver);
      } else {
        result = Reflect.set(target, key, newValue, receiver);
      }
      if (result && listen_tags.length === 0) {
        let lkey = key
        if (isArray) {
          lkey = ''
        }
        if (listeners[lkey]) {
          let i = 0
          if (window.vdev) {
            console.log(`before set ${key} listeners:`, listeners[lkey], target)
          }
          while (i < listeners[lkey].length) {
            let cb = listeners[lkey][i]
            if (!callbackList[cb]) {
              listeners[lkey].splice(i, 1);
            } else {
              i++
              if (window.vdev) {
                console.log(`${did} set ${key}:`, '\n', callbackList[cb], '\n', oldValue, newValue)
              }
              cacheUpdateList.push(cb)
            }
          }
        }
      }
      return result;
    },
    deleteProperty(target, key) {
      if (window.vdev) {
        console.log(`del ${key}`)
      }
      const result = Reflect.deleteProperty(target, key);
      if (result && listen_tags.length === 0) {
        let lkey = key
        if (isArray) {
          lkey = ''
        }
        if (listeners[lkey]) {
          let i = 0
          while (i < listeners[lkey].length) {
            let cb = listeners[lkey][i]
            if (!callbackList[cb]) {
              listeners[lkey].splice(i, 1);
            } else {
              i++
              cacheUpdateList.push(cb)
              if (window.vdev) {
                console.log(`${did} del ${key}:`, '\n', callbackList[cb], '\n')
              }
            }
          }
        }
      }
      return result
    },
  };

  let res = new Proxy(data, handler);
  return res
}

const expose = {
  'console': console,
  'window': window,
  'prompt': prompt.bind(window),
  'alert': alert.bind(window),
  'confirm': confirm.bind(window),
  'RegExp': RegExp,
  'document': document,
  'Array': Array,
  'Object': Object,
  'Math': Math,
  'Date': Date,
  'JSON': JSON,
  'Symbol': Symbol,
  'Number': Number,
  'eval': eval,
  'isNaN': isNaN,
  'parseInt': parseInt,
  'parseFloat': parseFloat,
  'setTimeout': setTimeout.bind(window),
  'setInterval': setInterval.bind(window),
  'clearTimeout': clearTimeout.bind(window),
  'clearInterval': clearInterval.bind(window),
  'encodeURIComponent': encodeURIComponent,
  'btoa': btoa.bind(window),
  'fetch': fetch.bind(window),
  'TextDecoder': TextDecoder,
  'history': history,
  'requestAnimationFrame': requestAnimationFrame.bind(window),
}

function newProxy(data, env, tmpenv) {
  const proxy = new Proxy(data, {
    // 拦截所有属性，防止到 Proxy 对象以外的作用域链查找。
    has(target, key) {
      return true;
    },
    get(target, key, receiver) {
      let v
      if (key === '$data') {
        v = data
      } else if (key === '$env') {
        v = env
      } else if (key in target) {
        v = Reflect.get(target, key, receiver);
      } else if (key in env) {
        v = env[key]
      } else if (tmpenv && key in tmpenv) {
        v = tmpenv[key]
      } else if (key in expose) {
        v = expose[key]
      } else if (key in window) {
        v = window[key]
      }
      return v
    },
    set(target, key, newValue, receiver) {
      // code global variable set will work on "data"
      return Reflect.set(target, key, newValue, receiver);
    }
  });
  return proxy
}
// 运行dom属性绑定等小代码语句
// for code snapshot
function Run(originCode, data, env, tmpenv) {
  let code = originCode.trim()
  const cleanCode = code.replace(/\/\*[\s\S]*?\*\/|\/\/.*/g, '').trim()
  const isStatement = /^(var|let|const|if|for|while|switch|try|throw|class|function|return|debugger)\b/.test(cleanCode)
  if (!isStatement && (code.indexOf('\n') === -1 || !cleanCode.includes(';'))) {
    code = 'return ' + code
  }
  code = `
with (sandbox) {
${code}
}`
  let res
  try {
    const fn = new Function('sandbox', code);
    res = fn(newProxy(data, env, tmpenv))
  } catch (error) {
    console.warn(`Run error:`, originCode, '\n', error)
  }
  return res
}

const AsyncFunction = Object.getPrototypeOf(async function() { }).constructor

// 运行大段代码库
async function AsyncRun(originCode, data, env, tmpenv) {
  let code = originCode.trim()
  if (code.indexOf('\n') === -1) {
    code = 'return ' + code
  }
  code = `
with (sandbox) {
${code}
}`
  // try {
  const fn = new AsyncFunction('sandbox', code);
  return await fn(newProxy(data, env, tmpenv))
  // } catch (error) {
  //   console.warn('AsyncRun error:', error, '\n', originCode)
  // }
}

function resolvePath(relativePath, currentPath) {
  // 如果相对路径已经是绝对路径，直接返回
  if (relativePath.startsWith('/')) {
    return relativePath;
  }

  // 获取当前路径的目录部分（去掉文件名）
  const currentDir = currentPath.substring(0, currentPath.lastIndexOf('/'));

  // 分割路径段
  const currentSegments = currentDir.split('/').filter(segment => segment !== '');
  const relativeSegments = relativePath.split('/').filter(segment => segment !== '');

  // 处理相对路径段
  for (const segment of relativeSegments) {
    if (segment === '..') {
      // 返回上一级目录
      if (currentSegments.length > 0) {
        currentSegments.pop();
      }
    } else if (segment === '.') {
      // 当前目录，不做任何操作
      continue;
    } else {
      // 普通目录或文件名
      currentSegments.push(segment);
    }
  }

  // 构建绝对路径
  return '/' + currentSegments.join('/');
}


async function ParseImport(code, data, env, src) {
  data = data || {}
  let scoped = env.scoped || ''
  let codeCopy = code
  let match;
  src = src.startsWith('http') ? src : scoped + src

  const awaitImportRegex = /await import\(['"]([^'"]+)['"]\)/gm;
  while ((match = awaitImportRegex.exec(code)) !== null) {
    let url = match[1]
    if (!url.startsWith('http')) {
      url = resolvePath(url, src)
      url = window.location.origin + url
    }
    codeCopy = codeCopy.replace(match[0], `await import('${url}')`)
  }

  const importRegex = /^[\s/]*import\s+([\w{},\s]+)\s+from\s+['"]([^'"]+)['"][;\s]*$/gm;

  // 提取所有匹配的模块路径
  while ((match = importRegex.exec(code)) !== null) {
    codeCopy = codeCopy.replace(match[0], '')
    if (match[0].trim().startsWith('//')) {
      continue
    }
    let url = match[2]
    if (!url.startsWith('http') && !url.startsWith('@')) {
      if (url.startsWith('/') && scoped) {
        url = scoped + url
      } else {
        url = resolvePath(url, src)
      }
    }
    if (url.startsWith('@')) {
      url = url.slice(1)
    }
    if (!url.endsWith('.js')) {
      url += '.js'
    }
    if (!url.startsWith('http')) {
      url = window.location.origin + url
    }
    let packname = match[1].trim()
    try {
      let packs = null
      if (/^\w+$/.test(packname)) {
        packs = packname
      } else if (/^{[\w\s,]+}$/.test(packname)) {
        packs = packname.slice(1, -1).split(',').map(p => p.trim())
      } else {
        throw new Error('unsupported import: ' + match[0])
      }
      // window.$env = env
      const module = await import(url)
      if (typeof packs === 'string') {
        if (module.default) {
          data[packs] = module.default
        } else {
          data[packs] = module
        }
      } else {
        packs.forEach((p) => {
          if (p in module) {
            data[p] = module[p]
          } else if (p in module.default) {
            data[p] = module.default[p]
          }
        })
      }
    } catch (error) {
      console.error(`模块加载失败 (${match[0]}):`, error.message);
    }
  }
  return codeCopy.trim()
}

export default {
  Wrap, Watch, Cancel, ForceUpdate, SetDataRoot,
  DataID, GenUniqueID, Run, AsyncRun, ParseImport
}