jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2024-11-23 09:09:38 +01:00
Code Packages Releases Activity

Compare commits

base: jaandrle:5008b56ac88386efc543d75e298b39f02ac019d6
Branches Tags
jaandrle:main
jaandrle:dev-refact
..
compare: jaandrle:ad445c9bd3c6851d63170229cfd968a20e50fc49
Branches Tags
jaandrle:dev-refact
jaandrle:main

No commits in common. "5008b56ac88386efc543d75e298b39f02ac019d6" and "ad445c9bd3c6851d63170229cfd968a20e50fc49" have entirely different histories.
5008b56ac8 ... ad445c9bd3

1 changed files with 27 additions and 49 deletions
Show Stats Expand all files Collapse all files

76
README.md
View File

@ -1,75 +1,53 @@
**WIP** (the experimentation phase) | [source code on GitHub](https://github.com/jaandrle/deka-dom-el) | [*mirrored* on Gitea](https://gitea.jaandrle.cz/jaandrle/deka-dom-el) **WIP** (the experimentation phase) | [source code on GitHub](https://github.com/jaandrle/deka-dom-el) | [*mirrored* on Gitea](https://gitea.jaandrle.cz/jaandrle/deka-dom-el)
***Vanilla for flavouring — a full-fledged feast for large projects*** ***Vanilla by default — steroids if needed***
*…use simple DOM API by default and library tools and logic when you need them* *…use simple DOM API by default and library tools and logic when you need them*
```js ```js
const value= S("");
document.body.append( document.body.append(
el("h1", "Hello World 👋"), el("span", { style: { fontWeight: "bold" }, textContent: value }),
el("p", "See some syntax examples here:"), el("input", { type: "text" },
el("ul").append( on("change", event=> value(event.target.value)))
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= S("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 # Deka DOM Elements
Creating reactive elements, components and Web components using [IDL](https://developer.mozilla.org/en-US/docs/Glossary/IDL)/JavaScript DOM API and signals Creating reactive elements, components and Web components using [IDL](https://developer.mozilla.org/en-US/docs/Glossary/IDL)/JavaScript DOM API and signals ([Signals — whats going on behind the scenes | by Ryan Hoffnan |
([Signals — whats going on behind the scenes | by Ryan Hoffnan | ITNEXT](https://itnext.io/signals-whats-going-on-behind-the-scenes-ec858589ea63) or [The Evolution of Signals in JavaScript - DEV Community](https://dev.to/this-is-learning/the-evolution-of-signals-in-javascript-8ob)). ITNEXT](https://itnext.io/signals-whats-going-on-behind-the-scenes-ec858589ea63) or [The Evolution of Signals in JavaScript - DEV Community](https://dev.to/this-is-learning/the-evolution-of-signals-in-javascript-8ob)).
## Inspiration and suggested alternatives ## Inspiration and suggested alternatives
- my previous library (mostly used internaly): [jaandrle/dollar_dom_component: Functional DOM components without JSX and virtual DOM.](https://github.com/jaandrle/dollar_dom_component) - my previous (mostly internal) library: [jaandrle/dollar_dom_component: Functional DOM components without JSX and virtual DOM.](https://github.com/jaandrle/dollar_dom_component)
- [vanjs-org/van: 🍦 VanJS: World's smallest reactive UI framework. Incredibly Powerful, Insanely Small - Everyone can build a useful UI app in an hour.](https://github.com/vanjs-org/van) - [vanjs-org/van: 🍦 VanJS: World's smallest reactive UI framework. Incredibly Powerful, Insanely Small - Everyone can build a useful UI app in an hour.](https://github.com/vanjs-org/van)
- [hyperhype/hyperscript: Create HyperText with JavaScript.](https://github.com/hyperhype/hyperscript) - [hyperhype/hyperscript: Create HyperText with JavaScript.](https://github.com/hyperhype/hyperscript)
- [adamhaile/S: S.js - Simple, Clean, Fast Reactive Programming in Javascript](https://github.com/adamhaile/S) ([adamhaile/surplus: High performance JSX web views for S.js applications](https://github.com/adamhaile/surplus)) - [adamhaile/S: S.js - Simple, Clean, Fast Reactive Programming in Javascript](https://github.com/adamhaile/S) ([adamhaile/surplus: High performance JSX web views for S.js applications](https://github.com/adamhaile/surplus))
- [potch/signals: a small reactive signals library](https://github.com/potch/signals) - [potch/signals: a small reactive signals library](https://github.com/potch/signals)
## Why an another one? ## Why an another one?
This library falls somewhere between van/hyperscript and [solid-js](https://github.com/solidjs/solid) in terms of size, complexity, This library should lies somewhere between van/hyperscript and [solid-js](https://github.com/solidjs/solid) (S).
and usability. In the meaning of size, complexity and usability.
Another goal is to proceed in the best spirit of functional programming. This involves starting with An another goal is making clear library logic. Starting from pure native JavaScript (DOM API),
pure JavaScript (DOM API) and gradually adding auxiliary functions, ranging from “minor” improvements then using small utils (`assign`, `S`, …, `el`, …) and end up with way to write complex code.
to the capability of writing complete declarative reactive UI templates. 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 a result, any “internal” function (`assign`, `classListDeclarative`, `on`, `dispatchEvent`, …, `S`, …) As consequence of that, it shouldn’t be hard to incorporate the library into existing projects.
can be used independently, although they are primarily designed for use in combination. This can also, That can make potecial migration easier.
hopefully, help in integrating the library into existing projects.
To balance these requirements, numerous compromises have been made. To summarize: To balance all requirements above, lots of compromises have been made. To sumarize:
- [ ] Library size: 10–15kB minified (the original goal was a maximum of 10kB) - [x] library size 10–15kB minified (10kB originaly)
- [x] Optional use of *signals* with the ability to register *your own signals implementation* - [x] allow using *signals optionaly* and allow registering *own signals implementation*
- [x] *No build step required* - [x] *no build step required*
- [x] Preference for a *declarative/functional* approach - [x] prefer a *declarative/functional* approach
- [x] Focus on zero/minimal dependencies - [x] prefer zero/minimal dependencies
- [ ] Support for/enhancement of custom elements (web components) - [ ] support/enhance custom elements (web components)
- [x] Support for SSR ([jsdom](https://github.com/jsdom/jsdom)) - [x] support SSR ([jsdom](https://github.com/jsdom/jsdom))
- [ ] WIP providing types - [ ] WIP provide types
## First steps ## First steps
- [**Guide**](https://jaandrle.github.io/deka-dom-el) - [**Guide**](https://jaandrle.github.io/deka-dom-el)
- Documentation - Documentation
- Installation - Instalation
- npm - npm
- [dist/](dist/) (`https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/`…) - [dist/](dist/) (`https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/`…)