Merge pull request #1093 from alibaba/html5-feature-root-downgrade

Html5 feature root downgrade

html5/browser/base/component/index.js

@@ -97,10 +97,6 @@ Component.prototype = {
       this._parentScroller = parent
       return true
     }
-    if (!parent) {
-      console && console.warn('[h5-render] isInScrollable - parent not exist.')
-      return
-    }
   },
 
   // dispatch a specified event on this.node

html5/browser/base/component/operate.js

@@ -4,8 +4,7 @@ import { extend } from '../../utils'
 import { getFilters } from './valueFilter'
 
 export function create (nodeType) {
-  const node = document.createElement(nodeType || 'div')
-  return node
+  return document.createElement(nodeType || 'div')
 }
 
 export function createChildren () {

html5/browser/base/root.js

@@ -29,15 +29,21 @@ function init (Weex) {
 
     this.data = data
 
-    // In some situation the root component should be implemented as
-    // its own type, otherwise it has to be a div component as a root.
+    // The root component should be implemented as a div component, as the scrollable
+    // components have performance issue compare to the original body scroll.
     if (!nodeType) {
+      console.warn(`[h5-render] no nodeType is specified, construct Root use 'div' by default.`)
       nodeType = 'div'
     }
     else if (config.validRoots.indexOf(nodeType) === -1) {
-      console.warn('[h5-render] the root component type \'' + nodeType + '\' is not one of '
-        + 'the types in [' + config.validRoots + '] list. It is auto downgraded '
-        + 'to \'div\'.')
+      console.warn(`[h5-render] the root component type '${nodeType}' is not one of
+the types in [${config.validRoots}] list. It is auto downgraded
+to 'div'.`)
+      nodeType = 'div'
+    }
+    else if (config.downgrade.root) {
+      console.warn(`[h5-render] the root is downgrade to div due to the downgrade
+configuration of weex.`)
       nodeType = 'div'
     }
     else {
@@ -46,9 +52,14 @@ function init (Weex) {
           detectRootHeight(this)
         }.bind(this))
       }
-      !this.data.style.height && (this.data.style.height = '100%')
     }
 
+    if (nodeType === 'div') {
+      data.style.height = ''
+    }
+    else {
+      !data.style.height && (data.style.height = '100%')
+    }
     data.type = nodeType
     const cmp = cm.createElement(data)
     cmp.node.id = id

html5/browser/render/config.js

@@ -3,7 +3,10 @@
 const config = {
   weexVersion: '0.5.0',
   debug: false,
-  validRoots: ['div', 'list', 'vlist', 'scroller']
+  validRoots: ['div', 'list', 'vlist', 'scroller'],
+  downgrade: {
+    // root: true
+  }
 }
 
 export default config

html5/browser/render/index.js

@@ -51,11 +51,26 @@ function noop () {}
 
   // set global 'debug' config to true if there's a debug flag in current url.
   const debug = params['debug']
-  if (debug === true || debug === 'true') {
-    config.debug = true
-  }
+  config.debug = debug === true || debug === 'true'
 
   !config.debug && (console.debug = noop)
+
+  // config for the 'downgrade'.
+  for (const key in params) {
+    if (params.hasOwnProperty(key)) {
+      const match = key.match(/^downgrade_(\w+)$/)
+      if (!match || !match[1]) {
+        continue
+      }
+      const dk = match[1]
+      // downgrade in the config file has the highest priority.
+      if (typeof config.downgrade[dk] === 'boolean') {
+        continue
+      }
+      const dr = params[`downgrade_${dk}`]
+      config.downgrade[dk] = dr === true || dr === 'true'
+    }
+  }
 })()
 
 export default function Weex (options) {

index.html

@@ -15,7 +15,7 @@
 </style>
 <!--flexible-->
 <script>
-!function(a,b){function c(){var b=f.getBoundingClientRect().width;b/i>540&&(b=540*i);var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c}var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={});if(g){console.warn("The page size will be adapted by the <meta> info.");var l=g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){var m=h.getAttribute("content");if(m){var n=m.match(/initial\-dpr=([\d\.]+)/),o=m.match(/maximum\-dpr=([\d\.]+)/);n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))}}if(!i&&!j){var p=(a.navigator.appVersion.match(/android/gi),a.navigator.appVersion.match(/iphone/gi)),q=a.devicePixelRatio;i=p?q>=3&&(!i||i>=3)?3:q>=2&&(!i||i>=2)?2:1:1,j=1/i}if(f.setAttribute("data-dpr",i),!g)if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);else{var r=e.createElement("div");r.appendChild(g),e.write(r.innerHTML)}a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=12*i+"px":e.addEventListener("DOMContentLoaded",function(){e.body.style.fontSize=12*i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b}}(window,window.lib||(window.lib={}));
+!function(N,M){function L(){var a=I.getBoundingClientRect().width;a/F>540&&(a=540*F);var d=a/10;I.style.fontSize=d+"px",D.rem=N.rem=d}var K,J=N.document,I=J.documentElement,H=J.querySelector('meta[name="viewport"]'),G=J.querySelector('meta[name="flexible"]'),F=0,E=0,D=M.flexible||(M.flexible={});if(H){console.warn("The page size will be adapted by the <meta> info.");var C=H.getAttribute("content").match(/initial\-scale=([\d\.]+)/);C&&(E=parseFloat(C[1]),F=parseInt(1/E))}else{if(G){var B=G.getAttribute("content");if(B){var A=B.match(/initial\-dpr=([\d\.]+)/),z=B.match(/maximum\-dpr=([\d\.]+)/);A&&(F=parseFloat(A[1]),E=parseFloat((1/F).toFixed(2))),z&&(F=parseFloat(z[1]),E=parseFloat((1/F).toFixed(2)))}}}if(!F&&!E){var y=N.navigator.userAgent,x=(!!y.match(/android/gi),!!y.match(/iphone/gi)),w=x&&!!y.match(/OS 9_3/),v=N.devicePixelRatio;F=x&&!w?v>=3&&(!F||F>=3)?3:v>=2&&(!F||F>=2)?2:1:1,E=1/F}if(I.setAttribute("data-dpr",F),!H){if(H=J.createElement("meta"),H.setAttribute("name","viewport"),H.setAttribute("content","initial-scale="+E+", maximum-scale="+E+", minimum-scale="+E+", user-scalable=no"),I.firstElementChild){I.firstElementChild.appendChild(H)}else{var u=J.createElement("div");u.appendChild(H),J.write(u.innerHTML)}}N.addEventListener("resize",function(){clearTimeout(K),K=setTimeout(L,300)},!1),N.addEventListener("pageshow",function(b){b.persisted&&(clearTimeout(K),K=setTimeout(L,300))},!1),"complete"===J.readyState?J.body.style.fontSize=12*F+"px":J.addEventListener("DOMContentLoaded",function(){J.body.style.fontSize=12*F+"px"},!1),L(),D.dpr=N.dpr=F,D.refreshRem=L,D.rem2px=function(d){var c=parseFloat(d)*this.rem;return"string"==typeof d&&d.match(/rem$/)&&(c+="px"),c},D.px2rem=function(d){var c=parseFloat(d)/this.rem;return"string"==typeof d&&d.match(/px$/)&&(c+="rem"),c}}(window,window.lib||(window.lib={}));
 </script>
 <script src="./dist/browser.js"></script>
 </head>