@mpxjs/core 2.9.38 → 2.9.39

package/src/dynamic/vnode/css-select/index.js

@@ -0,0 +1,116 @@
+import cssauron from './cssauron'
+
+const language = cssauron({
+  tag: function (node) {
+    return node.nodeType
+  },
+  class: function (node) {
+    return node.data?.class
+  },
+  id: function (node) {
+    return node.data?.id
+  },
+  children: function (node) {
+    return node.children
+  },
+  parent: function (node) {
+    return node.parent
+  },
+  contents: function (node) {
+    return node.contents || ''
+  },
+  attr: function (node, attr) {
+    if (node.properties) {
+      const attrs = node.properties.attributes
+      if (attrs && attrs[attr]) {
+        return attrs[attr]
+      }
+      return node.properties[attr]
+    }
+  }
+})
+
+export default function cssSelect (sel, options) {
+  options = options || {}
+  const selector = language(sel, options.moduleId)
+  function match (vtree) {
+    const node = mapTree(vtree, null, options) || {}
+    const matched = []
+
+    // Traverse each node in the tree and see if it matches our selector
+    traverse(node, function (node) {
+      let result = selector(node)
+      if (result) {
+        if (!Array.isArray(result)) {
+          result = [result]
+        }
+        matched.push.apply(matched, result)
+      }
+    })
+
+    const results = mapResult(matched)
+    if (results.length === 0) {
+      return null
+    }
+    return results
+  }
+  match.matches = function (vtree) {
+    const node = mapTree(vtree, null, options)
+    return !!selector(node)
+  }
+  return match
+}
+
+function traverse (vtree, fn) {
+  fn(vtree)
+  if (vtree.children) {
+    vtree.children.forEach(function (vtree) {
+      traverse(vtree, fn)
+    })
+  }
+}
+
+function mapResult (result) {
+  return result
+    .filter(function (node) {
+      return !!node.vtree
+    })
+    .map(function (node) {
+      return node.vtree
+    })
+}
+
+function getNormalizeCaseFn (caseSensitive) {
+  return caseSensitive
+    ? function noop (str) {
+      return str
+    }
+    : function toLowerCase (str) {
+      return str.toLowerCase()
+    }
+}
+
+// Map a virtual-dom node tree into a data structure that cssauron can use to
+// traverse.
+function mapTree (vtree, parent, options) {
+  const normalizeTagCase = getNormalizeCaseFn(options.caseSensitiveTag)
+
+  if (vtree.nt != null) {
+    const node = {}
+    node.parent = parent
+    node.vtree = vtree
+    node.nodeType = normalizeTagCase(vtree.nt)
+    if (vtree.d) {
+      node.data = vtree.d
+    }
+
+    if (vtree.c) {
+      node.children = vtree.c
+        .map(function (child) {
+          return mapTree(child, node, options)
+        })
+        .filter(Boolean)
+    }
+    return node
+  }
+}

package/src/dynamic/vnode/css-select/through.js

@@ -0,0 +1,19 @@
+export default function through (onData) {
+  let dataCb = null
+
+  return {
+    on: function (name, callback) {
+      if (name === 'data') {
+        dataCb = callback
+      }
+    },
+    end: function (data) {
+      onData(data)
+    },
+    queue: function (data) {
+      if (dataCb) {
+        dataCb(data)
+      }
+    }
+  }
+}

package/src/dynamic/vnode/css-select/tokenizer.js

@@ -0,0 +1,371 @@
+import through from './through'
+
+const PSEUDOSTART = 'pseudo-start'
+const ATTR_START = 'attr-start'
+const ANY_CHILD = 'any-child'
+const ATTR_COMP = 'attr-comp'
+const ATTR_END = 'attr-end'
+const PSEUDOPSEUDO = '::'
+const PSEUDOCLASS = ':'
+const READY = '(ready)' // 重置标志位
+const OPERATION = 'op'
+const CLASS = 'class'
+const COMMA = 'comma'
+const ATTR = 'attr'
+const SUBJECT = '!'
+const TAG = 'tag'
+const STAR = '*'
+const ID = 'id'
+
+export default function tokenize () {
+  let escaped = false
+  let gathered = []
+  let state = READY
+  let data = []
+  let idx = 0
+  let stream
+  let length
+  let quote
+  let depth
+  let lhs
+  let rhs
+  let cmp
+  let c
+
+  return (stream = through(ondata, onend))
+
+  function ondata (chunk) {
+    data = data.concat(chunk.split(''))
+    length = data.length
+
+    while (idx < length && (c = data[idx++])) {
+      switch (state) {
+        case READY:
+          state_ready()
+          break
+        case ANY_CHILD:
+          state_any_child()
+          break
+        case OPERATION:
+          state_op()
+          break
+        case ATTR_START:
+          state_attr_start()
+          break
+        case ATTR_COMP:
+          state_attr_compare()
+          break
+        case ATTR_END:
+          state_attr_end()
+          break
+        case PSEUDOCLASS:
+        case PSEUDOPSEUDO:
+          state_pseudo()
+          break
+        case PSEUDOSTART:
+          state_pseudostart()
+          break
+        case ID:
+        case TAG:
+        case CLASS:
+          state_gather()
+          break
+      }
+    }
+
+    data = data.slice(idx)
+
+    if (gathered.length) {
+      stream.queue(token())
+    }
+  }
+
+  function onend (chunk) {
+    // if (arguments.length) {
+    //   ondata(chunk)
+    // }
+
+    // if (gathered.length) {
+    //   stream.queue(token())
+    // }
+  }
+
+  function state_ready () {
+    switch (true) {
+      case c === '#':
+        state = ID
+        break
+      case c === '.':
+        state = CLASS
+        break
+      case c === ':':
+        state = PSEUDOCLASS
+        break
+      case c === '[':
+        state = ATTR_START
+        break
+      case c === '!':
+        subject()
+        break
+      case c === '*':
+        star()
+        break
+      case c === ',':
+        comma()
+        break
+      case /[>+~]/.test(c):
+        state = OPERATION
+        break
+      case /\s/.test(c):
+        state = ANY_CHILD
+        break
+      case /[\w\d\-_]/.test(c):
+        state = TAG
+        --idx
+        break
+    }
+  }
+
+  function subject () {
+    state = SUBJECT
+    gathered = ['!']
+    stream.queue(token())
+    state = READY
+  }
+
+  function star () {
+    state = STAR
+    gathered = ['*']
+    stream.queue(token())
+    state = READY
+  }
+
+  function comma () {
+    state = COMMA
+    gathered = [',']
+    stream.queue(token())
+    state = READY
+  }
+
+  function state_op () {
+    if (/[>+~]/.test(c)) {
+      return gathered.push(c)
+    }
+
+    // chomp down the following whitespace.
+    if (/\s/.test(c)) {
+      return
+    }
+
+    stream.queue(token())
+    state = READY
+    --idx // 指针左移，归档，开始匹配下一个 token
+  }
+
+  function state_any_child () {
+    if (/\s/.test(c)) {
+      return
+    }
+
+    if (/[>+~]/.test(c)) {
+      --idx
+      state = OPERATION
+      return state
+      // return --idx, (state = OPERATION)
+    }
+
+    // 生成 any_child 节点，并重置状态
+    stream.queue(token())
+    state = READY
+    --idx
+  }
+
+  function state_pseudo () {
+    rhs = state
+    state_gather(true)
+
+    if (state !== READY) {
+      return
+    }
+
+    if (c === '(') {
+      lhs = gathered.join('')
+      state = PSEUDOSTART
+      gathered.length = 0
+      depth = 1
+      ++idx
+
+      return
+    }
+
+    state = PSEUDOCLASS
+    stream.queue(token())
+    state = READY
+  }
+
+  function state_pseudostart () {
+    if (gathered.length === 0 && !quote) {
+      quote = /['"]/.test(c) ? c : null
+
+      if (quote) {
+        return
+      }
+    }
+
+    if (quote) {
+      if (!escaped && c === quote) {
+        quote = null
+
+        return
+      }
+
+      if (c === '\\') {
+        escaped ? gathered.push(c) : (escaped = true)
+
+        return
+      }
+
+      escaped = false
+      gathered.push(c)
+
+      return
+    }
+
+    gathered.push(c)
+
+    if (c === '(') {
+      ++depth
+    } else if (c === ')') {
+      --depth
+    }
+
+    if (!depth) {
+      gathered.pop()
+      stream.queue({
+        type: rhs,
+        data: lhs + '(' + gathered.join('') + ')'
+      })
+
+      state = READY
+      lhs = rhs = cmp = null
+      gathered.length = 0
+    }
+  }
+
+  function state_attr_start () {
+    // 在收集字符的阶段，还会有 state 标志位的判断，因此会影响到下面的逻辑执行
+    state_gather(true)
+
+    if (state !== READY) {
+      return
+    }
+
+    if (c === ']') {
+      state = ATTR
+      stream.queue(token())
+      state = READY
+
+      return
+    }
+
+    lhs = gathered.join('')
+    gathered.length = 0
+    state = ATTR_COMP
+  }
+
+  // 属性选择器：https://www.w3school.com.cn/css/css_attribute_selectors.asp
+  function state_attr_compare () {
+    if (/[=~|$^*]/.test(c)) {
+      gathered.push(c)
+    }
+
+    // 操作符&=
+    if (gathered.length === 2 || c === '=') {
+      cmp = gathered.join('')
+      gathered.length = 0
+      state = ATTR_END
+      quote = null
+    }
+  }
+
+  function state_attr_end () {
+    if (!gathered.length && !quote) {
+      quote = /['"]/.test(c) ? c : null
+
+      if (quote) {
+        return
+      }
+    }
+
+    if (quote) {
+      if (!escaped && c === quote) {
+        quote = null
+
+        return
+      }
+
+      if (c === '\\') {
+        if (escaped) {
+          gathered.push(c)
+        }
+
+        escaped = !escaped
+
+        return
+      }
+
+      escaped = false
+      gathered.push(c)
+
+      return
+    }
+
+    state_gather(true)
+
+    if (state !== READY) {
+      return
+    }
+
+    stream.queue({
+      type: ATTR,
+      data: {
+        lhs: lhs,
+        rhs: gathered.join(''),
+        cmp: cmp
+      }
+    })
+
+    state = READY
+    lhs = rhs = cmp = null
+    gathered.length = 0
+  }
+
+  function state_gather (quietly) {
+    // 如果是非单词字符，例如 空格。会更新 state 的状态
+    if (/[^\d\w\-_]/.test(c) && !escaped) {
+      if (c === '\\') {
+        escaped = true
+      } else {
+        !quietly && stream.queue(token())
+        state = READY
+        --idx
+      }
+
+      return
+    }
+
+    escaped = false
+    gathered.push(c)
+  }
+
+  function token () {
+    const data = gathered.join('')
+
+    gathered.length = 0
+
+    return {
+      type: state,
+      data: data
+    }
+  }
+}