frontend/build-scripts
Wendelin 9e4dc0d39e
Migrate add/edit resources dialog to @material/web (#21933)
* Remove dashboard resources options from advanced mode

* Add ha-dialog-new, use it for dashboard resources

* Add ha-dialog-new shake; Move resources delete to table

* Improve ha-dialog-new, resource-detail

* Rename ha-dialog-new to ha-md-dialog

* Update src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts

Fix dialogClosed method naming

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Add ha-md-dialog polyfill

* Fix ha-md-dialog for iOS 12

* Fix ha-md-dialog polyfill loading

* Fix ha-md-dialog open prop

* Fix ha-md-dialog legacy loading

* Improve ha-md-dialog legacy loading

* Fix multiple polyfill loads in ha-md-dialog

* Fix polyfill handleOpen in ha-md-dialog

* Improve polyfill handleOpen in ha-md-dialog

* Improve polyfill handleOpen ordering in ha-md-dialog

---------

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
2024-09-16 12:27:13 +00:00
..
babel-plugins Inject element polyfills where used using Babel (#20689) 2024-05-29 14:02:40 +02:00
gulp Migrate add/edit resources dialog to @material/web (#21933) 2024-09-16 12:27:13 +00:00
rollup-plugins Make module types explicit and convert some to ESM (#15964) 2023-03-30 11:23:43 +02:00
.eslintrc.json Fetch nightly translations during build (#13724) 2022-11-29 19:33:43 +01:00
README.md
bundle.cjs Redefine browser requirements for modern (latest) builds (#16506) 2024-07-19 10:49:19 -04:00
env.cjs Fix demo development inside a dev container (#21261) 2024-07-03 13:52:53 +02:00
list-plugins-and-polyfills.js Enable shipped proposals in Babel (#17909) 2023-09-19 13:56:55 +02:00
paths.cjs Make module types explicit and convert some to ESM (#15964) 2023-03-30 11:23:43 +02:00
removedIcons.json Remove deprecated and removed icons (#15762) 2023-03-08 12:28:34 +01:00
rollup.cjs Export base create config functions (#17007) 2023-06-26 09:50:43 +02:00
webpack.cjs Enable service worker for legacy build (#21177) 2024-07-19 10:54:27 +02: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 but also have experimental Rollup support. 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.