OneAuth/ui/vhtml/v.js

/*
 * v.js
 * Copyright (C) 2024 veypi <i@veypi.com>
 *
 * Distributed under terms of the GPL license.
 */
import vproxy from './vproxy.js'
import vget from './vget.js'
import vrouter from './vrouter.js'
import utils from './utils.js'
import setupVdev from './vdev.js'

(async function() {

  const globalStyle = document.createElement('style')
  globalStyle.innerHTML = `
    [vref] {
      display: block;
    }
    [vparsing] {
      display: none;
      -webkit-text-fill-color: transparent;
    }
    vslot, vrouter {
      display: block;
    }
`
  if (document.head.firstChild) {
    document.head.insertBefore(globalStyle, document.head.firstChild)
  } else {
    document.head.appendChild(globalStyle)
  }
  const DelayCache = []
  const config = { attributes: false, childList: true, subtree: true, characterData: false }
  const runVdelay = (d) => {
    if (!d.isConnected) {
      return
    }
    let delay = d.getAttribute('vdelay')
    if (delay) {
      let fc = DelayCache[delay]
      if (fc) {
        fc(d)
      } else {
        console.error('delay not found:', delay, d)
      }
    }
  }
  const callback = function(mutationsList, observer) {
    mutationsList.forEach(function(mutation) {
      for (let node of mutation.addedNodes) {
        if (node.nodeType === 1) { // 元素节点
          runVdelay(node)
          node.querySelectorAll('*[vdelay]').forEach(runVdelay)
        }
      }
    })
  }
  const observer = new MutationObserver(callback);
  observer.observe(document.body, config);

  function recordGet(code, data) {
    code = `with (sandbox) { ${code} }`
    const fn = new Function('sandbox', code);
    let res = vproxy.Wrap({})
    let keys = []
    const proxy = new Proxy(data, {
      // 拦截所有属性，防止到 Proxy 对象以外的作用域链查找。
      has(target, key) {
        return true;
      },
      get(target, key, receiver) {
        if (key === Symbol.unscopables) {
          return undefined;
        }
        let v = Reflect.get(target, key, receiver);
        if (keys.indexOf(key) === -1) {
          keys.push(key)
        }
        return v
      },
      set(target, key, newValue, receiver) {
        return false
      }
    });
    fn(proxy)
    vproxy.Watch(() => {
      keys.forEach(k => {
        if (res[k] !== data[k]) {
          res[k] = data[k]
        }
      })
    })
    return res
  }

  function findLastAccess(code, data) {
    code = `with (sandbox) { ${code} }`
    const fn = new Function('sandbox', code);
    let res = {
      data: null,
      key: null,
    }
    const wrap = (tmp) => {
      return new Proxy(tmp, {
        // 拦截所有属性，防止到 Proxy 对象以外的作用域链查找。
        has(target, key) {
          return true;
        },
        get(target, key, receiver) {
          if (key === Symbol.unscopables) {
            return undefined;
          }
          let v = Reflect.get(target, key, receiver);
          res.data = target
          res.key = key
          if (typeof v === 'function') {
            console.warn('vhtml not support function with "v:" variables bind')
          }
          if (typeof v === 'object' && v) {
            return wrap(v)
          }
          return v
        },
        set(target, key, newValue, receiver) {
          // console.log('set', target, key, newValue)
          // return Reflect.set(target, key, newValue, receiver);
          return false
        }
      })
    }
    fn(wrap(data))
    return res
  }

  const varRegex = /{{|}}/g;
  const vforRegex = /^(\s*(\w+)\s+in\s+|\((\w+),\s*(\w+)\)\s+in\s+)([\w\?\$\.\[\]\(\)'"]+)$/
  class vhtml {
    /** @type {HTMLElement} */
    app = null
    scoped = null
    vget = vget
    vproxy = vproxy
    __noproxy = true
    $router = vrouter.$router
    constructor(id) {
      if (typeof id === 'string') {
        this.app = document.getElementById(id)
      } else if (id instanceof HTMLElement) {
        this.app = id
      } else {
        this.app = document.body
      }
      if (!this.app) {
        console.error(`Can't find element by id: ${id}`)
        return
      }
      let init = async () => {
        // vget.SetBaseFile(await vget.FetchFile(window.location.pathname))
        let mainParser = await vget.FetchUI(window.location.pathname, {}, true)
        this.scoped = mainParser.env?.scoped || ''
        if (mainParser.env?.vdev && window.self !== window.top) {
          setupVdev()
        }
        this.parseRef('root', this.app, {}, mainParser.env || {}, mainParser, true)
      }
      init()
    }
    /**
    * @param{HTMLElement} dom
    * @param {Object} scopedData
     * */
    async parseDom(dom, scopedData = {}, env) {
      if (env instanceof HTMLElement) {
        console.log(env)
        throw new Error('env error')
      }
      let nodeName = dom.nodeName.toLowerCase()
      if (dom.nodeType === 3) {
        this.parseTextNode(dom, scopedData, env)
        return
      } else if (dom.nodeType === 8) {
        // comment node
        return
      } else if (dom.nodeType !== 1) {
        console.log('Other Node Type:', dom.nodeType, dom);
        return
      }
      if (dom.hasAttribute('no-vhtml') || dom.vparsed) {
        return
      }

      let vfortxt = dom.getAttribute('v-for')
      if (vfortxt !== null) {
        this.parseVfor(vfortxt, dom, scopedData, env)
        return
      }
      if (nodeName.indexOf('-') !== -1) {
        let url = '/' + nodeName.split('-').join('/')
        let singleMode = dom.hasAttribute('single')
        this.parseRef(url, dom, scopedData, env, null, singleMode)
        dom.vparsed = true
        return
      }
      if (dom.getAttribute(':vsrc')) {
        let code = dom.getAttribute(':vsrc')
        dom.removeAttribute(':vsrc')
        let attrs = Array.from(dom.attributes).map(a => {
          let res = { name: a.name, value: a.value }
          return res
        })
        let oldChilds = Array.from(dom.childNodes)
        vproxy.Watch(() => {
          delete dom.vparsed
          dom.setAttribute('vparsing', '')
          let vsrc = vproxy.Run(code, scopedData, env)
          if (!vsrc) {
            return
          }
          Array.from(dom.attributes).forEach(a => { dom.removeAttribute(a.name) })
          dom.innerHTML = ''
          attrs.forEach(a => { dom.setAttribute(a.name, a.value) })
          oldChilds.forEach(c => { dom.appendChild(c.cloneNode(true)) })
          this.parseRef(vsrc, dom, scopedData, env, null, false)
          dom.vparsed = true
        })
        return
      }
      if (dom.getAttribute('vsrc')) {
        let singleMode = dom.hasAttribute('single')
        this.parseRef(dom.getAttribute('vsrc'), dom, scopedData, env, null, singleMode)
        dom.vparsed = true
        return
      }
      if (nodeName === 'div' && dom.getAttribute('v-html')) {
        let vhtmlCode = dom.getAttribute('v-html')
        dom.removeAttribute('v-html')
        dom.innerHTML = ''
        this.parseAttrs(dom, scopedData, env)
        dom.vparsed = true
        vproxy.Watch(() => {
          let innerHTML = vproxy.Run(vhtmlCode, scopedData, env)
          dom.innerHTML = innerHTML
          let childs = this.parseVif(Array.from(dom.childNodes), scopedData, env)
          for (let n of childs) {
            this.parseDom(n, scopedData, env)
          }
        })
        return
      }
      if (nodeName === 'vslot') {
        this.parseSlots(dom, scopedData, env)
        dom.vparsed = true
        return
      }
      if (nodeName === 'vrouter') {
        this.parseAttrs(dom, scopedData, env)
        vrouter.$router.ParseVrouter(this, dom, env)
        return
      }
      this.parseAttrs(dom, scopedData, env)
      let childs = this.parseVif(Array.from(dom.childNodes), scopedData, env)
      for (let n of childs) {
        this.parseDom(n, scopedData, env)
      }
      dom.vparsed = true
    }

    onMountedRun(dom, cb, once = true) {
      if (once) {
        if (dom.isConnected) {
          cb(dom)
          return
        }
        let did = DelayCache.push((dom) => {
          dom.removeAttribute('vdelay')
          cb(dom)
        })
        dom.setAttribute('vdelay', did - 1)
        return
      }
      if (dom.isConnected) {
        cb(dom)
      }
      let did = DelayCache.push(cb)
      dom.setAttribute('vdelay', did - 1)
    }

    /**
    * @param{string} name
    * @param{HTMLElement} dom
     * */
    AllENVs = {}
    async parseRef(vsrc, dom, data, env, target, singleMode = false) {
      dom.setAttribute('vparsing', '')
      let oldEnv = env
      let vrefof = dom.getAttribute('vrefof')
      let parentRef = dom.closest(`*[vref='${vrefof}']`)
      if (parentRef) {
        env = parentRef.$env
      } else {
        // console.log('parentRef not found:', vrefof,vsrc)
      }
      if (!target && vsrc) {
        if (!vsrc.endsWith('.html')) {
          vsrc = vsrc + '.html'
        }
        target = await vget.FetchUI(vsrc, env, dom.hasAttribute('scoped'))
      }
      env = Object.assign({}, env, target?.env || {})
      // env = target.env
      dom.$env = env
      dom.$vsrc = vsrc
      env.$router = vrouter.$router
      env.$emit = (evt, ...args) => {
        evt = evt.toLowerCase()
        if (!dom.$vevent) {
          return
        }
        let fc = dom.$vevent[evt]
        if (fc && typeof fc === 'function') {
          fc(...args)
        }
      }
      let originData = await this.setupRef(dom, data, oldEnv, target, singleMode)

      if (singleMode) {
        this.parseAttrs(dom, originData, env, target?.customAttrs)
      } else {
        this.parseAttrs(dom, data, oldEnv, target?.customAttrs)
      }
      let childs = this.parseVif(Array.from(dom.childNodes), originData, env)
      for (let n of childs) {
        this.parseDom(n, originData, env)
      }
      dom.removeAttribute('vparsing')
      this.mountRef(dom, originData, env, target)
    }

    /**
    * @param {HTMLElement} dom
    * @parm {Object} data
    * @param {{heads:HTMLElement[],body:HTMLElement,scripts:HTMLElement[],setup:HTMLElement}} target
     * */
    async setupRef(dom, data, env, target, singleMode = false) {
      let originData = vproxy.Wrap({})
      if (target.setup) {
        let s = target.setup.innerHTML
        s = await vproxy.ParseImport(s, originData, dom.$env, dom.$vsrc)
        await vproxy.AsyncRun(s, originData, dom.$env, {
          $node: dom
        })
      }
      dom.$refScope = data
      dom.$refData = originData
      if (singleMode) {
        return originData
      }
      if (!dom.$refSlots) {
        // dom 预定义好内容
        let slots = vproxy.Wrap({})
        dom.childNodes.forEach((n) => {
          let nName = n.getAttribute ? n.getAttribute('vslot') : ''
          nName = nName || ''
          if (!slots[nName]) {
            slots[nName] = []
          }
          slots[nName].push(n)
        })
        dom.$refSlots = slots
      }
      dom.innerHTML = ''
      let now = target.body.cloneNode(true)
      dom.append(...now.childNodes)

      // 处理调用方attr 传参
      Object.keys(originData).forEach(k => {
        const localK = utils.CamelToKebabCase(k)
        if (typeof originData[k] === 'boolean') {
          if (dom.hasAttribute(k) || dom.hasAttribute(localK)) {
            originData[k] = true
          }
        } else if (dom.hasAttribute(k)) {
          originData[k] = dom.getAttribute(k)
          dom.removeAttribute(k)
        } else if (dom.hasAttribute(localK)) {
          originData[k] = dom.getAttribute(localK)
          dom.removeAttribute(localK)
        }
        if (dom.hasAttribute(':' + k) || dom.hasAttribute(':' + localK)) {
          let val = dom.getAttribute(':' + k) || dom.getAttribute(':' + localK)
          dom.removeAttribute(':' + k)
          dom.removeAttribute(':' + localK)
          // 此时数据还没有监听，删除旧对象，使得外部的对象直接绑定在内部$data上
          delete originData[k]
          if (val) {
            vproxy.Watch(() => vproxy.Run(val, data, env), () => {
              originData[k] = vproxy.Run(val, data, env)
            }, { deep: true })
          } else {
            vproxy.Watch(() => data[k], () => {
              originData[k] = data[k]
            }, { deep: true })
          }
        }
        if (dom.hasAttribute('v:' + k) || dom.hasAttribute('v:' + localK)) {
          let val = dom.getAttribute('v:' + k) || dom.getAttribute('v:' + localK)
          dom.removeAttribute('v:' + k)
          dom.removeAttribute('v:' + localK)
          if (!val) {
            val = k
          }
          delete originData[k]
          vproxy.Watch(() => findLastAccess(val, data), (args) => {
            if (args && args.data && args.key) {
              originData[k] = args.data[args.key]
            } else {
              console.warn('not found variables in:' + val)
            }
          })
          vproxy.Watch(() => originData[k], () => {
            let args = findLastAccess(val, data)
            if (args && args.data && args.key) {
              args.data[args.key] = originData[k]
            } else {
              console.warn('not found variables in:' + val)
            }
          })
        }
      })

      // handle local component attr
      let attrs = Array.from(now.attributes)
      attrs = attrs.filter(a => {
        if (this.parseAttr(dom, a.name, a.value, originData, env)) {
          now.removeAttribute(a.name)
          return false
        }
        return true
      })
      attrs.forEach((a) => {
        if (a.name === 'class') {
          dom.classList.add(...a.value.trim().split(/\s+/))
        } else if (a.name === 'style') {
          let styles = a.value.split(';')
          for (let s of styles) {
            let ss = s.split(':')
            if (ss.length === 2 && !dom.style[ss[0]]) {
              let skey = ss[0].trim()
              if (skey.startsWith('--')) {
                dom.style.setProperty(skey, ss[1].trim())
              } else {
                dom.style[skey] = ss[1].trim()
              }
            }
          }
        } else if (!dom.getAttribute(a.name)) {
          dom.setAttribute(a.name, a.value)
        }
      })
      return originData
    }

    async mountRef(dom, scopedData, env, target) {
      for (let s of target.scripts) {
        if (s.hasAttribute('active')) {
          this.onMountedRun(dom, () => {
            vproxy.AsyncRun(s.innerHTML, scopedData, env, { $node: dom, $watch: vproxy.Watch })
          }, false)
        } else {
          vproxy.AsyncRun(s.innerHTML, scopedData, env, { $node: dom, $watch: vproxy.Watch })
        }
      }
    }

    parseAttrs(dom, data, env, attrs) {
      if (dom.nodeName === 'A') {
        this.parseAHref(dom, data, env)
      }
      Array.from(dom.attributes).forEach(a => {
        if (this.parseAttr(dom, a.name, a.value, data, env)) {
          dom.removeAttribute(a.name)
        }
      })
      if (attrs) {
        // just for body element
        Object.keys(attrs).forEach(k => {
          this.parseAttr(dom, k, attrs[k], dom.$refData, env)
        })
      }
      if (dom.hasAttribute('v-show')) {
        let code = dom.getAttribute('v-show')
        let oldDisplay = dom.style.display
        vproxy.Watch(() => {
          let res = vproxy.Run(code, data, env)
          if (res) {
            dom.style.display = oldDisplay
          } else {
            dom.style.display = 'none'
          }
        })
      }
    }

    parseAHref(dom, data, env) {
      if (!dom.hasAttribute("href") && !dom.hasAttribute(":href")) {
        return
      }
      if (dom.hasAttribute(":href")) {
        let code = dom.getAttribute(":href")
        dom.removeAttribute(":href")
        vproxy.Watch(() => {
          let href = vproxy.Run(code, data, env)
          console.log(code, href, env)
          if (!href || href.startsWith('#') || href.startsWith('http')) {
            return
          } else if (href.startsWith('@')) {
            dom.setAttribute('href', href.slice(1))
          } else if (href) {
            let scoped = env?.scoped
            if (scoped) {
              href = scoped + href
            }
            dom.setAttribute('href', href)
          }
        })
      }
      const fc = (to) => {
        let url = to?.fullPath
        if (dom.getAttribute('href') === url) {
          dom.setAttribute('active', '')
        } else {
          dom.removeAttribute('active')
        }
      }
      fc(vrouter.$router.current)
      vrouter.$router.onChange(fc)
    }

    /**
    * @param {HTMLElement} dom
     * */
    parseAttr(dom, name, value, data, env) {
      if (name.startsWith(':')) {
        let attrName = name.slice(1)
        if (attrName === 'class' || attrName === 'style') {
          this.handleStyle(dom, attrName, value, data, env)
        } else {
          vproxy.Watch(() => {
            let res
            if (value) {
              res = vproxy.Run(value, data, env)
            } else {
              res = data[attrName]
            }
            utils.SetAttr(dom, attrName, res)
          })
        }
        return true
      } else if (name.startsWith('@')) {
        this.handleEvent(dom, name, value, data, env)
        return true
      } else if (name.indexOf('!') > -1) {
        console.warn('! prefix is deprecated, use : instead:', name, value, dom)
      } else if (name.startsWith('v:')) {
        let args = findLastAccess(value, data)
        if (args && args.data && args.key) {
          let vkey = args.key
          let vdata = args.data
          return utils.BindInputDomValue(dom, vdata, vkey, vproxy.Watch)
        } else {
          console.warn('not found variables in:' + value)
        }
      } else if (name === 'vdom') {
        let vbind = findLastAccess(value, data)
        if (vbind && vbind.data && vbind.key) {
          vbind.data[vbind.key] = dom
        } else {
          console.warn('not found variables in:' + value)
        }
        return true
      }
      return false
    }
    handleStyle(dom, attrName, value, data, env) {
      let oldValue = ''
      vproxy.Watch(() => {
        let res = vproxy.Run(value, data, env)
        if (typeof res === 'function') {
          res = res()
        }
        if (attrName === 'class') {
          if (oldValue) {
            dom.classList.remove(...oldValue.split(/\s+/))
            oldValue = ''
          }
          if (res instanceof Array) {
            oldValue = ''
            res.forEach(r => {
              if (typeof r === 'string' && r.length) {
                oldValue += ' ' + r
              } else if (typeof r === 'object') {
                for (let k in r) {
                  if (r[k]) {
                    oldValue += ' ' + k
                  }
                }
              }
            })
          } else if (typeof res === 'string' && res.length) {
            oldValue = res.trim()
          } else if (typeof res === 'object') {
            oldValue = ''
            for (let k in res) {
              if (res[k]) {
                oldValue += ' ' + k
              }
            }
          } else if (res) {
            console.warn('class value error:', res)
          }
          oldValue = oldValue.trim()
          if (oldValue) {
            dom.classList.add(...oldValue.split(/\s+/))
          }
        } else if (attrName === 'style') {
          if (oldValue) {
            if (typeof oldValue === 'object') {
              for (let k in oldValue) {
                if (k.startsWith('--')) {
                  dom.style.removeProperty(k)
                } else {
                  dom.style[k] = ''
                }
              }
            } else if (typeof oldValue === 'string') {
              let styles = oldValue.split(';')
              for (let s of styles) {
                let ss = s.split(':')
                if (ss.length === 2) {
                  if (ss[0].trim().startsWith('--')) {
                    dom.style.removeProperty(ss[0].trim())
                  } else {
                    dom.style[ss[0].trim()] = ''
                  }
                }
              }
            }
          }
          if (typeof res === 'object') {
            for (let k in res) {
              if (k.startsWith('--')) {
                dom.style.setProperty(k, res[k])
              } else {
                dom.style[k] = res[k]
              }
            }
          } else if (typeof res === 'string') {
            let styles = res.split(';')
            for (let s of styles) {
              let ss = s.split(':')
              if (ss.length === 2) {
                if (ss[0].trim().startsWith('--')) {
                  dom.style.setProperty(ss[0].trim(), ss[1].trim())
                } else {
                  dom.style[ss[0].trim()] = ss[1].trim()
                }
              }
            }
          }
          oldValue = res
        }
      })
    }
    handleEvent(dom, name, value, data, env) {
      let actionName = name.slice(1).split('.')
      let evtMap = { 'self': false, 'prevent': false, 'stop': false }
      let evt = actionName[0]
      if (evt === 'mounted') {
        this.onMountedRun(dom, (d) => {
          let cb = vproxy.Run(value, data, env)
          if (typeof cb === 'function') {
            (function() {
            })();
            cb(d)
          }
        }, false)
      } else if (evt === 'outerclick') {
        let func = (e) => {
          let cb = vproxy.Run(value, data, env, { $event: e })
          if (typeof cb === 'function') {
            cb(e)
          }
        }
        utils.AddClicker(dom, 'outer', func)
      } else if (utils.EventsList.indexOf(evt) !== -1) {
        if (evt === 'keydown' || evt === 'keyup' || evt === 'keypress') {
          if (dom.tagName !== 'INPUT' && dom.tagName !== 'TEXTAREA') {
            dom.setAttribute('tabindex', '0')
          }
        }
        let func = (e) => {
          let cb = vproxy.Run(value, data, env, { $event: e })
          if (typeof cb === 'function') {
            cb(e)
          }
        }
        actionName.slice(1).forEach(k => {
          if (k.startsWith('delay')) {
            let delay = k.slice(5)
            if (!delay) {
              delay = 1000
            } else if (delay.endsWith('ms')) {
              delay = Number(delay.slice(0, -2))
            } else if (delay.endsWith('s')) {
              delay = Number(delay.slice(0, -1)) * 1000
            } else {
              delay = Number(delay)
            }
            if (isNaN(delay)) {
              delay = 1000
            }
            func = (e) => {
              let fc = dom['_' + evt]
              if (fc && typeof fc === 'number') {
                clearTimeout(fc)
              }
              dom['_' + evt] = setTimeout(() => {
                let cb = vproxy.Run(value, data, env, { $event: e })
                if (typeof cb === 'function') {
                  cb(e)
                }
              }, delay)
            }
          }
          evtMap[k] = true
        })
        dom.addEventListener(evt, (e) => {
          if (actionName.length > 1 && (evt === 'keydown' || evt == 'keyup' || evt == 'keypress')) {
            let btn = actionName[1]
            if (btn !== e.key?.toLowerCase()) {
              return
            }
          }
          if (evtMap['self'] && e.currentTarget !== e.target) {
            return
          }
          if (evtMap['prevent']) {
            e.preventDefault()
          }
          if (evtMap['stop']) {
            e.stopPropagation()
          }
          func(e)
        })
      } else {
        dom.$vevent = dom.$vevent || {}
        dom.$vevent[evt] = (...arg) => {
          let cb = vproxy.Run(value, data, env, {})
          if (typeof cb === 'function') {
            cb(...arg)
          }
        }
      }
    }

    parseTextNode(dom, data, env) {
      // text node
      let txt = dom.nodeValue.trim()
      if (!txt) {
        return
      }
      let match
      let nstart = 0
      let start = -1;
      let txtItems = []
      while ((match = varRegex.exec(txt)) !== null) {
        if (match[0] === '{{') {
          start = match.index
        } else if (match[0] === '}}' && start >= 0) {
          if (nstart !== start) {
            txtItems.push(txt.slice(nstart, start))
          }
          txtItems.push('')
          let valStr = txt.slice(start + 2, match.index)
          let valIdx = txtItems.length
          start = -1
          nstart = match.index + 2
          vproxy.Watch(() => {
            txtItems[valIdx - 1] = vproxy.Run(valStr, data, env)
            if (typeof txtItems[valIdx - 1] === 'object') {
              txtItems[valIdx - 1] = JSON.stringify(txtItems[valIdx - 1])
            }
            dom.nodeValue = txtItems.join('')
          })
        }
      }
      txtItems.push(txt.slice(nstart))
      dom.nodeValue = txtItems.join('')
    }

    vforDomCache = {}
    parseVfor(vfortxt, dom, data, env) {
      dom.removeAttribute('v-for')
      let matches = vforRegex.exec(vfortxt)
      if (matches?.length === 6) {
        let vforTag = document.createElement('div')
        vforTag.style.display = 'none'
        let vforTagID = vproxy.GenUniqueID()
        this.vforDomCache[vforTagID] = {}
        dom.parentNode.replaceChild(vforTag, dom)
        vproxy.Watch(() => {
          let value = matches[3] || matches[2]
          let key = matches[4]
          let iters = vproxy.Run(matches[5], data, env)
          let cache = this.vforDomCache[vforTagID]
          let rendereds = new Set()

          if (typeof iters === 'function') {
            iters = iters()
          } else if (typeof iters === 'number') {
            iters = Array.from({ length: iters }, (_, i) => i)
          }
          if (iters === undefined || iters === null) {
            iters = []
          }
          // 访问长度，触发监听
          let _ = iters.length
          if (typeof iters === 'object') {
            let keys = Object.keys(iters)
            let items = []
            for (let kid in keys) {
              let k = keys[kid]
              let vfk = ''
              if (iters[k] && iters[k][vproxy.DataID]) {
                vfk = iters[k][vproxy.DataID]
              } else {
                vfk = k + '.' + iters[k]
              }
              vfk = vforTagID + "." + vfk
              rendereds.add(vfk)
              items.push({ k, vfk, val: iters[k] })
            }

            // Cleanup removed nodes
            for (let k of Object.keys(cache)) {
              if (!rendereds.has(k)) {
                if (cache[k] instanceof Array) {
                  cache[k].forEach(d => d.remove())
                } else {
                  cache[k].remove()
                }
                delete cache[k]
              }
            }

            // Update and Reorder (Backwards)
            let refNode = vforTag
            for (let i = items.length - 1; i >= 0; i--) {
              let { k, vfk, val } = items[i]
              let curDom = cache[vfk]

              if (curDom) {
                if (key) {
                  curDom.$vforData[key] = k === '0' ? 0 : (Number(k) || k)
                }
                if (curDom.isConnected) {
                  if (curDom.nextSibling !== refNode) {
                    vforTag.parentNode.insertBefore(curDom, refNode)
                  }
                  refNode = curDom
                }
                continue
              }

              let newDom = dom.cloneNode(true)
              cache[vfk] = newDom
              let tmpData = { [value]: val }
              if (key) {
                tmpData[key] = k === '0' ? 0 : (Number(k) || k)
              }
              tmpData = vproxy.Wrap(tmpData, data)
              newDom.$vforData = tmpData

              vforTag.parentNode.insertBefore(newDom, refNode)

              let vif = dom.getAttribute('v-if')
              if (!vif) {
                this.parseDom(newDom, tmpData, env)
                refNode = newDom
                continue
              }

              newDom.removeAttribute('v-if')
              let watchid = -1
              watchid = vproxy.Watch(() => {
                let dom = cache[vfk]
                if (!dom) {
                  vproxy.Cancel(watchid)
                  return
                }
                let res = vproxy.Run(vif, tmpData, env)
                if (res) {
                  if (!dom.vparsed) {
                    this.parseDom(dom, tmpData, env)
                  }
                  if (!dom.isConnected) {
                    let founded = false
                    let before = vforTag
                    for (let tmpvfk in cache) {
                      if (tmpvfk === vfk) {
                        founded = true
                        continue
                      }
                      if (founded && cache[tmpvfk].isConnected) {
                        before = cache[tmpvfk]
                        break
                      }
                    }
                    vforTag.parentNode.insertBefore(dom, before)
                  }
                } else {
                  if (dom.isConnected) {
                    dom.remove()
                  } else {
                    this.onMountedRun(dom, (d) => {
                      dom.remove()
                    })
                  }
                }
              })

              if (newDom.isConnected) {
                refNode = newDom
              }
            }
          } else {
            console.error('vfor iter object error:', [matches, iters, vfortxt, data])
          }
        })
      } else {
        console.error('vfor error:', vfortxt)
      }
    }

    parseVif(nodes, data, env) {
      let ifCache = { now: document.createElement('div'), conds: [], doms: [] }
      const handleIf = (cache) => {
        let ifData = { now: cache.now, conds: cache.conds, doms: cache.doms }
        let ifList = []
        for (let cid in ifData.conds) {
          let c = ifData.conds[cid]
          if (c === '') {
            c = 'true'
          } else {
            c = 'Boolean(' + c + ')'
          }
          ifList.push(c)
        }
        let ifFc = `let res = [${ifList.join(',')}]\n return res.indexOf(true)`
        vproxy.Watch(() => {
          let res = vproxy.Run(ifFc, data, env)
          let tmpDom = ifData.doms[res]
          if (!tmpDom) {
            tmpDom = document.createElement('div')
            tmpDom.style.display = 'none'
          }
          return tmpDom
        }, (tmpDom) => {
          if (!tmpDom) {
            return
          }
          this.onMountedRun(ifData.now, (d) => {
            d.replaceWith(tmpDom)
            ifData.now = tmpDom
          })
          if (!tmpDom?.vparsed) {
            this.parseDom(tmpDom, data, env)
          }
        })
      }
      let childs = nodes.filter(d => {
        if (!d.getAttribute || d.getAttribute('v-for')) {
          return true
        }
        if (d.getAttribute('v-if') !== null) {
          if (ifCache.conds.length > 0) {
            handleIf(ifCache)
            ifCache = { now: document.createElement('div'), conds: [], doms: [] }
          }
          d.replaceWith(ifCache.now)
          // dom.replaceChild(ifCache.now, d)
          ifCache.conds.push(d.getAttribute('v-if'))
          d.removeAttribute('v-if')
          ifCache.doms.push(d)
          return false
        } else if (d.getAttribute('v-else-if') !== null) {
          ifCache.conds.push(d.getAttribute('v-else-if'))
          d.removeAttribute('v-else-if')
          ifCache.doms.push(d)
          d.remove()
          return false
        } else if (d.getAttribute('v-else') !== null) {
          ifCache.conds.push('')
          d.removeAttribute('v-else')
          ifCache.doms.push(d)
          d.remove()
          return false
        }
        return true
      })
      if (ifCache.conds.length > 0) {
        handleIf(ifCache)
      }
      return childs
    }


    /**
    * @param {HTMLElement} dom
     * */
    parseSlots(dom, data, env) {
      // 先插入dom，后解析，避免slot搭配v-for,v-if使用出现bug
      let slotof = dom.getAttribute('vrefof')
      let refDom = dom.closest(`*[vref='${slotof}']`)
      if (!refDom) {
        // TODO
        this.onMountedRun(dom, (d) => {
          this.parseSlots(d, data, env)
        })
        return
      }
      while (true) {
        let tmp = refDom?.parentNode.closest('*[vref]')
        if (!tmp) {
          break
        }
        if (tmp.getAttribute('vref') === slotof) {
          refDom = tmp
        } else {
          break
        }
      }
      let sName = dom.getAttribute('name') || ''
      if (dom.getAttribute(':name')) {
        let nameVal = dom.getAttribute(':name')
        dom.removeAttribute(':name')
        sName = vproxy.Run(nameVal, data, env)
      }
      //
      if (!dom.originContent) {
        dom.$originContent = Array.from(dom.childNodes)
        dom.innerHTML = ''
      }
      // slot模板
      dom.$slotCache = {}
      vproxy.Watch(() => {
        let slots = refDom.$refSlots || {}
        // slot数据域
        let slotsData = refDom.$refScope || {}
        let sNodes = slots[sName]
        if (sNodes && sNodes.length > 0) {
          let hashID = sNodes[0].hashID
          if (!hashID) {
            hashID = vproxy.GenUniqueID()
            sNodes[0].hashID = hashID
          } else if (dom.$slotCache[hashID]) {
            dom.innerHTML = ''
            dom.append(...dom.$slotCache[hashID])
            return
          }
          dom.innerHTML = ''
          sNodes = sNodes.map(n => n.cloneNode(true))
          dom.append(...sNodes)
          let tmpSlotsData = slotsData
          if (dom.getAttribute('vbind') !== null) {
            let vbindAttrs = dom.getAttribute('vbind').split(',').map(a => a.trim())
            tmpSlotsData = vproxy.Wrap({})
            vbindAttrs.forEach(a => {
              if (data.hasOwnProperty(a)) {
                tmpSlotsData[a] = data[a]
              }
            })
            // tmpSlotsData = recordGet(dom.getAttribute('vbind'), data)
            vproxy.SetDataRoot(tmpSlotsData, slotsData)
          }
          let sNodeVrefof = ''
          sNodes.find(n => {
            if (n.getAttribute && n.getAttribute('vrefof')) {
              sNodeVrefof = n.getAttribute('vrefof')
              return true
            }
            return false
          })
          let sNodesEnv = env
          if (sNodeVrefof) {
            let sNodeVref = dom.closest(`*[vref='${sNodeVrefof}']`)
            sNodesEnv = sNodeVref?.$env || env
          }
          sNodes = this.parseVif(sNodes, tmpSlotsData, sNodesEnv)
          sNodes.forEach((n) => this.parseDom(n, tmpSlotsData, sNodesEnv))
          dom.$slotCache[hashID] = sNodes
        } else {
          dom.innerHTML = ''
          dom.append(...dom.$originContent)
          let parsed = false
          dom.$originContent.forEach((n) => {
            if (n.hasAttribute && n.vparsed) {
              parsed = true
            }
          })
          if (!parsed) {
            dom.$originContent = this.parseVif(dom.$originContent, data, env)
            dom.$originContent.forEach((n) => this.parseDom(n, data, env))
          }
        }
      })
      this.parseAttrs(dom, data, env)
      return dom
    }
  }
  if (window.$vhtml) {
    console.error('vhtml already exists.')
  } else {
    window.$vhtml = new vhtml(document.body)
    console.log('vhtml loaded.')
  }
})();