2018-08-14 例行上线合并到 master (#179)

* Sync Dev from Master (#157)

* 🙈 还原 eventAction 改动

* ✅ add vue-custom-element test case

* doc 修改

* update example & codelab meta.json

* 切换页面时修改title

* update & clean examples

* update example & codelab

* 调整页面加载事件的发送时机 feat#115

* fix a typo

* 修改hackForAndroidScroll

* hack中需要还原mask

* 修改滑动hack的效果，已经完成了

* 去掉一个调试代码

* 头部隐藏时不展现pageMask

* 修复一个ios10 & safari 的兼容性问题

* Fix invalid hash selector

* fix: add dev branch build

* ISSUE 114 & 132 紧急上线

* remove node 7

* fix readme

* 调整MIP CacheURL判断条件 (#151)

* update MIP.util.fn.isCacheUrl conditions

* update condition

* add index isCacheUrl condition

* change regs for mipcache

* change regs for mipcacheurl,only support subdomain of level1.

* doc修改 (#153)

* Update props.spec.js

* 去掉表格前面的空格 (#156)

* Dev 150 title (#152)

* 修复标题优先级的问题

* 去掉一句测试代码

* 修复title的覆盖逻辑问题

* 修改一个可能导致初始滚动距离错误的问题

* 增加一些魔改的注释

* 增加 performance 和 templates

* 修改刷新范围

* 修改一些注释

* 把百度浏览器也加入其中

* 增加一个容错

* 修改文档的一个配图

* 🐛 fix mixin props (#174)

#170

* fix typo & fix null compile error

* fix: scroll to anchor after all the elements loaded

* fix: 兼容锚点使用 encode 之后的情况

docs/guide/all-sites-mip/page-api.md

@@ -25,7 +25,7 @@ if (isRootPage) {
 
 如果页面需要展现全页面级别的遮罩层（如弹出对话框时），因为 iframe 的关系，并不能遮挡头部，如下图左边所示。
 
-![Page Mask](http://boscdn.bpc.baidu.com/assets/mip2/page/page-mask.png)
+![Page Mask](http://boscdn.bpc.baidu.com/assets/mip2/page/page-mask-2.png)
 
 而调用 `togglePageMask` 方法可以就通知 Page 把头部也进行遮挡，从而完成全页面的遮罩，如上图右边所示。
 

packages/mip/examples/page/index.html

@@ -108,7 +108,9 @@ <h3>共享数据 checklist:</h3>
         <a class="link" href="./data.html" mip-link>Go to Data</a>
     </div>
 
-    <div id="简介2"></div>
+    <a id="anchor" href="./index.html#anchor">Anchor</a>
+    <a id="anchor-markdown-doc-responsive%20%E5%B8%83%E5%B1%80" href="./index.html#anchor-markdown-doc-responsive%20%E5%B8%83%E5%B1%80">Anchor2</a>
+    <a id="anchor-markdown-doc-设置轮播时间间隔" href="#anchor-markdown-doc-%E8%AE%BE%E7%BD%AE%E8%BD%AE%E6%92%AD%E6%97%B6%E9%97%B4%E9%97%B4%E9%9A%94">Anchor3</a>
 
     <br><br>
 
@@ -122,8 +124,8 @@ <h3>共享数据 checklist:</h3>
     <a class="link" href="./test.html" mip-link>Go to Test</a>
     <a class="link" onclick="window.MIP.viewer.open('./tree.html', {isMipLink:true})">Go to Tree (viewer.open)</a>
     <a class="link" href="http://test.baidu.com:8080/examples/page/tree.html" mip-link>Go to Tree(Cross Origin)</a>
-    <a class="link" href="./tree.html" mip-link>Go to Tree</a>
-    
+    <a class="link" href="./tree.html" mip-link data-title="Customized title">Go to Tree</a>
+
 
     <br><br>
     <p>
@@ -141,7 +143,7 @@ <h3>共享数据 checklist:</h3>
 Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.
 Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.
     </p>
-    <div id="简介"></div>
+
     <p>
     Progressive Web Apps are user experiences that have the reach of the web, and are:
 Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.

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

@@ -114,7 +114,7 @@ class Bind {
 
     if (typeof data === 'object') {
       let origin = JSON.stringify(win.m)
-      this.compile.upadteData(JSON.parse(origin))
+      this.compile.updateData(JSON.parse(origin))
       let classified = this.normalize(data)
       // need compile - $set
       if (compile) {

packages/mip/src/components/mip-bind/compile.js

@@ -194,7 +194,7 @@ class Compile {
     }
   }
 
-  upadteData (data) {
+  updateData (data) {
     this.origin = data
   }
 

packages/mip/src/components/mip-bind/observer.js

@@ -4,6 +4,7 @@
  */
 
 import Deps from './deps'
+import {isObject} from './util'
 
 class Observer {
   /*
@@ -25,7 +26,7 @@ class Observer {
    * @param {Object} depMap supporting dependencies map
    */
   walk (data, depMap) {
-    if (typeof data !== 'object' || typeof depMap !== 'object') {
+    if (!isObject(data) || !isObject(depMap)) {
       return
     }
 

packages/mip/src/components/mip-shell/index.js

@@ -283,6 +283,9 @@ class MipShell extends CustomElement {
       borderColor,
       backgroundColor = '#ffffff'
     } = pageMeta.header
+    if (this.targetPageTitle) {
+      title = pageMeta.header.title = this.targetPageTitle
+    }
     let showBackIcon = !pageMeta.view.isIndex
 
     let headerHTML = `
@@ -497,11 +500,14 @@ class MipShell extends CustomElement {
     /**
      * priority of header.title:
      * 1. <a mip-link data-title> (to.meta.title)
-     * 2. <mip-shell> route.meta.header.title (findMetaById(id).header.title)
+     * 2. <mip-shell> targetPageMeta.header.title (findMetaById(id).header.title)
      * 3. <a mip-link></a> innerText (to.meta.defaultTitle)
      */
     let targetPageMeta = fn.extend(true, {}, this.findMetaByPageId(targetPageId))
-    document.title = targetPageMeta.header.title = to.meta.title || targetPageMeta.header.title || to.meta.defaultTitle
+    this.targetPageTitle = to.meta.header
+      ? to.meta.header.title || targetPageMeta.header.title || to.meta.header.defaultTitle
+      : targetPageMeta.header.title
+    document.title = targetPageMeta.header.title = this.targetPageTitle
 
     // Transition direction
     let isForward

packages/mip/src/index.js

@@ -27,6 +27,7 @@ import MipShell from './components/mip-shell/index'
 import registerCustomElement from './register-element'
 import sleepWakeModule from './sleep-wake-module'
 import performance from './performance'
+import templates from './util/templates'
 import mip1PolyfillInstall from './mip1-polyfill/index'
 
 import monitorInstall from './log/monitor'
@@ -101,6 +102,8 @@ let mip = {
   sandbox,
   css: {},
   push,
+  performance,
+  templates,
   prerenderElement: Resources.prerenderElement,
   builtinComponents: {
     // MipShell 应该删除，不符合命名

packages/mip/src/page/index.js

@@ -26,6 +26,7 @@ import {
 
 import {customEmit} from '../util/custom-event'
 import viewport from '../viewport'
+import performance from '../performance'
 import '../styles/mip.less'
 
 /**
@@ -65,7 +66,8 @@ class Page {
     }
 
     try {
-      const anchor = document.getElementById(decodeURIComponent(hash.slice(1)))
+      const anchor = document.getElementById(hash.slice(1)) ||
+        document.getElementById(decodeURIComponent(hash.slice(1)))
 
       /* istanbul ignore next */
       if (anchor) {
@@ -170,8 +172,17 @@ class Page {
     ensureMIPShell()
     this.initPageId()
 
-    // scroll to current hash if exists
-    this.scrollToHash(window.location.hash)
+    /**
+     * scroll to anchor after all the elements loaded
+     * fix: https://github.com/mipengine/mip2/issues/125
+     */
+    performance.on('update', timing => {
+      if (timing.MIPFirstScreen) {
+        // scroll to current hash if exists
+        this.scrollToHash(window.location.hash)
+      }
+    })
+
     window.addEventListener(CUSTOM_EVENT_SCROLL_TO_ANCHOR, (e) => {
       this.scrollToHash(e.detail[0])
     })
@@ -243,10 +254,12 @@ class Page {
       customEmit(window, event.name, event.data)
 
       this.children.forEach(pageMeta => {
-        pageMeta.targetWindow.postMessage({
-          type: MESSAGE_CROSS_ORIGIN,
-          data: event
-        }, '*')
+        if (pageMeta.targetWindow) {
+          pageMeta.targetWindow.postMessage({
+            type: MESSAGE_CROSS_ORIGIN,
+            data: event
+          }, '*')
+        }
       })
     } else {
       window.parent.postMessage({

packages/mip/src/util/dom/rect.js

@@ -142,7 +142,10 @@ export default {
   setScrollTop (top) {
     if (setterElement) {
       setterElement.style.top = top + 'px'
-      setterElement.scrollIntoView(true)
+      // 如果页面头部是一个图片（或者其他后续会改变高度的元素）
+      // 直接执行 scrollIntoView 会导致页面一打开就滚动到半当中，而不是头部
+      // setTimeout 0 可以解决这个问题
+      setTimeout(() => setterElement.scrollIntoView(true), 0)
     } else {
       this.scrollingElement.scrollTop = top
     }

packages/mip/src/viewer.js

@@ -405,14 +405,15 @@ let viewer = {
       if (this.isIframed) {
         this.lockBodyScroll()
 
-        // Fix iphone 5s UC and ios 9 safari bug.
         // While the back button is clicked,
         // the cached page has some problems.
-        // So we are forced to load the page in iphone 5s UC
-        // and iOS 9 safari.
+        // So we are forced to load the page in below conditions:
+        // 1. IOS 8 + UC
+        // 2. IOS 9 & 10 + Safari
+        // 3. IOS 8 & 9 & 10 + UC & BaiduApp & Baidu
         let needBackReload = (iosVersion === '8' && platform.isUc() && screen.width === 320) ||
-          (iosVersion === '9' && platform.isSafari()) ||
-          (iosVersion === '10' && platform.isSafari())
+          ((iosVersion === '9' || iosVersion === '10') && platform.isSafari()) ||
+          ((iosVersion === '8' || iosVersion === '9' || iosVersion === '10') && (platform.isUc() || platform.isBaiduApp() || platform.isBaidu()))
         if (needBackReload) {
           window.addEventListener('pageshow', e => {
             if (e.persisted) {

packages/mip/src/vue-custom-element/utils/props.js

@@ -62,44 +62,50 @@ export function convertAttributeValue (value, type) {
  * 解析 vue 组件的 props
  *
  * @see https://vuejs.org/v2/guide/components-props.html#Prop-Casing-camelCase-vs-kebab-case
- * @param {Array|Object} propsDef props collection
+ * @param {Object} component definition
  * @param {Object} props extract props
  */
-function extractProps (propsDef, props) {
-  if (isArray(propsDef)) {
-    propsDef.forEach(prop => {
-      let camelCaseProp = camelize(prop)
-      props.camelCase.indexOf(camelCaseProp) === -1 && props.camelCase.push(camelCaseProp)
-      props.types[prop] = getPropType(propsDef[camelCaseProp])
+function extractProps (def, propTypes) {
+  if (isArray(def.props)) {
+    def.props.forEach(prop => {
+      let camelizeName = camelize(prop)
+      if (!propTypes[camelizeName]) {
+        propTypes[camelizeName] = getPropType(def.props[prop])
+      }
     })
-  } else if (propsDef && typeof propsDef === 'object') {
-    for (let prop in propsDef) {
-      let camelCaseProp = camelize(prop)
-      props.camelCase.indexOf(camelCaseProp) === -1 && props.camelCase.push(camelCaseProp)
-      props.types[prop] = getPropType(propsDef[camelCaseProp])
+  } else if (typeof def.props === 'object') {
+    for (let prop in def.props) {
+      let camelizeName = camelize(prop)
+      if (!propTypes[camelizeName]) {
+        propTypes[camelizeName] = getPropType(def.props[prop])
+      }
     }
   }
+
+  if (def.extends && def.extends.props) {
+    extractProps(def.extends, propTypes)
+  }
+
+  if (def.mixins) {
+    def.mixins.forEach(mixin => extractProps(mixin, propTypes))
+  }
+
+  return propTypes
 }
 
 // Extract props from component definition, no matter if it's array or object
-export function getProps (componentDefinition = {}) {
+export function getProps (def = {}) {
   let props = {
     camelCase: [],
     hyphenate: [],
     types: {}
   }
 
-  if (componentDefinition.mixins) {
-    componentDefinition.mixins.forEach(mixin => extractProps(mixin.props, props))
-  }
-
-  if (componentDefinition.extends && componentDefinition.extends.props) {
-    extractProps(componentDefinition.extends.props, props)
-  }
-
-  extractProps(componentDefinition.props, props)
+  let propTypes = extractProps(def, {})
 
-  props.camelCase.forEach(prop => props.hyphenate.push(hyphenate(prop)))
+  props.camelCase = Object.keys(propTypes)
+  props.hyphenate = Object.keys(propTypes).map(key => hyphenate(key))
+  props.types = propTypes
 
   return props
 }

packages/mip/test/e2e/cases/index.html

@@ -35,6 +35,7 @@
   <a class="link tree-link" href="./tree.html" mip-link>Go to Tree</a>
   <a class="link api-link" href="./api.html" mip-link>Go to API</a>
   <a class="link page-forward" onclick="window.MIP.viewer.page.forward()">page.forward()</a>
+  <a class="link scroll-to-anchor-link" href="./scroll-to-anchor.html" mip-link>Go to Scroll to Anchor</a>
 
   <mip-page-index></mip-page-index>