`(sigil web dev)`

(sigil web dev) - Live development support for Sigil web applications

Provides a broadcast channel, refresh helpers, error overlay, and SSE endpoint for live-coding workflows. An agent or editor can redefine handlers/views, then trigger a browser refresh via dev-reload!.

Example:

(import (sigil web dev))

(define dev (make-dev-broadcast))
;; ... wire (dev-sse-handler) into your router at /__dev/events ...
;; Later:
(dev-reload!)  ; all connected browsers refresh

Exports

make-dev-broadcastprocedure

Create a dev broadcast and set it as the current one.

Returns the dev broadcast object. Also sets current-dev-broadcast so that dev-reload! and other helpers can find it automatically.

Example:

(define dev (make-dev-broadcast))

dev-reload!procedure

Trigger a page reload in all connected browsers.

Sends an SSE reload event that causes browsers to re-fetch the current page and morph the result into the DOM using Idiomorph.

Parameters: target: CSS selector to reload (default: "body") broadcast: Dev broadcast to use (default: current-dev-broadcast)

Example:

(dev-reload!)                       ; reload full body
(dev-reload! target: "#sidebar")    ; reload specific element

dev-morph!procedure

Push HTML content to a specific element in all connected browsers.

Unlike dev-reload! which re-fetches from the server, this sends the content directly.

Parameters: target: CSS selector for the target element content: SXML or HTML string to morph mode: Morph mode (default: "morph") broadcast: Dev broadcast to use (default: current-dev-broadcast)

Example:

(dev-morph! target: "#status" content: '(span "Online"))

dev-error!procedure

Show an error overlay in all connected browsers.

Displays a fixed-position error panel with the error message. Useful for showing eval errors during live-coding.

Example:

(dev-error! "Unbound variable: foo")

dev-clear-error!procedure

Clear the error overlay in all connected browsers.

Example:

(dev-clear-error!)

dev-redirect!procedure

Navigate all connected browsers to a URL.

Example:

(dev-redirect! "/dashboard")

dev-class!procedure

Add or remove CSS classes on an element in all connected browsers.

Example:

(dev-class! target: "#panel" add: "visible")
(dev-class! target: "#btn" remove: "loading" add: "done")

dev-css-reload!procedure

Reload CSS stylesheets in all connected browsers.

If href: is provided, only stylesheets matching that substring are reloaded. Otherwise all stylesheets are reloaded.

Example:

(dev-css-reload!)                       ; reload all stylesheets
(dev-css-reload! href: "styles.css")    ; reload specific stylesheet

dev-js!procedure

Execute JavaScript code in all connected browsers.

Example:

(dev-js! "console.log('hello from server')")

dev-sse-handlerprocedure

Create an HTTP handler for the dev SSE endpoint.

Returns a handler that serves SSE events from the dev broadcast. Wire this into your router at a path like /__dev/events.

Parameters: broadcast: Dev broadcast to use (default: current-dev-broadcast)

Example:

(route method: GET pattern: "/__dev/events"
       handler: (dev-sse-handler))

dev-connected-clientsprocedure

Get the number of connected browser clients.

Example:

(dev-connected-clients)  ; => 2