@mpxjs/webpack-plugin 2.7.0-alpha.0 → 2.7.0-alpha.2

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/runtime/stringify.wxs

@@ -93,7 +93,7 @@ function isDef (v) {
   return v !== undefined && v !== null
 }
 
-function stringifyClass (value) {
+function stringifyDynamicClass (value) {
   if (!value) return ''
   if (likeArray(value)) {
     return stringifyArray(value)
@@ -111,7 +111,7 @@ function stringifyArray (value) {
   var res = ''
   var stringified
   for (var i = 0; i < value.length; i++) {
-    if (isDef(stringified = stringifyClass(value[i])) && stringified !== '') {
+    if (isDef(stringified = stringifyDynamicClass(value[i])) && stringified !== '') {
       if (res) res += ' '
       res += stringified
     }
@@ -120,6 +120,8 @@ function stringifyArray (value) {
 }
 
 var mpxDashReg = genRegExp('(.+)MpxDash$')
+// 转义字符在wxs正则中存在平台兼容性问题，用[$]规避使用转义字符
+var mpxDashReplaceReg = genRegExp('[$]', 'g')
 
 function stringifyObject (value) {
   var res = ''
@@ -129,7 +131,7 @@ function stringifyObject (value) {
     if (value[key]) {
       if (res) res += ' '
       if (mpxDashReg.test(key)) {
-        key = hump2dash(mpxDashReg.exec(key)[1])
+        key = mpxDashReg.exec(key)[1].replace(mpxDashReplaceReg, '-')
       }
       res += key
     }
@@ -207,7 +209,7 @@ module.exports = {
     if (typeof staticClass !== 'string') {
       return console.log('Template attr class must be a string!')
     }
-    return concat(staticClass, stringifyClass(dynamicClass))
+    return concat(staticClass, stringifyDynamicClass(dynamicClass))
   },
   stringifyStyle: function (staticStyle, dynamicStyle) {
     var normalizedDynamicStyle = normalizeDynamicStyle(dynamicStyle)

package/lib/selector.js

@@ -9,24 +9,42 @@ module.exports = function (content) {
     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 filePath = this.resourcePath
   const parts = parseComponent(content, {
     filePath,
     needMap: this.sourceMap,
     mode,
-    defs,
     env
   })
-  let part = parts[type] || {}
+  let part = parts[type]
   if (Array.isArray(part)) {
-    part = part[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)
 }

package/lib/style-compiler/index.js

@@ -1,29 +1,29 @@
 const postcss = require('postcss')
 const loadPostcssConfig = require('./load-postcss-config')
+const { MPX_ROOT_VIEW, MPX_APP_MODULE_ID } = require('../utils/const')
 const trim = require('./plugins/trim')
 const rpx = require('./plugins/rpx')
 const vw = require('./plugins/vw')
 const pluginCondStrip = require('./plugins/conditional-strip')
 const scopeId = require('./plugins/scope-id')
 const transSpecial = require('./plugins/trans-special')
-const matchCondition = require('../utils/match-condition')
+const { matchCondition } = require('../utils/match-condition')
 const parseRequest = require('../utils/parse-request')
 
 module.exports = function (css, map) {
   this.cacheable()
   const cb = this.async()
   const { resourcePath, queryObj } = parseRequest(this.resource)
-  const id = queryObj.moduleId || queryObj.mid
   const mpx = this.getMpx()
+  const id = queryObj.moduleId || queryObj.mid || 'm' + mpx.pathHash(resourcePath)
+  const appInfo = mpx.appInfo
   const defs = mpx.defs
   const mode = mpx.mode
-  const packageName = queryObj.packageRoot || mpx.currentPackageRoot || 'main'
-  const componentsMap = mpx.componentsMap[packageName]
-  const pagesMap = mpx.pagesMap
-  const isApp = !(pagesMap[resourcePath] || componentsMap[resourcePath])
+  const isApp = resourcePath === appInfo.resourcePath
   const transRpxRulesRaw = mpx.transRpxRules
   const transRpxRules = transRpxRulesRaw ? (Array.isArray(transRpxRulesRaw) ? transRpxRulesRaw : [transRpxRulesRaw]) : []
 
+  const transRpxFn = mpx.webConfig && mpx.webConfig.transRpxFn
   const testResolveRange = (include = () => true, exclude) => {
     return matchCondition(this.resourcePath, { include, exclude })
   }
@@ -39,15 +39,14 @@ module.exports = function (css, map) {
       },
       config.options
     )
-    // ali环境处理host选择器
+    // ali平台下处理scoped和host选择器
     if (mode === 'ali') {
+      if (queryObj.scoped) {
+        plugins.push(scopeId({ id }))
+      }
       plugins.push(transSpecial({ id }))
     }
 
-    if (queryObj.scoped) {
-      plugins.push(scopeId({ id }))
-    }
-
     plugins.push(pluginCondStrip({
       defs
     }))
@@ -69,7 +68,7 @@ module.exports = function (css, map) {
     }
 
     if (mpx.mode === 'web') {
-      plugins.push(vw)
+      plugins.push(vw({ transRpxFn }))
     }
     // source map
     if (this.sourceMap && !options.map) {
@@ -85,7 +84,7 @@ module.exports = function (css, map) {
       .then(result => {
         // ali环境添加全局样式抹平root差异
         if (mode === 'ali' && isApp) {
-          result.css += '\n.mpx-root-view { display: inline; line-height: normal; }\n'
+          result.css += `\n.${MPX_ROOT_VIEW} { display: initial }\n.${MPX_APP_MODULE_ID} { line-height: normal }`
         }
         if (result.messages) {
           result.messages.forEach(({ type, file }) => {

package/lib/style-compiler/load-postcss-config.js

@@ -16,7 +16,9 @@ module.exports = function loadPostcssConfig (loaderContext, inlineConfig = {}) {
       webpack: loaderContext,
       defs: inlineConfig.defs || {}
     }
-    loaded = load(ctx, config.path, { argv: false }).catch(err => {
+    loaded = load(ctx, config.path, {
+      loaders: { '.json': (_, content) => JSON.parse(content) }
+    }).catch(err => {
       // postcss-load-config throws error when no config file is found,
       // but for us it's optional. only emit other errors
       if (err.message.indexOf('No PostCSS Config found') >= 0) {