build: add compressed-size-action

.github/workflows/bundle-watch.yml

@@ -0,0 +1,14 @@
+name: Compressed Size
+
+on: [pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+      - uses: preactjs/compressed-size-action@v2
+        with:
+          pattern: 'out/**/*.*'

example/package.json

@@ -14,9 +14,9 @@
     }
   },
   "dependencies": {
-    "date-fns": "^2.25.0",
-    "md.icons": "^2.2.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "date-fns": "^3.6.0",
+    "md.icons": "^2.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }

example/yarn.lock

@@ -5,21 +5,21 @@ __metadata:
   version: 5
   cacheKey: 8
 
-"date-fns@npm:^2.25.0":
-  version: 2.25.0
-  resolution: "date-fns@npm:2.25.0"
-  checksum: 8896dc1dde0ee5ef77616942423bfa11fa2017a5ac19457293b7aaedc8822ff94f0a14eaf93da573b09b601dc0149eb430988a046cc9f79a2eb15f8c66c9c50c
+"date-fns@npm:^3.6.0":
+  version: 3.6.0
+  resolution: "date-fns@npm:3.6.0"
+  checksum: 0daa1e9a436cf99f9f2ae9232b55e11f3dd46132bee10987164f3eebd29f245b2e066d7d7db40782627411ecf18551d8f4c9fcdf2226e48bb66545407d448ab7
   languageName: node
   linkType: hard
 
 "example@workspace:.":
   version: 0.0.0-use.local
   resolution: "example@workspace:."
   dependencies:
-    date-fns: ^2.25.0
-    md.icons: ^2.2.2
-    react: ^17.0.2
-    react-dom: ^17.0.2
+    date-fns: ^3.6.0
+    md.icons: ^2.5.0
+    react: ^18.2.0
+    react-dom: ^18.2.0
   languageName: unknown
   linkType: soft
 
@@ -41,49 +41,41 @@ __metadata:
   languageName: node
   linkType: hard
 
-"md.icons@npm:^2.2.2":
-  version: 2.2.2
-  resolution: "md.icons@npm:2.2.2"
-  checksum: 6ecabefeb73e313674e77d78061423c8e7647b06069ec4452a6def61768fef3b3ae5654968c690b80a95fd245213566d3e30f3d59b1d0f5e547c59143863eb6d
-  languageName: node
-  linkType: hard
-
-"object-assign@npm:^4.1.1":
-  version: 4.1.1
-  resolution: "object-assign@npm:4.1.1"
-  checksum: fcc6e4ea8c7fe48abfbb552578b1c53e0d194086e2e6bbbf59e0a536381a292f39943c6e9628af05b5528aa5e3318bb30d6b2e53cadaf5b8fe9e12c4b69af23f
+"md.icons@npm:^2.5.0":
+  version: 2.5.0
+  resolution: "md.icons@npm:2.5.0"
+  peerDependencies:
+    react: ">=16.14.0"
+  checksum: 5b46e4c859ef41fdfaf3994cb82a96d42cb83c86940cc3a68c3d6797abb8d6a52a80ff6210cdbfd93ee1380f48e0f6f7806be77291215d2cbbd86e59211aea3f
   languageName: node
   linkType: hard
 
-"react-dom@npm:^17.0.2":
-  version: 17.0.2
-  resolution: "react-dom@npm:17.0.2"
+"react-dom@npm:^18.2.0":
+  version: 18.2.0
+  resolution: "react-dom@npm:18.2.0"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-    scheduler: ^0.20.2
+    scheduler: ^0.23.0
   peerDependencies:
-    react: 17.0.2
-  checksum: 1c1eaa3bca7c7228d24b70932e3d7c99e70d1d04e13bb0843bbf321582bc25d7961d6b8a6978a58a598af2af496d1cedcfb1bf65f6b0960a0a8161cb8dab743c
+    react: ^18.2.0
+  checksum: 7d323310bea3a91be2965f9468d552f201b1c27891e45ddc2d6b8f717680c95a75ae0bc1e3f5cf41472446a2589a75aed4483aee8169287909fcd59ad149e8cc
   languageName: node
   linkType: hard
 
-"react@npm:^17.0.2":
-  version: 17.0.2
-  resolution: "react@npm:17.0.2"
+"react@npm:^18.2.0":
+  version: 18.2.0
+  resolution: "react@npm:18.2.0"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: b254cc17ce3011788330f7bbf383ab653c6848902d7936a87b09d835d091e3f295f7e9dd1597c6daac5dc80f90e778c8230218ba8ad599f74adcc11e33b9d61b
+  checksum: 88e38092da8839b830cda6feef2e8505dec8ace60579e46aa5490fc3dc9bba0bd50336507dc166f43e3afc1c42939c09fe33b25fae889d6f402721dcd78fca1b
   languageName: node
   linkType: hard
 
-"scheduler@npm:^0.20.2":
-  version: 0.20.2
-  resolution: "scheduler@npm:0.20.2"
+"scheduler@npm:^0.23.0":
+  version: 0.23.0
+  resolution: "scheduler@npm:0.23.0"
   dependencies:
     loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: c4b35cf967c8f0d3e65753252d0f260271f81a81e427241295c5a7b783abf4ea9e905f22f815ab66676f5313be0a25f47be582254db8f9241b259213e999b8fc
+  checksum: d79192eeaa12abef860c195ea45d37cbf2bbf5f66e3c4dcd16f54a7da53b17788a70d109ee3d3dde1a0fd50e6a8fc171f4300356c5aee4fc0171de526bf35f8a
   languageName: node
   linkType: hard

src/preview.tsx

@@ -115,29 +115,14 @@ const appConfig = JSON.parse(
 ) as AppConfig
 Object.assign(globalThis, {appConfig})
 
-const memoize = <T extends AnyFunction<unknown>>(
-  fn: T,
-  keyFn = (...args: Parameters<T>) => String(args[0])
-) => {
-  const cache = new Map<string, unknown>()
-  return ((...args: Parameters<T>) => {
-    const key = keyFn(...args)
-    if (cache.has(key)) {
-      return cache.get(key)!
-    }
-    const value = fn(...args)
-    cache.set(key, value)
-    return value
-  }) as T
-}
-
 const highlighterPromise = import('./preview/shiki').then((r) => r.highlighter)
 
 const PrettyHighlighter: React.FC<{text: string}> = ({text}) => {
   const isDarkMode = useIsDarkMode()
   const [html, setHtml] = useState<string>(' ')
   useEffect(() => {
-    highlighterPromise.then((highlighter) => {
+    // https://shiki.style/guide/dual-themes
+    void highlighterPromise.then((highlighter) => {
       setHtml(
         highlighter.codeToHtml(text, {
           lang: 'js',

src/preview/shiki.tsx

@@ -1,6 +1,7 @@
 import {getHighlighterCore} from 'shiki/core'
 import getWasm from 'shiki/wasm'
 
+// https://shiki.style/guide/install#fine-grained-bundle
 export const highlighter = getHighlighterCore({
   themes: [
     import('shiki/themes/github-dark.mjs'),

src/utils/memoize.ts

@@ -0,0 +1,18 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyFunction<T = any> = (...args: any[]) => T
+
+export const memoize = <T extends AnyFunction<unknown>>(
+  fn: T,
+  keyFn = (...args: Parameters<T>) => String(args[0])
+) => {
+  const cache = new Map<string, unknown>()
+  return ((...args: Parameters<T>) => {
+    const key = keyFn(...args)
+    if (cache.has(key)) {
+      return cache.get(key)!
+    }
+    const value = fn(...args)
+    cache.set(key, value)
+    return value
+  }) as T
+}