$dom.component / Exports
Subrepository for jaandrle/jaaJSU ($dom namespace).
This library provide ability to write HTML/DOM components without using OOP/class syntax and jsx.
- Why not use framework such as React, Angular, MithrilJS, vue, Stimulus…?
- It has some pros and cons, see Why You Shouldn't Use A Web Framework
- They are too "complex" for some user cases.
- It can be overkill for small projects.
- Ofcourse: They have also lots of pros, so if it's OK for you, you don't need this library.
- Do we still need JavaScript frameworks?
- OK, why do not use some small library such as RE:DOM, litedom or native webcomponents?
- Still, it can be better to use combinations of libraries instead of full predefined solution
- OK, why do not use existing libraries such as h0, rdom, fp-dom, domchanger, Domcom, domc, hybrids, Switzerland, fun-component, sigil, dom-fn, …?
- You don't need virtual DOM: this is solved for example by Svelte.
- In some user cases, it can be quicker to complementy remove component with old state and create it again instead of updating some properties.
- You know changes because of another part of you app (e.g. API) are able to provide only changes.
- You prefer functional way of programming (now it is possible use this way also in React itself).
- You would like avoid big function’s call stack and recursion calling
- You would like to use native JavaScript names as much as is possible.
- You would like to have minimum restriction how to write your code.
- You don't need virtual DOM: this is solved for example by Svelte.
- library files: $dom_component.js and $dom_component-min.js.
- basics and playgrounds can be found in Examples
textInputComponent({ label_type: "name", placeholder: "Peter" })
.mount(document.body);
/* result:
<body>
<div>
<label>
Type your name: <input type="text" placeholder="Peter">
</label>
<p>Your name is: <strong> - </strong></p>
</div>
</body>
*/
function textInputComponent({ label_type= "name", placeholder= "Type text" }){
const { add, share, update }= $dom.component("div");
add("label", { textContent: `Type your ${label_type}: ` });
add("input", { type: "text", placeholder, onkeyup });
add("p", { textContent: `Your ${label_type} is: ` }, -2);
add("strong", null).onupdate({ textContent: " - " }, ({ textContent })=> ({ textContent }));
return share;
function onkeyup(){ update({ textContent: this.value }); }
}- Examples
- Documentation
- You can also create SVG elements (e.g. charts), see $dom_svg.