💥 Events and README idea presentation

README.md

@@ -1,6 +1,113 @@
 **WIP** (the experimentation phase) | [source code on Gitea](https://gitea.jaandrle.cz/jaandrle/deka-dom-el) | [*mirrored* on GitHub](https://github.com/jaandrle/deka-dom-el)
 
 # Deka DOM Elements
-This is reimplementation of [jaandrle/dollar_dom_component: Functional DOM components without JSX and virtual DOM. Subrepository for https://github.com/jaandrle/jaaJSU ($dom namespace)](https://github.com/jaandrle/dollar_dom_component).
+This is reimplementation of [jaandrle/dollar_dom_component: Functional DOM components without JSX and virtual DOM.](https://github.com/jaandrle/dollar_dom_component).
 
 The goal is to be even more close to the native JavaScript.
+
+# Native JavaScript DOM elements creations
+Let’s go through all patterns we would like to use and what needs to be improved for better experience.
+
+## Creating element and DOM templates natively
+```js
+document.body.append(
+	document.createElement("div"),
+	document.createElement("span"),
+	document.createElement("main")
+);
+//=> HTML output: <div></div><span></span><main></main>
+const template= document.createElement("main").append(
+	document.createElement("div"),
+	document.createElement("span"),
+);
+//=> ★:: typeof template==="undefined"
+```
+**Pitfalls**:
+- there is lots of text
+- `.append` methdo returns `void`⇒ it cannot be chained (see ★)
+
+## Set properties of created element
+```js
+const element= Object.assign(document.createElement("p"), { className: "red", textContent: "paragraph" });
+document.body.append(element);
+//=> HTML output: <p class="red">paragraph</p>
+```
+**Pitfalls**:
+- there is lots of text
+- `Object.assign` isn’t ideal as it can set only (some) [IDL](https://developer.mozilla.org/en-US/docs/Glossary/IDL)
+
+# Events and dynamic parts
+```js
+const input= document.createElement("input");
+const output= document.createElement("output");
+input.addEventListener("change", function(event){
+	output.value= event.target.value;
+});
+document.body.append(
+	output,
+	input
+);
+//=> HTML output: <output></output><input>
+```
+**Pitfalls**:
+- there is lots of text
+- very hard to organize code
+
+# Helpers and modifications
+Now, let's introduce library helpers and modifications.
+
+## `.append`
+The `.append` is owerwrote to always returns element. This seem to be the best way to do it as it is very hard
+to create Proxy around `HTMLElement`, ….
+```js
+document.body.append(
+	document.createElement("main").append(
+		document.createElement("div"),
+		document.createElement("span"),
+	)
+);
+//=> HTML output: <main><div></div><span></span></main>
+```
+
+## `el` and `assign` functions
+```js
+const element= assign(document.createElement("a"), {
+	className: "red",
+	dataTest: "test",
+	href: "www.seznam.cz",
+	textContent: "Link",
+	style: { color: "blue" }
+});
+document.body.append(element);
+assign(element, { style: undefined });
+//=> HTML output: <a href="www.seznam.cz" data-test="test" class="red">Link</a>
+```
+…but for elements/template creations `el` is even better:
+```js
+document.body.append(
+	el("div").append(
+		el("p").append(
+			el("#text", { textContent: "Link: " }),
+			el("a", {
+				href: "www.seznam.cz",
+				textContent: "example",
+			})
+		)
+	)
+);
+```
+
+## Events and dynamic parts
+```js
+const output_dynamic= (function(){
+	const element= el("span", { style: { fontWeight: "bold" }, textContent: "" });
+	return {
+		element,
+		onchange: listen("change", event=> assign(element, { textContent: event.target.value }))
+	};
+})();
+document.body.append(
+	output_dynamic.element,
+	el("input", { type: "text" }, output_dynamic.onchange)
+);
+```