@uniweb/build 0.4.1 → 0.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/build",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "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.3"
   },
   "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.4"
   },
   "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

package/src/site/content-collector.js

@@ -759,8 +759,13 @@ async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig
   }
 
   // Determine which page is the index for this level
+  // A directory with its own .md content is a real page, not a container —
+  // never promote a child as index, even if explicit config says so
+  // (that config is likely a leftover from before the directory had content)
   const regularFolders = pageFolders.filter(f => !f.name.startsWith('@'))
-  const indexPageName = determineIndexPage(orderConfig, regularFolders)
+  const hasExplicitOrder = orderConfig?.index || (Array.isArray(orderConfig?.pages) && orderConfig.pages.length > 0)
+  const hasMdContent = entries.some(e => isMarkdownFile(e))
+  const indexPageName = hasMdContent ? null : determineIndexPage(orderConfig, regularFolders)
 
   // Second pass: process each page folder
   for (const folder of pageFolders) {
@@ -804,7 +809,12 @@ async function collectPagesRecursive(dirPath, parentRoute, siteRoot, orderConfig
       // Recursively process subdirectories (but not special @ directories)
       if (!isSpecial) {
         // The child route depends on whether this page is the index
-        const childParentRoute = isIndex ? parentRoute : page.route
+        // For explicit index (from site.yml `index:` or `pages:`), children use parentRoute
+        // since that's a true structural promotion. For auto-detected index, children use
+        // the page's original folder path so they nest correctly under it.
+        const childParentRoute = isIndex
+          ? (hasExplicitOrder ? parentRoute : (page.sourcePath || page.route))
+          : page.route
         // Pass this page's fetch config to children (for dynamic routes that inherit parent data)
         const childFetch = page.fetch || parentFetch
         // Pass version context to children (maintains version scope)
@@ -901,6 +911,51 @@ export async function collectSiteContent(sitePath, options = {}) {
   const { pages, assetCollection, iconCollection, header, footer, left, right, notFound, versionedScopes } =
     await collectPagesRecursive(pagesPath, '/', sitePath, siteOrderConfig)
 
+  // Deduplicate: remove content-less container pages whose route duplicates
+  // a content-bearing page (e.g., a promoted index page)
+  const routeCounts = new Map()
+  for (const page of pages) {
+    const existing = routeCounts.get(page.route)
+    if (!existing) {
+      routeCounts.set(page.route, [page])
+    } else {
+      existing.push(page)
+    }
+  }
+  for (const [route, group] of routeCounts) {
+    if (group.length > 1) {
+      // Keep the page with content, remove content-less duplicates
+      const withContent = group.filter(p => p.sections && p.sections.length > 0)
+      const toRemove = withContent.length > 0
+        ? group.filter(p => !p.sections || p.sections.length === 0)
+        : group.slice(1) // If none have content, keep first
+      for (const page of toRemove) {
+        const idx = pages.indexOf(page)
+        if (idx !== -1) pages.splice(idx, 1)
+      }
+    }
+  }
+
+  // Compute parent route for each page (hierarchy declaration)
+  // This runs once at build time so runtime doesn't need to re-derive hierarchy
+  const pageRouteMap = new Map()
+  for (const page of pages) {
+    pageRouteMap.set(page.route, page)
+    if (page.sourcePath) {
+      pageRouteMap.set(page.sourcePath, page)
+    }
+  }
+  for (const page of pages) {
+    const segments = page.route.split('/').filter(Boolean)
+    if (segments.length <= 1) {
+      page.parent = null
+      continue
+    }
+    const parentRoute = '/' + segments.slice(0, -1).join('/')
+    const parentPage = pageRouteMap.get(parentRoute)
+    page.parent = parentPage ? parentPage.route : null
+  }
+
   // Sort pages by order
   pages.sort((a, b) => (a.order ?? 999) - (b.order ?? 999))