@duckafire/html.js 0.1.1 → 0.2.2

package/README.md

@@ -3,6 +3,8 @@
 [data-property]: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/data-* "HTML attributes data-*"
 [aria-property]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA "Accessible Rich Internet Applications"
 [event-listeners]: https://www.w3schools.com/js/js_htmldom_eventlistener.asp "DOM Event Listeners"
+[style-property]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style "The HTML `style` property"
+[camel-case]: https://en.wikipedia.org/wiki/Camel_case "Understanding the camelCase"
 
 # html.js
 
@@ -89,10 +91,12 @@ below:
 ``` js
 // create a <div> that it contains two
 // "text nodes" and a <br> element
-div( null,
-	"foo foo"
-	br();
-	"bar bar"
+div( {className: "foo"},
+	"Lorem ipsum",
+	br(),
+	span( null,
+		"Lorem ipsum",
+	span),
 	input( {type: "text", value: "foobar", readOnly: "~"}),
 div);
 ```
@@ -115,6 +119,12 @@ will explain their structure.
 	              example). See [this](#closing-the-element-creation) to learn how to
 	              disable this optional parameter.
 
+> [!WARNING]
+> Unlike HTML and CSS, the JavaScript syntax do not support the use of the hyphen (`-`)
+> in identifiers name. So *compound properties* only can be declared:
+> * Between single/double quotes: `"padding-top"`; `"background-color"`; `"font-size"`.
+> * In [camelCase][camel-case]: `paddingTop`; `backgroundColor`; `fontSize`.
+
 > [!IMPORTANT]
 > Deprecated tags are not available.
 
@@ -161,12 +171,26 @@ SPAN({ eventListeners: { event: action } });
 SPAN({ eventListeners: { event: [action0, actionN] } });
 ```
 
+* `cssRules`: a list of CSS style rules and variables that will be added to the created
+element.
+
+``` js
+SPAN({ cssRules: { rule: value } });
+SPAN({ cssRules: { "--variable": value } });
+```
+
+> [!IMPORTANT]
+> These *compound properties* follow the same writing rules of the ***common***
+> *compound properties*. See [Create an element](#create-an-element) to more
+> information about.
+
 > [!NOTE]
 > See more about these concepts bellow:
 >
 > * [data-][data-property]
 > * [aria-][aria-property]
 > * [Event Listeners][event-listeners]
+> * [The `style` property][style-property]
 
 ### Other stuff
 

package/html.js

@@ -49,40 +49,62 @@ const __htmljs_element_tags__ = [
 	"tfoot", "th", "thead", "time", "title", "tr", "ul", "var", "video",
 ];
 
-const __htmljs_check_group_type__ = (property, htmlProperties) =>
+const __htmljs_set_prefixed_property__ = (prefix, elem, field, value) =>
 {
-	if(__htmljs_is_not_object__( htmlProperties[property] ))
-	{
-		__htmljs_debug_func__(new TypeError(`Invalid value attributed to \`${property}\`, expecting an object.`));
-		return false;
-	}
+	elem.setAttribute(prefix + "-" + field, value);
+}
 
-	return true;
+const __htmljs_data_sets__ = (elem, property, value) =>
+{
+	__htmljs_set_prefixed_property__("data", elem, property, value);
 }
 
-const __htmljs_set_group_of_attributes__ = (prefix, elem, property, htmlProperties) =>
+const __htmljs_aria_attributes__ = (elem, property, value) =>
 {
-	if(!__htmljs_check_group_type__(property, htmlProperties))
-		return;
+	__htmljs_set_prefixed_property__("aria", elem, property, value);
+}
 
-	for(const FIELD in htmlProperties[property])
-		elem.setAttribute(prefix + "-" + FIELD, htmlProperties[property][FIELD]);
-};
+const __htmljs_event_listeners__ = (elem, event, action) =>
+{
+	if(Array.isArray(action))
+		for(const ACTION of action)
+			elem.addEventListener(event, ACTION);
+	else
+		elem.addEventListener(event, action);
+}
+
+const __htmljs_css_rules__ = (elem, rule, value) =>
+{
+	if(rule.charAt(0) == "-") // it is a variable
+		elem.style.setProperty(rule, value);
+	else
+		elem.style[rule] = value;
+}
 
-const __htmljs_set_event_listeners__ = (elem, property, htmlProperties) =>
+const __htmljs_treat_special_properties__ = (elem, property, htmlProperties) =>
 {
-	if(!__htmljs_check_group_type__(property, htmlProperties))
-		return;
+	let behavior;
 
-	for(const EVENT in htmlProperties[property])
+	switch(property)
 	{
-		if(Array.isArray( htmlProperties[property][EVENT] ))
-			for(const LAMBDA of htmlProperties[property][EVENT])
-				elem.addEventListener(EVENT, LAMBDA);
-		else
-			elem.addEventListener(EVENT, htmlProperties[property][EVENT]);
+		case "dataSets":       behavior = __htmljs_data_sets__;       break;
+		case "ariaAttributes": behavior = __htmljs_aria_attributes__; break;
+		case "eventListeners": behavior = __htmljs_event_listeners__; break;
+		case "cssRules":       behavior = __htmljs_css_rules__;       break;
+		default: return false;
 	}
-};
+
+	if(__htmljs_is_not_object__( htmlProperties[property] ))
+	{
+		__htmljs_debug_func__(new TypeError(`Invalid value attributed to \`${property}\`, expecting an object.`));
+		return false;
+	}
+
+	for(const PROPERTY in htmlProperties[property])
+		behavior(elem, PROPERTY, htmlProperties[property][PROPERTY]);
+
+	return true;
+}
 
 const __htmljs_core__ = (elementTag, htmlProperties, ...children) =>
 {
@@ -105,17 +127,15 @@ const __htmljs_core__ = (elementTag, htmlProperties, ...children) =>
 			}
 
 			for(const PROPERTY in htmlProperties){
-				switch(PROPERTY)
-				{
-					case "dataSets":       __htmljs_set_group_of_attributes__("data", ELEM, PROPERTY, htmlProperties); continue;
-					case "ariaAttributes": __htmljs_set_group_of_attributes__("aria", ELEM, PROPERTY, htmlProperties); continue;
-					case "eventListeners": __htmljs_set_event_listeners__(            ELEM, PROPERTY, htmlProperties); continue;
-				}
-
-				ELEM[PROPERTY] =
-					htmlProperties[PROPERTY] == "~"
-						? PROPERTY
-						: htmlProperties[PROPERTY];
+				if(__htmljs_treat_special_properties__(ELEM, PROPERTY, htmlProperties))
+					continue;
+
+				const VALUE = (htmlProperties[PROPERTY] == "~" ? PROPERTY.toLowerCase() : htmlProperties[PROPERTY]);
+
+				if(ELEM[PROPERTY] !== undefined || PROPERTY == "className")
+					ELEM[PROPERTY] = VALUE;
+				else
+					ELEM.setAttribute(PROPERTY, VALUE);
 			}
 		}
 

package/html.min.js

@@ -1 +1 @@
-"use strict";let __htmljs_ignore_last__=1,__htmljs_debug_func__=console.warn;const __htmljs_is_not_object__=e=>"object"!=typeof e||Array.isArray(e),__htmljs_element_tags__=["area","base","br","col","hr","img","input","link","meta","source","track","wbr","a","abbr","address","article","audio","b","bdi","bdo","blockquote","body","button","canvas","caption","cite","code","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","html","i","iframe","ins","kbd","label","legend","li","main","map","mark","meter","nav","noscript","object","ol","optgroup","option","output","p","picture","pre","progress","q","rp","rt","ruby","samp","script","section","select","small","span","strong","sub","summary","sup","table","tbody","td","template","textarea","tfoot","th","thead","time","title","tr","ul","var","video"],__htmljs_check_group_type__=(e,t)=>!__htmljs_is_not_object__(t[e])||(__htmljs_debug_func__(new TypeError(`Invalid value attributed to \`${e}\`, expecting an object.`)),!1),__htmljs_set_group_of_attributes__=(e,t,_,r)=>{if(__htmljs_check_group_type__(_,r))for(const o in r[_])t.setAttribute(e+"-"+o,r[_][o])},__htmljs_set_event_listeners__=(e,t,_)=>{if(__htmljs_check_group_type__(t,_))for(const r in _[t])if(Array.isArray(_[t][r]))for(const o of _[t][r])e.addEventListener(r,o);else e.addEventListener(r,_[t][r])},__htmljs_core__=(e,t,..._)=>{const r=document.createElement(e);if(void 0!==t){let e="";const o=_.length-__htmljs_ignore_last__;if(null!==t){__htmljs_is_not_object__(t)&&(__htmljs_debug_func__(new TypeError(`Excepting Object to \`htmlProperties\`, instead "${typeof t}".`)),t={});for(const e in t){switch(e){case"dataSets":__htmljs_set_group_of_attributes__("data",r,e,t);continue;case"ariaAttributes":__htmljs_set_group_of_attributes__("aria",r,e,t);continue;case"eventListeners":__htmljs_set_event_listeners__(r,e,t);continue}r[e]="~"==t[e]?e:t[e]}}for(let t=0;t<o;t++)if("string"!=typeof _[t])if(_[t]instanceof HTMLElement){""!=e&&(r.appendChild(document.createTextNode(e)),e="");try{r.appendChild(_[t])}catch(e){__htmljs_debug_func__(e);break}}else __htmljs_debug_func__(new TypeError(`Excepting Object or String to \`children[${t}]\`, instead "${typeof _[t]}".`));else e+=(""==e?"":" ")+_[t];""!=e&&r.appendChild(document.createTextNode(e))}return r},htmljs_set_ignore_last=e=>{__htmljs_ignore_last__=e?1:0},htmljs_set_debug_mode=e=>{const t=typeof e;if("number"!=t)throw new TypeError(`Invalid mode type: "${t}". Use only integer numbers.`);if(e>2)throw new RangeError(`Invalid mode value: "${e}". Use only 0, 1, or 2.`);__htmljs_debug_func__=[()=>{},console.warn,e=>{throw e}][Math.floor(e)]},declare_htmljs=(...e)=>{let t,_,r;null!==e[0]&&"object"==typeof e[0]?({prefix:t,createObject:_,useUpperCase:r}=e[0]):[t,_,r]=e;const o=_?{}:window,s=t||"";let n;return __htmljs_element_tags__.forEach((e,t)=>{n=s+e,o[r?n.toUpperCase():n]=t<12?t=>__htmljs_core__(e,t):(t,..._)=>__htmljs_core__(e,t,..._)}),o};
+"use strict";let __htmljs_ignore_last__=1,__htmljs_debug_func__=console.warn;const __htmljs_is_not_object__=e=>"object"!=typeof e||Array.isArray(e),__htmljs_element_tags__=["area","base","br","col","hr","img","input","link","meta","source","track","wbr","a","abbr","address","article","audio","b","bdi","bdo","blockquote","body","button","canvas","caption","cite","code","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","head","header","hgroup","html","i","iframe","ins","kbd","label","legend","li","main","map","mark","meter","nav","noscript","object","ol","optgroup","option","output","p","picture","pre","progress","q","rp","rt","ruby","samp","script","section","select","small","span","strong","sub","summary","sup","table","tbody","td","template","textarea","tfoot","th","thead","time","title","tr","ul","var","video"],__htmljs_set_prefixed_property__=(e,t,_,r)=>{t.setAttribute(e+"-"+_,r)},__htmljs_data_sets__=(e,t,_)=>{__htmljs_set_prefixed_property__("data",e,t,_)},__htmljs_aria_attributes__=(e,t,_)=>{__htmljs_set_prefixed_property__("aria",e,t,_)},__htmljs_event_listeners__=(e,t,_)=>{if(Array.isArray(_))for(const r of _)e.addEventListener(t,r);else e.addEventListener(t,_)},__htmljs_css_rules__=(e,t,_)=>{"-"==t.charAt(0)?e.style.setProperty(t,_):e.style[t]=_},__htmljs_treat_special_properties__=(e,t,_)=>{let r;switch(t){case"dataSets":r=__htmljs_data_sets__;break;case"ariaAttributes":r=__htmljs_aria_attributes__;break;case"eventListeners":r=__htmljs_event_listeners__;break;case"cssRules":r=__htmljs_css_rules__;break;default:return!1}if(__htmljs_is_not_object__(_[t]))return __htmljs_debug_func__(new TypeError(`Invalid value attributed to \`${t}\`, expecting an object.`)),!1;for(const s in _[t])r(e,s,_[t][s]);return!0},__htmljs_core__=(e,t,..._)=>{const r=document.createElement(e);if(void 0!==t){let e="";const s=_.length-__htmljs_ignore_last__;if(null!==t){__htmljs_is_not_object__(t)&&(__htmljs_debug_func__(new TypeError(`Excepting Object to \`htmlProperties\`, instead "${typeof t}".`)),t={});for(const e in t){if(__htmljs_treat_special_properties__(r,e,t))continue;const _="~"==t[e]?e.toLowerCase():t[e];void 0!==r[e]||"className"==e?r[e]=_:r.setAttribute(e,_)}}for(let t=0;t<s;t++)if("string"!=typeof _[t])if(_[t]instanceof HTMLElement){""!=e&&(r.appendChild(document.createTextNode(e)),e="");try{r.appendChild(_[t])}catch(e){__htmljs_debug_func__(e);break}}else __htmljs_debug_func__(new TypeError(`Excepting Object or String to \`children[${t}]\`, instead "${typeof _[t]}".`));else e+=(""==e?"":" ")+_[t];""!=e&&r.appendChild(document.createTextNode(e))}return r},htmljs_set_ignore_last=e=>{__htmljs_ignore_last__=e?1:0},htmljs_set_debug_mode=e=>{const t=typeof e;if("number"!=t)throw new TypeError(`Invalid mode type: "${t}". Use only integer numbers.`);if(e>2)throw new RangeError(`Invalid mode value: "${e}". Use only 0, 1, or 2.`);__htmljs_debug_func__=[()=>{},console.warn,e=>{throw e}][Math.floor(e)]},declare_htmljs=(...e)=>{let t,_,r;null!==e[0]&&"object"==typeof e[0]?({prefix:t,createObject:_,useUpperCase:r}=e[0]):[t,_,r]=e;const s=_?{}:window,o=t||"";let a;return __htmljs_element_tags__.forEach((e,t)=>{a=o+e,s[r?a.toUpperCase():a]=t<12?t=>__htmljs_core__(e,t):(t,..._)=>__htmljs_core__(e,t,..._)}),s};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@duckafire/html.js",
   "author": "duckafire",
-  "version": "0.1.1",
+  "version": "0.2.2",
   "license": "Zlib",
   "description": "Just a very simple components library.",
   "keywords": ["front-end", "client", "html", "dom", "light", "components", "web", "simple", "minimalist", "easy"],