@mpxjs/webpack-plugin 2.6.113 → 2.6.114-alpha.0

package/lib/runtime/components/tenon/tenon-text-area.vue

@@ -0,0 +1,64 @@
+
+<script>
+import { h } from "@hummer/tenon-vue";
+import getInnerListeners from "./getInnerListeners";
+
+export default {
+  name: "mpx-textarea",
+  props: {
+    name: String,
+    value: {
+      type: String,
+      default: "",
+    },
+    placeholder: String,
+    disabled: Boolean,
+    maxlength: {
+      type: Number,
+      default: 140,
+    },
+    autoFocus: Boolean,
+    focus: Boolean,
+    cursor: {
+      type: Number,
+      default: -1,
+    },
+    selectionStart: {
+      type: Number,
+      default: -1,
+    },
+    selectionEnd: {
+      type: Number,
+      default: -1,
+    },
+  },
+
+  render() {
+    const data = {
+      class: "mpx-textarea",
+      value: this.value,
+      focus: this.focus,
+      placeholder: this.placeholder,
+      maxLength: this.maxLength,
+      disabled: this.disabled,
+      ...getInnerListeners(this),
+    };
+    return h("textarea", data);
+  },
+  pageConfig: {
+    canScroll: false,
+  },
+  methods: {},
+};
+</script>
+<style lang="stylus">
+.mpx-textarea
+  font inherit
+  cursor auto
+  width 300hm
+  height 150hm
+  display block
+  position relative
+  resize none
+
+</style>

package/lib/runtime/components/tenon/tenon-text.vue

@@ -0,0 +1,64 @@
+
+<script>
+import { h } from "@hummer/tenon-vue";
+import getInnerListeners from "./getInnerListeners";
+
+export default {
+  name: "mpx-text",
+  props: {
+    selectable: {
+      type: Boolean,
+      default: false,
+    },
+    space: {
+      type: String,
+    },
+    decode: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  render() {
+    let text = "";
+    let classNames = ["mpx-text"];
+    const nodes = this.$slots.default();
+    nodes.forEach((item) => {
+      if (item.shapeFlag === 8 && item.children) {
+        text += item.children;
+      }
+    });
+    // hummer不支持 暂时注释
+    // switch (this.space) {
+    //   case "ensp":
+    //   case "emsp":
+    //   case "nbsp":
+    //     text = text.replace(/ /g, `&${this.space};`);
+    //     break;
+    // }
+    return h(
+      "text",
+      {
+        class: classNames,
+        ...getInnerListeners(this),
+      },
+      text
+    );
+  },
+  data() {
+    return {};
+  },
+  beforeCreate() {},
+  pageConfig: {
+    canScroll: false,
+  },
+  methods: {
+  },
+};
+</script>
+<style lang="stylus">
+.mpx-text
+  user-select none
+  &.selectable
+    user-select text
+
+</style>

package/lib/runtime/components/tenon/tenon-view.vue

@@ -0,0 +1,89 @@
+<script>
+import { h } from "@hummer/tenon-vue";
+import getInnerListeners from "./getInnerListeners";
+
+export default {
+  name: "mpx-view",
+  props: {
+    hoverClass: {
+      type: String,
+      default: "none",
+    },
+    hoverStopPropagation: {
+      type: Boolean,
+      default: false,
+    },
+    hoverStartTime: {
+      type: Number,
+      default: 50,
+    },
+    hoverStayTime: {
+      type: Number,
+      default: 400,
+    },
+  },
+  render() {
+    let mergeAfter;
+    if (this.hoverClass && this.hoverClass !== "none") {
+      mergeAfter = {
+        listeners: {
+          onTouchstart: this.handleTouchstart,
+          onTouchend: this.handleTouchend,
+        },
+        force: true,
+      };
+    }
+    return h(
+      "view",
+      {
+        class: this.className,
+        ...getInnerListeners(this, { mergeAfter }),
+      },
+      this.$slots.default()
+    );
+  },
+  data() {
+    return {
+      hover: false,
+    };
+  },
+  computed: {
+    className() {
+      let result = {};
+      if (this.hoverClass && this.hoverClass !== "none" && this.hover) {
+        result = {
+          "mpx-view": true,
+          [this.hoverClass]: true,
+        };
+      } else {
+        result = {
+          "mpx-view": true,
+          [this.hoverClass]: false,
+        };
+      }
+      return result;
+    },
+  },
+  pageConfig: {
+    canScroll: false,
+  },
+  methods: {
+    handleTouchstart(e) {
+      if (e.__hoverStopPropagation) {
+        return;
+      }
+      e.__hoverStopPropagation = this.hoverStopPropagation;
+      clearTimeout(this.startTimer);
+      this.startTimer = setTimeout(() => {
+        this.hover = true;
+      }, this.hoverStartTime);
+    },
+    handleTouchend() {
+      clearTimeout(this.endTimer);
+      this.endTimer = setTimeout(() => {
+        this.hover = false;
+      }, this.hoverStayTime);
+    },
+  },
+};
+</script>

package/lib/runtime/components/tenon/util.js

@@ -0,0 +1,44 @@
+/**
+ @file web运行时组件抹平中需要用到的一些工具方法
+ */
+
+/**
+ * 处理字符串类型的宽高数值，兼容rpx
+ * @param {object | number} size 宽高
+ * @param {object} option 配置项，目前仅支持配置默认值
+ * @param {number} option.default 默认值,当传入的size有问题时返回
+ * @returns {number} 处理后的数字宽高，单位px
+ */
+export function processSize (size, option = {}) {
+  const defaultValue = option.default || 0
+  if (typeof size === 'number') {
+    return size
+  } else if (typeof size === 'string') {
+    const rs = parseInt(size, 10)
+    if (size.indexOf('rpx') !== -1) {
+      // 计算rpx折算回px
+      const width = window.screen.width
+      const finalRs = Math.floor(rs / 750 * width)
+      return finalRs
+    } else {
+      return isNaN(rs) ? defaultValue : rs
+    }
+  } else {
+    return defaultValue
+  }
+}
+
+// 判断对象类型
+export function type (n) {
+  return Object.prototype.toString.call(n).slice(8, -1)
+}
+
+export function isEmptyObject (obj) {
+  if (!obj) {
+    return true
+  }
+  for (let key in obj) {
+    return false
+  }
+  return true
+}

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/template-compiler/compiler.js

@@ -2180,6 +2180,15 @@ function processElement (el, root, options, meta) {
     processComponentGenericsForWeb(el, options, meta)
     return
   }
+  if (mode === 'tenon') {
+    // 收集内建组件
+    processBuiltInComponents(el, meta)
+    // 预处理代码维度条件编译
+    processIfForWeb(el)
+    // processWebExternalClassesHack(el, options)
+    // processComponentGenericsForWeb(el, options, meta)
+    return
+  }
 
   const pass = isNative || processTemplate(el) || processingTemplate
 
@@ -2214,7 +2223,7 @@ function processElement (el, root, options, meta) {
 
 function closeElement (el, meta) {
   postProcessAtMode(el)
-  if (mode === 'web') {
+  if (mode === 'web' || mode === 'tenon') {
     postProcessWxs(el, meta)
     // 处理代码维度条件编译移除死分支
     postProcessIf(el)
@@ -2321,7 +2330,7 @@ function serialize (root) {
           result += node.text
         }
       }
-      if (node.tag === 'wxs' && mode === 'web') {
+      if (node.tag === 'wxs' && (mode === 'web' || mode === 'tenon')) {
         return result
       }
       if (node.type === 1) {

package/lib/template-compiler/trans-dynamic-class-expr.js

@@ -15,7 +15,7 @@ module.exports = function transDynamicClassExpr (expr, { error } = {}) {
           const propertyName = property.key.name || property.key.value
           if (/-/.test(propertyName)) {
             if (/\$/.test(propertyName)) {
-              error(`Dynamic classname [${propertyName}] is not supported, which includes [-] char and [$] char at the same time.`)
+              error && error(`Dynamic classname [${propertyName}] is not supported, which includes [-] char and [$] char at the same time.`)
             } else {
               property.key = t.identifier(propertyName.replace(/-/g, '$$') + 'MpxDash')
             }