std-components 0.1.0

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.
Files changed (5) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +153 -0
  3. package/dist/index.d.ts +234 -0
  4. package/dist/index.js +471 -0
  5. package/package.json +35 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Thiago Delgado Pinto
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,153 @@
1
+ [![npm (tag)](https://img.shields.io/npm/v/std-components?color=green&label=NPM&style=for-the-badge)](https://github.com/thiagodp/std-components/releases)
2
+ [![License](https://img.shields.io/npm/l/std-components.svg?style=for-the-badge&color=green)](https://github.com/thiagodp/std-components/blob/master/LICENSE)
3
+ <!-- [![npm](https://img.shields.io/npm/dt/std-components?style=for-the-badge&color=green)](https://www.npmjs.com/package/std-components) -->
4
+
5
+ # std-components
6
+
7
+ > 🧩 Standard HTML components as functions
8
+
9
+ - 🌳 Composable, typed, [tree shakeable](https://en.wikipedia.org/wiki/Tree_shaking) functions that create standard DOM components.
10
+ - ⚡ No build step required.
11
+ - 🚀 Speed up the development of dynamic, performant, component-based front-end applications with vanilla JS/TS.
12
+
13
+
14
+ ## Install
15
+
16
+ ```bash
17
+ pnpm i std-components
18
+ ```
19
+
20
+ ## Example
21
+
22
+ Let's say that a users table like this...
23
+
24
+ ```html
25
+ ...
26
+ <table>
27
+ <thead>
28
+ <tr>
29
+ <th>User Name</th>
30
+ <th>E-mail</th>
31
+ <th>Actions</th>
32
+ </tr>
33
+ </thead>
34
+ <tbody></tbody>
35
+ </table>
36
+ ```
37
+
38
+ ...need to be fulfilled with rows like this, from user objects:
39
+
40
+ ```html
41
+ <tr>
42
+ <td>John Doe</td>
43
+ <td><a href="mailto:john@doe.com" >john@doe.com</a></td>
44
+ <td><button class="btn btn-danger" onclick="removeUser" >Remove</button></td>
45
+ </tr>
46
+ ```
47
+
48
+ Using `std-components`, you can create these rows like this:
49
+
50
+ ```ts
51
+ import { tr, td, a, button, fragment } from 'std-components';
52
+
53
+ function removeUser() { /*...*/ }
54
+
55
+ function userRow( user: { name: string, email: string } ): HTMLTableRowElement {
56
+ return tr( {},
57
+ td( {}, user.name ),
58
+ td( {}, a( { href: `mailto: ${user.email}` }, user.email ),
59
+ td( {},
60
+ button( {
61
+ class: 'btn btn-danger',
62
+ events: { click: removeUser }
63
+ }, 'Remove' )
64
+ )
65
+ );
66
+ }
67
+
68
+ const users = await getUsers();
69
+ const rows = users.map( u => userRow( u ) );
70
+ document.querySelector( 'tbody' ).append( fragment( ...rows ) ); // Fragment avoids DOM reflow
71
+ ```
72
+
73
+ The example above **without using** `std-components` would be:
74
+
75
+ ```ts
76
+ function removeUser() { /*...*/ }
77
+
78
+ function userRow( user: { name: string, email: string } ): HTMLTableRowElement {
79
+ const tdName = document.createElement( 'td' );
80
+ tdName.textContent = name;
81
+
82
+ const emailAnchor = document.createElement( 'a' );
83
+ emailAnchor.href = `mailto: ${user.email}`;
84
+ emailAnchor.textContent = user.email;
85
+
86
+ const tdEmail = document.createElement( 'td' );
87
+ tdEmail.append( emailAnchor );
88
+
89
+ const removeButton = document.createElement( 'button' );
90
+ removeButton.classList.add( 'btn btn-danger' );
91
+ removeButton.textContent = 'Remove';
92
+ removeButton.addEventListener( 'click', removeUser );
93
+
94
+ const tdActions = document.createElement( 'td' );
95
+ tdActions.append( removeButton );
96
+
97
+ const tr = document.createElement( 'tr' );
98
+ tr.append( tdName, tdEmail, tdActions );
99
+ return tr;
100
+ }
101
+
102
+ const users = await getUsers();
103
+ const rows = users.map( u => userRow( u ) );
104
+ const fragment = document.createDocumentFragment(); // Avoids DOM reflow
105
+ fragment.append( ...rows );
106
+ document.querySelector( 'tbody' ).append( fragment );
107
+ ```
108
+
109
+ ## API
110
+
111
+ * The API covers almost all [standard DOM elements ](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements), except deprecated ones.
112
+ * The functions have **the same name** as the HTML tags (except for `var_`, since `var` is a reserved word in JavaScript).
113
+ * Just import the desired functions and use them like in the example above.
114
+
115
+ Basic overall syntax:
116
+
117
+ ```typescript
118
+ function tag( props: {[key: string]: any} = {}, ...children: Array<string|Node|HTMLElement> ): HTMLElement
119
+ ```
120
+
121
+ where:
122
+ - `tag` is the desired tag (function), like `button`;
123
+ - `props` (optional) is an object with [DOM attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) you want to define in the tag;
124
+ - Example: `div( { class: 'card' } )`
125
+ - `children` (optional) are all child elements, separated by comma.
126
+ - Example:
127
+ ```js
128
+ article( { class: 'post' },
129
+ header( {},
130
+ title( {}, 'First Post' )
131
+ ),
132
+ p( {}, 'Hello, world!' )
133
+ )
134
+ ```
135
+
136
+ ### Special properties
137
+
138
+ - `events` is an object that allows to define [standard DOM events](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events) for the element.
139
+ - Example:
140
+ ```js
141
+ button( { events: { click: () => alert('Hi') } }, 'Say Hi' )
142
+ ```
143
+ - `is` is a [special property](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/is) that makes a standard HTML element behave like a defined customized built-in element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/is) for more.
144
+
145
+
146
+ ### Extra functions
147
+ - `fragment( ...children: Array<string|Node|HTMLElement> ): DocumentFragment` creates a [DocumentFragment](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment).
148
+ - `text( value: string = '' ): Text` creates a [text node](https://developer.mozilla.org/en-US/docs/Web/API/Document/createTextNode).
149
+ - `component< T extends HTMLElement >( tag: string, props: {[key: string]: any} = {}, ...children: Array<string|Node|HTMLElement> ): T` creates any DOM component. You probably won't need to use it.
150
+
151
+ ## License
152
+
153
+ [MIT](LICENSE) ©️ [Thiago Delgado Pinto](https://github.com/thiagodp)
package/dist/index.d.ts ADDED
@@ -0,0 +1,234 @@
1
+ //#region index.d.ts
2
+ type Props = {
3
+ [key: string]: any;
4
+ };
5
+ type Children = Array<string | Node | HTMLElement>;
6
+ /**
7
+ * Creates a component.
8
+ *
9
+ * @param tag Tag name
10
+ * @param props Component properties. Special properties are:
11
+ * - `is`: defines a string with the name of a custom, user-defined tag. Example: `component( 'my-tag', { 'is': 'my-tag' } )`
12
+ * - `events`: defines an object that can have events like 'click', 'keydown', etc. Example: `component( 'button', { events: { click: () => alert( 'hi' ) } } )`
13
+ * @param children Child elements
14
+ * @returns the component
15
+ */
16
+ declare function component<T extends HTMLElement>(tag: string, props?: Props, ...children: Children): T;
17
+ declare function fragment(...children: Children): DocumentFragment;
18
+ declare function text(value?: string): Text;
19
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/html */
20
+ declare function html(props?: Props, ...children: Children): HTMLHtmlElement;
21
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/head */
22
+ declare function head(props?: Props, ...children: Children): HTMLHeadElement;
23
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/body */
24
+ declare function body(props?: Props, ...children: Children): HTMLBodyElement;
25
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/header */
26
+ declare function header(props?: Props, ...children: Children): HTMLElement;
27
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/main */
28
+ declare function main(props?: Props, ...children: Children): HTMLElement;
29
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/footer */
30
+ declare function footer(props?: Props, ...children: Children): HTMLElement;
31
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/section */
32
+ declare function section(props?: Props, ...children: Children): HTMLElement;
33
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/article */
34
+ declare function article(props?: Props, ...children: Children): HTMLElement;
35
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/aside */
36
+ declare function aside(props?: Props, ...children: Children): HTMLElement;
37
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/nav */
38
+ declare function nav(props?: Props, ...children: Children): HTMLElement;
39
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/hgroup */
40
+ declare function hgroup(props?: Props, ...children: Children): HTMLElement;
41
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/h1 */
42
+ declare function h1(props?: Props, ...children: Children): HTMLHeadingElement;
43
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/h2 */
44
+ declare function h2(props?: Props, ...children: Children): HTMLHeadingElement;
45
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/h3 */
46
+ declare function h3(props?: Props, ...children: Children): HTMLHeadingElement;
47
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/h4 */
48
+ declare function h4(props?: Props, ...children: Children): HTMLHeadingElement;
49
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/h5 */
50
+ declare function h5(props?: Props, ...children: Children): HTMLHeadingElement;
51
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/h6 */
52
+ declare function h6(props?: Props, ...children: Children): HTMLHeadingElement;
53
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/div */
54
+ declare function div(props?: Props, ...children: Children): HTMLDivElement;
55
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/span */
56
+ declare function span(props?: Props, ...children: Children): HTMLSpanElement;
57
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/menu */
58
+ declare function menu(props?: Props, ...children: Children): HTMLMenuElement;
59
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/summary */
60
+ declare function summary(props?: Props, ...children: Children): HTMLElement;
61
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details */
62
+ declare function details(props?: Props, ...children: Children): HTMLDetailsElement;
63
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog */
64
+ declare function dialog(props?: Props, ...children: Children): HTMLDialogElement;
65
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/search */
66
+ declare function search(props?: Props, ...children: Children): HTMLElement;
67
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/canvas */
68
+ declare function canvas(props?: Props, ...children: Children): HTMLCanvasElement;
69
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/svg */
70
+ declare function svg(props?: Props, ...children: Children): HTMLOrSVGElement;
71
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/table */
72
+ declare function table(props?: Props, ...children: Children): HTMLTableElement;
73
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/thead */
74
+ declare function thead(props?: Props, ...children: Children): HTMLTableSectionElement;
75
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/tbody */
76
+ declare function tbody(props?: Props, ...children: Children): HTMLTableSectionElement;
77
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/tfoot */
78
+ declare function tfoot(props?: Props, ...children: Children): HTMLTableSectionElement;
79
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/th */
80
+ declare function th(props?: Props, ...children: Children): HTMLTableCellElement;
81
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/tr */
82
+ declare function tr(props?: Props, ...children: Children): HTMLTableRowElement;
83
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/td */
84
+ declare function td(props?: Props, ...children: Children): HTMLTableCellElement;
85
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/col */
86
+ declare function col(props?: Props, ...children: Children): HTMLTableColElement;
87
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/colgroup */
88
+ declare function colgroup(props?: Props, ...children: Children): HTMLTableSectionElement;
89
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/caption */
90
+ declare function caption(props?: Props, ...children: Children): HTMLTableCaptionElement;
91
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/title */
92
+ declare function title(props?: Props, ...children: Children): HTMLTitleElement;
93
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/link */
94
+ declare function link(props?: Props, ...children: Children): HTMLLinkElement;
95
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta */
96
+ declare function meta(props?: Props, ...children: Children): HTMLMetaElement;
97
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/style */
98
+ declare function style(props?: Props, ...children: Children): HTMLStyleElement;
99
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script */
100
+ declare function script(props?: Props, ...children: Children): HTMLScriptElement;
101
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/noscript */
102
+ declare function noscript(props?: Props, ...children: Children): HTMLElement;
103
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/template */
104
+ declare function template(props?: Props, ...children: Children): HTMLTemplateElement;
105
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/slot */
106
+ declare function slot(props?: Props, ...children: Children): HTMLSlotElement;
107
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a */
108
+ declare function a(props?: Props, ...children: Children): HTMLAnchorElement;
109
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/base */
110
+ declare function base(props?: Props, ...children: Children): HTMLBaseElement;
111
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img */
112
+ declare function img(props?: Props, ...children: Children): HTMLImageElement;
113
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture */
114
+ declare function picture(props?: Props, ...children: Children): HTMLPictureElement;
115
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/figure */
116
+ declare function figure(props?: Props, ...children: Children): HTMLElement;
117
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/figcaption */
118
+ declare function figcaption(props?: Props, ...children: Children): HTMLElement;
119
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/object */
120
+ declare function object(props?: Props, ...children: Children): HTMLObjectElement;
121
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/audio */
122
+ declare function audio(props?: Props, ...children: Children): HTMLAudioElement;
123
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/video */
124
+ declare function video(props?: Props, ...children: Children): HTMLVideoElement;
125
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/track */
126
+ declare function track(props?: Props, ...children: Children): HTMLTrackElement;
127
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe */
128
+ declare function iframe(props?: Props, ...children: Children): HTMLIFrameElement;
129
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source */
130
+ declare function source(props?: Props, ...children: Children): HTMLSourceElement;
131
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/embed */
132
+ declare function embed(props?: Props, ...children: Children): HTMLEmbedElement;
133
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/map */
134
+ declare function map(props?: Props, ...children: Children): HTMLMapElement;
135
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ul */
136
+ declare function ul(props?: Props, ...children: Children): HTMLUListElement;
137
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ol */
138
+ declare function ol(props?: Props, ...children: Children): HTMLOListElement;
139
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/li */
140
+ declare function li(props?: Props, ...children: Children): HTMLLIElement;
141
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dl */
142
+ declare function dl(props?: Props, ...children: Children): HTMLDListElement;
143
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dt */
144
+ declare function dt(props?: Props, ...children: Children): HTMLElement;
145
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dd */
146
+ declare function dd(props?: Props, ...children: Children): HTMLElement;
147
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form */
148
+ declare function form(props?: Props, ...children: Children): HTMLFormElement;
149
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/fieldset */
150
+ declare function fieldset(props?: Props, ...children: Children): HTMLFieldSetElement;
151
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/legend */
152
+ declare function legend(props?: Props, ...children: Children): HTMLLegendElement;
153
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label */
154
+ declare function label(props?: Props, ...children: Children): HTMLLabelElement;
155
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input */
156
+ declare function input(props?: Props, ...children: Children): HTMLInputElement;
157
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button */
158
+ declare function button(props?: Props, ...children: Children): HTMLButtonElement;
159
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select */
160
+ declare function select(props?: Props, ...children: Children): HTMLSelectElement;
161
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/datalist */
162
+ declare function datalist(props?: Props, ...children: Children): HTMLDataListElement;
163
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/data */
164
+ declare function data(props?: Props, ...children: Children): HTMLDataElement;
165
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/optgroup */
166
+ declare function optgroup(props?: Props, ...children: Children): HTMLOptGroupElement;
167
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/option */
168
+ declare function option(props?: Props, ...children: Children): HTMLOptionElement;
169
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/textarea */
170
+ declare function textarea(props?: Props, ...children: Children): HTMLTextAreaElement;
171
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/output */
172
+ declare function output(props?: Props, ...children: Children): HTMLOutputElement;
173
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/progress */
174
+ declare function progress(props?: Props, ...children: Children): HTMLProgressElement;
175
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meter */
176
+ declare function meter(props?: Props, ...children: Children): HTMLMeterElement;
177
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/p */
178
+ declare function p(props?: Props, ...children: Children): HTMLParagraphElement;
179
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/br */
180
+ declare function br(props?: Props): HTMLBRElement;
181
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/wbr */
182
+ declare function wbr(props?: Props): HTMLElement;
183
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/hr */
184
+ declare function hr(props?: Props): HTMLHRElement;
185
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/code */
186
+ declare function code(props?: Props, ...children: Children): HTMLElement;
187
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/var */
188
+ declare function var_(props?: Props, ...children: Children): HTMLElement;
189
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/samp */
190
+ declare function samp(props?: Props, ...children: Children): HTMLElement;
191
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/kdb */
192
+ declare function kdb(props?: Props, ...children: Children): HTMLElement;
193
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/pre */
194
+ declare function pre(props?: Props, ...children: Children): HTMLPreElement;
195
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/blockquote */
196
+ declare function blockquote(props?: Props, ...children: Children): HTMLQuoteElement;
197
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/q */
198
+ declare function q(props?: Props, ...children: Children): HTMLQuoteElement;
199
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/cite */
200
+ declare function cite(props?: Props, ...children: Children): HTMLElement;
201
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/abbr */
202
+ declare function abbr(props?: Props, ...children: Children): HTMLElement;
203
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dfn */
204
+ declare function dfn(props?: Props, ...children: Children): HTMLElement;
205
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/time */
206
+ declare function time(props?: Props, ...children: Children): HTMLTimeElement;
207
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/address */
208
+ declare function address(props?: Props, ...children: Children): HTMLElement;
209
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/sub */
210
+ declare function sub(props?: Props, ...children: Children): HTMLElement;
211
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/sup */
212
+ declare function sup(props?: Props, ...children: Children): HTMLElement;
213
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ruby */
214
+ declare function ruby(props?: Props, ...children: Children): HTMLElement;
215
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/rt */
216
+ declare function rt(props?: Props, ...children: Children): HTMLElement;
217
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/rp */
218
+ declare function rp(props?: Props, ...children: Children): HTMLElement;
219
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/bdo */
220
+ declare function bdo(props?: Props, ...children: Children): HTMLElement;
221
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/bdi */
222
+ declare function bdi(props?: Props, ...children: Children): HTMLElement;
223
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/em */
224
+ declare function em(props?: Props): HTMLElement;
225
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/strong */
226
+ declare function strong(props?: Props, ...children: Children): HTMLElement;
227
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/mark */
228
+ declare function mark(props?: Props): HTMLElement;
229
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/i */
230
+ declare function i(props?: Props, ...children: Children): HTMLElement;
231
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/b */
232
+ declare function b(props?: Props, ...children: Children): HTMLElement;
233
+ //#endregion
234
+ export { Props, a, abbr, address, article, aside, audio, b, base, bdi, bdo, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, component, data, datalist, dd, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, fragment, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img, input, kdb, label, legend, li, link, main, map, mark, menu, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, picture, pre, progress, q, rp, rt, ruby, samp, script, search, section, select, slot, source, span, strong, style, sub, summary, sup, svg, table, tbody, td, template, text, textarea, tfoot, th, thead, time, title, tr, track, ul, var_, video, wbr };
package/dist/index.js ADDED
@@ -0,0 +1,471 @@
1
+ //#region index.ts
2
+ /**
3
+ * Creates a component.
4
+ *
5
+ * @param tag Tag name
6
+ * @param props Component properties. Special properties are:
7
+ * - `is`: defines a string with the name of a custom, user-defined tag. Example: `component( 'my-tag', { 'is': 'my-tag' } )`
8
+ * - `events`: defines an object that can have events like 'click', 'keydown', etc. Example: `component( 'button', { events: { click: () => alert( 'hi' ) } } )`
9
+ * @param children Child elements
10
+ * @returns the component
11
+ */
12
+ function component(tag, props = {}, ...children) {
13
+ let el;
14
+ if (typeof props === "object") {
15
+ let creationOptions = void 0;
16
+ if (typeof props["is"] === "string") creationOptions = { is: props["is"] };
17
+ el = document.createElement(tag, creationOptions);
18
+ for (const p in props || {}) {
19
+ if (p === "is") continue;
20
+ const value = props[p];
21
+ if (p === "events") {
22
+ if (typeof value === "object") for (const event in value) {
23
+ const fn = value[event];
24
+ if (typeof fn === "function") el.addEventListener(event, fn);
25
+ }
26
+ continue;
27
+ }
28
+ el.setAttribute(p, value);
29
+ }
30
+ } else el = document.createElement(tag);
31
+ el.append(...children);
32
+ return el;
33
+ }
34
+ function fragment(...children) {
35
+ const el = document.createDocumentFragment();
36
+ el.append(...children);
37
+ return el;
38
+ }
39
+ function text(value = "") {
40
+ return document.createTextNode(value);
41
+ }
42
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/html */
43
+ function html(props = {}, ...children) {
44
+ return component("html", props, ...children);
45
+ }
46
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/head */
47
+ function head(props = {}, ...children) {
48
+ return component("head", props, ...children);
49
+ }
50
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/body */
51
+ function body(props = {}, ...children) {
52
+ return component("body", props, ...children);
53
+ }
54
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/header */
55
+ function header(props = {}, ...children) {
56
+ return component("header", props, ...children);
57
+ }
58
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/main */
59
+ function main(props = {}, ...children) {
60
+ return component("main", props, ...children);
61
+ }
62
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/footer */
63
+ function footer(props = {}, ...children) {
64
+ return component("footer", props, ...children);
65
+ }
66
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/section */
67
+ function section(props = {}, ...children) {
68
+ return component("section", props, ...children);
69
+ }
70
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/article */
71
+ function article(props = {}, ...children) {
72
+ return component("article", props, ...children);
73
+ }
74
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/aside */
75
+ function aside(props = {}, ...children) {
76
+ return component("aside", props, ...children);
77
+ }
78
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/nav */
79
+ function nav(props = {}, ...children) {
80
+ return component("nav", props, ...children);
81
+ }
82
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/hgroup */
83
+ function hgroup(props = {}, ...children) {
84
+ return component("hgroup", props, ...children);
85
+ }
86
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/h1 */
87
+ function h1(props = {}, ...children) {
88
+ return component("h1", props, ...children);
89
+ }
90
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/h2 */
91
+ function h2(props = {}, ...children) {
92
+ return component("h2", props, ...children);
93
+ }
94
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/h3 */
95
+ function h3(props = {}, ...children) {
96
+ return component("h3", props, ...children);
97
+ }
98
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/h4 */
99
+ function h4(props = {}, ...children) {
100
+ return component("h4", props, ...children);
101
+ }
102
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/h5 */
103
+ function h5(props = {}, ...children) {
104
+ return component("h5", props, ...children);
105
+ }
106
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/h6 */
107
+ function h6(props = {}, ...children) {
108
+ return component("h6", props, ...children);
109
+ }
110
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/div */
111
+ function div(props = {}, ...children) {
112
+ return component("div", props, ...children);
113
+ }
114
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/span */
115
+ function span(props = {}, ...children) {
116
+ return component("span", props, ...children);
117
+ }
118
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/menu */
119
+ function menu(props = {}, ...children) {
120
+ return component("menu", props, ...children);
121
+ }
122
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/summary */
123
+ function summary(props = {}, ...children) {
124
+ return component("summary", props, ...children);
125
+ }
126
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details */
127
+ function details(props = {}, ...children) {
128
+ return component("details", props, ...children);
129
+ }
130
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog */
131
+ function dialog(props = {}, ...children) {
132
+ return component("dialog", props, ...children);
133
+ }
134
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/search */
135
+ function search(props = {}, ...children) {
136
+ return component("search", props, ...children);
137
+ }
138
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/canvas */
139
+ function canvas(props = {}, ...children) {
140
+ return component("canvas", props, ...children);
141
+ }
142
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/svg */
143
+ function svg(props = {}, ...children) {
144
+ return component("svg", props, ...children);
145
+ }
146
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/table */
147
+ function table(props = {}, ...children) {
148
+ return component("table", props, ...children);
149
+ }
150
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/thead */
151
+ function thead(props = {}, ...children) {
152
+ return component("thead", props, ...children);
153
+ }
154
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/tbody */
155
+ function tbody(props = {}, ...children) {
156
+ return component("tbody", props, ...children);
157
+ }
158
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/tfoot */
159
+ function tfoot(props = {}, ...children) {
160
+ return component("tfoot", props, ...children);
161
+ }
162
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/th */
163
+ function th(props = {}, ...children) {
164
+ return component("th", props, ...children);
165
+ }
166
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/tr */
167
+ function tr(props = {}, ...children) {
168
+ return component("tr", props, ...children);
169
+ }
170
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/td */
171
+ function td(props = {}, ...children) {
172
+ return component("td", props, ...children);
173
+ }
174
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/col */
175
+ function col(props = {}, ...children) {
176
+ return component("col", props, ...children);
177
+ }
178
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/colgroup */
179
+ function colgroup(props = {}, ...children) {
180
+ return component("colgroup", props, ...children);
181
+ }
182
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/caption */
183
+ function caption(props = {}, ...children) {
184
+ return component("caption", props, ...children);
185
+ }
186
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/title */
187
+ function title(props = {}, ...children) {
188
+ return component("title", props, ...children);
189
+ }
190
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/link */
191
+ function link(props = {}, ...children) {
192
+ return component("link", props, ...children);
193
+ }
194
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta */
195
+ function meta(props = {}, ...children) {
196
+ return component("meta", props, ...children);
197
+ }
198
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/style */
199
+ function style(props = {}, ...children) {
200
+ return component("style", props, ...children);
201
+ }
202
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script */
203
+ function script(props = {}, ...children) {
204
+ return component("script", props, ...children);
205
+ }
206
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/noscript */
207
+ function noscript(props = {}, ...children) {
208
+ return component("noscript", props, ...children);
209
+ }
210
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/template */
211
+ function template(props = {}, ...children) {
212
+ return component("template", props, ...children);
213
+ }
214
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/slot */
215
+ function slot(props = {}, ...children) {
216
+ return component("slot", props, ...children);
217
+ }
218
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a */
219
+ function a(props = {}, ...children) {
220
+ return component("a", props, ...children);
221
+ }
222
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/base */
223
+ function base(props = {}, ...children) {
224
+ return component("base", props, ...children);
225
+ }
226
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img */
227
+ function img(props = {}, ...children) {
228
+ return component("img", props, ...children);
229
+ }
230
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture */
231
+ function picture(props = {}, ...children) {
232
+ return component("picture", props, ...children);
233
+ }
234
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/figure */
235
+ function figure(props = {}, ...children) {
236
+ return component("figure", props, ...children);
237
+ }
238
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/figcaption */
239
+ function figcaption(props = {}, ...children) {
240
+ return component("figcaption", props, ...children);
241
+ }
242
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/object */
243
+ function object(props = {}, ...children) {
244
+ return component("object", props, ...children);
245
+ }
246
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/audio */
247
+ function audio(props = {}, ...children) {
248
+ return component("audio", props, ...children);
249
+ }
250
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/video */
251
+ function video(props = {}, ...children) {
252
+ return component("video", props, ...children);
253
+ }
254
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/track */
255
+ function track(props = {}, ...children) {
256
+ return component("track", props, ...children);
257
+ }
258
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe */
259
+ function iframe(props = {}, ...children) {
260
+ return component("iframe", props, ...children);
261
+ }
262
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source */
263
+ function source(props = {}, ...children) {
264
+ return component("source", props, ...children);
265
+ }
266
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/embed */
267
+ function embed(props = {}, ...children) {
268
+ return component("embed", props, ...children);
269
+ }
270
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/map */
271
+ function map(props = {}, ...children) {
272
+ return component("map", props, ...children);
273
+ }
274
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ul */
275
+ function ul(props = {}, ...children) {
276
+ return component("ul", props, ...children);
277
+ }
278
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ol */
279
+ function ol(props = {}, ...children) {
280
+ return component("ol", props, ...children);
281
+ }
282
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/li */
283
+ function li(props = {}, ...children) {
284
+ return component("li", props, ...children);
285
+ }
286
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dl */
287
+ function dl(props = {}, ...children) {
288
+ return component("dl", props, ...children);
289
+ }
290
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dt */
291
+ function dt(props = {}, ...children) {
292
+ return component("dt", props, ...children);
293
+ }
294
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dd */
295
+ function dd(props = {}, ...children) {
296
+ return component("dd", props, ...children);
297
+ }
298
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form */
299
+ function form(props = {}, ...children) {
300
+ return component("form", props, ...children);
301
+ }
302
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/fieldset */
303
+ function fieldset(props = {}, ...children) {
304
+ return component("fieldset", props, ...children);
305
+ }
306
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/legend */
307
+ function legend(props = {}, ...children) {
308
+ return component("legend", props, ...children);
309
+ }
310
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label */
311
+ function label(props = {}, ...children) {
312
+ return component("label", props, ...children);
313
+ }
314
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input */
315
+ function input(props = {}, ...children) {
316
+ return component("input", props, ...children);
317
+ }
318
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button */
319
+ function button(props = {}, ...children) {
320
+ return component("button", props, ...children);
321
+ }
322
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select */
323
+ function select(props = {}, ...children) {
324
+ return component("select", props, ...children);
325
+ }
326
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/datalist */
327
+ function datalist(props = {}, ...children) {
328
+ return component("datalist", props, ...children);
329
+ }
330
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/data */
331
+ function data(props = {}, ...children) {
332
+ return component("data", props, ...children);
333
+ }
334
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/optgroup */
335
+ function optgroup(props = {}, ...children) {
336
+ return component("optgroup", props, ...children);
337
+ }
338
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/option */
339
+ function option(props = {}, ...children) {
340
+ return component("option", props, ...children);
341
+ }
342
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/textarea */
343
+ function textarea(props = {}, ...children) {
344
+ return component("textarea", props, ...children);
345
+ }
346
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/output */
347
+ function output(props = {}, ...children) {
348
+ return component("output", props, ...children);
349
+ }
350
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/progress */
351
+ function progress(props = {}, ...children) {
352
+ return component("progress", props, ...children);
353
+ }
354
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meter */
355
+ function meter(props = {}, ...children) {
356
+ return component("meter", props, ...children);
357
+ }
358
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/p */
359
+ function p(props = {}, ...children) {
360
+ return component("p", props, ...children);
361
+ }
362
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/br */
363
+ function br(props = {}) {
364
+ return component("br", props);
365
+ }
366
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/wbr */
367
+ function wbr(props = {}) {
368
+ return component("wbr", props);
369
+ }
370
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/hr */
371
+ function hr(props = {}) {
372
+ return component("hr", props);
373
+ }
374
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/code */
375
+ function code(props = {}, ...children) {
376
+ return component("code", props, ...children);
377
+ }
378
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/var */
379
+ function var_(props = {}, ...children) {
380
+ return component("var", props, ...children);
381
+ }
382
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/samp */
383
+ function samp(props = {}, ...children) {
384
+ return component("samp", props, ...children);
385
+ }
386
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/kdb */
387
+ function kdb(props = {}, ...children) {
388
+ return component("kdb", props, ...children);
389
+ }
390
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/pre */
391
+ function pre(props = {}, ...children) {
392
+ return component("pre", props, ...children);
393
+ }
394
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/blockquote */
395
+ function blockquote(props = {}, ...children) {
396
+ return component("blockquote", props, ...children);
397
+ }
398
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/q */
399
+ function q(props = {}, ...children) {
400
+ return component("q", props, ...children);
401
+ }
402
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/cite */
403
+ function cite(props = {}, ...children) {
404
+ return component("cite", props, ...children);
405
+ }
406
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/abbr */
407
+ function abbr(props = {}, ...children) {
408
+ return component("abbr", props, ...children);
409
+ }
410
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dfn */
411
+ function dfn(props = {}, ...children) {
412
+ return component("dfn", props, ...children);
413
+ }
414
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/time */
415
+ function time(props = {}, ...children) {
416
+ return component("time", props, ...children);
417
+ }
418
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/address */
419
+ function address(props = {}, ...children) {
420
+ return component("address", props, ...children);
421
+ }
422
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/sub */
423
+ function sub(props = {}, ...children) {
424
+ return component("sub", props, ...children);
425
+ }
426
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/sup */
427
+ function sup(props = {}, ...children) {
428
+ return component("sup", props, ...children);
429
+ }
430
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ruby */
431
+ function ruby(props = {}, ...children) {
432
+ return component("ruby", props, ...children);
433
+ }
434
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/rt */
435
+ function rt(props = {}, ...children) {
436
+ return component("rt", props, ...children);
437
+ }
438
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/rp */
439
+ function rp(props = {}, ...children) {
440
+ return component("rp", props, ...children);
441
+ }
442
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/bdo */
443
+ function bdo(props = {}, ...children) {
444
+ return component("bdo", props, ...children);
445
+ }
446
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/bdi */
447
+ function bdi(props = {}, ...children) {
448
+ return component("bdi", props, ...children);
449
+ }
450
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/em */
451
+ function em(props = {}) {
452
+ return component("em", props);
453
+ }
454
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/strong */
455
+ function strong(props = {}, ...children) {
456
+ return component("strong", props, ...children);
457
+ }
458
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/mark */
459
+ function mark(props = {}) {
460
+ return component("mark", props);
461
+ }
462
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/i */
463
+ function i(props = {}, ...children) {
464
+ return component("i", props, ...children);
465
+ }
466
+ /** @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/b */
467
+ function b(props = {}, ...children) {
468
+ return component("b", props, ...children);
469
+ }
470
+ //#endregion
471
+ export { a, abbr, address, article, aside, audio, b, base, bdi, bdo, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, component, data, datalist, dd, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, fragment, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img, input, kdb, label, legend, li, link, main, map, mark, menu, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, picture, pre, progress, q, rp, rt, ruby, samp, script, search, section, select, slot, source, span, strong, style, sub, summary, sup, svg, table, tbody, td, template, text, textarea, tfoot, th, thead, time, title, tr, track, ul, var_, video, wbr };
package/package.json ADDED
@@ -0,0 +1,35 @@
1
+ {
2
+ "name": "std-components",
3
+ "version": "0.1.0",
4
+ "description": "Standard HTML components as functions",
5
+ "type": "module",
6
+ "source": "index.ts",
7
+ "types": "index.d.ts",
8
+ "exports": {
9
+ "module": "dist/index.js",
10
+ "types": "dist/index.d.ts"
11
+ },
12
+ "files": [
13
+ "dist"
14
+ ],
15
+ "keywords": [
16
+ "standard",
17
+ "html",
18
+ "component",
19
+ "dom",
20
+ "vanilla",
21
+ "js",
22
+ "ts",
23
+ "library"
24
+ ],
25
+ "author": "Thiago Delgado Pinto",
26
+ "license": "MIT",
27
+ "devDependencies": {
28
+ "tsdown": "^0.21.6"
29
+ },
30
+ "scripts": {
31
+ "build": "tsdown",
32
+ "prepublish": "pnpm run build",
33
+ "dry": "pnpm publish --dry-run --no-git-checks"
34
+ }
35
+ }