Feat hummer mode 2.8

.eslintrc.js

@@ -24,7 +24,13 @@ module.exports = {
     __mpx_mode__: 'readonly',
     __mpx_env__: 'readonly',
     getRegExp: 'readonly',
-    getCurrentPages: 'readonly'
+    getCurrentPages: 'readonly',
+    // tenon env
+    Hummer: 'readonly',
+    View: 'readonly',
+    Text: 'readonly',
+    Dialog: 'readonly',
+    __GLOBAL__: 'readonly',
   },
   rules: {
     'no-cond-assign': 0,

README.md

@@ -229,7 +229,7 @@ Mpx的核心设计思路为增强，不同于业内大部分小程序框架将we
 
 ## 交流
 
-提供 微信群 / QQ群 两种交流方式
+提供 微信群 / QQ群 两种交流方式.
 
 #### 添加MPX入群客服等待受邀入群
 

docs-vuepress/desc.md

@@ -6,7 +6,6 @@
 
 已安装依赖vuepress，并已经在package.json中新增写作和部署脚本
 
-
 ``` sh
 # 写作时
 npm run docs:dev

legacy/cli/bin/mpx-init.js

@@ -50,7 +50,9 @@ program
  * Settings.
  */
 
-let template = 'mpx-template'
+// let template = 'mpx-template'
+// todo use branch master
+let template = 'mpx-template#feat_add_tenon'
 const rawName = program.args[0]
 const inPlace = !rawName || rawName === '.'
 const name = inPlace ? path.relative('../', process.cwd()) : rawName

lerna.json

@@ -2,5 +2,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "2.8.25"
+  "version": "2.8.25-alpha.21"
 }

package.json

@@ -3,7 +3,7 @@
   "description": "mpx monorepo",
   "private": true,
   "scripts": {
-    "lerna:publish": "lerna publish from-package --yes",
+    "lerna:publish": "lerna publish from-package --yes --dist-tag alpha",
     "lint": "eslint --ext .js packages/",
     "fix": "eslint --fix --ext .js packages/",
     "test": "jest",
@@ -14,6 +14,7 @@
   "devDependencies": {
     "@babel/core": "^7.8.7",
     "@babel/eslint-parser": "^7.18.9",
+    "@babel/preset-env": "^7.20.2",
     "@docsearch/css": "^3.0.0",
     "@docsearch/js": "^3.0.0",
     "@testing-library/jest-dom": "^4.2.4",
@@ -31,6 +32,7 @@
     "jest": "^27.2.0",
     "lerna": "^3.4.3",
     "typescript": "^4.1.3",
+    "vue": "^2.7.14",
     "vuepress": "^1.9.7"
   }
 }

packages/api-proxy/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/api-proxy",
-  "version": "2.8.8",
+  "version": "2.8.25-alpha.21",
   "description": "convert miniprogram API at each end",
   "module": "src/index.js",
   "types": "@types/index.d.ts",

packages/api-proxy/src/common/js/utils.js

@@ -52,7 +52,7 @@ const handleSuccess = (opts, getOptions = noop, thisObj) => {
 
 function genFromMap () {
   const result = {}
-  const platforms = ['wx', 'ali', 'swan', 'qq', 'tt', 'web', 'qa', 'jd', 'dd']
+  const platforms = ['wx', 'ali', 'swan', 'qq', 'tt', 'web', 'tenon', 'qa', 'jd', 'dd']
   platforms.forEach((platform) => {
     result[`__mpx_src_mode_${platform}__`] = platform
   })

packages/api-proxy/src/common/stylus/Modal.tenon.styl

@@ -0,0 +1,42 @@
+  .__mpx_modal_box__
+    width 80%
+    max-width 600hm
+    background #FFFFFF
+    overflow hidden
+    text-align center
+    padding-top 30hm
+    border-radius 15px
+    .__mpx_modal_title_view__
+      padding-left 20hm
+      padding-right 20hm
+    .__mpx_modal_title__
+      font-size 26hm
+      text-align center
+      color #000000
+    .__mpx_modal_content_view__
+      padding-top 10hm
+      padding-left 20hm
+      padding-right 20hm
+    .__mpx_modal_content__
+      font-size 24hm
+      color #808080
+      text-line-clamp 3
+      text-align center
+      line-spacing-multi 1.2
+    .__mpx_modal_btns__
+      display flex
+      height: 80hm
+      margin-top 25hm
+      border-top 1px solid rgba(0,0,0,0.2)
+    .__mpx_modal_cancel__
+      flex 1
+      font-size 26hm
+      text-align center
+      font-weight bold
+    .__mpx_modal_confirm__
+      flex 1
+      font-size 26hm
+      text-align center
+      font-weight bold
+    .__mpx_modal_hide__
+      display none

packages/api-proxy/src/index.tenon.js

@@ -0,0 +1,27 @@
+import * as allApi from './tenon/api'
+import { EventChannel } from './tenon/api/event-channel'
+import { genFromMap } from './common/js'
+
+export default function install (target) {
+  const fromMap = genFromMap()
+
+  global.EventChannel = new EventChannel()
+
+  Object.keys(allApi).forEach(api => {
+    target[api] = function (...args) {
+      if (args.length > 0) {
+        const from = args.pop()
+        if (typeof from !== 'string' || !fromMap[from]) {
+          args.push(from)
+        }
+      }
+
+      return allApi[api].apply(target, args)
+    }
+  })
+}
+export function getProxy () {
+  const apiProxy = {}
+  install(apiProxy)
+  return apiProxy
+}

packages/api-proxy/src/tenon/api/animation/animation.js

@@ -0,0 +1,225 @@
+import { warn } from '../../../common/js'
+class Animation {
+  constructor (options) {
+    this._actions = []
+    this._propMaps = {}
+    this._options = options
+  }
+
+  // 处理size
+  _processSize (size) {
+    if (typeof size === 'number') {
+      return `${size}hm`
+    } else {
+      return size
+    }
+  }
+
+  _collectData (type, value) {
+    this._propMaps[type] = {
+      type: type,
+      value: value
+    }
+  }
+
+  // 不支持
+  right (value) {
+    warn('不支持right方法')
+    return this
+  }
+
+  // 不支持
+  left (value) {
+    warn('不支持left方法')
+    return this
+  }
+
+  // 不支持
+  top (value) {
+    warn('不支持top方法')
+    return this
+  }
+
+  // 不支持
+  bottom (value) {
+    warn('不支持bottom方法')
+    return this
+  }
+
+  width (value) {
+    this._collectData('width', value)
+    return this
+  }
+
+  height (value) {
+    this._collectData('height', value)
+    return this
+  }
+
+  opacity (value) {
+    this._collectData('opacity', parseFloat(value))
+    return this
+  }
+
+  backgroundColor (color) {
+    this._collectData('backgroundColor', color)
+    return this
+  }
+
+  // 不支持
+  matrix (...value) {
+    warn('不支持matrix方法')
+    return this
+  }
+
+  // 不支持
+  matrix3d (...value) {
+    warn('不支持matrix3d方法')
+    return this
+  }
+
+  // 不支持
+  rotate (...value) {
+    warn('不支持rotate方法')
+    return this
+  }
+
+  // 不支持
+  rotate3d (...value) {
+    warn('不支持rotate3d方法')
+    return this
+  }
+
+  rotateX (value) {
+    this._collectData('rotationX', `${parseFloat(value)}deg`)
+    return this
+  }
+
+  rotateY (value) {
+    this._collectData('rotationY', `${parseFloat(value)}deg`)
+    return this
+  }
+
+  rotateZ (value) {
+    this._collectData('rotationZ', `${parseFloat(value)}deg`)
+    return this
+  }
+
+  scale (...value) {
+    const [x, y = x] = value
+    this._collectData('scaleX', x)
+    this._collectData('scaleY', y)
+    return this
+  }
+
+  // 不支持
+  scale3d (...value) {
+    warn('不支持scale3d方法')
+    return this
+  }
+
+  scaleX (value) {
+    this._collectData('scaleX', value)
+    return this
+  }
+
+  scaleY (value) {
+    this._collectData('scaleY', value)
+    return this
+  }
+
+  // 不支持
+  scaleZ (value) {
+    warn('不支持scaleZ方法')
+    return this
+  }
+
+  // 不支持
+  skew (...value) {
+    warn('不支持skew方法')
+    return this
+  }
+
+  // 不支持
+  skewX (value) {
+    warn('不支持skewX方法')
+    return this
+  }
+
+  // 不支持
+  skewY (value) {
+    warn('不支持skewY方法')
+    return this
+  }
+
+  translate (...value) {
+    const [x = 0, y = 0] = value
+    this._collectData('position', {
+      x: `${parseFloat(x)}hm`,
+      y: `${parseFloat(y)}hm`
+    })
+    return this
+  }
+
+  // 不支持
+  translate3d (...value) {
+    warn('不支持translate3d方法')
+    return this
+  }
+
+  translateX (value) {
+    this._collectData('position', { x: `${parseFloat(value)}hm`, y: 0 })
+    return this
+  }
+
+  translateY (value) {
+    this._collectData('position', { x: `${parseFloat(value)}hm`, y: 0 })
+    return this
+  }
+
+  // 不支持
+  translateZ (value) {
+    warn('不支持tranlateZ方法')
+    return this
+  }
+
+  step (opt) {
+    const option = {}
+    const animates = []
+    if (opt) {
+      Object.assign(option, this._options, opt)
+    } else {
+      Object.assign(option, this._options)
+    }
+    Object.keys(this._propMaps).forEach((item) => {
+      animates.push(this._propMaps[item])
+    })
+    // action  
+    this._actions.push({
+      animates,
+      option
+    })
+    return this
+  }
+
+  export () {
+    const actions = this._actions.slice(0)
+    this._actions.length = 0
+    // 一个action就是一个step
+    const steps = actions.map((v) => {
+      const styles = {}
+      v.animates.forEach(animate => {
+        styles[animate.type] = animate.value
+      })
+      return {
+        ...v.option,
+        styles
+      }
+    })
+    return {
+      steps
+    }
+  }
+}
+
+export default Animation