feat(frontend): bundle the icons so the app works offline
Every <wa-icon> was fetched from ka-f.fontawesome.com at runtime —
confirmed from `performance.getEntriesByType('resource')`, 36 requests
— so offline the app had no icons at all. `setBasePath()` does not
affect the icon resolver; only the component autoloader reads it.
Overriding Web Awesome's `default` icon library fixes all 165 call
sites without changing one of them. Cross-origin requests at startup:
22 -> 0.
Three things about it are load-bearing. The set is Font Awesome Free
(CC BY 4.0, vendored with its licence by `scripts/fetch-icons.mjs`)
because the kit CDN serves Pro, which cannot be redistributed. The
names are a committed list rather than anything derived, because
twenty call sites compute their icon name from state and no static
pass can enumerate them. And a name that is not bundled is reported at
runtime to `window.__yjIconMisses` and drawn as a fallback, since a
missing icon used to be impossible — the CDN having had everything.
This commit is contained in:
@@ -0,0 +1,81 @@
|
||||
# Every icon this app bundles, as <style>/<name>, one per line.
|
||||
#
|
||||
# It is a list rather than a glob because the alternative is shipping
|
||||
# 2 001 SVGs to use 64 of them. It is *committed* rather than derived
|
||||
# because twenty call sites compute their icon name from state
|
||||
# (`jobIcon(job)`, `TONE_ICONS[tone]`, `this.favCtrl.iconName`), so no
|
||||
# static analysis can produce this list and no build step can check it.
|
||||
#
|
||||
# What checks it is the runtime: `src/icons/index.ts` reports a name it
|
||||
# cannot resolve to `window.__yjIconMisses` and renders a fallback, and
|
||||
# `frontend/scripts/icon-sweep.mjs` drives the app to collect them. A
|
||||
# missing icon is therefore a visible, findable bug rather than a
|
||||
# silent request to a CDN.
|
||||
#
|
||||
# Names must exist in Font Awesome **Free** (CC BY 4.0); see
|
||||
# fetch-icons.mjs for why that is not negotiable. Re-vendor with:
|
||||
# node frontend/scripts/fetch-icons.mjs
|
||||
regular/heart
|
||||
solid/arrow-down-wide-short
|
||||
solid/arrow-left
|
||||
solid/arrow-rotate-right
|
||||
solid/arrows-rotate
|
||||
solid/arrow-up-short-wide
|
||||
solid/backward-step
|
||||
solid/bookmark
|
||||
solid/box-open
|
||||
solid/check
|
||||
solid/chevron-down
|
||||
solid/chevron-right
|
||||
solid/circle-check
|
||||
solid/circle-exclamation
|
||||
solid/circle-info
|
||||
solid/circle-minus
|
||||
solid/circle-question
|
||||
solid/clock-rotate-left
|
||||
solid/compact-disc
|
||||
solid/copy
|
||||
solid/database
|
||||
solid/download
|
||||
solid/file-import
|
||||
solid/filter
|
||||
solid/floppy-disk
|
||||
solid/folder
|
||||
solid/forward-step
|
||||
solid/gear
|
||||
solid/globe
|
||||
solid/heart
|
||||
solid/home
|
||||
solid/hourglass-half
|
||||
solid/house
|
||||
solid/images
|
||||
solid/info
|
||||
solid/list
|
||||
solid/list-check
|
||||
solid/magnifying-glass
|
||||
solid/masks-theater
|
||||
solid/music
|
||||
solid/pause
|
||||
solid/pen
|
||||
solid/pen-to-square
|
||||
solid/play
|
||||
solid/plus
|
||||
solid/quote-left
|
||||
solid/remove
|
||||
solid/repeat
|
||||
solid/rotate
|
||||
solid/running
|
||||
solid/shuffle
|
||||
solid/star
|
||||
solid/stop
|
||||
solid/tag
|
||||
solid/tags
|
||||
solid/trash
|
||||
solid/triangle-exclamation
|
||||
solid/user
|
||||
solid/user-group
|
||||
solid/volume-high
|
||||
solid/volume-low
|
||||
solid/volume-off
|
||||
solid/volume-xmark
|
||||
solid/xmark
|
||||
Reference in New Issue
Block a user