Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
uni-app
提交
e8f14edc
U
uni-app
项目概览
DCloud
/
uni-app
大约 1 个月 前同步成功
通知
702
Star
38705
Fork
3642
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
7
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
7
Issue
7
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
e8f14edc
编写于
6月 12, 2020
作者:
Q
qiang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix: 小程序组件支持 import、template 标签
上级
f32384bf
变更
8
隐藏空白更改
内联
并排
Showing
8 changed file
with
154 addition
and
28 deletion
+154
-28
packages/uni-migration/__tests__/wxml.spec.js
packages/uni-migration/__tests__/wxml.spec.js
+43
-16
packages/uni-migration/lib/mp-weixin/transform/file-transformer.js
...uni-migration/lib/mp-weixin/transform/file-transformer.js
+2
-2
packages/uni-migration/lib/mp-weixin/transform/import-template.js
.../uni-migration/lib/mp-weixin/transform/import-template.js
+22
-0
packages/uni-migration/lib/mp-weixin/transform/script-transformer.js
...i-migration/lib/mp-weixin/transform/script-transformer.js
+32
-2
packages/uni-migration/lib/mp-weixin/transform/template-transformer/transform/generate.js
...ixin/transform/template-transformer/transform/generate.js
+1
-1
packages/uni-migration/lib/mp-weixin/transform/template-transformer/transform/index.js
...-weixin/transform/template-transformer/transform/index.js
+8
-2
packages/uni-migration/lib/mp-weixin/transform/template-transformer/transform/traverse.js
...ixin/transform/template-transformer/transform/traverse.js
+44
-4
packages/uni-migration/package.json
packages/uni-migration/package.json
+2
-1
未找到文件。
packages/uni-migration/__tests__/wxml.spec.js
浏览文件 @
e8f14edc
...
...
@@ -10,17 +10,22 @@ describe('wxml:compiler', () => {
assertCodegen
(
`<view bindtouchstart="startDrag" catchtouchmove="{{ catchMove ? 'noop' : '' }}"/>`
,
`<uni-shadow-root><view @touchstart="startDrag" @touchmove.stop.prevent="_$self[(catchMove ? 'noop' : '')||'_$noop']($event)"></view></uni-shadow-root>`
)
assertCodegen
(
`<uni-transition bind:click="click" bindtouchstart="startDrag" catchtouchmove="{{ catchMove ? 'noop' : '' }}"/>`
,
`<uni-shadow-root><uni-transition @click="click" @touchstart.native="startDrag" @touchmove.native.stop.prevent="_$self[(catchMove ? 'noop' : '')||'_$noop']($event)"></uni-transition></uni-shadow-root>`
)
})
it
(
'
generate class
'
,
()
=>
{
assertCodegen
(
`<view class="van-notice-bar__content {{ !scrollable && !wrapable ? 'van-ellipsis' : '' }}"></view>`
,
`<uni-shadow-root><view :class="'van-notice-bar__content '+(!scrollable && !wrapable ? 'van-ellipsis' : '')"></view></uni-shadow-root>`
)
)
assertCodegen
(
`<uni-transition bind:click="click" bindtouchstart="startDrag" catchtouchmove="{{ catchMove ? 'noop' : '' }}"/>`
,
`<uni-shadow-root><uni-transition @click="click" @touchstart.native="startDrag" @touchmove.native.stop.prevent="_$self[(catchMove ? 'noop' : '')||'_$noop']($event)"></uni-transition></uni-shadow-root>`
)
assertCodegen
(
'
<template name="toolbar"><view bindtap="emit"></view></template>
'
,
// `<view @click="_$self.$parent[(emit)||'_$noop']($event)"></view>`
`<uni-shadow-root><template v-if="wxTemplateName === 'toolbar'"><view @click="_$self.$parent[('emit')]($event)"></view></template></uni-shadow-root>`
)
})
it
(
'
generate class
'
,
()
=>
{
assertCodegen
(
`<view class="van-notice-bar__content {{ !scrollable && !wrapable ? 'van-ellipsis' : '' }}"></view>`
,
`<uni-shadow-root><view :class="'van-notice-bar__content '+(!scrollable && !wrapable ? 'van-ellipsis' : '')"></view></uni-shadow-root>`
)
})
it
(
'
generate v-if
'
,
()
=>
{
assertCodegen
(
...
...
@@ -40,10 +45,10 @@ describe('wxml:compiler', () => {
assertCodegen
(
'
<view wx:for="{{ columns }}" wx:for-item="index" wx:key="*this"/>
'
,
`<uni-shadow-root><view v-for="(index,___i___) in (columns)" :key="index"></view></uni-shadow-root>`
)
assertCodegen
(
'
<view wx:for="{{ columns }}" wx:for-item="item" wx:key="{{item.value}}"/>
'
,
`<uni-shadow-root><view v-for="(item,index) in (columns)" :key="item.value"></view></uni-shadow-root>`
)
assertCodegen
(
'
<view wx:for="{{ columns }}" wx:for-item="item" wx:key="{{item.value}}"/>
'
,
`<uni-shadow-root><view v-for="(item,index) in (columns)" :key="item.value"></view></uni-shadow-root>`
)
})
it
(
'
generate root element
'
,
()
=>
{
...
...
@@ -63,5 +68,27 @@ describe('wxml:compiler', () => {
'
<slot></slot>
'
,
`<uni-shadow-root><slot></slot></uni-shadow-root>`
)
assertCodegen
(
`<import src="./toolbar.wxml" /><view></view>
<wxs></wxs>`
,
`<uni-shadow-root><view></view></uni-shadow-root>`
)
assertCodegen
(
'
<view><template is="toolbar" data="{{ showToolbar, cancelButtonText, title, confirmButtonText }}"></template></view>
'
,
`<uni-shadow-root><view><toolbar v-bind="{showToolbar, cancelButtonText, title, confirmButtonText}" wx-template-name="toolbar"></toolbar></view></uni-shadow-root>`
)
assertCodegen
(
'
<template name="toolbar"><view></view></template>
'
,
// `<view></view>`
`<uni-shadow-root><template v-if="wxTemplateName === 'toolbar'"><view></view></template></uni-shadow-root>`
)
assertCodegen
(
'
<template name="toolbar1"><view></view></template><template name="toolbar2"><view></view></template>
'
,
`<uni-shadow-root><template v-if="wxTemplateName === 'toolbar1'"><view></view></template><template v-if="wxTemplateName === 'toolbar2'"><view></view></template></uni-shadow-root>`
)
})
})
})
packages/uni-migration/lib/mp-weixin/transform/file-transformer.js
浏览文件 @
e8f14edc
...
...
@@ -50,7 +50,7 @@ module.exports = function transformFile(input, options) {
const
commentsCode
=
options
.
silent
?
''
:
`<!-- @dcloudio/uni-migration@
${
pkg
.
version
}
-->
<!--
${
new
Date
().
toLocaleString
()}
-->
<!--
${
new
Date
().
toLocaleString
()}
-->
`
return
[
`
${
commentsCode
}
<template>
...
...
@@ -66,4 +66,4 @@ ${styleCode}
deps
,
wxsFiles
]
}
}
packages/uni-migration/lib/mp-weixin/transform/import-template.js
0 → 100644
浏览文件 @
e8f14edc
const
fs
=
require
(
'
fs
'
)
const
path
=
require
(
'
path
'
)
const
parse
=
require
(
'
./template-transformer/parser
'
)
function
getTemplate
(
content
)
{
const
template
=
[]
const
node
=
parse
(
content
)
node
.
children
.
forEach
(
node
=>
{
if
(
node
.
name
===
'
template
'
)
{
const
name
=
node
.
attribs
.
name
if
(
name
)
{
template
.
push
(
name
)
}
}
})
return
template
}
module
.
exports
=
function
(
filepath
,
options
)
{
filepath
=
path
.
join
(
path
.
dirname
(
options
.
filepath
),
filepath
)
return
getTemplate
(
fs
.
readFileSync
(
filepath
,
'
utf8
'
).
toString
().
trim
())
}
\ No newline at end of file
packages/uni-migration/lib/mp-weixin/transform/script-transformer.js
浏览文件 @
e8f14edc
const
fs
=
require
(
'
fs
'
)
const
importTemplate
=
require
(
'
./import-template
'
)
function
transformScript
(
content
,
route
,
code
)
{
function
transformScript
(
content
,
route
,
code
)
{
return
`
${
code
}
global['__wxRoute'] = '
${
route
}
'
${
content
}
export default global['__wxComponents']['
${
route
}
']`
}
function
genJsCode
(
components
,
code
,
state
)
{
const
wxTemplateComponentProps
=
'
__wxTemplateComponentProps
'
const
props
=
state
.
props
const
importCode
=
[]
const
propsCode
=
[]
const
componentsCode
=
[]
components
.
forEach
((
node
,
index
)
=>
{
const
src
=
node
.
attribs
.
src
const
templates
=
importTemplate
(
src
,
state
)
const
identifier
=
`__wxTemplateComponent
${
index
}
`
importCode
.
push
(
`import
${
identifier
}
from '
${
src
.
replace
(
/.wxml$/
,
'
.vue
'
)}
'`
)
templates
.
forEach
(
template
=>
{
// TODO 改为在 template 编译时静态分析
propsCode
.
push
(
`
${
wxTemplateComponentProps
}
['
${
template
}
'] &&
${
wxTemplateComponentProps
}
['
${
template
}
'].forEach(prop =>
${
identifier
}
.props[prop] = {type: null})`
)
componentsCode
.
push
(
`'
${
template
}
' :
${
identifier
}
`
)
})
})
return
components
.
length
?
`
const
${
wxTemplateComponentProps
}
=
${
JSON
.
stringify
(
props
)}
${
importCode
.
join
(
'
\n
'
)}
${
propsCode
.
join
(
'
\n
'
)}
${
code
.
trim
().
replace
(
/
\}\}
$/
,
''
)}
,
${
componentsCode
.
join
(
'
,
'
)}
}}
`
:
code
}
module
.
exports
=
{
transformScript
,
transformScriptFile
(
filepath
,
code
,
options
,
deps
)
{
let
content
=
''
if
(
options
.
components
.
length
)
{
code
=
genJsCode
(
options
.
components
,
code
,
options
)
}
if
(
!
fs
.
existsSync
(
filepath
))
{
content
=
`
Component({})
...
...
@@ -21,4 +51,4 @@ Component({})
}
return
transformScript
(
content
,
options
.
route
,
code
,
options
)
}
}
}
packages/uni-migration/lib/mp-weixin/transform/template-transformer/transform/generate.js
浏览文件 @
e8f14edc
...
...
@@ -62,4 +62,4 @@ module.exports = function generate(node, state) {
`<uni-shadow-root
${
state
.
shadowRootHost
?(
` class="
${
state
.
shadowRootHost
}
"`
):
''
}
>
${
genChildren
(
node
).
trim
()}
</uni-shadow-root>`
,
...
genWxs
(
state
.
wxs
,
state
)
]
}
}
packages/uni-migration/lib/mp-weixin/transform/template-transformer/transform/index.js
浏览文件 @
e8f14edc
...
...
@@ -3,6 +3,12 @@ const generate = require('./generate')
module
.
exports
=
function
transform
(
ast
,
options
)
{
options
.
wxs
=
[]
options
.
shouldWrapper
=
options
.
shouldWrapper
||
function
noop
()
{}
// wxml 中使用 import 导入的组件
options
.
components
=
[]
// wxml 中使用 <template name> 声明的模板
options
.
templates
=
[]
// wxml 中 <template is> 分析得到的 props
options
.
props
=
{}
options
.
shouldWrapper
=
options
.
shouldWrapper
||
function
noop
()
{
}
return
generate
(
traverse
(
ast
,
options
),
options
)
}
}
packages/uni-migration/lib/mp-weixin/transform/template-transformer/transform/traverse.js
浏览文件 @
e8f14edc
const
{
parse
}
=
require
(
'
mustache
'
)
const
recast
=
require
(
'
recast
'
)
const
TAGS
=
[
'
ad
'
,
...
...
@@ -163,8 +164,12 @@ function transformEvent(name, value, attribs, state) {
event
=
transformEventName
(
name
.
replace
(
captureCatchRE
,
''
),
state
)
+
'
.stop.prevent.capture
'
}
if
(
event
!==
name
)
{
let
newValue
=
parseMustache
(
value
,
true
)
if
(
newValue
!==
value
)
{
// 模板 <template name> 中用到的方法在其父组件
let
newValue
=
parseMustache
(
value
,
!
state
.
isTemplate
)
if
(
state
.
isTemplate
)
{
// TODO 改为运行时判断
newValue
=
`_$self.$parent
${
process
.
env
.
UNI_PLATFORM
===
'
h5
'
?
'
.$parent
'
:
''
}
[(
${
newValue
}
)]($event)`
}
else
if
(
newValue
!==
value
)
{
newValue
=
`_$self[(
${
newValue
}
)||'_$noop']($event)`
}
attribs
[
event
]
=
newValue
...
...
@@ -201,9 +206,11 @@ function transformAttrs(node, state) {
}
transformFor
(
attribs
)
const
isComponent
=
!
TAGS
.
includes
(
node
.
name
)
const
isTemplate
=
state
.
templates
.
length
Object
.
keys
(
attribs
).
forEach
(
name
=>
{
transformAttr
(
name
,
attribs
[
name
],
attribs
,
{
isComponent
isComponent
,
isTemplate
})
})
}
...
...
@@ -212,7 +219,40 @@ function transformChildren(node, state) {
node
.
children
=
node
.
children
.
filter
(
childNode
=>
transformNode
(
childNode
,
state
))
}
function
transformTemplate
(
node
,
state
)
{
const
attribs
=
node
.
attribs
if
(
attribs
.
name
)
{
const
name
=
attribs
.
name
// 用于处理一个 wxml 文件内包含多个 template
attribs
[
'
v-if
'
]
=
`wxTemplateName === '
${
name
}
'`
delete
attribs
.
name
state
.
templates
.
push
(
name
)
}
else
if
(
attribs
.
is
)
{
const
name
=
attribs
.
is
delete
attribs
.
is
node
.
name
=
name
attribs
[
'
wx-template-name
'
]
=
name
const
data
=
attribs
.
data
if
(
data
&&
data
.
indexOf
(
'
{{
'
)
!==
-
1
)
{
const
object
=
`{
${
parseMustache
(
data
)}
}`
attribs
[
'
v-bind
'
]
=
object
const
ast
=
recast
.
parse
(
`const object =
${
object
}
`
)
const
props
=
state
.
props
[
name
]
||
[
'
wxTemplateName
'
]
ast
.
program
.
body
[
0
].
declarations
[
0
].
init
.
properties
.
forEach
(
property
=>
props
.
push
(
property
.
key
.
name
))
state
.
props
[
name
]
=
[...
new
Set
(
props
)]
delete
attribs
.
data
}
}
}
function
transformNode
(
node
,
state
)
{
if
(
node
.
name
===
'
import
'
)
{
state
.
components
.
push
(
node
)
return
false
}
if
(
node
.
name
===
'
template
'
)
{
transformTemplate
(
node
,
state
)
}
if
(
node
.
name
===
'
wxs
'
)
{
state
.
wxs
.
push
(
node
)
return
false
...
...
@@ -227,4 +267,4 @@ function transformNode(node, state) {
module
.
exports
=
function
traverse
(
node
,
state
)
{
transformNode
(
node
,
state
)
return
node
}
}
packages/uni-migration/package.json
浏览文件 @
e8f14edc
...
...
@@ -25,6 +25,7 @@
"commander"
:
"^4.0.1"
,
"fs-extra"
:
"^8.1.0"
,
"mustache"
:
"^3.1.0"
,
"stricter-htmlparser2"
:
"^3.9.6"
"stricter-htmlparser2"
:
"^3.9.6"
,
"recast"
:
"*"
}
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录