Merge branch 'master' into feat-liner-gradient

.github/workflows/test.yml

@@ -3,6 +3,12 @@ name: test
 on: [push, pull_request]
 
 jobs:
+  tsc:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - run: npm i && npm run tsc:build
+
   lint:
     runs-on: ubuntu-latest
     steps:

packages/api-proxy/src/platform/api/route/index.web.js

@@ -110,7 +110,8 @@ function reLaunch (options = {}) {
       routeCount: ++routeCount,
       replaced: false
     }
-    const delta = router.stack.length - 1
+    // 宿主环境中没有办法统计到webview中的页面跳转，所有给用户开放个userDelta，由用户根据webview中的页面跳转的个数自行传递控制relaunch跳转正确
+    const delta = router.stack.length - 1 + (options.delta || 0)
     // 在需要操作后退时，先操作后退，在beforeEach中基于当前action通过next()进行replace操作，避免部分浏览器的表现不一致
     if (delta > 0) {
       router.go(-delta)

packages/core/@types/index.d.ts

@@ -114,7 +114,7 @@ interface Context {
   refs: ObjectOf<WechatMiniprogram.NodesRef & ComponentIns<{}, {}, {}, {}, []>>
   asyncRefs: ObjectOf<Promise<WechatMiniprogram.NodesRef & ComponentIns<{}, {}, {}, {}, []>>>
 
-  forceUpdate (params?: object, callback?: () => void): void
+  forceUpdate (params?: object, options?: object | (() => void), callback?: () => void): void
 
   selectComponent: ReplaceWxComponentIns['selectComponent']
   selectAllComponents: ReplaceWxComponentIns['selectAllComponents']
@@ -183,7 +183,7 @@ export interface MpxComponentIns {
 
   $watch (expr: string | (() => any), handler: WatchHandler | WatchOptWithHandler, options?: WatchOpt): () => void
 
-  $forceUpdate (params?: object, callback?: () => void): void
+  $forceUpdate (params?: object, options?: object | (() => void), callback?: () => void): void
 
   $nextTick (fn: () => void): void
 

packages/core/src/platform/builtInMixins/pageScrollMixin.web.js

@@ -14,23 +14,21 @@ function refreshMs () {
   }
 }
 
-let loading = null
-
 function showLoading (vm) {
   const { backgroundColor = 'transparent', backgroundTextStyle = 'dark' } = vm.$options.__mpxPageConfig
-  loading = document.createElement('div')
-  loading.className = 'pull-down-loading'
-  loading.style.cssText = `background-color: ${backgroundColor};`
+  vm.__mpxloading = document.createElement('div')
+  vm.__mpxloading.className = 'pull-down-loading'
+  vm.__mpxloading.style.cssText = `background-color: ${backgroundColor};`
   const dot = document.createElement('div')
   dot.className = `dot-flashing ${backgroundTextStyle}`
-  loading.append(dot)
-  vm.$el.prepend(loading)
+  vm.__mpxloading.append(dot)
+  vm.$el.prepend(vm.__mpxloading)
 }
 
 function hideLoading (vm) {
-  if (loading) {
-    vm.$el.removeChild(loading)
-    loading = null
+  if (vm.__mpxloading) {
+    vm.$el.removeChild(vm.__mpxloading)
+    vm.__mpxloading = null
   }
 }
 

packages/core/src/platform/patch/react/getDefaultOptions.ios.js

@@ -416,13 +416,30 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
       usePageStatus(navigation, currentPageId)
 
       useLayoutEffect(() => {
+        const isCustom = pageConfig.navigationStyle === 'custom'
+        let opt = {}
+        if (__mpx_mode__ === 'android') {
+          opt = {
+            statusBarTranslucent: isCustom,
+            statusBarStyle: pageConfig.statusBarStyle, // 枚举值 'auto' | 'dark' | 'light' 控制statusbar字体颜色
+            statusBarColor: isCustom ? 'transparent' : pageConfig.statusBarColor // 控制statusbar背景颜色
+          }
+        } else if (__mpx_mode__ === 'ios') {
+          opt = {
+            headerBackTitleVisible: false
+          }
+        }
+
         navigation.setOptions({
-          headerShown: pageConfig.navigationStyle !== 'custom',
+          headerShown: !isCustom,
+          headerShadowVisible: false,
           headerTitle: pageConfig.navigationBarTitleText || '',
           headerStyle: {
             backgroundColor: pageConfig.navigationBarBackgroundColor || '#000000'
           },
-          headerTintColor: pageConfig.navigationBarTextStyle || 'white'
+          headerTitleAlign: 'center',
+          headerTintColor: pageConfig.navigationBarTextStyle || 'white',
+          ...opt
         })
       }, [])
 

packages/webpack-plugin/lib/platform/style/wx/index.js

@@ -93,7 +93,7 @@ module.exports = function getSpec ({ warn, error }) {
     if (cssVariableExp.test(value) || calcExp.test(value)) return true
     const namedColor = ['transparent', 'aliceblue', 'antiquewhite', 'aqua', 'aquamarine', 'azure', 'beige', 'bisque', 'black', 'blanchedalmond', 'blue', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dimgrey', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'fuchsia', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'gray', 'green', 'greenyellow', 'grey', 'honeydew', 'hotpink', 'indianred', 'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategrey', 'lightsteelblue', 'lightyellow', 'lime', 'limegreen', 'linen', 'magenta', 'maroon', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite', 'navy', 'oldlace', 'olive', 'olivedrab', 'orange', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'purple', 'rebeccapurple', 'red', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'silver', 'skyblue', 'slateblue', 'slategray', 'snow', 'springgreen', 'steelblue', 'tan', 'teal', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat', 'white', 'whitesmoke', 'yellow', 'yellowgreen']
     const valueExp = {
-      number: /^((-?\d+(\.\d+)?)(rpx|px|%|vw|vh)?|hairlineWidth)$/,
+      number: /^((-?(\d+(\.\d+)?|\.\d+))(rpx|px|%|vw|vh)?|hairlineWidth)$/,
       color: new RegExp(('^(' + namedColor.join('|') + ')$') + '|(^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$)|^(rgb|rgba|hsl|hsla|hwb)\\(.+\\)$')
     }
     const type = getValueType(prop)
@@ -256,7 +256,7 @@ module.exports = function getSpec ({ warn, error }) {
   const formatLineHeight = ({ prop, value, selector }) => {
     return verifyValues({ prop, value, selector }) && ({
       prop,
-      value: /^\s*-?\d+(\.\d+)?\s*$/.test(value) ? `${Math.round(value * 100)}%` : value
+      value: /^\s*(-?(\d+(\.\d+)?|\.\d+))\s*$/.test(value) ? `${Math.round(value * 100)}%` : value
     })
   }
 

packages/webpack-plugin/lib/template-compiler/compiler.js

@@ -15,7 +15,7 @@ const { isNonPhrasingTag } = require('../utils/dom-tag-config')
 const setBaseWxml = require('../runtime-render/base-wxml')
 const { parseExp } = require('./parse-exps')
 const shallowStringify = require('../utils/shallow-stringify')
-const { isReact } = require('../utils/env')
+const { isReact, isWeb } = require('../utils/env')
 
 const no = function () {
   return false
@@ -887,7 +887,7 @@ function postMoveBaseDirective (target, source, isDelete = true) {
 }
 
 function stringify (str) {
-  if (mode === 'web') str = str.replace(/'/g, '"')
+  if (isWeb(mode)) str = str.replace(/'/g, '"')
   return JSON.stringify(str)
 }
 
@@ -2051,7 +2051,7 @@ function processWrapTextReact (el) {
 // }
 
 function injectWxs (meta, module, src) {
-  if (runtimeCompile || addWxsModule(meta, module, src) || isReact(mode)) {
+  if (runtimeCompile || addWxsModule(meta, module, src) || isReact(mode) || isWeb(mode)) {
     return
   }
 
@@ -2336,7 +2336,7 @@ function getVirtualHostRoot (options, meta) {
         meta.options = meta.options || {}
         meta.options.virtualHost = true
       }
-      if (mode === 'web' && !hasVirtualHost) {
+      if (isWeb(mode) && !hasVirtualHost) {
         // ali组件根节点实体化
         const rootView = createASTElement('view', [
           {
@@ -2367,44 +2367,32 @@ function getVirtualHostRoot (options, meta) {
         return rootView
       }
     }
-    if (mode === 'web' && ctorType === 'page') {
+    if (isWeb(mode) && ctorType === 'page') {
       return createASTElement('page')
     }
   }
   return getTempNode()
 }
 
 function processShow (el, options, root) {
-  // 开启 virtualhost 全部走 props 传递处理
-  // 未开启 virtualhost 直接绑定 display:none 到节点上
   let { val: show, has } = getAndRemoveAttr(el, config[mode].directive.show)
   if (mode === 'swan') show = wrapMustache(show)
   if (has && show === undefined) {
     error$1(`Attrs ${config[mode].directive.show} should have a value `)
+    return
   }
-  if (hasVirtualHost) {
-    if (ctorType === 'component' && el.parent === root && isRealNode(el)) {
-      if (show !== undefined) {
-        show = `{{${parseMustacheWithContext(show).result}&&mpxShow}}`
-      } else {
-        show = '{{mpxShow}}'
-      }
-    }
-    if (isComponentNode(el, options) && show !== undefined) {
-      if (show === '') {
-        show = '{{false}}'
-      }
-      addAttrs(el, [{
-        name: 'mpxShow',
-        value: show
-      }])
-    } else {
-      if (runtimeCompile) {
-        processShowStyleDynamic(el, show)
-      } else {
-        processShowStyle(el, show)
-      }
+  if (ctorType === 'component' && el.parent === root && isRealNode(el)) {
+    show = has ? `{{${parseMustacheWithContext(show).result}&&mpxShow}}` : '{{mpxShow}}'
+  }
+  if (show === undefined) return
+  if (isComponentNode(el, options)) {
+    if (show === '') {
+      show = '{{false}}'
     }
+    addAttrs(el, [{
+      name: 'mpxShow',
+      value: show
+    }])
   } else {
     if (runtimeCompile) {
       processShowStyleDynamic(el, show)
@@ -2415,15 +2403,13 @@ function processShow (el, options, root) {
 }
 
 function processShowStyle (el, show) {
-  if (show !== undefined) {
-    const showExp = parseMustacheWithContext(show).result
-    let oldStyle = getAndRemoveAttr(el, 'style').val
-    oldStyle = oldStyle ? oldStyle + ';' : ''
-    addAttrs(el, [{
-      name: 'style',
-      value: `${oldStyle}{{${showExp}?'':'display:none;'}}`
-    }])
-  }
+  const showExp = parseMustacheWithContext(show).result
+  let oldStyle = getAndRemoveAttr(el, 'style').val
+  oldStyle = oldStyle ? oldStyle + ';' : ''
+  addAttrs(el, [{
+    name: 'style',
+    value: `${oldStyle}{{${showExp}?'':'display:none;'}}`
+  }])
 }
 
 function processTemplate (el) {
@@ -2610,7 +2596,7 @@ function processElement (el, root, options, meta) {
 
   const transAli = mode === 'ali' && srcMode === 'wx'
 
-  if (mode === 'web') {
+  if (isWeb(mode)) {
     // 收集内建组件
     processBuiltInComponents(el, meta)
     // 预处理代码维度条件编译
@@ -2635,7 +2621,7 @@ function processElement (el, root, options, meta) {
     return
   }
 
-  const pass = isNative || processTemplate(el) || processingTemplate
+  const isTemplate = processTemplate(el) || processingTemplate
 
   // 仅ali平台需要scoped模拟样式隔离
   if (mode === 'ali') {
@@ -2649,42 +2635,40 @@ function processElement (el, root, options, meta) {
   processIf(el)
   processFor(el)
 
-  if (!pass) {
-    processRef(el, options, meta)
+  if (!isNative) {
+    if (!isTemplate) processRef(el, options, meta)
     if (runtimeCompile) {
-      processClassDynamic(el, meta)
-      processStyleDynamic(el, meta)
+      processClassDynamic(el)
+      processStyleDynamic(el)
     } else {
       processClass(el, meta)
       processStyle(el, meta)
     }
     processShow(el, options, root)
     processEvent(el, options)
-    processComponentIs(el, options)
+    if (!isTemplate) processComponentIs(el, options)
   }
 
   processAttrs(el, options)
 }
 
 function closeElement (el, meta, options) {
   postProcessAtMode(el)
-  collectDynamicInfo(el, options, meta)
+  postProcessWxs(el, meta)
 
-  if (mode === 'web') {
-    postProcessWxs(el, meta)
+  if (isWeb(mode)) {
     // 处理代码维度条件编译移除死分支
     postProcessIf(el)
     return
   }
   if (isReact(mode)) {
-    postProcessWxs(el, meta)
     postProcessForReact(el)
     postProcessIfReact(el)
     return
   }
-  const pass = isNative || postProcessTemplate(el) || processingTemplate
-  postProcessWxs(el, meta)
-  if (!pass) {
+
+  const isTemplate = postProcessTemplate(el) || processingTemplate
+  if (!isNative && !isTemplate) {
     if (isComponentNode(el, options) && !hasVirtualHost && mode === 'ali') {
       postProcessAliComponentRootView(el, options, meta)
     }
@@ -2694,6 +2678,7 @@ function closeElement (el, meta, options) {
   if (runtimeCompile) {
     postProcessForDynamic(el, config[mode])
     postProcessIfDynamic(el, config[mode])
+    collectDynamicInfo(el, options, meta)
     postProcessAttrsDynamic(el, config[mode])
   } else {
     postProcessFor(el)
@@ -2796,9 +2781,7 @@ function serialize (root) {
           result += node.text
         }
       }
-      if (node.tag === 'wxs' && mode === 'web') {
-        return result
-      }
+
       if (node.type === 1) {
         if (node.tag !== 'temp-node') {
           result += '<' + node.tag
@@ -2968,11 +2951,11 @@ function processIfConditionsDynamic (el) {
       block: el,
       __exp: el.elseif ? parseExp(el.elseif.exp) : ''
     })
-    removeNode(el)
+    removeNode(el, true)
   }
 }
 
-function processClassDynamic (el, meta) {
+function processClassDynamic (el) {
   const type = 'class'
   const targetType = type
   const dynamicClass = getAndRemoveAttr(el, config[mode].directive.dynamicClass).val
@@ -2995,7 +2978,7 @@ function processClassDynamic (el, meta) {
   }
 }
 
-function processStyleDynamic (el, meta) {
+function processStyleDynamic (el) {
   const type = 'style'
   const targetType = type
   const dynamicStyle = getAndRemoveAttr(el, config[mode].directive.dynamicStyle).val
@@ -3084,17 +3067,15 @@ function postProcessAttrsDynamic (vnode, config) {
 }
 
 function processShowStyleDynamic (el, show) {
-  if (show !== undefined) {
-    const showExp = parseMustacheWithContext(show).result
-    const oldStyle = getAndRemoveAttr(el, 'style').val
-    const displayExp = `${showExp}? '' : "display:none;"`
-    const isArray = oldStyle?.endsWith(']}}')
-    const value = isArray ? oldStyle?.replace(']}}', `,${displayExp}]}}`) : `${oldStyle ? `${oldStyle};` : ''}{{${displayExp}}}`
-    addAttrs(el, [{
-      name: 'style',
-      value: value
-    }])
-  }
+  const showExp = parseMustacheWithContext(show).result
+  const oldStyle = getAndRemoveAttr(el, 'style').val
+  const displayExp = `${showExp}? '' : "display:none;"`
+  const isArray = oldStyle?.endsWith(']}}')
+  const value = isArray ? oldStyle?.replace(']}}', `,${displayExp}]}}`) : `${oldStyle ? `${oldStyle};` : ''}{{${displayExp}}}`
+  addAttrs(el, [{
+    name: 'style',
+    value: value
+  }])
 }
 
 module.exports = {

packages/webpack-plugin/lib/wxml/loader.js

@@ -22,7 +22,7 @@ module.exports = function (content) {
   const { queryObj } = parseRequest(this.resource)
   const hasScoped = false
   const hasComment = false
-  const isNative = true
+  const isNative = false
 
   const mode = mpx.mode
   const localSrcMode = queryObj.mode