@duckafire/html.js 0.0.3 → 0.1.0

package/README.md

@@ -1,5 +1,8 @@
-[html-js]: ./html.js
-[example-html]: ./example.html
+[html-js]: ./html.js "html.js source file"
+[example-html]: ./example.html "html.js example"
+[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"
 
 # html.js
 
@@ -12,6 +15,16 @@ This is a web component library, thought to be:
 * Similar to HTML (mainly in relation to the structure)
 * Independent of preprocessor (or similar)
 
+### Topics
+
+* [Installing](#installing)
+* [How to use](#how-to-use)
+	* [Start library](#start-library)
+	* [Create an element](#create-an-element)
+	* [Closing the element creation](#closing-the-element-creation)
+	* [Special properties](#special-properties)
+	* [Other stuff](#other-stuff)
+
 ## Installing
 
 Just copy and paste this code chunk in your HTML file:
@@ -43,6 +56,7 @@ As mentioned earlier on, it is necessary call the functions bellow to
 start the library:
 
 * `{} declare_htmljs( [prefix: string = ""], [createObject: boolean = false], [useUpperCase: boolean = false] )`
+* `{} declare_htmljs( [ args: object = {[prefix: string = ""], [createObject: boolean = false], [useUpperCase: boolean = false]} ] )`
 	* `prefix`: prefixs the name of the functions/methods that are
 	            used to create the elements.
 	* `createObject`: specifics that the methods have to be declared
@@ -55,6 +69,9 @@ start the library:
 > If `createObject != true`, the methods will be declared in `window`, that
 > it also will be returned.
 
+> [!TIP]
+> Try `declare_htmljs({useUpperCase: true})` instead `declare_html(null, false, true)`.
+
 Call any function, from this library, without call this function (probably) will
 generate an error.
 
@@ -115,6 +132,37 @@ functions below:
 > [!TIP]
 > Run [example.html][example-html] (in your browser) to see how all these work.
 
+### Special properties
+
+In addition of the *common element properties*, the `htmlProperties` support the
+properties bellow:
+
+* `dataSets`: a list of customized properties that will be prefixed by `data-`.
+
+``` js
+SPAN({ dataSets: { property: "value" } });
+```
+
+* `ariaAttributes`: a list of properties that will be prefixed by `aria-`.
+
+``` js
+SPAN({ ariaProperties: { property: "value" } });
+```
+
+* `eventListeners`: a list of events that will be added to the created element.
+
+``` js
+SPAN({ eventListeners: { event: action } });
+SPAN({ eventListeners: { event: [action0, actionN] } });
+```
+
+> [!NOTE]
+> See more about these concepts bellow:
+>
+> * [data-][data-property]
+> * [aria-][aria-property]
+> * [Event Listeners][event-listeners]
+
 ### Other stuff
 
 In addition to the things present earlier, this library declare some other stuff, there

package/html.js

@@ -21,11 +21,12 @@
 // 3. This notice may not be removed or altered from any source distribution.
 
 let __htmljs_ignore_last__ = 1;
+let __htmljs_debug_func__  = console.warn;
 
 const __htmljs_is_not_object__ = (thing) =>
 {
 	return typeof thing != "object" || Array.isArray(thing);
-}
+};
 
 const __htmljs_element_tags__ = [
 	// NO-containers
@@ -48,6 +49,41 @@ const __htmljs_element_tags__ = [
 	"tfoot", "th", "thead", "time", "title", "tr", "ul", "var", "video",
 ];
 
+const __htmljs_check_group_type__ = (property, htmlProperties) =>
+{
+	if(__htmljs_is_not_object__( htmlProperties[property] ))
+	{
+		__htmljs_debug_func__(new TypeError(`Invalid value attributed to \`${property}\`, expecting an object.`));
+		return false;
+	}
+
+	return true;
+}
+
+const __htmljs_set_group_of_attributes__ = (prefix, elem, property, htmlProperties) =>
+{
+	if(!__htmljs_check_group_type__(property, htmlProperties))
+		return;
+
+	for(const FIELD in htmlProperties[property])
+		elem.setAttribute(prefix + "-" + FIELD, htmlProperties[property][FIELD]);
+};
+
+const __htmljs_set_event_listeners__ = (elem, property, htmlProperties) =>
+{
+	if(!__htmljs_check_group_type__(property, htmlProperties))
+		return;
+
+	for(const EVENT in htmlProperties[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]);
+	}
+};
+
 const __htmljs_core__ = (elementTag, htmlProperties, ...children) =>
 {
 	const ELEM = document.createElement(elementTag);
@@ -60,10 +96,33 @@ const __htmljs_core__ = (elementTag, htmlProperties, ...children) =>
 		if(htmlProperties !== null)
 		{
 			if(__htmljs_is_not_object__( htmlProperties ))
-				throw new TypeError(`Excepting Object to \`htmlProperties\`, instead "${typeof htmlProperties}".`);
+			{
+				__htmljs_debug_func__(new TypeError(`Excepting Object to \`htmlProperties\`, instead "${typeof htmlProperties}".`));
+				
+				// this allows to jump the for-loop below,
+				// if the Debug Mode is != 2
+				htmlProperties = {};
+			}
 
-			for(const property in htmlProperties)
-				ELEM[property] = htmlProperties[property]
+			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;
+				}
+
+				if(ELEM[PROPERTY] === undefined)
+				{
+					__htmljs_debug_func__(new TypeError(`Invalid property (${PROPERTY}) to ${ELEM.constructor.name}.`));
+					continue;
+				}
+
+				ELEM[PROPERTY] =
+					htmlProperties[PROPERTY] == "~"
+						? PROPERTY
+						: htmlProperties[PROPERTY];
+			}
 		}
 
 		for(let i = 0; i < ARGS_MAX; i++)
@@ -74,8 +133,11 @@ const __htmljs_core__ = (elementTag, htmlProperties, ...children) =>
 				continue;
 			}
 
-			if(__htmljs_is_not_object__( children[i] ))
-				throw new TypeError(`Excepting Object or String to \`children[${i}]\`, instead "${typeof children[i]}".`);
+			if(!(children[i] instanceof HTMLElement))
+			{
+				__htmljs_debug_func__(new TypeError(`Excepting Object or String to \`children[${i}]\`, instead "${typeof children[i]}".`));
+				continue;
+			}
 
 			if(textnode != "")
 			{
@@ -89,12 +151,12 @@ const __htmljs_core__ = (elementTag, htmlProperties, ...children) =>
 			}
 			catch(ex)
 			{
-				console.error(ex)
+				__htmljs_debug_func__(ex);
 				break;
 			}
 		}
 
-		if(textnode !== null)
+		if(textnode != "")
 			ELEM.appendChild(document.createTextNode( textnode ));
 	}
 
@@ -104,10 +166,34 @@ const __htmljs_core__ = (elementTag, htmlProperties, ...children) =>
 const htmljs_set_ignore_last = (ignore) =>
 {
 	__htmljs_ignore_last__ = ignore ? 1 : 0;
-}
+};
 
-const declare_htmljs = (prefix, createObject, useUpperCase) =>
+const htmljs_set_debug_mode = (mode) =>
 {
+	const TYPE = typeof mode;
+
+	if(TYPE != "number")
+		throw new TypeError(`Invalid mode type: "${TYPE}". Use only integer numbers.`);
+
+	if(mode > 2)
+		throw new RangeError(`Invalid mode value: "${mode}". Use only 0, 1, or 2.`);
+
+	__htmljs_debug_func__ = [
+		() => {},
+		console.warn,
+		(exception) => { throw exception; }
+	][ Math.floor(mode) ];
+};
+
+const declare_htmljs = (...args) =>
+{
+	let prefix, createObject, useUpperCase;
+
+	if(args[0] !== null && typeof args[0] == "object")
+		({prefix, createObject, useUpperCase} = args[0]);
+	else
+		[prefix, createObject, useUpperCase] = args;
+
 	const DEST = createObject ? {} : window;
 	const PREF = prefix || "";
 	let tag;

package/html.min.js

@@ -1 +1 @@
-"use strict";let __htmljs_ignore_last__=1;const __htmljs_is_not_object__=t=>"object"!=typeof t||Array.isArray(t),__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_core__=(t,e,...o)=>{const r=document.createElement(t);if(void 0!==e){let t="";const _=o.length-__htmljs_ignore_last__;if(null!==e){if(__htmljs_is_not_object__(e))throw new TypeError(`Excepting Object to \`htmlProperties\`, instead "${typeof e}".`);for(const t in e)r[t]=e[t]}for(let e=0;e<_;e++)if("string"!=typeof o[e]){if(__htmljs_is_not_object__(o[e]))throw new TypeError(`Excepting Object or String to \`children[${e}]\`, instead "${typeof o[e]}".`);""!=t&&(r.appendChild(document.createTextNode(t)),t="");try{r.appendChild(o[e])}catch(t){console.error(t);break}}else t+=(""==t?"":" ")+o[e];null!==t&&r.appendChild(document.createTextNode(t))}return r},htmljs_set_ignore_last=t=>{__htmljs_ignore_last__=t?1:0},declare_htmljs=(t,e,o)=>{const r=e?{}:window,_=t||"";let l;return __htmljs_element_tags__.forEach((t,e)=>{l=_+t,r[o?l.toUpperCase():l]=e<12?e=>__htmljs_core__(t,e):(e,...o)=>__htmljs_core__(t,e,...o)}),r};
+"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}void 0!==r[e]?r[e]="~"==t[e]?e:t[e]:__htmljs_debug_func__(new TypeError(`Invalid property (${e}) to ${r.constructor.name}.`))}}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};

package/package.json

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