@mpxjs/webpack-plugin 2.6.113 → 2.6.114-alpha.0

package/lib/runtime/components/tenon/filterTag.js

@@ -0,0 +1,402 @@
+// eslint-disable-next-line
+const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/ // useless escape
+const ncname = `[a-zA-Z_][\\w\\-\\.]*`
+const qname = `((?:${ncname}\\:)?${ncname})`
+const startTagOpen = new RegExp(`^<${qname}`)
+const startTagClose = /^\s*(\/?)>/
+const endTag = new RegExp(`^<\\/${qname}[^>]*>`)
+// eslint-disable-next-line
+const comment = /^<!\--/
+// eslint-disable-next-line
+const invalidAttributeRE = /[\s"'<>\/=]/
+// 当前节点的parent
+let currentParent
+
+function makeMap (str, expectsLowerCase) {
+  const map = Object.create(null)
+  const list = str.split(',')
+  for (let i = 0; i < list.length; i++) {
+    map[list[i]] = true
+  }
+  return expectsLowerCase
+    ? val => map[val.toLowerCase()]
+    : val => map[val]
+}
+
+const isTenonTag = makeMap('h1,h2,h3,h4,h5,h6,i,small,span,strong,image,a')
+
+const isTenonTextTag = makeMap('h1,h2,h3,h4,h5,h6,i,small,span,strong')
+
+const isTextAttrs = makeMap('color,backgroundColor,fontFamily,fontSize,fontWeight,fontStyle,textDecoration')
+
+const isImageAttrs = makeMap('image,imageWidth,imageHeight,imageAlign')
+
+const isAAttrs = makeMap('href,hrefColor')
+
+const isUnaryTag = makeMap(
+  'area,base,br,col,embed,frame,hr,img,input,isindex,keygen,' +
+  'link,meta,param,source,track,wbr'
+)
+// const isSpace = makeMap('ensp,emsp,nbsp')
+
+function makeAttrsMap (attrs) {
+  const map = {}
+  for (let i = 0, l = attrs.length; i < l; i++) {
+    map[attrs[i].name] = attrs[i].value
+  }
+  return map
+}
+
+function createASTElement (
+  tag,
+  attrs
+) {
+  return {
+    name: tag,
+    attrs: makeAttrsMap(attrs),
+    children: []
+  }
+}
+
+function parseHTML (html, options) {
+  const stack = []
+  let index = 0
+  // let last
+  while (html) {
+    // last = html
+    // Make sure we're not in a plaintext content element like script/style
+    // if (!lastTag) {
+    let textEnd = html.indexOf('<')
+    if (textEnd === 0) {
+      // 如果是注释节点
+      if (comment.test(html)) {
+        const commentEnd = html.indexOf('-->')
+
+        if (commentEnd >= 0) {
+          options.comment(html.substring(4, commentEnd))
+          advance(commentEnd + 3)
+          continue
+        }
+      }
+      // 如果是结束标签
+      const endTagMatch = html.match(endTag)
+      if (endTagMatch) {
+        const curIndex = index
+        advance(endTagMatch[0].length)
+        parseEndTag(endTagMatch[1], curIndex, index)
+        continue
+      }
+      // 如果是开始的开标签
+      const start = html.match(startTagOpen)
+      if (start) {
+        const match = {
+          tagName: start[1],
+          attrs: [],
+          start: index
+        }
+        advance(start[0].length)
+        let end, attr
+        while (!(end = html.match(startTagClose)) && (attr = html.match(attribute))) {
+          attr.start = index
+          advance(attr[0].length)
+          attr.end = index
+          match.attrs.push(attr)
+        }
+        if (end) {
+          match.unarySlash = end[1]
+          advance(end[0].length)
+          match.end = index
+          handleStartTag(match)
+        }
+      }
+    }
+    let text, rest, next
+
+    if (textEnd >= 0) {
+      // 获取剩下的部分
+      rest = html.slice(textEnd)
+      // 当不是结束标签 开始的开标签 注释标签时
+      while (
+        !endTag.test(rest) &&
+        !startTagOpen.test(rest) &&
+        !comment.test(rest)
+      ) {
+        // < in plain text, be forgiving and treat it as text
+        // 找下一个对应的<
+        next = rest.indexOf('<', 1)
+        if (next < 0) break
+        textEnd += next
+        rest = html.slice(textEnd)
+      }
+      // 将text截取出来 可能是没找到的
+      text = html.substring(0, textEnd)
+    }
+    // 没有找到<
+    if (textEnd < 0) {
+      text = html
+    }
+
+    if (text) {
+      advance(text.length)
+    }
+    if (options.chars && text) {
+      // 处理字符串
+      options.chars(text)
+    }
+    // }
+  }
+  parseEndTag()
+  function advance (n) {
+    index += n
+    html = html.substring(n)
+  }
+
+  function parseEndTag (tagName, start, end) {
+    let pos, lowerCasedTagName
+    if (start == null) start = index
+    if (end == null) end = index
+    // Find the closest opened tag of the same type
+    if (tagName) {
+      lowerCasedTagName = tagName.toLowerCase()
+      for (pos = stack.length - 1; pos >= 0; pos--) {
+        if (stack[pos].lowerCasedTag === lowerCasedTagName) {
+          break
+        }
+      }
+    } else {
+      // If no tag name is provided, clean shop
+      pos = 0
+    }
+    if (pos >= 0) {
+      // Close all the open elements, up the stack
+      for (let i = stack.length - 1; i >= pos; i--) {
+        if (i > pos || !tagName) {
+          console.warn(`tag <${stack[i].tag}> has no matching end tag.`,
+            { start: stack[i].start, end: stack[i].end })
+        }
+        if (options.end) {
+          options.end()
+        }
+      }
+
+      // Remove the open elements from the stack
+      stack.length = pos
+    }
+  }
+
+  function handleStartTag (match) {
+    const tagName = match.tagName.toLowerCase()
+    const unarySlash = match.unarySlash
+
+    const unary = isUnaryTag(tagName) || !!unarySlash
+
+    const l = match.attrs.length
+    const attrs = new Array(l)
+    for (let i = 0; i < l; i++) {
+      const args = match.attrs[i]
+      const value = args[3] || args[4] || args[5] || ''
+      attrs[i] = {
+        name: args[1],
+        value: value
+      }
+    }
+
+    if (!unary) {
+      stack.push({ tag: tagName, lowerCasedTag: tagName.toLowerCase(), attrs: attrs, start: match.start, end: match.end })
+      // lastTag = tagName
+    }
+
+    if (options.start) {
+      options.start(tagName, attrs, unary)
+    }
+  }
+}
+
+export function parse (template) {
+  let nodes = []
+  const stack = []
+  let root
+  function pushChild (currentParent, child) {
+    if (currentParent) {
+      currentParent.children.push(child)
+    } else {
+      nodes.push(child)
+    }
+  }
+  parseHTML(template, {
+    start (tag, attrs, unary) {
+      let element = createASTElement(tag, attrs, currentParent)
+      if (!unary && !stack.length) {
+        root = element
+      }
+      if (!unary) {
+        currentParent = element
+        stack.push(element)
+      } else if (isUnaryTag(tag)) {
+        pushChild(currentParent, element)
+      }
+      attrs.forEach(attr => {
+        if (invalidAttributeRE.test(attr.name)) {
+          console.warn(`Invalid dynamic argument expression: attribute names cannot contain ` +
+            `spaces, quotes, <, >, / or =.`, {
+            start: attr.start + attr.name.indexOf(`[`),
+            end: attr.start + attr.name.length
+          })
+        }
+      })
+    },
+    end () {
+      const element = stack[stack.length - 1]
+      // pop stack
+      stack.length -= 1
+      currentParent = stack[stack.length - 1]
+      currentParent && currentParent.children.push(element)
+      if (!stack.length) {
+        nodes.push(root)
+      }
+    },
+    chars (text) {
+      const child = {
+        type: 'text',
+        text
+      }
+      pushChild(currentParent, child)
+    },
+    comment (text) {
+      const child = {
+        type: 'comment',
+        text
+      }
+      pushChild(currentParent, child)
+    }
+  })
+  if (stack.length) {
+    let last
+    for (let i = stack.length - 1; i >= 0; i--) {
+      if (last) {
+        stack[i].children.push(last)
+      }
+      last = stack[i]
+    }
+    nodes.push(last)
+  }
+  return nodes
+}
+
+// function spaceTran (str, space) {
+//   const sReg = /( |&emsp;|&ensp;|&nbsp;){1}/g
+//   const setSpace = `&${space};`
+//   return str.replace(sReg, setSpace)
+// }
+function TenonTagCreater (tagName) {
+  if (this instanceof TenonTagCreater) {
+    return new this[tagName]()
+  }
+  return new TenonTagCreater(tagName)
+}
+
+TenonTagCreater.prototype = {
+  h1: function () {
+    return {
+      fontWeight: 'bold',
+      fontSize: 28
+    }
+  },
+  h2: function () {
+    return {
+      fontWeight: 'bold',
+      fontSize: 21
+    }
+  },
+  h3: function () {
+    return {
+      fontWeight: 'bold',
+      fontSize: 16.38
+    }
+  },
+  h4: function () {
+    return {
+      fontWeight: 'bold'
+    }
+  },
+  h5: function () {
+    return {
+      fontWeight: 'bold',
+      fontSize: 11.62
+    }
+  },
+  h6: function () {
+    return {
+      fontWeight: 'bold',
+      fontSize: 10.5
+    }
+  },
+  i: function () {
+    return {
+      fontStyle: 'italic'
+    }
+  },
+  small: function () {
+    return {
+      fontSize: 11.62
+    }
+  },
+  span: function () {
+    return {
+
+    }
+  },
+  strong: function () {
+    return {
+      fontWeight: 'bold'
+    }
+  },
+  image: function () {
+    return {
+
+    }
+  },
+  a: function () {
+    return {
+
+    }
+  }
+}
+
+export function htmlTranStr (template, space, parentNode) {
+  // 只能解析最外层的
+  let richTextArray = []
+  template.forEach(item => {
+    const name = item.name
+
+    if (item.type === 'text') {
+      // hummer不支持 暂时注释
+      // parentNode.text = isSpace(space) ? spaceTran(item.text, space) : item.text
+      parentNode.text = item.text
+    }
+    if (item.type === 'comment') {
+      console.warn(`the rich-text nonsupport ${item.type} tag`)
+    }
+    // 改造判断tenon支持的标签 根据默认样式 然后组合设置的样式
+    if (name && isTenonTag(name)) {
+      let node = new TenonTagCreater(name)
+
+      if (item.attrs) {
+        const attrs = item.attrs
+        for (const key in attrs) {
+          const isUnEffAttr = (isTenonTextTag(name) && !isTextAttrs(key)) || (name === 'image' && !isImageAttrs(key)) || (name === 'a' && !isAAttrs(key))
+          if (isUnEffAttr) {
+            console.warn(`This ${key} attribute is not supported for ${name} tags contained in rich-text`)
+          } else {
+            node[key] = attrs[key]
+          }
+        }
+      }
+      item.children.length && htmlTranStr(item.children, space, node)
+      richTextArray.push(node)
+    } else {
+      console.warn(`the rich-text is not support ${name} tag`)
+    }
+  })
+  return richTextArray
+}

package/lib/runtime/components/tenon/getInnerListeners.js

@@ -0,0 +1,292 @@
+import { isEmptyObject } from './util'
+
+const tapEvents = [
+  'onTouchstart',
+  'onTouchmove',
+  'onTouchcancel',
+  'onTouchend',
+  'onLongtap'
+]
+
+function createTouch (context, hasLongTap, __mpxTapInfo) {
+  return ({
+    onTouch (e) {
+      // 用touch模拟longtap
+      switch (e.state) {
+        case 1:
+          context.$emit('touchstart', e)
+          __mpxTapInfo.detail = {
+            x: e.position.x,
+            y: e.position.y
+          }
+          __mpxTapInfo.startTimer = null
+
+          if (hasLongTap) {
+            __mpxTapInfo.startTimer = setTimeout(() => {
+              if (hasLongTap) {
+                const re = inheritEvent(
+                  'longtap',
+                  e,
+                  __mpxTapInfo.detail
+                )
+                context.$emit('longtap', re)
+                __mpxTapInfo.startTimer = null
+              }
+            }, 350)
+          }
+
+          break
+        case 2:
+          context.$emit('touchmove', e)
+          const tapDetailInfo = __mpxTapInfo.detail || {}
+          const currentPageX = e.position.x
+          const currentPageY = e.position.y
+          if (
+            Math.abs(currentPageX - tapDetailInfo.x) > 1 ||
+            Math.abs(currentPageY - tapDetailInfo.y) > 1
+          ) {
+            __mpxTapInfo.startTimer &&
+              clearTimeout(__mpxTapInfo.startTimer)
+            __mpxTapInfo.startTimer = null
+          }
+          break
+        case 3:
+          context.$emit('touchend', e)
+          __mpxTapInfo.startTimer &&
+            clearTimeout(__mpxTapInfo.startTimer)
+          __mpxTapInfo.startTimer = null
+          break
+        case 4:
+          context.$emit('touchcancel', e)
+          break
+      }
+    }
+  })
+}
+
+function processModel (listeners, context) {
+  // 该函数只有wx:model的情况下才调用，而且默认e.detail.value有值
+  // 该函数必须在产生merge前执行
+  // todo 此处对于$attrs的访问会导致父组件更新时子组件必然更新，暂时用短路效应避免影响，待优化
+  // todo 访问$listeners也会导致上述现象，但是为了事件代理还必须访问$listeners，待后续思考处理
+
+  const modelEvent = context.$attrs.mpxModelEvent
+  if (modelEvent) {
+    // 对于modelEvent，内部获得时间后向外部转发，触发外部listener的同时转发为mpxModel事件
+    listeners[modelEvent] = function (e) {
+      context.$emit(modelEvent, e)
+      context.$emit('mpxModel', e)
+    }
+    // 内部listener不需要mpxModel
+    delete listeners.mpxModel
+  }
+}
+
+function mergeListeners (listeners, otherListeners, options = {}, context, __mpxTapInfo) {
+  if (!otherListeners) {
+    return
+  }
+  // "onTouchstart",
+  // "onTouchmove",
+  // "onTouchcancel",
+  // "onTouchend",
+  // "onLongtap",
+
+  // 都依赖touch事件 如果listener没有touch事件 如果是force需要强行添加一个touch事件 longTap需要根据context
+  // 特殊处理
+  const listenerMap = {}
+  tapEvents.forEach((eventName) => {
+    if (listeners[eventName]) {
+      listenerMap[eventName] = true
+      delete listeners[eventName]
+    }
+  })
+  // const otherListenerKeys = Object.keys(otherListeners)
+  // for (let key of otherListenerKeys) {
+
+  // }
+
+  Object.keys(otherListeners).forEach((key) => {
+    const listener = otherListeners[key]
+    let rawListener
+    if (tapEvents.includes(key)) {
+      // 判断onTouch是否存在 若存在 则直接处理
+      rawListener = listeners['onTouch']
+
+      if (!rawListener && !options.force) {
+        return
+      } else if (!rawListener && options.force) {
+        // 创建一个touh事件 并赋值
+        listeners['onTouch'] = createTouch(context, listenerMap.onLongtap, __mpxTapInfo).onTouch
+        rawListener = listeners['onTouch']
+      }
+      // 事件处理 onTouchstart 1 onTouchmove 2 onTouchend 3 onTouchcancel 4
+      listeners['onTouch'] = function (e) {
+        // const thatKey = key
+        let timer = null
+        if (key === 'onLongtap') {
+          if (e.state === 1) {
+            // start
+            timer = setTimeout(
+              () => {
+                listener.call(this, e)
+              },
+              options.before ? 340 : 360
+            )
+          } else if (e.state === 3) {
+            timer && clearTimeout(timer)
+            timer = null
+          }
+        } else {
+          if (options.before) {
+            if (key === 'onTouchstart' && e.state === 1) {
+              listener.call(this, e)
+            } else if (key === 'onTouchmove' && e.state === 2) {
+              listener.call(this, e)
+            } else if (key === 'onTouchend' && e.state === 3) {
+              listener.call(this, e)
+            } else if (key === 'onTouchcancel' && e.state === 4) {
+              listener.call(this, e)
+            }
+            rawListener.call(this, e)
+          } else {
+            rawListener.call(this, e)
+            if (key === 'onTouchstart' && e.state === 1) {
+              listener.call(this, e)
+            } else if (key === 'onTouchmove' && e.state === 2) {
+              listener.call(this, e)
+            } else if (key === 'onTouchend' && e.state === 3) {
+              listener.call(this, e)
+            } else if (key === 'onTouchcancel' && e.state === 4) {
+              listener.call(this, e)
+            }
+          }
+        }
+      }
+    } else {
+      rawListener = listeners[key]
+
+      if (!rawListener) {
+        if (options.force) {
+          listeners[key] = listener
+        }
+      } else {
+        listeners[key] = function (e) {
+          if (options.before) {
+            listener.call(this, e)
+            rawListener.call(this, e)
+          } else {
+            rawListener.call(this, e)
+            listener.call(this, e)
+          }
+        }
+      }
+    }
+  })
+}
+// 没有tap 用touch模拟 touchstart touchmove touchcancel touchend tap longpress langtap
+function processTouchAndLtap (listeners, context, __mpxTapInfo) {
+  const listenerMap = {}
+  tapEvents.forEach((eventName) => {
+    if (listeners[eventName]) {
+      listenerMap[eventName] = true
+      delete listeners[eventName]
+    }
+  })
+  if (isEmptyObject(listenerMap)) return
+  let events = createTouch(context, listenerMap.onLongtap, __mpxTapInfo)
+  mergeListeners(
+    listeners,
+    events,
+    {
+      force: true
+    },
+    context,
+    __mpxTapInfo
+  )
+}
+
+export function extendEvent (e, extendObj = {}) {
+  Object.keys(extendObj).forEach((key) => {
+    Object.defineProperty(e, key, {
+      value: extendObj[key],
+      enumerable: true,
+      configurable: true,
+      writable: true
+    })
+  })
+}
+
+export function inheritEvent (type, oe, detail = {}) {
+  detail = Object.assign({}, oe.detail, detail)
+  const ne = getCustomEvent(type, detail)
+  extendEvent(ne, {
+    timeStamp: oe.timeStamp,
+    target: oe.target,
+    currentTarget: oe.currentTarget,
+    stopPropagation: oe.stopPropagation.bind(oe),
+    preventDefault: oe.preventDefault.bind(oe)
+  })
+  return ne
+}
+
+export function getCustomEvent (type, detail = {}, target = null) {
+  return {
+    type,
+    detail,
+    target,
+    timeStamp: new Date().valueOf()
+  }
+}
+
+function noop () {}
+
+function getListeners (context) {
+  let attrs = context.$attrs
+  let listeners = {}
+  Object.keys(attrs).forEach((v) => {
+    if (/^on[A-Z]/.test(v)) {
+      listeners[v] = attrs[v]
+    }
+  })
+  return listeners
+}
+
+export default function getInnerListeners (context, options = {}) {
+  let {
+    mergeBefore = {},
+    mergeAfter = {},
+    defaultListeners = [],
+    ignoredListeners = []
+  } = options
+  let __mpxTapInfo = {}
+  // 从attrs里面拿到以on开头的所有绑定的事件
+  const listeners = Object.assign({}, getListeners(context))
+  defaultListeners.forEach((key) => {
+    if (!listeners[key]) listeners[key] = noop
+  })
+  const mergeBeforeOptions = {
+    before: true
+  }
+  const mergeAfterOptions = {
+    before: false
+  }
+
+  if (mergeBefore.listeners) {
+    mergeBeforeOptions.force = mergeBefore.force
+    mergeBefore = mergeBefore.listeners
+  }
+
+  if (mergeAfter.listeners) {
+    mergeAfterOptions.force = mergeAfter.force
+    mergeAfter = mergeAfter.listeners
+  }
+  processModel(listeners, context)
+  processTouchAndLtap(listeners, context, __mpxTapInfo)
+  mergeListeners(listeners, mergeBefore, mergeBeforeOptions, context, __mpxTapInfo)
+  mergeListeners(listeners, mergeAfter, mergeAfterOptions, context, __mpxTapInfo)
+  ignoredListeners.forEach((key) => {
+    delete listeners[key]
+  })
+  return listeners
+}