Skip to content

Add basics to README and runnable examples for wiki - #2

Merged
Mubarrat merged 2 commits into
mainfrom
copilot/add-examples-for-repository
Apr 28, 2026
Merged

Add basics to README and runnable examples for wiki#2
Mubarrat merged 2 commits into
mainfrom
copilot/add-examples-for-repository

Conversation

Copilot AI commented Apr 28, 2026

Copy link
Copy Markdown
Contributor

The README had no usage guidance beyond installation — no API examples, no reactive patterns, nothing to help a new user get started. The repo also lacked any runnable demos.

README — new Basics section

Six progressive sections with minimal, illustrative code snippets:

  • Building Elements$html.<tag>(attrs, ...children) call signature
  • Attributes & Events — style string/object, onclick/on, data-*
  • observable — getter/setter pattern, DOM child binding, attribute binding, two-way <input> binding
  • computed & cstr — deriving values from observables; tagged template reactive strings
  • arrayObservablepush/splice/reverse + .bind.map() for live lists
  • validatable()isValid computed, inline error messages, disabled submit
// Two-way input binding
const name = observable("");
const input = $html.input({ type: "text", value: name });
const greeting = $html.p((() => `Hello, ${name() || "stranger"}!`).computed(name));

// Reactive array list
const items = arrayObservable(["Apple", "Banana"]);
const list = $html.ul(items.bind.map(item => $html.li(item)));
items.push("Cherry");  // DOM updates in place

examples/ — 10 self-contained HTML demos

Each file loads dist/dom.js via a relative path and runs in-browser with no build step.

Static (dom-builder only):

  • 01-hello-world — card element
  • 02-static-list — array → <ul>
  • 03-contact-form — form + submit handler
  • 04-data-table — table from object array
  • 05-svg-badge$svg namespace

Reactive (dom-builder + observable):

  • 01-live-counterobservable bound to DOM
  • 02-todo-listarrayObservable, computed, cstr
  • 03-live-search — computed filter + match highlight
  • 04-registration-formvalidatable(), computed errors, disabled submit
  • 05-optimistic-likeobservable.optimistic() with automatic rollback on simulated server failure

An examples/index.html links all demos; README's new More Examples table points into the directory.

Copilot AI and others added 2 commits April 28, 2026 14:38
@Mubarrat
Mubarrat marked this pull request as ready for review April 28, 2026 14:50
Copilot AI review requested due to automatic review settings April 28, 2026 14:50
@Mubarrat
Mubarrat merged commit 53467f5 into main Apr 28, 2026
1 of 3 checks passed
Copilot AI removed the request for review from Copilot April 28, 2026 15:15
@Mubarrat
Mubarrat deleted the copilot/add-examples-for-repository branch April 28, 2026 16:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants