Changelog

Copy Markdown View Source

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

[0.1.2] - 2026-05-10

Added

  • The install task now also adds the playback socket to your endpoint (after the existing Phoenix.LiveView.Socket declaration) and writes config :demo_director, pubsub: <OtpApp>.PubSub into config/dev.exs. The post-install notice shrinks from three manual steps to one (the overlay-component HEEx edit), which stays manual on purpose because root layouts aren't AST-editable. Both new edits are idempotent — the task searches for an existing DemoDirector.PlaybackSocket socket declaration / :demo_director config block before adding.
  • Selector resolver in the runtime now falls back to document.querySelector when a string isn't found via data-demo-id. Lets demos target existing semantic ids (#vitals), classes (.btn-primary), or any other CSS selector the host app already has, without forcing ad-hoc data-demo-id annotations. data-demo-id lookup is still tried first, so the recommended idiom is unchanged.
  • fillTyped now dispatches a synthetic keyup event per character alongside the existing input event. Hosts that listen via phx-keyup (rather than phx-change) now react to typed input during demo playback.
  • Demos listing page is now reachable at the bare mount path (e.g. /dev/demo-director) in addition to the original <mount>/demos. Both URLs render the same listing.
  • Listing-page styling switched to a purple palette (Elixir-ish lavender on deep purple). The Play button stays red for contrast. The demo overlay (subtitle bar, highlight ring) is intentionally unchanged — it stays neutral so it works visually on any host app's color scheme.

Fixed

  • mix igniter.install demo_director crashed with FunctionClauseError in Rewrite.update!/2 while seeding AGENTS.md / CLAUDE.md. The install task's updater callback returned a raw string instead of the Rewrite.Source that Igniter.create_or_update_file/4 expects from its 4th argument. Updates the source's :content via Rewrite.Source.update/3.
  • The router edit was not idempotent: re-running the install task appended a duplicate if Application.compile_env(:my_app, :dev_routes) block on every run. The task now searches for an existing import DemoDirector.Router call before adding, mirroring the pattern used by the Tidewave installer.
  • Subtitle bar's text was bidi-flipped on hosts with <html dir="rtl"> — English content's punctuation could land on the wrong side. Subtitle node now carries dir="auto" so its visual direction is determined by the first strong character of the subtitle text itself, regardless of the host page's direction.

Documentation

  • README's "Add to your Phoenix app" section notes that demo_director assumes the host app has a working Phoenix LiveView setup; the installer does not bootstrap LiveView from scratch.
  • The README's manual wire-up step for the overlay component now explains why that step stays manual (HEEx isn't AST-editable like Elixir, so editing root layouts programmatically would be string-level surgery on a frequently-customized file) and notes that the component is prod-safe to leave unconditionally inside <body> (it returns empty markup when no mount path is registered). The install task's post-install notice carries the same explanation in shorter form.

[0.1.1] - 2026-05-10

Changed

  • Reworded package description / README tagline to lead with what the package does ("Narrated, highlighted, animated demos for Phoenix LiveView") before the workflow tagline.
  • Added Hex.pm and HexDocs badges to the README.

[0.1.0] - 2026-05-10

Added

  • Helper API: subtitle/1, highlight/1, fill/2, fill_typed/3, click/1, wait/1. Each emits a JS string the agent passes to browser_eval (or that gets saved into a .exs script).
  • HEEx integration via demo_id/1 for stable selectors through LiveView patches.
  • Overlay component (demo_director_overlay) rendering a word-by-word-revealed subtitle bar and a target-tracking highlight ring.
  • Router macro (demo_director "/director") mounting:
    • static assets (CSS + JS) at <mount>/demo_director.{css,js}
    • a web demos browser at <mount>/demos listing every saved demo
    • a per-demo JSON endpoint at <mount>/demos/<name>.js
    • a playback POST endpoint at <mount>/play (localhost-only)
  • Phoenix channel + socket (DemoDirector.PlaybackSocket) that relays demo JS broadcasts to every connected overlay.
  • mix demo_director.play <name> task that POSTs a saved demo's JS to the running dev server. Reads # @start_at "/path" metadata from the demo file and navigates the browser there before running.
  • Igniter-based install task (mix igniter.install demo_director) that wires the router macro and seeds AGENTS.md / CLAUDE.md with the agent contract.