Merge pull request #1310 from Meituan-Dianping/feature/platform-opt

smartprograme support

packages/mpvue/index.js

@@ -5505,6 +5505,8 @@ function diffData (vm, data) {
 //   }
 // }
 
+var KEY_SEP = '_';
+
 function getVmData (vm) {
   // 确保当前 vm 所有数据被同步
   var dataKeys = [].concat(
@@ -5533,12 +5535,12 @@ function getParentComKey (vm, res) {
 }
 
 function formatVmData (vm) {
-  var $p = getParentComKey(vm).join(',');
-  var $k = $p + ($p ? ',' : '') + getComKey(vm);
+  var $p = getParentComKey(vm).join(KEY_SEP);
+  var $k = $p + ($p ? KEY_SEP : '') + getComKey(vm);
 
   // getVmData 这儿获取当前组件内的所有数据，包含 props、computed 的数据
   // 改动 vue.runtime 所获的的核心能力
-  var data = Object.assign(getVmData(vm), { $k: $k, $kk: ($k + ","), $p: $p });
+  var data = Object.assign(getVmData(vm), { $k: $k, $kk: ("" + $k + KEY_SEP), $p: $p });
   var key = '$root.' + $k;
   var res = {};
   res[key] = data;

src/platforms/mp/compiler/codegen-swan/babel-plugins.js

@@ -0,0 +1,45 @@
+// babel-plugin-transform-object-to-ternary-operator.js
+
+import * as t from 'babel-types'
+import generate from 'babel-generator'
+import template from 'babel-template'
+import { hyphenate } from 'shared/util'
+
+function getStrByNode (node, onlyStr = false) {
+  if (onlyStr) {
+    return node.value || node.name || ''
+  }
+  return node.type === 'StringLiteral' ? node : t.stringLiteral(node.name || '')
+}
+
+// 把 { key: value } 转换成 [ value ? 'key' : '' ]
+const objectVisitor = {
+  ObjectExpression: function (path) {
+    const elements = path.node.properties.map(propertyItem => {
+      return t.conditionalExpression(propertyItem.value, getStrByNode(propertyItem.key), t.stringLiteral(''))
+    })
+    path.replaceWith(t.arrayExpression(elements))
+  }
+}
+
+export function transformObjectToTernaryOperator (babel) {
+  return { visitor: objectVisitor }
+}
+
+// 把 { key: value } 转换成 'key:' + value + ';'
+const objectToStringVisitor = {
+  ObjectExpression: function (path) {
+    const expression = path.node.properties.map(propertyItem => {
+      const keyStr = getStrByNode(propertyItem.key, true)
+      const key = keyStr ? hyphenate(keyStr) : keyStr
+      const { code: val } = generate(t.ExpressionStatement(propertyItem.value))
+      return `'${key}:' + (${val.slice(0, -1)}) + ';'`
+    }).join('+')
+
+    const p = template(expression)({})
+    path.replaceWith(p.expression)
+  }
+}
+export function transformObjectToString (babel) {
+  return { visitor: objectToStringVisitor }
+}

src/platforms/mp/compiler/codegen-swan/config/astMap.js

@@ -0,0 +1,7 @@
+export default {
+  'if': 's-if',
+  'v-for': 's-for',
+  'alias': 's-for-item',
+  'iterator1': 's-for-index',
+  'key': 's-key'
+}

src/platforms/mp/compiler/codegen-swan/config/config.js

@@ -0,0 +1,3 @@
+export default {
+  virtualTag: ['slot', 'template', 'block']
+}

src/platforms/mp/compiler/codegen-swan/config/wxmlDirectiveMap.js

@@ -0,0 +1,81 @@
+// type：
+// 0, 默认值, 拼接 ${name}={{ ${content} }}
+// 1, 拼接 ${name}
+// 2, 拼接 ${map[key]}={{ '${content}' }}
+// 3, 拼接 {{ ${content} }}
+// 4, 拼接为空字符串
+// 5, 不需要在wxml上表现出来，可直接清除
+
+const noSupport = {
+  type: 4,
+  check: (k, v, errors) => {
+    errors(`不支持此指令: ${k}="${v}"`)
+    return false
+  }
+}
+export default {
+  'v-if': {
+    name: 's-if',
+    type: 2
+  },
+  'v-else-if': {
+    name: 's-elif',
+    type: 2
+  },
+  'v-else': {
+    name: 'w-else',
+    type: 1
+  },
+  'v-text': {
+    name: '',
+    type: 1
+  },
+  'v-html': {
+    name: '',
+    type: 1
+  },
+  'v-on': {
+    name: '',
+    map: {
+      click: 'tap',
+      touchstart: 'touchstart',
+      touchmove: 'touchmove',
+      touchcancel: 'touchcancel',
+      touchend: 'touchend',
+      tap: 'tap',
+      longtap: 'longtap',
+      input: 'input',
+      change: 'change',
+      submit: 'submit',
+      blur: 'blur',
+      focus: 'focus',
+      reset: 'reset',
+      confirm: 'confirm',
+      columnchange: 'columnchange',
+      linechange: 'linechange',
+      error: 'error',
+      scrolltoupper: 'scrolltoupper',
+      scrolltolower: 'scrolltolower',
+      scroll: 'scroll',
+      load: 'load'
+    },
+    type: 2
+  },
+  'v-bind': {
+    name: '',
+    map: {
+      'href': 'url'
+    },
+    type: 3
+  },
+  'href': {
+    name: 'url',
+    type: 2
+  },
+  'v-pre': noSupport,
+  'v-cloak': noSupport,
+  'v-once': {
+    name: '',
+    type: 5
+  }
+}

src/platforms/mp/compiler/codegen-swan/config/wxmlTagMap.js

@@ -0,0 +1,149 @@
+export default {
+  'br': 'view',
+  'hr': 'view',
+
+  'p': 'view',
+  'h1': 'view',
+  'h2': 'view',
+  'h3': 'view',
+  'h4': 'view',
+  'h5': 'view',
+  'h6': 'view',
+  'abbr': 'view',
+  'address': 'view',
+  'b': 'view',
+  'bdi': 'view',
+  'bdo': 'view',
+  'blockquote': 'view',
+  'cite': 'view',
+  'code': 'view',
+  'del': 'view',
+  'ins': 'view',
+  'dfn': 'view',
+  'em': 'view',
+  'strong': 'view',
+  'samp': 'view',
+  'kbd': 'view',
+  'var': 'view',
+  'i': 'view',
+  'mark': 'view',
+  'pre': 'view',
+  'q': 'view',
+  'ruby': 'view',
+  'rp': 'view',
+  'rt': 'view',
+  's': 'view',
+  'small': 'view',
+  'sub': 'view',
+  'sup': 'view',
+  'time': 'view',
+  'u': 'view',
+  'wbr': 'view',
+
+  // 表单元素
+  'form': 'form',
+  'input': 'input',
+  'textarea': 'textarea',
+  'button': 'button',
+  'select': 'picker',
+  'option': 'view',
+  'optgroup': 'view',
+  'label': 'label',
+  'fieldset': 'view',
+  'datalist': 'picker',
+  'legend': 'view',
+  'output': 'view',
+
+  // 框架
+  'iframe': 'view',
+  // 图像
+  'img': 'image',
+  'canvas': 'canvas',
+  'figure': 'view',
+  'figcaption': 'view',
+
+  // 音视频
+  'audio': 'audio',
+  'source': 'audio',
+  'video': 'video',
+  'track': 'video',
+  // 链接
+  'a': 'navigator',
+  'nav': 'view',
+  'link': 'navigator',
+  // 列表
+  'ul': 'view',
+  'ol': 'view',
+  'li': 'view',
+  'dl': 'view',
+  'dt': 'view',
+  'dd': 'view',
+  'menu': 'view',
+  'command': 'view',
+
+  // 表格table
+  'table': 'view',
+  'caption': 'view',
+  'th': 'view',
+  'td': 'view',
+  'tr': 'view',
+  'thead': 'view',
+  'tbody': 'view',
+  'tfoot': 'view',
+  'col': 'view',
+  'colgroup': 'view',
+
+  // 样式 节
+  'div': 'view',
+  'main': 'view',
+  'span': 'label',
+  'header': 'view',
+  'footer': 'view',
+  'section': 'view',
+  'article': 'view',
+  'aside': 'view',
+  'details': 'view',
+  'dialog': 'view',
+  'summary': 'view',
+
+  'progress': 'progress',
+  'meter': 'progress', // todo
+  'head': 'view', // todo
+  'meta': 'view', // todo
+  'base': 'text', // todo
+  // 'map': 'image', // TODO不是很恰当
+  'area': 'navigator', // j结合map使用
+
+  'script': 'view',
+  'noscript': 'view',
+  'embed': 'view',
+  'object': 'view',
+  'param': 'view',
+
+  // https://mp.weixin.qq.com/debug/wxadoc/dev/component/
+  // [...document.querySelectorAll('.markdown-section tbody td:first-child')].map(v => v.textContent).join(',\n')
+  'view': 'view',
+  'scroll-view': 'scroll-view',
+  'swiper': 'swiper',
+  'icon': 'icon',
+  'text': 'text',
+  // 'progress': 'progress',
+  // 'button': 'button',
+  // 'form': 'form',
+  // 'input': 'input',
+  'checkbox': 'checkbox',
+  'radio': 'radio',
+  'picker': 'picker',
+  'picker-view': 'picker-view',
+  'slider': 'slider',
+  'switch': 'switch',
+  // 'label': 'label',
+  'navigator': 'navigator',
+  // 'audio': 'audio',
+  'image': 'image',
+  // 'video': 'video',
+  'map': 'map',
+  // 'canvas': 'canvas',
+  'contact-button': 'contact-button',
+  'block': 'block'
+}