{"id":18185053,"url":"https://github.com/jaandrle/deka-dom-el","last_synced_at":"2025-07-27T14:34:22.040Z","repository":{"id":189973328,"uuid":"681686291","full_name":"jaandrle/deka-dom-el","owner":"jaandrle","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.","archived":false,"fork":false,"pushed_at":"2025-03-21T13:47:15.000Z","size":1680,"stargazers_count":2,"open_issues_count":5,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-25T03:40:59.927Z","etag":null,"topics":["client-side-rendering","declarative","declarative-programming","declarative-ui","dom","functional-programming","javascript","reactive","reactive-programming","rendering","server-side-rendering","signals","signals-library","typescript","ui","ui-components","vanilla-javascript","vanilla-js","webcomponents"],"latest_commit_sha":null,"homepage":"https://jaandrle.github.io/deka-dom-el/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jaandrle.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-08-22T14:36:20.000Z","updated_at":"2025-07-01T22:51:29.000Z","dependencies_parsed_at":"2023-10-16T20:30:08.784Z","dependency_job_id":"ddf5ecea-c0cf-446c-b980-e8ea97f3f24e","html_url":"https://github.com/jaandrle/deka-dom-el","commit_stats":null,"previous_names":["jaandrle/deka-dom-el"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jaandrle/deka-dom-el","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaandrle%2Fdeka-dom-el","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaandrle%2Fdeka-dom-el/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaandrle%2Fdeka-dom-el/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaandrle%2Fdeka-dom-el/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jaandrle","download_url":"https://codeload.github.com/jaandrle/deka-dom-el/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaandrle%2Fdeka-dom-el/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267370883,"owners_count":24076498,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-27T02:00:11.917Z","response_time":82,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["client-side-rendering","declarative","declarative-programming","declarative-ui","dom","functional-programming","javascript","reactive","reactive-programming","rendering","server-side-rendering","signals","signals-library","typescript","ui","ui-components","vanilla-javascript","vanilla-js","webcomponents"],"created_at":"2024-11-02T22:05:49.966Z","updated_at":"2025-07-27T14:34:21.987Z","avatar_url":"https://github.com/jaandrle.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"**Alpha**\n| [Docs\u0026Examples](https://jaandrle.github.io/deka-dom-el \"Official documentation and guide site\")\n| [NPM](https://www.npmjs.com/package/deka-dom-el \"Official NPM package page\")\n| [GitHub](https://github.com/jaandrle/deka-dom-el \"Official GitHub repository\")\n([*Gitea*](https://gitea.jaandrle.cz/jaandrle/deka-dom-el \"GitHub repository mirror on my own Gitea instance\"))\n\n***Vanilla for flavouring — a full-fledged feast for large projects***\n\n```javascript\n// 🌟 Reactive component with clear separation of concerns\ndocument.body.append(\n\tel(EmojiCounter, { initial: \"🚀\" }),\n);\n\nfunction EmojiCounter({ initial }) {\n\t// ✨ - Define reactive data\n\tconst count = S(0);\n\tconst emoji = S(initial);\n\tconst textContent = S(() =\u003e `Hello World ${emoji.get().repeat(count.get())}`);\n\n\t// 🔄 - UI updates automatically when signals change\n\treturn el().append(\n\t\tel(\"p\", { textContent, className: \"output\" }),\n\n\t\t// 🎮 - Update state on events\n\t\tel(\"button\", { textContent: \"Add Emoji\" },\n\t\t\ton(\"click\", () =\u003e count.set(count.get() + 1)),\n\t\t),\n\n\t\tel(\"select\", null,\n\t\t\ton.defer(el=\u003e el.value= initial),\n\t\t\ton(\"change\", e =\u003e emoji.set(e.target.value)),\n\t\t).append(\n\t\t\tel(Option, \"🎉\"),\n\t\t\tel(Option, \"🚀\"),\n\t\t\tel(Option, \"💖\"),\n\t\t),\n\t);\n}\nfunction Option({ textContent }){\n\treturn el(\"option\", { value: textContent, textContent });\n}\n```\n*…use simple DOM API by default and library tools and logic when you need them*\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"docs/assets/logo.svg\" alt=\"Deka DOM Elements Logo\" width=\"180\" height=\"180\"\u003e\n\u003c/p\u003e\n\n# Deka DOM Elements (dd\\\u003cel\\\u003e or DDE)\n\nCreating reactive elements, components, and Web Components using the native\n[IDL](https://developer.mozilla.org/en-US/docs/Glossary/IDL)/JavaScript DOM API enhanced with\n[**signals/observables**](#understanding-signals).\n\n## Features at a Glance\n\n- ✅ **No build step required** — use directly in browsers or Node.js\n- ✅ **Minimalized footprint** — ~10-15kB minified bundle (original goal 10kB), **zero**/minimal dependencies and\n\tsmall in-memory size (auto-releasing resources as much as possible)\n- ✅ **Declarative \u0026 functional approach support** for clean, maintainable code\n- ✅ **Signals and events** for reactive UI\n- ✅ **Memoization for performance** — optimize rendering with intelligent caching\n- ☑️ **Optional build-in signals** with support for custom reactive implementations (#39)\n- ☑️ **Server-side rendering** support via [jsdom](https://github.com/jsdom/jsdom)\n- ✅ **TypeScript support**\n- ✅ **Support for debugging with browser DevTools** without extensions\n- ☑️ **Enhanced Web Components** support\n\n## Getting Started\n\n### Quick Links\n\n- [**Documentation and Guide**](https://jaandrle.github.io/deka-dom-el)\n- [**Examples**](https://jaandrle.github.io/deka-dom-el/p15-examples.html)\n- [**Changelog**](https://github.com/jaandrle/deka-dom-el/releases)\n\n### Installation\n\n```bash\nnpm install deka-dom-el --save\n```\n\n…or via CDN / Direct Script:\n\nFor CDN links and various build formats (ESM/IIFE, with/without signals, minified/unminified), see the [interactive\nformat selector](https://jaandrle.github.io/deka-dom-el/#h-getting-started) on the documentation site.\n\n```html\n\u003c!-- Example with IIFE build (creates a global DDE object) --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/iife-with-signals.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n\tconst { el, S } = DDE;\n\t// Your code here\n\u003c/script\u003e\n\n\u003c!-- Or with ES modules --\u003e\n\u003cscript type=\"module\"\u003e\n\timport { el, S } from \"https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.min.js\";\n\t// Your code here\n\u003c/script\u003e\n```\n\n## Why Another Library?\n\nThis library bridges the gap between minimal solutions like van/hyperscript and more comprehensive frameworks like\n[solid-js](https://github.com/solidjs/solid), offering a balanced trade-off between size, complexity, and usability.\n\nFollowing functional programming principles, dd\\\u003cel\\\u003e starts with pure JavaScript (DOM API) and gradually adds\nauxiliary functions. These range from minor improvements to advanced features for building complete declarative\nreactive UI templates.\n\nA key advantage: any internal function (`assign`, `classListDeclarative`, `on`, `dispatchEvent`, `S`, etc.) can be used\nindependently while also working seamlessly together. This modular approach makes it easier to integrate the library\ninto existing projects.\n\n## Understanding Signals\n\nSignals are the reactive backbone of Deka DOM Elements:\n\n- [Signals — what's going on behind the scenes](https://itnext.io/signals-whats-going-on-behind-the-scenes-ec858589ea63)\n- [The Evolution of Signals in JavaScript](https://dev.to/this-is-learning/the-evolution-of-signals-in-javascript-8ob)\n- [TC39 Signals Proposal](https://github.com/tc39/proposal-signals) (future standard)\n- [Observer pattern](https://en.wikipedia.org/wiki/Observer_pattern) (underlying concept)\n\n## Contributing\n\nWe welcome contributions from the community! Please see our [Contributing Guide](CONTRIBUTING.md) for details on how to\nget started, coding standards, commit guidelines, and the pull request process.\n\n## Inspiration and Alternatives\n\n- [vanjs-org/van](https://github.com/vanjs-org/van) — World's smallest reactive UI framework\n- [adamhaile/S](https://github.com/adamhaile/S) — Simple, clean, fast reactive programming\n- [hyperhype/hyperscript](https://github.com/hyperhype/hyperscript) — Create HyperText with JavaScript\n- [potch/signals](https://github.com/potch/signals) — A small reactive signals library\n- [AseasRoa/paintor](https://github.com/AseasRoa/paintor) - JavaScript library for building reactive client-side user\n\tinterfaces or HTML code.\n- [pota](https://pota.quack.uy/) — small and pluggable Reactive Web Renderer. It's compiler-less, includes an html\n\tfunction, and a optimized babel preset in case you fancy JSX.\n- [TarekRaafat/eleva](https://github.com/TarekRaafat/eleva) — A minimalist, lightweight, pure vanilla JavaScript\n\tfrontend runtime framework.\n- [didi/mpx](https://github.com/didi/mpx) — Mpx，一款具有优秀开发体验和深度性能优化的增强型跨端小程序框架\n- [mxjp/rvx](https://github.com/mxjp/rvx) — A signal based frontend framework\n- [jaandrle/dollar_dom_component](https://github.com/jaandrle/dollar_dom_component) —\n\tFunctional DOM components without JSX/virtual DOM (my old library)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaandrle%2Fdeka-dom-el","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaandrle%2Fdeka-dom-el","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaandrle%2Fdeka-dom-el/lists"}