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

feat(v3): improve slot logic

上级 8af6afcf
...@@ -33,6 +33,12 @@ describe('codegen', () => { ...@@ -33,6 +33,12 @@ describe('codegen', () => {
'<div>A{{ d | e | f }}B{{text}}C</div>', '<div>A{{ d | e | f }}B{{text}}C</div>',
`with(this){return _c('v-uni-view',{attrs:{"_i":0}},[_v("A"+(_$g(0,'t0'))+"B"+(_$g(0,'t1'))+"C")])}` `with(this){return _c('v-uni-view',{attrs:{"_i":0}},[_v("A"+(_$g(0,'t0'))+"B"+(_$g(0,'t1'))+"C")])}`
) )
})
it('generate slot fallback content', () => {
assertCodegen(
'<div><slot><div>{{hi}}</div></slot></div>',
`with(this){return _c('v-uni-view',{attrs:{"_i":0}},[_t("default",[_c('v-uni-view',{attrs:{"_i":2}},[_v((_$g(2,'t0',1)))])],{"_i":1})],2)}`
)
}) })
}) })
/* eslint-enable quotes */ /* eslint-enable quotes */
const compiler = require('../lib') const compiler = require('../lib')
const res = compiler.compile( const res = compiler.compile(
` `
<div><template v-for="item in items"><span v-if="item.sub"></span></template></div> <div><slot><div>{{hi}}</div></slot></div>
`, { `, {
resourcePath: '/User/fxy/Documents/test.wxml', resourcePath: '/User/fxy/Documents/test.wxml',
isReservedTag: function (tag) { isReservedTag: function (tag) {
......
...@@ -16,23 +16,35 @@ const parseComponent = require('./parser/component-parser') ...@@ -16,23 +16,35 @@ const parseComponent = require('./parser/component-parser')
const basePreTransformNode = require('./pre-transform-node') const basePreTransformNode = require('./pre-transform-node')
function createGenVar (id) { function createGenVar (id, isInSlot = false) {
return function genVar (name, extra = '') { return function genVar (name, extra = '') {
const isFallbackContent = isInSlot ? ',1' : ''
extra = extra ? (',' + extra) : '' extra = extra ? (',' + extra) : ''
return `${DATA_ROOT}(${id},'${name}'${extra})` return `${DATA_ROOT}(${id},'${name}'${isFallbackContent}${extra})`
} }
} }
function isInSlot (el) {
let parent = el.parent
while (parent) {
if (parent.tag === 'slot') {
return true
}
parent = parent.parent
}
return false
}
// if 使用该方案是因为 template 节点之类无法挂靠 extras // if 使用该方案是因为 template 节点之类无法挂靠 extras
function processIfConditions (el) { function processIfConditions (el) {
if (el.if) { if (el.if) {
el.ifConditions.forEach(con => { el.ifConditions.forEach(con => {
if (isVar(con.exp)) { if (isVar(con.exp)) {
con.exp = createGenVar(con.block.attrsMap[ID])(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])('v-if') el.if = createGenVar(el.attrsMap[ID], isInSlot(el))('v-if')
} }
} }
...@@ -48,7 +60,7 @@ function processBinding (el, genVar) { ...@@ -48,7 +60,7 @@ function processBinding (el, genVar) {
function processFor (el, genVal) { function processFor (el, genVal) {
if (el.for && isVar(el.for)) { if (el.for && isVar(el.for)) {
el.for = createGenVar(el.forId)('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=" { a, b } in items"></li></div>
// => // =>
// <div><li v-for="$item in items"></li></div> // <div><li v-for="$item in items"></li></div>
...@@ -75,7 +87,7 @@ function processKey (el) { ...@@ -75,7 +87,7 @@ function processKey (el) {
el.key = `${forEl.alias}['k${keyIndex}']` el.key = `${forEl.alias}['k${keyIndex}']`
} }
} else { } else {
isVar(el.key) && (el.key = createGenVar(el.attrsMap[ID])('a-key')) isVar(el.key) && (el.key = createGenVar(el.attrsMap[ID], isInSlot(el))('a-key'))
} }
} }
} }
...@@ -109,8 +121,8 @@ function processText (el, parent) { ...@@ -109,8 +121,8 @@ function processText (el, parent) {
const state = { const state = {
index: 0, index: 0,
view: true, view: true,
genVar: createGenVar(parent.attrsMap[ID]) genVar: createGenVar(parent.attrsMap[ID], isInSlot(parent))
} }
// fixed by xxxxxx 注意:保持平台一致性,trim 一下 // fixed by xxxxxx 注意:保持平台一致性,trim 一下
el.expression = parseText(el.text.trim(), false, state).expression el.expression = parseText(el.text.trim(), false, state).expression
} }
...@@ -127,7 +139,7 @@ function transformNode (el, parent, state) { ...@@ -127,7 +139,7 @@ function transformNode (el, parent, state) {
} }
const id = el.attrsMap[ID] const id = el.attrsMap[ID]
const genVar = createGenVar(id) const genVar = createGenVar(id, isInSlot(el))
processFor(el, genVar) processFor(el, genVar)
processKey(el) processKey(el)
......
1.service new VuePageComponent
2.service beforeCreate nodeId
3.service page mounted send first data
first render
//第一次渲染,
//1.需要带有页面 id,页面路径等
//2.首次渲染的 nodeId 列表
//3.数据
//二次渲染
//1.新增的 nodeId
//2.数据
[
[init,[pageId,{}]],
[created,['1','2']],
[mounted,[['1',{}],['2',{}]]]
]
//首次处理流程
//1.接收到命令后,创建 vd
//2.创建页面 vm,beforeCreate 中赋值页面数据,赋值 nodeId
//二次处理流程
//1.接收到命令后,根据 nodeId 查找 vm,存在,则赋值+forceUpdate,
即 beforeCreate 中提取 nodeId,
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册