The Rename, The Bridge, The Click — Liveflux Evolves

Today I chased a tiny annoyance and came back with a cleaner language for my livewire-like UI.

Funny how small changes carry big vibes.

---

Chapter 1 — A Standalone Package

First, I gave the runtime its own home. Tools deserve a place where they can grow without the clutter of the app.

• Module: github.com/dracory/liveflux
• Install: go get github.com/dracory/liveflux
• Import: import "github.com/dracory/liveflux"

Quick use, the kind you paste at 1 a.m. with a grin:

// Mount placeholder
ph := liveflux.PlaceholderByAlias("counter", map[string]string{"theme":"dark"})

// SSR render (HB tag or HTML)
tag := liveflux.SSR(counter.New(app))
html := liveflux.SSRHTML(counter.New(app))

// Client script (once)
w.Write([]byte(liveflux.Script()))

---

Chapter 2 — Names That Fit

Words matter. I retired the old data-lw-* and embraced data-flux-* across the stack. One name, many surfaces.

• Components now wrap with data-flux-root="1".
• Placeholders render with data-flux-mount="1", data-flux-component="…", and data-flux-param-*.
• Actions are expressed with data-flux-action.
• Redirects can signal via data-flux-redirect.

One vocabulary across Go, JS, and docs. Less friction, more flow.

---

Chapter 3 — Shortcuts That Don’t Break Rules

Typing should feel light. I added a shorter alias for when I’m moving fast: the client now understands both full and short forms.

• Full: data-flux-*
• Short: flux-*

Supported in the runtime:

• js/handlers.js: [data-flux-root] or [flux-root], and actions from data-flux-action or flux-action.
• js/mount.js: placeholders with data-flux-mount="1" or flux-mount="1"; component from data-flux-component or flux-component.
• js/util.js: params from both data-flux-param-* and flux-param-*.

Short where you type, explicit where you read. It stays legible tomorrow morning.

---

Chapter 4 — Examples That Teach

Examples are how future‑me learns from present‑me. I tuned the counter to speak the new language so it teaches the right thing by default.

• File: examples/counter/counter.go
• Buttons: data-flux-action="inc|dec|reset"

Docs got a sweep:

• README.md reflects data-flux-* (root, mount, component, params).
• Comparison docs updated to reference data-flux-action and data-flux-mount.

---

Chapter 5 — One Root, Less Friction

The real unlock was a tiny helper: c.Root(content).

I stopped hand‑wrapping every component with attributes and hidden fields. Instead, I returned the content through a single door and let the helper do the ceremony:

// examples/counter/counter.go
return c.Root(content)

Under the hood it adds the wrapper I always need:

• data-flux-root="1"
• hidden component and id inputs

The result? Fewer decisions, fewer typos, fewer lines. Buttons with data-flux-action just work, forms post the right identity, and the client finds the root every time. Streamlined and easy.

---

Chapter 6 — Why This Matters

• Consistency: fewer mismatches between examples, docs, and runtime.
• Ergonomics: short flux-* is easy to write; full data-flux-* stays HTML‑idiomatic.
• Migration path: both forms work, so upgrades are painless.

It’s not a big feature; it’s a smoother path. And smooth paths get walked more often.

The Co‑Pilot — Cascade + GPT‑5‑Class Help

I didn’t do this alone. Cascade (GPT‑5‑class) kept the edits sharp and the thread intact: proposing precise diffs, sweeping docs without trampling style, and catching spots where old prefixes lingered. It nudged better names (Root, data-flux-*), guarded clean code habits (no mid‑file imports), and let me move fast without breaking the rhythm.

---

Today’s Diff — At a Glance

• Liveflux runtime:
  • js/handlers.js — supports [flux-action] + [flux-root] in addition to the data- forms.
  • js/mount.js — mounts placeholders from flux-mount="1" and reads flux-component.
  • js/util.js — reads both data-flux-param-* and flux-param-*.
• Examples & docs:
  • examples/counter/counter.go — updated to data-flux-action.
  • README.md and comparison docs — switched to data-flux-*.
• App code (this repo):
  • Components and modals updated to data-flux-root, data-flux-action, data-flux-redirect.

---

What’s Next

• No more legacy data-lw-*. Going forward, only data-flux-* (and the short flux-*) are accepted.
• Configurable attribute names via client options, for advanced embedding scenarios.
• A tiny lint/check to flag regressions to data-lw-* in templates.

I changed a prefix and got a better story. The clicks still landed. The vibe stayed crisp.