Herb Client

Dev server client for Herb templates, connects to the Herb Dev Server and applies live DOM patches during development.

[!WARNING] The dev server and client are experimental and may not work correctly in all cases.

How It Works

The client connects to the Herb Dev Server via WebSocket and receives messages when template files change. Depending on the type of change:

• Text and attribute changes are patched directly in the DOM without a page reload
• Structural changes (insertions, removals, ERB changes) trigger a full page reload

Usage

The client auto-initializes when <meta name="herb-debug-mode" content="true"> is present in the page.

[!NOTE] No manual setup required when using ReActionView with debug_mode enabled.

Manual initialization

import { initHerbClient } from "@herb-tools/client"

const client = initHerbClient({
  port: 8592,
  host: "localhost",
  onPatch: (message) => console.log("Patched:", message.file),
  onReload: (message) => console.log("Reloading for:", message.file),
})

Protocol

The client communicates with the Herb Dev Server using these message types:

| Message | Direction | Description | |---------|-----------|-------------| | welcome | Server → Client | Handshake with project path | | patch | Server → Client | Text/attribute changes to apply | | reload | Server → Client | Structural change requiring reload | | error | Server → Client | Parse errors detected | | fixed | Server → Client | Parse errors resolved |