Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tweak index.html #657

Merged
merged 1 commit into from Nov 21, 2017
Merged

Tweak index.html #657

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
24 changes: 19 additions & 5 deletions gulp/tasks/gen-index-html.js
View file
Open in desktop
Expand Up @@ -3,7 +3,8 @@ const replace = require('gulp-batch-replace');
const path = require('path');
const url = require('url');
const config = require('../config');
const md5 = require('../common/md5.js');
const md5 = require('../common/md5');
const { minifyStream } = require('../common/transform');

const buildReplaces = {
'/home-assistant-polymer/build/core.js': 'core.js',
Expand All @@ -15,16 +16,26 @@ function generateIndex(es6) {
const targetUrl = es6 ? '/frontend_latest/' : '/frontend_es5/';

const toReplace = [
// Needs to look like a color during CSS minifiaction
['{{ theme_color }}', '#THEME'],
['/home-assistant-polymer/hass_frontend/mdi.html',
`/static/mdi-${md5(path.resolve(config.output, 'mdi.html'))}.html`],
['/home-assistant-polymer/build-temp-es5/compatibility.js',
`/static/compatibility-${md5(path.resolve(config.output_es5, 'compatibility.js'))}.js`],
];

if (!es6) {
toReplace.push([
'/service_worker.js', '/service_worker_es5.js'
]);

const compatibilityPath = `/frontend_es5/compatibility-${md5(path.resolve(config.output_es5, 'compatibility.js'))}.js`;
const es5Extra = `
<script src='${compatibilityPath}'></script>
<script src='/frontend_es5/custom-elements-es5-adapter.js'></script>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does minifier inlines those 2 scripts?
It would be great if it did.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can add that. Should we inline core.js too?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are pros and cons:

On cold start it will save a round trip.
However index.html is fetched each time time to update cache, so by increasing this file we waste traffic.

Another option is to unite core+compatibility+adapter to a single file.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just realized that we can't combine custom-elements-es5-adapter.js with anything else. It will contain invalid syntax for older browsers which stops execution of the rest of the file.

`;

toReplace.push([
'<!--EXTRA_SCRIPTS-->', es5Extra
]);
}

for (const [replaceSearch, filename] of Object.entries(buildReplaces)) {
Expand All @@ -35,8 +46,11 @@ function generateIndex(es6) {
url.resolve(targetUrl, `${parsed.name}-${hash}${parsed.ext}`)]);
}

gulp.src(path.resolve(config.polymer_dir, 'index.html'))
.pipe(replace(toReplace))
const stream = gulp.src(path.resolve(config.polymer_dir, 'index.html'))
.pipe(replace(toReplace));

return minifyStream(stream, es6)
.pipe(replace([['#THEME', '{{ theme_color }}']]))
.pipe(gulp.dest(targetPath));
}

Expand Down
21 changes: 4 additions & 17 deletions index.html
View file
Open in desktop
Expand Up @@ -58,7 +58,7 @@
function initError() {
document.getElementById('ha-init-skeleton').classList.add('error');
};
window.noAuth = {{ no_auth }};
window.noAuth = '{{ no_auth }}';
window.Polymer = {
lazyRegister: true,
useNativeCSSProperties: true,
Expand All @@ -76,22 +76,9 @@
</div>
</div>
<home-assistant></home-assistant>
{# <script src='/home-assistant-polymer/build/_demo_data_compiled.js'></script> -#}
{% if not latest -%}
<script>
var compatibilityRequired = (typeof Object.assign != 'function');
if (compatibilityRequired) {
var e = document.createElement('script');
e.onerror = initError;
e.src = '/home-assistant-polymer/build-temp-es5/compatibility.js';
document.head.appendChild(e);
}
</script>
{% endif -%}
<!--<script src='/home-assistant-polymer/build/_demo_data_compiled.js'></script>-->
<!--EXTRA_SCRIPTS-->
<script src='/home-assistant-polymer/build/core.js'></script>
{% if not dev_mode and not latest -%}
<script src='/frontend_es5/custom-elements-es5-adapter.js'></script>
{% endif -%}
<script>
var webComponentsSupported = (
'customElements' in window &&
Expand All @@ -111,7 +98,7 @@
</script>
<link rel='import' href='/home-assistant-polymer/src/home-assistant.html' onerror='initError()'>
{% if panel_url -%}
<link rel='import' href='{{ panel_url }}' onerror='initError()' async>
<link rel='import' href='{{ panel_url }}' async>
{% endif -%}
<link rel='import' href='/home-assistant-polymer/hass_frontend/mdi.html' async>
{% for extra_url in extra_urls -%}
Expand Down
1 change: 1 addition & 0 deletions js/compatibility.js
View file
Open in desktop
@@ -1,3 +1,4 @@
import 'unfetch/polyfill';
import objAssign from 'es6-object-assign';

objAssign.polyfill();
2 changes: 1 addition & 1 deletion js/core.js
View file
Open in desktop
Expand Up @@ -23,7 +23,7 @@ const init = window.createHassConnection = function (password) {
});
};

if (window.noAuth) {
if (window.noAuth === '1') {
window.hassConnection = init();
} else if (window.localStorage.authToken) {
window.hassConnection = init(window.localStorage.authToken);
Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Expand Up @@ -79,7 +79,8 @@
"run-sequence": "^2.2.0",
"sw-precache": "^5.2.0",
"uglify-es": "^3.1.9",
"uglify-js": "^3.1.9"
"uglify-js": "^3.1.9",
"unfetch": "^3.0.0"
},
"devDependencies": {
"web-component-tester": "^6.4.0"
Expand Down
2 changes: 1 addition & 1 deletion src/util/hass-translation.html
View file
Open in desktop
Expand Up @@ -74,7 +74,7 @@
// Create a promise to fetch translation from the server
if (!translations[translationFingerprint]) {
translations[translationFingerprint] =
fetch('/static/translations/' + translationFingerprint)
fetch(`/static/translations/${translationFingerprint}`)
.then(response => response.json()).then(data => ({
language: translation,
resources: {
Expand Down
4 changes: 4 additions & 0 deletions yarn.lock
View file
Open in desktop
Expand Up @@ -7884,6 +7884,10 @@ underscore@~1.6.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.6.0.tgz#8b38b10cacdef63337b8b24e4ff86d45aea529a8"

unfetch@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/unfetch/-/unfetch-3.0.0.tgz#8d1e0513a4ecd0e5ff2d41a6ba77771aae8b6482"

unique-stream@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/unique-stream/-/unique-stream-1.0.0.tgz#d59a4a75427447d9aa6c91e70263f8d26a4b104b"
Expand Down