Inline charts.css

package.json

@@ -5,7 +5,7 @@
   "main": "dist/webhallen.user.js",
   "scripts": {
     "build": "npm run build:compile && npm run build:header && npm run build:merge && npm run build:cleanup",
-    "build:compile": "npx esbuild --bundle src/userscript.ts --outdir=dist",
+    "build:compile": "npx esbuild --bundle src/userscript.ts --outdir=dist --loader:.css=text",
     "build:header": "npx envsub --env USER_SCRIPT_VERSION=\"$(jq .version package.json)\" --env USER_SCRIPT_DESC=\"$(jq .description package.json)\" --env USER_SCRIPT_AUTHORS=\"$(jq --join-output '.authors | join(\", \")' package.json)\" -p -s dollar-basic userscript-header.js dist/header.js",
     "build:merge": "cat dist/header.js dist/userscript.js > dist/webhallen.user.js",
     "build:cleanup": "rm dist/header.js dist/userscript.js",
@@ -35,5 +35,8 @@
     "esbuild": "^0.19.11",
     "typescript": "^5.3.3",
     "vitest": "^1.1.3"
+  },
+  "dependencies": {
+    "charts.css": "^1.1.0"
   }
 }

src/lib/api.ts

@@ -30,8 +30,13 @@ export const fetchAPI = async <ExpectedType = unknown> (
 }
 
 export async function fetchMe (): Promise<MeResponse['user']> {
-  const data = await fetchAPI<MeResponse>('https://www.webhallen.com/api/me')
-  return data.user
+  return await getCachedPromise({
+    key: 'me',
+    fn: async () => {
+      const data = await fetchAPI<MeResponse>('https://www.webhallen.com/api/me')
+      return data.user
+    },
+  })
 }
 
 const fetchOrdersFresh = async (whId: number): Promise<Order[]> => {

src/lib/css.ts

@@ -0,0 +1,9 @@
+const addedCache = {} as Record<string, boolean>
+
+export const addCss = (css: string): void => {
+  if (addedCache[css]) return
+  const stylesheet = document.createElement('style')
+  stylesheet.innerHTML = css
+  document.head.appendChild(stylesheet)
+  addedCache[css] = true
+}

src/renderers/stats.ts

@@ -1,11 +1,13 @@
 import { fetchAchievements, fetchOrders, fetchSupplyDrops } from '../lib/api'
+import { addCss } from '../lib/css'
 import { getCachedUser } from '../lib/userIdCache'
 import { findCategoriesByPeriod } from '../reducers/categories'
 import { type ExperienceStats, getExperienceStats } from '../reducers/experience'
 import { type HoarderEntry, findTopHoarderCheevoStats } from '../reducers/hoarder'
 import { findOrdersPerMonth } from '../reducers/orders'
 import { getStoreStats, type StoreSum } from '../reducers/stores'
 import { type Streaks, findStreaks } from '../reducers/streaks'
+import chartsCss from 'charts.css'
 
 function addDataToDiv (headerText: string, domObject: Element): HTMLDivElement {
   const div = document.createElement('div')
@@ -481,7 +483,8 @@ function generateStoresChart (storeSums: Map<string, StoreSum>): HTMLDivElement
 
 async function _clearAndAddStatistics (event: MouseEvent): Promise<void> {
   event.preventDefault()
-  GM_addStyle('@import url("https://unpkg.com/charts.css/dist/charts.min.css");')
+
+  addCss(chartsCss)
 
   const clickedLink = event.target as HTMLElement
 

src/typings.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const content
+  export default content
+}