jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2026-01-11 08:16:29 +01:00
Code Packages Releases Activity

⚡ 🐛 🔤 v0.9.4-alpha (#42)

Browse Source 
* 🐛 fixes #41

* ⚡ adjust package size limits

* 🔤

* 📺 requestIdleCallback doesn need to be global

* 🔤 corrects irland page headers

* 📺 version

* ⚡ Signal ← SignalReadonly

* 🐛 ensures only one disconncetd listener

…for cleanup

* ⚡ 🔤 Better build and improve texting

* 🐛 logo alignemt (due to gh)

* 🔤 md enhancements

* 🔤 ⚡ products
This commit is contained in:
Jan Andrle
2025-03-19 17:10:43 +01:00
committed by GitHub
parent 04f93345f8
commit 4c450ae763
44 changed files with 854 additions and 339 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
docs/p15-examples.html.js
View File

@@ -14,7 +14,6 @@ const fileURL= url=> new URL(url, import.meta.url);
/** @param {import("./types.d.ts").PageAttrs} attrs */
export function page({ pkg, info }){
const page_id= info.id;
return el(simplePage, { info, pkg }).append(
el("p").append(T`
Real-world application examples showcasing how to build complete, production-ready interfaces with dd<el>:
@@ -25,23 +24,21 @@ export function page({ pkg, info }){
third-party charting library, data fetching and state management, responsive layout design, and multiple
interactive components working together.
`),
el(example, { src: fileURL("./components/examples/case-studies/data-dashboard.js"), variant: "big", page_id }),
el(example, { src: fileURL("./components/examples/case-studies/data-dashboard.js"), variant: "big" }),
el(h3, t`Interactive Form`),
el("p").append(T`
Complete form with real-time validation, conditional rendering, and responsive design. Form handling with
real-time validation, reactive UI updates, complex form state management, and clean separation of concerns.
`),
el(example, { src: fileURL("./components/examples/case-studies/interactive-form.js"), variant: "big", page_id }),
el(example, { src: fileURL("./components/examples/case-studies/interactive-form.js"), variant: "big" }),
el(h3, t`Interactive Image Gallery`),
el("p").append(T`
Responsive image gallery with lightbox, keyboard navigation, and filtering. Dynamic loading of content,
lightbox functionality, animation handling, and keyboard and gesture navigation support.
`),
el(example, { src: fileURL("./components/examples/case-studies/image-gallery.js"), variant: "big", page_id }),
el(example, { src: fileURL("./components/examples/case-studies/image-gallery.js"), variant: "big" }),
el(h3, t`Task Manager`),
el("p").append(T`
@@ -49,8 +46,29 @@ export function page({ pkg, info }){
with signals, drag and drop functionality, local storage persistence, and responsive design for different
devices.
`),
el(example, { src: fileURL("./components/examples/case-studies/task-manager.js"), variant: "big", page_id }),
el(example, { src: fileURL("./components/examples/case-studies/task-manager.js"), variant: "big" }),
el(h3, t`Product Catalog with asyncSignal`),
el("p").append(T`
Interactive product catalog with search, sorting, and pagination. Features include dynamic product filtering,
responsive UI with detailed view toggles, error handling with retry capability, and proper resource cleanup.
Demonstrates advanced signal usage, including derived signals, abortable async data fetching, and optimized
rendering patterns.
`),
el("div", { className: "callout" }).append(
el("h4", t`asyncSignal Utility`),
el("p").append(T`
This example showcases the asyncSignal utility, which is a powerful abstraction for handling async data
fetching with proper state management. It provides:
`),
el("ul").append(
el("li", t`Automatic tracking of loading, success, and error states`),
el("li", t`AbortController integration for request cancellation`),
el("li", t`Error handling and recovery`),
el("li", t`Options for caching previous data during loading states`)
)
),
el(example, { src: fileURL("./components/examples/case-studies/products.js"), variant: "big" }),
el(h3, t`TodoMVC`),
el("p").append(T`