Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/workflows/ci.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ jobs:
env:
CI: true
- name: Build icons
run: ./node_modules/.bin/gulp gen-icons-hassio gen-icons-mdi gen-icons-app
run: ./node_modules/.bin/gulp gen-icons-json
- name: Build translations
run: ./node_modules/.bin/gulp build-translations
- name: Run eslint
Expand Down
6 changes: 3 additions & 3 deletions build-scripts/gulp/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const envVars = require("../env");

require("./clean.js");
require("./translations.js");
require("./gen-icons.js");
require("./gen-icons-json.js");
require("./gather-static.js");
require("./compress.js");
require("./webpack.js");
Expand All @@ -21,7 +21,7 @@ gulp.task(
"clean",
gulp.parallel(
"gen-service-worker-dev",
gulp.parallel("gen-icons-app", "gen-icons-mdi"),
"gen-icons-json",
"gen-pages-dev",
"gen-index-app-dev",
"build-translations"
Expand All @@ -38,7 +38,7 @@ gulp.task(
process.env.NODE_ENV = "production";
},
"clean",
gulp.parallel("gen-icons-app", "gen-icons-mdi", "build-translations"),
gulp.parallel("gen-icons-json", "build-translations"),
"copy-static",
"webpack-prod-app",
...// Don't compress running tests
Expand Down
10 changes: 2 additions & 8 deletions build-scripts/gulp/cast.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ const gulp = require("gulp");

require("./clean.js");
require("./translations.js");
require("./gen-icons.js");
require("./gather-static.js");
require("./webpack.js");
require("./service-worker.js");
Expand All @@ -17,12 +16,7 @@ gulp.task(
},
"clean-cast",
"translations-enable-merge-backend",
gulp.parallel(
"gen-icons-app",
"gen-icons-mdi",
"gen-index-cast-dev",
"build-translations"
),
gulp.parallel("gen-icons-json", "build-translations"),
"copy-static-cast",
"webpack-dev-server-cast"
)
Expand All @@ -36,7 +30,7 @@ gulp.task(
},
"clean-cast",
"translations-enable-merge-backend",
gulp.parallel("gen-icons-app", "gen-icons-mdi", "build-translations"),
gulp.parallel("gen-icons-json", "build-translations"),
"copy-static-cast",
"webpack-prod-cast",
"gen-index-cast-prod"
Expand Down
17 changes: 3 additions & 14 deletions build-scripts/gulp/demo.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ const gulp = require("gulp");

require("./clean.js");
require("./translations.js");
require("./gen-icons.js");
require("./gen-icons-json.js");
require("./gather-static.js");
require("./webpack.js");
require("./service-worker.js");
Expand All @@ -17,13 +17,7 @@ gulp.task(
},
"clean-demo",
"translations-enable-merge-backend",
gulp.parallel(
"gen-icons-app",
"gen-icons-mdi",
"gen-icons-demo",
"gen-index-demo-dev",
"build-translations"
),
gulp.parallel("gen-icons-json", "gen-index-demo-dev", "build-translations"),
"copy-static-demo",
"webpack-dev-server-demo"
)
Expand All @@ -38,12 +32,7 @@ gulp.task(
"clean-demo",
// Cast needs to be backwards compatible and older HA has no translations
"translations-enable-merge-backend",
gulp.parallel(
"gen-icons-app",
"gen-icons-mdi",
"gen-icons-demo",
"build-translations"
),
gulp.parallel("gen-icons-json", "build-translations"),
"copy-static-demo",
"webpack-prod-demo",
"gen-index-demo-prod"
Expand Down
8 changes: 0 additions & 8 deletions build-scripts/gulp/entry-html.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,9 @@ gulp.task("gen-pages-dev", (done) => {
for (const page of PAGES) {
const content = renderTemplate(page, {
latestPageJS: `/frontend_latest/${page}.js`,
latestHassIconsJS: "/frontend_latest/hass-icons.js",

es5Compatibility: "/frontend_es5/compatibility.js",
es5PageJS: `/frontend_es5/${page}.js`,
es5HassIconsJS: "/frontend_es5/hass-icons.js",
});

fs.outputFileSync(path.resolve(config.root, `${page}.html`), content);
Expand All @@ -66,11 +64,9 @@ gulp.task("gen-pages-prod", (done) => {
for (const page of PAGES) {
const content = renderTemplate(page, {
latestPageJS: latestManifest[`${page}.js`],
latestHassIconsJS: latestManifest["hass-icons.js"],

es5Compatibility: es5Manifest["compatibility.js"],
es5PageJS: es5Manifest[`${page}.js`],
es5HassIconsJS: es5Manifest["hass-icons.js"],
});

fs.outputFileSync(
Expand All @@ -88,13 +84,11 @@ gulp.task("gen-index-app-dev", (done) => {
latestAppJS: "/frontend_latest/app.js",
latestCoreJS: "/frontend_latest/core.js",
latestCustomPanelJS: "/frontend_latest/custom-panel.js",
latestHassIconsJS: "/frontend_latest/hass-icons.js",

es5Compatibility: "/frontend_es5/compatibility.js",
es5AppJS: "/frontend_es5/app.js",
es5CoreJS: "/frontend_es5/core.js",
es5CustomPanelJS: "/frontend_es5/custom-panel.js",
es5HassIconsJS: "/frontend_es5/hass-icons.js",
}).replace(/#THEMEC/g, "{{ theme_color }}");

fs.outputFileSync(path.resolve(config.root, "index.html"), content);
Expand All @@ -108,13 +102,11 @@ gulp.task("gen-index-app-prod", (done) => {
latestAppJS: latestManifest["app.js"],
latestCoreJS: latestManifest["core.js"],
latestCustomPanelJS: latestManifest["custom-panel.js"],
latestHassIconsJS: latestManifest["hass-icons.js"],

es5Compatibility: es5Manifest["compatibility.js"],
es5AppJS: es5Manifest["app.js"],
es5CoreJS: es5Manifest["core.js"],
es5CustomPanelJS: es5Manifest["custom-panel.js"],
es5HassIconsJS: es5Manifest["hass-icons.js"],
});
const minified = minifyHtml(content).replace(/#THEMEC/g, "{{ theme_color }}");

Expand Down
6 changes: 3 additions & 3 deletions build-scripts/gulp/gallery.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ const gulp = require("gulp");

require("./clean.js");
require("./translations.js");
require("./gen-icons.js");
require("./gen-icons-json.js");
require("./gather-static.js");
require("./webpack.js");
require("./service-worker.js");
Expand All @@ -17,7 +17,7 @@ gulp.task(
},
"clean-gallery",
"translations-enable-merge-backend",
gulp.parallel("gen-icons-app", "gen-icons-mdi", "build-translations"),
gulp.parallel("gen-icons-json", "build-translations"),
"copy-static-gallery",
"gen-index-gallery-dev",
"webpack-dev-server-gallery"
Expand All @@ -32,7 +32,7 @@ gulp.task(
},
"clean-gallery",
"translations-enable-merge-backend",
gulp.parallel("gen-icons-app", "gen-icons-mdi", "build-translations"),
gulp.parallel("gen-icons-json", "build-translations"),
"copy-static-gallery",
"webpack-prod-gallery",
"gen-index-gallery-prod"
Expand Down
11 changes: 11 additions & 0 deletions build-scripts/gulp/gather-static.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,13 @@ function copyTranslations(staticDir) {
);
}

function copyMdiIcons(staticDir) {
const staticPath = genStaticPath(staticDir);

// MDI icons output
fs.copySync(polyPath("build/mdi"), staticPath("mdi"));
}

function copyPolyfills(staticDir) {
const staticPath = genStaticPath(staticDir);

Expand Down Expand Up @@ -80,6 +87,7 @@ gulp.task("copy-static", (done) => {
copyPolyfills(staticDir);
copyFonts(staticDir);
copyTranslations(staticDir);
copyMdiIcons(staticDir);

// Panel assets
copyFileDir(
Expand All @@ -103,6 +111,7 @@ gulp.task("copy-static-demo", (done) => {
copyMapPanel(paths.demo_static);
copyFonts(paths.demo_static);
copyTranslations(paths.demo_static);
copyMdiIcons(paths.demo_static);
done();
});

Expand All @@ -115,6 +124,7 @@ gulp.task("copy-static-cast", (done) => {
copyMapPanel(paths.cast_static);
copyFonts(paths.cast_static);
copyTranslations(paths.cast_static);
copyMdiIcons(paths.cast_static);
done();
});

Expand All @@ -127,5 +137,6 @@ gulp.task("copy-static-gallery", (done) => {
copyMapPanel(paths.gallery_static);
copyFonts(paths.gallery_static);
copyTranslations(paths.gallery_static);
copyMdiIcons(paths.gallery_static);
done();
});
109 changes: 109 additions & 0 deletions build-scripts/gulp/gen-icons-json.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
const gulp = require("gulp");
const path = require("path");
const fs = require("fs");
const hash = require("object-hash");

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_DIR = path.resolve(__dirname, "../../build/mdi");

const encoding = "utf8";

const getMeta = () => {
const file = fs.readFileSync(META_PATH, { encoding });
const meta = JSON.parse(file);
return meta.map((icon) => {
const svg = fs.readFileSync(`${ICON_PATH}/${icon.name}.svg`, {
encoding,
});
return { path: svg.match(/ d="([^"]+)"/)[1], name: icon.name };
});
};

const splitBySize = (meta) => {
const chunks = [];
const CHUNK_SIZE = 100000;

let curSize = 0;
let startKey;
let icons = [];

Object.values(meta).forEach((icon) => {
if (startKey === undefined) {
startKey = icon.name;
}
curSize += icon.path.length;
icons.push(icon);
if (curSize > CHUNK_SIZE) {
chunks.push({
startKey,
endKey: icon.name,
icons,
});
curSize = 0;
startKey = undefined;
icons = [];
}
});

chunks.push({
startKey,
icons,
});

return chunks;
};

const findDifferentiator = (curString, prevString) => {
for (let i = 0; i < curString.length; i++) {
if (curString[i] !== prevString[i]) {
return curString.substring(0, i + 1);
}
}
console.error("Cannot find differentiator", curString, prevString);
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I don't think that it could happen, but we should probably raise here to make sure that it breaks.

return undefined;
};

gulp.task("gen-icons-json", (done) => {
const meta = getMeta();
const split = splitBySize(meta);

if (!fs.existsSync(OUTPUT_DIR)) {
fs.mkdirSync(OUTPUT_DIR, { recursive: true });
}
const manifest = [];

let lastEnd;
split.forEach((chunk) => {
let startKey;
if (lastEnd === undefined) {
chunk.startKey = undefined;
startKey = undefined;
} else {
startKey = findDifferentiator(chunk.startKey, lastEnd);
}
lastEnd = chunk.endKey;

const output = {};
chunk.icons.forEach((icon) => {
output[icon.name] = icon.path;
});
const filename = hash(output);
manifest.push({ start: startKey, file: filename });
fs.writeFileSync(
path.resolve(OUTPUT_DIR, `${filename}.json`),
JSON.stringify(output)
);
});

fs.writeFileSync(
path.resolve(OUTPUT_DIR, "iconMetadata.json"),
JSON.stringify(manifest)
);

done();
});
Loading