Merge pull request #5 from alibaba/feature-jsfm-mergeManyThing

* [jsfm] merge many things

src/js-framework/lib/__test__/assets/dynamic-type.input

@@ -0,0 +1,27 @@
+define('@weex-component/dynamic-type', function (require, exports, module) {
+
+;
+  module.exports = {
+    data: function () {return {
+      type: 'text'
+    }}
+  }
+
+;module.exports.template = {
+  "type": "container",
+  "children": [
+    {
+      "type": function () {return this.type},
+      "style": {
+        "width": 200,
+        "height": 200
+      }
+    }
+  ]
+}
+
+;})
+
+// require module
+
+bootstrap('@weex-component/dynamic-type')

src/js-framework/lib/__test__/assets/dynamic-type.output

@@ -0,0 +1,10 @@
+{
+  type: 'container',
+  children: [{
+    type: 'text',
+    style: {
+      width: 200,
+      height: 200
+    }
+  }]
+}

src/js-framework/lib/__test__/assets/repeat-index.input

@@ -0,0 +1,41 @@
+define('@weex-component/repeat-index', function (require, exports, module) {
+
+;
+  module.exports = {
+    data: function () {return {
+      titlelist: [
+        {title: 'Hello World1'},
+        {title: 'Hello World2'}
+      ]
+    }}
+  }
+
+
+;module.exports.style = {
+  "title": {
+    "fontSize": 26,
+    "color": "#FF0000"
+  }
+}
+
+;module.exports.template = {
+  "type": "container",
+  "children": [
+    {
+      "type": "text",
+      "repeat": function () {return this.titlelist},
+      "classList": [
+        "title"
+      ],
+      "attr": {
+        "value": function () {return this.INDEX + ': ' + this.title}
+      }
+    }
+  ]
+}
+
+;})
+
+// require module
+
+bootstrap('@weex-component/repeat-index')

src/js-framework/lib/__test__/assets/repeat-index.output

@@ -0,0 +1,22 @@
+{
+  type: 'container',
+  children: [{
+    type: 'text',
+    style: {
+      color: '#FF0000',
+      fontSize: 26
+    },
+    attr: {
+      value: '0: Hello World1'
+    }
+  }, {
+    type: 'text',
+    style: {
+      color: '#FF0000',
+      fontSize: 26
+    },
+    attr: {
+      value: '1: Hello World2'
+    }
+  }]
+}

src/js-framework/lib/__test__/assets/require.input

@@ -31,4 +31,4 @@ define('@weex-component/foo', function (require, exports, module) {
 ;})
 
 // require module
-bootstrap('@weex-component/foo', {"transformerVersion":"0.1.99"})
+bootstrap('@weex-component/foo', {"transformerVersion":"0.1.5"})

src/js-framework/lib/__test__/assets/transformer1.input

@@ -24,5 +24,5 @@ define('@weex-component/foo', function (require, exports, module) {
 
 
 bootstrap('@weex-component/foo', {
-  'transformerVersion': '0.1.99'
+  'transformerVersion': '0.1.5'
 })

src/js-framework/lib/__test__/assets/transformer2.input

@@ -24,5 +24,5 @@ define('@weex-component/foo', function (require, exports, module) {
 
 
 bootstrap('@weex-component/foo', {
-  'transformerVersion': '0.1.0'
+  'transformerVersion': '0.0.1'
 })

src/js-framework/lib/__test__/test.js

@@ -423,6 +423,22 @@ describe('test input and output', function () {
     delete allDocs[name]
   })
 
+  it('repeat with index case', function () {
+    var name = 'repeat-index'
+    var inputCode = readInput(name)
+    var outputCode = readOutput(name)
+    var doc = new Document(name)
+    allDocs[name] = doc
+
+    framework.createInstance(name, inputCode)
+    var expected = eval('(' + outputCode + ')')
+    var actual = doc.toJSON()
+    expect(actual).eql(expected)
+
+    framework.destroyInstance(name)
+    delete allDocs[name]
+  })
+
   it('if-refresh case', function () {
     var name = 'if-refresh'
     var inputCode = readInput(name)
@@ -479,6 +495,22 @@ describe('test input and output', function () {
     delete allDocs[name]
   })
 
+  it('dynamic type case', function () {
+    var name = 'dynamic-type'
+    var inputCode = readInput(name)
+    var outputCode = readOutput(name)
+    var doc = new Document(name)
+    allDocs[name] = doc
+
+    framework.createInstance(name, inputCode)
+    var expected = eval('(' + outputCode + ')')
+    var actual = doc.toJSON()
+    expect(actual).eql(expected)
+
+    framework.destroyInstance(name)
+    delete allDocs[name]
+  })
+
   it('click case', function () {
     var name = 'click'
     var inputCode = readInput(name)

src/js-framework/lib/api/__test__/methods.js

@@ -68,7 +68,6 @@ describe('built-in', () => {
   })
 
   beforeEach(() => {
-    vm._app.differ = Promise.resolve()
     requireSpy.reset()
     moduleSpy.reset()
   })
@@ -80,7 +79,10 @@ describe('built-in', () => {
   describe('common apis', () => {
 
     it('$', () => {
-      expect(vm.$('a')).to.deep.equal(vm._ids.a.el)
+      global.nativeLog = sinon.spy()
+      expect(vm.$('a')).to.deep.equal(vm._ids.a.vm)
+      expect(global.nativeLog.callCount).to.be.equal(1)
+      global.nativeLog = undefined
     })
 
     it('$el', () => {

src/js-framework/lib/api/methods.js

@@ -10,16 +10,17 @@ import {typof, extend} from '../util'
  */
 
 /**
- * find the element by id
+ * @deprecated use $vm instead
+ * find the vm by id
  * Note: there is only one id in whole component
- * @alias $el
  * @param  {string} id
- * @return {Element}
+ * @return {Vm}
  */
 export function $(id) {
+  nativeLog('the Vm#$ api is deprecated, please use Vm#$vm instead')
   const info = this._ids[id]
   if (info) {
-    return info.el
+    return info.vm
   }
 }
 

src/js-framework/lib/app/__test__/bundle.js

@@ -186,7 +186,7 @@ describe('parsing a bundle file', () => {
       const ready = sinon.spy()
 
       before(() => {
-        global.needTransformerVersion = '~0.1.3'
+        global.needTransformerVersion = '~0.1'
         app.define('@weex-component/main', (require, exports, module) => {
           module.exports = {
             template: componentTemplate,

src/js-framework/lib/app/ctrl.js

@@ -99,24 +99,37 @@ export function updateActions(addonTasks) {
   }
 }
 
-export function fireEvent(ref, type, e) {
+export function fireEvent(ref, type, e, domChanges) {
+  if (Array.isArray(ref)) {
+    ref.some((ref) => {
+      return this.fireEvent(ref, type, e) !== false
+    })
+    return
+  }
+
   const el = this.doc.getRef(ref)
+
   if (el) {
     perf.start('manage event', ref + '-' + type)
     e = e || {}
     e.type = type
     e.target = el
     e.timestamp = Date.now()
-    this.eventManager.fire(el, type, e)
+    if (domChanges) {
+      updateElement(el, domChanges)
+    }
+    const result = this.eventManager.fire(el, type, e)
     perf.end('manage event', ref + '-' + type)
     this.updateActions()
-  } else {
-    return new Error(`invalid element reference "${ref}"`)
+    return result
   }
+
+  return new Error(`invalid element reference "${ref}"`)
 }
 
 export function callback(callbackId, data, ifLast) {
   const callback = this.callbacks[callbackId]
+
   if (typeof callback === 'function') {
     callback(data) // data is already a object, @see: lib/framework.js
 
@@ -125,9 +138,10 @@ export function callback(callbackId, data, ifLast) {
     }
 
     this.updateActions()
-  } else {
-    return new Error(`invalid callback id "${callbackId}"`)
+    return
   }
+
+  return new Error(`invalid callback id "${callbackId}"`)
 }
 
 export function refreshData(data) {
@@ -140,7 +154,20 @@ export function refreshData(data) {
       extend(vm, data)
     }
     this.updateActions([createAction('refreshFinish', [])])
-  } else {
-    return new Error(`invalid data "${data}"`)
+    return
+  }
+
+  return new Error(`invalid data "${data}"`)
+}
+
+function updateElement(el, changes) {
+  const attrs = changes.attrs || {}
+  for (const name in attrs) {
+    el.setAttr(name, attrs)
+  }
+  const style = changes.style || {}
+  for (const name in style) {
+    el.setStyle(name, style[name])
   }
 }
+

src/js-framework/lib/app/dom.js

@@ -460,6 +460,9 @@ function removeIfExisted(node) {
 }
 
 Element.prototype.setAttr = function (key, value) {
+  if (this.attr[key] === value) {
+    return
+  }
   this.attr[key] = value
   if (this.attached) {
     const renderer = this.getRenderer()
@@ -470,6 +473,9 @@ Element.prototype.setAttr = function (key, value) {
 }
 
 Element.prototype.setStyle = function (key, value) {
+  if (this.style[key] === value) {
+    return
+  }
   this.style[key] = value
   if (this.attached) {
     const renderer = this.getRenderer()

src/js-framework/lib/app/event.js

@@ -51,7 +51,7 @@ EventManager.prototype.fire = function (el, type, e) {
     el = target.el
     handler = target.events[type]
     if (typeof handler === 'function') {
-      handler.call(el, e)
+      return handler.call(el, e)
     }
   }
-}
+}

src/js-framework/lib/framework.js

@@ -28,14 +28,13 @@ var instanceMap = {}
  *
  * @param  {string} instanceId
  * @param  {string} code
- * @param  {object} [options] option `debug` enable print log
+ * @param  {object} [options] option `HAS_LOG` enable print log
  * @param  {object} [data]
  */
 export function createInstance(instanceId, code, options, data) {
   var instance = instanceMap[instanceId]
   options = options || {}
 
-  /* istanbul ignore if */
   config.debug = options.debug
 
   var result