1
0
mirror of https://github.com/jaandrle/deka-dom-el synced 2025-03-31 11:35:52 +02:00
Jan Andrle 5076771410
🐛 🔤 v0.9.3-alpha (#40)
* 🔤

*  Replaces defined with name/host

* 🐛 __dde_reactive

*  v0.9.3

* 🔤 examples+best paractises

* 🐛 📺 fixes npm run docs

*  finalizes v0.9.3-alpha

* 🔤 📺 coc tabs

* 🔤
2025-03-17 14:21:03 +01:00
2025-03-17 14:21:03 +01:00
2025-03-17 14:21:03 +01:00
2025-03-17 14:21:03 +01:00
2025-03-17 14:21:03 +01:00
2025-03-17 14:21:03 +01:00
2025-03-07 14:40:45 +01:00
2025-03-17 14:21:03 +01:00
2025-03-17 14:21:03 +01:00
2025-03-17 14:21:03 +01:00
2025-03-16 11:30:42 +01:00
2025-03-12 18:37:42 +01:00
2025-03-16 11:30:42 +01:00
2023-08-22 16:29:37 +02:00
2025-03-17 14:21:03 +01:00
2025-03-17 14:21:03 +01:00
2025-03-17 14:21:03 +01:00
2025-03-07 14:40:45 +01:00

Alpha | source code on GitHub | mirrored on Gitea | git3moji

Deka DOM Elements Logo

Deka DOM Elements (dd<el> or DDE)

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

// 🌟 Reactive component with clear separation of concerns
document.body.append(
	el(EmojiCounter, { initial: "🚀" })
);

function EmojiCounter({ initial }) {
	// ✨ State - Define reactive data
	const count = S(0);
	const emoji = S(initial);

	/** @param {HTMLOptionElement} el */
	const isSelected= el=> (el.selected= el.value===initial);

	// 🔄 View - UI updates automatically when signals change
	return el().append(
		el("p", {
			className: "output",
			textContent: S(() =>
				`Hello World ${emoji.get().repeat(count.get())}`),
		}),

		// 🎮 Controls - Update state on events
		el("button", { textContent: "Add Emoji" },
			on("click", () => count.set(count.get() + 1))
		),

		el("select", null, on.defer(el=> el.value= initial),
			on("change", e => emoji.set(e.target.value))
		).append(
			el(Option, "🎉"),
			el(Option, "🚀"),
			el(Option, "💖"),
		)
	);
}
function Option({ textContent }){
	return el("option", { value: textContent, textContent });
}

Creating reactive elements, components, and Web Components using the native IDL/JavaScript DOM API enhanced with signals/observables.

Features at a Glance

  • No build step required — use directly in browsers or Node.js
  • ☑️ Lightweight — ~10-15kB minified (original goal 10kB) with zero/minimal dependencies
  • Declarative & functional approach for clean, maintainable code
  • Signals and events for reactive UI
  • Memoization for performance — optimize rendering with intelligent caching
  • Optional build-in signals with support for custom reactive implementations (#39)
  • Server-side rendering support via jsdom
  • TypeScript support
  • ☑️ Support for debugging with browser DevTools without extensions
  • ☑️ Enhanced Web Components support

Getting Started

Documentation

Installation

npm install deka-dom-el --save

…or via CDN / Direct Script:

For CDN links and various build formats (ESM/IIFE, with/without signals, minified/unminified), see the interactive format selector on the documentation site.

<!-- Example with IIFE build (creates a global DDE object) -->
<script src="https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/iife-with-signals.min.js"></script>
<script>
	const { el, S } = DDE;
	// Your code here
</script>

<!-- Or with ES modules -->
<script type="module">
	import { el, S } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.min.js";
	// Your code here
</script>

Why Another Library?

This library bridges the gap between minimal solutions like van/hyperscript and more comprehensive frameworks like solid-js, offering a balanced trade-off between size, complexity, and usability.

Following functional programming principles, dd<el> starts with pure JavaScript (DOM API) and gradually adds auxiliary functions. These range from minor improvements to advanced features for building complete declarative reactive UI templates.

A key advantage: any internal function (assign, classListDeclarative, on, dispatchEvent, S, etc.) can be used independently while also working seamlessly together. This modular approach makes it easier to integrate the library into existing projects.

Understanding Signals

Signals are the reactive backbone of Deka DOM Elements:

Contributing

We welcome contributions from the community! Please see our Contributing Guide for details on how to get started, coding standards, commit guidelines, and the pull request process.

Inspiration and Alternatives

  • vanjs-org/van — World's smallest reactive UI framework
  • adamhaile/S — Simple, clean, fast reactive programming
  • hyperhype/hyperscript — Create HyperText with JavaScript
  • potch/signals — A small reactive signals library
  • AseasRoa/paintor - JavaScript library for building reactive client-side user interfaces or HTML code.
  • pota — small and pluggable Reactive Web Renderer. It's compiler-less, includes an html function, and a optimized babel preset in case you fancy JSX.
  • jaandrle/dollar_dom_component — Functional DOM components without JSX/virtual DOM
  • TarekRaafat/eleva — A minimalist, lightweight, pure vanilla JavaScript frontend runtime framework.
  • didi/mpx — Mpx一款具有优秀开发体验和深度性能优化的增强型跨端小程序框架
  • mxjp/rvx — A signal based frontend framework
Description
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/ Readme MIT 8.1 MiB
Languages
JavaScript 99.4%
Shell 0.6%