Skip to main content

HMR

HexaJS watch mode uses change-scoped rebuild and context-targeted reload behavior.

Command:

hexa build --watch

HexaJS intelligently triggers reload actions based on context changes to keep development fast and isolated.

UI changes trigger UI update path
Managed UI surfaces hot-update without touching content or background runtime.
Content changes trigger content update path
Content scripts reload with context-scoped updates, preserving unrelated extension state.
Background changes trigger background update path
Background applies platform-specific strategy: patch flow when supported, reload fallback otherwise.

Platform Matrix​

Hot Module Replacement behavior varies by browser and context.

PlatformUIContentBackground
Chrome / Chromium
Firefox
Safari
Full HMRDebug PatchReload Fallback

Chromium Background​

Primary path:

  • Uses debug-mode service-worker patch flow.

Requirement:

  • Browser launched with remote debugging enabled.

Example launch flag:

--remote-debugging-port=9222

Fallback path:

  • Extension reload.

Impact of fallback:

  • Background devtools sessions close and must be reopened.

Trigger behavior:

  • UI files changed -> UI hot update only.
  • Content files changed -> content hot update only.
  • Background files changed -> background patch or reload fallback only.

Firefox​

Firefox supports complete background patch flow in watch mode.

Result:

  • UI/content/background can all hot-update with context-scoped triggers.

Trigger behavior:

  • UI files changed -> UI hot update only.
  • Content files changed -> content hot update only.
  • Background files changed -> background hot update only.

Safari​

Safari supports full update flow for UI and content.

Background strategy:

  • Extension reload fallback for background changes.
  • Background devtools sessions close and need reopening.

Trigger behavior:

  • UI files changed -> UI hot update only.
  • Content files changed -> content hot update only.
  • Background files changed -> extension reload fallback only.

Trigger examples​

  • Change in popup React component: UI update only.
  • Change in content handler: content update only.
  • Change in background controller/service: background update strategy only.

Best practices​

  • Keep background state persistence explicit when testing fallback reloads.
  • Use feature flags for background experiments during watch.
  • Avoid broad refactors across all contexts when investigating HMR behavior.