mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-15 21:36:36 +00:00
Load icons via JS (#1211)
This commit is contained in:
parent
29912d1b63
commit
71196b9704
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,3 +1,4 @@
|
||||
build
|
||||
build-translations/*
|
||||
hassio/build-es5/*
|
||||
node_modules/*
|
||||
|
40
gulp/tasks/gen-icons.js
Normal file
40
gulp/tasks/gen-icons.js
Normal file
@ -0,0 +1,40 @@
|
||||
const gulp = require('gulp');
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const config = require('../config');
|
||||
|
||||
const ICON_PACKAGE_PATH = path.resolve(__dirname, '../../node_modules/@mdi/svg/');
|
||||
const META_PATH = path.resolve(ICON_PACKAGE_PATH, 'meta.json');
|
||||
const ICON_PATH = path.resolve(ICON_PACKAGE_PATH, 'svg');
|
||||
const OUTPUT_PATH = path.resolve(__dirname, '../../build/mdi.html');
|
||||
|
||||
function iconPath(name) {
|
||||
return path.resolve(ICON_PATH, `${name}.svg`);
|
||||
}
|
||||
|
||||
function loadIcon(name) {
|
||||
return fs.readFileSync(iconPath(name), 'utf-8');
|
||||
}
|
||||
|
||||
function transformXMLtoPolymer(name, xml) {
|
||||
const start = xml.indexOf('><path') + 1;
|
||||
const end = xml.length - start - 6;
|
||||
const path = xml.substr(start, end);
|
||||
return `<g id="${name}">${path}</g>`;
|
||||
}
|
||||
|
||||
function generateIconset(name, iconDefs) {
|
||||
return `
|
||||
<ha-iconset-svg name="${name}" size="24"><svg><defs>
|
||||
${iconDefs}
|
||||
</defs></svg></ha-iconset-svg>
|
||||
`;
|
||||
}
|
||||
|
||||
async function genIcons(es6) {
|
||||
const meta = JSON.parse(fs.readFileSync(path.resolve(ICON_PACKAGE_PATH, META_PATH), 'UTF-8'));
|
||||
const iconDefs = meta.map(iconInfo => transformXMLtoPolymer(iconInfo.name, loadIcon(iconInfo.name))).join('');
|
||||
fs.writeFileSync(OUTPUT_PATH, generateIconset('mdi', iconDefs));
|
||||
}
|
||||
|
||||
gulp.task('gen-icons', () => genIcons(/* es6= */ true));
|
@ -18,8 +18,8 @@ function generateIndex(es6) {
|
||||
const toReplace = [
|
||||
// Needs to look like a color during CSS minifiaction
|
||||
['{{ theme_color }}', '#THEME'],
|
||||
['/static/mdi.html',
|
||||
`/static/mdi-${md5(path.resolve(config.output, 'mdi.html'))}.html`],
|
||||
['/frontend_latest/mdi.js',
|
||||
`/frontend_latest/mdi-${md5(path.resolve(config.output, 'mdi.js'))}.js`],
|
||||
];
|
||||
|
||||
if (!es6) {
|
||||
|
@ -99,7 +99,7 @@
|
||||
<!--EXTRA_SCRIPTS-->
|
||||
<script src='/frontend_latest/core.js'></script>
|
||||
<script src='/frontend_latest/app.js'></script>
|
||||
<link rel='import' href='/static/mdi.html' async>
|
||||
<script src='/frontend_latest/mdi.js' async></script>
|
||||
{% for extra_url in extra_urls -%}
|
||||
<link rel='import' href='{{ extra_url }}' async>
|
||||
{% endfor -%}
|
||||
|
@ -15,6 +15,7 @@
|
||||
"author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@mdi/svg": "^2.4.85",
|
||||
"@polymer/app-layout": "^3.0.0-pre.18",
|
||||
"@polymer/app-localize-behavior": "^3.0.0-pre.18",
|
||||
"@polymer/app-route": "^3.0.0-pre.18",
|
||||
@ -112,6 +113,7 @@
|
||||
"gulp-uglify": "^3.0.0",
|
||||
"gulp-util": "^3.0.8",
|
||||
"gulp-zopfli": "^1.0.0",
|
||||
"html-loader": "^0.5.5",
|
||||
"html-minifier": "^3.5.6",
|
||||
"merge-stream": "^1.0.1",
|
||||
"mocha": "^5.0.0",
|
||||
|
2
public/mdi.html
Normal file
2
public/mdi.html
Normal file
@ -0,0 +1,2 @@
|
||||
<!-- For backwards compat for Hass.io -->
|
||||
<script src='./mdi.js'></script>
|
@ -15,12 +15,9 @@ mkdir $OUTPUT_DIR_ES5
|
||||
cp -r public/__init__.py $OUTPUT_DIR_ES5/
|
||||
|
||||
# Build frontend
|
||||
BUILD_DEV=0 ./node_modules/.bin/gulp build-translations
|
||||
./node_modules/.bin/gulp build-translations gen-icons
|
||||
NODE_ENV=production ./node_modules/.bin/webpack
|
||||
|
||||
# Icons
|
||||
script/update_mdi.py
|
||||
|
||||
./node_modules/.bin/gulp compress
|
||||
|
||||
# Generate the __init__ file
|
||||
|
@ -13,14 +13,11 @@ mkdir $OUTPUT_DIR_ES5
|
||||
# Needed in case frontend repo installed with pip3 install -e
|
||||
cp -r public/__init__.py $OUTPUT_DIR_ES5/
|
||||
|
||||
./node_modules/.bin/gulp build-translations
|
||||
./node_modules/.bin/gulp build-translations gen-icons
|
||||
cp src/authorize.html $OUTPUT_DIR
|
||||
|
||||
# Manually copy over this file as we don't run the ES5 build
|
||||
# The Hass.io panel depends on it.
|
||||
cp node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js $OUTPUT_DIR_ES5
|
||||
|
||||
# Icons
|
||||
script/update_mdi.py
|
||||
|
||||
./node_modules/.bin/webpack --watch --progress
|
||||
|
6
src/entrypoints/mdi.js
Normal file
6
src/entrypoints/mdi.js
Normal file
@ -0,0 +1,6 @@
|
||||
import iconSetContent from '../../build/mdi.html';
|
||||
|
||||
const documentContainer = document.createElement('template');
|
||||
documentContainer.setAttribute('style', 'display: none;');
|
||||
documentContainer.innerHTML = iconSetContent;
|
||||
document.head.appendChild(documentContainer.content);
|
@ -64,6 +64,7 @@ function createConfig(isProdBuild, latestBuild) {
|
||||
copyPluginOpts.push('node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js')
|
||||
copyPluginOpts.push({ from: 'node_modules/leaflet/dist/leaflet.css', to: `images/leaflet/` });
|
||||
copyPluginOpts.push({ from: 'node_modules/leaflet/dist/images', to: `images/leaflet/` });
|
||||
entry.mdi = './src/entrypoints/mdi.js';
|
||||
} else {
|
||||
copyPluginOpts.push('node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js');
|
||||
babelOptions.presets = [
|
||||
@ -98,6 +99,15 @@ function createConfig(isProdBuild, latestBuild) {
|
||||
loader: 'babel-loader',
|
||||
options: babelOptions,
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.(html)$/,
|
||||
use: {
|
||||
loader: 'html-loader',
|
||||
options: {
|
||||
exportAsEs6Default: true,
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
58
yarn.lock
58
yarn.lock
@ -573,6 +573,10 @@
|
||||
lodash "^4.17.5"
|
||||
to-fast-properties "^2.0.0"
|
||||
|
||||
"@mdi/svg@^2.4.85":
|
||||
version "2.4.85"
|
||||
resolved "https://registry.yarnpkg.com/@mdi/svg/-/svg-2.4.85.tgz#b707508ff08597a63f3fa5f4a138be8c3d85ed0b"
|
||||
|
||||
"@mrmlnc/readdir-enhanced@^2.2.1":
|
||||
version "2.2.1"
|
||||
resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
|
||||
@ -2288,6 +2292,10 @@ ast-types@0.11.3:
|
||||
version "0.11.3"
|
||||
resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.11.3.tgz#c20757fe72ee71278ea0ff3d87e5c2ca30d9edf8"
|
||||
|
||||
ast-types@0.9.6:
|
||||
version "0.9.6"
|
||||
resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.9.6.tgz#102c9e9e9005d3e7e3829bf0c4fa24ee862ee9b9"
|
||||
|
||||
async-each@^1.0.0:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
|
||||
@ -5020,6 +5028,13 @@ es6-promise@^4.0.5:
|
||||
version "4.2.4"
|
||||
resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.4.tgz#dc4221c2b16518760bd8c39a52d8f356fc00ed29"
|
||||
|
||||
es6-templates@^0.2.3:
|
||||
version "0.2.3"
|
||||
resolved "https://registry.yarnpkg.com/es6-templates/-/es6-templates-0.2.3.tgz#5cb9ac9fb1ded6eb1239342b81d792bbb4078ee4"
|
||||
dependencies:
|
||||
recast "~0.11.12"
|
||||
through "~2.3.6"
|
||||
|
||||
escape-html@1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.1.tgz#181a286ead397a39a92857cfb1d43052e356bff0"
|
||||
@ -5167,6 +5182,10 @@ esprima@^4.0.0, esprima@~4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.0.tgz#4499eddcd1110e0b218bacf2fa7f7f59f55ca804"
|
||||
|
||||
esprima@~3.1.0:
|
||||
version "3.1.3"
|
||||
resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
|
||||
|
||||
esquery@^1.0.0:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.1.tgz#406c51658b1f5991a5f9b62b1dc25b00e3e5c708"
|
||||
@ -5486,6 +5505,10 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.4:
|
||||
version "2.0.6"
|
||||
resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
|
||||
|
||||
fastparse@^1.1.1:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
|
||||
|
||||
fbjs@^0.8.16:
|
||||
version "0.8.16"
|
||||
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
|
||||
@ -6739,6 +6762,16 @@ hpack.js@^2.1.6:
|
||||
readable-stream "^2.0.1"
|
||||
wbuf "^1.1.0"
|
||||
|
||||
html-loader@^0.5.5:
|
||||
version "0.5.5"
|
||||
resolved "https://registry.yarnpkg.com/html-loader/-/html-loader-0.5.5.tgz#6356dbeb0c49756d8ebd5ca327f16ff06ab5faea"
|
||||
dependencies:
|
||||
es6-templates "^0.2.3"
|
||||
fastparse "^1.1.1"
|
||||
html-minifier "^3.5.8"
|
||||
loader-utils "^1.1.0"
|
||||
object-assign "^4.1.1"
|
||||
|
||||
html-minifier@^1.1.1:
|
||||
version "1.5.0"
|
||||
resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-1.5.0.tgz#beb05fd9cc340945865c10f40aedf469af4b1534"
|
||||
@ -6777,6 +6810,18 @@ html-minifier@^3.5.6:
|
||||
relateurl "0.2.x"
|
||||
uglify-js "3.1.x"
|
||||
|
||||
html-minifier@^3.5.8:
|
||||
version "3.5.16"
|
||||
resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.16.tgz#39f5aabaf78bdfc057fe67334226efd7f3851175"
|
||||
dependencies:
|
||||
camel-case "3.0.x"
|
||||
clean-css "4.1.x"
|
||||
commander "2.15.x"
|
||||
he "1.1.x"
|
||||
param-case "2.1.x"
|
||||
relateurl "0.2.x"
|
||||
uglify-js "3.3.x"
|
||||
|
||||
htmllint@^0.2.7:
|
||||
version "0.2.7"
|
||||
resolved "https://registry.yarnpkg.com/htmllint/-/htmllint-0.2.7.tgz#df3ebd82b917ce2c8d78e4eb7929831b5a0e5bea"
|
||||
@ -10219,6 +10264,15 @@ recast@^0.14.1:
|
||||
private "~0.1.5"
|
||||
source-map "~0.6.1"
|
||||
|
||||
recast@~0.11.12:
|
||||
version "0.11.23"
|
||||
resolved "https://registry.yarnpkg.com/recast/-/recast-0.11.23.tgz#451fd3004ab1e4df9b4e4b66376b2a21912462d3"
|
||||
dependencies:
|
||||
ast-types "0.9.6"
|
||||
esprima "~3.1.0"
|
||||
private "~0.1.5"
|
||||
source-map "~0.5.0"
|
||||
|
||||
rechoir@^0.6.2:
|
||||
version "0.6.2"
|
||||
resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
|
||||
@ -11186,7 +11240,7 @@ source-map@0.4.x:
|
||||
dependencies:
|
||||
amdefine ">=0.0.4"
|
||||
|
||||
source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.1, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1:
|
||||
source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.1, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.0, source-map@~0.5.1:
|
||||
version "0.5.7"
|
||||
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
|
||||
|
||||
@ -11760,7 +11814,7 @@ through2@^2.0.0, through2@^2.0.1, through2@^2.0.3, through2@~2.0.0:
|
||||
readable-stream "^2.1.5"
|
||||
xtend "~4.0.1"
|
||||
|
||||
through@2, through@^2.3.6, through@^2.3.8, through@~2.3, through@~2.3.1:
|
||||
through@2, through@^2.3.6, through@^2.3.8, through@~2.3, through@~2.3.1, through@~2.3.6:
|
||||
version "2.3.8"
|
||||
resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user