A plugin for Vue.JS to help beginners

trace.coffee

# Only works on named components
# Vue.use( require('src/plugins/trace') )

# npm install -g coffee-script
# coffee -bc trace.coffee

css = (color = 'black') -> "
	background: #{color};
	font-weight: bold;
	color: white;
"

hookFunction = (message) ->
	->
		if (component = @$options.name)?
			console.log "#{@_uid}) #{component} %c #{message} ", css()
		return

hooksLogger = {}
for hook in [
		'created',
		'beforeDestroy', 'destroyed',
		'beforeMount', 'mounted',
		'activated', 'deactivated'
	]
	hooksLogger[hook] = hookFunction hook

wrapFunction = (func, message, color) ->
	->
		console.log "#{@_uid}) #{message}", css color
		func.apply @, arguments

wrapObject = (object, message, color) ->
	for key, value of object when typeof value is 'function'
		object[key] = wrapFunction value, "#{message} %c #{key} ", color
	return

wrappedAlready = Symbol 'Trace plugin has been applied to this object already'

markAsWrapped = (object) ->
	return if !object? or wrappedAlready of object
	object[wrappedAlready] = true

methodsLogger = (prop, color) ->
	beforeCreate: ->
		object = @$options[prop]
		if markAsWrapped object
			if (component = @$options.name)?
				wrapObject object, "#{component} - #{prop}", color
		return

module.exports =

	install: (Vue, options) ->
		Vue.mixin methodsLogger 'computed', 'green'
		Vue.mixin methodsLogger 'methods', 'blue'
		Vue.mixin methodsLogger 'watch', 'red'
		Vue.mixin hooksLogger
		return