@duckafire/html.js 0.0.2-1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +19 -0
- package/README.md +130 -0
- package/html.js +121 -0
- package/package.json +31 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
Zlib License
|
|
2
|
+
|
|
3
|
+
Copyright (C) 2025 DuckAfire <duckafire.github.io/nest>
|
|
4
|
+
|
|
5
|
+
This software is provided 'as-is', without any express or implied
|
|
6
|
+
warranty. In no event will the authors be held liable for any damages
|
|
7
|
+
arising from the use of this software.
|
|
8
|
+
|
|
9
|
+
Permission is granted to anyone to use this software for any purpose,
|
|
10
|
+
including commercial applications, and to alter it and redistribute it
|
|
11
|
+
freely, subject to the following restrictions:
|
|
12
|
+
|
|
13
|
+
1. The origin of this software must not be misrepresented; you must not
|
|
14
|
+
claim that you wrote the original software. If you use this software
|
|
15
|
+
in a product, an acknowledgment in the product documentation would be
|
|
16
|
+
appreciated but is not required.
|
|
17
|
+
2. Altered source versions must be plainly marked as such, and must not be
|
|
18
|
+
misrepresented as being the original software.
|
|
19
|
+
3. This notice may not be removed or altered from any source distribution.
|
package/README.md
ADDED
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
[html-js]: ./html.js
|
|
2
|
+
[example-html]: ./example.html
|
|
3
|
+
|
|
4
|
+
# html.js
|
|
5
|
+
|
|
6
|
+
This is a web component library, thought to be:
|
|
7
|
+
|
|
8
|
+
* Light
|
|
9
|
+
* Minimalist
|
|
10
|
+
* Easy to use
|
|
11
|
+
* Simple to understand
|
|
12
|
+
* Similar to HTML (mainly in relation to the structure)
|
|
13
|
+
* Independent of preprocessor (or similar)
|
|
14
|
+
|
|
15
|
+
## Installing
|
|
16
|
+
|
|
17
|
+
Just copy and paste this code chunk in your HTML file:
|
|
18
|
+
|
|
19
|
+
``` html
|
|
20
|
+
<script src="https://cdn.jsdelivr.net/npm/@duckafire/html.js@0.0.2/html.min.js"></script>
|
|
21
|
+
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
> [!TIP]
|
|
25
|
+
> Put it in the `<head>`.
|
|
26
|
+
|
|
27
|
+
After this, run the JavaScript code below:
|
|
28
|
+
|
|
29
|
+
``` html
|
|
30
|
+
<script>
|
|
31
|
+
get_htmljs();
|
|
32
|
+
</script>
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
> [!NOTE]
|
|
36
|
+
> See more about `get_htmljs` [here](#start-library).
|
|
37
|
+
|
|
38
|
+
## How to use
|
|
39
|
+
|
|
40
|
+
### Start library
|
|
41
|
+
|
|
42
|
+
As mentioned earlier on, it is necessary call the functions bellow to
|
|
43
|
+
start the library:
|
|
44
|
+
|
|
45
|
+
* `{} get_htmljs( [prefix: string = ""], [createObject: boolean = false] )`
|
|
46
|
+
* `prefix`: prefixs the name of the functions/methods that are
|
|
47
|
+
used to create the elements.
|
|
48
|
+
* `createObject`: specifics that the methods have to be declared
|
|
49
|
+
in a new object, that it will be created by the
|
|
50
|
+
functions.
|
|
51
|
+
|
|
52
|
+
> [!NOTE]
|
|
53
|
+
> If `createObject != true`, the methods will be declared in `window`, that
|
|
54
|
+
> it also will be returned.
|
|
55
|
+
|
|
56
|
+
Call any function, from this library, without call this function (probably) will
|
|
57
|
+
generate an error.
|
|
58
|
+
|
|
59
|
+
> [!NOTE]
|
|
60
|
+
> Originally, the plan was declare them as constants (like `const div = (...`), but
|
|
61
|
+
> it generate one problem: some of these names are too simple (like `a`, `b`, and `q`).
|
|
62
|
+
> It can cause some confusion, then I decided to allow that **you** can decide where
|
|
63
|
+
> these methods have to be declared and how they have to look like.
|
|
64
|
+
|
|
65
|
+
### Create an element
|
|
66
|
+
|
|
67
|
+
To create a HTML element, you need to call its respective function/method, like shown
|
|
68
|
+
below:
|
|
69
|
+
|
|
70
|
+
``` js
|
|
71
|
+
// create a <div> that it contains two
|
|
72
|
+
// text nodes and a `<br>` element
|
|
73
|
+
div(
|
|
74
|
+
null,
|
|
75
|
+
"foo foo"
|
|
76
|
+
br();
|
|
77
|
+
"bar bar"
|
|
78
|
+
div);
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
All these functions/methods have the same parameter structure, the only difference it
|
|
82
|
+
is their names/identifiers, because of this, I will not to list all them here, but I
|
|
83
|
+
will explain their structure.
|
|
84
|
+
|
|
85
|
+
* `{} foo( [htmlProperties: object = undefined, [...children: object | string = undefined, [closeTag: any = undefined]]] )`
|
|
86
|
+
* `htmlProperties`: all the HTML properties that will be implemented in the created
|
|
87
|
+
element.
|
|
88
|
+
* `children`: all elements that will be appended in the created element. If it is a
|
|
89
|
+
string, a *text node* will added to the element.
|
|
90
|
+
* `closeTag`: an optional thing, to explicit the end of the element creation. I
|
|
91
|
+
recommend that it to be equal the itself function (like the previous
|
|
92
|
+
example). See [this](#closing-the-element-creation) to learn how to disable
|
|
93
|
+
this optional parameter.
|
|
94
|
+
|
|
95
|
+
> [!IMPORTANT]
|
|
96
|
+
> Deprecated tags are not available.
|
|
97
|
+
|
|
98
|
+
> [!NOTE]
|
|
99
|
+
> See [example.html][example-html] to obtain the list of available *tag-functions*
|
|
100
|
+
> (they are stored in `__htmljs_element_tags__`).
|
|
101
|
+
|
|
102
|
+
### Closing the element creation
|
|
103
|
+
|
|
104
|
+
To disable the parameter `closeTag` of the *tag-functions*, it is necessary call the
|
|
105
|
+
functions below:
|
|
106
|
+
|
|
107
|
+
* `undefined htmljs_set_ignore_last( [ignore: boolean = false] )`
|
|
108
|
+
* `ignore`: sets if `closeTag` is required by *tag-functions*.
|
|
109
|
+
|
|
110
|
+
> [!NOTE]
|
|
111
|
+
> `closeTag` is required by default. Its value is global, it affects all the
|
|
112
|
+
> *tag-functions* call that occur after that it is called.
|
|
113
|
+
|
|
114
|
+
> [!TIP]
|
|
115
|
+
> Run [example.html][example-html] (in your browser) to see how all these work.
|
|
116
|
+
|
|
117
|
+
### Other stuff
|
|
118
|
+
|
|
119
|
+
In addition to the things present earlier, this library declare some other stuff, there
|
|
120
|
+
are:
|
|
121
|
+
|
|
122
|
+
* `__htmljs_ignore_last__`
|
|
123
|
+
* `__htmljs_is_not_object__`
|
|
124
|
+
* `__htmljs_element_tags__`
|
|
125
|
+
* `__htmljs_core__`
|
|
126
|
+
|
|
127
|
+
They are global, and they are used by the library algorithms to that they do their work.
|
|
128
|
+
You **do not** have to use them directly (because of this they are between double
|
|
129
|
+
underscores). I will not explain more about them here, but you can get some information
|
|
130
|
+
about these stuff [here][html-js].
|
package/html.js
ADDED
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
// Zlib License
|
|
2
|
+
//
|
|
3
|
+
// Copyright (C) 2025 DuckAfire <duckafire.github.io/nest>
|
|
4
|
+
//
|
|
5
|
+
// This software is provided 'as-is', without any express or implied
|
|
6
|
+
// warranty. In no event will the authors be held liable for any damages
|
|
7
|
+
// arising from the use of this software.
|
|
8
|
+
//
|
|
9
|
+
// Permission is granted to anyone to use this software for any purpose,
|
|
10
|
+
// including commercial applications, and to alter it and redistribute it
|
|
11
|
+
// freely, subject to the following restrictions:
|
|
12
|
+
//
|
|
13
|
+
// 1. The origin of this software must not be misrepresented; you must not
|
|
14
|
+
// claim that you wrote the original software. If you use this software
|
|
15
|
+
// in a product, an acknowledgment in the product documentation would be
|
|
16
|
+
// appreciated but is not required.
|
|
17
|
+
// 2. Altered source versions must be plainly marked as such, and must not be
|
|
18
|
+
// misrepresented as being the original software.
|
|
19
|
+
// 3. This notice may not be removed or altered from any source distribution.
|
|
20
|
+
|
|
21
|
+
"use strict";
|
|
22
|
+
let __htmljs_ignore_last__ = 1;
|
|
23
|
+
const __HTMLJS_FIRST_CONTAINER_TAG_ID__ = 12;
|
|
24
|
+
|
|
25
|
+
const __htmljs_is_not_object__ = (thing) =>
|
|
26
|
+
{
|
|
27
|
+
return typeof thing != "object" || Array.isArray(thing);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
const __htmljs_element_tags__ = [
|
|
31
|
+
// NO-containers
|
|
32
|
+
"area", "base", "br", "col", "hr", "img", "input", "link",
|
|
33
|
+
"meta", "source", "track", "wbr", // wbr id == 11
|
|
34
|
+
|
|
35
|
+
// containers
|
|
36
|
+
"a", "abbr", "address", "article", "audio", "b", "bdi", "bdo",
|
|
37
|
+
"blockquote", "body", "button", "canvas", "caption", "cite",
|
|
38
|
+
"code", "colgroup", "data", "datalist", "dd", "del", "details",
|
|
39
|
+
"dfn", "dialog", "div", "dl", "dt", "em", "fieldset", "figcaption",
|
|
40
|
+
"figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6",
|
|
41
|
+
"head", "header", "hgroup", "html", "i", "iframe", "ins", "kbd",
|
|
42
|
+
"label", "legend", "li", "main", "map", "mark", "meter", "nav",
|
|
43
|
+
"noscript", "object", "ol", "optgroup", "option", "output", "p",
|
|
44
|
+
"picture", "pre", "progress", "q", "rp", "rt", "ruby", "samp",
|
|
45
|
+
"script", "section", "select", "small", "span", "strong", "sub",
|
|
46
|
+
"summary", "sup", "table", "tbody", "td", "template", "textarea",
|
|
47
|
+
"tfoot", "th", "thead", "time", "title", "tr", "ul", "var", "video",
|
|
48
|
+
];
|
|
49
|
+
|
|
50
|
+
const __htmljs_core__ = (elementTag, htmlProperties, ...children) =>
|
|
51
|
+
{
|
|
52
|
+
const ELEM = document.createElement(elementTag);
|
|
53
|
+
|
|
54
|
+
if(htmlProperties !== undefined)
|
|
55
|
+
{
|
|
56
|
+
let textnode = "";
|
|
57
|
+
const ARGS_MAX = children.length - __htmljs_ignore_last__;
|
|
58
|
+
|
|
59
|
+
if(htmlProperties !== null)
|
|
60
|
+
{
|
|
61
|
+
if(__htmljs_is_not_object__( htmlProperties ))
|
|
62
|
+
throw new TypeError(`Excepting Object to \`htmlProperties\`, instead "${typeof htmlProperties}".`);
|
|
63
|
+
|
|
64
|
+
for(const property in htmlProperties)
|
|
65
|
+
ELEM[property] = htmlProperties[property]
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
for(let i = 0; i < ARGS_MAX; i++)
|
|
69
|
+
{
|
|
70
|
+
if(typeof children[i] == "string")
|
|
71
|
+
{
|
|
72
|
+
textnode += (textnode == "" ? "" : " ") + children[i];
|
|
73
|
+
continue;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
if(__htmljs_is_not_object__( children[i] ))
|
|
77
|
+
throw new TypeError(`Excepting Object or String to \`children[${i}]\`, instead "${typeof children[i]}".`);
|
|
78
|
+
|
|
79
|
+
if(textnode != "")
|
|
80
|
+
{
|
|
81
|
+
ELEM.appendChild(document.createTextNode( textnode ));
|
|
82
|
+
textnode = "";
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
try
|
|
86
|
+
{
|
|
87
|
+
ELEM.appendChild( children[i] );
|
|
88
|
+
}
|
|
89
|
+
catch(ex)
|
|
90
|
+
{
|
|
91
|
+
console.error(ex)
|
|
92
|
+
break;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
if(textnode !== null)
|
|
97
|
+
ELEM.appendChild(document.createTextNode( textnode ));
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
return ELEM;
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
const htmljs_set_ignore_last = (ignore) =>
|
|
104
|
+
{
|
|
105
|
+
__htmljs_ignore_last__ = ignore ? 1 : 0;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
const declare_htmljs = (prefix, createObject) =>
|
|
109
|
+
{
|
|
110
|
+
const DEST = createObject ? {} : window;
|
|
111
|
+
const PREF = prefix || "";
|
|
112
|
+
|
|
113
|
+
__htmljs_element_tags__.forEach((elementTag, id) =>
|
|
114
|
+
{
|
|
115
|
+
DEST[ PREF + elementTag ] = (id < __HTMLJS_FIRST_CONTAINER_TAG_ID__)
|
|
116
|
+
? (properties) => __htmljs_core__(elementTag, properties)
|
|
117
|
+
: (properties, ...children) => __htmljs_core__(elementTag, properties, ...children);
|
|
118
|
+
});
|
|
119
|
+
|
|
120
|
+
return DEST;
|
|
121
|
+
};
|
package/package.json
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@duckafire/html.js",
|
|
3
|
+
"author": "duckafire",
|
|
4
|
+
"version": "0.0.2-1",
|
|
5
|
+
"license": "Zlib",
|
|
6
|
+
"description": "Just a very simple components library.",
|
|
7
|
+
"keywords": ["front-end", "client", "html", "dom", "light", "components", "web", "simple", "minimalist", "easy"],
|
|
8
|
+
"devDependencies": {
|
|
9
|
+
"terser": "^5.43.1"
|
|
10
|
+
},
|
|
11
|
+
"repository": {
|
|
12
|
+
"type": "git",
|
|
13
|
+
"url": "git+https://github.com/duckafire/html.js.git"
|
|
14
|
+
},
|
|
15
|
+
"scripts": {
|
|
16
|
+
"compress": "npx terser html.js -o html.min.js --compress --mangle"
|
|
17
|
+
},
|
|
18
|
+
"files": [
|
|
19
|
+
"LICENSE",
|
|
20
|
+
"README.md",
|
|
21
|
+
"html.js",
|
|
22
|
+
"html.min.js"
|
|
23
|
+
],
|
|
24
|
+
"custom-fields": {
|
|
25
|
+
"cloud-repostories": [
|
|
26
|
+
"https://github.com/duckafire/html.js.git",
|
|
27
|
+
"https://gitlab.com/duckafire/html.js.git",
|
|
28
|
+
"https://npmjs.com/package/@duckafire/html.js.git"
|
|
29
|
+
]
|
|
30
|
+
}
|
|
31
|
+
}
|