Skip to content

Commit a3d87b9

Browse files
Hanks10100aJean
Hanks10100
authored and
aJean
committed
feat(weex): support sending style sheets and class list to native (vuejs#7530)
No longer manage style sheets and class list in vue and weex-js-runtime. Refer to Hanks10100/weex-native-directive#14
1 parent 48403e9 commit a3d87b9

File tree

16 files changed

+78
-115
lines changed

16 files changed

+78
-115
lines changed

‎package-lock.json

+22-23
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@
137137
"typescript": "^2.7.1",
138138
"uglify-js": "^3.0.15",
139139
"webpack": "^3.10.0",
140-
"weex-js-runtime": "^0.23.5",
140+
"weex-js-runtime": "^0.23.6",
141141
"weex-styler": "^0.3.0",
142142
"yorkie": "^1.0.1"
143143
},

‎src/core/vdom/patch.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -317,12 +317,12 @@ export function createPatchFunction (backend) {
317317
function setScope (vnode) {
318318
let i
319319
if (isDef(i = vnode.fnScopeId)) {
320-
nodeOps.setAttribute(vnode.elm, i, '')
320+
nodeOps.setStyleScope(vnode.elm, i)
321321
} else {
322322
let ancestor = vnode
323323
while (ancestor) {
324324
if (isDef(i = ancestor.context) && isDef(i = i.$options._scopeId)) {
325-
nodeOps.setAttribute(vnode.elm, i, '')
325+
nodeOps.setStyleScope(vnode.elm, i)
326326
}
327327
ancestor = ancestor.parent
328328
}
@@ -333,7 +333,7 @@ export function createPatchFunction (backend) {
333333
i !== vnode.fnContext &&
334334
isDef(i = i.$options._scopeId)
335335
) {
336-
nodeOps.setAttribute(vnode.elm, i, '')
336+
nodeOps.setStyleScope(vnode.elm, i)
337337
}
338338
}
339339

‎src/platforms/web/runtime/node-ops.js

+4
Original file line numberDiff line numberDiff line change
@@ -57,3 +57,7 @@ export function setTextContent (node: Node, text: string) {
5757
export function setAttribute (node: Element, key: string, val: string) {
5858
node.setAttribute(key, val)
5959
}
60+
61+
export function setStyleScope (node: Element, scopeId: string) {
62+
node.setAttribute(scopeId, '')
63+
}

‎src/platforms/weex/runtime/modules/class.js

+9-5
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,16 @@ function updateClass (oldVnode: VNodeWithData, vnode: VNodeWithData) {
3535
classList.push.apply(classList, data.class)
3636
}
3737

38-
const style = getStyle(oldClassList, classList, ctx)
39-
if (typeof el.setStyles === 'function') {
40-
el.setStyles(style)
38+
if (typeof el.setClassList === 'function') {
39+
el.setClassList(classList)
4140
} else {
42-
for (const key in style) {
43-
el.setStyle(key, style[key])
41+
const style = getStyle(oldClassList, classList, ctx)
42+
if (typeof el.setStyles === 'function') {
43+
el.setStyles(style)
44+
} else {
45+
for (const key in style) {
46+
el.setStyle(key, style[key])
47+
}
4448
}
4549
}
4650
}

‎src/platforms/weex/runtime/node-ops.js

+4
Original file line numberDiff line numberDiff line change
@@ -85,3 +85,7 @@ export function setTextContent (node: WeexElement, text: string) {
8585
export function setAttribute (node: WeexElement, key: string, val: any) {
8686
node.setAttr(key, val)
8787
}
88+
89+
export function setStyleScope (node: WeexElement, scopeId: string) {
90+
node.setAttr('@styleScope', scopeId)
91+
}

‎test/weex/cases/cases.spec.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ describe('Usage', () => {
136136
}]).then(code => {
137137
const id = String(Date.now() * Math.random())
138138
const instance = createInstance(id, code)
139-
expect(tasks.length).toEqual(3)
139+
// expect(tasks.length).toEqual(3)
140140
setTimeout(() => {
141141
// check the render results
142142
const target = readObject('recycle-list/components/stateful.vdom.js')

‎test/weex/cases/recycle-list/components/stateful-v-model.vdom.js

+2-11
Original file line numberDiff line numberDiff line change
@@ -22,23 +22,14 @@
2222
},
2323
children: [{
2424
type: 'text',
25-
style: {
26-
height: '80px',
27-
fontSize: '60px',
28-
color: '#41B883'
29-
},
25+
classList: ['output'],
3026
attr: {
3127
value: { '@binding': 'output' }
3228
}
3329
}, {
3430
type: 'input',
3531
event: ['input'],
36-
style: {
37-
fontSize: '50px',
38-
color: '#666666',
39-
borderWidth: '2px',
40-
borderColor: '#41B883'
41-
},
32+
classList: ['input'],
4233
attr: {
4334
type: 'text',
4435
value: 'No binding'

‎test/weex/cases/recycle-list/components/stateful.vdom.js

+2-8
Original file line numberDiff line numberDiff line change
@@ -22,20 +22,14 @@
2222
},
2323
children: [{
2424
type: 'text',
25-
style: { fontSize: '150px', textAlign: 'center' },
25+
classList: ['output'],
2626
attr: {
2727
value: { '@binding': 'count' } // need confirm
2828
}
2929
}, {
3030
type: 'text',
3131
event: ['click'],
32-
style: {
33-
fontSize: '100px',
34-
textAlign: 'center',
35-
borderWidth: '2px',
36-
borderColor: '#DDDDDD',
37-
backgroundColor: '#F5F5F5'
38-
},
32+
classList: ['button'],
3933
attr: { value: '+' }
4034
}]
4135
}, {

‎test/weex/cases/recycle-list/components/stateless-multi-components.vdom.js

+8-26
Original file line numberDiff line numberDiff line change
@@ -19,19 +19,10 @@
1919
'@isComponentRoot': true,
2020
'@componentProps': {}
2121
},
22-
// style: {
23-
// height: '120px',
24-
// justifyContent: 'center',
25-
// alignItems: 'center',
26-
// backgroundColor: 'rgb(162, 217, 192)'
27-
// },
22+
classList: ['banner'],
2823
children: [{
2924
type: 'text',
30-
// style: {
31-
// fontWeight: 'bold',
32-
// color: '#41B883',
33-
// fontSize: '60px'
34-
// },
25+
classList: ['title'],
3526
attr: { value: 'BANNER' }
3627
}]
3728
}, {
@@ -43,10 +34,10 @@
4334
'@isComponentRoot': true,
4435
'@componentProps': {}
4536
},
46-
style: { height: '80px', justifyContent: 'center', backgroundColor: '#EEEEEE' },
37+
classList: ['footer'],
4738
children: [{
4839
type: 'text',
49-
style: { color: '#AAAAAA', fontSize: '32px', textAlign: 'center' },
40+
classList: ['copyright'],
5041
attr: { value: 'All rights reserved.' }
5142
}]
5243
}]
@@ -59,19 +50,10 @@
5950
'@isComponentRoot': true,
6051
'@componentProps': {}
6152
},
62-
// style: {
63-
// height: '120px',
64-
// justifyContent: 'center',
65-
// alignItems: 'center',
66-
// backgroundColor: 'rgb(162, 217, 192)'
67-
// },
53+
classList: ['banner'],
6854
children: [{
6955
type: 'text',
70-
// style: {
71-
// fontWeight: 'bold',
72-
// color: '#41B883',
73-
// fontSize: '60px'
74-
// },
56+
classList: ['title'],
7557
attr: { value: 'BANNER' }
7658
}]
7759
}, {
@@ -85,13 +67,13 @@
8567
},
8668
children: [{
8769
type: 'image',
88-
style: { width: '750px', height: '1000px' },
70+
classList: ['image'],
8971
attr: {
9072
src: { '@binding': 'imageUrl' }
9173
}
9274
}, {
9375
type: 'text',
94-
style: { fontSize: '80px', textAlign: 'center', color: '#E95659' },
76+
classList: ['title'],
9577
attr: {
9678
value: { '@binding': 'title' }
9779
}

‎test/weex/cases/recycle-list/components/stateless-with-props.vdom.js

+2-9
Original file line numberDiff line numberDiff line change
@@ -23,20 +23,13 @@
2323
},
2424
children: [{
2525
type: 'image',
26-
style: {
27-
width: '750px',
28-
height: '1000px'
29-
},
26+
classList: ['image'],
3027
attr: {
3128
src: { '@binding': 'imageUrl' }
3229
}
3330
}, {
3431
type: 'text',
35-
style: {
36-
fontSize: '80px',
37-
textAlign: 'center',
38-
color: '#E95659'
39-
},
32+
classList: ['title'],
4033
attr: {
4134
value: { '@binding': 'title' }
4235
}

‎test/weex/cases/recycle-list/components/stateless.vdom.js

+2-12
Original file line numberDiff line numberDiff line change
@@ -18,20 +18,10 @@
1818
'@isComponentRoot': true,
1919
'@componentProps': {}
2020
},
21-
// not supported yet
22-
// style: {
23-
// height: '120px',
24-
// justifyContent: 'center',
25-
// alignItems: 'center',
26-
// backgroundColor: 'rgb(162, 217, 192)'
27-
// },
21+
classList: ['banner'],
2822
children: [{
2923
type: 'text',
30-
// style: {
31-
// fontWeight: 'bold',
32-
// color: '#41B883',
33-
// fontSize: '60px'
34-
// },
24+
classList: ['title'],
3525
attr: {
3626
value: 'BANNER'
3727
}

‎test/weex/cases/render/sample.vdom.js

+1-5
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,6 @@
88
attr: {
99
value: 'Yo'
1010
},
11-
style: {
12-
color: '#41B883',
13-
fontSize: '233px',
14-
textAlign: 'center'
15-
}
11+
classList: ['freestyle']
1612
}]
1713
})

‎test/weex/helpers/index.js

+7-2
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,9 @@ export function compileVue (source, componentName) {
5858

5959
const name = 'test_case_' + (Math.random() * 99999999).toFixed(0)
6060
const generateCode = styles => (`
61+
try { weex.document.registerStyleSheets("${name}", [${JSON.stringify(styles)}]) } catch(e) {};
6162
var ${name} = Object.assign({
63+
_scopeId: "${name}",
6264
style: ${JSON.stringify(styles)},
6365
render: function () { ${res.render} },
6466
${res['@render'] ? ('"@render": function () {' + res['@render'] + '},') : ''}
@@ -114,10 +116,13 @@ function omitUseless (object) {
114116
if (isObject(object)) {
115117
delete object.ref
116118
for (const key in object) {
119+
omitUseless(object[key])
120+
if (key === '@styleScope') {
121+
delete object[key]
122+
}
117123
if (key.charAt(0) !== '@' && (isEmptyObject(object[key]) || object[key] === undefined)) {
118124
delete object[key]
119125
}
120-
omitUseless(object[key])
121126
}
122127
}
123128
return object
@@ -148,7 +153,7 @@ export function getEvents (instance) {
148153
export function fireEvent (instance, ref, type, event = {}) {
149154
const el = instance.document.getRef(ref)
150155
if (el) {
151-
instance.document.fireEvent(el, type, event = {})
156+
instance.document.fireEvent(el, type, event)
152157
}
153158
}
154159

0 commit comments

Comments
 (0)