npm - @uniweb/build - Versions diffs - 0.14.32 → 0.14.34 - Mend

@uniweb/build 0.14.32 → 0.14.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/package.json +6 -6
package/src/prerender.js +14 -3
package/src/site/advanced-processors.js +11 -3
package/src/site/asset-processor.js +27 -5
package/src/site/build-site-data.js +3 -1
package/src/site/content-collector.js +27 -4
package/src/site/head-markers.js +16 -0
package/src/site/plugin.js +19 -19

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/build",
-  "version": "0.14.32",
+  "version": "0.14.34",
   "description": "Build tooling for the Uniweb Component Web Platform",
   "type": "module",
   "exports": {
@@ -59,12 +59,12 @@
     "js-yaml": "^4.1.0",
     "sharp": "^0.33.2",
     "yaml": "^2.5.0",
-    "@uniweb/theming": "0.1.8",
-    "@uniweb/content-writer": "0.2.6"
+    "@uniweb/content-writer": "0.2.6",
+    "@uniweb/theming": "0.1.9"
   },
   "optionalDependencies": {
-    "@uniweb/runtime": "0.8.26",
-    "@uniweb/content-reader": "1.1.12",
+    "@uniweb/content-reader": "1.1.13",
+    "@uniweb/runtime": "0.8.27",
     "@uniweb/schemas": "0.2.4"
   },
   "peerDependencies": {
@@ -74,7 +74,7 @@
     "@tailwindcss/vite": "^4.0.0",
     "@vitejs/plugin-react": "^4.0.0 || ^5.0.0",
     "vite-plugin-svgr": "^4.0.0",
-    "@uniweb/core": "0.7.20"
+    "@uniweb/core": "0.7.21"
   },
   "peerDependenciesMeta": {
     "vite": {

package/src/prerender.js CHANGED Viewed

@@ -13,6 +13,7 @@ import { join, dirname, resolve } from 'node:path'
 import { pathToFileURL } from 'node:url'
 import { executeFetch, mergeDataIntoContent } from './site/data-fetcher.js'
 import { shouldSplitContent } from './site/split-content.js'
+import { FONT_LINKS_MARKER } from './site/head-markers.js'
 import { getAdapter } from './hosts/index.js'
 import { detectCiContext } from './hosts/detect-ci-context.js'
@@ -376,9 +377,18 @@ export function scopeFetchedData(fetchedData, scopeRoutes) {
  * @param {string|null} [options.currentRoute=null] - Route of the page this HTML is for
  * @returns {string} HTML with build-specific data injected
  */
-function injectBuildData(html, siteContent, { splitContent = false, currentRoute = null, scopeRoutes = null } = {}) {
+export function injectBuildData(html, siteContent, { splitContent = false, currentRoute = null, scopeRoutes = null } = {}) {
   let result = html
+  // Inject the theme's font <link> tags if not already present (the vite
+  // plugin normally puts them there when it builds index.html)
+  if (siteContent?.theme?.links && !result.includes(FONT_LINKS_MARKER)) {
+    result = result.replace(
+      '</head>',
+      `  ${FONT_LINKS_MARKER}\n${siteContent.theme.links}\n  </head>`
+    )
+  }
   // Inject theme CSS if not already present
   if (siteContent?.theme?.css && !result.includes('id="uniweb-theme"')) {
     result = result.replace(
@@ -388,11 +398,12 @@ function injectBuildData(html, siteContent, { splitContent = false, currentRoute
   }
   // Inject site content as JSON for hydration
-  // Strip CSS from theme (it's already in a <style> tag)
+  // Strip CSS and font links from theme (both are already in <head>)
   let contentForJson = { ...siteContent }
-  if (contentForJson.theme?.css) {
+  if (contentForJson.theme?.css || contentForJson.theme?.links) {
     contentForJson.theme = { ...contentForJson.theme }
     delete contentForJson.theme.css
+    delete contentForJson.theme.links
   }
   // Split mode: strip sections from all pages except the current one.

package/src/site/advanced-processors.js CHANGED Viewed

@@ -258,6 +258,7 @@ export async function generatePdfThumbnail(pdfPath, outputPath, options = {}) {
  *
  * @param {Object} asset - Asset info
  * @param {Object} options - Processing options
+ * @param {string} [options.basePath='/'] - Site base path for subdirectory deployments
  * @returns {Promise<Object>} Processing result with poster/thumbnail info
  */
 export async function processAdvancedAsset(asset, options = {}) {
@@ -266,9 +267,16 @@ export async function processAdvancedAsset(asset, options = {}) {
     assetsSubdir = 'assets',
     videoPosters = true,
     pdfThumbnails = true,
-    quality = 80
+    quality = 80,
+    basePath = '/'
   } = options
+  // Emitted URLs are site-root-absolute and must carry the deployment base,
+  // same as processAsset() — see the withBase() note in asset-processor.js.
+  const prefix = basePath && basePath !== '/'
+    ? (basePath.endsWith('/') ? basePath.slice(0, -1) : basePath)
+    : ''
   const { resolved } = asset
   if (!existsSync(resolved)) {
@@ -293,7 +301,7 @@ export async function processAdvancedAsset(asset, options = {}) {
       return {
         processed: true,
         type: 'video',
-        poster: `/${assetsSubdir}/${posterFilename}`
+        poster: `${prefix}/${assetsSubdir}/${posterFilename}`
       }
     } else if (result.skipped) {
       // ffmpeg not available - not an error, just skip
@@ -314,7 +322,7 @@ export async function processAdvancedAsset(asset, options = {}) {
       return {
         processed: true,
         type: 'pdf',
-        thumbnail: `/${assetsSubdir}/${thumbFilename}`,
+        thumbnail: `${prefix}/${assetsSubdir}/${thumbFilename}`,
         pageCount: result.pageCount,
         placeholder: result.placeholder
       }

package/src/site/asset-processor.js CHANGED Viewed

@@ -21,6 +21,24 @@ const CONVERTIBLE_FORMATS = ['.png', '.jpg', '.jpeg', '.gif']
 // Image formats to pass through without conversion
 const PASSTHROUGH_FORMATS = ['.svg', '.webp', '.avif', '.ico']
+/**
+ * Prefix a root-relative URL with the site's base path.
+ *
+ * Emitted asset URLs are absolute-from-site-root (`/assets/hero-ab12cd34.webp`).
+ * Under a subdirectory deployment (GitHub Pages project sites, `/docs/`, ...)
+ * the served root moves, so the URL baked into site-content.json has to carry
+ * the base — components render `content.images[]` as a raw `<img src>` and have
+ * no chance to resolve it themselves. This mirrors what the collection
+ * processor already does for collection asset paths.
+ */
+function withBase(url, basePath) {
+  if (!url || !basePath || basePath === '/') return url
+  if (!url.startsWith('/') || url.startsWith('//')) return url
+  const prefix = basePath.endsWith('/') ? basePath.slice(0, -1) : basePath
+  if (url === prefix || url.startsWith(prefix + '/')) return url // already based
+  return prefix + url
+}
 /**
  * Generate a content hash for a file
  */
@@ -56,7 +74,8 @@ export async function processAsset(asset, options = {}) {
     outputDir,
     assetsSubdir = 'assets',
     convertToWebp: shouldConvert = true,
-    quality = 80
+    quality = 80,
+    basePath = '/'
   } = options
   const { original, resolved, isImage } = asset
@@ -66,7 +85,9 @@ export async function processAsset(asset, options = {}) {
     console.warn(`[asset-processor] Source not found: ${resolved}`)
     return {
       original,
-      output: original, // Keep original path as fallback
+      // Keep the authored path as fallback — still based, since an unprocessed
+      // public/ asset is served under the base too.
+      output: withBase(original, basePath),
       processed: false,
       error: 'Source not found'
     }
@@ -107,8 +128,8 @@ export async function processAsset(asset, options = {}) {
     // Write processed file
     await writeFile(outputPath, outputBuffer)
-    // Return the URL path (relative to site root)
-    const outputUrl = `/${assetsSubdir}/${outputFilename}`
+    // Return the URL path (site-root-absolute, carrying the deployment base)
+    const outputUrl = withBase(`/${assetsSubdir}/${outputFilename}`, basePath)
     return {
       original,
@@ -123,7 +144,7 @@ export async function processAsset(asset, options = {}) {
     console.warn(`[asset-processor] Failed to process ${resolved}:`, error.message)
     return {
       original,
-      output: original,
+      output: withBase(original, basePath),
       processed: false,
       error: error.message
     }
@@ -135,6 +156,7 @@ export async function processAsset(asset, options = {}) {
  *
  * @param {Object} assetManifest - Asset manifest from content collector
  * @param {Object} options - Processing options
+ * @param {string} [options.basePath='/'] - Site base path for subdirectory deployments
  * @returns {Promise<Object>} Mapping of original paths to output URLs
  */
 export async function processAssets(assetManifest, options = {}) {

package/src/site/build-site-data.js CHANGED Viewed

@@ -97,7 +97,7 @@ export async function buildSiteData({
   //    No vite needed — collectSiteContent is a plain async function.
   //    dropUnpublished: link mode is always a published deploy — prune hidden
   //    pages + their subtree so drafts never reach the served site.
-  let siteContent = await collectSiteContent(resolvedSiteRoot, { foundationPath, dropUnpublished: true })
+  let siteContent = await collectSiteContent(resolvedSiteRoot, { foundationPath, dropUnpublished: true, base: basePath })
   // 2. Compile content collections (file-based markdown/yaml/json).
   //    `writeCollectionFiles` lands them under `<siteRoot>/public/data/`;
@@ -138,6 +138,7 @@ export async function buildSiteData({
         assetsSubdir: assetsOpts.outputDir,
         convertToWebp: assetsOpts.convertToWebp,
         quality: assetsOpts.quality,
+        basePath,
       })
       const advancedEnabled = assetsOpts.videoPosters || assetsOpts.pdfThumbnails
@@ -150,6 +151,7 @@ export async function buildSiteData({
             videoPosters: assetsOpts.videoPosters,
             pdfThumbnails: assetsOpts.pdfThumbnails,
             quality: assetsOpts.quality,
+            basePath,
             hasExplicitPoster: siteContent.hasExplicitPoster || new Set(),
             hasExplicitPreview: siteContent.hasExplicitPreview || new Set(),
           }

package/src/site/content-collector.js CHANGED Viewed

@@ -2013,11 +2013,26 @@ async function collectLayouts(layoutDir, siteRoot, layoutNames = new Set()) {
  * @returns {Promise<Object>} Site content object with assets manifest
  */
 export async function collectSiteContent(sitePath, options = {}) {
-  const { foundationPath, configFile = 'site.yml', profile: profileName, dropUnpublished = false } = options
+  const { foundationPath, configFile = 'site.yml', profile: profileName, dropUnpublished = false, base = '/' } = options
   // Read site config and raw theme config
   const siteConfig = await readYamlFile(join(sitePath, configFile))
+  // Record the RESOLVED base (--base > UNIWEB_BASE > site.yml::base) on the
+  // config so every consumer reads one value. Prerender sets website.basePath
+  // from `config.base` alone — it has no access to Vite's BASE_URL — so a base
+  // that arrived via UNIWEB_BASE (what the generated GitHub Pages workflow
+  // uses) was invisible to it, and prerendered <a href>s came out with no
+  // base prefix while the hydrated browser routes were fine.
+  //
+  // Only a real base is written. At '/' the field stays absent, because in
+  // shell mode `config.base` is the SERVING layer's channel (it injects the
+  // served subpath, e.g. /gateway/site/<uuid>/) and a build-time '/' would
+  // be a meaningless value sitting in its slot.
+  if (base && base !== '/') {
+    siteConfig.base = base
+  }
   // Profile selects workspace-root defaults: site.yml → pages/ + page mode +
   // pages: ordering; document.yml → content/ + folder mode + content: ordering.
   const profile = (profileName && PROFILE_ALIASES[profileName]) || getContentProfile(configFile)
@@ -2047,7 +2062,10 @@ export async function collectSiteContent(sitePath, options = {}) {
   // Load foundation info (vars + layout names) and process theme
   const { vars: foundationVars, layoutNames: layoutNames } = await loadFoundationInfo(foundationPath)
-  const { config: processedTheme, css: themeCSS, warnings } = buildTheme(rawThemeConfig, { foundationVars })
+  // `base` reaches the theme because self-hosted font faces are authored
+  // root-relative (`/fonts/x.woff2`) and the emitted @font-face lives in an
+  // inline <style> — under a subdirectory deployment it must carry the base.
+  const { config: processedTheme, css: themeCSS, links: themeLinks, warnings } = buildTheme(rawThemeConfig, { foundationVars, base })
   // Log theme warnings
   if (warnings?.length > 0) {
@@ -2060,7 +2078,8 @@ export async function collectSiteContent(sitePath, options = {}) {
       config: siteConfig,
       theme: {
         ...processedTheme,
-        css: themeCSS
+        css: themeCSS,
+        links: themeLinks
       },
       pages: [],
       assets: {}
@@ -2208,7 +2227,11 @@ export async function collectSiteContent(sitePath, options = {}) {
     },
     theme: {
       ...processedTheme,
-      css: themeCSS
+      css: themeCSS,
+      // Font <link> tags (Google Fonts stylesheet + preconnects, preload hints
+      // for self-hosted faces). The theme CSS stopped carrying an @import for
+      // these, so they only reach the page if a consumer injects `links`.
+      links: themeLinks
     },
     // Reachability axis: on the published build paths, drop `hidden` pages and
     // their whole subtree (cascade). Dev keeps them so drafts stay previewable.

package/src/site/head-markers.js ADDED Viewed

@@ -0,0 +1,16 @@
+/**
+ * Stable markers for head content the build injects.
+ *
+ * Two stages can write the same block: the vite plugin's `transformIndexHtml`
+ * (which produces `dist/index.html`) and the prerenderer (which post-processes
+ * that HTML per page). The marker lets the second stage tell "already injected"
+ * from "never injected" instead of guessing, so a page rendered through both
+ * paths gets exactly one copy.
+ *
+ * The theme CSS uses `id="uniweb-theme"` on its <style> for the same purpose;
+ * <link> tags have no natural id to hang that on, hence the comment marker.
+ *
+ * @module @uniweb/build/site
+ */
+export const FONT_LINKS_MARKER = '<!--uniweb-fonts-->'

package/src/site/plugin.js CHANGED Viewed

@@ -39,6 +39,7 @@ import { processAdvancedAssets } from './advanced-processors.js'
 import { processCollections, writeCollectionFiles } from './collection-processor.js'
 import { executeFetch, mergeDataIntoContent } from './data-fetcher.js'
 import { shouldSplitContent } from './split-content.js'
+import { FONT_LINKS_MARKER } from './head-markers.js'
 // BCP 47 locale code pattern: en, zh-CN, zh-Hant, pt-BR, fr-CA, sr-Latn, etc.
 const LOCALE_RE = '[a-z]{2,3}(?:-[A-Za-z]{2,4})?'
@@ -621,7 +622,7 @@ export function siteContentPlugin(options = {}) {
       try {
         // dropUnpublished only on a production build — in dev (serve) hidden
         // pages stay in the graph so in-progress drafts remain previewable.
-        siteContent = await collectSiteContent(resolvedSitePath, { foundationPath, dropUnpublished: isProduction })
+        siteContent = await collectSiteContent(resolvedSitePath, { foundationPath, dropUnpublished: isProduction, base: basePath })
         headHtml = await loadHeadHtml()
         console.log(`[site-content] Collected ${siteContent.pages?.length || 0} pages`)
@@ -669,7 +670,7 @@ export function siteContentPlugin(options = {}) {
           rebuildTimeout = setTimeout(async () => {
             console.log('[site-content] Content changed, rebuilding...')
             try {
-              siteContent = await collectSiteContent(resolvedSitePath, { foundationPath })
+              siteContent = await collectSiteContent(resolvedSitePath, { foundationPath, base: basePath })
               headHtml = await loadHeadHtml()
               // Execute fetches for the updated content
               await executeDevFetches(siteContent, resolvedSitePath)
@@ -989,22 +990,19 @@ export function siteContentPlugin(options = {}) {
         headInjection += headHtml + '\n'
       }
-      // Inject font preconnect links (before theme CSS so browser starts DNS early)
-      const fontImports = contentToInject.theme?.fonts?.import
-      if (Array.isArray(fontImports) && fontImports.length > 0) {
-        const origins = new Set()
-        for (const font of fontImports) {
-          if (font.url) {
-            try { origins.add(new URL(font.url).origin) } catch {}
-          }
-        }
-        for (const origin of origins) {
-          headInjection += `    <link rel="preconnect" href="${origin}">\n`
-        }
-        // Google Fonts serves CSS from googleapis.com but font files from gstatic.com
-        if (origins.has('https://fonts.googleapis.com')) {
-          headInjection += `    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>\n`
-        }
+      // Inject the theme's font <link> tags (before theme CSS so the browser
+      // starts DNS/fetch early). This is every font link in one place:
+      // preconnects, the merged Google Fonts stylesheet, and preload hints for
+      // self-hosted faces.
+      //
+      // These used to be dropped. The theme CSS once carried `@import
+      // url(<google>)` and this spot only had to add a preconnect in front of
+      // it; when @uniweb/theming replaced that @import with a `links` string,
+      // nothing here started consuming it — so the build preconnected to
+      // Google Fonts and then never requested the stylesheet, leaving every
+      // imported family undefined and silently falling back.
+      if (contentToInject.theme?.links) {
+        headInjection += `    ${FONT_LINKS_MARKER}\n${contentToInject.theme.links}\n`
       }
       // Inject theme CSS
@@ -1063,7 +1061,8 @@ export function siteContentPlugin(options = {}) {
             outputDir: resolvedOutDir,
             assetsSubdir: assetsOptions.outputDir,
             convertToWebp: assetsOptions.convertToWebp,
-            quality: assetsOptions.quality
+            quality: assetsOptions.quality,
+            basePath
           })
           // Process advanced assets (videos, PDFs)
@@ -1079,6 +1078,7 @@ export function siteContentPlugin(options = {}) {
                 videoPosters: assetsOptions.videoPosters,
                 pdfThumbnails: assetsOptions.pdfThumbnails,
                 quality: assetsOptions.quality,
+                basePath,
                 // Pass explicit poster/preview sets to skip auto-generation
                 hasExplicitPoster: siteContent.hasExplicitPoster || new Set(),
                 hasExplicitPreview: siteContent.hasExplicitPreview || new Set()