$dom.component / Exports

$dom_component

Subrepository for jaandrle/jaaJSU ($dom namespace).

Overview

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…?
1. It has some pros and cons, see Why You Shouldn't Use A Web Framework
2. They are too "complex" for some user cases.
3. It can be overkill for small projects.
4. Ofcourse: They have also lots of pros, so if it's OK for you, you don't need this library.
5. Do we still need JavaScript frameworks?
OK, why do not use some small library such as RE:DOM, litedom or native webcomponents?
1. 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, …?
1. You don't need virtual DOM: this is solved for example by Svelte.
  1. In some user cases, it can be quicker to complementy remove component with old state and create it again instead of updating some properties.
  2. You know changes because of another part of you app (e.g. API) are able to provide only changes.
2. You prefer functional way of programming (now it is possible use this way also in React itself).
3. You would like avoid big function’s call stack and recursion calling
4. You would like to use native JavaScript names as much as is possible.
5. You would like to have minimum restriction how to write your code.

Performance (TBD)

js-framework-benchmark

How to start

library files: $dom_component.js and $dom_component-min.js.
basics and playgrounds can be found in Examples

Usage / Philosophy overview

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 }); }
}

Resources

Examples
Documentation
You can also create SVG elements (e.g. charts), see $dom_svg.

Contribute

License

IndigoMultimediaTeam/dollar_dom_component

ErrorLooks like something went wrong!

About

Resources

License

Code of conduct

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages