feat(v3): optimize json

packages/uni-app-plus/dist/index.v3.js

@@ -3586,7 +3586,12 @@ var serviceContext = (function () {
 
   const TITLEBAR_HEIGHT = 44;
 
-  const VIEW_WEBVIEW_PATH = '_www/__uniappview.html';
+  const VIEW_WEBVIEW_PATH = '_www/__uniappview.html';
+
+  const V_FOR = 'f';
+  const V_IF = 'i';
+  const V_ELSE_IF = 'e';
+  const V_SHOW = 'v-show';
 
   const callbacks = {};
   const WEB_INVOKE_APPSERVICE = 'WEB_INVOKE_APPSERVICE';
@@ -3785,7 +3790,7 @@ var serviceContext = (function () {
     }, false);
   }
 
-  const TABBAR_HEIGHT = 56;
+  const TABBAR_HEIGHT = 50;
 
   let config;
 
@@ -3869,6 +3874,7 @@ var serviceContext = (function () {
   }
 
   var tabBar$1 = {
+    id: '0',
     init (options, clickCallback) {
       if (options && options.list.length) {
         config = options;
@@ -3879,7 +3885,7 @@ var serviceContext = (function () {
         console.log(`uni.requireNativePlugin("uni-tabview") error ${error}`);
       }
       tabBar && tabBar.onClick(({ index }) => {
-        clickCallback(config.list[index], index, true);
+        clickCallback(config.list[index], index);
       });
       tabBar && tabBar.onMidButtonClick(() => {
         publish('onTabBarMidButtonTap', {});
@@ -3924,6 +3930,14 @@ var serviceContext = (function () {
     },
     get height () {
       return config && config.height ? parseFloat(config.height) : TABBAR_HEIGHT
+    },
+    setStyle ({ mask }) {
+      tabBar.setMask({
+        color: mask
+      });
+    },
+    addEventListener (name, callback) {
+      tabBar.onMaskClick(callback);
     }
   };
 
@@ -8556,10 +8570,22 @@ var serviceContext = (function () {
     }
   });
 
+  function optimize (k, v) {
+    if (typeof v === 'undefined') {
+      return ''
+    }
+    if (
+      k === V_IF ||
+      k === V_ELSE_IF ||
+      k === V_SHOW
+    ) {
+      return v ? 1 : 0
+    }
+    return v
+  }
+
   function publishHandler (eventType, args, pageIds) {
-    args = JSON.stringify(args, (k, v) => { //  将 undefined 格式化为空字符串
-      return typeof v === 'undefined' ? '' : v
-    });
+    args = JSON.stringify(args, optimize);
     if (process.env.NODE_ENV !== 'production') {
       console.log(`UNIAPP[publishHandler]:[${+new Date()}]`, eventType, args, pageIds);
     }
@@ -9199,7 +9225,7 @@ var serviceContext = (function () {
 
   function setForData (id, value) {
     const diffData = this._$newData[id] || (this._$newData[id] = {});
-    const vForData = diffData['v-for'] || (diffData['v-for'] = []);
+    const vForData = diffData[V_FOR] || (diffData[V_FOR] = []);
 
     if (value.forItems) {
       return value.forItems
@@ -9219,11 +9245,11 @@ var serviceContext = (function () {
   }
 
   function setIfData (id, value) {
-    return ((this._$newData[id] || (this._$newData[id] = {}))['v-if'] = value)
+    return ((this._$newData[id] || (this._$newData[id] = {}))[V_IF] = value)
   }
 
   function setElseIfData (id, value) {
-    return ((this._$newData[id] || (this._$newData[id] = {}))['v-else-if'] = value)
+    return ((this._$newData[id] || (this._$newData[id] = {}))[V_ELSE_IF] = value)
   }
 
   /* @flow */

packages/uni-template-compiler/__tests__/compiler-app-plus-extra.view.spec.js

@@ -21,11 +21,11 @@ describe('codegen', () => {
   it('generate v-for directive', () => {
     assertCodegen(
       '<div><template v-for="item in items"><div></div><div></div></template></div>',
-      `with(this){return _c('v-uni-view',{attrs:{"_i":0}},[_l((_$g(1,'v-for')),function(item,$10,$20,$30){return [_c('v-uni-view',{key:item['k0'],attrs:{"_i":("2-"+$30)}}),_c('v-uni-view',{key:item['k1'],attrs:{"_i":("3-"+$30)}})]})],2)}`
+      `with(this){return _c('v-uni-view',{attrs:{"_i":0}},[_l((_$g(1,'f')),function(item,$10,$20,$30){return [_c('v-uni-view',{key:item['k0'],attrs:{"_i":("2-"+$30)}}),_c('v-uni-view',{key:item['k1'],attrs:{"_i":("3-"+$30)}})]})],2)}`
     )
     assertCodegen(
       '<div><template v-for="item in items"><span v-if="item.sub"></span></template></div>',
-      `with(this){return _c('v-uni-view',{attrs:{"_i":0}},[_l((_$g(1,'v-for')),function(item,$10,$20,$30){return [(_$g(("2-"+$30),'v-if'))?_c('v-uni-label',{key:item['k0'],attrs:{"_i":("2-"+$30)}}):_e()]})],2)}`
+      `with(this){return _c('v-uni-view',{attrs:{"_i":0}},[_l((_$g(1,'f')),function(item,$10,$20,$30){return [(_$g(("2-"+$30),'i'))?_c('v-uni-label',{key:item['k0'],attrs:{"_i":("2-"+$30)}}):_e()]})],2)}`
     )
   })
   it('generate events with multiple statements', () => {

packages/uni-template-compiler/__tests__/compiler-app-plus.view.spec.js

@@ -41,65 +41,65 @@ describe('codegen', () => {
   it('generate v-for directive', () => {
     assertCodegen(
       '<div><li v-for="item in items" :key="item.uid"></li></div>',
-      `with(this){return _c('v-uni-view',{attrs:{"_i":0}},_l((_$g(1,'v-for')),function(item,$10,$20,$30){return _c('v-uni-view',{key:item,attrs:{"_i":("1-"+$30)}})}),1)}`
+      `with(this){return _c('v-uni-view',{attrs:{"_i":0}},_l((_$g(1,'f')),function(item,$10,$20,$30){return _c('v-uni-view',{key:item,attrs:{"_i":("1-"+$30)}})}),1)}`
     )
     // iterator syntax
     assertCodegen(
       '<div><li v-for="(item, i) in items"></li></div>',
-      `with(this){return _c('v-uni-view',{attrs:{"_i":0}},_l((_$g(1,'v-for')),function(item,i,$20,$30){return _c('v-uni-view',{key:item,attrs:{"_i":("1-"+$30)}})}),1)}`
+      `with(this){return _c('v-uni-view',{attrs:{"_i":0}},_l((_$g(1,'f')),function(item,i,$20,$30){return _c('v-uni-view',{key:item,attrs:{"_i":("1-"+$30)}})}),1)}`
     )
     assertCodegen(
       '<div><li v-for="(item, key, index) in items"></li></div>',
-      `with(this){return _c('v-uni-view',{attrs:{"_i":0}},_l((_$g(1,'v-for')),function(item,key,index,$30){return _c('v-uni-view',{key:item,attrs:{"_i":("1-"+$30)}})}),1)}`
+      `with(this){return _c('v-uni-view',{attrs:{"_i":0}},_l((_$g(1,'f')),function(item,key,index,$30){return _c('v-uni-view',{key:item,attrs:{"_i":("1-"+$30)}})}),1)}`
     )
     // destructuring
     assertCodegen(
       '<div><li v-for="{ a, b } in items"></li></div>',
-      `with(this){return _c('v-uni-view',{attrs:{"_i":0}},_l((_$g(1,'v-for')),function($item,$10,$20,$30){return _c('v-uni-view',{key:$item,attrs:{"_i":("1-"+$30)}})}),1)}`
+      `with(this){return _c('v-uni-view',{attrs:{"_i":0}},_l((_$g(1,'f')),function($item,$10,$20,$30){return _c('v-uni-view',{key:$item,attrs:{"_i":("1-"+$30)}})}),1)}`
     )
     assertCodegen(
       '<div><li v-for="({ a, b }, key, index) in items"></li></div>',
-      `with(this){return _c('v-uni-view',{attrs:{"_i":0}},_l((_$g(1,'v-for')),function($item,key,index,$30){return _c('v-uni-view',{key:$item,attrs:{"_i":("1-"+$30)}})}),1)}`
+      `with(this){return _c('v-uni-view',{attrs:{"_i":0}},_l((_$g(1,'f')),function($item,key,index,$30){return _c('v-uni-view',{key:$item,attrs:{"_i":("1-"+$30)}})}),1)}`
     )
     // v-for with extra element
     assertCodegen(
       '<div><p></p><li v-for="item in items"></li></div>',
-      `with(this){return _c('v-uni-view',{attrs:{"_i":0}},[_c('v-uni-view',{attrs:{"_i":1}}),_l((_$g(2,'v-for')),function(item,$10,$20,$30){return _c('v-uni-view',{key:item,attrs:{"_i":("2-"+$30)}})})],2)}`
+      `with(this){return _c('v-uni-view',{attrs:{"_i":0}},[_c('v-uni-view',{attrs:{"_i":1}}),_l((_$g(2,'f')),function(item,$10,$20,$30){return _c('v-uni-view',{key:item,attrs:{"_i":("2-"+$30)}})})],2)}`
     )
   })
 
   it('generate v-if directive', () => {
     assertCodegen(
       '<p v-if="show">hello</p>',
-      `with(this){return (_$g(0,'v-if'))?_c('v-uni-view',{attrs:{"_i":0}},[_v("hello")]):_e()}`
+      `with(this){return (_$g(0,'i'))?_c('v-uni-view',{attrs:{"_i":0}},[_v("hello")]):_e()}`
     )
   })
 
   it('generate v-else directive', () => {
     assertCodegen(
       '<div><p v-if="show">hello</p><p v-else>world</p></div>',
-      `with(this){return _c('v-uni-view',{attrs:{"_i":0}},[(_$g(1,'v-if'))?_c('v-uni-view',{attrs:{"_i":1}},[_v("hello")]):_c('v-uni-view',{attrs:{"_i":2}},[_v("world")])],1)}`
+      `with(this){return _c('v-uni-view',{attrs:{"_i":0}},[(_$g(1,'i'))?_c('v-uni-view',{attrs:{"_i":1}},[_v("hello")]):_c('v-uni-view',{attrs:{"_i":2}},[_v("world")])],1)}`
     )
   })
 
   it('generate v-else-if directive', () => {
     assertCodegen(
       '<div><p v-if="show">hello</p><p v-else-if="hide">world</p></div>',
-      `with(this){return _c('v-uni-view',{attrs:{"_i":0}},[(_$g(1,'v-if'))?_c('v-uni-view',{attrs:{"_i":1}},[_v("hello")]):(_$g(2,'v-else-if'))?_c('v-uni-view',{attrs:{"_i":2}},[_v("world")]):_e()],1)}`
+      `with(this){return _c('v-uni-view',{attrs:{"_i":0}},[(_$g(1,'i'))?_c('v-uni-view',{attrs:{"_i":1}},[_v("hello")]):(_$g(2,'e'))?_c('v-uni-view',{attrs:{"_i":2}},[_v("world")]):_e()],1)}`
     )
   })
 
   it('generate v-else-if with v-else directive', () => {
     assertCodegen(
       '<div><p v-if="show">hello</p><p v-else-if="hide">world</p><p v-else>bye</p></div>',
-      `with(this){return _c('v-uni-view',{attrs:{"_i":0}},[(_$g(1,'v-if'))?_c('v-uni-view',{attrs:{"_i":1}},[_v("hello")]):(_$g(2,'v-else-if'))?_c('v-uni-view',{attrs:{"_i":2}},[_v("world")]):_c('v-uni-view',{attrs:{"_i":3}},[_v("bye")])],1)}`
+      `with(this){return _c('v-uni-view',{attrs:{"_i":0}},[(_$g(1,'i'))?_c('v-uni-view',{attrs:{"_i":1}},[_v("hello")]):(_$g(2,'e'))?_c('v-uni-view',{attrs:{"_i":2}},[_v("world")]):_c('v-uni-view',{attrs:{"_i":3}},[_v("bye")])],1)}`
     )
   })
 
   it('generate multi v-else-if with v-else directive', () => {
     assertCodegen(
       '<div><p v-if="show">hello</p><p v-else-if="hide">world</p><p v-else-if="3">elseif</p><p v-else>bye</p></div>',
-      `with(this){return _c('v-uni-view',{attrs:{"_i":0}},[(_$g(1,'v-if'))?_c('v-uni-view',{attrs:{"_i":1}},[_v("hello")]):(_$g(2,'v-else-if'))?_c('v-uni-view',{attrs:{"_i":2}},[_v("world")]):(3)?_c('v-uni-view',{attrs:{"_i":3}},[_v("elseif")]):_c('v-uni-view',{attrs:{"_i":4}},[_v("bye")])],1)}`
+      `with(this){return _c('v-uni-view',{attrs:{"_i":0}},[(_$g(1,'i'))?_c('v-uni-view',{attrs:{"_i":1}},[_v("hello")]):(_$g(2,'e'))?_c('v-uni-view',{attrs:{"_i":2}},[_v("world")]):(3)?_c('v-uni-view',{attrs:{"_i":3}},[_v("elseif")]):_c('v-uni-view',{attrs:{"_i":4}},[_v("bye")])],1)}`
     )
   })
 
@@ -113,7 +113,7 @@ describe('codegen', () => {
   it('generate ref on v-for', () => {
     assertCodegen(
       '<ul><li v-for="item in items" ref="component1"></li></ul>',
-      `with(this){return _c('v-uni-view',{attrs:{"_i":0}},_l((_$g(1,'v-for')),function(item,$10,$20,$30){return _c('v-uni-view',{key:item,ref:"component1",refInFor:true,attrs:{"_i":("1-"+$30)}})}),1)}`
+      `with(this){return _c('v-uni-view',{attrs:{"_i":0}},_l((_$g(1,'f')),function(item,$10,$20,$30){return _c('v-uni-view',{key:item,ref:"component1",refInFor:true,attrs:{"_i":("1-"+$30)}})}),1)}`
     )
   })
 
@@ -226,18 +226,18 @@ describe('codegen', () => {
   it('generate scoped slot with multiline v-if', () => {
     assertCodegen(
       '<foo><template v-if="\nshow\n" slot-scope="bar">{{ bar }}</template></foo>',
-      `with(this){return _c('foo',{attrs:{"_i":0},scopedSlots:_u([{key:"default",fn:function(bar){return (_$g(1,'v-if'))?[_v((_$g(1,'t0')))]:undefined}}],null,true)})}`
+      `with(this){return _c('foo',{attrs:{"_i":0},scopedSlots:_u([{key:"default",fn:function(bar){return (_$g(1,'i'))?[_v((_$g(1,'t0')))]:undefined}}],null,true)})}`
     )
     assertCodegen(
       '<foo><div v-if="\nshow\n" slot="foo" slot-scope="bar">{{ bar }}</div></foo>',
-      `with(this){return _c('foo',{attrs:{"_i":0},scopedSlots:_u([{key:"foo",fn:function(bar){return (_$g(1,'v-if'))?_c('v-uni-view',{attrs:{"_i":1}},[_v((_$g(1,'t0')))]):_e()}}],null,true)})}`
+      `with(this){return _c('foo',{attrs:{"_i":0},scopedSlots:_u([{key:"foo",fn:function(bar){return (_$g(1,'i'))?_c('v-uni-view',{attrs:{"_i":1}},[_v((_$g(1,'t0')))]):_e()}}],null,true)})}`
     )
   })
 
   it('generate scoped slot with new slot syntax', () => {
     assertCodegen(
       '<foo><template v-if="show" #default="bar">{{ bar }}</template></foo>',
-      `with(this){return _c('foo',{attrs:{"_i":0},scopedSlots:_u([(_$g(1,'v-if'))?{key:"default",fn:function(bar){return [_v((_$g(1,'t0')))]}}:null],null,true)})}`
+      `with(this){return _c('foo',{attrs:{"_i":0},scopedSlots:_u([(_$g(1,'i'))?{key:"default",fn:function(bar){return [_v((_$g(1,'t0')))]}}:null],null,true)})}`
     )
   })
 
@@ -625,7 +625,7 @@ describe('codegen', () => {
     // normalize type: 2
     assertCodegen(
       '<div><child></child><template v-for="item in list">{{ item }}</template></div>',
-      `with(this){return _c('v-uni-view',{attrs:{"_i":0}},[_c('child',{attrs:{"_i":1}}),_l((_$g(2,'v-for')),function(item,$10,$20,$30){return [_v((_$g(("2-"+$30),'t0')))]})],2)}`
+      `with(this){return _c('v-uni-view',{attrs:{"_i":0}},[_c('child',{attrs:{"_i":1}}),_l((_$g(2,'f')),function(item,$10,$20,$30){return [_v((_$g(("2-"+$30),'t0')))]})],2)}`
     )
   })
 
@@ -685,7 +685,7 @@ describe('codegen', () => {
   it('not specified directives option', () => {
     assertCodegen(
       '<p v-if="show">hello world</p>',
-      `with(this){return (_$g(0,'v-if'))?_c('v-uni-view',{attrs:{"_i":0}},[_v("hello world")]):_e()}`, {
+      `with(this){return (_$g(0,'i'))?_c('v-uni-view',{attrs:{"_i":0}},[_v("hello world")]):_e()}`, {
         // isReservedTag
       }
     )
@@ -695,7 +695,7 @@ describe('codegen', () => {
   it('should compile single v-for component inside template', () => {
     assertCodegen(
       `<div><template v-if="ok"><foo v-for="i in 1" :key="i"></foo></template></div>`,
-      `with(this){return _c('v-uni-view',{attrs:{"_i":0}},[(_$g(1,'v-if'))?_l((1),function(i,$10,$20,$30){return _c('foo',{key:i,attrs:{"_i":("2-"+$30)}})}):_e()],2)}`
+      `with(this){return _c('v-uni-view',{attrs:{"_i":0}},[(_$g(1,'i'))?_l((1),function(i,$10,$20,$30){return _c('foo',{key:i,attrs:{"_i":("2-"+$30)}})}):_e()],2)}`
     )
   })
 })

packages/uni-template-compiler/__tests__/demo.js

 const compiler = require('../lib')
 const res = compiler.compile(
   `
-<div><slot><div>{{hi}}</div></slot></div>
+<p v-show="shown">hello world</p>
     `, {
     resourcePath: '/User/fxy/Documents/test.wxml',
     isReservedTag: function (tag) {

packages/uni-template-compiler/lib/app/service.js

 const {
   ID,
   ITERATOR,
-  isVar,
+  isVar,
   getForEl,
   processForKey,
   updateForEleId,

packages/uni-template-compiler/lib/app/util.js

@@ -7,6 +7,10 @@ const ITERATOR2 = '$2'
 const ITERATOR3 = '$3'
 const DATA_ROOT = '_$g'
 
+const V_FOR = 'f'
+const V_IF = 'i'
+const V_ELSE_IF = 'e'
+
 function isVar (str) {
   if (!str) {
     return false
@@ -141,6 +145,9 @@ function traverseNode (el, parent, state) {
 }
 
 module.exports = {
+  V_FOR,
+  V_IF,
+  V_ELSE_IF,
   ID,
   DATA_ROOT,
   isVar,

packages/uni-template-compiler/lib/app/view.js

 const {
   ID,
   DATA_ROOT,
+  V_FOR,
+  V_IF,
+  V_ELSE_IF,
   isVar,
   getForEl,
   updateForEleId,
@@ -40,11 +43,11 @@ function processIfConditions (el) {
   if (el.if) {
     el.ifConditions.forEach(con => {
       if (isVar(con.exp)) {
-        con.exp = createGenVar(con.block.attrsMap[ID], isInSlot(el))(con.block.elseif ? 'v-else-if' : 'v-if')
+        con.exp = createGenVar(con.block.attrsMap[ID], isInSlot(el))(con.block.elseif ? V_ELSE_IF : V_IF)
       }
     })
 
-    el.if = createGenVar(el.attrsMap[ID], isInSlot(el))('v-if')
+    el.if = createGenVar(el.attrsMap[ID], isInSlot(el))(V_IF)
   }
 }
 
@@ -60,7 +63,7 @@ function processBinding (el, genVar) {
 
 function processFor (el, genVal) {
   if (el.for && isVar(el.for)) {
-    el.for = createGenVar(el.forId, isInSlot(el))('v-for')
+    el.for = createGenVar(el.forId, isInSlot(el))(V_FOR)
     // <div><li v-for=" { a, b }  in items"></li></div>
     // =>
     // <div><li v-for="$item in items"></li></div>

src/platforms/app-plus/service/constants.js

@@ -7,4 +7,9 @@ export const ANI_CLOSE = downgrade ? 'slide-out-right' : 'pop-out'
 
 export const TITLEBAR_HEIGHT = 44
 
-export const VIEW_WEBVIEW_PATH = '_www/__uniappview.html'
+export const VIEW_WEBVIEW_PATH = '_www/__uniappview.html'
+
+export const V_FOR = 'f'
+export const V_IF = 'i'
+export const V_ELSE_IF = 'e'
+export const V_SHOW = 'v-show'

src/platforms/app-plus/service/framework/plugins/data.js

@@ -3,14 +3,20 @@ import {
   hasOwn
 } from 'uni-shared'
 
+import {
+  MOUNTED_DATA,
+  UPDATED_DATA
+} from '../../../constants'
+
 import {
   VDomSync
 } from './vdom-sync'
 
 import {
-  MOUNTED_DATA,
-  UPDATED_DATA
-} from '../../../constants'
+  V_IF,
+  V_FOR,
+  V_ELSE_IF
+} from '../../constants'
 
 import {
   diff
@@ -114,7 +120,7 @@ function setData (id, name, value) {
 
 function setForData (id, value) {
   const diffData = this._$newData[id] || (this._$newData[id] = {})
-  const vForData = diffData['v-for'] || (diffData['v-for'] = [])
+  const vForData = diffData[V_FOR] || (diffData[V_FOR] = [])
 
   if (value.forItems) {
     return value.forItems
@@ -134,9 +140,9 @@ function setForData (id, value) {
 }
 
 function setIfData (id, value) {
-  return ((this._$newData[id] || (this._$newData[id] = {}))['v-if'] = value)
+  return ((this._$newData[id] || (this._$newData[id] = {}))[V_IF] = value)
 }
 
 function setElseIfData (id, value) {
-  return ((this._$newData[id] || (this._$newData[id] = {}))['v-else-if'] = value)
+  return ((this._$newData[id] || (this._$newData[id] = {}))[V_ELSE_IF] = value)
 }

src/platforms/app-plus/service/publish-handler.js

+import {
+  V_IF,
+  V_ELSE_IF,
+  V_SHOW
+}
+  from './constants'
+
+function optimize (k, v) {
+  if (typeof v === 'undefined') {
+    return ''
+  }
+  if (
+    k === V_IF ||
+    k === V_ELSE_IF ||
+    k === V_SHOW
+  ) {
+    return v ? 1 : 0
+  }
+  return v
+}
+
 export function publishHandler (eventType, args, pageIds) {
-  args = JSON.stringify(args, (k, v) => { //  将 undefined 格式化为空字符串
-    return typeof v === 'undefined' ? '' : v
-  })
+  args = JSON.stringify(args, optimize)
   if (process.env.NODE_ENV !== 'production') {
     console.log(`UNIAPP[publishHandler]:[${+new Date()}]`, eventType, args, pageIds)
   }