mirror of
https://github.com/home-assistant/frontend.git
synced 2026-08-16 18:12:34 +01:00
80a026d9bf
* Recover from a stale index.html at boot A cached, stale index.html imports the previous build's content-hashed entry bundles (core.<hash>.js / app.<hash>.js). After an upgrade those files 404, app.js never runs, <home-assistant> is never defined, and the launch screen never clears. No bundled JS can recover this, because the bundle itself failed to load. Add a tiny, prod-only inline guard in index.html that catches the failed entry load (capture-phase resource error + unhandledrejection) and does a single, loop-guarded cache-busting reload, dropping the service worker and caches on https first. core.ts strips the cache-bust param after a successful boot. Part of home-assistant/epics#113. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * Share stale-build recovery patterns via a single JSON source Move the boot guard's chunk-detection regexes into stale-build-patterns.json and inject them into the inline guard at build time (entry-html.js), so they stay in sync with the bundled recovery util (util/recover-stale-build.ts, in the follow-up post-boot recovery) which reads the same file — no more manually kept-in-sync copies. Part of home-assistant/epics#113. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --------- Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com> Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
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.