@uniweb/build 0.4.1 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/build",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Build tooling for the Uniweb Component Web Platform",
   "type": "module",
   "exports": {
@@ -51,7 +51,7 @@
   },
   "optionalDependencies": {
     "@uniweb/content-reader": "1.1.1",
-    "@uniweb/runtime": "0.5.0"
+    "@uniweb/runtime": "0.5.2"
   },
   "peerDependencies": {
     "vite": "^5.0.0 || ^6.0.0 || ^7.0.0",
@@ -60,7 +60,7 @@
     "@tailwindcss/vite": "^4.0.0",
     "@vitejs/plugin-react": "^4.0.0 || ^5.0.0",
     "vite-plugin-svgr": "^4.0.0",
-    "@uniweb/core": "0.3.1"
+    "@uniweb/core": "0.3.3"
   },
   "peerDependenciesMeta": {
     "vite": {

package/src/prerender.js

@@ -263,6 +263,43 @@ async function loadDependencies(siteDir) {
   guaranteeContentStructureSSR = runtimeMod.guaranteeContentStructure
 }
 
+/**
+ * Pre-fetch icons from CDN and populate the Uniweb icon cache.
+ * This allows the Icon component to render SVGs synchronously during SSR
+ * instead of producing empty placeholders.
+ */
+async function prefetchIcons(siteContent, uniweb, onProgress) {
+  const icons = siteContent.icons?.used || []
+  if (icons.length === 0) return
+
+  const cdnBase = siteContent.config?.icons?.cdnUrl || 'https://uniweb.github.io/icons'
+
+  onProgress(`Fetching ${icons.length} icons for SSR...`)
+
+  const results = await Promise.allSettled(
+    icons.map(async (iconRef) => {
+      const [family, name] = iconRef.split(':')
+      const url = `${cdnBase}/${family}/${family}-${name}.svg`
+      const response = await fetch(url)
+      if (!response.ok) throw new Error(`HTTP ${response.status}`)
+      const svg = await response.text()
+      uniweb.iconCache.set(`${family}:${name}`, svg)
+    })
+  )
+
+  const succeeded = results.filter(r => r.status === 'fulfilled').length
+  const failed = results.filter(r => r.status === 'rejected').length
+  if (failed > 0) {
+    console.warn(`[prerender] Fetched ${succeeded}/${icons.length} icons (${failed} failed)`)
+  }
+
+  // Store icon cache on siteContent for embedding in HTML
+  // This allows the client runtime to populate the cache before rendering
+  if (uniweb.iconCache.size > 0) {
+    siteContent._iconCache = Object.fromEntries(uniweb.iconCache)
+  }
+}
+
 /**
  * Inline BlockRenderer for SSR
  * Uses React from prerender's scope to avoid module resolution issues
@@ -524,6 +561,9 @@ export async function prerenderSite(siteDir, options = {}) {
       uniweb.setFoundationConfig(foundation.capabilities)
     }
 
+    // Pre-fetch icons for SSR embedding
+    await prefetchIcons(siteContent, uniweb, onProgress)
+
     // Pre-render each page
     const pages = uniweb.activeWebsite.pages
     const website = uniweb.activeWebsite
@@ -640,6 +680,22 @@ function injectContent(shell, renderedContent, page, siteContent) {
     )
   }
 
+  // Inject icon cache so client can render icons immediately without CDN fetches
+  if (siteContent._iconCache) {
+    const iconScript = `<script id="__ICON_CACHE__" type="application/json">${JSON.stringify(siteContent._iconCache)}</script>`
+    if (html.includes('__ICON_CACHE__')) {
+      html = html.replace(
+        /<script[^>]*id="__ICON_CACHE__"[^>]*>[\s\S]*?<\/script>/,
+        iconScript
+      )
+    } else {
+      html = html.replace(
+        '</head>',
+        `  ${iconScript}\n  </head>`
+      )
+    }
+  }
+
   return html
 }
 

package/src/site/config.js

@@ -287,6 +287,10 @@ export async function defineSiteConfig(options = {}) {
     },
 
     resolve: {
+      // Deduplicate React packages to prevent dual-instance issues
+      // Foundation externalizes React; when site bundles it, CJS and ESM
+      // copies can coexist without this, causing "useRef of null" errors
+      dedupe: ['react', 'react-dom', 'react/jsx-runtime', 'react/jsx-dev-runtime'],
       alias: {
         ...alias,
         ...resolveOverrides?.alias