@mpxjs/webpack-plugin 2.6.115 → 2.7.0-alpha

package/lib/runtime/components/web/mpx-swiper.vue

@@ -41,7 +41,9 @@
     },
     data () {
       return {
-        currentIndex: this.current
+        currentIndex: this.current,
+        currentChildLength: 0,
+        lastChildLength: 0
       }
     },
     computed: {
@@ -81,6 +83,9 @@
         }
       }
     },
+    updated () {
+      this.currentChildLength = this.$children && this.$children.length
+    },
     watch: {
       current (val) {
         if (this.bs) {
@@ -89,6 +94,15 @@
         }
         this.changeSource = ''
         this.goto(val)
+      },
+      currentChildLength(val) {
+        if (val < this.lastChildLength && val < this.currentIndex) {
+          this.goto(0, 0)
+        }
+        if (this.lastChildLength || (!this.lastChildLength && !this.autoplay)) {
+          this.bs && this.bs.refresh()
+        }
+        this.lastChildLength = val
       }
     },
     activated () {
@@ -167,10 +181,11 @@
       refresh () {
         this.bs && this.bs.refresh()
       },
-      goto (index) {
+      goto (index, time) {
         const x = this.vertical ? 0 : index
         const y = this.vertical ? index : 0
-        this.bs && this.bs.goToPage(x, y)
+        const speed = time === 0 ? 0 : this.duration
+        this.bs && this.bs.goToPage(x, y, speed)
       }
     },
     render (createElement) {

package/lib/runtime/i18n.wxs

@@ -6,7 +6,6 @@ function genRegExp (str, flags) {
   }
 }
 
-
 function likeArray (arr) {
   if (!__mpx_wxs__) {
     return Array.isArray(arr)
@@ -23,7 +22,6 @@ function isDef (v) {
   return v !== undefined && v !== null
 }
 
-
 var RE_TOKEN_LIST_VALUE = genRegExp('^[0-9]+')
 var RE_TOKEN_NAMED_VALUE = genRegExp('^[A-Za-z0-9_]+')
 
@@ -40,7 +38,10 @@ function parseMessage (format) {
     var char = format[position++]
     if (char === '{') {
       if (text) {
-        tokens.push({ type: 'text', value: text })
+        tokens.push({
+          type: 'text',
+          value: text
+        })
       }
 
       text = ''
@@ -56,7 +57,10 @@ function parseMessage (format) {
         : isClosed && RE_TOKEN_NAMED_VALUE.test(sub)
           ? 'named'
           : 'unknown'
-      tokens.push({ value: sub, type: type })
+      tokens.push({
+        value: sub,
+        type: type
+      })
     } else if (char === '%') {
       // when found rails i18n syntax, skip text capture
       if (format[(position)] !== '{') {
@@ -67,7 +71,10 @@ function parseMessage (format) {
     }
   }
 
-  text && tokens.push({ type: 'text', value: text })
+  text && tokens.push({
+    type: 'text',
+    value: text
+  })
 
   return tokens
 }
@@ -263,19 +270,24 @@ function exist (messages, locale, key) {
 var messages = {}
 var dateTimeFormats = {}
 var numberFormats = {}
+var locale = 'zh-CN'
+
+function getLocale () {
+  return __mpx_locale__ || locale
+}
 
 function getMessages () {
-  // __mpx_messages__会在编译时通过lib/wxs/wxs-i18n-loader注入
+  // __mpx_messages__会在编译时通过lib/wxs/i18n-loader注入
   return __mpx_messages__ || messages
 }
 
 function getDateTimeFormats () {
-  // __mpx_datetime_formats__会在编译时通过lib/wxs/wxs-i18n-loader注入
+  // __mpx_datetime_formats__会在编译时通过lib/wxs/i18n-loader注入
   return __mpx_datetime_formats__ || dateTimeFormats
 }
 
 function getNumberFormats () {
-  // __mpx_number_formats__会在编译时通过lib/wxs/wxs-i18n-loader注入
+  // __mpx_number_formats__会在编译时通过lib/wxs/i18n-loader注入
   return __mpx_number_formats__ || numberFormats
 }
 
@@ -339,7 +351,15 @@ module.exports = {
 }
 
 if (!__mpx_wxs__) {
-  module.exports.__getMessages = getMessages
-  module.exports.__getDateTimeFormats = getDateTimeFormats
-  module.exports.__getNumberFormats = getNumberFormats
+  if (!global.i18n) {
+    global.i18n = {
+      locale: getLocale(),
+      version: 0
+    }
+    global.i18nMethods = Object.assign(module.exports, {
+      __getMessages: getMessages,
+      __getDateTimeFormats: getDateTimeFormats,
+      __getNumberFormats: getNumberFormats
+    })
+  }
 }

package/lib/runtime/optionProcessor.js

@@ -4,7 +4,7 @@ export default function processOption (
   option,
   ctorType,
   firstPage,
-  componentId,
+  outputPath,
   pageConfig,
   pagesMap,
   componentsMap,
@@ -85,6 +85,51 @@ export default function processOption (
       }
     })
 
+    Vue.filter('transRpxStyle', style => {
+      const defaultTransRpxFn = function (match, $1) {
+        const rpx2vwRatio = +(100 / 750).toFixed(8)
+        return '' + ($1 * rpx2vwRatio) + 'vw'
+      }
+      const transRpxFn = global.__mpxTransRpxFn || defaultTransRpxFn
+      const parsedStyleObj = {}
+      const rpxRegExpG = /\b(\d+(\.\d+)?)rpx\b/g
+      const parseStyleText = (cssText) => {
+        const listDelimiter = /;(?![^(]*\))/g
+        const propertyDelimiter = /:(.+)/
+        if (typeof cssText === 'string') {
+          cssText.split(listDelimiter).forEach((item) => {
+            if (item) {
+              var tmp = item.split(propertyDelimiter)
+              tmp.length > 1 && (parsedStyleObj[tmp[0].trim()] = tmp[1].trim())
+            }
+          })
+        } else if (typeof cssText === 'object') {
+          if (Array.isArray(cssText)) {
+            cssText.forEach(cssItem => {
+              parseStyleText(cssItem)
+            })
+          } else {
+            Object.assign(parsedStyleObj, cssText)
+          }
+        }
+      }
+      const transRpxStyleFn = (val) => {
+        if (typeof val === 'string' && val.indexOf('rpx') > 0) {
+          return val.replace(rpxRegExpG, transRpxFn).replace(/"/g, '')
+        }
+        return val
+      }
+      if (style) {
+        style.forEach(item => {
+          parseStyleText(item)
+          for (let key in parsedStyleObj) {
+            parsedStyleObj[key] = transRpxStyleFn(parsedStyleObj[key])
+          }
+        })
+      }
+      return parsedStyleObj
+    })
+
     const routes = []
 
     for (const pagePath in pagesMap) {
@@ -339,8 +384,8 @@ registered in parent context!`)
     option.mixins = [mixin]
   }
 
-  if (componentId) {
-    option.componentPath = '/' + componentId
+  if (outputPath) {
+    option.componentPath = '/' + outputPath
   }
 
   return option

package/lib/runtime/optionProcessor.tenon.js

@@ -0,0 +1,386 @@
+// import { inBrowser } from '../utils/env'
+
+export default function processOption (
+  option,
+  ctorType,
+  firstPage,
+  componentId,
+  pageConfig,
+  pagesMap,
+  componentsMap,
+  tabBarMap,
+  componentGenerics,
+  genericsInfo,
+  mixin,
+  Vue,
+  VueRouter,
+  i18n
+) {
+  if (ctorType === 'app') {
+    // 对于app中的组件需要全局注册
+    for (const componentName in componentsMap) {
+      if (componentsMap.hasOwnProperty(componentName)) {
+        const component = componentsMap[componentName]
+        Vue.component(componentName, component)
+      }
+    }
+
+    // 注册v-ex-classes自定义指令处理externalClasses
+    // Vue.directive('ex-classes', (el, binding, vnode) => {
+    //   const context = vnode.context
+    //   if (context) {
+    //     const externalClasses = context.$options.externalClasses || []
+    //     const classList = el.classList
+    //     binding.value.forEach((className) => {
+    //       const actualExternalClassNames = context.$attrs[className]
+    //       if (externalClasses.indexOf(className) !== -1 && actualExternalClassNames) {
+    //         classList.remove(className)
+    //         actualExternalClassNames.split(/\s+/).forEach((actualExternalClassName) => {
+    //           if (actualExternalClassName) classList.add(actualExternalClassName)
+    //         })
+    //       }
+    //     })
+    //   }
+    // })
+    // Vue.directive('animation', (el, binding) => {
+    //   const newActions = binding?.value?.actions
+    //   if (el.actions === newActions) {
+    //     Promise.resolve().then(() => {
+    //       Object.assign(el.style, el.lastDynamicStyle)
+    //     })
+    //     return
+    //   }
+    //   el.actions = newActions
+    //   if (typeof el.setAnimation === 'function') {
+    //     el.removeEventListener('transitionend', el.setAnimation, false)
+    //     el.setAnimation = undefined
+    //   }
+    //   el.dynamicStyleQueue = []
+    //   el.lastDynamicStyle = undefined
+    //   if (Array.isArray(newActions) && newActions.length) {
+    //     newActions.forEach((item) => {
+    //       const property = []
+    //       const { animates, option } = item
+    //       // 存储动画需要改变的样式属性
+    //       const dynamicStyle = {
+    //         transform: ''
+    //       }
+    //       animates.forEach((itemAnimation) => {
+    //         switch (itemAnimation.type) {
+    //           case 'style':
+    //             const [key, value] = itemAnimation.args
+    //             dynamicStyle[key] = value
+    //             property.push(key)
+    //             break
+    //           default:
+    //             dynamicStyle.transform += `${itemAnimation.type}(${itemAnimation.args}) `
+    //             if (!property.includes('transform')) {
+    //               property.push('transform')
+    //             }
+    //         }
+    //       })
+    //       Object.assign(dynamicStyle, {
+    //         transition: `${parseInt(option.duration)}ms ${option.timingFunction} ${parseInt(option.delay)}ms`,
+    //         transitionProperty: `${property}`,
+    //         transformOrigin: option.transformOrigin
+    //       })
+    //       el.dynamicStyleQueue.push(dynamicStyle)
+    //     })
+    //     el.setAnimation = function () {
+    //       if (!el.dynamicStyleQueue.length) {
+    //         el.removeEventListener('transitionend', el.setAnimation, false)
+    //         return
+    //       }
+    //       const dynamicStyle = el.dynamicStyleQueue.shift()
+    //       Object.assign(el.style, dynamicStyle)
+    //       el.lastDynamicStyle = dynamicStyle
+    //     }
+    //     // 首次动画属性设置
+    //     setTimeout(el.setAnimation, 0)
+    //     // 在transitionend事件内设置动画样式
+    //     el.addEventListener('transitionend', el.setAnimation, false)
+    //   }
+    // })
+
+    // const routes = []
+
+    // for (const pagePath in pagesMap) {
+    //   if (pagesMap.hasOwnProperty(pagePath)) {
+    //     const page = pagesMap[pagePath]
+    //     routes.push({
+    //       path: '/' + pagePath,
+    //       component: page
+    //     })
+    //   }
+    // }
+
+    // if (routes.length) {
+    //   if (firstPage) {
+    //     routes.push({
+    //       path: '/',
+    //       redirect: '/' + firstPage
+    //     })
+    //   }
+    //   global.__mpxRouter = option.router = new VueRouter({
+    //     routes: routes
+    //   })
+    //   global.__mpxRouter.stack = []
+    //   global.__mpxRouter.needCache = null
+    //   global.__mpxRouter.needRemove = []
+    //   // 处理reLaunch中传递的url并非首页时的replace逻辑
+    //   global.__mpxRouter.beforeEach(function (to, from, next) {
+    //     let action = global.__mpxRouter.__mpxAction
+    //     const stack = global.__mpxRouter.stack
+
+    //     // 处理人为操作
+    //     if (!action) {
+    //       if (stack.length > 1 && stack[stack.length - 2].path === to.path) {
+    //         action = {
+    //           type: 'back',
+    //           delta: 1
+    //         }
+    //       } else {
+    //         action = {
+    //           type: 'to'
+    //         }
+    //       }
+    //     }
+
+    //     const pageInRoutes = routes.some(item => item.path === to.path)
+    //     if (!pageInRoutes) {
+    //       if (stack.length < 1) {
+    //         if (global.__mpxRouter.app.$options.onPageNotFound) {
+    //           // onPageNotFound，仅首次进入时生效
+    //           global.__mpxRouter.app.$options.onPageNotFound({
+    //             path: to.path,
+    //             query: to.query,
+    //             isEntryPage: true
+    //           })
+    //           return
+    //         } else {
+    //           console.warn(`[Mpx runtime warn]: the ${to.path} path does not exist in the application，will redirect to the home page path ${firstPage}`)
+    //           return next({
+    //             path: firstPage,
+    //             replace: true
+    //           })
+    //         }
+    //       } else {
+    //         let methods = ''
+    //         switch (action.type) {
+    //           case 'to':
+    //             methods = 'navigateTo'
+    //             break
+    //           case 'redirect':
+    //             methods = 'redirectTo'
+    //             break
+    //           case 'back':
+    //             methods = 'navigateBack'
+    //             break
+    //           case 'reLaunch':
+    //             methods = 'reLaunch'
+    //             break
+    //           default:
+    //             methods = 'navigateTo'
+    //         }
+    //         throw new Error(`${methods}:fail page "${to.path}" is not found`)
+    //       }
+    //     }
+
+    //     const insertItem = {
+    //       path: to.path
+    //     }
+    //     // 构建历史栈
+    //     switch (action.type) {
+    //       case 'to':
+    //         stack.push(insertItem)
+    //         global.__mpxRouter.needCache = insertItem
+    //         break
+    //       case 'back':
+    //         global.__mpxRouter.needRemove = stack.splice(stack.length - action.delta, action.delta)
+    //         break
+    //       case 'redirect':
+    //         global.__mpxRouter.needRemove = stack.splice(stack.length - 1, 1, insertItem)
+    //         global.__mpxRouter.needCache = insertItem
+    //         break
+    //       case 'switch':
+    //         if (!action.replaced) {
+    //           action.replaced = true
+    //           return next({
+    //             path: action.path,
+    //             replace: true
+    //           })
+    //         } else {
+    //           // 将非tabBar页面remove
+    //           let tabItem = null
+    //           global.__mpxRouter.needRemove = stack.filter((item) => {
+    //             if (tabBarMap[item.path.slice(1)]) {
+    //               tabItem = item
+    //               return false
+    //             }
+    //             return true
+    //           })
+    //           if (tabItem) {
+    //             global.__mpxRouter.stack = [tabItem]
+    //           } else {
+    //             global.__mpxRouter.stack = [insertItem]
+    //             global.__mpxRouter.needCache = insertItem
+    //           }
+    //         }
+    //         break
+    //       case 'reLaunch':
+    //         if (!action.replaced) {
+    //           action.replaced = true
+    //           return next({
+    //             path: action.path,
+    //             query: {
+    //               reLaunchCount: action.reLaunchCount
+    //             },
+    //             replace: true
+    //           })
+    //         } else {
+    //           global.__mpxRouter.needRemove = stack
+    //           global.__mpxRouter.stack = [insertItem]
+    //           global.__mpxRouter.needCache = insertItem
+    //         }
+    //     }
+    //     next()
+    //   })
+    //   // 处理visibilitychange时触发当前活跃页面组件的onshow/onhide
+    //   if (inBrowser) {
+    //     // const errorHandler = function (e) {
+    //     //   if (global.__mpxAppCbs && global.__mpxAppCbs.error) {
+    //     //     global.__mpxAppCbs.error.forEach((cb) => {
+    //     //       cb(e)
+    //     //     })
+    //     //   }
+    //     // }
+    //     // Vue.config.errorHandler = errorHandler
+    //     // window.addEventListener('error', errorHandler)
+    //     // window.addEventListener('unhandledrejection', event => {
+    //     //   errorHandler(event.reason)
+    //     // })
+    //     // document.addEventListener('visibilitychange', function () {
+    //     //   const vnode = global.__mpxRouter && global.__mpxRouter.__mpxActiveVnode
+    //     //   if (vnode && vnode.componentInstance) {
+    //     //     const currentPage = vnode.tag.endsWith('mpx-tab-bar-container') ? vnode.componentInstance.$refs.tabBarPage : vnode.componentInstance
+    //     //     if (document.hidden) {
+    //     //       if (global.__mpxAppCbs && global.__mpxAppCbs.hide) {
+    //     //         global.__mpxAppCbs.hide.forEach((cb) => {
+    //     //           cb()
+    //     //         })
+    //     //       }
+    //     //       if (currentPage) {
+    //     //         currentPage.mpxPageStatus = 'hide'
+    //     //         currentPage.onHide && currentPage.onHide()
+    //     //       }
+    //     //     } else {
+    //     //       if (global.__mpxAppCbs && global.__mpxAppCbs.show) {
+    //     //         global.__mpxAppCbs.show.forEach((cb) => {
+    //     //           // todo 实现app.onShow参数
+    //     //           /* eslint-disable standard/no-callback-literal */
+    //     //           cb({})
+    //     //         })
+    //     //       }
+    //     //       if (currentPage) {
+    //     //         currentPage.mpxPageStatus = 'show'
+    //     //         currentPage.onShow && currentPage.onShow()
+    //     //       }
+    //     //     }
+    //     //   }
+    //     // })
+    //     // 初始化length
+    //     // global.__mpxRouter.__mpxHistoryLength = global.history.length
+    //   }
+    // }
+
+    // if (i18n) {
+    //   option.i18n = i18n
+    // }
+  } else {
+    // 局部注册页面和组件中依赖的组件
+    for (const componentName in componentsMap) {
+      if (componentsMap.hasOwnProperty(componentName)) {
+        const component = componentsMap[componentName]
+        if (!option.components) {
+          option.components = {}
+        }
+        option.components[componentName] = component
+      }
+    }
+
+    //     if (genericsInfo) {
+    //       const genericHash = genericsInfo.hash
+    //       global.__mpxGenericsMap[genericHash] = {}
+    //       Object.keys(genericsInfo.map).forEach((genericValue) => {
+    //         if (componentsMap[genericValue]) {
+    //           global.__mpxGenericsMap[genericHash][genericValue] = componentsMap[genericValue]
+    //         } else {
+    //           console.log(option)
+    //           console.warn(`[Mpx runtime warn]: generic value "${genericValue}" must be
+    // registered in parent context!`)
+    //         }
+    //       })
+    //     }
+
+    // if (componentGenerics) {
+    //   option.props = option.props || {}
+    //   option.props.generichash = String
+    //   Object.keys(componentGenerics).forEach((genericName) => {
+    //     if (componentGenerics[genericName].default) {
+    //       option.props[`generic${genericName}`] = {
+    //         type: String,
+    //         default: `${genericName}default`
+    //       }
+    //     } else {
+    //       option.props[`generic${genericName}`] = String
+    //     }
+    //   })
+    // }
+
+    if (ctorType === 'page') {
+      (option.mixins ? option.mixins : (option.mixins = [])).push({
+        // cache page instance in tenon
+        created () {
+          global.__currentPageInstance = this
+        }
+      })
+      option.__mpxPageConfig = Object.assign({}, global.__mpxPageConfig, pageConfig)
+    }
+  }
+
+  if (mixin) {
+    if (option.mixins) {
+      option.mixins.push(mixin)
+    } else {
+      option.mixins = [mixin]
+    }
+  }
+
+  if (componentId) {
+    option.componentPath = '/' + componentId
+  }
+
+  return option
+}
+
+export function getComponent (component, extendOptions) {
+  component = component.__esModule ? component.default : component
+  // eslint-disable-next-line
+  if (extendOptions) Object.assign(component, extendOptions)
+  return component
+}
+
+export function getWxsMixin (wxsModules) {
+  if (!wxsModules) return {}
+  return {
+    created () {
+      Object.keys(wxsModules).forEach((key) => {
+        if (key in this) {
+          console.error(`[Mpx runtime error]: The wxs module key [${key}] exist in the component/page instance already, please check and rename it!`)
+        } else {
+          this[key] = wxsModules[key]
+        }
+      })
+    }
+  }
+}

package/lib/selector.js

@@ -1,31 +1,50 @@
 const parseComponent = require('./parser')
-const loaderUtils = require('loader-utils')
-const getMainCompilation = require('./utils/get-main-compilation')
+const parseRequest = require('./utils/parse-request')
 
 module.exports = function (content) {
   this.cacheable()
-  const mainCompilation = getMainCompilation(this._compilation)
-  const mpx = mainCompilation.__mpx__
+  // todo 移除mpx访问依赖，支持thread-loader
+  const mpx = this.getMpx()
   if (!mpx) {
     return content
   }
+  const { queryObj } = parseRequest(this.resource)
+  const ctorType = queryObj.ctorType
+  const type = queryObj.type
+  const index = queryObj.index || 0
   const mode = mpx.mode
   const env = mpx.env
-  const defs = mpx.defs
-  const query = loaderUtils.getOptions(this) || {}
   const filePath = this.resourcePath
   const parts = parseComponent(content, {
     filePath,
     needMap: this.sourceMap,
     mode,
-    defs,
     env
   })
-  let part = parts[query.type] || {}
+  let part = parts[type]
   if (Array.isArray(part)) {
-    part = part[query.index] || {
-      content: ''
+    part = part[index]
+  }
+  if (!part) {
+    let content = ''
+    // 补全js内容
+    if (type === 'script') {
+      switch (ctorType) {
+        case 'app':
+          content += 'import {createApp} from "@mpxjs/core"\n' +
+            'createApp({})\n'
+          break
+        case 'page':
+          content += 'import {createPage} from "@mpxjs/core"\n' +
+            'createPage({})\n'
+          break
+        case 'component':
+          content += 'import {createComponent} from "@mpxjs/core"\n' +
+            'createComponent({})\n'
+      }
     }
+    part = { content }
   }
+  part = part || { content: '' }
   this.callback(null, part.content, part.map)
 }