This is a web component library thought to be:
- Light
- Minimalist
- Easy to use
- Simple to understand
- Similar to HTML (mainly in relation to the structure)
- Independent of preprocessor (or similar)
Just copy and paste this code chunk in your HTML file:
<script src="https://cdn.jsdelivr.net/npm/@duckafire/[email protected]/html.min.js"></script>[!TIP]
Put it in the<head>.
After this, run the JavaScript code below:
<script>
declare_htmljs();
</script>[!NOTE]
See more aboutdeclare_htmljshere.
[!TIP]
Put it after the request tag (presented above), in the<head>.
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 Creation Functions. They are used to create the elements.createObject: specifics that the methods have to be declared in a new object, that it will be created by the function.useUpperCase: specifics that the Creation Functions names have to be formated with upper case characters, instead lower case characteres.args: an object containing the wanted options (these above).
[!IMPORTANT]
Call any Creation Function without call this function (probably) will generate an error.
[!NOTE]
If!createObjectthe Creation Functions will be declared inwindow, that it also will be returned.
[!TIP]
Trydeclare_htmljs({useUpperCase: true})insteaddeclare_html(null, false, true).
To create a HTML element, you need to call its respective Creation Function like
shown below (their names are defined by [declare_htmljs][start-library]):
// create a <div> that it contains:
// * one text node
// * one `<br/>`
// * one `<span>` (that it contains one text node)
// * one `<input/>`
div( {className: "foo"},
"Lorem ipsum",
br(),
span( null,
"Lorem ipsum",
span),
input( {type: "text", value: "foobar", readOnly: "~"}),
div);[!TIP]
Defining a property as"~"makes it equal itself, in other words,open: "~"is equalopen: "open".
All these Creation Functions have the same parameter structure, the only difference it is their names/identifiers, because of this, I will not to list all them here, I will only explain their structure (of generic way):
{} CreationFunction( [htmlProperties: object = undefined, [...children: HTMLElement | string = undefined, [closeTag: any = undefined]]] )htmlProperties: all the HTML properties that will be implemented in the created element.children: all elements that will be appended in the created element. If it is a string, a text node will added to the element.closeTag: an optional stuff, to explicit the end of the element creation. I recommend that it to be equal the itself function (like the previous example). See this 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:
paddingTop;backgroundColor;fontSize.
[!IMPORTANT]
Deprecated tags are not available.
To disable the parameter closeTag of the Creation Functions it is necessary call the
functions below:
void htmljs_set_ignore_last( [ignore: boolean = false] )ignore: sets ifcloseTagis required by Creation Functions.
[!NOTE]
closeTagis required by default. Its value is global, it affects all the Creation Functions call that occur after that it is called.
[!TIP]
Run example.html (in your browser) to see how all these to work.
It also is possible to add yourself customized tags to the library, to do this it is necessary to use this function:
void htmljs_add_custom_tag(tag: string | array, [isNoContainer: boolean = false], [force: boolean = false])tag: tag, or list of tags, that will be saved, by the library, as a valid HTML tag.isNoContainer: specifics if the tag is a no-container or not.force: indicates that the addition of the tag must to be forced or not.
[!NOTE]
If!forceandtagalready was saved an error will occur.
It save the tag name in a library list, that it is used during the tag validations, what it avoid that the using of the customized tag throw an error.
In addition of the common element properties, the htmlProperties support the
properties bellow:
dataSets: a list of customized properties that will be prefixed bydata-.
SPAN({ dataSets: { property: "value" } });ariaAttributes: a list of properties that will be prefixed byaria-.
SPAN({ ariaProperties: { property: "value" } });eventListeners: a list of events that will be added to the created element.
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.
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 to more information about.
[!NOTE]
See more about these concepts bellow:
It is possible (un)set default values to elements properties. They are based in tags,
so if you define a default value (e.g.) to href, from <a>, all tags (<a>)
create after this will receive this default value automatically. But if during the
call of the Creation Function (of <a>) the href is defined, the default value
will be overrided.
void htmljs_set_default_properties_values(tag: string[, validateTag: boolean = false], htmlProperties: object)void htmljs_set_default_properties_values( [validateTag: boolean = false ,] args: object )tag: element whose properties will receive a, or more, default value(s).validateTag: specifics iftaghave to be validated (check if it exists or not).htmlProperties: all tags, and their default values, that will receive a default value.args: an object containing a list of tags, with their HTML properties.
[!NOTE]
These values are global, they affects all the Creation Functions call that occur after that it is called. Special Properties are included too, but their subproperties cannot receive a default value individually.
[!TIP]
This is a example of value toargs:{a: {href: "#"}, div: {className: "div"}}.
void htmljs_unset_default_properties_values(tag: string[, validateTag: boolean = false], htmlProperties: array)void htmljs_unset_default_properties_values( [validateTag: boolean = false ,] args: object )tag: element whose properties will lose a, or more, default value(s).validateTag: specifics iftaghave to be validated (check if it exists or not).htmlProperties: a list of properties that will lose their default values.args: an object containing a list of tags, with their HTML properties.
Important
The properties names used in this function must be equal the named used in
htmljs_set_default_properties_values. Therefore, if fontSize was set this
function only will recognize it - so "font-size" will not work.
[!NOTE]
These values are global, they affects all the Creation Functions call that occur after that it is called. Special Properties are included too, but their subproperties cannot receive a default value individually.
[!TIP]
This is a example of value toargs:{a: ["href"], div: ["className"]}.