1
0
mirror of https://github.com/jaandrle/deka-dom-el synced 2024-11-22 07:49:38 +01:00
deka-dom-el/README.md

3.1 KiB
Raw Blame History

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

Vanilla by default — steroids if needed …use simple DOM API by default and library tools and logic when you need them

const value= S("");
document.body.append(
	el("span", { style: { fontWeight: "bold" }, textContent: value }),
	el("input", { type: "text" },
		on("change", event=> value(event.target.value)))
);

Deka DOM Elements

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

Inspiration and suggested alternatives

Why an another one?

This library should lies somewhere between van/hyperscript and solid-js (S). In the meaning of size, complexity and usability.

An another goal is making clear library logic. Starting from pure native JavaScript (DOM API), then using small utils (assign, S, …, el, …) and end up with way to write complex code. Therefore, you can use any „internal” function to make live with native JavaScript easier (assign, classListDeclarative, on, dispatchEvent, …, S, …) regarding if you need complex library/framework.

As consequence of that, it shouldnt be hard to incorporate the library into existing projects. That can make potecial migration easier.

To balance all requirements above, lots of compromises have been made. To sumarize:

  • library size 1015kB minified (10kB originaly)
  • allow using signals optionaly and allow registering own signals implementation
  • no build step required
  • prefer a declarative/functional approach
  • prefer zero/minimal dependencies
  • support/enhance custom elements (web components)
  • support SSR (jsdom)
  • WIP provide types

First steps

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