frontend/build-scripts
Logan Rosen b3b8f1a38a
Filter ResizeObserver loop errors from dev server overlay (#30125)
The @rspack/dev-server overlay catches ResizeObserver loop errors as
runtime crashes, showing a full-screen error overlay that blocks
development. These errors are benign — they originate from
lit-virtualizer (used by ha-data-table) and simply mean not all
resize observations could be delivered in a single animation frame.

Add a client.overlay.runtimeErrors filter to the dev server config
that suppresses ResizeObserver loop messages while still surfacing
all real runtime errors.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
2026-03-13 08:28:58 +02:00
..
babel-plugins Replace paper item in sidebar (#24883) 2025-04-10 18:32:38 +02:00
gulp Filter ResizeObserver loop errors from dev server overlay (#30125) 2026-03-13 08:28:58 +02:00
README.md Remove rollup build configuration (#22181) 2024-11-08 10:19:52 +02:00
bundle.cjs Remove supervisor build (#29132) 2026-01-22 13:30:33 +01:00
env.cjs Replace paper item in sidebar (#24883) 2025-04-10 18:32:38 +02:00
eslint.config.mjs Improve ESLint config (#24290) 2025-02-18 17:30:36 +00:00
list-plugins-and-polyfills.js Use SWC for typescript, update to Lit 3, migrate decorators (#25150) 2025-04-24 14:10:35 +02:00
paths.cjs Remove supervisor build (#29132) 2026-01-22 13:30:33 +01:00
removedIcons.json Remove deprecated and removed icons (#15762) 2023-03-08 12:28:34 +01:00
rspack.cjs Remove supervisor build (#29132) 2026-01-22 13:30:33 +01:00

README.md

Bundling Home Assistant Frontend

The Home Assistant build pipeline contains various steps to prepare a build.

  • Generating icon files to be included
  • Generating translation files to be included
  • Converting TypeScript, CSS and JSON files to JavaScript
  • Bundling
  • Minifying the files
  • Generating the HTML entrypoint files
  • Generating the service worker
  • Compressing the files

Converting files

Currently in Home Assistant we use a bundler to convert TypeScript, CSS and JSON files to JavaScript files that the browser understands.

We currently rely on Webpack. Both of these programs bundle the converted files in both production and development.

For development, bundling is optional. We just want to get the right files in the browser.

Responsibilities of the converter during development:

  • Convert TypeScript to JavaScript
  • Convert CSS to JavaScript that sets the content as the default export
  • Convert JSON to JavaScript that sets the content as the default export
  • Make sure import, dynamic import and web worker references work
    • Add extensions where missing
    • Resolve absolute package imports
  • Filter out specific imports/packages
  • Replace constants with values

In production, the following responsibilities are added:

  • Minify HTML
  • Bundle multiple imports so that the browser can fetch less files
  • Generate a second version that is ES5 compatible

Configuration for all these steps are specified in bundle.js.