提交 f25f496e 编写于 作者: fxy060608's avatar fxy060608

feat(v3): optimize json

上级 95b816e1
......@@ -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 */
......
此差异已折叠。
......@@ -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', () => {
......
......@@ -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)}`
)
})
})
......
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) {
......
const {
ID,
ITERATOR,
isVar,
isVar,
getForEl,
processForKey,
updateForEleId,
......
......@@ -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,
......
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>
......
......@@ -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'
......@@ -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)
}
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)
}
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册