test/vue
1
0
Fork 0
mirror of https://gitee.com/vuejs/vue.git synced 2024-12-03 12:38:24 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(weex): support sending style sheets and class list to native (#7530)

Browse Source 
No longer manage style sheets and class list in vue and weex-js-runtime.

Refer to https://github.com/Hanks10100/weex-native-directive/issues/14
This commit is contained in:
Hanks 2018-03-05 11:58:24 +08:00 committed by Evan You
parent a270111a2c
commit 990374bacb
16 changed files with 78 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
package-lock.json generated
View File

@ -2,7 +2,6 @@
"name": "vue",
"version": "2.5.13",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"@babel/code-frame": {
"version": "7.0.0-beta.31",
@ -152,16 +151,6 @@
"@types/uglify-js": "2.6.29"
}
},
"JSONStream": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.1.tgz",
"integrity": "sha1-cH92HgHa6eFvG8+TcDt4xwlmV5o=",
"dev": true,
"requires": {
"jsonparse": "1.3.1",
"through": "2.3.8"
}
},
"abbrev": {
"version": "1.0.9",
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.9.tgz",
@ -6079,6 +6068,16 @@
"integrity": "sha1-T9kss04OnbPInIYi7PUfm5eMbLk=",
"dev": true
},
"JSONStream": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.1.tgz",
"integrity": "sha1-cH92HgHa6eFvG8+TcDt4xwlmV5o=",
"dev": true,
"requires": {
"jsonparse": "1.3.1",
"through": "2.3.8"
}
},
"jsprim": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
@ -9218,6 +9217,15 @@
"any-observable": "0.2.0"
}
},
"string_decoder": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
"integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
"dev": true,
"requires": {
"safe-buffer": "5.1.1"
}
},
"string-width": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
@ -9229,15 +9237,6 @@
"strip-ansi": "3.0.1"
}
},
"string_decoder": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
"integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
"dev": true,
"requires": {
"safe-buffer": "5.1.1"
}
},
"stringify-object": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.2.1.tgz",
@ -10258,9 +10257,9 @@
}
},
"weex-js-runtime": {
"version": "0.23.5",
"resolved": "https://registry.npmjs.org/weex-js-runtime/-/weex-js-runtime-0.23.5.tgz",
"integrity": "sha512-94/bMUpCyZMsrq2codDPFatr5Ec8yKYKYNsfoshQOiQKTZY3pwqlfedtOKQNf6k7o4npEhdxDnHJwEVORtNylg==",
"version": "0.23.6",
"resolved": "https://registry.npmjs.org/weex-js-runtime/-/weex-js-runtime-0.23.6.tgz",
"integrity": "sha512-Qg+Xrm4D9yOrg6/u0fYx8as6v4WdQR4kpuheiwTvNa0BjvAGKrVMybiit6GsE5pvS7P1GewI5xPM9xZi8xGaRA==",
"dev": true
},
"weex-styler": {

2
package.json
View File

@ -137,7 +137,7 @@
"typescript": "^2.7.1",
"uglify-js": "^3.0.15",
"webpack": "^3.10.0",
"weex-js-runtime": "^0.23.5",
"weex-js-runtime": "^0.23.6",
"weex-styler": "^0.3.0",
"yorkie": "^1.0.1"
},

6
src/core/vdom/patch.js
View File

@ -317,12 +317,12 @@ export function createPatchFunction (backend) {
function setScope (vnode) {
let i
if (isDef(i = vnode.fnScopeId)) {
nodeOps.setAttribute(vnode.elm, i, '')
nodeOps.setStyleScope(vnode.elm, i)
} else {
let ancestor = vnode
while (ancestor) {
if (isDef(i = ancestor.context) && isDef(i = i.$options._scopeId)) {
nodeOps.setAttribute(vnode.elm, i, '')
nodeOps.setStyleScope(vnode.elm, i)
}
ancestor = ancestor.parent
}
@ -333,7 +333,7 @@ export function createPatchFunction (backend) {
i !== vnode.fnContext &&
isDef(i = i.$options._scopeId)
) {
nodeOps.setAttribute(vnode.elm, i, '')
nodeOps.setStyleScope(vnode.elm, i)
}
}

4
src/platforms/web/runtime/node-ops.js
View File

@ -57,3 +57,7 @@ export function setTextContent (node: Node, text: string) {
export function setAttribute (node: Element, key: string, val: string) {
node.setAttribute(key, val)
}
export function setStyleScope (node: Element, scopeId: string) {
node.setAttribute(scopeId, '')
}

14
src/platforms/weex/runtime/modules/class.js
View File

@ -35,12 +35,16 @@ function updateClass (oldVnode: VNodeWithData, vnode: VNodeWithData) {
classList.push.apply(classList, data.class)
}
const style = getStyle(oldClassList, classList, ctx)
if (typeof el.setStyles === 'function') {
el.setStyles(style)
if (typeof el.setClassList === 'function') {
el.setClassList(classList)
} else {
for (const key in style) {
el.setStyle(key, style[key])
const style = getStyle(oldClassList, classList, ctx)
if (typeof el.setStyles === 'function') {
el.setStyles(style)
} else {
for (const key in style) {
el.setStyle(key, style[key])
}
}
}
}

4
src/platforms/weex/runtime/node-ops.js
View File

@ -85,3 +85,7 @@ export function setTextContent (node: WeexElement, text: string) {
export function setAttribute (node: WeexElement, key: string, val: any) {
node.setAttr(key, val)
}
export function setStyleScope (node: WeexElement, scopeId: string) {
node.setAttr('@styleScope', scopeId)
}

2
test/weex/cases/cases.spec.js
View File

@ -136,7 +136,7 @@ describe('Usage', () => {
}]).then(code => {
const id = String(Date.now() * Math.random())
const instance = createInstance(id, code)
expect(tasks.length).toEqual(3)
// expect(tasks.length).toEqual(3)
setTimeout(() => {
// check the render results
const target = readObject('recycle-list/components/stateful.vdom.js')

13
test/weex/cases/recycle-list/components/stateful-v-model.vdom.js
View File

@ -22,23 +22,14 @@
},
children: [{
type: 'text',
style: {
height: '80px',
fontSize: '60px',
color: '#41B883'
},
classList: ['output'],
attr: {
value: { '@binding': 'output' }
}
}, {
type: 'input',
event: ['input'],
style: {
fontSize: '50px',
color: '#666666',
borderWidth: '2px',
borderColor: '#41B883'
},
classList: ['input'],
attr: {
type: 'text',
value: 'No binding'

10
test/weex/cases/recycle-list/components/stateful.vdom.js
View File

@ -22,20 +22,14 @@
},
children: [{
type: 'text',
style: { fontSize: '150px', textAlign: 'center' },
classList: ['output'],
attr: {
value: { '@binding': 'count' } // need confirm
}
}, {
type: 'text',
event: ['click'],
style: {
fontSize: '100px',
textAlign: 'center',
borderWidth: '2px',
borderColor: '#DDDDDD',
backgroundColor: '#F5F5F5'
},
classList: ['button'],
attr: { value: '+' }
}]
}, {

34
test/weex/cases/recycle-list/components/stateless-multi-components.vdom.js
View File

@ -19,19 +19,10 @@
'@isComponentRoot': true,
'@componentProps': {}
},
// style: {
// height: '120px',
// justifyContent: 'center',
// alignItems: 'center',
// backgroundColor: 'rgb(162, 217, 192)'
// },
classList: ['banner'],
children: [{
type: 'text',
// style: {
// fontWeight: 'bold',
// color: '#41B883',
// fontSize: '60px'
// },
classList: ['title'],
attr: { value: 'BANNER' }
}]
}, {
@ -43,10 +34,10 @@
'@isComponentRoot': true,
'@componentProps': {}
},
style: { height: '80px', justifyContent: 'center', backgroundColor: '#EEEEEE' },
classList: ['footer'],
children: [{
type: 'text',
style: { color: '#AAAAAA', fontSize: '32px', textAlign: 'center' },
classList: ['copyright'],
attr: { value: 'All rights reserved.' }
}]
}]
@ -59,19 +50,10 @@
'@isComponentRoot': true,
'@componentProps': {}
},
// style: {
// height: '120px',
// justifyContent: 'center',
// alignItems: 'center',
// backgroundColor: 'rgb(162, 217, 192)'
// },
classList: ['banner'],
children: [{
type: 'text',
// style: {
// fontWeight: 'bold',
// color: '#41B883',
// fontSize: '60px'
// },
classList: ['title'],
attr: { value: 'BANNER' }
}]
}, {
@ -85,13 +67,13 @@
},
children: [{
type: 'image',
style: { width: '750px', height: '1000px' },
classList: ['image'],
attr: {
src: { '@binding': 'imageUrl' }
}
}, {
type: 'text',
style: { fontSize: '80px', textAlign: 'center', color: '#E95659' },
classList: ['title'],
attr: {
value: { '@binding': 'title' }
}

11
test/weex/cases/recycle-list/components/stateless-with-props.vdom.js
View File

@ -23,20 +23,13 @@
},
children: [{
type: 'image',
style: {
width: '750px',
height: '1000px'
},
classList: ['image'],
attr: {
src: { '@binding': 'imageUrl' }
}
}, {
type: 'text',
style: {
fontSize: '80px',
textAlign: 'center',
color: '#E95659'
},
classList: ['title'],
attr: {
value: { '@binding': 'title' }
}

14
test/weex/cases/recycle-list/components/stateless.vdom.js
View File

@ -18,20 +18,10 @@
'@isComponentRoot': true,
'@componentProps': {}
},
// not supported yet
// style: {
// height: '120px',
// justifyContent: 'center',
// alignItems: 'center',
// backgroundColor: 'rgb(162, 217, 192)'
// },
classList: ['banner'],
children: [{
type: 'text',
// style: {
// fontWeight: 'bold',
// color: '#41B883',
// fontSize: '60px'
// },
classList: ['title'],
attr: {
value: 'BANNER'
}

6
test/weex/cases/render/sample.vdom.js
View File

@ -8,10 +8,6 @@
attr: {
value: 'Yo'
},
style: {
color: '#41B883',
fontSize: '233px',
textAlign: 'center'
}
classList: ['freestyle']
}]
})

9
test/weex/helpers/index.js
View File

@ -58,7 +58,9 @@ export function compileVue (source, componentName) {
const name = 'test_case_' + (Math.random() * 99999999).toFixed(0)
const generateCode = styles => (`
try { weex.document.registerStyleSheets("${name}", [${JSON.stringify(styles)}]) } catch(e) {};
var ${name} = Object.assign({
_scopeId: "${name}",
style: ${JSON.stringify(styles)},
render: function () { ${res.render} },
${res['@render'] ? ('"@render": function () {' + res['@render'] + '},') : ''}
@ -114,10 +116,13 @@ function omitUseless (object) {
if (isObject(object)) {
delete object.ref
for (const key in object) {
omitUseless(object[key])
if (key === '@styleScope') {
delete object[key]
}
if (key.charAt(0) !== '@' && (isEmptyObject(object[key]) || object[key] === undefined)) {
delete object[key]
}
omitUseless(object[key])
}
}
return object
@ -148,7 +153,7 @@ export function getEvents (instance) {
export function fireEvent (instance, ref, type, event = {}) {
const el = instance.document.getRef(ref)
if (el) {
instance.document.fireEvent(el, type, event = {})
instance.document.fireEvent(el, type, event)
}
}

14
test/weex/runtime/class.spec.js
View File

@ -17,7 +17,7 @@ describe('generate class', () => {
type: 'div',
children: [{
type: 'text',
style: { fontSize: '100', color: '#ff0000', fontWeight: 'bold' },
classList: ['a', 'b', 'c'],
attr: { value: 'Hello World' }
}]
})
@ -51,7 +51,7 @@ describe('generate class', () => {
event: ['click'],
children: [{
type: 'text',
style: { fontSize: '100', color: '#ff0000' },
classList: ['a', 'b'],
attr: { value: 'Hello World' }
}]
})
@ -63,7 +63,7 @@ describe('generate class', () => {
event: ['click'],
children: [{
type: 'text',
style: { fontSize: '100', color: '#0000ff', fontWeight: 'bold' },
classList: ['a', 'd'],
attr: { value: 'Hello World' }
}]
})
@ -96,7 +96,7 @@ describe('generate class', () => {
event: ['click'],
children: [{
type: 'text',
style: { color: '#ff0000' },
classList: ['b', 'a'],
attr: { value: 'Hello World' }
}]
})
@ -108,7 +108,7 @@ describe('generate class', () => {
event: ['click'],
children: [{
type: 'text',
style: { color: '#0000ff' },
classList: ['b', 'a', 'c'],
attr: { value: 'Hello World' }
}]
})
@ -139,7 +139,7 @@ describe('generate class', () => {
event: ['click'],
children: [{
type: 'text',
style: { fontSize: '100', color: '#ff0000' },
classList: ['a', 'b'],
attr: { value: 'Hello World' }
}]
})
@ -151,7 +151,7 @@ describe('generate class', () => {
event: ['click'],
children: [{
type: 'text',
style: { fontSize: '100', color: '', fontWeight: 'bold' },
classList: ['a', 'c'],
attr: { value: 'Hello World' }
}]
})

5
test/weex/runtime/components/richtext.spec.js
View File

@ -585,7 +585,7 @@ describe('richtext component', () => {
}
`)).toEqual({
type: 'richtext',
style: { backgroundColor: '#FF6600', height: 200 },
classList: ['title'],
attr: {
value: [{
type: 'span',
@ -612,7 +612,8 @@ describe('richtext component', () => {
}
`)).toEqual({
type: 'richtext',
style: { backgroundColor: '#FF6600', height: 200 },
classList: ['title'],
style: { backgroundColor: '#FF6600' },
attr: {
value: [{
type: 'span',