GitHub
/
Vue.js
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

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
dev
Hanks 7 years ago
committed by Evan You
parent
a270111a2c
commit
990374bacb
16 changed files with 78 additions and 115 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 45
      package-lock.json
  2. 2
      package.json
  3. 6
      src/core/vdom/patch.js
  4. 4
      src/platforms/web/runtime/node-ops.js
  5. 14
      src/platforms/weex/runtime/modules/class.js
  6. 4
      src/platforms/weex/runtime/node-ops.js
  7. 2
      test/weex/cases/cases.spec.js
  8. 13
      test/weex/cases/recycle-list/components/stateful-v-model.vdom.js
  9. 10
      test/weex/cases/recycle-list/components/stateful.vdom.js
  10. 34
      test/weex/cases/recycle-list/components/stateless-multi-components.vdom.js
  11. 11
      test/weex/cases/recycle-list/components/stateless-with-props.vdom.js
  12. 14
      test/weex/cases/recycle-list/components/stateless.vdom.js
  13. 6
      test/weex/cases/render/sample.vdom.js
  14. 9
      test/weex/helpers/index.js
  15. 14
      test/weex/runtime/class.spec.js
  16. 5
      test/weex/runtime/components/richtext.spec.js

45
package-lock.json
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',

Write Preview
Loading…
Cancel
Save