1
0
mirror of https://github.com/jaandrle/deka-dom-el synced 2024-11-24 01:29:36 +01:00
A library expanding the capabilities of the native DOM API with the aim of offering the possibility of writing reactive UI templates/components declaratively directly in JavaScript. https://jaandrle.github.io/deka-dom-el/
Go to file
2023-11-24 21:07:48 +01:00
bs 💥 rename signals to observables 2023-11-24 20:41:04 +01:00
dist 🐛 renamig issues 2023-11-24 21:07:48 +01:00
docs 🐛 renaming fixes 2023-11-24 20:51:39 +01:00
docs_src 🐛 renaming fixes 2023-11-24 20:51:39 +01:00
examples 💥 rename signals to observables 2023-11-24 20:41:04 +01:00
src 🐛 renamig issues 2023-11-24 21:07:48 +01:00
.gitignore dev-package (#15) 2023-09-05 09:25:47 +02:00
index-with-observables.d.ts 💥 rename signals to observables 2023-11-24 20:41:04 +01:00
index-with-observables.js 💥 rename signals to observables 2023-11-24 20:41:04 +01:00
index.d.ts 💥 rename signals to observables 2023-11-24 20:41:04 +01:00
index.js 💥 append, elNS, el.mark, el.later 2023-11-08 13:44:37 +01:00
jsdom.d.ts 💥 📝 2023-11-10 17:16:58 +01:00
jsdom.js 🐛 Boolean(namespace) + mark+ssr 2023-11-10 18:02:56 +01:00
LICENSE Initial commit 2023-08-22 16:29:37 +02:00
observables.d.ts 💥 rename signals to observables 2023-11-24 20:41:04 +01:00
observables.js 💥 rename signals to observables 2023-11-24 20:41:04 +01:00
package-lock.json docs + readme 2023-11-07 21:58:48 +01:00
package.json 💥 rename signals to observables 2023-11-24 20:41:04 +01:00
README.md 🐛 renaming fixes 2023-11-24 20:51:39 +01:00
tsconfig.json Bundle DTS files 2023-10-19 15:01:54 +02:00

WIP (the experimentation phase) | source code on GitHub | mirrored on Gitea

Vanilla for flavouring — a full-fledged feast for large projects

…use simple DOM API by default and library tools and logic when you need them

document.body.append(
	el("h1", "Hello World 👋"),
	el("p", "See some syntax examples here:"),
	el("ul").append(
		el("li").append(
			el("a", { textContent: "Link to the library repo", title: "Deka DOM El — GitHub", href: "https://github.com/jaandrle/deka-dom-el" })
		),
		el("li").append(
			"Use extended Vanilla JavaScript DOM/IDL API: ",
			el("span", { textContent: "» this is a span with class=cN and data-a=A, data-b=B «", className: "cN", dataset: { a: "A", b: "B" } })
		),
		el("li").append(
			el(component, { textContent: "A component", className: "example" }, on("change", console.log))
		)
	)
	
);
function component({ textContent, className }){
	const value= O("onchange");
	
	return el().append(
		el("p", { textContent, className }),
		el("p", { className: [ className, "second-line" ] }).append(
			"…with reactivity: ", el("em", { style: { fontWeight: "bold" }, ariaset: { live: "polite" }, textContent: value }),
		),
		el("input", { type: "text", value: value() }, on("change", event=> value(event.target.value)))
	);
}

Deka DOM Elements

Creating reactive elements, components and Web components using IDL/JavaScript DOM API and signals/observables (Signals — whats going on behind the scenes | by Ryan Hoffnan | ITNEXT, The Evolution of Signals in JavaScript - DEV Community or Observer pattern - Wikipedia).

Inspiration and suggested alternatives

Why an another one?

This library falls somewhere between van/hyperscript and solid-js in terms of size, complexity, and usability.

Another goal is to proceed in the best spirit of functional programming. This involves starting with pure JavaScript (DOM API) and gradually adding auxiliary functions, ranging from “minor” improvements to the capability of writing complete declarative reactive UI templates.

As a result, any “internal” function (assign, classListDeclarative, on, dispatchEvent, …, O, …) can be used independently, although they are primarily designed for use in combination. This can also, hopefully, help in integrating the library into existing projects.

To balance these requirements, numerous compromises have been made. To summarize:

  • Library size: 1015kB minified (the original goal was a maximum of 10kB)
  • Optional use of observables with the ability to register your own signals/observables implementation
  • No build step required
  • Preference for a declarative/functional approach
  • Focus on zero/minimal dependencies
  • Support for/enhancement of custom elements (web components)
  • Support for SSR (jsdom)
  • WIP providing types

First steps

  • Guide
  • Documentation
  • Installation
    • npm
    • dist/ (https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/…)