✨ ✏️ update elemnts and add events page

docs_src/components/examples/dekaElNS.js

@@ -0,0 +1,11 @@
+import { elNS, assign } from "../../../index-with-signals.js";
+const elSVG= elNS("http://www.w3.org/2000/svg");
+const elMath= elNS("http://www.w3.org/1998/Math/MathML");
+document.body.append(
+	elSVG("svg"), // see https://developer.mozilla.org/en-US/docs/Web/SVG and https://developer.mozilla.org/en-US/docs/Web/API/SVGElement
+	elMath("math") // see https://developer.mozilla.org/en-US/docs/Web/MathML and https://developer.mozilla.org/en-US/docs/Web/MathML/Global_attributes
+);
+
+console.log(
+	document.body.innerHTML.includes("<svg></svg><math></math>")
+)

docs_src/elements.html.js

@@ -28,7 +28,7 @@ export function page({ pkg, info }){
 					title: "MDN page about Interface Description Language"
 				}).append(
 					el("abbr", { textContent: "IDL", title: "Interface Description Language" })
-				), "."
+				), " also known as a JavaScript property."
 			),
 			el(example, { src: fileURL("./components/examples/nativeCreateElement.js"), page_id }),
 			el("p").append(
@@ -94,10 +94,23 @@ export function page({ pkg, info }){
 				"In that case, the function should return dom elements and the second argument for ", el("code", "el"), " is argument for given element."
 			),
 			el(example, { src: fileURL("./components/examples/dekaBasicComponent.js"), page_id }),
-			el("p", "It is nice to use similar naming convention as native DOM API."),
+			el("p").append(
+				"As you can see, in case of state-less/basic components there is no difference",
+				" between calling component function directly or using ", el("code", "el"), " function.",
+			),
+			el("p", { className: "notice" }).append(
+				"It is nice to use similar naming convention as native DOM API. ",
+				"This allows us to use ", el("a", { textContent: "the destructuring assignment syntax", href: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment", title: "Destructuring assignment | MDN" }),
+				" and keep track of the native API (things are best remembered through regular use).",
+			),
 
 			el("h3", "Creating non-HTML elements"),
-			// example & notes
+			el("p").append(
+				"Similarly to the native DOM API (", el("a", { href: "https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS", title: "MDN" }).append(el("code", "document.createElementNS")), ") for non-HTML elements",
+				" we need to tell JavaScript which kind of the element to create.",
+				" We can use the ", el("code", "elNS"), " function:"
+			),
+			el(example, { src: fileURL("./components/examples/dekaElNS.js"), page_id }),
 
 			el(prevNext, info)
 		)

docs_src/events.html.js

@@ -0,0 +1,30 @@
+import "./global.css.js";
+import { el } from "deka-dom-el";
+import { example } from "./components/example.html.js";
+
+/** @param {string} url */
+const fileURL= url=> new URL(url, import.meta.url);
+import { header } from "./layout/head.html.js";
+import { prevNext } from "./components/prevNext.html.js";
+/** @param {import("./types.d.ts").PageAttrs} attrs */
+export function page({ pkg, info }){
+	const page_id= info.id;
+	return el().append(
+		el(header, { info, pkg }),
+		el("main").append(
+			el("h2", "Listenning to the native DOM events and other Modifiers"),
+			el("p").append(
+				"We quickly introduce helper to listening to the native DOM events.",
+				" ",
+				"And library syntax/pattern so-called ", el("em", "Modifier"), " to",
+				" incorporate not only this in UI templates declaratively."
+			),
+			
+			el("h3", "Add events listeners"),
+			el("p").append(
+			),
+
+			el(prevNext, info)
+		)
+	);
+}

docs_src/index.html.js

@@ -11,6 +11,30 @@ export function page({ pkg, info }){
 		el(header, { info, pkg }),
 		el("main").append(
 			el("p", "The library tries to provide pure JavaScript tool(s) to create reactive interfaces."),
+			el("p").append(
+				"We start with creating and modifying a static elemnets and end up with UI templates.",
+				" ",
+				el("i").append(
+					"From ", el("code", "document.createElement"), " to ", el("code", "el"), "."
+				),
+				" ",
+				"Then we go through the native events system and the way to include it declaratively in UI templates.",
+				" ",
+				el("i").append(
+					"From ", el("code", "element.addEventListener"), " to ", el("code", "on"), "."
+				),
+			),
+			el("p").append(
+				"Next step is providing interactivity not only for our UI templates.",
+				" ",
+				"We introduce signals (", el("code", "S"), ") and how them incorporate to UI templates.",
+			),
+			el("p").append(
+				"Now we will clarify how the signals are incorporated into our templates with regard ",
+				"to application performance. This is not the only reason the library uses ",
+				el("code", "scope"), "s. We will look at how they work in components represented ",
+				"in JavaScript by functions."
+			),
 			el(example, { src: new URL("./components/examples/helloWorld.js", import.meta.url), page_id }),
 			el(prevNext, info)
 		)

docs_src/ssr.js

@@ -3,8 +3,9 @@ export const path_target= {
 	css: "docs/"
 };
 export const pages= [
-	{ id: "index", href: "./", title: "Introduction", description: "Introducing a library and motivations." },
-	{ id: "elements", href: "elements", title: "Elements", description: "Basic concepts of elements modifications and creations." }
+	{ id: "index", href: "./", title: "Introduction", description: "Introducing a library." },
+	{ id: "elements", href: "elements", title: "Elements", description: "Basic concepts of elements modifications and creations." },
+	{ id: "events", href: "events", title: "Events and Modifiers", description: "Using not only events in UI declaratively." },
 ];
 /**
  * @typedef registerClientFile