mirror of
https://github.com/home-assistant/frontend.git
synced 2026-05-17 13:40:15 +01:00
Petar Petrov
d05cc25e66
* Update dependency @rspack/dev-server to v2 * Upgrade @rspack/core to 2.0.0 Pairs with the @rspack/dev-server 2.0.0 bump in #51666 — dev-server v2 declares @rspack/core ^2.0.0-0 as a peer, so the two must move together. Patches webpackbar to defend against non-string info in Rspack 2's ProgressPlugin handler (otherwise `parseRequest` throws `split is not a function` during compilation). Verified locally: yarn lint:types, yarn test, yarn lint, script/build_frontend, and all three rspack-dev-server-{demo,cast,gallery} tasks. * Wrap webpackbar instead of patching it Replace the yarn patch with a small SafeWebpackBar subclass that sanitizes the progress `details` array before the upstream parseRequest sees it. Keeps the fix local to the Rspack config where it belongs. * Pass moduleIdentifier to webpackbar progress Rspack 2's progress info is `{ builtModules, moduleIdentifier? }`. moduleIdentifier is what v1 passed as a plain string, so extract it to keep the "active module" line in the progress bar instead of blanking it. --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@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.