8.27 核心上线 (#690)

* 单页跳转透传 hash

* add cambrian logo and title

* add cambrian logo and title

* fixed: 修复 iOS 百度 APP 下的页面无法滚动的问题

* [feat] MIP 交互机制升级 (#656)

* add parser

* 添加全局行为

* 增加 event 语法规则

* 添加 navigateTo，fix code

* rewrite mip event

* finish mip event parse

* add visitor

* update

* add arrow

* fix property & callexpression bug

* 整合全局方法

* fix callexpression bug

* 调整代码

* update code

* fix objectexpression bug

* update whitelist

* update test case

* add test case

* modify test case

* add DOM

* 修复 Identifier bug

* 修复 Identifier bug

* add mip-action

* update code

* add argument scope

* 修改路径

* update path

* 打通 action 数据传递

* fix mdata bug

* fix element action bug

* 增加兼容逻辑

* 重写 mip-bind 方法

* update code

* add setData parse fallback

* update bindStyle

* update bindStyle

* update bindStyle

* 增加 watch

* 增加 input  的双向绑定

* 删除无用文件

* 修改 mip-bin 入口

* update code

* 拆分 bind.js

* 拆分 mip-bind/bind.js

* add input global event

* update event action spec

* 修复 style binding

* remove only

* update input global event and toggleVisibility

* 去除 mip-shell/render.js 调用 MIP. 的逻辑

* change lexer from class to function

* add test page

* 优化 lexer 机制

* 修改 lexer 策略

* update test page

* update unit test

* 补 testcase

* 补全 testcase

* 修改 ArrayLiteral 对最后一个 comma 的处理

* 增加测试描述

* add unit test

* add complex function testcase

* fix scrollTO hidden element

* fix can not find mip1 custom element action

* 修复 setData 接收 Vue 响应式对象时疯狂报错的问题

* fix isObject

* 修复 mip-bind 覆盖 MIP.setData 的bug

* 修复  lgtm 所提示的循环中使用 splice 的问题

* fix lgtm alerts

* 修复 bind & vnavigateTo 在 IOS8 下面无法正常工作的兼容性 bug

*  移除 mip-img popup 对 loaded 的筛选 (#668)

* 移除 mip-img popup 对 loaded 的筛选

* fix: hash 锚点追加的问题&pc 页面空白问题&添加百度 APP  iOS 通信功能

* fix: hash 锚点追加的问题&pc 页面空白问题&添加百度 APP  iOS 通信功能

* fix: hash 锚点追加的问题&pc 页面空白问题&添加百度 APP  iOS 通信功能

* fix: hash 锚点追加的问题&pc 页面空白问题&添加百度 APP  iOS 通信功能

* 修复 scrollToHash 当锚点的祖先存在�定位元素时不能滚动到锚点的问题 (#675)

* [feat] mip-bind 功能升级 (#685)

* add scoped mip-data

* update mip-bind dom diff

* 增加 mip-data 的 refresh

* update dom watch

* update dom watcher

* change scoped to scope

* 修复部分 test case

* 优化报错信息

* fix docs

* 增加单测覆盖率

* 补充 testcase

* 新增 mip-data fetchjsonp 支持

* 去掉 mip-data 的 JSONP 支持

Author: clark-t

docs/docs/interactive-mip/data-binding/global-data-definition.md

@@ -206,7 +206,7 @@ MIP 提供 SPA 的整站沉浸式的体验，如果要打造复杂的业务场
 2. 如果要修改的数据字段仅为页面数据，将不影响共享数据
 
     如：在 C 页面调用
-    `MIP.setData({'name': 'name-c'})`
+    `MIP.setData({'name': 'new-c'})`
 
     此时 C 页面可用的数据源为
     ```json

docs/docs/interactive-mip/data-binding/mip-bind.md

@@ -247,13 +247,13 @@ export default {
     let selected = MIP.getData('selected')
     let index = selected.indexOf(newVal)
 
-    if (index) {
+    if (index !== -1) {
       selected.splice(index, 1)
     } else {
-      selected.push(index)
+      selected.push(newVal)
     }
 
-    MIP.setData('selectedStr', selected.join(','))
+    MIP.setData({'selectedStr': selected.join(',')})
   })
 </mip-script>
 ```

packages/mip/src/components/index.js

@@ -12,6 +12,7 @@ import MipCarousel from './mip-carousel'
 import MipIframe from './mip-iframe'
 import MipPix from './mip-pix'
 import mipBindInit from './mip-bind/init'
+import MipDataWatch from './mip-bind/mip-data-watch'
 import MipData from './mip-bind/mip-data'
 import MipShell from './mip-shell/index'
 import MipFixed from './mip-fixed/index'
@@ -34,7 +35,7 @@ export default {
     registerElement('mip-video', MipVideo)
     registerElement('mip-fixed', MipFixed)
     mipBindInit()
-    // new MipBind()
+    registerElement('mip-data-watch', MipDataWatch)
     registerElement('mip-data', MipData)
     isMIPShellDisabled() || registerElement('mip-shell', MipShell)
   }

packages/mip/src/components/mip-bind/binding-attr.js

@@ -28,12 +28,10 @@ export function bindingAttr (node, key, value, oldValue) {
   }
 
   let attr = key.slice(prefixLen)
-
   let prop = typeof value === 'object' ? JSON.stringify(value) : value
   if (prop === oldValue) {
     return prop
   }
-
   if (prop === '' || prop === undefined) {
     node.removeAttribute(attr)
   } else {
@@ -44,7 +42,6 @@ export function bindingAttr (node, key, value, oldValue) {
   } else if (BOOLEAN_ATTRS.indexOf(attr) > -1) {
     node[attr] = !!prop
   }
-
   return prop
 }
 

packages/mip/src/components/mip-bind/binding-dom-watcher.js

@@ -0,0 +1,140 @@
+/**
+ * @file dom-watcher.js
+ * @author clark-t ([email protected])
+ */
+
+import { isElementNode } from '../../util/dom/dom'
+import {
+  traverse
+} from '../../util/fn'
+
+import {
+  isBindingAttr
+} from './binding'
+
+class DOMWatcher {
+  constructor () {
+    this.doms = []
+    this.watchers = []
+  }
+
+  watch (watcher) {
+    this.watchers.push(watcher)
+  }
+
+  add (doms) {
+    for (let dom of doms) {
+      this.doms.push(dom)
+    }
+  }
+
+  remove (doms) {
+    let tmps = doms.slice()
+    for (let i = this.doms.length - 1; i > -1; i--) {
+      for (let j = tmps.length - 1; j > -1; j--) {
+        if (this.doms[i].node === tmps[j].node) {
+          this.doms.splice(i, 1)
+          tmps.splice(j, 1)
+          break
+        }
+      }
+    }
+  }
+
+  update ({add: domList}) {
+    let bindings = []
+
+    for (let dom of domList) {
+      uniqueMerge(bindings, queryBindings(dom))
+    }
+
+    let changed = diffBindingDOMs(this.doms, bindings)
+
+    this.remove(changed.removed)
+    this.add(changed.add)
+
+    for (let watcher of this.watchers) {
+      watcher(changed, this.doms)
+    }
+  }
+}
+
+function uniqueMerge (oldList, newList) {
+  for (let i = 0; i < newList.length; i++) {
+    let len = oldList.length
+    let j = 0
+    for (j = 0; j < len; j++) {
+      if (oldList[j].node === newList[i].node) {
+        break
+      }
+    }
+    if (j === len) {
+      oldList.push(newList[i])
+    }
+  }
+  return oldList
+}
+
+function createBindingNodeWrapper (node, attrs) {
+  let wrapper = { node, attrs }
+  if (attrs) {
+    wrapper.keys = Object.keys(attrs)
+  }
+  return wrapper
+}
+
+function queryBindings (root) {
+  let results = []
+  traverse(root, node => {
+    /* istanbul ignore if */
+    if (!isElementNode(node)) {
+      return
+    }
+    let attrs = queryBindingAttrs(node)
+    attrs && results.push(createBindingNodeWrapper(node, attrs))
+    if (node.children) {
+      return Array.from(node.children)
+    }
+  })
+  return results
+}
+
+function queryBindingAttrs (node) {
+  let attrs
+  for (let i = 0; i < node.attributes.length; i++) {
+    let attr = node.attributes[i]
+    if (!isBindingAttr(attr.name)) {
+      continue
+    }
+    attrs = attrs || {}
+    attrs[attr.name] = {expr: attr.value}
+  }
+  return attrs
+}
+
+function diffBindingDOMs (storeList, newList) {
+  let output = {
+    removed: [],
+    add: newList.slice()
+  }
+
+  for (let i = storeList.length - 1; i > -1; i--) {
+    let stored = storeList[i]
+    if (!document.contains(stored.node)) {
+      output.removed.push(stored)
+      continue
+    }
+
+    for (let j = output.add.length - 1; j > -1; j--) {
+      if (stored.node === newList[j].node) {
+        output.add.splice(j, 1)
+        break
+      }
+    }
+  }
+
+  return output
+}
+
+export const instance = new DOMWatcher()
+

packages/mip/src/components/mip-bind/binding-value.js

@@ -0,0 +1,39 @@
+/**
+ * @file binding-value.js
+ * @author clark-t ([email protected])
+ */
+
+import { throttle } from '../../util/fn'
+import { createSetDataObject } from './util'
+
+export function addInputListener (add, store) {
+  const key = 'm-bind:value'
+
+  const FORM_ELEMENTS = [
+    'INPUT',
+    'TEXTAREA',
+    'SELECT'
+  ]
+
+  for (let info of add) {
+    let {node, attrs} = info
+    if (FORM_ELEMENTS.indexOf(node.tagName) === -1) {
+    // if (!FORM_ELEMENTS.includes(node.tagName)) {
+      continue
+    }
+
+    let expression = attrs[key] && attrs[key].expr
+
+    if (!expression) {
+      continue
+    }
+
+    const properties = expression.split('.')
+    const inputThrottle = throttle(function (e) {
+      let obj = createSetDataObject(properties, e.target.value)
+      store.set(obj)
+    }, 100)
+    node.addEventListener('input', inputThrottle)
+  }
+}
+

packages/mip/src/components/mip-bind/data-store.js

@@ -7,6 +7,7 @@ import DataWatcher from './data-watcher'
 import GlobalData from './global-data'
 import { merge, getProperty } from './util'
 import { isObject } from '../../util/fn'
+
 export default class DataStore {
   constructor () {
     const storage = {}