midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Performance: trim svg.ts, use Svelte-SVG-componenets where possible (WIP)

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-11-19 04:38:34 +01:00
parent ac5c60c3f0
commit c13d80f062
37 changed files with 367 additions and 378 deletions
Download patch file Download diff file Expand all files Collapse all files

68
scripts/generateIncludedImages.ts
View file

@ -1,11 +1,47 @@
import * as fs from "fs"
function genImages(dryrun = false) {
console.log("Generating images")
// These images are not referenced via 'Svg.ts' anymore and can be ignored
const blacklist: string[] = [
"SocialImageForeground",
"wikipedia",
"Upload",
"pin",
"mapillary_black",
"plantnet_logo",
"mastodon",
"move-arrows",
"mapcomplete_logo",
"logo",
"logout",
"hand",
"help",
"home",
"reload",
"min",
"plus",
"not_found",
"osm_logo_us",
"party",
"filter",
"filter_disable",
"floppy",
"eye",
"gear",
"gender_bi",
"compass",
"blocked",
"brick_wall",
"brick_wall_raw",
"brick_wall_round",
"bug",
"back",
].map((s) => s.toLowerCase())
const dir = fs.readdirSync("./assets/svg")
let module =
'import Img from "./UI/Base/Img";\nimport {FixedUiElement} from "./UI/Base/FixedUiElement";\n\n/* @deprecated */\nexport default class Svg {\n\n\n'
const allNames: string[] = []
for (const path of dir) {
if (path.endsWith("license_info.json")) {
continue
@ -21,6 +57,7 @@ function genImages(dryrun = false) {
let svg: string = fs
.readFileSync("./assets/svg/" + path, "utf-8")
.replace(/<\?xml.*?>/, "")
.replace(/<!DOCTYPE [^>]*>/, "")
.replace(/fill: ?none;/g, "fill: none !important;") // This is such a brittle hack...
.replace(/\n/g, " ")
.replace(/\r/g, "")
@ -37,18 +74,6 @@ function genImages(dryrun = false) {
}
const name = path.substring(0, path.length - 4).replace(/[ -]/g, "_")
if (dryrun) {
svg = "<omitting svg - dryrun>"
}
let rawName = name
module += ` public static ${name} = "${svg}"\n`
module += ` public static ${name}_svg() { return new Img(Svg.${rawName}, true);}\n`
if (!dryrun) {
allNames.push(`"${path}": Svg.${name}`)
}
const nameUC = name.toUpperCase().at(0) + name.substring(1)
const svelteCode =
'<script>\nexport let color = "#000000"\n</script>\n' +
@ -60,8 +85,23 @@ function genImages(dryrun = false) {
.replace(/\\"/g, '"')
.replace(/(rgb\(0%,0%,0%\)|#000000|#000)/g, "{color}")
fs.writeFileSync("./src/assets/svg/" + nameUC + ".svelte", svelteCode, "utf8")
if (blacklist.some((item) => path.toLowerCase().endsWith(item + ".svg"))) {
continue
}
if (dryrun) {
svg = "<omitting svg - dryrun>"
}
let rawName = name
module += ` public static ${name} = "${svg}"\n`
if (!dryrun) {
module += ` public static ${name}_svg() { return new Img(Svg.${rawName}, true);}\n`
} else {
module += ` public static ${name}_svg() { return new Img("", true);}\n`
}
}
module += `public static All = {${allNames.join(",")}};`
module += "}\n"
fs.writeFileSync("src/Svg.ts", module)
console.log("Done")