jeefo_component - npm Package Compare versions

Comparing version 0.0.11 to 0.0.12

binder.js

 /* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.
 * File Name   : binder.js
 * Created at  : 2017-09-06
-* Updated at  : 2017-09-17
+* Updated at  : 2017-11-04
 * Author      : jeefo
@@ -10,4 +10,4 @@ * Purpose     :
 
-var parser   = require("./parser"),
-	Observer = require("./observer"),
+var Input       = require("./input"),
+	Observer    = require("./observer"),
 	object_keys = Object.keys,
@@ -17,8 +17,8 @@
 
-bind_one_way = function ($parser, controller, controller_property) {
+bind_one_way = function (input, controller, controller_property) {
 	return {
-		value      : controller[controller_property] = $parser.get(),
-		$parser    : $parser,
+		input      : input,
+		value      : controller[controller_property] = input.invoke(),
 		is_changed : function () {
-			var value = controller[controller_property] = this.$parser.get();
+			var value = controller[controller_property] = this.input.invoke();
 			if (this.value !== value) {
@@ -32,12 +32,10 @@ this.value = value;
 
-bind_two_way = function ($parser, controller, controller_property) {
-	var change_detector = bind_one_way($parser, controller, controller_property);
+bind_two_way = function (input, controller, controller_property) {
+	var change_detector = bind_one_way(input, controller, controller_property);
 
+	input.build_setter();
+
 	change_detector.observer = new Observer(controller);
 	change_detector.observer.$on(controller_property, function (value) {
-		var is_succeed = change_detector.$parser.set(value);
-		if (! is_succeed) {
-			is_succeed = true;
-			//controller[controller_property] = void 0;
-		}
+		input.set(value);
 	});
@@ -63,15 +61,17 @@
 
-		var value = attrs.get(key) || prop;
+		var value = attrs.get(key);
 
 		if (operator === '@') {
+			if (! value) { return; }
+
 			controller[prop] = value.replace(PLACEHOLDER_REGEX, function (sub, param) {
 				param = param.trim();
-				var $parser = parser(component, param),
-					_value  = $parser.get();
+				var input  = new Input(component, param),
+					_value = input.invoke();
 
 				change_detectors.push({
+					input      : input,
 					value      : _value,
-					$parser    : $parser,
 					is_changed : function () {
-						var _value = this.$parser.get();
+						var _value = this.input.invoke();
 						if (this.value !== _value) {
@@ -95,18 +95,13 @@ controller[prop] = value.replace(PLACEHOLDER_REGEX, function (_sub, _param) {
 		} else {
-			var $parser = parser(component, value);
+			var input = new Input(component, value || prop);
 			
-			if ($parser.is_primitive) {
-				controller[prop] = $parser.value;
-				return;
-			}
-
 			switch (operator) {
 				case '=' :
-					change_detectors.push(bind_two_way($parser, controller, prop));
+					change_detectors.push(bind_two_way(input, controller, prop));
 					break;
 				case '<' :
-					change_detectors.push(bind_one_way($parser, controller, prop));
+					change_detectors.push(bind_one_way(input, controller, prop));
 					break;
 				case '!' :
-					controller[prop] = $parser.get();
+					controller[prop] = input.invoke();
 					break;
@@ -113,0 +108,0 @@ default:

component.js

 /* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.
 * File Name   : component.js
 * Created at  : 2017-07-24
-* Updated at  : 2017-09-19
+* Updated at  : 2017-10-29
 * Author      : jeefo
 * Purpose     : Make possible to create a self contained web component.
-* Description : Internal class of Jeefo-Framework's jeefo.directive module.
+* Description : Internal class of Jeefo-Framework.
 _._._._._._._._._._._._._._._._._._._._._.*/
@@ -50,6 +50,5 @@
 	$q           = assign({}, require("jeefo_q")),
+	Input        = require("./input"),
 	Events       = require("jeefo_template/events"),
 	jqlite       = require("jeefo_jqlite"),
-	parser       = require("./parser"),
-	$resource    = require("jeefo_resource"),
 	$animator    = require("jeefo_animate"),
@@ -118,9 +117,16 @@ constructor  = require("./constructor"),
 // Listen events {{{1
+make_event_closur = function (input) {
+	return function (event) {
+		return input.invoke({ $event : event });
+	};
+},
+
 listen_events = function (component) {
 	var events   = component.events,
 		$element = component.$element,
-		names = events.keys, i = names.length;
+		names = events.keys, i = names.length, input;
 
 	while (i--) {
-		$element.on(names[i], parser(component, events.values[names[i]]).get());
+		input = new Input(component, events.values[names[i]]);
+		$element.on(names[i], make_event_closur(input));
 	}
@@ -127,0 +133,0 @@

constructor.js

 /* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.
 * File Name   : constructor.js
 * Created at  : 2017-08-11
-* Updated at  : 2017-09-19
+* Updated at  : 2017-10-06
 * Author      : jeefo
@@ -10,17 +10,5 @@ * Purpose     :
 
-var parser = require("./parser"),
-	binder = require("./binder"),
+var binder = require("./binder");
 
-parser_wrapper = function (component) {
-	var $parser = function (code) {
-		return parser(component, code);
-	};
-	$parser.find_controller = function (code) {
-		return parser.find_controller(component, code);
-	};
-
-	return $parser;
-};
-
-module.exports = function (component, instance, is_component) {
+module.exports = function constructor (component, instance) {
 	var definition = instance.definition;
@@ -32,2 +20,3 @@ if (! definition.controller) {
 	var controller = instance.controller = new definition.controller.Controller();
+	instance.controller_as = definition.controller_as;
 
@@ -50,5 +39,2 @@ if (definition.bindings) {
 					break;
-				case "$parser" :
-					args[i] = parser_wrapper(is_component ? component.parent : component);
-					break;
 				case "$component" :
@@ -55,0 +41,0 @@ args[i] = component;

directives/for_each_directive.js

 /* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.
 * File Name   : for_each_directive.js
 * Created at  : 2017-07-25
-* Updated at  : 2017-09-20
+* Updated at  : 2017-11-01
 * Author      : jeefo
@@ -10,19 +10,63 @@ * Purpose     :
 
-var Input         = require("./input"),
-	parser        = require("./parser"),
+var Input         = require("../input"),
 	jqlite        = require("jeefo_jqlite"),
+	parser        = require("../input/parser"),
 	$animator     = require("jeefo_animate"),
 	compile_nodes = require("../compiler/nodes");
 
-var build = function (input, code) {
-	var expr = parser.parse(code)[0].expression;
+var add_children = function (instance, values) {
+	var i        = values.length,
+		prop     = instance.$variable,
+		_values  = [],
+		children = instance.$component.children,
+		stagger_index = 0, value, index;
 
-	input.name = expr.left.name;
+	while (i--) {
+		_values[i] = values[i];
+	}
 
-	input.init(code);
-	code = input.compile(expr.right);
+	i = children.length;
+	while (i--) {
+		value = children[i].controller[prop];
+		index = _values.indexOf(value);
+		if (index !== -1) {
+			_values.splice(index, 1);
+		}
+	}
 
-	input.build_getter(code);
+	for (i = 0; i < _values.length; ++i) {
+		value = _values[i];
+		index = values.indexOf(value);
+
+		instance.create_component(index, value, stagger_index++);
+	}
 };
 
+var remove_children = function (children, values, prop) {
+	var i = children.length, _children = [], value, index;
+
+	while (i--) {
+		_children[i] = children[i];
+	}
+
+	i = _children.length;
+	while (i--) {
+		value = _children[i].controller[prop];
+		index = values.indexOf(value);
+		if (index !== -1) {
+			_children.splice(i, 1);
+		}
+	}
+
+	i = _children.length;
+	while (i--) {
+		_children[i].remove();
+	}
+
+	i = children.length;
+	while (i--) {
+		children[i].controller.$index = i;
+	}
+};
+
 module.exports = {
@@ -35,7 +79,9 @@ priority : 1000,
 	controller : {
-		on_init : function ($parser, $component) {
-			this.$input     = new Input($parser);
+		on_init : function ($component) {
 			this.$component = $component;
 
-			build(this.$input, this.$expr);
+			var expr = parser.parse(this.$expr)[0].expression;
+
+			this.$input    = new Input($component, this.$expr.substring(expr.right.start.index));
+			this.$variable = expr.left.name;
 			
@@ -58,32 +104,21 @@ // Clone dom tree
 		on_digest : function () {
-			var i             = 0,
-				values        = this.$input.get(),
-				children      = this.$component.children,
-				stagger_index = 0,
-				removed_components;
+			var values   = this.$input.invoke(),
+				children = this.$component.children;
 
 			if (! values) { return; }
 
-			this.$last_element = this.$comment;
-			for (; i < values.length; ++i) {
-				if (children[i]) {
-					children[i].controller.$index     = i;
-					children[i].controller[this.name] = values[i];
-				} else {
-					this.create_component(i, values[i], stagger_index++);
+			if (values.length < children.length) {
+				remove_children(children, values, this.$variable);
+			} else if (values.length > children.length) {
+				add_children(this, values);
+			} else {
+				var i = values.length;
+				while (i--) {
+					children[i].controller.$index          = i;
+					children[i].controller[this.$variable] = values[i];
 				}
-
-				this.$last_element = children[i].$element;
 			}
 
-			if (i < children.length) {
-				removed_components = children.splice(i);
-				i = removed_components.length;
-				while (i--) {
-					removed_components[i].children[0].remove();
-				}
-
-				if (children.length) {
-					this.$last_element = children[children.length - 1].$element;
-				}
+			if (children.length) {
+				this.$last_element = children[children.length - 1].$element;
 			}
@@ -98,3 +133,3 @@ },
 			component.controller_as = self.name;
-			component.controller[self.$input.name] = value;
+			component.controller[self.$variable] = value;
 			
@@ -104,4 +139,8 @@ compile_nodes([node], component).then(function (fragment) {
 
-				self.$component.children[index] = component;
-				self.$last_element.after(fragment);
+				if (self.$component.children[index - 1]) {
+					self.$component.children[index - 1].$element.after(fragment);
+				} else {
+					self.$comment.after(fragment);
+				}
+				self.$component.children.splice(index, 0, component);
 
@@ -108,0 +147,0 @@ $animator.enter(component.$element, stagger_index);

directives/if_directive.js

 /* -.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.
 * File Name   : if_directive.js
 * Created at  : 2017-09-17
-* Updated at  : 2017-09-20
+* Updated at  : 2017-11-06
 * Author      : jeefo
@@ -10,17 +10,7 @@ * Purpose     :
 
-var Input         = require("./input"),
-	parser        = require("./parser"),
+var Input         = require("../input"),
 	jqlite        = require("jeefo_jqlite"),
 	$animator     = require("jeefo_animate"),
-	compile_nodes = require("../compiler/nodes"),
+	compile_nodes = require("../compiler/nodes");
 
-build = function (input, code) {
-	var expr = parser.parse(code)[0].expression;
-
-	input.init(code);
-	code = input.compile(expr);
-
-	input.build_getter(code);
-};
-
 module.exports = {
@@ -33,7 +23,5 @@ priority : 900,
 	controller : {
-		on_init : function ($parser, $component) {
-			this.$input     = new Input($parser);
+		on_init : function ($component) {
+			this.$input     = new Input($component, this.$condition);
 			this.$component = $component;
-
-			build(this.$input, this.$condition);
 			
@@ -48,6 +36,6 @@ // Clone dom tree
 
-			this.on_change();
+			this.on_digest();
 		},
-		on_change : function () {
-			if (this.$input.get()) {
+		on_digest : function () {
+			if (this.$input.invoke()) {
 				if (! this.$is_rendered) {
@@ -58,21 +46,22 @@ this.create_component();
 			} else if (this.$is_rendered) {
-
+				this.$component.children[0].remove();
+				this.$is_rendered = false;
 			}
 		},
 		create_component : function () {
-			var node            = this.node.clone(),
-				comment         = this.$comment,
-				child_component = this.$child_component = this.$component.inherit();
+			var self      = this,
+				node      = self.node.clone(),
+				comment   = self.$comment,
+				component = self.$component.inherit();
 
-			compile_nodes([node], this.$child_component).then(function (fragment) {
+			compile_nodes([node], component).then(function (fragment) {
+				component.$element = jqlite(fragment.firstChild);
+
 				comment.after(fragment);
-				child_component.trigger_render();
+				self.$component.children.push(component);
+
+				component.trigger_render();
 			});
 		},
-		on_render : function () {
-			if (this.$child_component) {
-				this.$child_component.trigger_render();
-			}
-		}
 	}
 };

package.json

 {
   "name": "jeefo_component",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "Part of jeefo framework",
@@ -5,0 +5,0 @@ "author": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

56398

decreased by-1.56%

Number of package files

30

decreased by-9.09%

Lines of code

1814

decreased by-2.89%

No dependency changes