@danielkalen/simplybind/benchmarks/src/VueJS@1.0.26/suite.coffee

Magically simple, framework-less one-way/two-way data binding for frontend/backend in ~5kb.

Vue.config.async = false

new TestSuite 
	'title': 'Input Update'
	'subtitle': 'Update the value of an input field 10,000 times'
	'measureMethod': 'sync'
	'warmUps': 100
	'timesToRun': 10000
	'setupFn': (container$)->
		_ = @
		@obj = 'prop':'value'
		currentValue = 0

		@getNewValue = ()-> "value#{currentValue++}"
		
		container$.html("<input type='text' v-model='prop' />")

		@app = new Vue 
			'el': container$.children()[0]
			'data': @obj


	'teardownFn': (container$)->
		@app.$destroy()
		container$.empty()

		delete @obj
		delete @app
		delete @getNewValue


	'testFn': ()-> @obj.prop = @getNewValue()








new TestSuite 
	'title': 'Input x100 Update'
	'subtitle': 'Update the value of 100 input fields 1,000 times'
	'measureMethod': 'sync'
	# 'warmUps': 10
	'timesToRun': 1000
	'setupFn': (container$)->
		_ = @
		@obj = 'prop':'value'
		currentValue = 0

		@getNewValue = ()-> "value#{currentValue++}"
		
		inputs = ("<input type='text' v-model='prop' />" for i in [1..100])
		container$.html("<div>#{inputs.join('')}</div>")

		@app = new Vue 
			'el': container$.children()[0]
			'data': @obj


	'teardownFn': (container$)->
		@app.$destroy()
		container$.empty()

		delete @obj
		delete @app
		delete @getNewValue


	'testFn': ()-> @obj.prop = @getNewValue()








new TestSuite 
	'title': 'Input Transform'
	'subtitle': 'Update the value of an input field 10,000 times and apply a transform function'
	'measureMethod': 'sync'
	'warmUps': 100
	'timesToRun': 10000
	'setupFn': (container$)->
		_ = @
		@obj = 'prop':'value'
		currentValue = 0

		@getNewValue = ()-> "value#{currentValue++}"
		
		container$.html("<input type='text' v-model='prop | customupper' />")

		Vue.filter 'customupper', (value)-> value.toUpperCase()
		@app = new Vue 
			'el': container$.children()[0]
			'data': @obj


	'teardownFn': (container$)->
		@app.$destroy()
		container$.empty()

		delete @obj
		delete @app
		delete @getNewValue


	'testFn': ()-> @obj.prop = @getNewValue()







new TestSuite 
	'title': 'Div HTML Update'
	'subtitle': 'Update the content of a div 10,000 times'
	'measureMethod': 'sync'
	'warmUps': 10000
	'timesToRun': 10000
	'setupFn': (container$)->
		_ = @
		currentValue = 0
		@obj = 'prop':'value'

		@getNewValue = ()-> "value#{currentValue++}"

		
		container$.html("<div>{{{prop}}}</div>")

		@app = new Vue 
			'el': container$.children()[0]
			'data': @obj


	'teardownFn': (container$)->
		@app.$destroy()
		container$.empty()

		delete @obj
		delete @app
		delete @getNewValue


	'testFn': ()-> @obj.prop = @getNewValue()







new TestSuite 
	'title': 'Div HTML Same Update'
	'subtitle': 'Update the content of a div with the same value 10,000 times'
	'measureMethod': 'sync'
	'warmUps': 10000
	'timesToRun': 10000
	'setupFn': (container$)->
		_ = @
		@obj = 'prop':'value'
		
		container$.html("<div>{{{prop}}}</div>")

		@app = new Vue 
			'el': container$.children()[0]
			'data': @obj


	'teardownFn': (container$)->
		@app.$destroy()
		container$.empty()

		delete @obj
		delete @app


	'testFn': ()-> @obj.prop = 'value'








new TestSuite 
	'title': 'Div HTML Placeholder'
	'subtitle': 'Update a placeholder in the content of a div 10,000 times'
	'measureMethod': 'sync'
	'timesToRun': 10000
	'setupFn': (container$)->
		_ = @
		currentValue = 0
		@obj = 'prop':'value'

		@getNewValue = ()-> "value#{currentValue++}"

		
		container$.html("<div>Current {{{prop}}} Works.</div>")

		@app = new Vue 
			'el': container$.children()[0]
			'data': @obj


	'teardownFn': (container$)->
		@app.$destroy()
		container$.empty()

		delete @obj
		delete @app
		delete @getNewValue


	'testFn': ()-> @obj.prop = @getNewValue()








new TestSuite 
	'title': 'Div HTML 250 Placeholders'
	'subtitle': 'Update 250 placeholders in the content of a div 1,000 times'
	'measureMethod': 'sync'
	'warmUps': 100
	'timesToRun': 1000
	'setupFn': (container$)->
		_ = @
		currentValue = 0
		@obj = 'prop':'value'

		@getNewValue = ()-> "value#{currentValue++}"
		
		value = '{{{prop}}}+\" \"+'.repeat(250)
		container$.html("<div>#{value}\"\"</div>")

		@app = new Vue 
			'el': container$.children()[0]
			'data': @obj

	'teardownFn': (container$)->
		@app.$destroy()
		container$.empty()

		delete @obj
		delete @app
		delete @getNewValue


	'testFn': ()-> @obj.prop = @getNewValue()







new TestSuite 
	'title': 'Div Text Update'
	'subtitle': 'Update the textContent of a div 10,000 times'
	'measureMethod': 'sync'
	'timesToRun': 10000
	'setupFn': (container$)->
		_ = @
		@obj = 'prop':'value'
		currentValue = 0
		
		@getNewValue = ()-> "value#{currentValue++}"
		
		container$.html("<div>{{prop}}</div>")

		@app = new Vue 
			'el': container$.children()[0]
			'data': @obj


	'teardownFn': (container$)->
		@app.$destroy()
		container$.empty()

		delete @obj
		delete @app


	'testFn': ()-> @obj.prop = @getNewValue()









new TestSuite 
	'title': 'Div Text Placeholder'
	'subtitle': 'Update a placeholder in the textContent of a div 10,000 times'
	'measureMethod': 'sync'
	'timesToRun': 10000
	'setupFn': (container$)->
		_ = @
		currentValue = 0
		@obj = 'prop':'value'

		@getNewValue = ()-> "value#{currentValue++}"

		
		container$.html("<div>Current {{prop}} Works.</div>")

		@app = new Vue 
			'el': container$.children()[0]
			'data': @obj


	'teardownFn': (container$)->
		@app.$destroy()
		container$.empty()

		delete @obj
		delete @app
		delete @getNewValue


	'testFn': ()-> @obj.prop = @getNewValue()










new TestSuite 
	'title': 'Create 1k DOM Els'
	'subtitle': 'Create 1000 elements from array & insert into a div'
	'measureMethod': 'sync'
	'warmUps': 10
	'timesToRun': 10
	'setupFn': (container$)->
		@obj = 'divs':[]
		@offset = 0
		_ = @
		
		container$.html("<div v-for='value in divs'>{{value}}</div>")

		@app = new Vue 
			'el': container$.children()[0]
			'data': @obj


	'teardownFn': (container$)->
		@app.$destroy()
		container$.empty()

		delete @obj
		delete @app
		delete @getNewValue


	'testFn': ()->
		@obj.divs = (i+@offset for i in [1..1000])
		@offset += 1000
		return








new TestSuite 
	'title': 'Update 1k DOM Els'
	'subtitle': 'Update 1000 existing elements 100 times'
	'measureMethod': 'sync'
	# 'warmUps': 100
	'timesToRun': 100
	'setupFn': (container$)->
		@obj = 'prop':'value', 'divs': (i for i in [1..1000])
		currentValue = 0
		_ = @
	
		@getNewValue = ()-> "value#{currentValue++}"

		@updateValue = ()=>
			@obj.prop = @getNewValue()

		container$.html("<div v-for='value in divs'>{{prop}}</div>")

		@app = new Vue 
			'el': container$.children()[0]
			'data': @obj



	'teardownFn': (container$)->
		@app.$destroy()
		container$.empty()

		delete @obj
		delete @app
		delete @getNewValue


	'testFn': ()-> @obj.prop = @getNewValue()








# new TestSuite 
# 	'title': 'Update 1k DOM Els'
# 	'subtitle': 'Update 1000 existing elements 100 times'
# 	'measureMethod': 'sync'
# 	# 'warmUps': 100
# 	'timesToRun': 100
# 	'setupFn': (container$)->
# 		currentValue = 0
# 		@obj = 'prop':'value'
# 		_ = @
	
# 		@getNewValue = ()->
# 			currentValue = !currentValue
# 			return if currentValue then 'valueA' else 'valueB'

# 		component = "
# 			<div>
# 				<div ng-app='ANGULAR' ng-controller='CONTROLLER'>
# 				</div>
# 			</div>
# 		"
# 		container$.html(component)
# 		container$.find('div[ng-app="ANGULAR"]').html ("<div>{{obj.prop}}</div>" for i in [1..1000])

# 		@app = angular.module('ANGULAR', []).controller 'CONTROLLER', ($scope)=>
# 			$scope.obj = @obj
# 			@appScope = $scope

# 		angular.bootstrap container$.children()[0], ['ANGULAR']

# 		return

# 	'teardownFn': (container$)->
# 		@app.$destroy()
# 		container$.empty()

# 		delete @obj
# 		delete @app
# 		delete @getNewValue


# 	'testFn': ()-> @obj.prop = @getNewValue()