jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Load icons via JS (#1211)

Browse Source
This commit is contained in:
Paulus Schoutsen 2018-05-26 11:50:03 -04:00 committed by GitHub
parent 29912d1b63
commit 71196b9704
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 122 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,3 +1,4 @@
build
build-translations/*
hassio/build-es5/*
node_modules/*

40
gulp/tasks/gen-icons.js Normal file
View 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));

4
gulp/tasks/gen-index-html.js
View File

@ -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) {

2
index.html
View File

@ -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 -%}

2
package.json
View File

@ -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
View File

@ -0,0 +1,2 @@
<!-- For backwards compat for Hass.io -->
<script src='./mdi.js'></script>

5
script/build_frontend
View File

@ -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

5
script/develop
View 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
View 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);

10
webpack.config.js
View File

@ -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
View File

@ -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"