@uniweb/build 0.1.26 → 0.1.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/build",
-  "version": "0.1.26",
+  "version": "0.1.27",
   "description": "Build tooling for the Uniweb Component Web Platform",
   "type": "module",
   "exports": {
@@ -50,7 +50,8 @@
     "sharp": "^0.33.2"
   },
   "optionalDependencies": {
-    "@uniweb/content-reader": "1.0.3"
+    "@uniweb/content-reader": "1.0.4",
+    "@uniweb/runtime": "0.2.14"
   },
   "peerDependencies": {
     "vite": "^5.0.0 || ^6.0.0 || ^7.0.0",

package/src/prerender.js

@@ -3,6 +3,9 @@
  *
  * Renders each page to static HTML at build time.
  * The output includes full HTML with hydration support.
+ *
+ * Uses @uniweb/runtime/ssr for rendering components, ensuring
+ * the same code path for both SSG and client-side rendering.
  */
 
 import { readFile, writeFile, mkdir } from 'node:fs/promises'
@@ -11,8 +14,8 @@ import { join, dirname, resolve } from 'node:path'
 import { pathToFileURL } from 'node:url'
 import { createRequire } from 'node:module'
 
-// Lazily loaded dependencies (ESM with React)
-let React, renderToString, createUniweb
+// Lazily loaded dependencies
+let React, renderToString, createUniweb, PageElement
 
 /**
  * Load dependencies dynamically from the site's context
@@ -25,7 +28,6 @@ async function loadDependencies(siteDir) {
 
   // Create a require function that resolves from the site's perspective
   // This ensures we get the same React instance that the foundation uses
-  // Note: createRequire requires an absolute path
   const absoluteSiteDir = resolve(siteDir)
   const siteRequire = createRequire(join(absoluteSiteDir, 'package.json'))
 
@@ -47,9 +49,13 @@ async function loadDependencies(siteDir) {
     renderToString = serverMod.renderToString
   }
 
-  // @uniweb/core can be imported normally
+  // Load @uniweb/core
   const coreMod = await import('@uniweb/core')
   createUniweb = coreMod.createUniweb
+
+  // Load @uniweb/runtime/ssr for rendering components
+  const ssrMod = await import('@uniweb/runtime/ssr')
+  PageElement = ssrMod.PageElement
 }
 
 /**
@@ -108,14 +114,15 @@ export async function prerenderSite(siteDir, options = {}) {
   const uniweb = createUniweb(siteContent)
   uniweb.setFoundation(foundation)
 
-  // Set foundation config if provided
-  if (foundation.runtime) {
-    uniweb.setFoundationConfig(foundation.runtime)
+  // Set foundation capabilities (Layout, props, etc.)
+  if (foundation.capabilities) {
+    uniweb.setFoundationConfig(foundation.capabilities)
   }
 
   // Pre-render each page
   const renderedFiles = []
   const pages = uniweb.activeWebsite.pages
+  const website = uniweb.activeWebsite
 
   for (const page of pages) {
     // Determine which routes to render this page at
@@ -134,10 +141,8 @@ export async function prerenderSite(siteDir, options = {}) {
     // Set this as the active page
     uniweb.activeWebsite.setActivePage(page.route)
 
-    // Create the page element
-    // Note: We don't need StaticRouter for SSG since we're just rendering
-    // components to strings. The routing context isn't needed for static HTML.
-    const element = React.createElement(PageRenderer, { page, foundation })
+    // Create the page element using the runtime's SSR components
+    const element = React.createElement(PageElement, { page, website })
 
     // Render to HTML string
     let renderedContent
@@ -173,249 +178,6 @@ export async function prerenderSite(siteDir, options = {}) {
   }
 }
 
-/**
- * Render an array of blocks
- */
-function BlocksRenderer({ blocks, foundation }) {
-  if (!blocks || blocks.length === 0) return null
-
-  return blocks.map((block, index) =>
-    React.createElement(BlockRenderer, {
-      key: block.id || index,
-      block,
-      foundation
-    })
-  )
-}
-
-/**
- * Default layout - renders header, body, footer in sequence
- */
-function DefaultLayout({ header, body, footer }) {
-  return React.createElement(React.Fragment, null, header, body, footer)
-}
-
-/**
- * Layout component for SSG
- * Supports foundation-provided custom Layout via runtime.Layout
- */
-function Layout({ page, website, foundation }) {
-  const RemoteLayout = foundation.runtime?.Layout || null
-
-  // Get block groups from page
-  const headerBlocks = page.getHeaderBlocks()
-  const bodyBlocks = page.getBodyBlocks()
-  const footerBlocks = page.getFooterBlocks()
-  const leftBlocks = page.getLeftBlocks()
-  const rightBlocks = page.getRightBlocks()
-
-  // Pre-render each area
-  const headerElement = headerBlocks
-    ? React.createElement(BlocksRenderer, { blocks: headerBlocks, foundation })
-    : null
-  const bodyElement = bodyBlocks
-    ? React.createElement(BlocksRenderer, { blocks: bodyBlocks, foundation })
-    : null
-  const footerElement = footerBlocks
-    ? React.createElement(BlocksRenderer, { blocks: footerBlocks, foundation })
-    : null
-  const leftElement = leftBlocks
-    ? React.createElement(BlocksRenderer, { blocks: leftBlocks, foundation })
-    : null
-  const rightElement = rightBlocks
-    ? React.createElement(BlocksRenderer, { blocks: rightBlocks, foundation })
-    : null
-
-  // Use foundation's custom Layout if provided
-  if (RemoteLayout) {
-    return React.createElement(RemoteLayout, {
-      page,
-      website,
-      header: headerElement,
-      body: bodyElement,
-      footer: footerElement,
-      left: leftElement,
-      right: rightElement,
-      leftPanel: leftElement,
-      rightPanel: rightElement
-    })
-  }
-
-  // Default layout
-  return React.createElement(DefaultLayout, {
-    header: headerElement,
-    body: bodyElement,
-    footer: footerElement
-  })
-}
-
-/**
- * Page renderer for SSG
- * Uses Layout component for proper orchestration of layout areas
- */
-function PageRenderer({ page, foundation }) {
-  const website = globalThis.uniweb?.activeWebsite
-
-  return React.createElement(
-    'main',
-    null,
-    React.createElement(Layout, { page, website, foundation })
-  )
-}
-
-/**
- * Guarantee item has flat content structure
- */
-function guaranteeItemStructure(item) {
-  return {
-    title: item.title || '',
-    pretitle: item.pretitle || '',
-    subtitle: item.subtitle || '',
-    paragraphs: item.paragraphs || [],
-    links: item.links || [],
-    imgs: item.imgs || [],
-    lists: item.lists || [],
-    icons: item.icons || [],
-    videos: item.videos || [],
-    buttons: item.buttons || [],
-    properties: item.properties || {},
-    cards: item.cards || [],
-    documents: item.documents || [],
-    forms: item.forms || [],
-    quotes: item.quotes || [],
-    headings: item.headings || [],
-  }
-}
-
-/**
- * Guarantee content structure exists (mirrors runtime/prepare-props.js)
- * Returns a flat content object with all standard fields guaranteed to exist
- */
-function guaranteeContentStructure(parsedContent) {
-  const content = parsedContent || {}
-
-  return {
-    // Flat header fields
-    title: content.title || '',
-    pretitle: content.pretitle || '',
-    subtitle: content.subtitle || '',
-    subtitle2: content.subtitle2 || '',
-    alignment: content.alignment || null,
-
-    // Flat body fields
-    paragraphs: content.paragraphs || [],
-    links: content.links || [],
-    imgs: content.imgs || [],
-    lists: content.lists || [],
-    icons: content.icons || [],
-    videos: content.videos || [],
-    buttons: content.buttons || [],
-    properties: content.properties || {},
-    propertyBlocks: content.propertyBlocks || [],
-    cards: content.cards || [],
-    documents: content.documents || [],
-    forms: content.forms || [],
-    quotes: content.quotes || [],
-    headings: content.headings || [],
-
-    // Items with guaranteed structure
-    items: (content.items || []).map(guaranteeItemStructure),
-
-    // Sequence for ordered rendering
-    sequence: content.sequence || [],
-
-    // Preserve raw content if present
-    raw: content.raw,
-  }
-}
-
-/**
- * Apply param defaults from runtime schema
- */
-function applyDefaults(params, defaults) {
-  if (!defaults || Object.keys(defaults).length === 0) {
-    return params || {}
-  }
-
-  return {
-    ...defaults,
-    ...(params || {}),
-  }
-}
-
-/**
- * Block renderer - maps block to foundation component
- */
-function BlockRenderer({ block, foundation }) {
-  // Get component from foundation
-  const componentName = block.type
-  let Component = null
-
-  if (typeof foundation.getComponent === 'function') {
-    Component = foundation.getComponent(componentName)
-  } else if (foundation[componentName]) {
-    Component = foundation[componentName]
-  }
-
-  if (!Component) {
-    // Return placeholder for unknown components
-    return React.createElement(
-      'div',
-      {
-        className: 'block-placeholder',
-        'data-component': componentName,
-        style: { display: 'none' }
-      },
-      `Component: ${componentName}`
-    )
-  }
-
-  // Get runtime schema for defaults (from foundation.runtimeSchema)
-  const runtimeSchema = foundation.runtimeSchema || {}
-  const schema = runtimeSchema[componentName] || null
-  const defaults = schema?.defaults || {}
-
-  // Build content and params with runtime guarantees (same as runtime's BlockRenderer)
-  let content, params
-  if (block.parsedContent?._isPoc) {
-    // Simple PoC format - content was passed directly
-    content = block.parsedContent._pocContent
-    params = block.properties
-  } else {
-    // Apply param defaults from meta.js
-    params = applyDefaults(block.properties, defaults)
-
-    // Guarantee content structure + merge with properties for backward compat
-    content = {
-      ...guaranteeContentStructure(block.parsedContent),
-      ...block.properties,
-      _prosemirror: block.parsedContent
-    }
-  }
-
-  // Build wrapper props
-  const theme = block.themeName
-  const className = theme || ''
-  const wrapperProps = {
-    id: `Section${block.id}`,
-    className
-  }
-
-  // Component props
-  const componentProps = {
-    content,
-    params,
-    block,
-    input: block.input
-  }
-
-  return React.createElement(
-    'div',
-    wrapperProps,
-    React.createElement(Component, componentProps)
-  )
-}
-
 /**
  * Inject rendered content into HTML shell
  */
@@ -423,7 +185,6 @@ function injectContent(shell, renderedContent, page, siteContent) {
   let html = shell
 
   // Replace the empty root div with pre-rendered content
-  // Handle various formats of root div
   html = html.replace(
     /<div id="root">[\s\S]*?<\/div>/,
     `<div id="root">${renderedContent}</div>`
@@ -454,7 +215,6 @@ function injectContent(shell, renderedContent, page, siteContent) {
   }
 
   // Inject site content as JSON for hydration
-  // This allows the client-side React to hydrate with the same data
   const contentScript = `<script id="__SITE_CONTENT__" type="application/json">${JSON.stringify(siteContent)}</script>`
   if (!html.includes('__SITE_CONTENT__')) {
     html = html.replace(
@@ -470,7 +230,6 @@ function injectContent(shell, renderedContent, page, siteContent) {
  * Get output path for a route
  */
 function getOutputPath(distDir, route) {
-  // Normalize route
   let normalizedRoute = route
 
   // Handle root route

package/src/runtime-schema.js

@@ -35,6 +35,99 @@ function parseDataString(dataString) {
   }
 }
 
+/**
+ * Extract lean schema field for runtime
+ * Strips editor-only fields (label, hint, description)
+ * Keeps runtime fields (type, default, options, of, schema)
+ *
+ * @param {string|Object} field - Schema field definition
+ * @returns {string|Object} - Lean field definition
+ */
+function extractSchemaField(field) {
+  // Shorthand: 'string', 'number', 'boolean'
+  if (typeof field === 'string') {
+    return field
+  }
+
+  if (!field || typeof field !== 'object') {
+    return field
+  }
+
+  const lean = {}
+
+  // Keep runtime-relevant fields
+  if (field.type) lean.type = field.type
+  if (field.default !== undefined) lean.default = field.default
+  if (field.options) lean.options = field.options
+
+  // Handle array 'of' - can be string, schema name, or inline object
+  if (field.of !== undefined) {
+    if (typeof field.of === 'string') {
+      lean.of = field.of
+    } else if (typeof field.of === 'object') {
+      // Inline schema definition
+      lean.of = extractSchemaFields(field.of)
+    }
+  }
+
+  // Handle nested object 'schema'
+  if (field.schema && typeof field.schema === 'object') {
+    lean.schema = extractSchemaFields(field.schema)
+  }
+
+  // If we only have 'type' and it's a simple type, use shorthand
+  const keys = Object.keys(lean)
+  if (keys.length === 1 && keys[0] === 'type' && ['string', 'number', 'boolean'].includes(lean.type)) {
+    return lean.type
+  }
+
+  return keys.length > 0 ? lean : null
+}
+
+/**
+ * Extract lean schema fields for an entire schema object
+ *
+ * @param {Object} schemaFields - Map of fieldName -> field definition
+ * @returns {Object} - Map of fieldName -> lean field definition
+ */
+function extractSchemaFields(schemaFields) {
+  if (!schemaFields || typeof schemaFields !== 'object') {
+    return {}
+  }
+
+  const lean = {}
+  for (const [name, field] of Object.entries(schemaFields)) {
+    const leanField = extractSchemaField(field)
+    if (leanField !== null) {
+      lean[name] = leanField
+    }
+  }
+  return lean
+}
+
+/**
+ * Extract lean schemas from meta.js schemas object
+ * Strips editor-only fields while preserving structure
+ *
+ * @param {Object} schemas - The schemas object from meta.js
+ * @returns {Object|null} - Lean schemas or null if empty
+ */
+function extractSchemas(schemas) {
+  if (!schemas || typeof schemas !== 'object') {
+    return null
+  }
+
+  const lean = {}
+  for (const [schemaName, schemaFields] of Object.entries(schemas)) {
+    const leanSchema = extractSchemaFields(schemaFields)
+    if (Object.keys(leanSchema).length > 0) {
+      lean[schemaName] = leanSchema
+    }
+  }
+
+  return Object.keys(lean).length > 0 ? lean : null
+}
+
 /**
  * Extract param defaults from params object
  *
@@ -102,6 +195,15 @@ export function extractRuntimeSchema(fullMeta) {
     runtime.initialState = fullMeta.initialState
   }
 
+  // Schemas - lean version for runtime validation/defaults
+  // Strips editor-only fields (label, hint, description)
+  if (fullMeta.schemas) {
+    const schemas = extractSchemas(fullMeta.schemas)
+    if (schemas) {
+      runtime.schemas = schemas
+    }
+  }
+
   return Object.keys(runtime).length > 0 ? runtime : null
 }
 

package/src/site/asset-processor.js

@@ -166,6 +166,33 @@ export async function processAssets(assetManifest, options = {}) {
   return { pathMapping, results }
 }
 
+/**
+ * Recursively rewrite asset paths in a data object
+ *
+ * @param {any} data - Parsed JSON/YAML data
+ * @param {Object} pathMapping - Map of original paths to new paths
+ * @returns {any} Data with rewritten paths
+ */
+function rewriteDataPaths(data, pathMapping) {
+  if (typeof data === 'string') {
+    return pathMapping[data] || data
+  }
+
+  if (Array.isArray(data)) {
+    return data.map(item => rewriteDataPaths(item, pathMapping))
+  }
+
+  if (data && typeof data === 'object') {
+    const result = {}
+    for (const [key, value] of Object.entries(data)) {
+      result[key] = rewriteDataPaths(value, pathMapping)
+    }
+    return result
+  }
+
+  return data
+}
+
 /**
  * Rewrite asset paths in ProseMirror content
  *
@@ -188,6 +215,11 @@ export function rewriteContentPaths(content, pathMapping) {
       }
     }
 
+    // Rewrite paths in data blocks (structured data parsed at build time)
+    if (node.type === 'dataBlock' && node.attrs?.data) {
+      node.attrs.data = rewriteDataPaths(node.attrs.data, pathMapping)
+    }
+
     // Recurse into content
     if (node.content && Array.isArray(node.content)) {
       node.content.forEach(walk)

package/src/site/assets.js

@@ -50,6 +50,72 @@ function isPdfPath(src) {
   return src.toLowerCase().endsWith(PDF_EXTENSION)
 }
 
+/**
+ * Check if a string looks like a local asset path
+ *
+ * @param {string} value - String to check
+ * @returns {boolean} True if it looks like a local asset path
+ */
+function isLocalAssetPath(value) {
+  if (typeof value !== 'string' || !value) return false
+
+  // Skip external URLs
+  if (isExternalUrl(value)) return false
+
+  // Must start with ./, ../, or / (absolute site path)
+  if (!value.startsWith('./') && !value.startsWith('../') && !value.startsWith('/')) {
+    return false
+  }
+
+  // Must have a media extension
+  return isImagePath(value) || isVideoPath(value) || isPdfPath(value)
+}
+
+/**
+ * Recursively walk a parsed data object and collect asset paths
+ *
+ * @param {any} data - Parsed JSON/YAML data
+ * @param {Function} visitor - Callback for each asset path: (path) => void
+ */
+function walkDataAssets(data, visitor) {
+  if (typeof data === 'string') {
+    if (isLocalAssetPath(data)) {
+      visitor(data)
+    }
+    return
+  }
+
+  if (Array.isArray(data)) {
+    data.forEach(item => walkDataAssets(item, visitor))
+    return
+  }
+
+  if (data && typeof data === 'object') {
+    Object.values(data).forEach(value => walkDataAssets(value, visitor))
+  }
+}
+
+/**
+ * Walk ProseMirror content and collect assets from data blocks
+ * Data blocks have pre-parsed structured data (parsed at content-reader build time)
+ *
+ * @param {Object} doc - ProseMirror document
+ * @param {Function} visitor - Callback for each asset: (path) => void
+ */
+function walkDataBlockAssets(doc, visitor) {
+  if (!doc) return
+
+  // dataBlock nodes have pre-parsed data in attrs.data
+  if (doc.type === 'dataBlock' && doc.attrs?.data) {
+    walkDataAssets(doc.attrs.data, visitor)
+  }
+
+  // Recurse into content
+  if (doc.content && Array.isArray(doc.content)) {
+    doc.content.forEach(child => walkDataBlockAssets(child, visitor))
+  }
+}
+
 /**
  * Resolve an asset path to absolute file system path
  *
@@ -215,6 +281,22 @@ export function collectSectionAssets(section, markdownPath, siteRoot) {
     }
   }
 
+  // Collect from tagged code blocks (JSON/YAML data)
+  if (section.content) {
+    walkDataBlockAssets(section.content, (assetPath) => {
+      const result = resolveAssetPath(assetPath, markdownPath, siteRoot)
+      if (!result.external && result.resolved) {
+        assets[assetPath] = {
+          original: assetPath,
+          resolved: result.resolved,
+          isImage: result.isImage,
+          isVideo: result.isVideo,
+          isPdf: result.isPdf
+        }
+      }
+    })
+  }
+
   return { assets, hasExplicitPoster, hasExplicitPreview }
 }