diff --git a/source/developers/frontend.markdown b/source/developers/frontend.markdown index 5b1bd012b40..ab417f0850a 100644 --- a/source/developers/frontend.markdown +++ b/source/developers/frontend.markdown @@ -39,19 +39,18 @@ $ script/setup ## {% linkable_title Development %} -While you are developing, you need to have webpack running to have your JavaScript changes be made available. +While you are developing, you need to have Rollup running to have your JavaScript changes be made available. ```bash $ cd homeassistant/components/frontend/www_static/home-assistant-polymer $ npm run js_dev ``` -The source code for the frontend can be found in two different directories: +The source code for the frontend can be found in three different directories: - UI: `homeassistant/components/frontend/www_static/home-assistant-polymer/src/` - - Core: `homeassistant/components/frontend/www_static/home-assistant-polymer/node_modules/home-assistant-js/src/` - -After your changes have been accepted into the home-assistant-js repository, you'll have to update Home Assistant Polymer to use the latest version of it. This can be done by updating `package.json`. Look for the line that contains home-assistant-js and update the SHA to the SHA of the last commit. + - Core: `homeassistant/components/frontend/www_static/home-assistant-polymer/home-assistant-js/src/` + - Panels: `homeassistant/components/frontend/www_static/home-assistant-polymer/panels/` # {% linkable_title Building the Polymer frontend %} @@ -59,15 +58,10 @@ Building a new version of the frontend is as simple as running `script/build_fro * **home-assistant-polymer**: Install NPM dependencies. * **home-assistant-polymer**: start frontend build. - * Compile all used JavaScript to `_app_compiled.js`. + * Compile all used JavaScript. * Install Bower dependencies. - * Vulcanize all Webcomponents to `frontend.vulcan.html`. - * Minify `frontend.vulcan.html` and save it as `frontend.html`. + * Vulcanize and minify the core and panel sources to build dir. * Copy the webcomponents polyfill `webcomponents-lite.min.js` from **home-assistant-polymer** to `components/frontend/www_static/webcomponents-lite.min.js`. - * Copy the final frontend build `frontend.html` from **home-assistant-polymer** to `components/frontend/www_static/frontend/`. - * Generate MD5 hash of `frontend.html` to signal caches to redownload the UI. - -

-Polymer build architecture diagram -Polymer build architecture diagram -

+ * Copy the final frontend build `frontend.html` and panel sources from **home-assistant-polymer** to `components/frontend/www_static/frontend/`. + * Generate MD5 hashes of core and panel sources. + * Create gzip versions of all the sources. diff --git a/source/developers/frontend_add_card.markdown b/source/developers/frontend_add_card.markdown index 8f39ed3232e..2deba80dbc3 100644 --- a/source/developers/frontend_add_card.markdown +++ b/source/developers/frontend_add_card.markdown @@ -19,11 +19,10 @@ Sensors, when not [grouped](/components/group/), are shown as so-called badges o ![Badges in the frontend](/images/frontend/frontend-badges.png) -The different badges are located in the file [`/src/components/entity/ha-state-label-badge.js`](https://github.com/home-assistant/home-assistant-polymer/blob/master/src/components/entity/ha-state-label-badge.js). +The different badges are located in the file [`/src/components/entity/ha-state-label-badge.html`](https://github.com/home-assistant/home-assistant-polymer/blob/master/src/components/entity/ha-state-label-badge.html). Adding a custom card type can be done with a few simple steps. For this example we will add a new state card for the domain `camera`: - 1. Add `'camera'` to the array `DOMAINS_WITH_CARD` in the file [/util/state-card-type.js](https://github.com/home-assistant/home-assistant-polymer/blob/master/src/util/state-card-type.js#L3-L4). - 2. Create the files `state-card-camera.html` and `state-card-camera.js` in the folder [/state-summary/](https://github.com/home-assistant/home-assistant-polymer/tree/master/src/state-summary). - 3. Add `require('./state-card-camera')` to [state-card-content.js](https://github.com/home-assistant/home-assistant-polymer/blob/master/src/state-summary/state-card-content.js). - 4. Add `` to [state-card-content.html](https://github.com/home-assistant/home-assistant-polymer/blob/master/src/state-summary/state-card-content.html). \ No newline at end of file + 1. Add `'camera'` to the array `DOMAINS_WITH_CARD` in the file [/util/hass-util.html](https://github.com/home-assistant/home-assistant-polymer/blob/master/src/util/hass-util.html#L11). + 2. Create the files `state-card-camera.html` in the folder [/state-summary/](https://github.com/home-assistant/home-assistant-polymer/tree/master/src/state-summary). + 4. Add `` to [state-card-content.html](https://github.com/home-assistant/home-assistant-polymer/blob/master/src/state-summary/state-card-content.html). diff --git a/source/developers/frontend_add_more_info.markdown b/source/developers/frontend_add_more_info.markdown index 38686a8172d..2364c5b3129 100644 --- a/source/developers/frontend_add_more_info.markdown +++ b/source/developers/frontend_add_more_info.markdown @@ -18,7 +18,6 @@ Whenever the user taps or clicks on one of the cards, a more info dialog will sh The instructions to add a more info dialog are very similar to adding a new card type. This example will add a new more info component for the domain `camera`: - 1. Add `'camera'` to the array `DOMAINS_WITH_MORE_INFO` in the file [util/state-more-info-type.js](https://github.com/home-assistant/home-assistant-polymer/blob/master/src/util/state-more-info-type.js#L1). - 2. Create the files `more-info-camera.html` and `more-info-camera.js` in the folder [/more-infos](https://github.com/home-assistant/home-assistant-polymer/tree/master/src/more-infos). - 3. Add `require('./more-info-camera')` to [more-info-content.js](https://github.com/home-assistant/home-assistant-polymer/blob/master/src/more-infos/more-info-content.js) + 1. Add `'camera'` to the array `DOMAINS_WITH_MORE_INFO` in the file [util/hass-util.html](https://github.com/home-assistant/home-assistant-polymer/blob/master/src/util/hass-util.html#L24). + 2. Create the files `more-info-camera.html` in the folder [/more-infos](https://github.com/home-assistant/home-assistant-polymer/tree/master/src/more-infos). 4. Add `` to [more-info-content.html](https://github.com/home-assistant/home-assistant-polymer/blob/master/src/more-infos/more-info-content.html) diff --git a/source/images/frontend/polymer-build-architecture.png b/source/images/frontend/polymer-build-architecture.png deleted file mode 100644 index 000e8b5d461..00000000000 Binary files a/source/images/frontend/polymer-build-architecture.png and /dev/null differ