Skip to content

Functional DOM components without JSX and virtual DOM. Subrepository for https://github.com/jaandrle/jaaJSU ($dom namespace)

License

Notifications You must be signed in to change notification settings

IndigoMultimediaTeam/dollar_dom_component

 
 

Repository files navigation

$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.

  1. 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?
  2. 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
  3. 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

  1. library files: $dom_component.js and $dom_component-min.js.
  2. 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

Contribute

About

Functional DOM components without JSX and virtual DOM. Subrepository for https://github.com/jaandrle/jaaJSU ($dom namespace)

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%