@ciderpress/ui 1.0.0-rc.4 → 1.0.0-rc.5

package/dist/theme/components/shared/icon.tsx

@@ -1,41 +1,125 @@
-import catppuccin from '@iconify-json/catppuccin/icons.json' with { type: 'json' }
-import devicon from '@iconify-json/devicon/icons.json' with { type: 'json' }
-import logos from '@iconify-json/logos/icons.json' with { type: 'json' }
-import materialIconTheme from '@iconify-json/material-icon-theme/icons.json' with { type: 'json' }
-import mdi from '@iconify-json/mdi/icons.json' with { type: 'json' }
-import pixelarticons from '@iconify-json/pixelarticons/icons.json' with { type: 'json' }
-import simpleIcons from '@iconify-json/simple-icons/icons.json' with { type: 'json' }
-import skillIcons from '@iconify-json/skill-icons/icons.json' with { type: 'json' }
-import vscodeIcons from '@iconify-json/vscode-icons/icons.json' with { type: 'json' }
-import { addCollection, Icon } from '@iconify/react'
-
-// Register all icon collections for offline Iconify resolution.
-// `addCollection` is called purely for its side effect of mutating
-// Iconify's internal registry. Holding the return values in a
-// throwaway `const` keeps the call list a single expression statement
-// rather than nine misleading named exports.
-// oxlint-disable-next-line no-unused-vars
-const _iconCollectionsLoaded = [
-  addCollection(cast(pixelarticons)),
-  addCollection(cast(devicon)),
-  addCollection(cast(mdi)),
-  addCollection(cast(simpleIcons)),
-  addCollection(cast(skillIcons)),
-  addCollection(cast(catppuccin)),
-  addCollection(cast(logos)),
-  addCollection(cast(vscodeIcons)),
-  addCollection(cast(materialIconTheme)),
-] as const
-
-export { Icon }
+import { addCollection, Icon as IconifyIcon } from '@iconify/react'
+import type { IconProps } from '@iconify/react'
+import type React from 'react'
+import { useEffect, useState } from 'react'
 
 /**
- * Cast an icon JSON import to the type expected by `addCollection`.
+ * Per-collection lazy loaders keyed by Iconify prefix.
+ *
+ * Each entry is a bare dynamic `import()` so the consuming site's Rsbuild
+ * build emits **one async chunk per collection** instead of folding all nine
+ * `icons.json` files into a single eager ~30MB chunk pulled on every route.
+ * Two consequences fall out of that:
+ *
+ * - **Deployability** — the largest collection (`logos`, ~8MB) stays well
+ *   under per-file host caps (Cloudflare Pages rejects files >25MB), where
+ *   the combined blob failed outright.
+ * - **Performance** — a page only downloads the collections it actually
+ *   references, not the full set on first paint.
+ *
+ * The specifiers are string literals (not computed) so the bundler can
+ * statically resolve every chunk at build time.
+ *
+ * @private
+ */
+const COLLECTION_LOADERS: Record<string, () => Promise<{ readonly default: unknown }>> = {
+  catppuccin: () => import('@iconify-json/catppuccin/icons.json'),
+  devicon: () => import('@iconify-json/devicon/icons.json'),
+  logos: () => import('@iconify-json/logos/icons.json'),
+  'material-icon-theme': () => import('@iconify-json/material-icon-theme/icons.json'),
+  mdi: () => import('@iconify-json/mdi/icons.json'),
+  pixelarticons: () => import('@iconify-json/pixelarticons/icons.json'),
+  'simple-icons': () => import('@iconify-json/simple-icons/icons.json'),
+  'skill-icons': () => import('@iconify-json/skill-icons/icons.json'),
+  'vscode-icons': () => import('@iconify-json/vscode-icons/icons.json'),
+}
+
+/**
+ * Cache of in-flight / settled collection registrations keyed by prefix.
+ * Guarantees each collection's chunk is fetched and merged into Iconify's
+ * registry exactly once, regardless of how many `<Icon>` instances on a
+ * page reference it.
+ *
+ * @private
+ */
+const collectionCache = new Map<string, Promise<void>>()
+
+/**
+ * Offline-registered Iconify icon.
+ *
+ * Renders `@iconify/react`'s `Icon` unchanged, but registers the icon's
+ * collection on demand: the first time a prefix is seen the matching
+ * `@iconify-json` chunk is dynamically imported and merged into Iconify's
+ * registry, then a re-render paints the resolved SVG. Because `IconifyIcon`
+ * reads the live registry on every render, an icon appears as soon as its
+ * collection chunk resolves.
+ *
+ * @param props - Standard `@iconify/react` icon props; `icon` is the
+ *   `prefix:name` identifier (e.g. `devicon:typescript`)
+ * @returns The Iconify icon element
+ */
+export function Icon(props: IconProps): React.ReactElement {
+  const prefix = resolvePrefix(props.icon)
+  const [, markRegistered] = useState(false)
+
+  useEffect(() => {
+    ensureCollection(prefix).then(() => markRegistered(true))
+  }, [prefix])
+
+  return <IconifyIcon {...props} />
+}
+
+/**
+ * Dynamically import and register the collection for a prefix, once.
+ *
+ * Returns the cached registration promise on repeat calls so the chunk is
+ * fetched a single time. Unknown prefixes (no bundled collection) resolve
+ * immediately — `IconifyIcon` falls back to its own resolution for those.
+ *
+ * @private
+ * @param prefix - Iconify collection prefix (e.g. `logos`)
+ * @returns Promise that settles once the collection is registered
+ */
+function ensureCollection(prefix: string): Promise<void> {
+  const cached = collectionCache.get(prefix)
+  if (cached !== undefined) {
+    return cached
+  }
+  const loader = COLLECTION_LOADERS[prefix]
+  if (loader === undefined) {
+    return Promise.resolve()
+  }
+  const registration = loader().then(registerModule)
+  collectionCache.set(prefix, registration)
+  return registration
+}
+
+/**
+ * Merge a dynamically imported `icons.json` module into Iconify's registry.
+ *
+ * @private
+ * @param mod - Module namespace whose `default` export is the collection JSON
+ */
+function registerModule(mod: { readonly default: unknown }): void {
+  addCollection(mod.default as Parameters<typeof addCollection>[0])
+}
+
+/**
+ * Extract the collection prefix from an Iconify identifier. Non-string icon
+ * inputs and identifiers without a `prefix:name` shape yield an empty string,
+ * which `ensureCollection` treats as "nothing to load".
  *
  * @private
- * @param v - Raw icon JSON import
- * @returns Value cast to the addCollection parameter type
+ * @param icon - The `icon` prop passed to `<Icon>`
+ * @returns The collection prefix, or `''` when none can be determined
  */
-function cast(v: unknown): Parameters<typeof addCollection>[0] {
-  return v as Parameters<typeof addCollection>[0]
+function resolvePrefix(icon: IconProps['icon']): string {
+  if (typeof icon !== 'string') {
+    return ''
+  }
+  const parts = icon.split(':')
+  if (parts.length < 2) {
+    return ''
+  }
+  return parts[0]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ciderpress/ui",
-  "version": "1.0.0-rc.4",
+  "version": "1.0.0-rc.5",
   "description": "Rspress plugin, theme components, and styles for ciderpress",
   "keywords": [
     "ciderpress",

package/src/theme/components/shared/icon.tsx

@@ -1,41 +1,125 @@
-import catppuccin from '@iconify-json/catppuccin/icons.json' with { type: 'json' }
-import devicon from '@iconify-json/devicon/icons.json' with { type: 'json' }
-import logos from '@iconify-json/logos/icons.json' with { type: 'json' }
-import materialIconTheme from '@iconify-json/material-icon-theme/icons.json' with { type: 'json' }
-import mdi from '@iconify-json/mdi/icons.json' with { type: 'json' }
-import pixelarticons from '@iconify-json/pixelarticons/icons.json' with { type: 'json' }
-import simpleIcons from '@iconify-json/simple-icons/icons.json' with { type: 'json' }
-import skillIcons from '@iconify-json/skill-icons/icons.json' with { type: 'json' }
-import vscodeIcons from '@iconify-json/vscode-icons/icons.json' with { type: 'json' }
-import { addCollection, Icon } from '@iconify/react'
-
-// Register all icon collections for offline Iconify resolution.
-// `addCollection` is called purely for its side effect of mutating
-// Iconify's internal registry. Holding the return values in a
-// throwaway `const` keeps the call list a single expression statement
-// rather than nine misleading named exports.
-// oxlint-disable-next-line no-unused-vars
-const _iconCollectionsLoaded = [
-  addCollection(cast(pixelarticons)),
-  addCollection(cast(devicon)),
-  addCollection(cast(mdi)),
-  addCollection(cast(simpleIcons)),
-  addCollection(cast(skillIcons)),
-  addCollection(cast(catppuccin)),
-  addCollection(cast(logos)),
-  addCollection(cast(vscodeIcons)),
-  addCollection(cast(materialIconTheme)),
-] as const
-
-export { Icon }
+import { addCollection, Icon as IconifyIcon } from '@iconify/react'
+import type { IconProps } from '@iconify/react'
+import type React from 'react'
+import { useEffect, useState } from 'react'
 
 /**
- * Cast an icon JSON import to the type expected by `addCollection`.
+ * Per-collection lazy loaders keyed by Iconify prefix.
+ *
+ * Each entry is a bare dynamic `import()` so the consuming site's Rsbuild
+ * build emits **one async chunk per collection** instead of folding all nine
+ * `icons.json` files into a single eager ~30MB chunk pulled on every route.
+ * Two consequences fall out of that:
+ *
+ * - **Deployability** — the largest collection (`logos`, ~8MB) stays well
+ *   under per-file host caps (Cloudflare Pages rejects files >25MB), where
+ *   the combined blob failed outright.
+ * - **Performance** — a page only downloads the collections it actually
+ *   references, not the full set on first paint.
+ *
+ * The specifiers are string literals (not computed) so the bundler can
+ * statically resolve every chunk at build time.
+ *
+ * @private
+ */
+const COLLECTION_LOADERS: Record<string, () => Promise<{ readonly default: unknown }>> = {
+  catppuccin: () => import('@iconify-json/catppuccin/icons.json'),
+  devicon: () => import('@iconify-json/devicon/icons.json'),
+  logos: () => import('@iconify-json/logos/icons.json'),
+  'material-icon-theme': () => import('@iconify-json/material-icon-theme/icons.json'),
+  mdi: () => import('@iconify-json/mdi/icons.json'),
+  pixelarticons: () => import('@iconify-json/pixelarticons/icons.json'),
+  'simple-icons': () => import('@iconify-json/simple-icons/icons.json'),
+  'skill-icons': () => import('@iconify-json/skill-icons/icons.json'),
+  'vscode-icons': () => import('@iconify-json/vscode-icons/icons.json'),
+}
+
+/**
+ * Cache of in-flight / settled collection registrations keyed by prefix.
+ * Guarantees each collection's chunk is fetched and merged into Iconify's
+ * registry exactly once, regardless of how many `<Icon>` instances on a
+ * page reference it.
+ *
+ * @private
+ */
+const collectionCache = new Map<string, Promise<void>>()
+
+/**
+ * Offline-registered Iconify icon.
+ *
+ * Renders `@iconify/react`'s `Icon` unchanged, but registers the icon's
+ * collection on demand: the first time a prefix is seen the matching
+ * `@iconify-json` chunk is dynamically imported and merged into Iconify's
+ * registry, then a re-render paints the resolved SVG. Because `IconifyIcon`
+ * reads the live registry on every render, an icon appears as soon as its
+ * collection chunk resolves.
+ *
+ * @param props - Standard `@iconify/react` icon props; `icon` is the
+ *   `prefix:name` identifier (e.g. `devicon:typescript`)
+ * @returns The Iconify icon element
+ */
+export function Icon(props: IconProps): React.ReactElement {
+  const prefix = resolvePrefix(props.icon)
+  const [, markRegistered] = useState(false)
+
+  useEffect(() => {
+    ensureCollection(prefix).then(() => markRegistered(true))
+  }, [prefix])
+
+  return <IconifyIcon {...props} />
+}
+
+/**
+ * Dynamically import and register the collection for a prefix, once.
+ *
+ * Returns the cached registration promise on repeat calls so the chunk is
+ * fetched a single time. Unknown prefixes (no bundled collection) resolve
+ * immediately — `IconifyIcon` falls back to its own resolution for those.
+ *
+ * @private
+ * @param prefix - Iconify collection prefix (e.g. `logos`)
+ * @returns Promise that settles once the collection is registered
+ */
+function ensureCollection(prefix: string): Promise<void> {
+  const cached = collectionCache.get(prefix)
+  if (cached !== undefined) {
+    return cached
+  }
+  const loader = COLLECTION_LOADERS[prefix]
+  if (loader === undefined) {
+    return Promise.resolve()
+  }
+  const registration = loader().then(registerModule)
+  collectionCache.set(prefix, registration)
+  return registration
+}
+
+/**
+ * Merge a dynamically imported `icons.json` module into Iconify's registry.
+ *
+ * @private
+ * @param mod - Module namespace whose `default` export is the collection JSON
+ */
+function registerModule(mod: { readonly default: unknown }): void {
+  addCollection(mod.default as Parameters<typeof addCollection>[0])
+}
+
+/**
+ * Extract the collection prefix from an Iconify identifier. Non-string icon
+ * inputs and identifiers without a `prefix:name` shape yield an empty string,
+ * which `ensureCollection` treats as "nothing to load".
  *
  * @private
- * @param v - Raw icon JSON import
- * @returns Value cast to the addCollection parameter type
+ * @param icon - The `icon` prop passed to `<Icon>`
+ * @returns The collection prefix, or `''` when none can be determined
  */
-function cast(v: unknown): Parameters<typeof addCollection>[0] {
-  return v as Parameters<typeof addCollection>[0]
+function resolvePrefix(icon: IconProps['icon']): string {
+  if (typeof icon !== 'string') {
+    return ''
+  }
+  const parts = icon.split(':')
+  if (parts.length < 2) {
+    return ''
+  }
+  return parts[0]
 }